Streaming Media Assignment

•

http://www.public.asu.edu/~edumenig/GIT337/3_3/index.html

HTML:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Netflix Media Streaming</title>
   <link href="styles.css" rel="stylesheet">
</head>
   <body>
   <div class="content-wrap">
       <header>
           <h1>Netflex</h1>
          <img class="net-logo" src="Images/Netflix-Logo-White.png" alt="Hillbilly Elegy">
                   <nav>
                   <ul>
                       <li>HOME</li>
                       <li>TV</li>
                       <li>MOVIES</li>
                       <li>NEW</li>
                       <li>MY LIST</li>
                   </ul>
                   </nav>
           </header>
       <section class="main-movie">
           <div class="feature-movie" >
               <div class="bottom-left">
               <h2>Hillbilly <span>Elegy</span></h2>
               <p>An urgent phone call pulls a Yale law student back
               <br>to his Ohio hometown, where he reflects on three
               <br>generations of family history and hisown future.</p> <iframe width="460" height="215" src="https://www.youtube.com/embed/4DACveSpQqQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
           </div>
               </div>
       </section>
       <section class="movie-list">
           <h2>MOVIES</h2>
           <div class="flex-container">
               <img class="item" src="Images/AdventuresBabysitting.png" alt="Adventures in Babysitting">
               <img class="item" src="Images/BillandTed.jpg" alt="Bill and Ted's Adventure">
               <img class="item" src="Images/Goonies.jpg" alt="Goonies">
               <img class="item" src="Images/HarryPotter.jpg" alt="Harry Potter">
               <img class="item" src="Images/MyFairLady.jpg" alt="My Fairy Lady">
               <img class="item" src="Images/theBirds.jpg" alt="The Birds">
               <img class="item" src="Images/TheColorPurple.jpg" alt="The Color Purple">
               <img class="item" src="Images/TheOutsiders.jpg" alt="The Ousiders">
           </div>
       </section>
       <section>
           <div class="discount">
           <h2>Sudents: Get Netflix for only for just $1.99/month</h2>
           <p>Stream everything netflix has to offer with our ad supported plan for just $1.99/month
           <br>(regularly $5.99/month.
           <br>65% discount as long as you’re a college student.</p>
           </div>
       </section>
   <main>
       <section class="plans">
   <h2>PLAN 1</h2>
           <p>• $15.99</p>
       <p>• 1 Device Stream</p>
       <p>• Cloud DVR 500 Hours</p>
       <p>• Ads</p>
       </section>
       <section class="plans">
   <h2>PLAN 2</h2>
           <p>• $25.99</p>
       <p>• Up to 4 Device Streams</p>
       <p>• Cloud DVR 1000 Hours</p>
       <p>• Ad Free</p>
       </section>
   </main>
           <footer>
                   <p>©2021 Netflix</p>
           </footer>
       </div>
   </body>
</html>

CSS:

@charset "UTF-8";
/* CSS Document */

body{
   background-color: black;
   font-color: white;
   font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"
}
h1 {
   visibility: hidden;
}
.content-wrap {
   margin: 0 auto;
}

/*HEADER*/
nav{
background-color: red;
   padding: 20px;
}
ul{
list-style-type: none;
margin: 0 auto;
}
li{
display: inline;
color: white;
padding: 100px;
}
.net-logo {
   width: 115px;
height: 46px;
border-radius: 100%;
overflow: hidden;
margin-top: -100px;
   padding: 10px;
}

/*MAIN MOVIE LARGE*/
.main-movie {
background-color: #000000;
}

.feature-movie {
   background-size: cover;
   position: relative;
   background-repeat: no-repeat;
   padding: 350px;
   border-radius: 10px;
   background-image: url("../3_3/Images/HillbillyElegy2.jpg")
}
h2 {
   font-size: 45px;
}
h2 span {
   font-weight: 200;
}
.bottom-left {
   color: white;
   position: absolute;
bottom: -400px;
left: -375px;
   padding-left: 400px;
   padding-bottom: 400px;
}

/*ROWS OF MOVIE IMAGES*/

.movie-list {
   background: #000000;
}
.flex-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.item {
   margin: 30px;
   flex-basis: auto;
   border-radius: 5px;
}

/*STUDENT DISCOUNT SECTION*/
.discount {
   background: #2E2E2E;
   width: 100%;
   text-align: center;
   padding-top: 20px;
   padding-bottom: 30px;
   border-radius: 5px;
}
p, .discount {
   color: white;
   font-size: 20px;
   font-weight: 100;
   line-height: 30px;
}

/*PLANS*/
.plans {
   width: 75%;
   background: red;
   border-radius: 5px;
}
main {
   display: flex;
}
main section {
flex:1;
margin:50px;
padding: 10px;
color:#ffffff;
   text-align: center;
}
main h2 {
   font-size: 50px;
   font-weight: 600;
   line-height: 10px;
   font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"
}
main p {
   font-size: 30px;
   font-weight: 300;
   line-height: 10px;
   font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"
}

/*FOOTER*/
footer{
background: red;
color: white;
width: 100%;
}

/*Media
@media screen and (min-width:700px)*/
@media only screen and (max-width: 1326px) {
   li {
       display: block;
       padding: 2px;
   }
}
@media only screen and (max-width: 400px) {
   nav {
       display: none;
   }
}

@media only screen and (max-width: 1162px) {
   .discount {
           font-size: 20px;
           line-height: 40px;
   }
}
@media only screen and (max-width: 880px) {
   main {
       display: block;
   }
}

Streaming Media Assignment

Published: February 12th 2021

Follow Following Unfollow

Streaming Media Assignment

Owner

Streaming Media Assignment

Tools

Creative Fields