index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="main">
<div id="header">
<div class="backgrounColor"></div>
<div id="nav">
<div class="nLeft">
<img src="assets/Netflix_2015_logo.svg" alt="">
</div>
<div class="nRight">
<select name="" id="">
<option value="">English</option>
<option value="">Hindi</option>
</select>
<button onclick="Sign()">Sign In</button>
</div>
</div>
<div id="container">
<h1>Unlimited movies, TV shows and more.</h1>
<p>Watch anywhere. Cancel anytime.</p>
<p>Ready to watch? Enter your email to create or restart your membership.</p>
<div class="searchBox">
<input type="search" placeholder="Email address">
<button>Get Started</button>
</div>
</div>
</div>
<div class="line"></div>
<div id="page1">
<div class="pLeft">
<div class="container">
<h1>Enjoy on your TV.</h1>
<p>Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and more.</p>
</div>
</div>
<div class="pRight">
<div class="container">
<video src="assets/video-tv-in-0819.m4v" loop autoplay></video>
<img src="assets/tv.png" alt="">
</div>
</div>
</div>
<div class="line"></div>
<div id="page1">
<div class="pRight">
<div class="container">
<!-- <video src="assets/video-tv-in-0819.m4v" autoplay></video> -->
<img src="assets/mobile-0819.jpg" alt="">
</div>
</div>
<div class="pLeft">
<div class="container">
<h1>Download your shows to watch offline.</h1>
<p>Save your favourites easily and always have something to watch..</p>
</div>
</div>
</div>
<div class="line"></div>
<div id="page1">
<div class="pLeft">
<div class="container">
<h1>Enjoy on your TV.</h1>
<p>Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and more.</p>
</div>
</div>
<div class="pRight">
<div class="container">
<video class="device-video" src="assets/video-devices-in.m4v" autoplay loop></video>
<img src="assets/device-pile-in.png" alt="">
</div>
</div>
</div>
<div class="line"></div>
<div id="page1">
<div class="pRight">
<div class="container">
<!-- <video class="device-video" src="assets/video-devices-in.m4v" autoplay loop></video> -->
<img src="assets//childs.png" alt="">
</div>
</div>
<div class="pLeft">
<div class="container">
<h1>Create profiles for children.</h1>
<p>Send children on adventures with their favourite characters in a space made just for them—free with your membership.</p>
</div>
</div>
</div>
<div class="line"></div>
<div id="page2">
<h1>Frequently Asked Questions</h1>
<div class="container">
<p>What is Netflix?</p>
<img src="assets/172525_plus_icon.svg" alt="">
</div>
<div class="container">
<p>What is Netflix?</p>
<img src="assets/172525_plus_icon.svg" alt="">
</div>
<div class="container">
<p>How much does Netflix cost?</p>
<img src="assets/172525_plus_icon.svg" alt="">
</div>
<div class="container">
<p>Where can I watch?</p>
<img src="assets/172525_plus_icon.svg" alt="">
</div>
<div class="container">
<p>How do I cancel?</p>
<img src="assets/172525_plus_icon.svg" alt="">
</div>
<div class="container">
<p>What can I watch on Netflix?</p>
<img src="assets/172525_plus_icon.svg" alt="">
</div>
<div class="container">
<p>Is Netflix good for kids?</p>
<img src="assets/172525_plus_icon.svg" alt="">
</div>
<div class="searchBox">
<div class="box">
<p>Ready to watch? Enter your email to create or restart your membership.</p>
<div class="search">
<input type="search" placeholder="Email address">
<button>Get Started</button>
</div>
</div>
</div>
</div>
<div class="line"></div>
<div id="page3">
<p>Questions? Call 000-800-919-1694</p>
<div class="container">
<div class="left">
<p><a href="">FAQ</a></p>
<p><a href="">Media Centre</a></p>
<p><a href="">Ways to Watch</a></p>
<p><a href="">Cookie Preferences</a></p>
<p><a href="">Speed Test</a></p>
<select name="" id="">
<option value="">English</option>
<option value="">Hindi</option>
</select>
<p id="netflix">Netflix India</p>
</div>
<div class="left">
<p><a href="">
Help Centre</a></p>
<p><a href="">Investor Relations</a></p>
<p><a href="">Terms of Use</a></p>
<p><a href="">Cookie Preferences</a></p>
<p><a href="">Legal Notices</a></p>
</div>
<div class="left">
<p><a href="">Account</a></p>
<p><a href="">Jobs</a></p>
<p><a href="">Privacy</a></p>
<p><a href="">Contact Us</a></p>
<p><a href="">Only on Netflix</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: gilroy;
}
html,body{
width: 100%;
height: 100%;
/* background-color: var(--background); */
background-color:black;
}
:root{
--background : #E50914;
--textHidingSize: 42px;
--textHidingSizesH1: 22px;
--textSize:18px;
--textColor:#ffff;
}
#main{
width: 100%;
height: 100%;
}
/* // header */
#header{
width: 100%;
height: 100vh;
background-image: url("assets/logo.jpg");
background-position: center;
background-size: cover;
}
.backgrounColor{
width: 100%;
position: absolute;
height: 100%;
background-color: #000000af;
}
#header #nav{
width: 100%;
height: 10%;
position: absolute;
display: flex;
justify-content: space-between;
padding: 0 52px;
}
#header .nLeft img{
width: 10%;
margin-top: 25px;
}
#header .nRight {
margin-top: 20px;
}
#header .nRight select{
padding: 8px 20px;
border-radius: 5px;
background: none;
color: var(--textColor);
font-size: 16px;
}#header .nRight button{
padding: 8px 20px;
background-color: var(--background);
border-radius: 5px;
border: 2px solid var(--background);
font-weight: 500;
font-size: 16px;
color: var(--textColor);
margin-left: 20px;
}
#header #container{
color: var(--textColor);
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
#header #container h1{
font-size: var(--textHidingSize);
font-weight: 800;
}
#header #container p{
font-size: var(--textSize);
margin-top: 10px;
color: var(--textColor);font-weight: 500;
}
#header #container .searchBox{
margin-top: 20px;
}
#header #container .searchBox input{
width: 50%;
padding: 15px 20px;
border: 1px solid var(--textColor);
border-radius: 5px;
background-color:rgba(0, 0, 0, 0.71);
color: white;
font-size: var(--textSize);
}
#header #container .searchBox button{
padding: 15px 20px;
font-size: var(--textSize);
margin-left: 6px;
color: var(--textColor);
background-color: var(--background);
border-radius: 5px;
border: 1px solid var(--background);
}
/* // header \\ */
/* line */
.line{
width: 100%;
height: 10px;
background-color:rgb(32, 32, 32);
}
/* // line \\ */
/* page1 */
#page1{
width: 100%;
height: 50vh;
background-color: black;
display: flex;
justify-content: space-between;
color: var(--textColor);
position: relative;
}
#page1 .pLeft{
position: relative;
width: 50%;
}
#page1 .pLeft .container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#page1 .pLeft .container h1{
font-size: var(--textHidingSize);
font-weight: 800;
width: 100%;
}
#page1 .pLeft .container p{
font-size: var(--textSize);
font-weight: 500;
}
#page1 .pRight{
width: 50%;
height: 100%;
position: relative;
}
#page1 .pRight .container{
width: 80%;
position: absolute;
top: 20%;
left: 70%;
transform: translate(-50%,-50%);
}
#page1 .pRight img{
width: 50%;
position: absolute;
top: 0;
}
#page1 .pRight video{
width: 50%;
position: absolute;
}
#page1 .pRight .device-video{
width: 30%;
left: 9.7%;
position: absolute;
margin-top: 20px;
}
/* page1 \\ */
/* // page2 */
#page2{
width: 100%;
height: 120vh;
color: var(--textColor);
background-color:black
}
#page2 h1{
text-align: center;
font-size: var(--textHidingSize);
padding: 20px 20px;
}
#page2 .container{
width: 80%;
height: 10vh;
background-color:rgb(28, 28, 28);
margin-left: 10%;
margin-top: 20px;
display: flex;
justify-content: space-between;
}
#page2 .container:hover{
width: 80%;
height: 10vh;
background-color:rgb(48, 48, 48);
margin-left: 10%;
margin-top: 20px;
display: flex;
justify-content: space-between;
}
#page2 .container p{
font-size: 20px;
font-weight: 500;
margin: 25px;
margin-right: 10px;
}
#page2 .container img{
width: 5%;
margin-right: 10px;
}
#page2 .searchBox{
height: 15%;
position: relative;
}
#page2 .searchBox .box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
font-size: var(--textSize);
font-weight: 500;
}
#page2 .searchBox .box p{
font-size: 20px;
font-weight: 500;
}
#page2 .searchBox .box .search{
margin-top: 10px;
}
#page2 .searchBox .box .search input{
width: 50%;
border-radius: 5px;
padding: 10px 20px;
font-size: var(--textSize);
border: 1px solid var(--textColor);
}
#page2 .searchBox .box .search button{
padding: 10px 20px;
background-color: var(--background);
border-radius: 5px;
border: 1px solid var(--background);
color: var(--textColor);
font-size: var(--textSize);
margin-left: 5px;
font-weight: 500;
}
/* // page2 \\ */
/* //page3 */
#page3{
width: 100%;
height: 60vh;
background-color: black;
color: var(--textColor);
padding: 30px;
position: relative;
}
#page3 p{
font-size: var(--textSize);
}
#page3 .container{
width: 60%;
height:60%;
display: flex;
justify-content: space-between;
position: absolute;
left: 20%;
margin-top: 40px;
}
#page3 .container .left{
height: 100%;
width: 33.3%;
}
#page3 .container .left p{
font-size: 14px;
margin-top: 15px;
}
#page3 .container .left p a{
color: #c6c6c6;
}#page3 .container .left select{
padding: 10px 30px;
margin-top: 40px;
border: none;
}
#page3 .container .left #netflix{
font-size: 16px;
font-weight: 500;
margin-top: 30px;
}
output: -
Post a Comment