Fluid/Flexible Layout Streaming Media Webpage
HTML5 Code for Webpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ToonTopia</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.typekit.net/scx8mro.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>ToonTopia</h1>
<nav>
<h2>Hi, Savannah!</h2>
<img src="img/profile.png" alt="user's profile picture">
<ul>
<li> <a href="#">My Account</a></li>
<li> <a href="#">Profiles</a></li>
<li> <a href="#">Settings</a></li>
<li> <a href="#">Log Out</a></li>
</ul>
</nav>
</header>
<main>
<section id="continue-section">
<div id="continue-left">
<!-- <img id="continue-pic" src="img/continue.JPG" alt="episode thumbnail"> -->
<video controls width="500">
<source src="video/futurama.mp4" type="video/mp4">
Sorry, your browser does not support embedded videos :(.
</video>
<h4>Continue Watching</h4>
<h5>TV14 ∙ Animation, Comedy ∙ TV Series ∙ 1999</h5>
<img id="play-button" src="img/play.png" alt="play button">
</div>
<div id="continue-right">
<h3>S6 E7 ∙ Neutopia</h3>
<p>Things get a little strange for the planet express crew when an unexpected detour to a new planet leads to everyone's genders being switched. Will they be able to get their correct parts back?</p>
<img id="play-bar" src="img/bar.png" alt="time bar that shows progress through show.">
<p>10 min. Left</p>
<img id="more-icon" src="img/more.png" alt="More information icon.">
<img id="add-icon" src="img/add.png" alt="Add show to list icon.">
<img id="group-icon" src="img/group.png" alt="Start group watch party icon.">
</div>
</section>
<section id="episode-list">
<h3>Episodes</h3>
<h4>Season 7</h4>
<section id="robot-planet">
<h5>Episode 8: Robot Planet</h5>
<img id="ep-1" src="img/ep1.JPG" alt="Futurama episode thumbnail.">
<img class="play" src="img/play.png" alt="play button">
<p>Fry, Bender, & the gang run into some trouble while making a delivery to a robot-inhabited planet. Little do they know, things are about to get even wrose...</p>
</section>
<section id="robot-mafia">
<h5>Episode 9: Robot Mafia</h5>
<img id="ep-2" src="img/ep2.JPG" alt="Episode thumbnail">
<img class="play" src="img/play.png" alt="play button">
<p>The Planet Express crew adjusts to a new pecking order after Leela is temporarily blinded in a cooking accident. Bender decides to join the robot mafia to make some extra cash.</p>
</section>
<section id="time-travel">
<h5>Episode 10: Time Travel</h5>
<img id="ep-3" src="img/ep3.JPG" alt="Episode thumbnail">
<img class="play" src="img/play.png" alt="play button">
<p>A romantic evening Leela and fry have planned is unexpectedly interupted when a time machine the professor has created malfunctions.</p>
</section>
</section>
</main>
<footer>
<ul>
<li><a href="#">Browse</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Tech Support</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</footer>
</div>
</body>
</html>
CSS Code for Webpage
@charset "UTF-8";
/* CSS Document by Victoria Auer */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
/*------CSS RESET-----*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*------GLOBAL STYLES-----*/
/*Color Pallette
Header/Footer purple: #312b40
Font purple: #c6b8d9
Episodes box purple: #806fa6
Continue box purple: #5e4f73 */
html {
background-color: #806fa6;
font-family: bungee, sans-serif;
font-weight: 400;
font-style: normal;
color: #c6b8d9;
}
#wrapper {
min-width:929px;
max-width:1205px;
margin: 0 auto;
}
header, footer {
background-color: #312b40;
}
header {
border: 2px solid #c6b8d9;
display: flex;
}
nav {
width: 30%
}
nav ul {
visibility: hidden;
height: 0;
}
nav img {
display: inline-block;
position: relative;
}
a {
text-decoration: none;
}
header h1 {
font-size: 50px;
margin: 30px;
display: inline-block;
width: 70%;
}
header h2 {
font-size: 20px;
margin: 10px;
display: inline-block;
}
header img {
margin: 10px;
}
p {
font-size: 20px;
}
#continue-section {
background-image: url("img/title.JPG");
background-size: cover;
display: flex;
}
#continue-section div {
flex: 1;
position: relative;
padding: 60px 30px 0px 30px;
text-align: center;
}
#continue-left h4 {
font-size: 30px;
margin: 15px;
}
#continue-left h5 {
font-size: 15px;
margin: 10px;
}
#continue-right h3 {
font-size: 30px;
margin: 15px;
}
#continue-right p {
margin: 15px;
}
#continue-right {
margin-top: 30px;
}
#play-button {
height: 80px;
}
#play-bar {
margin: 10px;
}
#more-icon {
width: 40px;
margin: 10px;
}
#add-icon {
width: 40px;
margin: 10px;
}
#group-icon {
width: 40px;
margin: 10px;
}
#episode-list {
background-color: #5e4f73;
padding-bottom: 70px;
}
#episode-list h3 {
font-size: 40px;
margin: 15px;
text-align: center;
}
#episode-list h4 {
font-size: 30px;
margin: 15px;
text-align: center;
}
#episode-list h5 {
font-size: 25px;
margin-left: 400px;
margin-top: 60px;
}
#episode-list img {
float: left;
position: relative;
margin-left: 40px;
width: 300px;
margin-bottom: 45px;
}
#robot-planet h5, #robot-mafia, #robot-mafia h5, #time-travel, #time-travel h5, footer {
clear:left;
}
#episode-list .play {
width: 40px;
position: relative;
top: 70px;
right: 205px;
}
#episode-list p {
margin-top: 50px;
margin-bottom: 30px;
}
#episode-list section {
margin: 20px;
}
footer {
color:#c6b8d9;
display: flex;
}
footer ul {
column-count: 4;
}
footer li {
text-decoration: none;
text-align: center;
}
