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)

Nothing too fancy here ...

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 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>

CSS - paste this in your CSS file


.bioBox {
clear: both;/*needed because .bioPic has float:left to avoid overlapping */
min-height: 250px;
height: auto;
width: 100%;
}
.bioPic {
width: 200px;
height: 226px;/*200 for pic and 26 for audio controller */
float: left;
margin-right: 20px;
margin-bottom: 20px;
margin-top: 7px;
}
.bioPic audio {
width: 100%;
height: 26px;
margin-top: 5px;
}
.bioName {
font-size: 1.5em;
font-weight: bold;
}

Javascript

No scripts needed.