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.
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
Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text
Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text Bio 2 text
Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text
Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text
Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text Bio 3 text 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.