I am working on the last part of my Front End fundamentals course with Pirple.com, for this project i need to emulate a famous site´s website, I chose Netflix. I am happy for the most part, however I still need to figure out how to make work some stuff, but the layover part, what you can see, i think is working ok. I am attaching a print screen of the actual Netflix Site and my mockup.

And this is my code.

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<title>Netflix look alike</title>
</head>

<body>
<div class=”box”>
<img src=”https://i.imgur.com/1h3snCn.png” alt=”catalog background”>

<div id=”back”>
<select id=”ddselect”>
<option>English</option>
<option>Español</option>
</select>

<div class=”containersignin”>
<button class=”btn0″> Sign In </button>
</div>

</div>

<h4>Unlimited Movies, Tv shows and more.</h4>
<p>Watch anytime. Cancel anytime.</p>
<p .ckass=”emailbox”>Ready to watch? Enter your email to create or restart your
membership. </p>

<div class=”respstart”>

<div class=”send”><input type=”text” value=”Enter your e-mail”/> </div>

<div class=”buttonstart”>
<button class=”btn”> Get Started > </button>
</div>
</div>

<id=”back”>

</div>
<div>
<hr class=”solid”>
</div>

<div class=”rest”>
<div class=”stackup”><h2>Enjoy your TV.</h2>

<p>Watch on smart TVs, Playstation, Xbox, Chromecast, Apple TV,
Blu-ray players, and more.</p> </div>

<img src=”https://i.imgur.com/AHxXqkH.gif” alt=”orange is the new black”>
</div>

<hr class=”solid”>

<div class=”stackup”>
<div class=”container1″>

<div class=”rest”>

<img src=”https://i.imgur.com/k5le5MN.jpg” alt=”download your favorite shows”>

<h2>Download your shows to watch online.</h2>

<p>Save your favorites easily and always have something to watch.</p>
</div>
</div>
</div>

<hr class=”solid”>

<div class=”third”>
<div class=”stackup”>
<h2>Watch everywhere.</h2>
<p>Stream unlimited movies and tv shows on your phone, tablet, laptop,
and TV without paying more.</p> </div>

<img src=”https://i.imgur.com/9b6PAJx.gif” alt=”stranger things costumes”>
</div>
<hr class=”solid”>

<h2> Frequently asked questions </h2>

</div>

<section>
<div class=”containerfaq”>
<div class=”accordion”>
<div class=”accordion-item” id=”question1″>
<a class=”accordion-link” href=”#question1″>
What is Netflix?
<i class=”icon ion-md-add”></i>
<i class=”icon ion-md-remove”></i>
</a>
<div class=”answer”>
<p>
Netflix is a streaming service that offers a wide
variety of award-winning Tv shows, movies, anime, documentaries,
and more on thousands of internet-connected devices.
</p>
</div>
</div>
<div class=”accordion-item” id=”question2″>
<a class=”accordion-link” href=”#question2″>
How much does Netflix cost?
<i class=”icon ion-md-add”></i>
<i class=”icon ion-md-remove”></i>
</a>
<div class=”answer”>
<p>Watch Netflix on your smartphone, tablet, Smart TV, laptop,
or streaming device, all for one fixed monthly fee. Plans range
from MXN139 to MXN266 a month. No extra costs, no contracts.
</p>
</div>
</div>
<div class=”accordion-item” id=”question3″>
<a class=”accordion-link” href=”#question3″>
Where can I watch?
<i class=”icon ion-md-add”></i>
<i class=”icon ion-md-remove”></i>
</a>
<div class=”answer”>
<p> Watch anywhere, anytime, on an unlimited number of
devices. Sign in with your Netflix account to watch
instantly on the web at netflix.com from your personal
computer or on any internet-connected device that
offers the Netflix app, including smart TVs,
smartphones, tablets, streaming media players and
game consoles.

You can also download your favorite shows with
the iOS, Android, or Windows 10 app. Use downloads
to watch while you’re on the go and without an
internet connection. Take Netflix with you anywhere.
</p>
</div>
</div>
<div class=”accordion-item” id=”question4″>
<a class=”accordion-link” href=”#question4″>
How do I cancel?
<i class=”icon ion-md-add”></i>
<i class=”icon ion-md-remove”></i>
</a>
<div class=”answer”>
<p>Netflix is flexible. There are no pesky contracts and
no commitments. You can easily cancel your account online
in two clicks. There are no cancellation fees – start or
stop your account anytime.
</p>
</div>
</div>
<div class=”accordion-item” id=”question5″>
<a class=”accordion-link” href=”#question5″>
What can I watch on Netflix?
<i class=”icon ion-md-add”></i>
<i class=”icon ion-md-remove”></i>
</a>
<div class=”answer”>
<p>Netflix has an extensive library of feature films,
documentaries, TV shows, anime, award-winning
Netflix originals, and more. Watch as much as you want,
anytime you want.
</p>
</div>
</div>
</div>
</div>
</section>

<p .class=”emailbox”>Ready to watch? Enter your email to create or restart your
membership. </p>

<div class=”send”> <input type=”text” value=”Enter your e-mail”/></div>

<div class=”buttonstart”>
<button class=”btn”> Get Started > </button>
</div>

<hr class=”solid”>

<div class=”footer”>
<p>
Questions? Call 800-283-3301
</p>

<div class=”colms”>
<ul>
<li>Faq</li>
<li>Account</li>
<li>Investor Relations</li>
<li>Redeem Gift Cards</li>
<li>Ways to Watch</li>
<li>Privacy</li>
<li>Corporate Information</li>
<li> Speed Test</li>
<li>Netflix Originals</li>
<li>Help Center</li>
<li>Media Center</li>
<li>Jobs</li>
<li>Buy Gift Cards</li>
<li>Terms of Use</li>
<li>Cookie Preferences</li>
<li>Contact Us</li>
<li>Legal Notices</li>
</ul>
</div>

<select id=”ddselect”>
<option>English</option>
<option>Español</option>
</select>

</div>

</body>
</html>
<style>
body {
background-color:black;
color:white;

}

mid {
font-size:px
}

p {
text-align:center;
font-family:sans-serif;
font-size:20px
}

h4 {
font-size:30px;
text-align:center;
font-family:sans-serif;
}

h2 {
margin:20px;
text-align:center;
}

.repstart {
display:flex;
}

.box {
background-image: url(“https://i.imgur.com/rl7CtpY.jpg”)

}

.send {
text-align:center;
font-family:sans-serif;
}

.rest {
font-family:sans-serif;
display:flex;
flex-flow:row wrap;
margin:10px;
text-align:center;
padding:100px
}

.rest img {
width:300px
}

.container1 {
text-align: center;
display:flex;
flex-flow:row wrap;
margin:100px
width:100px;
}

.container1 img {
width:300px;
}

.btn0 {
background-color: #f44336;
color:White

}

img {
width:100px;

}

.rest {
text-align:center;
}

.buttonstart {
text-align:center;
}

.orangeblack {
background-color:white;

}

#back {
text-align:right;
}

.container {
text-align:right;
}

.third {
display:flex;
flex-flow:row wrap;
margin:100px
}

.third img {
width:300px;

}

.stackup {
width:200
}

hr.solid {
border-top: 10px solid #383232;
margin-bottom:50px;
margin-top: 50px;
}

.btn {
border:1px solid #c0392b
background:none;
padding:7px 7px;
font-size:15px;
font-family:”montserrat”;
cursor:pointer;
margin:7px;
color:White;
transition:0.8s;
background-color: #f44336;
}

section {
width:100%;
height: 50vh;
background-color: black;
display:flex;
align-items:center;
justify-content: center;
}

.containerfaq {
width:100%;
max-width:800px;
margin:0 auto;
padding: 0 1.5rem;
}

.accordion-item {
background-color: #383232;
border-radius: .4rem;
margin-bottom: 1rem;
box-shadow: .5rem 2px .5rem rgba(0,0,0.1);
}

.accordion-link {
font-size: 25px;
color:rgba(255,255,255,.8);
text-decoration:none;
background-color: #383232;
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:1rem 0;
}

.accordion-link i {
color:red;
padding:.5rem;

}

.accordion-link .ion-md-remove{
display:none;
}

.answer {
max-height:0;
overflow:hidden;
position:relative;
background-color:#212838;
transition:max-height 650ms;
}

.answer::before{
content: “”;
position:absolute;
width:.6rem;
height:90%;
background-color: #red;
top:50%;
left:0;
transform:translateY(-50%);
}

.answer p {
font-size:1.4rem;
padding:2rem;
color:white;

}

.accordion-item:target .answer {
max-height:20 rem;

}

.footer {
color:gray;
}

.colms ul {
list-style:none;
padding-left:500px;
display:flex;
justify-content:space-around;

}

.colms ul li {
margin-left:20%;
margin-right:20%;

}

</style>

 

Categories: Uncategorized