15+ CSS Netflix Login Page Examples

This post contains a total of 15+ CSS Netflix Login Page Examples with Source Code. All these Netflix Login Pages are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Netflix Login Page Examples

1. Netflix clone

Made by Charles Utibe David. Simple CSS Netflix Sign In & Sign Up page clone. Source

<!DOCTYPE html>
<html lang="en-us">
    <head>  
        <meta charset="utf-8">
        <meta name="author" content="Najmuddin">
        <meta name="keywords" content="netflix,webseries,scaredgames">
        <meta name="description" content="paid webseries platform">
        <meta name="viewport"  content="width=device-width,initial-scale=1.0">
        <title>Netflix India</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style>
            html,body{
margin:0px;
    font-family: "'helvetica neue',helvetica,arial,sansa-serif";
    color:white;
    background:black;
    font-size:16px;
}
*{
    box-sizing: border-box;
}
header{
    background: linear-gradient(to right,rgba(0,0,0,0.9),rgba(0,0,0,0.5)),url('https://i.ibb.co/7gDXrZK/background.jpg');
    height:100vh;
    background-size:cover;
}
nav .logo,img{
    height:45px;
    width:167px;
    margin-left:3%;
    margin-top: 2%;
    vertical-align:middle;
}

nav a.logo{
    display:inline-block;
    line-height:90px;
}
nav .signin{
    float:right;
    color:#fff;
    background:#e50914;
    border-radius:3px;
    margin-right:3%;
    margin-top:28px;
    padding:7px 17px;
    font-weight:400;
    font-size:16px;
    text-decoration: none;
    
}

.pitch{
    margin:0 3%;
    position:absolute;
    top:35%;
    font-size:1.8vw;
}
.pitch_title{
    font-size:3em;
    margin:0 0 0 0.2em;
    font-weight:700px;
}
.pitch_subtitle{
    margin:0 0 0 0.9em;
}
.btn{
    font-size:14px;
    letter-spacing:1.9px;
    font-weight:400;
    margin:.5em 0.5em .5em .5em;
    padding:12px 2em;
    color:#fff;
    background:#e50914;
    cursor:pointer;
    text-decoration:none;
    vertical-align: center;
    font-family:Arial,sans-serif;
    border:2px;
    user-select:none;
}
.btn:hover,.signin:hover{
    background:#f40612;
}
            </style>
    </head>
    <body>
        <header>
            <nav>
                <svg  class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 81.387"><g fill="#b81d24"><path d="M256.09 76.212c4.178.405 8.354.84 12.52 1.29l9.198-22.712 8.743 24.807c4.486.562 8.97 1.152 13.44 1.768l-15.328-43.501L299.996 0H287.01l-.135.186-8.283 20.455L271.32.003h-12.822l13.237 37.565-15.644 38.644zM246.393 75.322V0h-12.817v74.265c4.275.33 8.552.684 12.817 1.056M150.113 71.11c3.46 0 6.916.026 10.366.054V43.492h15.397V31.708H160.48v-19.91h17.733V0h-30.6v71.12c.831 0 1.666-.013 2.5-.01M110.319 71.83c4.27-.152 8.544-.28 12.824-.384V11.8h11.98V.003H98.339V11.8h11.982v60.03h-.002zM12.295 79.772V34.897L27.471 77.96c4.667-.524 9.341-1.017 14.028-1.483V.001H29.201v46.483L12.825.001H0v81.384h.077c4.063-.562 8.14-1.096 12.218-1.613M85.98 11.797V.001H55.377V75.202a1100.584 1100.584 0 0 1 30.578-2.211V61.184c-5.916.344-11.82.74-17.71 1.181V43.497h15.397V31.706H68.245V11.797H85.98zM203.614 60.62V-.003h-12.873v71.876c10.24.376 20.44.9 30.606 1.56V61.619c-5.9-.381-11.81-.712-17.733-1"/></g></svg>
                <a class="signin" href="https://www.netflix.com">
                    sign in
                
                </a>
            
            
            </nav>
        
        
        
            <section class="pitch">

                <h1 class="pitch_title">Unlimitid movies, TV <br> show and more.</h1>
                <p class="pitch_subtitle">WATCH ANYWHERE.CANCEL ANYTIME</p>
                <br>
                <button class="btn">JOIN FREE FOR A MONTH</button>

            </section>
        </header>
        
    </body>
</html>

2. Fully functional Netflix login page

Made by Divya Mohan. Fully functional Netflix login page made using css. Source

<!DOCTYPE html>
<html>
    <head>
        <title>netflix mohan</title>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <style>
                      *{
    margin:0;
    padding:0;
    box-sizing:border-box ;
}
body {
    background:#222;
    color:#fff;
}
.lpage{
    display:flex;
    flex-flow:column nowrap;
background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQE4WQSK3mN0kgSOLXTmo-H3w49411dgtt6_ir9jwEhBfEZxj91gXbmQw4&s=10");
background-position:-20%;
    color:#fff;
    position:relative;
}
.lpage::before{
    content:" ";
    height:100%;
    width:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:0; background:radial-gradient(rgba(0,0,0,.4),rgba(0,0,0,1));
    }
.lpage > *{
    z-index:1;
}
.logo{
    width:90%;
    margin:auto;
    display:flex;
    justify-content:space-between;
    margin-top:20px;
    margin-bottom:30px;
}
.logoname{
    color:#E50914; 
    font-weight:bolder;
    font-size:24px;  
}
.signin{
    color:#fff;
    background:#E50914;
    padding:5px;
    border-radius:5px;
}
.lpage h2{
    width:90%;
    margin:auto;
    padding:5px 10px;
    text-align:center;
    margin-bottom:20px;
}
.lpage p{
    width:90%;
    margin:auto;
    padding:5px 15px;
    text-align:center;
    margin-bottom:20px;
}
.lpageMail{
    display:flex;
    flex-flow:column nowrap;
    width:90%;
    margin:auto;
}
.mail{
    padding:10px;    
    width:90%;
    margin:auto;
    margin-top:20px;
    border-radius:2px; 
    border:none;   
}
.btn{
    width:50%;
    margin:auto;
    margin-top:20px;
    padding:10px;
    background:#E50914;
    color:#fff;
    border:none;
    outline:none;
    border-radius:2px;
    margin-bottom:30px;
}

.tv,.mobile,.laptop,.faq{
    background:#000;
    margin-top:5px;
    display:flex;
    flex-flow:column nowrap ;
    padding:30px 0px;
}
.text{
    width:90%;
    margin:auto;
}
.text h2{
    width:90%; 
    margin:auto;
    text-align:center;
    margin-top:10px;
}
.text p{
    width:90%; 
    margin:auto;
    text-align:center;
    margin-top:20px;
    margin-bottom:20px;
}

.visual{
    width:90%;
    margin:auto;
    margin-bottom:20px;
}
.tvimg{
    width:70%;
    display:block;
    margin:auto;
    height:150px;
}
.ques{
    /* display:flex;
    flex-flow:column nowrap;
    */
    
    margin-bottom:20px;
    margin-top:20px;
    
}
.ques div{
    margin:auto;
    background:#333 ;
    padding:8px;
    font-size:18px;
    width:98%;
    margin-top:5px;
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #000;
}
.hide{
    display:none;
}
article{
    width:98%;
    margin:auto;
    padding:15px;
    word-break:break-all;
    background:#333 ;
}
.x{
    transform:rotateZ(45deg);
}
.faqp{
    width:90%;
    margin:auto;
    padding:5px 15px;
    text-align:center;
    margin-bottom:10px;
}
.contacts{
    width:90%;
    margin:auto;
    margin-top:20px;
    margin-bottom:20px;
    color:gray;
}
.navs{
   margin-bottom:20px;
}
.navs div{
    display:flex;
    justify-content:space-between;
    width:90%;
    margin:auto;
    margin-bottom:10px;
}
.navs div span{
    width:50%;
    text-align:left;
    font-size:12px;
    color:gray;
}
.navs div span:hover{
    text-decoration:underline ;
}
.lang{
    width:30%;
    margin-left:5%;
    color:#fff;
    border:1px solid gray;
    border-radius:2px;
    padding:8px 5px;
    display:flex;
    justify-content:space-around;
}
.link{
    width:40%;    
    margin:5%;
}
.link a{
    color:gray;
}
@media screen and (min-width:400px){
    
.tv,.laptop{
    flex-flow:row nowrap;
} 
.mobile{
    flex-flow:row-reverse nowrap;
}   
.lpageMail{
    flex-flow:row nowrap;
    width:70%;
    margin:auto;
    font-size:16px;
}  
.mail{
    width:70%;
    padding:10px;
    height:100%;
    border-radius:2px 0px 0px 2px ;
} 
.btn{
    width:30%;
    padding:10px;
    height:100%;
    border-radius:0px 2px 2px 0px ;
}   
.ques div{
    width:70%;
    margin:auto;
    margin-top:5px;
    border-bottom:1px solid #000;
}
article{
    width:70%;
    margin:auto;
    padding:15px;
    word-break:break-all;
    background:#333 ;
}
.navs{
    width:90%;
    margin:auto;
    display:flex;
    flex-flow:row wrap; 
    margin-bottom:20px;
}
.navs > div{    
    width:45%;
    margin:0px 0px 10px 0px;
}
      
}
                      </style>
     </head>
    <body>
        <div class="netflix">
            
            <!---header--->
            
            <div class="lpage">
                
            <div class="logo">
             <div class="logoname">
             NETFLIX             
             </div>
             
             <div class="signin">
                 Sign In
             </div> 
               
            </div>    
              
            <h2>
 Unlimited movies, TV shows and more.
            </h2>  
            
            <p>
   Watch anywhere. Cancel anytime.                  
            </p>
            <p>
          Ready to watch ? Enter your email to create or restart your membership.           
            </p>
            
            <div class="lpageMail">
             <input type="email"  class="mail" placeholder="email address">   
             <input type="button"  class="btn" value="Get Started &#62;">  
            </div>
                
            </div>
            
           <!---sections--->
           
       <div class="modes">
           
           <!---T.V.--->
           
           <div class="tv">
            
            <div class="text">                
                <h2>
                 Enjoy on your T.V.   
                </h2>
                <p>
                  Watch on smart TVs, PlayStations, Xbox, Chromecasts, Apple TV, Blu-ray players and more. 
                </p>
            </div>   
            <div class="visual">            
    <img class="tvimg" src="https://cdn.dribbble.com/users/1659456/screenshots/4830780/smart-tv-concept-part1.gif">  
            </div>   
           
               
           </div>
           
           <!---mobile--->
           
           <div class="mobile">
            
            <div class="text">                
                <h2>
 Download your shows to watch offline.    
                </h2>
                <p>
                 Save your favourites easily and always have something to watch. 
                </p>
            </div>   
            <div class="visual">            
    <img class="tvimg" src="https://images.squarespace-cdn.com/content/v1/59eaad3d80bd5e1f231169e4/1530633257119-E6XSO38WKH28F0B0LCM0/ke17ZwdGBToddI8pDm48kD33KhhWEodMJvcytjXFyvFZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIFbyG1bnTu2n2cGYUv9pFL8WtEMIRp8edI1V1pz5mx5E/Ipad-scene-outline-movies.gif">  
            </div>   
           
               
           </div>
           
           
           <!---laptop--->
           
           <div class="laptop">
            
            <div class="text">                
                <h2>
  Watch everywhere. 
                </h2>
                <p>
                  Stream unlimited movies and TV shows on your phone, tablet,laptop and TV.
                </p>
            </div>   
            <div class="visual">            
    <img class="tvimg" src="https://i.gifer.com/DXKh.gif">  
            </div>   
           
               
           </div>
           
           <!--- faq --->
           
            <div class="faq">
            
            <div class="text">                
                <h2>
  Frequently asked questions. 
                </h2>                
            </div>  
             
            <div class="ques">            
     
     <div class="qa"> <span> What is Netflix? </span><span class="xa" onclick="showansa()"> + </span> </div>
     <article class="ansa hide"></article>
      <div class="qb"><span>How much does Netflix cost? </span><span class="xb" onclick="showansb()"> + </span></div>
      <article class="ansb hide"></article>
      <div class="qc"><span> When i can watch? </span><span class="xc" onclick="showansc()"> + </span></div>
      <article class="ansc hide"></article> 
            <div class="qd"><span> How do i cancel? </span><span class="xd" onclick="showansd()"> + </span></div>
       <article class="ansd hide"></article>    
      <div class="qe"><span> What can i watch on Netflix? </span><span class="xe" onclick="showanse()"> + </span></div>
     <article class="anse hide"></article>
            </div>   
           
           <p class="faqp">
             Ready to watch ? Enter your email to create or restart your membership.   
           </p>
           
           <div class="lpageMail">
             <input type="email"  class="mail" placeholder="email address">   
             <input type="button"  class="btn" value="Get Started &#62;">  
            </div>
           
           
       </div> 
                                
           <!---footer--->
           
       <div class="footer">
         
         <div class="contacts">
          Questions? Call 000-800-040-1843  
         </div>  
         <div class="navs">
         
         <div> 
         <span> FAQ</span> 
         <span> Help Centre </span> 
         </div>
         <div> 
         <span>Account </span> 
         <span>Media Centre </span> 
         </div>
         <div> 
      <span>Investor Relations</span> 
         <span>Jobs </span> 
         </div>
         <div> 
         <span>Ways to Watch </span> 
         <span style="text-decoration:underline;"> Terms of Use</span> 
         </div>
         <div> 
         <span>Privacy </span> 
     <span>Cookies Preference</span> 
         </div>
         <div> 
   <span>Corporate information </span> 
         <span>Contact Us </span> 
         </div>
         <div> 
         <span>Speed Test </span> 
         <span>Legal Notices </span> 
         </div>
         <div> 
         <span>Netflix Originals </span> 
         <span> </span> 
         </div>
                      
         </div> 
         
         
         <div class="lang">
          <span><i class="fa fa-globe" aria-hidden="true"></i></span><span>English</span><span> <i class="fa fa-angle-down" aria-hidden="true"></i> </span>    
         </div>
         <div class="link">
            <a href="https://www.netflix.com/in/">Netflix India</a> 
         </div>
          
       </div>                           
       
      
            
        </div>
    </body>
    <script>
        
      var ansa = document.querySelector(".ansa");
      
      var ansb = document.querySelector(".ansb");
      
      var ansc = document.querySelector(".ansc");
      
      var ansd = document.querySelector(".ansd");
      
      var anse = document.querySelector(".anse");
      
         
      var xa = document.querySelector(".xa");
      
      var xb = document.querySelector(".xb");
      
      var xc = document.querySelector(".xc");
      
      var xd = document.querySelector(".xd");
      
      var xe = document.querySelector(".xe");
             
      var ansval = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum erat in risus vestibulum, id tincidunt ante tempus. Phasellus feugiat eros risus, vel pellentesque libero vehicula in."
      
    showansa = ()=>{
        
      ansa.innerHTML = ansval ;
      ansa.classList.toggle("hide") ;
      xa.classList.toggle("x");
        
    }   
    showansb = ()=>{
        
      ansb.innerHTML = ansval ;
      ansb.classList.toggle("hide") ; 
      xb.classList.toggle("x");
    }   
    showansc = ()=>{
        
      ansc.innerHTML = ansval ;
      ansc.classList.toggle("hide") ; 
      xc.classList.toggle("x");
    }   
    showansd = ()=>{
        
      ansd.innerHTML = ansval ;
      ansd.classList.toggle("hide") ; 
      xd.classList.toggle("x");  
    }   
    showanse = ()=>{
        
      anse.innerHTML = ansval ;
      anse.classList.toggle("hide") ; 
      xe.classList.toggle("x");
    }       
    
    
     
        
        
        
    </script>
    
    
    
</html>

3. Mobile Netflix Login Page

Made by Okereke. CSS Netflix login page made for mobile devices, its not responsive for desktop. Source

<!DOCTYPE html>
<html lang="en-US">
    <head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    
        <title>NETFLIX</title>
        <style>
            body {
    background-color:#000;
}


.div0 {

  
   width:22em;
   height:25em; background-image:url("https://i.ibb.co/PQ3phWt/Screenshot-20200512-221846-2.png")
}


.n {
    font-size:2em;
    color:red;
    position:relative;
    top:15px;
    h
}

.s {

    width:70px;
    height:25px;
    background-color:red;
    color:#FFF;
    border:1px solid rgba(0,0,0,0);
    border-radius:5px;
    position:relative;
    bottom:50px;
    left:280px;
    
}


p{
    
    color:white;
    font-size:29px;
    text-align:center;
    
}

.i1{
    width:80%;
    height:3em;
    margin-left:35px;
    
}

.i2{
    width:70%;
    height:3em;
    color:white;
    background-color:red;
    border:solid 1px rgba(0,0,0,0);
    margin-left:55px;
    
}

h1{
    color:white;
    text-align:center;
}

.d{
    background-color:#000;
    
}

.p2{
    
    white-space:pre-wrap;
    font-size:20px;
}
            </style>
    </head>
    
    
    <body>
    <div>
   <div class="div0"><h3 class="n">NETFLIX</h3>
    <button class="s">Sign in</button>
    <p>Unlimited movies,TV shows and more<br>
    
    </p>
    
    
    <input name="email "type="email" placeholder="Email address" class="i1">
    <br><br>
    
    <input class="i2" type="submit" value="ENJOY ALL OF NETFLIX"></div>
    
    <div class="d">
        <h1>Enjoy on your TV</h1>
        <p class="p2"> Watch on Smart TVs,Playstation,Xbox,Chromecast
        Apple Tvs ,Bluray Players and more  </p>
    </div>
    </div>
    
        
    </body>
</html>

4. Netflix signup page

Made by Daphine. Netflix signup page for mobile devices. Source

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="device=width-device" initial-scale=1.0>
    <link rel="stylesheet" >
        <title>Page Netflix</title>
    </head>
    <body>
    <style>
    
    html{
        padding:0;
        margin:0;
        box-sizing:border-box;
    }
        body{
        background-color:black;
        margin:10px;
        font-size:18px;
        color:#fff;
        
        }
        .logo{
        color:red;
        font-size:30px;
        }
        .head-1
{
    position:relative;
    padding:9px 8px;
    border:2px solid red;
    background-color:red;
    color:#fff;
    left:40%;
    
    
}

.last-btn
{
    padding:10px 8px;
    border:2px solid red;
    background-color:red;
    color:white;
    position:relative;
    left:6px;
    top:50px;
    
}
h1
{
    position:relative;
    left:10px;
    top:80px;
    
}

p.content
{
    position:relative;
    left:20px;
    top:60px;
    
}

p.details
{
    position:relative;
    left:10px;
    top:60px;
    
}

input[type=email]
{
    border:5px solid #fff;
    width:70%;
    padding:7px 9px;
    margin:8px 0;
    box-sizing:border-box;
    position:relative;
    left:10px;
    top:50px;
    
    
    
}
    </style>
        <div class="logo">NETFLIX
<button class="head-1">Sign up</button></div>

<div>
    <h1 class="heading">Unlimited movies, TV shows, and more</h1>
    <p class="content"=>Watch anywhere. Cancel anytime</p>
    <p class="details">Ready to watch? Enter your email to create or restart your membership</p>
</div>
<div>
<form>
    <input type="email" placeholder="email address">
    <button class="last-btn">get started</button>
</form>
</div>
    </body>
</html>

5. Netflix Signin Page

Made by rahul badam. Source

<!doctype html>
<html>
<head>
<title>Netflix</title>
    <link rel="stylesheet" type="text/css" href="cssfile.css">
<style>
    body{
    padding:0;
    margin:0;
background:url("https://i.postimg.cc/1tqJ9CXf/images-6.jpg") no-repeat center bottom/cover;
  height:420px;
width:absolute;
background-color:black;
 text-align:center;


backdrop-filter:brightness(100%) blur(2px);

}
.img{
padding-left:27px;
padding-top:20px;
}
.top{
display:flex;
}
.button{
font-family:arial;
background-color:red;
color:white;
border:none;
border-radius:4px;
height:20px;
width:60px;
padding-top:5px;
margin-top:5%;
margin-left:60%;
border:none;
text-decoration:none;
}
.p{
text-shadow:1px 1px black;
padding-top:25px;
color:white;
font-size:30px;
text-align:center;
font-family:helvetica;
font-weight:500;
}
.text{
border:none;
height:40px;
width:80%;
border:1px solid #fff;
border-radius:2px;
}
.button2{
text-shadow:1px 1px black;
font-family:arial;
background-color:red;
color:white;
border:none;
border-radius:4px;
height:40px;
width:150px;
margin-top:3%;
font-size:16px;
font-weight:400;
margin-bottom:100px;
}
.img2{
    width:100%;
    height:auto;
}
.menu{
    color:white;
    border-style:solid;
    border-color:#2F2F31;
    height:40px;
    width:100%;
    padding-top:13px;
    margin-bottom:8px;
    font-size:23px;
    background-color:#2F2F31;
    border-radius:1px;
    text-align:left;
    padding-left:30px;
}
.bor{
    border-style:solid;
    border-color:#2F2F31;
    height:4px;
    width:100%; 
    border-radius:1px;
    background-color:#2F2F31;
    color:#2F2F31;
    font-size:4px;
}
.last{
    color:#2F2F35;
    font-size:18px;
    padding-top:70px;
    padding-bottom:20px;
    font-weight:600;
}
.b a{
    
    text-decoration:none;
    color:#2F2F31;
    
}
.b{
    text-align:left;
    padding-left:40px;
    display:flex;
    color:#2F2F31;
}
.hh{
    padding-top:30px;
    padding-left:50px;
    color:#2F2F31;
}
.jj{
    padding-top:30px;
}
.left{
    text-align:left;
}
    </style>
</head>
<body>
<div class="main">
<div class="bg"></div>
<div class="top">

<img src="https://i.postimg.cc/tR2dPG6F/netflix-logo-0.png" height=30px width=80px class="img">

<a href="https://www.netflix.com/in/login" class="button">Sign In</a>


</div>
<div class="p">Unlimited movies,TV shows and more.</div>
<div style="color:white; padding-top:20px; text-shadow:1px 1px black;font-size:18px">Watch anywhere. Cancel anytime.<br><br>
Ready to watch? Enter your email<br> to create or restart your membership.
</div>
<br>
<input type="text" name="" placeholder="  Email address" class="text">

<input type="submit" name="" value="TRY IT NOW  >" class="button2"></div>
<div style="color:white; padding-top:20px; text-shadow:1px 1px black;">
<div class="p">Enjoy on your TV.</div><br>
Watch on smart TVs, PlayStation, Xbox,
<br>Chromecast, Apple TV, Blu-ray players and<br> more.
</div>
<img src="https://i.postimg.cc/PqSNx5Gz/Screenshot-20200607-225255-2.png" class="img2">
<div class="p">Download your shows to watch offline.</div>
<div style="color:white; padding-top:20px; text-shadow:2px 2px black;font-size:18px">Save your favourites easily and always have <br>something to watch.</div>

<img src="https://i.postimg.cc/sxTMNPyW/Screenshot-20200608-181642-2.png" class="img2"
>

<div class="p">Watch everywhere.</div>

<div style="color:white; padding-top:20px; text-shadow:1px 1px black;font-size:18px">Stream unlimited movies and TV shows on your<br> phone, tablet, laptop, and TV.</div><br><br>
<img src="https://i.postimg.cc/pTbxPmk6/Screenshot-20200608-182519-2.png"class="img2">

<div class="p">Frequently Asked Questions</div><br><br>

<div class="menu">What is Netflix?</div>
<div class="menu">How much does Netflix cost?</div>
<div class="menu">Where can I watch?</div>
<div class="menu">How do I cancel?</div>
<div class="menu">What can I watch on Netflix?</div>
<br><br>
<div style="color:white; padding-top:20px; text-shadow:1px 1px black;font-size:18px">Ready to watch? Enter your email<br> to create or restart your membership.
</div>
<br>
<input type="text" name="" placeholder="  Email address" class="text">

<input type="submit" name="" value="TRY IT NOW  >" class="button2"></div>
<div class="bor">h </div>
<div class="last">Questions? Call 000-800-040-1843</div>



<div class="b" style="color:#2F2F31;">
<div class="jj">   
<a href="https://help.netflix.com/en/node/412">FAQ</a>
<br><br>
    
<a href="https://www.netflix.com/in/Login?nextpage=https%3A%2F%2Fwww.netflix.com%2Fyouraccount">Account</a>
<br><br><a href="http://ir.netflix.com/">Investor Relations</a><br><br>
<a href="https://www.netflix.com/watch">Ways to watch</a><br><br>
<a href="https://help.netflix.com/legal/privacy">Privacy</a><br><br>
<a href="https://help.netflix.com/en/node/2101">Corporate Information</a><br><br>
<a href="https://fast.com/">Speed Test</a><br><br>
<a href="https://www.netflix.com/in/browse/genre/839338">Netflix Originals</a><br><br></div>
<div class="hh">
<a href="https://help.netflix.com/">Help center</a><br><br>
<a href="https://media.netflix.com/">Media center</a><br><br>
<a href="https://jobs.netflix.com/jobs">Jobs</a><br><br>
<a href="https://help.netflix.com/legal/termsofuse">Terms of Use</a> <br><br> 
<a href="https://help.netflix.com/legal/privacy#cookies">Cookie Preferences</a><br><br>
<a href="https://help.netflix.com/contactus">Contact Us</a><br><br>
<a href="https://help.netflix.com/legal/notices">Legal Notices</a><br><br></div>
<br><br>
</div>
<p style="color:#2F2F31; text-align:left; padding-left:40px; padding-bottom:30px;">Netflix India</p>
</main>
</body>
</html>

6. Netflix Clone

Made by Ankit Kumar. Source

<html lang="en">
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&display=swap" rel="stylesheet">
    <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>Netflix Clone</title>
</head>
 <body>
  <div class="bgimg">
   <img src="https://fontmeme.com/permalink/211031/69dfe28dc8c9bdcdb8ca6878bedab0b5.png" class="logotext">
   <button class="sign"> Sign In </button>

<select name="language" id="lang" tabindex="0" placeholder="lang-switcher" style="float: right; height:30px; width:70px; background-color: black; color: white; margin-right: 2px;margin-top: 15px;"> 
    <option selected lang="en" value="/in/" data-language="en" data-country="IN">English</option>
    <option  lang="hi" value="/in-hi/" data-language="hi" data-country="IN">Hindi</option>
</select>

<div class="main" > <br><br><br><br><br>
  <h1> Unlimited movies, TV <br> shows and more.</h1>
  <h3>Watch anywhere. Cancel anytime.
 </h3>
  <h3>Ready to watch? Enter your email to create or restart your membership.
 </h3>
  </div>
   <div class="dvbtn">
  <input type="text" placeholder="Email adrress" class="textbox">
     <a href="#"><input type="button" class="button1" value="Get Started >" >       </a>           
   </div>
    <br><br><br><br><br>
   </div>
   <div class="line">-------------------- </div>
   
   
   
   
    <style>
      .line{background-color:#3d5a61; height:10px; }
      .textbox{ box-sizing: border-box;
      	height:60px;
        width:470px;
        padding :10px;
        margin-top:10px;
       margin-left:35%;
        margin-right:10px;
        border:none;
      }
      .main{
      	color:white;
        text-align:center;
        margin-top:10px;
      }
      
      .logo{margin :15px; float:right;
        height:50px;
        width:60px;
        background-color:red;
        border:none;
        color:white;
        border-radius:5px;
      }
        body{
          background-color: black; }
    button{
    float: right; margin: 15px;
    margin-right: 30px;
    height: 30px;
    width: 60px;
    background-color: red;
    border:none ;
    color: white;
    border-radius: 5px;
	
    }
      .bgimg{ background-image:url(https://i.ibb.co/D76Wx1q/background.jpg); background-size:cover;}
      .dvbtn{ display:flex; float:center; }
      .button1{ height: 60px; font-size:20px;  display:flex; cursor:pointer;
    width: 170px; margin-left:-12px; margin-top:11px; text-align:center;
    background-color:rgb(224, 16, 30);padding-left:30px;
    border:none ;
    color: white;}
     
      .button1:hover{ background-color:red; }
      body {text-align:center;font-family: 'Open Sans', sans-serif;
       }
      .logotext{ color:red; width:150px; height:50px; margin-top:10px;margin-left:10px; float:left;
      } 
      a{text-decoration:none; }
        h1{color:white; font-size:53px; margin-top:-15px; } 
      h3{color:white;font-size:20px; margin-left:50px; } 
     @media only screen and (max-width: 600px) {
       h1 { font-size:28px;	margin-left:20px;			}
       h3{font-size:16px;max-width:280px;  }
       .logotext{width:100px; height:30px; }
       .textbox{width:300px; height:50px;   margin-left:40px;}
       .button1{ width:140px; height:48px; font-size:15px; text-decoration:none; position:absolute;
         margin-top:75px;left:37% ;
 					}
       .bgimg{background-image:url(https://i.ibb.co/D76Wx1q/background.jpg); background-size:cover; }
    
  }

    </style>

7. Netflix Sign In page

Made by Ephraim Ugochukwu Joel. Source

<!DOCTYPE html>
<html lang="en-US">
<head>
   <title>Netflix Sign Up</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
      body{
                  background-color:rgb(0,0,0);
                      
                      }
      .box h2{
                      font-family:verdana;
                      font-size:32px;
                      margin-left:9px;
                      color:rgb(255,255,255);
                      }
      .box form{
                      width:
                      height:10px;
                      margin:
                  
                      
                      }
      
      .box input {
                      width:287px;
                      padding:17px;
                      margin-left:4px;
                      margin: 9px;
                      border:none;
                      outline:none;
                      border-radius:5px;
                      
                      background-color:rgba();
                      
          
                      
                      
                      }
      .box p{
                      
                   color:rgb(255,255,255);
                      
                      
                      }
      .box p button {
                      font-size:17px;
                      width:320px;
                      padding:15px;
                      margin-left:11px;
                      border:none;
                      outline:none;
                      border-radius:5px;
                      color:rgb(255,255,255);
                      background-color:rgb(255,0,0);
                      }
      .box1 input{
                      margin-left:10px;
                      margin-right:0px;
                      border:none;
                      outline:none;
                  
                      
                      }
      .box1 label{
                      display:inline;
                      font-size:19px;
                      text-decoration:small;
                      }
      .box1 p{
                      font-size:19px;
                      display:inline;
                      margin-left:120px;
                      margin-top:0px:
                      text-decoration:small;
                      }
      .box2 a{
                      padding:2px;
                      margin-left:11px;
                      text-decoration:none;
                      color:rgb(255,255,255);        
                      }
      #p1{
                      padding:3px;
                      margin-left:11px;
                      color:rgb(255,255,255);
                      }
      #p2{
                  padding:3px;
                  margin-left:11px;    
                      
                      
                      }
      .box2 a{
        padding:0px;
        margin-left:9px;
          
          
      }
      
      
      
      
      
      </style>
</head>
<body>
  
   <h3 style="color:#ff0000; font-family: courier;  font-size:28px; "><strong>NETFLIX<strong/></h3>
  <div class="box">
   <h2>Sign In</h2>
   
   <form>
     <input type="text/email" name="text" placeholder="Email or phone number" required></input>
     <input type="password" name="password" placeholder="password" required></input><br>
     <p><button><b>Sign In</b></button></p>
   </form>
  </div>
  <div class="box1">
    <form>
      <input type="checkbox" name="checkbox" id="box1"><label for="box1" style="color:rgb(255,255,255);"><small>Remember me</small></label>
      <p style="color:rgb(255,255,255);"><small>Need help?</small></p></input>
     </div>
     <div class="box2">
      <p><a href="#"><small><a href="https://www.facebook.com/login" target="_self">Login with facebook</a></small></a></p>
    </form>
    
    <p id="p1"><small>New to Netflix?</small> <b>Sign up now</b></p>
    <p id="p2" style="color:rgb(255,255,255);"><small>This page is protected by Google reCAPTCHA to ensure you're not a bot.</small></p>
  </div>
</body>
</html>

8. Mobile Netflix Signin Page

Made by Ahmad Aliyu. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            body {
background-color:black ;
color:white;
}
.header h1{
    color:red;
}
.header h2{
    color:white;
    text-align:center;  
}
.header p{
    text-align:center;
}
.header input{
    padding:20px 70px 20px 70px;
    margin:0 20px 0 20px;
}
.header nav .sp{
    color:white;
    background:red;
    border-radius:5px;
    padding:4px 5px 4px 5px ;
}

.sp{
    background:red;
    color:white; 
    padding:9px 7px 9px 7px; 
    border-radius:2px;
}
body header{
    background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCsKMBMNKCrtoHxEsdXTSdlqG_EAufc9jCJw&usqp=CAU );
height:500px;
border-bottom-color:gray;
border-bottom-width:12px;

}
header nav span a{
    float:right;
    background-color:red;
    color:white;
    margin:4px;
    border-radius:4px;
  
}
.cntimgs, .imgs{
    
}
.btn22, .whatsapp{
    text-decoration-line:none ;
    background-color:red;
    color:white;
    border-radius:20px;
    outline:none ;
    border-style:none;
}
.inpt2{
    padding:20px 5px 20px 5px;
    width:350px;
    outline:none;
}
            </style>
    </head>
    <body>
        <header class="header">
            <nav>
            <span><a>Sign In </a></span>
                <h1>NETFLIX</h1> <br> <br> <br> <br>
<h2>Unlimited movies, TV shows, <br> and more.
</h2>
<p>Watch anywhere. Cancel anytime.</p>
<p>Ready to watch? Enter your email to create or restart your membership.</p>
<input type="text" placeholder="Email Address"> <br> <br>
<center>
<span class="sp">Get Started > </span>
</center>
</nav>         
</header>
<h1 style="text-align:center;">Enjoy on your TV.
</h1>
<p style="text-align:center;">Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more.
</p>

<div class="cntimgs">
    <div class="imgs">
    <center>
        <img src=" data:image/jpeg;base64,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 " width="400px">
        </center>
    </div>
</div>
<hr>
<center>
<h1>Download your shows to watch offline.
</h1>
<p>  Save your favorites easily and always have something to watch.

</p>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRADcZAczgXnz03k2tJ3CfS1QvUJ9pVXfMouQ&usqp=CAU" width="400px">
</center>

<hr>
<center>
<img src=" https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/mobile-0819.jpg " width="400px">
<h1>  Watch everywhere.</h1>
<p> Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV.

</p>
</center>
<hr>
<center>
    <h1> Create profiles for kids.</h1>
<p>
    Send kids on adventures with their favorite characters in a space made just for themβ€”free with your membership.
</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYqk-igyI4mRuikSpweoYzSPTYCMjGFnRYpA&usqp=CAU" width="400px">
<hr>
</center>
<footer>
<div>
<h1 style="text-align="center">Frequently Asked Questions.</h1>
<p style="background:gray; margin:8px; padding:10px 2px 10px 0" font-size="50px">What is Netflix?</p>
<p style="background:gray; margin:8px; padding:10px 2px 10px 0" font-size="50px">How much does Netflix cost?</p>
<p style="background:gray; margin:8px; padding:10px 2px 10px 0" font-size="50px">What can i watch?</p>
<p style="background:gray; margin:8px; padding:10px 2px 10px 0" font-size="50px">How can i cancel?</p>
<p style="background:gray; margin:8px; padding:10px 2px 10px 0" font-size="50px">what can i watch on Netflix?</p>
<p style="background:gray; margin:8px; padding:10px 2px 10px 0" font-size="50px">Is Netflix good for kids?</p>
<center>
<p> Ready to watch? Enter your email to create or restart your membership.
 </p>
 <input type="text" placeholder="Email Address" class="inpt2"> <br> <br>
 <button class="btn22"><a class="whatsapp" href="https://wa.me/2348142716159/">Get Started </a></button>
</center>
</div>
</footer>

    </body>
</html>

9. Responsive Netflix Signin page

Made by Doyin. Responsive CSS Netflix Sign In page. Source

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Netflix - Watch TV Shows Online, Watch Movies Online</title>
    <style>
        * {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body {
    background: black;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5rem;
}

a {
    text-decoration: none;
    color: #fff;
}

li {
    list-style-type: none;
}

img {
    margin: 0px;
    width: 100%
}

.container {
    background: 
    position: absolute;
}
.showcase {
    position: relative;
    height: 97vh;
    width: 100%;
    background: url("https://1.bp.blogspot.com/-Xc0Hx7oBKB0/X-0eNGwM0pI/AAAAAAAADA4/HJ_OhoKEytcYN6X2F-hYJLz252evJtCMACLcBGAsYHQ/s0/background.jpg") no-repeat center center/cover;
}

.showcase::after {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    box-shadow: inset 120px 120px 150px #000, inset -120px -120px 150px #000 ;
    top: 0;
    left: 0;
}
.showcase-top {
    position: relative;
    height: 90px;
    z-index: 2;
}

.showcase img {
    width: 200px;
    position: absolute;
    top: 20px;
    left: 30px;
}

.signin-btn {
    position: absolute;
    right: 64px;
    top: 28px;
    background:  #e50914;
    padding: 4.5px 5px;
    border-radius: 5px;
    width: 5rem;
    text-align: center;
    font-size: 15px;
    display: inline-block;
    border-radius: 4px;
}

.signin-btn:hover {
    opacity: 0.9;
}


.xl-btn {
    background:  #e50914;
    color: #fff;
    font-size: 1rem;
    font-weight:bold;
    padding: 0.5rem 1rem;
    height: 70px;
    width: 300px;
    border-radius: 4px;
    cursor: pointer;
}

.xl-btn:hover {
    opacity: 0.8;
}

.email {
    width: 450px;
    height: 70px;
    padding: .5rem;
    border: 0px solid #000;
    font-size: 20px;
}


.showcase-content {
    position: relative;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    top: 23%;
    z-index: 2;
}

.showcase-content h1 {
    font-weight: bold;
    font-size: 69px;
    line-height: 3.5rem;
    margin: 0 0 2rem;
}

.showcase-content h2 {
    font-size: 2rem;
    margin: 0 0 2rem;
}

.showcase-content p {
    font-size: 1.3rem;
    margin: 0 0 1rem;
}

@media (max-width: 755px) {
    .showcase-content h1 {
        font-size: 40px;
        font-weight: 200;
        line-height: normal;
    }

    .showcase-content h2 {
        font-size: 1rem;
        margin: 0 0 .5rem;
    }

    .showcase-content p {
        font-size: .7rem;
        margin-bottom: 5px;
    }

    .showcase img {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 100px;
    }

    .signin-btn {
        position: absolute;
        right: 15px;
        top: 15px;
        background:  #e50914;
        padding: 4.5px 5px;
        border-radius: 5px;
        width: 5rem;
        text-align: center;
        font-size: 15px;
        display: inline-block;
        border-radius: 4px;
    }
    
    .signin-btn:hover {
        opacity: 0.9;
    }

    .email {
        width: 350px;
        height: 70px;
        padding: .5rem;
        border: 0px solid #000;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .xl-btn {
        background:  #e50914;
        color: #fff;
        font-size: 1rem;
        font-weight: normal;
        padding: 0.5rem 1rem;
        height: 50px;
        width: 150px;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .xl-btn:hover {
        opacity: 0.8;
    }
}

@media (max-width: 370px) {
    .email {
        width: 220px;
        height: 40px;
        padding: .5rem;
        border: 0px solid #000;
        font-size: 20px;
        margin-bottom: 10px;
    }

}
        </style>
</head>

<body>
	<header class="showcase">
		<div class="showcase-top">
			<img src="https://1.bp.blogspot.com/-ET50P0qB-P0/X-0dxb0t-nI/AAAAAAAADAs/qOegja1dZxArVYPZ6hE435b5qh9T4MJAgCLcBGAsYHQ/s0/Netflix-Logo.png"
				alt="Netflix logo">
			<a href="#" class="signin-btn">Sign In</a>
		</div>

		<div class="showcase-content">
			<h1>Unlimited movies, TV <br> shows, and more.</h1>
			<h2>Watch anywhere. Cancel anytime.</h2>
			<p>Ready to watch? Enter your email to create or restart your membership.</p>
			<form action="" class="submit-form">
				<input type="email" name="email" id="email" placeholder="Email Address" required class="email">
				<input type="submit" value="GET STARTED" class="xl-btn">
			</form>
		</div>
	</header>
</body>

</html>

10. Responsive Netflix login page

Made by Yuri Ivanovich. Source

<!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">
  <title>Netflix</title>
  <link rel="stylesheet" href="style.css">
  <link rel = "stylesheet" href = "https://use.Fontawesome.com/releases/v5.8.2/css/all.css" crossorigin = "anonymous">
  <style>
      :root {
	--primary-color: #e50914;
	--dark-color: #141414;
	--light-color: #f4f4f4;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Arial', sans-serif;
	-webkit-font-smoothing: antialiased;
	background: #000;
	color: #999;
}

ul {
	list-style: none;
}

h1,
h2,
h3,
h4 {
	color: #fff;
}

a {
	color: #fff;
	text-decoration: none;
}

p {
	margin: 0.5rem 0;
}

img {
	width: 100%;
}

.showcase {
	width: 100%;
  height: 93vh;
	position: relative;
	background: url('https://i.ibb.co/vXqDmnh/background.jpg') no-repeat center center/cover;
}

.showcase::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: rgba(0, 0, 0, 0.6);
	box-shadow: inset 120px 100px 250px #000000, inset -120px -100px 250px #000000;
}

.showcase-top {
	position: relative;
	z-index: 2;
	height: 90px;
}

.showcase-top img {
	width: 170px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-left: 0;
}

.showcase-top a {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(-50%, -50%);
}

.showcase-content {
	position: relative;
	z-index: 2;
	width: 65%;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-top: 9rem;
}

.showcase-content h1 {
	font-weight: 700;
	font-size: 5.2rem;
	line-height: 1.1;
	margin: 0 0 2rem;
}

.showcase-content p {
	text-transform: uppercase;
	color: #fff;
	font-weight: 400;
	font-size: 1.9rem;
	line-height: 1.25;
	margin: 0 0 2rem;
}

/* Tabs */
.tabs {
	background: var(--dark-color);
	padding-top: 1rem;
	border-bottom: 3px solid #3d3d3d;
	border-right: none;
}

.tabs .container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.tabs p {
	font-size: 1.2rem;
	padding-top: 0.5rem;
}

.tabs .container > div {
	padding: 1.5rem 0;
}

.tabs .container > div:hover {
	color: #fff;
	cursor: pointer;
}

.tab-border {
	border-bottom: var(--primary-color) 4px solid;
}

/* Tab Content */
.tab-content {
	padding: 3rem 0;
	background: #000;
	color: #fff;
}

/* Hide initial content */
#tab-1-content,
#tab-2-content,
#tab-3-content {
	display: none;
	opacity: 0;
}

.show {
	display: block !important;
	opacity: 1 !important;
	transition: all 1000 ease-in;
}

#tab-1-content .tab-1-content-inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 2rem;
	align-items: center;
	justify-content: center;
}

#tab-2-content .tab-2-content-top {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 1rem;
	justify-content: center;
	align-items: center;
}

#tab-2-content .tab-2-content-bottom {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2rem;
	text-align: center;
}

.table {
	width: 100%;
	margin-top: 2rem;
	border-collapse: collapse;
	border-spacing: 0;
}

.table thead th {
	text-transform: uppercase;
	padding: 0.8rem;
}

.table tbody {
	display: table-row-group;
	vertical-align: middle;
	border-color: inherit;
}

.table tbody tr td {
	color: #999;
	padding: 0.8rem 1.2rem;
	text-align: center;
}

.table tbody tr td:first-child {
	text-align: left;
}

.table tbody tr:nth-child(odd) {
	background: #222;
}

.footer {
	max-width: 70%;
	margin: 1rem auto;
	overflow: auto;
}

.footer,
.footer a {
	color: #999;
	font-size: 0.9rem;
}

.footer p {
	margin-bottom: 1.5rem;
}

.footer .footer-cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 2rem;
}

.footer li {
	line-height: 1.9;
}

.footer .lang-select {
	margin-top: 2rem;
	color: #999;
	background-color: #000;
	background-image: none;
	border: 1px solid #333;
	padding: 1rem 1.2rem;
	border-radius: 5px;
}

/* Container */
.container {
	max-width: 70%;
	margin: auto;
	overflow: hidden;
	padding: 0 2rem;
}

/* Text Styles */
.text-xl {
	font-size: 2rem;
}

.text-lg {
	font-size: 1.8rem;
	margin-bottom: 1rem;
}

.text-md {
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
}

.text-center {
	text-align: center;
}

.text-dark {
	color: #999;
}

/* Buttons */
.btn {
	display: inline-block;
	background: var(--primary-color);
	color: #fff;
	padding: 0.4rem 1.3rem;
	font-size: 1rem;
	text-align: center;
	border: none;
	cursor: pointer;
	margin-right: 0.5rem;
	transition: opacity 0.2s ease-in;
	outline: none;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
	border-radius: 2px;
}

.btn:hover {
	opacity: 0.9;
}

.btn-rounded {
	border-radius: 5px;
}

.btn-xl {
	font-size: 2rem;
	padding: 1.5rem 2.1rem;
	text-transform: uppercase;
}

.btn-lg {
	font-size: 1rem;
	padding: 0.8rem 1.3rem;
	text-transform: uppercase;
}

.btn-icon {
	margin-left: 1rem;
}

@media (max-width: 960px) {

		.showcase {
		height: 70vh;
	}

	.hide-sm {
		display: none;
	}

	.showcase-top img {
		top: 30%;
		left: 5%;
		transform: translate(0);
	}
	
	.showcase-content h1 {
		font-size: 3.7rem;
		line-height: 1;
	}

	.showcase-content p {
		font-size: 1.5rem;
	}

	.footer .footer-cols {
		grid-template-columns: repeat(2, 1fr);
	}

	.btn-xl {
		font-size: 1.5rem;
		padding: 1.4rem 2rem;
		text-transform: uppercase;
	}

	.text-xl {
		font-size: 1.5rem;
	}

	.text-lg {
		font-size: 1.3rem;
		margin-bottom: 1rem;
	}
	
		.text-md {
		margin-bottom: 1rem;
		font-size: 1.2rem;
	}
}

@media (max-width: 700px) {
	.showcase::after {
		background: rgba(0, 0, 0, 0.6);
		box-shadow: inset 80px 80px 150px #000000, inset -80px -80px 150px #000000;
	}

	.showcase-content h1 {
		font-size: 2.5rem;
		line-height: 1;
	}

	.showcase-content p {
		font-size: 1rem;
	}

	#tab-1-content .tab-1-content-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	#tab-2-content .tab-2-content-top {
		display: block;
		text-align: center;
	}
	
		#tab-2-content .tab-2-content-bottom {
		margin-top: 2rem;
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 2rem;
		text-align: center;
	}

	.btn-xl {
		font-size: 1rem;
		padding: 1.2rem 1.6rem;
		text-transform: uppercase;
	}
}

@media(max-height: 600px) {
  .showcase-content {
	margin-top: 3rem;
  }
}
      </style>
</head>

<body>
  <header class="showcase">
			<div class="showcase-top">
				<img src="https://i.ibb.co/r5krrdz/logo.png" alt="" />
				<a href="#" class="btn btn-rounded">Sign In</a>
			</div>
			<div class="showcase-content">
				<h1>See what's next</h1>
				<p>Watch anywhere. Cancel Anytime</p>
				<a href="#" class="btn btn-xl"
					>Watch Free For 30 Days <i class="fas fa-chevron-right btn-icon"></i
				></a>
			</div>
		</header>
		<section></header><ion class="tabs">
			<div class="container">
				<div id="tab-1" class="tab-item tab-border">
					<i class="fas fa-door-open fa-3x"></i>
					<p class="hide-sm">Cancel at any time</p>
				</div>
				<div id="tab-2" class="tab-item">
					<i class="fas fa-tablet-alt fa-3x"></i>
					<p class="hide-sm">Watch anywhere</p>
				</div>
				<div id="tab-3" class="tab-item">
					<i class="fas fa-tags fa-3x"></i>
					<p class="hide-sm">Pick your price</p>
				</div>
			</div>
		</section>

		<section class="tab-content">
			<div class="container">
				<!-- Tab Content 1 -->
				<div id="tab-1-content" class="tab-content-item show">
					<div class="tab-1-content-inner">
						<div>
							<p class="text-lg">
								If you decide Netflix isn't for you - no problem. No commitment.
								Cancel online anytime.
							</p>
							<a href="#" class="btn btn-lg">Watch Free For 30 Days</a>
						</div>
						<img src="https://i.ibb.co/J2xDJV7/tab-content-1.png" alt="" />
					</div>
				</div>

				<!-- Tab Content 2 -->
				<div id="tab-2-content" class="tab-content-item">
					<div class="tab-2-content-top">
						<p class="text-lg">If you decide Netflix isn't for you - no problem. No commitment.
								Cancel online anytime.
							</p>
							<a href="#" class="btn btn-lg">Watch Free For 30 Days</a>
						</div>
						<img src="https://i.ibb.co/J2xDJV7/tab-content-1.png" alt="" />
					</div>
				</div>

				<!-- Tab Content 2 -->
				<div id="tab-2-content" class="tab-content-item">
					<div class="tab-2-content-top">
						<p class="text-lg">
							Watch TV shows and movies anytime, anywhere β€” personalized for
							you.
						</p>
						<a href="#" class="btn btn-lg">Watch Free For 30 Days</a>
					</div>
					<div class="tab-2-content-bottom">
						<div>
							<img src="https://i.ibb.co/DpdN7Gn/tab-content-2-1.png" alt="" />
							<pp class="text-md">
								Watch on your TV
							</pp>
							<p class="text-dark">
								Smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray
								players and more.
							</p>
						</div>
						<div>
							<img src="https://i.ibb.co/R3r1SPX/tab-content-2-2.png" alt="" />
							<p class="text-md">
								Watch instantly or download for later
							</p>
							<p class="text-dark">
								Available on phone and tablet, wherever you go.
							</p>
						</div>
						<div>
							<img src="https://i.ibb.co/gDhnwWn/tab-content-2-3.png" alt="" />
							<p class="text-md">
								Use any computer
							</p>
							<p class="text-dark">
								Watch right on Netflix.com.
							</p>
						</div>
					</div>
				</div>

				<!-- Tab Content 3 -->
				<div id="tab-3-content" class="tab-content-item">
					<div class="text-center">
						<p class="text-lg">
							Choose one plan and watch everything on Netflix.
						</p>
						<a href="#" class="btn btn-lg">Watch Free For 30 Days</a>
					</div>

					<table class="table">
						<thead>
							<tr>
								<th></th>
								<th>Basic</th>
								<th>Standard</th>
								<th>Premium</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Monthly price after free month ends on 6/19/19</td>
								<td>$8.99</td>
								<td>$12.99</td>
								<td>$15.99</td>
							</tr>
							<tr>
								<td>HD Available</td>
								<td><i class="fas fa-times"></i></td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
							</tr>
							<tr>
								<td>Ultra HD Available</td>
								<td><i class="fas fa-times"></i></td>
								<td><i class="fas fa-times"></i></td>
								<td><i class="fas fa-check"></i></td>
							</tr>
							<tr>
								<td>Screens you can watch on at the same time</td>
								<td>1</td>
								<td>2</td>
								<td>4</td>
							</tr>
							<tr>
							<tr>	<td>Watch on your laptop, TV, phone and tablet</td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
							</tr>
							<tr>
								<td>Unlimited movies and TV shows</td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
							</tr>
							<tr>
								<td>Cancel anytime</td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
							</tr>
							<tr>
								<td>First month free</td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</section>

    <footer class="footer">
			<p>Questions? Call 1-866-579-7172</p>
			<div class="footer-cols">
				<ul>
					<li><a href="#">FAQ</a></li>
					<li><a href="#">Investor Relations</a></li>
					<li><a href="#">Ways To Watch</a></li>
					<li><a href="#">Corporate Information</a></li>
					<li><a href="#">Netflix Originals</a></li>
				</ul>
				<ul>
					<li><a href="#">Help Center</a></li>
					<li><a href="#">Jobs</a></li>
					<li><a href="#">Terms Of Use</a></li>
					<li><a href="#">Contact Us</a></li>
				</ul>
				<ul>
					<li><a href="#">Account</a></li>
					<li><a href="#">Redeem Gift Cards</a></li>
					<li><a href="#">Privacy</a></li>
					<li><a href="#">Speed Test</a></li>
				</ul>
				<ul>
					<li><a href="#">Media Center</a></li>
					<li><a href="#">Buy Gift Cards</a></li>
					<li><a href="#">Cookie Preferences</a></li>
					<li><a href="#">Legal Notices</a></li>
				</ul>
			</div>
    </footer>
    <script>
        const tabItems = document.querySelectorAll('.tab-item');
const tabContentItems = document.querySelectorAll('.tab-content-item');

// Select tab content item
function selectItem(e) {
	// Remove all show and border classes
	removeBorder();
	removeShow();
	// Add border to current tab item
	this.classList.add('tab-border');
	// Grab content item from DOM
	const tabContentItem = document.querySelector(`#${this.id}-content`);
	// Add show class
	tabContentItem.classList.add('show');
}

// Remove bottom borders from all tab items
function removeBorder() {
	tabItems.forEach(item => {
		item.classList.remove('tab-border');
	});
}

// Remove show class from all content items
function removeShow() {
	tabContentItems.forEach(item => {
		item.classList.remove('show');
	});
}

// Listen for tab item click
tabItems.forEach(item => {
	item.addEventListener('click', selectItem);
});
        </script>
</body>
</html>

11. Netflix Desktop Signin Page

Made by Hawa. Source

<Doctype html>
<html lang="en">
<head> 
 <meta charest utf-8> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <meta http-eqiv="X-UA-Compatible" content="ie=idge"> 
 <title>Netflix - watch TV shows online, watch movies online</title> 
 <style>
     :root {
  --primary-color:#e50941;
  --dark-color:#fff;
  
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family: 'Arial', 'sans-serif';
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  background:#000;
  color:#999;
}

ul{
  list-style:none;
}

h1, h2, h3, h4{
  color:#fff;
  text-align:center;
}

a{
  color :#fff;
  text-decoration:none;
}

img{
  width:100%;
}

.showcase {
  width:100%;
  height:75vh;
  showcase:relative; background:url('https://dl.dropbox.com/s/7w9z0s9hmproevv/background.jpg?dl=0') center center/cover;
  height:28rem;
  margin-top:-22px;
}

.showcase::after{
    content:'';
    position:absolute ;
    top:0;
    left:0;
    bottom:10;
    width:100%;
    height:100%;
    z-index:1;
    background:rgba(0,0,0,0.6) ;
    box-shadow:inset 5px 40px 10px #000000;
    
}

.p1{
   position:relative; 
   z-index:2;
   color:#fff;
}


}
.showcase-top{
  position:relative;
  height:90px;
}

.showcase-top img{
  width:90px;
  z-index:2;
  position:relative;
  top:2;
}

    
.my.btn {
    background-color:red;
    position:relative ;
    z-index:2;
    color:#fff;
    padding:5px 8px;
    border:none;
    margin-left:18rem;
    margin-top:-25px;
}


.showcase-content{
    position:relative;
    z-index:2;
    margin:auto;
    display:flex;
    flex-direction:column;
    justify content:center;
    align items:center ;
    text-align:center;
    margin-top:0.2rem;
}

.Email{
    input::placeholder{
        color:#fff;
        font-size:1.2rem;
        font-style:italic;
    }
}

.Email input{
padding:14.8px;
width:94%; 
}


.btn2{
    width:8rem;
    padding:10px 10px;
    background-color:red;
    color:white;
    margin-right:30rem;
    margin-left:7rem;
    text-align:center;
    margin-bottom:-20px;
    font-size:1rem;
}

.section-up{
    color:#303030;
    position:relative ;
    z-index:1;
    padding-top:-3rem;
    border-bottom:7px solid #3d3d3d;   
}

.showcase-under{
    color:white;
    padding:1rem;
    position:relative ;
    z-index:2;
    display:block ;
    text-align:center ;
    margin-top:1.7rem;
}

.showcase-underimg{
    margin-top:5rem;
    margin-bottom:4rem;
}

.img1{
   padding:50px; 
   margin-top:-7rem;
}

.img2{
    margin-top:-16rem;
}

.under2{
    color:white;
    padding:1rem;
    margin-top:1.7rem;
    display:block;
    text-align:center ;
    margin-bottom:1.8rem;   
}

.under3{
    margin:1rem;
    margin-top:2rem;
    display:block;
    text-align:center ;
    margin-bottom:1.8rem;
    padding:0;
    
}

.underimg3{
    display:block;
}

.img-5{
 padding:4.5rem;
 height:18rem;
 margin-top:-4rem;
 margin-bottom:3rem;
 
}

.img-6{
margin-top:-18rem;
}

.section-down{
    width:100%;
    display:flex;
}

.container{
    width:100%;
    max-width:80rem;
    margin:0 auto ;
    padding:0 0.3rem;  
    margin-bottom:0.5rem; 
}

.h{
    margin-bottom:2rem;
    margin-top:2rem;
}

.accordion-item{
    background-color:#383838;
    margin-bottom:1rem;
    padding:0.5rem;
    margin-top:-0.5rem;
}

.accordion-link{
    font-size:1.1rem;
    color:#fff;
    text-decoration:none;
    background-color:#383838;
    width:100%;
    display:flex;
    align-items:center ;
    justify-content:space-between;
    padding:0.5rem;    
}

.accordion-link .close{
    display:none;
}

.answer{
    max-height:0;
    overflow:hidden;
    position:relative;
    
}

.answer p{
    font-size:1.4rem;
    color:#fff;
    padding:2rem;
}


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

.accordion-item:target .accordion-link .add{
    display:none;
}

.accordion-item:target .accordion-link .close{
    display:block;
}

.tahat{
    margin-bottom:4rem;
}
.tahat p{
    text-align:center ;
}

.Email-2{
    input::placeholder{
        color:#fff;
        font-size:1.2rem;
        font-style:italic;
        align-items:center ;
    }
}

.Email-2 input{
   padding:14.8px;
   width:94%; 
   margin-left:0.5rem;
}

.btn3{
    width:15rem;
    padding:9px 23px;
    background-color:red;
    color:white;
    height:25rem;
    margin-left:7rem;
    text-align:center;
    font-size:1rem;
    
}

.footer{
    margin-top:2.5rem;
    margin-bottom:4rem;
    color:#707070;
    margin-left:1.5rem;
}

ul{
    margin-bottom:1rem;
    margin-top:3rem;
    font-size:0.8rem;
    margin-left:-1.3rem;
    margin-right:2rem;
    list-style:none;
    color:#707070;
    display:inline-block; 
    float:left;
    margin-bottom:2rem;
}

li{
    color:#707070;
    margin-left:1.5rem;
}

.footer{
    display:block;
}

.inner-footer{
    width:95%;
    margin:auto;
    padding:30px 10px;
    display:flex;
    flex-wrap:wrap;
    box-sizing:border-box;
    justify-content:center ;
    
}

.p0{
    color:#707070;
    margin-top:-2rem;
    margin-right:10rem;
    margin-left:1.5rem;
    font-size:0.8rem;
    margin-bottom:3rem;
    
}
     </style>
 </head>
 <header class="showcase"> 

 <div class="showcase-top"> 
 <img src="https://dl.dropbox.com/s/t7tjw6nd3jt8usu/logo.png?dl=0">
     <button type="submit" class="my btn">Sign In</button>
     </div>
     
<div class="showcase-content">
<h2>Unlimited movies, TV
<br>
 shows, and more.</h2> 
<p class="p1">Watch anywhere. Cancel anytime.</p>
 <br> 
 <p class="p1">Ready to watch?Enter your email to
 <br />
  create or restart your 
  <br />
  membership.</p> 
<br>

  <form class="Email">
        <input placeholder="Email address"
        Email required>          
 </form>
     <a href="#" class="btn2">Get Started</a>   
    </div>
 </header> 
   <section class="section-up">
   </section>
  <div class="showcase-under">
   <h2>Enjoy on your TV.</h2>
   <br />
   <p>Watch on smart TVs,Playstation,xbox,
   chromecast,Apple TV,Blu-ray players,
   and more</p>
   </div>
   <div class="showcase-underimg">
    <img class="img1" src="https://dl.dropbox.com/s/ji1a5c77nmtzx56/3f80be6586e0f4d738ba98d46b231a3f.gif?dl=0">
   <img class="img2" src="https://dl.dropbox.com/s/73kvszpkve7whf7/tv.png?dl=0">
   </div>
 <section class="section-up"></section>
 <div class="under2">
     <h2>Download your shows to
      watch offline.</h2>
      <br>
   <p>Save your favorites easily and always
   have something to watch.</p>
   
   <img src="https://dl.dropbox.com/s/0uk699gtnxjf4yd/mobile-0819.jpg?dl=0">
 </div>
 <section class="section-up"></section>
 <div class="under3">
     <h2>Watch everywhere.</h2>
     <br />
     <p>Stream unlimited movies and TV shows
     on your phone,tablet,laptop,and TV
     without paying more.</p>
 </div>
 
 <div class="underimg3">
     <img class="img-5" src="https://dl.dropbox.com/s/mkhnena7u7f6wyx/36e6494d4f2b6f322d74a6f0784eee30.gif?dl=0">
     <img class="img-6" src="https://dl.dropbox.com/s/tpaa67y9vp9mmly/device-pile.png?dl=0">
 </div>
 <section class="section-up"></section>
<h2 class="h">Frequently Asked
    <br />
     Questions.</h2>

<section class="section-down">
    <div class="container">
       <div class="accordion">
          <div class="accordion-item" id="question1">
          <a class="accordion-link" href="question1">
              What is Netflix?
    <ion-icon class="add" name="add-outline"></ion-icon>
   <ion-icon class="close" name="close-outline"></ion-icon>
          </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.
<br />
<br />
You can watch as much as you want, whenever you want without a single commercial – all for one low monthly price. There's always something new to discover and new TV shows and movies are added every week!
</p>
      </div>
          </div> 
          
          <div class="accordion-item" id="question2">
          <a class="accordion-link" href="question2">
              How much does Netflix cost?
    <ion-icon class="add" name="add-outline"></ion-icon>
   <ion-icon class="close" name="close-outline"></ion-icon>
          </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 SAR32 to SAR61 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?
    <ion-icon class="add" name="add-outline"></ion-icon>
   <ion-icon class="close" name="close-outline"></ion-icon>
          </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.
<br />
<br />
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?
    <ion-icon class="add" name="add-outline"></ion-icon>
   <ion-icon class="close" name="close-outline"></ion-icon>
          </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?
    <ion-icon class="add" name="add-outline"></ion-icon>
   <ion-icon class="close" name="close-outline"></ion-icon>
          </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>

<div class="tahat">
<p>Ready to watch?Enter your email 
 <br />
 to create or restart your
 <br />
   membership.</p> 
<br>

  <form class="Email-2">
        <input placeholder="Email address"
        Email required>          
     </form>
     <a href="#" class="btn3">Get Started</a>
     </div>   
     <section class="section-up"></section>
     
     <div class="footer">
     Questions?call 800-850-1262
        <div="inner-footer">
            <div class="footer-items">
             <div class="list">
                 <ul>
         <a href=""><li>FAQ</li></a>
         <br />
          <a href=""><li>Account</li></a>
             <br />
   <a href=""><li>Investor Relations</li></a>
     <br />
    <a href=""><li>Redeem Gift Cards</li></a>
      <br />
     <a href=""><li>Ways to Watch</li></a>
       <br />
      <a href=""><li>Privacy</li></a>
        <br />
       <a href=""><li>Corporate Information</li></a>
         <br />
      <a href=""><li>Speed Test</li></a>
        <br />
   <a href=""><li>Netflix Originals</li></a>
       <br />
                 </ul>
             </div> 
             
                <div class="list">
                 <ul>
         <a href=""><li>Help  Center</li></a>
         <br />
        <a href=""><li>Media Center</li></a>
             <br />
   <a href=""><li>Jobs</li></a>
     <br />
    <a href=""><li>Buy Gift Cards</li></a>
      <br />
     <a href=""><li>Terms of Use</li></a>
       <br />
      <a href=""><li>Cookie preferences</li></a>
        <br />
       <a href=""><li>Contact Us</li></a>
         <br />
      <a href=""><li>legal Notices</li></a>
        <br />
                 </ul>
             </div> 
            </div>
        </div>
     </div>
     
    <p class="p0">Netflix Saudi Arabia</p>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
</body>    
</html>

12. Mobile Netflix

Made by serge. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    <style>
        body {
    background-color:black;
    text-align:center;
}

h1{
    color:red;
    text-align:left;
}

a{
    color:white;
    text-align:right;
    height: solid 70px;
    width:500px;
}

h2{
    color:white;
}

p{
    hight: solid 100px;
    width:;
}

h4{
    hight:50px;
    width:
    text-align:right;
}
        </style>
    </head>
    <body>
        <h1>NETFLIX</h1>
        <br>
        <h4><a href="https://netflix.com/">sign up</a></h4>
        <br>
        <h2>Unlimited movies, TV showes and more.</h2>
        <br><a>watch anywhere. cancel anytime. </a>
        <br>
        <a>Ready to watch? Enter your email to create or restart your membership</a><br>
       <br><p> <input type="text" placeholder="Email address"/></p>
       <br>
       
    </body>
</html>

13. Netflix Homepage

Made by Rishabh Saxena. Source

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netflix India-Watch Online TV Shows, Online Movies</title>
  <style>
      body {
  background-color: #333;
  margin: 0px;
}

.header {
  background-image: url(https://dkr0pu7ej5xex.cloudfront.net/wp-content/uploads/2017/04/24135159/Netflix-Background.jpg) ;
  margin-bottom: 8px;
 
}

.main-header {
  padding: 2px 10px;
}

.m1 {
  color: red;
  font-size: 30px;
  font-family: monospace;
  font-weight: bold;
  text-shadow: 5px 5px 5px black;
}

.m2 {
  float: right;
  background-color: red;
}

.sign-in {
color: white;
text-decoration: none;
}

.ram {
  text-align: center;
  color: white;
  padding-bottom: 60px;
  font-family: aharoni;
}

input {
  width: 500px;
  height: 30px;
  font-family: calibri; 
}

.form-button {
  height: 35px;
  background-color: red;
  color: white;
  font-weight: bold;
}

.headings , .sub-headings {
  color: white;
  font-family: aharoni;
}

.sections {
  background-color: #000;
  padding: 50px;
  margin-bottom: 8px;
}

.list-items {
  list-style-type:none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.converse-list {
  list-style-type:none;
  display: flex;
  flex-flow: row wrap-reverse;
  justify-content: center;
}

.list-element {
  padding: 40px;
}

.faq {
text-align: center;
}

.faq-list {
list-style-type: none;
text-align: center;
}

.faq-list-item {
padding:10px;
}
.faq-question {
font-size: 20px;
width: 100%;
height: 40px;
text-align: left;
background-color: #333;
color: white;
font-family: aharoni;
}

.faq-answer {
width: 100%;
color: white;
font-family: arial;
text-align: left;
margin: 2px;
}

.last-div {
padding-left: 150px;
padding-right: 150px;
}

.footer-top {
color: #333;
text-decoration: none;
font-family: calibri;
font-weight: bold;
}

ul.structural {
padding: 0px;
margin: 0px;
list-style-type: none;
display: flex;
flex-flow: row wrap;
}

.footer-link-item {
padding: 15px;
} 

.footer-link {
color:#333;
text-decoration: none;
font-family: calibri;
font-weight: bold;
}

.footer-country {
color: #333;
font-family: aharoni;
font-style: italic;
}
      </style>
</head>
<body>
  <div class="header">
   <div class=main-header>
    <p class="m1"> <span> NETFLIX </span>
    <button class="m2"> <a class="sign-in" href="https://www.netflix.com/in/login">Sign In</a> </li>
    </p>
   </div>
   <br> <br> <br> <br> <br>
   <div class="ram">
    <p class="advance-header">
      <h1> Unlimited movies, TV <br> shows and more. <br>
      <h2> Watch Anywhere. Cancel Anytime. </h2>
      <form class="form" action="https://www.netflix.com/signup/password?locale=en-IN" method="post">
        <input type="text" name="email" placeholder="Email address" />
        <button class="form-button"> TRY IT NOW > </button>
      </form>
      Ready to watch? Enter your email to create or restart your membership.
    </p>
   </div>
   <br> <br> <br> <br> <br> <br> <br> <br>
  </div>
  <div class="sections">
   <ul class="list-items">
    <li class="list-element"><p> 
      <h1 class="headings">Enjoy on your TV. </h1> 
      <h3 class="sub-headings">Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray <br> players and more.</h3>
      </p></li>
    <li class="list-element"> <img src="https://i.gadgets360cdn.com/large/love-death-robots-netflix_1555322789439.gif" width="360px" height="270px"> </li>
   </ul>
  </div>
  <div class="sections">
   <ul class="converse-list">
    <li class="list-element"> <img src="https://img.buzzfeed.com/buzzfeed-static/static/2020-04/30/19/asset/98bcd8c28f1d/anigif_sub-buzz-646-1588275891-3.gif?output-quality=auto&output-format=auto&downsize=360:*" width="400px" height="270px"> </li>
    <li class="list-element"><p>
      <h1 class="headings"> Download your shows <br> to watch offline.</h2>
      <h3 class="sub-headings"> Save your favourites easily and always have something to watch.</h3>
      </p></li>
   </ul>
  </div>
  <div class="sections">
   <ul class="list-items">
    <li class="list-element"><p>
      <h1 class="headings"> Watch everywhere. </h1>
      <h3 class="sub-headings"> Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV.</h3>
      </p></li>
    <li class="list-element"> <img src="https://149367133.v2.pressablecdn.com/wp-content/uploads/2018/03/Netflix-Mobile-Previews.gif" width="220px" height="300px"> </li>
   </ul>
  </div>
  <div class="sections">
    <h1 class="headings , faq"> Frequently Asked Questions </h1>
    <ul class="faq-list">
      <li class="faq-list-item">
        <button class="faq-question"> What is Netflix? </button> <br>
        <p class="faq-answer"> 
            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.
            <br>
            You can watch as much as you want, whenever you want, without a single ad – all for
            one low monthly price. There's always something new to discover, and new TV shows
            and movies are added every week!
        </p>
      </li>
      <li class="faq-list-item">
        <button class="faq-question"> How much does Netflix cost? </button> <br>
        <p class="faq-answer"> 
           Watch Netflix on your smartphone, tablet, Smart TV, laptop, or streaming device,
           all for one fixed monthly fee. Plans range from β‚Ή 199 to β‚Ή 799 a month. No extra
           costs, no contracts.
        </p>
      </li>
      <li class="faq-list-item">
        <button class="faq-question"> Where can I watch? </button> <br>
        <p class="faq-answer"> 
            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.
            <br>
            You can also download your favourite 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>
      </li>
      <li class="faq-list-item">
        <button class="faq-question"> How do I cancel? </button> <br>
        <p class="faq-answer"> 
            Netflix is flexible. There are no annoying 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>
      </li>
      <li class="faq-list-item">
        <button class="faq-question"> What can I watch on Netflix? </button> <br>
        <p class="faq-answer">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>
       </li>
    </ul>
  </div>
  <div class="sections , last-div">
    <p class="footer-top">Questions? Call <a class="footer-top" href="tel:000-800-040-1843">000-800-040-1843 </a>
    </p>
    <ul class="footer-links structural">
      <li class="footer-link-item"><a class="footer-link" href="https://help.netflix.com/en/node/412">FAQ</a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://help.netflix.com/en/">Help Centre</a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://www.netflix.com/in/Login?nextpage=https%3A%2F%2Fwww.netflix.com%2Fyouraccount">Account</a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://media.netflix.com/en/">Media Centre</a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://www.netflixinvestor.com/ir-overview/profile/default.aspx">Investor Relations</a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://jobs.netflix.com/">Jobs</a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://devices.netflix.com/en/">Ways to Watch</a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://help.netflix.com/legal/termsofuse">Terms of Use</a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://help.netflix.com/legal/privacy">Privacy</span></a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://help.netflix.com/legal/privacy#cookies">Cookie Preferences</a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://help.netflix.com/en/node/2101">Corporate Information</a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://help.netflix.com/en/contactus">Contact Us</a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://fast.com/">Speed Test</a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://help.netflix.com/legal/notices">Legal Notices</span></a></li>
      <li class="footer-link-item"><a class="footer-link" href="https://www.netflix.com/in/browse/genre/839338">Netflix Originals</a></li>
    </ul>
    <p class="footer-country">Netflix India</p>
  </div>
</body>
</html>


14. Netflix Login Clone

Made by Ako. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Netflix Home Page</title>
    <style>
        body {
    background-color: black;
    color: white;
    text-align: center;
    font-family: "Verdana", sans-serif;
}

img {
    width: 367.5px;
    height: 208.5px;
}

a {
    color: red;
}
        </style>
    </head>
    <body>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTQvGrzUH7tvW2JW9mRsf8SWodzo_kmcrO9zSpWf4we0cLywk6P"> 
        <h1>See What's Next</h1>
        <h3>Watch anywhere, but mostly from home.</h3>
        <a href="https://www.netflix.com/nz/Login">try 30 Days Free</a>
        <p>Watch TV shows and movies anytime, anywhere.</p>
    </body>
</html>

15. Responsive Netflix login page

Made by Aalian. Responsive Netflix login page made using css. ( Source )

<style>
    /* Global Styles */
:root {
	--primary-color: #e50914;
	--dark-color: #141414;
	--light-color: #f4f4f4;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Arial', sans-serif;
	-webkit-font-smoothing: antialiased;
	background: #000;
	color: #999;
}

ul {
	list-style: none;
}

h1,
h2,
h3,
h4 {
	color: #fff;
}

a {
	color: #fff;
	text-decoration: none;
}

p {
	margin: 0.5rem 0;
}

img {
	width: 100%;
}

.showcase {
	width: 100%;
	height: 93vh;
	position: relative;
	background: url('https://i.ibb.co/vXqDmnh/background.jpg') no-repeat center center/cover;
}

.showcase::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: rgba(0, 0, 0, 0.6);
	box-shadow: inset 120px 100px 250px #000000, inset -120px -100px 250px #000000;
}

.showcase-top {
	position: relative;
	z-index: 2;
	height: 90px;
}

.showcase-top img {
	width: 170px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-left: 0;
}

.showcase-top a {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(-50%, -50%);
}

.showcase-content {
	position: relative;
	z-index: 2;
	width: 65%;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-top: 9rem;
}

.showcase-content h1 {
	font-weight: 700;
	font-size: 5.2rem;
	line-height: 1.1;
	margin: 0 0 2rem;
}

.showcase-content p {
	text-transform: uppercase;
	color: #fff;
	font-weight: 400;
	font-size: 1.9rem;
	line-height: 1.25;
	margin: 0 0 2rem;
}

/* Tabs */
.tabs {
	background: var(--dark-color);
	padding-top: 1rem;
	border-bottom: 3px solid #3d3d3d;
	border-right: none;
}

.tabs .container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.tabs p {
	font-size: 1.2rem;
	padding-top: 0.5rem;
}

.tabs .container > div {
	padding: 1.5rem 0;
}

.tabs .container > div:hover {
	color: #fff;
	cursor: pointer;
}

.tab-border {
	border-bottom: var(--primary-color) 4px solid;
}

/* Tab Content */
.tab-content {
	padding: 3rem 0;
	background: #000;
	color: #fff;
}

/* Hide initial content */
#tab-1-content,
#tab-2-content,
#tab-3-content {
	display: none;
	opacity: 0;
}

.show {
	display: block !important;
	opacity: 1 !important;
	transition: all 1000 ease-in;
}

#tab-1-content .tab-1-content-inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 2rem;
	align-items: center;
	justify-content: center;
}

#tab-2-content .tab-2-content-top {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 1rem;
	justify-content: center;
	align-items: center;
}

#tab-2-content .tab-2-content-bottom {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2rem;
	text-align: center;
}

.table {
	width: 100%;
	margin-top: 2rem;
	border-collapse: collapse;
	border-spacing: 0;
}

.table thead th {
	text-transform: uppercase;
	padding: 0.8rem;
}

.table tbody {
	display: table-row-group;
	vertical-align: middle;
	border-color: inherit;
}

.table tbody tr td {
	color: #999;
	padding: 0.8rem 1.2rem;
	text-align: center;
}

.table tbody tr td:first-child {
	text-align: left;
}

.table tbody tr:nth-child(odd) {
	background: #222;
}

.footer {
	max-width: 70%;
	margin: 1rem auto;
	overflow: auto;
}

.footer,
.footer a {
	color: #999;
	font-size: 0.9rem;
}

.footer p {
	margin-bottom: 1.5rem;
}

.footer .footer-cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 2rem;
}

.footer li {
	line-height: 1.9;
}

.footer .lang-select {
	margin-top: 2rem;
	color: #999;
	background-color: #000;
	background-image: none;
	border: 1px solid #333;
	padding: 1rem 1.2rem;
	border-radius: 5px;
}

/* Container */
.container {
	max-width: 70%;
	margin: auto;
	overflow: hidden;
	padding: 0 2rem;
}

/* Text Styles */
.text-xl {
	font-size: 2rem;
}

.text-lg {
	font-size: 1.8rem;
	margin-bottom: 1rem;
}

.text-md {
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
}

.text-center {
	text-align: center;
}

.text-dark {
	color: #999;
}

/* Buttons */
.btn {
	display: inline-block;
	background: var(--primary-color);
	color: #fff;
	padding: 0.4rem 1.3rem;
	font-size: 1rem;
	text-align: center;
	border: none;
	cursor: pointer;
	margin-right: 0.5rem;
	transition: opacity 0.2s ease-in;
	outline: none;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
	border-radius: 2px;
}

.btn:hover {
	opacity: 0.9;
}

.btn-rounded {
	border-radius: 5px;
}

.btn-xl {
	font-size: 2rem;
	padding: 1.5rem 2.1rem;
	text-transform: uppercase;
}

.btn-lg {
	font-size: 1rem;
	padding: 0.8rem 1.3rem;
	text-transform: uppercase;
}

.btn-icon {
	margin-left: 1rem;
}

@media (max-width: 960px) {

		.showcase {
		height: 70vh;
	}

	.hide-sm {
		display: none;
	}

	.showcase-top img {
		top: 30%;
		left: 5%;
		transform: translate(0);
	}

	.showcase-content h1 {
		font-size: 3.7rem;
		line-height: 1;
	}

	.showcase-content p {
		font-size: 1.5rem;
	}

	.footer .footer-cols {
		grid-template-columns: repeat(2, 1fr);
	}

	.btn-xl {
		font-size: 1.5rem;
		padding: 1.4rem 2rem;
		text-transform: uppercase;
	}

	.text-xl {
		font-size: 1.5rem;
	}

	.text-lg {
		font-size: 1.3rem;
		margin-bottom: 1rem;
	}

	.text-md {
		margin-bottom: 1rem;
		font-size: 1.2rem;
	}
}

@media (max-width: 700px) {
	.showcase::after {
		background: rgba(0, 0, 0, 0.6);
		box-shadow: inset 80px 80px 150px #000000, inset -80px -80px 150px #000000;
	}

	.showcase-content h1 {
		font-size: 2.5rem;
		line-height: 1;
	}

	.showcase-content p {
		font-size: 1rem;
	}

	#tab-1-content .tab-1-content-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	#tab-2-content .tab-2-content-top {
		display: block;
		text-align: center;
	}

	#tab-2-content .tab-2-content-bottom {
		margin-top: 2rem;
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 2rem;
		text-align: center;
	}

	.btn-xl {
		font-size: 1rem;
		padding: 1.2rem 1.6rem;
		text-transform: uppercase;
	}
}

@media(max-height: 600px) {
  .showcase-content {
	margin-top: 3rem;
}
}

    </style>
<header class="showcase">
			<div class="showcase-top">
				<img src="https://i.ibb.co/r5krrdz/logo.png" alt="" />
				<a href="#" class="btn btn-rounded">Sign In</a>
			</div>
			<div class="showcase-content">
				<h1>See what's next</h1>
				<p>Watch anywhere. Cancel Anytime</p>
				<a href="#" class="btn btn-xl"
					>Watch Free For 30 Days <i class="fas fa-chevron-right btn-icon"></i
				></a>
			</div>
		</header>
		<section class="tabs">
			<div class="container">
				<div id="tab-1" class="tab-item tab-border">
					<i class="fas fa-door-open fa-3x"></i>
					<p class="hide-sm">Cancel at any time</p>
				</div>
				<div id="tab-2" class="tab-item">
					<i class="fas fa-tablet-alt fa-3x"></i>
					<p class="hide-sm">Watch anywhere</p>
				</div>
				<div id="tab-3" class="tab-item">
					<i class="fas fa-tags fa-3x"></i>
					<p class="hide-sm">Pick your price</p>
				</div>
			</div>
		</section>

		<section class="tab-content">
			<div class="container">
				<!-- Tab Content 1 -->
				<div id="tab-1-content" class="tab-content-item show">
					<div class="tab-1-content-inner">
						<div>
							<p class="text-lg">
								If you decide Netflix isn't for you - no problem. No commitment.
								Cancel online anytime.
							</p>
							<a href="#" class="btn btn-lg">Watch Free For 30 Days</a>
						</div>
						<img src="https://i.ibb.co/J2xDJV7/tab-content-1.png" alt="" />
					</div>
				</div>

				<!-- Tab Content 2 -->
				<div id="tab-2-content" class="tab-content-item">
					<div class="tab-2-content-top">
						<p class="text-lg">
							Watch TV shows and movies anytime, anywhere β€” personalized for
							you.
						</p>
						<a href="#" class="btn btn-lg">Watch Free For 30 Days</a>
					</div>
					<div class="tab-2-content-bottom">
						<div>
							<img src="https://i.ibb.co/DpdN7Gn/tab-content-2-1.png" alt="" />
							<p class="text-md">
								Watch on your TV
							</p>
							<p class="text-dark">
								Smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray
								players and more.
							</p>
						</div>
						<div>
							<img src="https://i.ibb.co/R3r1SPX/tab-content-2-2.png" alt="" />
							<p class="text-md">
								Watch instantly or download for later
							</p>
							<p class="text-dark">
								Available on phone and tablet, wherever you go.
							</p>
						</div>
						<div>
							<img src="https://i.ibb.co/gDhnwWn/tab-content-2-3.png" alt="" />
							<p class="text-md">
								Use any computer
							</p>
							<p class="text-dark">
								Watch right on Netflix.com.
							</p>
						</div>
					</div>
				</div>

				<!-- Tab Content 3 -->
				<div id="tab-3-content" class="tab-content-item">
					<div class="text-center">
						<p class="text-lg">
							Choose one plan and watch everything on Netflix.
						</p>
						<a href="#" class="btn btn-lg">Watch Free For 30 Days</a>
					</div>

					<table class="table">
						<thead>
							<tr>
								<th></th>
								<th>Basic</th>
								<th>Standard</th>
								<th>Premium</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Monthly price after free month ends on 6/19/19</td>
								<td>$8.99</td>
								<td>$12.99</td>
								<td>$15.99</td>
							</tr>
							<tr>
								<td>HD Available</td>
								<td><i class="fas fa-times"></i></td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
							</tr>
							<tr>
								<td>Ultra HD Available</td>
								<td><i class="fas fa-times"></i></td>
								<td><i class="fas fa-times"></i></td>
								<td><i class="fas fa-check"></i></td>
							</tr>
							<tr>
								<td>Screens you can watch on at the same time</td>
								<td>1</td>
								<td>2</td>
								<td>4</td>
							</tr>
							<tr>
								<td>Watch on your laptop, TV, phone and tablet</td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
							</tr>
							<tr>
								<td>Unlimited movies and TV shows</td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
							</tr>
							<tr>
								<td>Cancel anytime</td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
							</tr>
							<tr>
								<td>First month free</td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
								<td><i class="fas fa-check"></i></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</section>

		<footer class="footer">
			<p>Questions? Call 1-866-579-7172</p>
			<div class="footer-cols">
				<ul>
					<li><a href="#">FAQ</a></li>
					<li><a href="#">Investor Relations</a></li>
					<li><a href="#">Ways To Watch</a></li>
					<li><a href="#">Corporate Information</a></li>
					<li><a href="#">Netflix Originals</a></li>
				</ul>
				<ul>
					<li><a href="#">Help Center</a></li>
					<li><a href="#">Jobs</a></li>
					<li><a href="#">Terms Of Use</a></li>
					<li><a href="#">Contact Us</a></li>
				</ul>
				<ul>
					<li><a href="#">Account</a></li>
					<li><a href="#">Redeem Gift Cards</a></li>
					<li><a href="#">Privacy</a></li>
					<li><a href="#">Speed Test</a></li>
				</ul>
				<ul>
					<li><a href="#">Media Center</a></li>
					<li><a href="#">Buy Gift Cards</a></li>
					<li><a href="#">Cookie Preferences</a></li>
					<li><a href="#">Legal Notices</a></li>
				</ul>
			</div>
<script>
    const tabItems = document.querySelectorAll('.tab-item');
const tabContentItems = document.querySelectorAll('.tab-content-item');

// Select tab content item
function selectItem(e) {
	// Remove all show and border classes
	removeBorder();
	removeShow();
	// Add border to current tab item
	this.classList.add('tab-border');
	// Grab content item from DOM
	const tabContentItem = document.querySelector(`#${this.id}-content`);
	// Add show class
	tabContentItem.classList.add('show');
}

// Remove bottom borders from all tab items
function removeBorder() {
	tabItems.forEach(item => {
		item.classList.remove('tab-border');
	});
}

// Remove show class from all content items
function removeShow() {
	tabContentItems.forEach(item => {
		item.classList.remove('show');
	});
}

// Listen for tab item click
tabItems.forEach(item => {
	item.addEventListener('click', selectItem);
});

    </script>
		</footer>

16. Netflix sign in page clone

Made by Jay Thakur. Source

<!DOCTYPE html>
<html><head>
  <title>Sign in</title>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap" rel="stylesheet">
     <style>
         body {
    height:100vh;
    display:flex;
    align-items:center;
    justify-content: center;
    
}
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.container{
  position: relative;
  width:295px;
  height:500px;
  background:#121212;
  border-radius:20px;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  overflow:hidden;
  animation:pulse 3s infinite ;
}
.bg-img{
  position: absolute;
  top:-20px;
  width:100%;
  height:300px;
}
.container::before{
  content:"";
  position: absolute;
  width:100%;
  height:100%;
  z-index:1;
  background: linear-gradient(to top,#121212 65%,transparent);
}
.content{
  position: absolute;
  bottom:0;
  z-index:2;
  width:100%;
  height:330px;
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  align-items:center;
  font-family: 'Poppins', sans-serif;
}
form{
  width:260px;
  height:200px;
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
}
form input , button{
  border:none;
  height:40px;
  outline:none;
  border-radius:2px;
}
form input{
  width:260px;
  margin:5px 0;
  background:#333333;
  padding:0 10px;
}
form input::placeholder{
  font-family: 'Poppins', sans-serif;
}
form button{
  background:#E50813;
  color:#fff;
  font-size:16px;
  font-weight:bolder;
  font-family: 'Poppins', sans-serif;
}
.content p{
  width:260px;
  color:#737373;
  font-size:13px;
}
.content p a{
  text-decoration:none;
  color:#fff;
}
@keyframes pulse{
    from{
        box-shadow:0 0 0 100 rgba(255 0 0.3);
    }
    to{
        box-shadow:0 0 0 155px rgba(255 0 0.3);
    }
}
.netflix{
    width:150px;
}
         </style>
</head>

<body>
  <div class="container">
  <div class="bg-img">
  <img src="https://www.freepnglogos.com/uploads/football-player-png/football-player-cristiano-ronaldo-png-cristiano-ronaldo-png-image-20.png" width="250" alt="football player cristiano ronaldo png cristiano ronaldo png image" />
   </div> 
    <div class="content">
    <form>
      <div>
      <input type="email" name="email" placeholder="Email "/>
     <input type="password" name="password" placeholder="Password"/>
     </div>
     <button>Sign in</button>
    </form>
    <p>New to Netflix ? <a href="#">Sign up now</a></p><img class="netflix" src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" width="200" alt="netflix logo" />
    </div>
  </div>
</body>