JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4650 x5090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Another example of displaying Bios (or other content)

Paste in a brief introduction to all interviews - why you recorded interviews and why you choose these particular people to interview for your Documentary Project.

Name of person 1
Bio 1 name

Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text

Name of person 2
Bio 2 name

Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text

Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text

Name of person 3
Bio 3 name

Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text

Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text

Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text

HTML Code - paste in your Bio Section

This HTML code requires you to have in your project3/images folder bio1.png, bio2.png, bio3.png - each with dimensions 200x200 pixels (resolution of 72 ppi).

This HTML code also requires you to have in your project3/media folder bio1Interview.mp3, bio2Interview.mp3, bio3Interview.mp3.


<p>Paste in a brief introduction to all interviews - why you recorded interviews and why you choose these particular people to interview for your Documentary Project.</p>
<div id="allBios">
<div class="bioBox" id="bioBox1">
<div class="bioPic" id="bioPic1"><img src="project3/images/bio1.png" width="200" height="200" alt="Name of person 1"/>
<audio controls>
<source src="project3/media/bio1Interview.mp3" type="audio/mp3"/>
</audio>
</div>
<div class="bioName" id="bioName1">Bio 1 name</div>
<div class="bioText" id="bioText1">
<p>Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text </p>
</div>
</div>
<div class="bioBox" id="bioBox2">
<div class="bioPic" id="bioPic2"><img src="project3/images/bio2.png" width="200" height="200" alt="Name of person 2"/>
<audio controls>
<source src="project3/media/bio2Interview.mp3" type="audio/mp3"/>
</audio>
</div>
<div class="bioName" id="bioName2">Bio 2 name</div>
<div class="bioText" id="bioText2">
<p>Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text </p>
<p>Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text </p>
</div>
</div>
<div class="bioBox" id="bioBox3">
<div class="bioPic" id="bioPic3"><img src="project3/images/bio3.png" width="200" height="200" alt="Name of person 3"/>
<audio controls>
<source src="project3/media/bio3Interview.mp3" type="audio/mp3"/>
</audio>
</div>
<div class="bioName" id="bioName3">Bio 3 name</div>
<div class="bioText" id="bioText3">
<p>Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text </p>
<p>Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text </p>
<p>Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text </p>
</div>
</div>
</div>

CSS - paste this in your CSS file


#allBios {
display: flex;
justify-content: space-between;
}
.bioBox {
height: 250px;
width: 33%;
overflow: hidden;
margin: 10px;
padding: 5px;
text-align: center;
border: solid 1px #5C5C5C;
box-sizing: border-box;
-webkit-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
transition: all 1s ease-in-out 0s;
}
.bioBox:hover {
height: auto;
cursor: pointer;
}
.bioPic {
max-width: 200px;
width: 100%;
height: auto;/*200 for pic and 26 for audio controller */
margin: 10px;
}
.bioPic audio {
width: calc(100% - 30px);
height: 26px;
margin-top: 5px;
}
.bioName {
font-size: 1.5em;
font-weight: bold;
text-align: center;
}
.bioText {
width: 100%;
height: auto;/*200 for pic and 26 for audio controller */
padding: 10px;
text-align: left;
}
@media screen and (max-width:667px){ /*for mobile devices*/
#allBios {
display: block;
}
.bioBox {
width: 100%;
height: auto;
overflow: visible;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.bioBox:hover {
height: auto;
cursor:auto;
}
.bioPic {
margin: 0 auto;
}
.bioPic audio {
width: 100%;
}
}

Javascript

No scripts needed.