9+ CSS Netflix Clone Examples

This post contains a total of 9+ CSS Netflix Clone Examples with Source Code. All these Netflix Clones are made using CSS.

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

Related Posts

CSS Netflix Clone Examples

1. Netflix Clone

Made by Carlos Avila. Netflix Clone made using CSS. It has static navigation and hover effects when you hover over any movie poster. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
/* CSS VARIABLES */
:root {
  --primary: #141414;
  --light: #F3F3F3;
  --dark: 	#686868;
}

html, body {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--primary);
  color: var(--light);
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  line-height: 1.4;
}

img {
  max-width: 100%;
}

h1 {
  padding-top: 60px;  
}

.wrapper {
  margin: 0;
  padding: 0;
}

/* HEADER */
header {
  padding: 20px 20px 0 20px;
  position: fixed;
  top: 0;
  display: grid;  
  grid-gap:5px;
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-areas: 
   "nt mn mn sb . . . "; 
  background-color: var(--primary);
  width: 100%;
  margin-bottom: 0px;  
}

.netflixLogo {
  grid-area: nt;
  object-fit: cover;
  width: 100px;
  max-height: 100%;
  
  padding-left: 30px;
  padding-top: 0px;  
}

.netflixLogo img {  
  height: 35px;     
}

#logo {
  color: #E50914;  
  margin: 0; 
  padding: 0; 
}


.main-nav {
  grid-area: mn;
  padding: 0 30px 0 20px;
}

.main-nav a {
  color: var(--light);
  text-decoration: none;
  margin: 5px;  
}

.main-nav a:hover {
  color: var(--dark);
}

.sub-nav {
  grid-area: sb;
  padding: 0 40px 0 40px;
}

.sub-nav a {
  color: var(--light);
  text-decoration: none;
  margin: 5px;
}

.sub-nav a:hover {
  color: var(--dark);
}


/* MAIN CONTIANER */
.main-container {
  padding: 50px;
}

.box {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
}

.box a {
  transition: transform .3s;  
}

.box a:hover {
  transition: transform .3s;
  -ms-transform: scale(1.4);
  -webkit-transform: scale(1.4);  
  transform: scale(1.4);
}

.box img {
  border-radius: 2px;
}

/* LINKS */
.link {
  padding: 50px;
}

.sub-links ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}

.sub-links a {
  color: var(--dark);
  text-decoration: none;
}

.sub-links a:hover {
  color: var(--dark);
  text-decoration: underline;
}

.logos a{
  padding: 10px;
}

.logo {
  color: var(--dark);
}


/* FOOTER */
footer {
  padding: 20px;
  text-align: center;
  color: var(--dark);
  margin: 10px;
}

/* MEDIA QUERIES */

@media(max-width: 900px) {

  header {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
    "nt nt nt  .  .  . sb . . . "
    "mn mn mn mn mn mn  mn mn mn mn";
  }

  .box {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
  }

}

@media(max-width: 700px) {

  header {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
    "nt nt nt  .  .  . sb . . . "
    "mn mn mn mn mn mn  mn mn mn mn";
  }

  .box {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }

  .sub-links ul {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }
   
}

@media(max-width: 500px) {

  .wrapper {
    font-size: 15px;
  }

  header {
    margin: 0;
    padding: 20px 0 0 0;
    position: static;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 
    "nt"    
    "mn"
    "sb";
    text-align: center;
  }

  .netflixLogo {
    max-width: 100%;
    margin: auto;
    padding-right: 20px;
  }

  .main-nav {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
  }

  h1 {
    text-align: center;
    font-size: 18px;
  }

 

  .box {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(1, 1fr);
    text-align: center;    
  }

  .box a:hover {
    transition: transform .3s;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);  
    transform: scale(1.2);
  }

  .logos {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
  }

  .sub-links ul {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
    font-size: 15px;
  }
}
</style>
</head>

<body>
  <html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Netflix</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>

  <script src="main.js"></script>
</head>
<body>
  <div class="wrapper">

    <!-- HEADER -->
    <header>
      <div class="netflixLogo">
        <a id="logo" href="#home"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/logo.PNG?raw=true" alt="Logo Image"></a>
      </div>      
      <nav class="main-nav">                
        <a href="#home">Home</a>
        <a href="#tvShows">TV Shows</a>
        <a href="#movies">Movies</a>
        <a href="#originals">Originals</a>
        <a href="#">Recently Added</a>
        <a target="_blank" href="https://codepen.io/cb2307/full/NzaOrm">Portfolio</a>        
      </nav>
      <nav class="sub-nav">
        <a href="#"><i class="fas fa-search sub-nav-logo"></i></a>
        <a href="#"><i class="fas fa-bell sub-nav-logo"></i></a>
        <a href="#">Account</a>        
      </nav>      
    </header>
    <!-- END OF HEADER -->
    
    <!-- MAIN CONTAINER -->
    <section class="main-container" >
      <div class="location" id="home">
          <h1 id="home">Popular on Netflix</h1>
          <div class="box">
            <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/p1.PNG?raw=true" alt=""></a>
            <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/p2.PNG?raw=true" alt=""></a>
            <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/p3.PNG?raw=true" alt=""></a>
            <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/p4.PNG?raw=true" alt=""></a>
            <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/p5.PNG?raw=true" alt=""></a>
            <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/p6.PNG?raw=true" alt=""></a>
    
            <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/p7.PNG?raw=true" alt=""></a>
            <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/p8.PNG?raw=true" alt=""></a>
            <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/p9.PNG?raw=true" alt=""></a>
            <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/p10.PNG?raw=true" alt=""></a>
            <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/p11.PNG?raw=true" alt=""></a>
            <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/p12.PNG?raw=true" alt=""></a>        
          </div>
      </div>
      

      <h1 id="myList">Trending Now</h1>
      <div class="box">
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/t1.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/t2.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/t3.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/t4.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/t5.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/t6.PNG?raw=true" alt=""></a>                  
      </div>
      
      <h1 id="tvShows">TV Shows</h1>
      <div class="box">
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv1.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv2.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv3.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv4.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv5.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv6.PNG?raw=true" alt=""></a>

        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv7.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv8.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv9.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv10.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv11.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv12.PNG?raw=true" alt=""></a>              
      </div>
      

      <h1 id="movies">Blockbuster Action & Adventure</h1>
      <div class="box">
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m1.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m2.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m3.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m4.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m5.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m6.PNG?raw=true" alt=""></a>                
      </div>

      <h1 id="originals">Netflix Originals</h1>
      <div class="box">
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o1.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o2.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o3.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o4.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o5.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o6.PNG?raw=true" alt=""></a>                
      </div>
     
    <!-- END OF MAIN CONTAINER -->

    <!-- LINKS -->
    <section class="link">
      <div class="logos">
        <a href="#"><i class="fab fa-facebook-square fa-2x logo"></i></a>
        <a href="#"><i class="fab fa-instagram fa-2x logo"></i></a>
        <a href="#"><i class="fab fa-twitter fa-2x logo"></i></a>
        <a href="#"><i class="fab fa-youtube fa-2x logo"></i></a>
      </div>
      <div class="sub-links">
        <ul>
          <li><a href="#">Audio and Subtitles</a></li>
          <li><a href="#">Audio Description</a></li>
          <li><a href="#">Help Center</a></li>
          <li><a href="#">Gift Cards</a></li>
          <li><a href="#">Media Center</a></li>
          <li><a href="#">Investor Relations</a></li>
          <li><a href="#">Jobs</a></li>
          <li><a href="#">Terms of Use</a></li>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Legal Notices</a></li>
          <li><a href="#">Corporate Information</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </section>
    <!-- END OF LINKS -->

    <!-- FOOTER -->
    <footer>
      <p>&copy 1997-2018 Netflix, Inc.</p>
      <p>Carlos Avila &copy 2018</p>
    </footer>
  </div>

</body>
</html>
 

2. Working Netflix Clone

Made by Stephanie okolie. Netflix clone with working notification button and other features such as play and more info. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
*{
    box-sizing: border-box;
    padding:0;
  
   
}
a{
  text-decoration:none;
 color: #BDBDBD;
}
html{
   height:160vh;
    
}
body{
    background-color: #141414;
    color: #BDBDBD;
    font-family:  Arial;
    overflow-x: hidden;
    height:160vh;
   
}

/* nav headiing */
.fixed-div{
background-color: #111111;
  position: fixed; 
    top: 0;
    left: 0;
   width: 100%;
   height: 70px;
 z-index: 4;
}
.parent-div{
    height: 50px; 
}
.logo{
    width: 90px;
    margin-left: 40px;
    margin-top: 10px;
    
}
/* dropdown content */
.dropdown{
    position: relative;
    left: 100px;
    
    
}
.dropdown-content{
display: flex;
position: relative;
top: -50px;
left: 50px;


}
.dropdown-content p{
    margin: 25px 10px;

}
.dropdown p:hover{
font-weight: bolder; color: white;
}
.browse-el{
    display: none;
}
/* notification nav */
.float-op{
    position: relative;
   top: -37px;
    left:-120px;
}

.search{
    margin: 0 auto;
   top:38px;
    border: 2px solid #ffffff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
   
    
}
.search::after{
    content: "";
    position: absolute;
    width: 5px;
    height: 10px;
    top:70%;
    left:10px;
    background: #ffffff;
    transform: rotate(-50deg);
    border-radius: 10px;
    
}

.user-img{
     position: relative;
   top: -40px;
    left:6px; 
}
.user-img img{
 border-radius: 5px;  
}

.span-icon{
    width: 0px;
    height: 0px;
    border-top: 8px solid #E5E5E5;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    margin: 10px -0px;
    
}
/* notificatin dropdown */
.dropbtn {
    background-color: #ffffff;
    cursor: pointer;
    transform: translateY(-50%);
    transform-origin: 50% 0%;
    width: 15px;
    height: 10px;
    border-radius: 28px 28px 0 0;
   
    z-index: 4;
  }
  
  .dropbtn::after{
    content: "";
    position: absolute;
    border-radius: 100px;
    width: 12px;
    height: 12px;
    top:109%;
    left:10%;
    background-color: #FFFFFF;   
    z-index: -1;
  }
  .dropbtn:before{
    content: "";
    position: absolute;
    border-top-left-radius: 1100px;
    border-top-right-radius: 1100px;
    width: 22px;
    height: 10px;
    top:70%;
    left:-23%;
    background-color: #FFFFFF;
    
}
  .dropdown2 {
    position: relative;
    top: -35px;
    left:-66px;
    display: inline-block;
    z-index: 3;
  }
  
  .dropdown-content2 {
    display: none;
    position: absolute;
    top: 20px;
    right: 0;
    background-color:rgba(0, 0, 2, .5);
    border-top: 3px solid #757676;
    min-width: 380px;
    height: 400px;
    overflow-y: scroll;
    padding: 20px;
    box-shadow: 0px 8px 16px 0px rgba(27, 26, 26, 0.2);
    z-index: 1;
    
  }
  .span-style{
    width: 0px;
    height: 0px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #E5E5E5;
    position: relative;
    top: -25px;
    left: 345px;
    
    
}

.dropdown-img{
    display: flex;
    border-bottom: solid 2px #343434;
   margin-top: 8px;
  
    }
.dropdown-content2 img{

border-radius: 5px;
margin-left: -10px;

}
.dropdown-img p{
margin-top: -2px;
margin-left: 10px;

}
  .dropdown-content2 p {
    color: #ccc;
    
   
  }
  
  .dropdown-content2 p:hover {background-color: #222;width: 100%;}
  .dropdown2:hover .dropdown-content2 {display: block;}
  .dropdown2:hover .dropbtn {background-color: #ccc;}
  
  /* image and logo */
  .between-img-div{
     position: relative;
     top: 10px;
  }
.logo-and-text{
    position: relative;
    margin-left: 40px;
    margin-top: 60px;
   top: -630px;
  
}
.between-img{
    height: 530px;
    width: 100%;
    
}

.series-synopsis{
    margin-top: 10px;
   
}
button{
    margin-top: 20px;
    
}
.svg-radius{
    width: 20px;
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
}
.info-btn{
    margin-left: 20px;
    position: relative;
    top: -17px;
}
.color-primary{
background-color:#FFFFFF ;
border: none;
width: 95px;
    height: 40px;
    border-radius: 3px;
}
.button-secondary{
    background-color: #4F4F4F;
    border: none;
    width: 110px;
    height: 40px;
    border-radius: 3px;
    margin-left: 10px;
}
.ratin-div{
    position: relative;
    top: -670px;
    
}
/* rating */
.maturity-number{
   position: relative;
   top: -8px;
   background-color:rgba(0, 0, 0, .5);
   padding: 9px;
   padding-right: 50px;
   border-left: 3px solid #ffffff ;
   
}
.style-svg{
    width: 30px;
    color: black;
   

}
.all-drama{
    background-color: #141414;
    position: relative;
    top: -640px;
    
}
/* drama collection */
.tv-dramas{
    margin-left: 40px;
    margin-top: 70px;
}
.tvd-h2{
    position: relative;;
    top: -45px;
}
.div-width{
    width: 100%;
    cursor: pointer;
    overflow-x: auto;
    margin-top: -45px;
}
.all-movie-div{
    display: flex;
}
.all-movie-div img{
    border-radius: 4px;
    margin-left: 5px;
  
   
}
.second-all-movie-div{
    display: flex;
}
.all-tvd-h2{
    position: relative;;
    top: 15px;
}
/* Next & previous buttons */
.sec-next{
    cursor: pointer;
    position: relative;;
    top: 16px;
    left: 290px;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    background-color: none;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;

}
.prev, .next {
    cursor: pointer;
    position: relative;;
    top: -100px;
    left: -10px;
    width: auto;
    padding: 26px;
    margin-top: -22px;
    color: white;
    background-color: none;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
   
  }
  
  .next {
   float:right;
    border-radius: 3px 0 0 3px;
  }
  
  
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
    color: white;
    
  }
  
/* Trending now collection */
.trending-now{
    margin-left: 40px;
    margin-top: -40px;
}
.second-all-movie-div img{
    border-radius: 4px;
    margin-left: 6px;
    
}
.second-div-width{
    width: 100%;
    cursor: pointer;
    overflow-x: auto;
    
}

.h2list{
    position: relative;;
    top: 30px;
    
}
/* My list collection */
.my-list{
    margin-left: 40px;
    margin-top: -70px;
}
.second-div-list img{
    border-radius: 4px;
   margin-left:10px
}
.second-div-list{
    display: flex;
 
}
.list-div-width{
    width: 100%;
    cursor: pointer;
    overflow-x: auto;
    margin-top: 40px;
}


/* only on netflix colllection */
.only-on-netflix{
    margin-left: 40px;
    margin-top: -40px;
}
.netflix-all-movie-div img{
    border-radius: 4px;
    margin-left: 6px;
    height: 450px;
  
}
.netflix-div-width{
    width: 100%;
    cursor: pointer;
    overflow-x: auto;
    margin-top: 40px;
}
.netflix-all-movie-div{
    display: flex;
}
.tvtvd-h2{
    position: relative;
    top: 30px;
    
}
/* Top 10 */


.top10-now{
    margin-left: 40px;
    height: 250px;
    overflow-y: hidden;
   
}
.top10-all-movie-div img{
    border-radius: 4px;
    margin-left: 80px;
    width: 150px;
}
.top10-div-width{
    width: 100%;
    cursor: pointer;
    overflow-x: auto;
    overflow-y: hidden;
}
.top10-all-movie-div{
    display: flex;
}
.top10-tvd-h2{
    position: relative;;
    top: 10px;
    
    
}
.topp-one{
    width: 40px;
    height: 70px;
    background: #000000;
    transform: rotate(60deg);
    position: relative;
    top: 0px;
    left: 20px;
    border-left: 3px solid #4E4E4E;
    border-right: 3px solid #4E4E4E;
    border-bottom: 3px solid #4E4E4E;
    border-top: 3px solid #4E4E4E;
}

.topp-one::before{
    width: 40px;
    height: 167px;
    background: #000000;
    position: absolute;
    left: 60px;
    top: -60px;
    content: "";
    transform: rotate(-60deg);
    border-right: 4px solid #4E4E4E;
    border-bottom: 4px solid #4E4E4E;
    
}
.quams-money img{
position: relative;
left: 15px;
top: -70px;
}
.topp-2{
font-size: 14rem;
    position: relative;
    top: -45px;
    left: 20px;
    color: #000000;
    
}
.top2-film-nigerial{
   position: relative;
   left: -70px;
   top: -10px;
}
.top2-film-nigerial img{
    position: relative;
    margin: -105px 0 0 195px;
    
     
}
/* CSS NUMBER 2 */
.half-circle {
    /* Create the circle */
    width: 110px;
    height: 110px;
    border: 32px solid #4E4E4E;
    border-radius: 50%;
    /* Halve the circle */
    border-bottom-color: transparent;
    border-left-color: transparent;
    /* Rotate the circle */
    transform: rotate(-15deg);
    margin-left: 100px;
   position: relative;
   top:10px;
   
  }
  .half-circle:before{
    width: 35px;
    height: 125px;
    background-color: #000000;
    border-right: 4px solid #4E4E4E;
    border-bottom-color: #4E4E4E;
    border-left-color: #4E4E4E;
    transform: rotate(50deg); 
    content: "";
    position: absolute;
    left: -2px;
    top: 15px;
    border-radius: 0 0 0px 50px;
  }


  .half-circle::after{
      content: "";
      width: 110px;
    height: 35px;
    background-color:  #000000;
    border-right: 4px solid #4E4E4E;
    border-bottom: 4px solid #4E4E4E;
    border-bottom-color: #4E4E4E;
    border-left-color: #4E4E4E;
    transform: rotate(15deg);
    position: absolute;
    left: -33px;
    top: 100px;
  }
/* Number 3 css */
.mercenary{
    position: relative;
    left: -130px;
    top: -10px;
}
.mercenary img{
    position: relative;
    margin: -120px 0 0 145px;
}
.number-three-css {
    position: relative;
    left: -35px;
    top: 10px;
    width: 90px;
    height: 120px;
    border: 27px solid #4E4E4E;
    border-radius: 50% 50% 50% 50%;
    border-bottom-color: transparent;
    border-top-width: 20px;
    border-left-color: transparent;
    transform: rotate(-10deg);
    margin-left: 100px;
  }
  .number-three-css::before{
    width: 16px;
    height: 40px;
    background-color: #000000;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transform: rotate(60deg);
    margin-left: 100px;
    content: "";
    position: absolute;
    left: -82px;
    top: 40px;
    border-radius: 10px 0 30px 0px;
  }
  
  .number-three-css::after{
    width: 50px;
    height: 50px;
    border: 25px solid #000000;
    border-radius: 50% 50% 50% 50%;
    border-bottom-color: #000000;
    border-top-width: 10px;
    border-left-color: transparent;
    transform: rotate(20deg);
    margin-left: 100px;
    content: "";
    position: absolute;
    left: -135px;
    top: 55px;
  
  }



  /* Div Number Four */
  .div-number-four{
    position: relative;
    left: -180px;
    top: -20px;
    
  }
  .div-number-four img{
    position: relative;
    margin: -105px 0 0 175px;
   
}
  .number-four {
    width: 35px;
    height: 130px;
    background-color: #000000;
    transform: rotate(40deg); 
    margin-left: 100px;
    border-radius: 0px 0px 5px 10px;
    border-right: 4px solid #4E4E4E;;
    border-left: 4px solid #4E4E4E;;
   position: relative;
   top: 20px;
  }
  .number-four::before{
    width: 30px;
    height: 120px;
    background-color:#000000;
    transform: rotate(50deg); 
    margin-left: 100px;
    content: "";
    position: absolute;
    left: -65px;
    top: 40px;
    border-radius: 0px 0px 0px 10px;
    border-right: 4px solid #4E4E4E;;
    border-top: 4px solid #4E4E4E;;
    border-bottom: 4px solid #4E4E4E;;
  }
  
  .number-four::after{
    width: 30px;
    height: 165px;
    background-color: black;
    transform: rotate(-40deg); 
    margin-left: 100px;
    content: "";
    position: absolute;
    left: -58px;
    top: -28px;
    border-radius: 5px 5px 0px 10px;
    border-right: 4px solid #4E4E4E;;
    border-top: 4px solid #4E4E4E;;
    border-left: 2px solid #4E4E4E;;
  } 
/* Number five css */
.div-number-five{
    position: relative;
    left: -170px;
    top: -10px;    
}
.div-number-five img{
    position: relative;
    margin: -40px 0 0 100px;
}
.number-five-css {
    width: 25px;
    height: 55px;
    background-color: #4E4E4E;
    border-right: 4px solid #4E4E4E;
    border-top: 20px solid #4E4E4E;
    margin-left: 100px;
    transform: rotate(90deg);
    position: relative;
    left: -40px;
    top: 10px;
    
  }
  .number-five-css::before{
    width: 20px;
    height: 55px;
    background-color: #000000;
    border-right: 4px solid #4E4E4E;
    border-top: 20px solid #4E4E4E;
    transform: rotate(-60deg);
    margin-left: 100px;
    content: "";
    position: absolute;
    left: -75px;
    top: 5px;
    border-radius: 10px 0 30px 0px;
  }
  
  .number-five-css::after{
    width: 60px;
    height: 70px;
    border: 25px solid #000000;
    border-radius: 70% 50% 30% 30%;
    border-bottom-color: #000000;
    border-top-width: 15px;
    border-bottom-width: 20px;
    border-left-color: transparent;
    transform: rotate(-90deg);
    margin-left: 100px;
    content: "";
    position: absolute;
    left: -50px;
    top: -18px;
  }
  
  /* Number Six */
  .div-number-6{
    position: relative;
    left: -160px;
    top: -10px;
    
  }
  .sex-life-img{
    position: relative;
    top: -450px;
    left: 10px;
    
  }
  .number-six{
   font-size: 14rem;
   color: #4E4E4E;
    border-radius: 50%;
    position: relative;
    left: -95px;
    top: -130px;
    margin: 100px;
    border-left-width: 2px;
  }
   
  /* Number Seven */
  .div-number-7{
    position: relative;
    left: -225px;
    top: 150px;
  }
  .div-number-7 img{
    position: relative;
    top: -250px;
    left: -40px;
  }
  .number-seven{
    width: 40px;
    height: 96px;
    background-color: #000000;
    transform: rotate(90deg);
    position: relative;
    left: -10px;
    top: -180px;
    border: 4px solid #4E4E4E
  }
  .number-seven::before{
    width: 38px;
    height: 130px;
    background-color: #000000;
    transform: rotate(90deg);
    content: "";
    position: absolute;
    left: 73px;
    top: -40px;
    transform: rotate(-80deg);
    border-left: 4px solid #4E4E4E;
    border-right: 4px solid #4E4E4E;
    border-bottom: 4px solid #4E4E4E;
  }
  
  /* Footer */
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    font-size: 13px;
    color: #676767;
    margin-top: 40px;
    
  }
  .grid-item {
    padding: 15px;
    text-align: center;
  }
  .grid-container:hover{
      cursor: pointer;
  }
  .grid-item span{
      margin-left: 10px;
      font-size: large;
  }
  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
/* media quries */
@media (max-width: 768px) {
    .dropdown{
        margin-bottom: 30px;
        display: inline-block;
        text-align: center;
        cursor: pointer;

        
    }
    .browse-el{
        display: block;
        position:relative;
        top:  -10px;
        margin-left: -40px;
    }
    .dropdown-content{
        display: none;
        position: absolute;
        top: 20px;
        left: -135px;
        height: 300px;
        background-color: rgba(0, 0, 0, .5);
        min-width: 260px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 10px;
        z-index: 1;
        font-weight: lighter;
        border-top: 3px solid #E5E5E5;
        border-left: 1px solid #E5E5E5;
        border-right: 1px solid #E5E5E5;
        border-bottom: 1px solid #E5E5E5;
        
    }
    .dropdown-content::before{
        width: 0px;
        height: 0px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 15px solid #E5E5E5;
        position: absolute;
        left: 110px;
        top: -18px;
        content: "";
    }
   
    .dropdown:hover .dropdown-content {
        display: block;
    }
    .dropdown-content p:hover {
        background: #0D0D0D;
        padding-top: 10px; 
        padding-bottom: 10px;
        padding-left: 20px; 
        padding-right: 20px;
      width: 100%;
      margin: 0;
    }
    
    .between-img{
        height: 410px;
        
        
    }
    .logo-and-text{
        top: -400px;
        width: auto;
        margin-top: 0px;
    }
    .title-logo{
     width: auto;
     height: 20vh;
    }
    .ratin-div{
        top: -465px;
    }
    
    .all-drama{
        top: -400px;
    } 
   
     
}

@media (max-width: 400px) {
    body{
        font-size: small;
       width: 100%;
    }
    .logo{
        margin-left: 30px;
    
        
    }
    .dropdown2 {
        left:-50px;
      }
      
.browse-el{
    margin-left: -120px;
}
.dropdown-content{
   left:  -190px;
    
}
.dropdown-content2 {
    min-width: 220px;
   
  }
.float-op{
  left: -100px; 
    
}
.user-img{
    left: 10px; 
}

  .sec-next{
    left: 230px;
    top: 25px;
}
.title-logo{
margin-top: 20px;
}
.logo-and-text{
    margin-left: 20px
}
.grid-container {
    grid-template-columns: auto auto;
    
  }

}
</style>
</head>

<body translate="no" >
  <link rel="stylesheet" href="netflix.css">
    <script src="https://kit.fontawesome.com/da3a01af99.js" crossorigin="anonymous"></script>
    <title>Netflix Clone</title>
<body>
    <!-- Nav heading -->
    <div class="fixed-div">
    <div class="parent-div">
    <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/netflix%20logo.png?raw=true" alt="netflix img" class="logo">
        <div class="dropdown">
            <span class="browse-el">Browse</span>
            <div class="dropdown-content">
              <p>Home</p>
               <p>Tv shows</p>
                <p>Movies</p>
                <p>News & popular</p>
              <p><a href="#list">My List</a></p>
            </div>
    </div>
    </div>
    <!-- notification nav -->
   <div class="float-op" style="float: right;">
        <div class="search"></div>
       </div>
<div class="dropdown2" style="float:right;">
    <div class="dropbtn"></div>
    <div class="dropdown-content2">
        <div class="span-style"></div>
        <div class="dropdown-img">
            <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/13reason-why.jpeg?raw=true" alt="">
            <p>Countinue Watching<br>
                 13 Reasons Why<br>
              <span style= "color:#2D2D2D">Today</span></p>
          </div>
          <div class="dropdown-img">
            <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/after-life.jpeg?raw=true" alt="">
            <p>πŸ›Ž Reminder: New Arrival<br>
                 Afterlife Of The Party<br>
              <span style= "color:#2D2D2D">1 day ago</span></p>
          </div>
        <div class="dropdown-img">
      <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/control-zz.jpeg?raw=true" alt="">
      <p>πŸ›Ž Reminder: New Season<br>
           Season 2 is ready to watch.<br>
        <span style= "color:#2D2D2D">1 day ago</span></p>
    </div>
    <div class="dropdown-img">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/csInapp_112x63.png?raw=true" alt="">
        <p>Netflix Lookahead<br>
             Explore what's coming soon<br>
          <span style= "color:#2D2D2D">1 day ago</span></p>
      </div>
    <div class="dropdown-img">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/ijee.jpeg?raw=true" alt="">
        <p>πŸ›Ž Reminder: New Arrival<br>
             Out Of My League<br>
             <span style= "color:#2D2D2D">5 days ago</span></p>
      </div>
      <div class="dropdown-img">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/monster-hunt.jpeg?raw=true" alt="">
        <p>πŸ›Ž Reminder: New Arrival<br>
             Monster Hunt<br>
             <span style= "color:#2D2D2D">2 days ago</span></p>
      </div>
      <div class="dropdown-img">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/vivo.jpeg?raw=true" alt="">
        <p>New Arrival<br>
             Vivo<br>
             <span style= "color:#2D2D2D">3 weeks ago</span></p>
      </div>
      <div class="dropdown-img">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/out-of-my-league.jpeg?raw=true" alt="">
        <p>πŸ›Ž Reminder: New Arrival<br>
             Ije The Journey<br>
             <span style= "color:#2D2D2D">2 days ago</span></p>
      </div>
      <div class="dropdown-img">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/csInapp_112x63.png?raw=true" alt="">
        <p>Netflix Lookahead<br>
             Explore what's coming soon<br>
          <span style= "color:#2D2D2D">1 day ago</span></p>
      </div>
      <div class="dropdown-img">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/resort-to-love.jpeg?raw=true" alt="">
        <p>Reminder:New Arrival<br>
             Resort to love<br>
          <span style= "color:#2D2D2D">1 day ago</span></p>
      </div>
      <div class="dropdown-img">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/kissin-booth.jpeg?raw=true" alt="">
        <p>πŸ›Ž Reminder: New Arrival<br>
             Kissing Booth 3<br>
          <span style= "color:#2D2D2D">1 day ago</span></p>
      </div>
    </div>
   </div>
<div class="user-img" style="float: right;">
    <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/user.png?raw=true" alt="">
          <span class="span-icon"></span> 
      </div>
</div>

  <!-- image and logo -->
<div class="between-img-div">
    <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/between-1.webp" class="between-img" alt="">
</div>
    <div class="logo-and-text">
        <div class="titleWrapper" style="transform-origin: left bottom; transform: scale(1) translate3d(0px, 0px, 0px); transition-duration: 1300ms; transition-delay: 0ms;">
            <div class="billboard-title">
                <img class="title-logo" src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/netflixsvg.webp" title="Between" alt="Between">
            </div>
        </div>
            <div class="info-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 1300ms; transition-delay: 0ms; opacity: 1;">
                <div class="info-wrapper-fade" style="opacity: 1; transition-duration: 600ms; transition-delay: 200ms;">
                        <div class="series-synopsis">After a mysterious disease kills every resident over 21 years old,<br> survivors of a town must fend for<br> themselves when the government quarantines them.</div>
                    </div>
                    <button class="color-primary" tabindex="-1" type="button"><div class="ltr-1ksxkn9"><div class="medium ltr-dguo2f" role="presentation">
                        <svg class="svg-radius" viewBox="0 0 24 24"><path d="M6 4l15 8-15 8z" fill="currentColor"></path></svg></div></div>
                        <div class="just-div" style="width:1rem"></div>
                        <span class="info-btn">Play</span></button></a>
                        <button class="button-secondary"  type="button">
                            <div class="ltr"><div class="medium"><svg class="svg-radius" viewBox="0 0 24 24"><path d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10zm-2 0a8 8 0 0 0-8-8 8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8zm-9 6v-7h2v7h-2zm1-8.75a1.21 1.21 0 0 1-.877-.364A1.188 1.188 0 0 1 10.75 8c0-.348.123-.644.372-.886.247-.242.54-.364.878-.364.337 0 .63.122.877.364.248.242.373.538.373.886s-.124.644-.373.886A1.21 1.21 0 0 1 12 9.25z" fill="currentColor">
                            </path></svg></div></div>
                            <div class="more-info" style="width:1rem"></div>
                            <span class="info-btn">More Info</span></button>
                        </div></div></div></div></div></div></span>                    
</div>
<!-- rating -->
<div class="ratin-div" style="float: right;">
        <button aria-label="Replay" class="color-supplementary" type="button">
                <div class="small-div">
                    <svg class="style-svg" viewBox="0 0 24 24">
                        <path d="M20 12.35l1.919-1.371 1.162 1.627-4.08 2.915-4.082-2.915 1.162-1.627L18 12.349V12c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.93 0 3.68-.79 4.94-2.06l1.42 1.42A8.954 8.954 0 0 1 11 21a9 9 0 1 1 9-9v.35z" fill="currentColor">
 </path></svg>
</div></button>
<span class="rating">
    <span class="maturity-number">16+</span>
</span></div>
</div>
<!-- drama collection -->
<section class="all-drama">
<div class="tv-dramas">
    <h2 class="tvd-h2">Tv Dramas</h2>
    <div class="div-width">
    <div class="all-movie-div">
    <div class="orange">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/orange%20is%20the%20new.jpg?raw=true" alt="orange image">
    </div>
    <div class="outerbanks">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/outer-banks.jpg?raw=true" alt="outerbanks image">
    </div>
    <div class="gooddoctor">
        <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/gooddoctor.webp" alt="gooddoctor image">
    </div>
    <div class="teenwolf">
        <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/teenwolf.webp" alt="teenwolf image">
    </div>
    <div class="vincezo">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/vincenzo.jpg?raw=true" alt="vincenzo image">
    </div>
    <div class="nevertheless">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/nevertheless.jpg?raw=true" alt="nevertheless image">
    </div>
    <div class="notokay">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/it%20is%20okay%20to%20not%20be%20okay.jpg?raw=true" alt="netflix not okay series img">
    </div>
</div>
</div>
</div>
<div class="aror">
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>
</div>
<!-- trending now -->
<div class="trending-now">
    <h2 class="all-tvd-h2">Trending now</h2>
    <div class="second-div-width">
        <div class="second-all-movie-div">
    <div class="control-z">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/controlz.jpg?raw=true" alt="contro z">
    </div>
    <div class="crazy-rich-asians">
        <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/crazy%20rich%20asian.webp" alt="crazy-rich-asians">
    </div>
    <div class="blood">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/blood.jpg?raw=true" alt="blood series">
    </div>
    <div class="mimi">
        <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/mimi.webp" alt="mimi">
    </div>
    <div class="my-secrete-romance">
        <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/secrete%20romance.webp" alt="my-secrete-romance">
    </div>
    <div class="insatiable">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/insatiable.jpg?raw=true" alt="insatiable">
    </div>
    <div class="tempted">
        <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/tempted.webp" alt="tempted">
    </div>
    </div>
</div>
</div>
<div class="aror">
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>
</div>
<!-- my list -->
<div class="my-list" id="list">
    <h2 class="h2list">My List</h2>
    <div class="list-div-width">
        <div class="second-div-list">
            <div class="nevertheless-list">
                <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/nevertheless.jpg?raw=true" alt="">
            </div>
            <div class="ije">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/ije.webp" alt="ije">
            </div>
            <div class="controlz-list">
                <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/controlz.jpg?raw=true" alt="control-z">
            </div>
            <div class="hwarang">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/hwarang.webp" alt="hwarang">
            </div>
            <div class="one-day">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/oneday.webp" alt="one day">
            </div>
                <div class="blood-in-list">
                    <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/blood.jpg?raw=true" alt="blood">
                </div>
                <div class="blade">
                    <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/blade.webp" alt="blade series">
                </div>
          <div class="vincezo">
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/vincenzo.jpg?raw=true" alt="vincenzo image">
    </div>
            </div>
        </div>
    </div>
</div>
<div class="aror">
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>
</div>
<!-- only on netflix -->
<div class="only-on-netflix">
    <h2 class="tvtvd-h2">Only On Netflix</h2>
    <div class="netflix-div-width">
        <div class="netflix-all-movie-div">
            <div class="nevertheless-list">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/never-big-img.webp" alt="">
            </div>
            <div class="ije">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/vincenzo-bigimg.webp" alt="ije">
            </div>
            <div class="controlz-list">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/not%20okaybig%20img.webp" alt="control-z">
            </div>
            <div class="hwarang">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/outerbanks%20bigimg.webp" alt="hwarang">
            </div>
            <div class="one-day">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/spaceswipper.webp" alt="one day">
            </div>
                <div class="blood-in-list">
                    <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/blood%20red%20sky.webp" alt="blood">
                </div>
                <div class="blade">
                    <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/blood%20and%20water%20bigimg.webp":alt="blade series">
                </div>
          <div class="image">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/cha-cha-hometpwn.webp" alt="cha-cha-hometpwn">
            </div>
            <div class="image">
                <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/Hes-all-that.jpg?raw=true" alt="he's all that" width="250">
            </div>
            <div class="image">
                <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/sweet-girl.jpg?raw=true" alt="" width="250">
            </div>
            <div class="image">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/king-of-boys.webp" alt="">
            </div>
            </div>
        </div>
    </div>
</div>
<div class="top10-now">
    <h2 class="top10-tvd-h2">Top 10 In Nigeria</h2>
    <div class="top10-div-width">
        <div class="top10-all-movie-div">
    <div class="quams-money">
        <div class="topp-one"></div>
        <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/quans%20money.webp" alt="quams money">
    </div>
    <div class="top2-film-nigerial">
      <div class="half-circle"></div>
        <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/top%20two%20netflix.webp" alt="72 film" class="imange">
    </div>
    <div class="mercenary">
        <div class="number-three-css"></div>
        <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/mercenary.webp" alt="mercenary series">
    </div>
    <div class="div-number-four">
        <div class="number-four"></div>
        <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/resort%20to%20love.jpeg?raw=true" alt="Resort to love">
    </div>
    <div class="div-number-five">
        <div class="number-five-css"></div>
        <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/ije%20top%20five.webp" alt="ije">
    </div>
    <div class="div-number-6">
        <div class="number-six">6</div>
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/sex%20life.jpeg?raw=true" alt="sex life" class="sex-life-img">
    </div>
    <div class="div-number-7">
        <div class="number-seven"></div>
        <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/sex%20life.jpeg?raw=true" alt="sex life">
    </div>
</div>
</div>
</div>
<div class="aror">
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>
</div>
<!-- women behind the screen -->
<div class="my-list div-list">
    <h2 class="h2list" style="position:relative; top:60px">Women behind the screen</h2> <a class="sec-next">&#10095;</a>
    <div class="list-div-width">
        <div class="second-div-list">
            <div class="nevertheless-list">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/intern.webp" alt="">
            </div>
            <div class="ije">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/what%20girl%20wants.webp" alt="ije">
            </div>
            <div class="controlz-list">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/five%20feet.webp" alt="control-z">
            </div>
            <div class="hwarang">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/wonderwoman.webp" alt="hwarang">
            </div>
            <div class="one-day">
                <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/enchanted.webp" alt="one day">
            </div>
                <div class="blood-in-list">
                    <img src="https://github.com/Chinemereem/Netflix-clone/blob/master/images/jiva.jpeg?raw=true" alt="blood">
                </div>
                <div class="blade">
                    <img src="https://raw.githubusercontent.com/Chinemereem/Netflix-clone/master/images/angel.webp" alt="blade series">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="aror">
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>
</div>

<footer>
<div class="grid-container">
    <div class="grid-item">
        <span><i class="fab fa-facebook-square"></i></i></span>
        <span><i class="fab fa-instagram"></i></span>
        <span><i class="fab fa-youtube"></i></span>
        <p>Audio and Subtitle</p>
        <p>Media Center</p>
        <p>Privacy</p>
        <p>Contact Us</p>
        <p class="p-grid">Service code</p>
        <p>&copy;1997-2021 Netflix, inc,(7cBab736-9ae4-4251-9ea9-cf9fdd09f7cc)</p>
    </div>
    <div class="grid-item"> 
        <p>Audio Description</p>
        <p>Investor Relations</p>
        <p>Legal Notices</p></div>
    <div class="grid-item"> 
        <p>Help Center</p>
        <p>Jobs</p>
        <p>Cookie Preference</p>
       </div>  
    <div class="grid-item"> 
        <p>Gift Cards</p>
        <p>Terms Of Use</p>
        <p>Corperate Information</p> 
  </div>
</footer>
</section>
</body>
</html>
 

3. Netflix Clone with Poster hover effects

Made by igor. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
:root {
    --primary: #141414;
    --light: #F3F3F3;
    --dark: 	#686868;
  }

html, body {
    margin: 0;
    padding: 0;
    background-color: #141414;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4;
}

header {
    width: 100%;
    height: 100%;
    padding: 20px 20px 0 20px;
    position: fixed;
}

.logo:hoover{
    cursor: pointer;
}

.icones {
    position: absolute;
    right: 60px;
    top: 0px;

}

li {
    display: inline;
}

.icon {
    width: 20px;
    margin-right: 8px;
}

.perfil {
    width: 30px;
}

.main-nav {
    position: absolute;
    top: 28px;
    left: 150px;
}

.main-nav a{
    text-decoration: none;
    margin: 5px;
    color: var(--light);
    cursor: pointer;
    
}

.main-nav a:hover {
    color: var(--dark);
}


.img {
    display: inline;
    margin-left: 20px;

}

.thumb:hover {
    cursor: pointer;
    transform: scale(1.3);
    transition: ease-in .2s;
    
    
}

.thumb {
    width: 230px;
    border-radius: 2px;
}

.frame {
    position: absolute;
    top: 70px;
}

.titulo {
    color: var(--light);
    margin-left: 20px;
}

.frame2 {
    position: absolute;
    top: 280px;
}

p {
    text-align: center;
    align-content: center;
    font-size: 10px;
}

footer {
    color: var(--dark);
    position: absolute;
    bottom: 10px;
    left: 45%;
}
</style>
</head>

<body translate="no" >
  <html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Esse Γ© o site nΓ©">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Netflix</title>
        <link href="style.css" rel="stylesheet">
        <link rel="shortcut icon" href="favicon.ico" />

    </head>
    
    <body>
        <header>
            <div class="logo">
                <a href=""><img src="https://raw.githubusercontent.com/carlosavilae/Netflix-Clone/master/img/logo.PNG"></a>
            </div>
            <nav class="main-nav">
                <a href="">Home</a>
                <a href="">SΓ©ries</a>
                <a href="">Filmes</a>
                <a href="">Minha Lista</a>
            </nav>
            <div class="icones">
                <ul>
                    <li><a href=""><img src="https://www.pngkey.com/png/full/87-872187_lupa-search-icon-white-png.png" class="icon"></a></li>
                    <li><a href=""><img src="https://applets.imgix.net/https%3A%2F%2Fassets.ifttt.com%2Fimages%2Fchannels%2F651849913%2Ficons%2Fmonochrome_large.png%3Fversion%3D0?w=240&h=240&auto=compress&s=3b8585313c326fe55d42ac99f1d0d46c" class="icon"></a></li>
                    <li><a href=""><img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/64623a33850498.56ba69ac2a6f7.png" class="perfil"></a></li>
                  </ul>
            </div>
             <main>
                <div class="frame">
                    <h2 class="titulo">SΓ©ries</h2>
                    <div class="img"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv7.PNG?raw=true" class="thumb"></div>
                    <div class="img"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv3.PNG?raw=true" class="thumb"></div>
                    <div class="img"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o3.PNG?raw=true" class="thumb"></div>
                    <div class="img"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv2.PNG?raw=true" class="thumb"></div>
                    <div class="img"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv1.PNG?raw=true" class="thumb"></div>
                </div>

                <div class="frame2">
                    <h2 class="titulo">Filmes</h2>
                    <div class="img"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m3.PNG?raw=true" class="thumb"></div>
                    <div class="img"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m5.PNG?raw=true" class="thumb"></div>
                    <div class="img"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m1.PNG?raw=true" class="thumb"></div>
                    <div class="img"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o5.PNG?raw=true" class="thumb"></div>
                    <div class="img"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/t3.PNG?raw=true" class="thumb"></div>
                </div>
             </main>   
        </header>

    </body>

    <footer>
        <p>&copy 1997-2020 Netflix, Inc.</p>
        <p>Igor de Almeida &copy 2020</p>
      </footer>

</html>
</body>
</html>
 

4. Netflix Video Hover

Made by Sudhanshu Jha. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
body,
html {
  padding: 0 10px;
  margin: 0;
  background: #0e0f11;
  color: #ecf0f1;
  font-family: 'Open Sans', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
* {
  box-sizing: border-box;
}
h1,
p {
  text-align: center;
  color: #f00;
}
p {
  width: 100%;
  max-width: 500px;
  margin: auto;
}
a:link,
a:hover,
a:active,
a:visited {
  transition: color 150ms;
  color: #95a5a6;
  text-decoration: none;
}
a:hover {
  color: #7f8c8d;
  text-decoration: underline;
}
.contain {
  width: 100%;
}
.row {
  overflow: scroll;
  width: 100%;
}
.row__inner {
  transition: 450ms transform;
  font-size: 0;
  white-space: nowrap;
  margin: 70.3125px 0;
  padding-bottom: 10px;
}
.tile {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 140.625px;
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
  transition: 450ms all;
  transform-origin: center left;
}
.tile__img {
  width: 250px;
  height: 140.625px;
  object-fit: cover;
}
.tile__details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  font-size: 10px;
  opacity: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
  transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: #000;
}
.tile__details:after {
  margin-top: -25px;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  border: 3px solid #ecf0f1;
  line-height: 50px;
  text-align: center;
  border-radius: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}
.tile__details:before {
  content: 'β–Ά';
  left: 0;
  width: 100%;
  font-size: 30px;
  margin-left: 7px;
  margin-top: -18px;
  text-align: center;
  z-index: 2;
}
.tile:hover .tile__details {
  opacity: 1;
}
.tile__title {
  position: absolute;
  bottom: 0;
  padding: 10px;
}
.row__inner:hover {
  transform: translate3d(-187.5px, 0, 0);
}
.row__inner:hover .tile {
  opacity: 0.3;
}
.row__inner:hover .tile:hover {
  transform: scale(2.5);
  opacity: 1;
}
.tile:hover ~ .tile {
  transform: translate3d(375px, 0, 0);
}
</style>
</head>

<body translate="no" >
  <div class="contain">

  <h1>Netflix</h1>

  <div class="row">
    <div class="row__inner">

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-2.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-3.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-4.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-5.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-6.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-7.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-8.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-9.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-10.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-11.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-12.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-13.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-14.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-15.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-16.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-17.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

      <div class="tile">
        <div class="tile__media">
          <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-19.jpg" alt=""  />
        </div>
        <div class="tile__details">
          <div class="tile__title">
            Top Gear
          </div>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>

5. Minimalistic Netflix Clone

Made by Guest. Simple Netflix clone with hover effects and header, footer. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>
  <title>CodePen - Netflix</title>
<style>
/* CSS VARIABLES */
:root {
  --primary: #141414;
  --light: #F3F3F3;
  --dark: 	#686868;
}

html, body {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--primary);
  color: var(--light);
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  line-height: 1.4;
}

img {
  max-width: 100%;
}

h1 {
  padding-top: 60px;  
}

.wrapper {
  margin: 0;
  padding: 0;
}

/* HEADER */
header {
  padding: 20px 20px 0 20px;
  position: fixed;
  top: 0;
  display: grid;  
  grid-gap:5px;
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-areas: 
   "nt mn mn sb . . . "; 
  background-color: var(--primary);
  width: 100%;
  margin-bottom: 0px;  
}

.netflixLogo {
  grid-area: nt;
  object-fit: cover;
  width: 100px;
  max-height: 100%;
  
  padding-left: 30px;
  padding-top: 0px;  
}

.netflixLogo img {  
  height: 35px;     
}

#logo {
  color: #E50914;  
  margin: 0; 
  padding: 0; 
}


.main-nav {
  grid-area: mn;
  padding: 0 30px 0 20px;
}

.main-nav a {
  color: var(--light);
  text-decoration: none;
  margin: 5px;  
}

.main-nav a:hover {
  color: var(--dark);
}

.sub-nav {
  grid-area: sb;
  padding: 0 40px 0 40px;
}

.sub-nav a {
  color: var(--light);
  text-decoration: none;
  margin: 5px;
}

.sub-nav a:hover {
  color: var(--dark);
}


/* MAIN CONTIANER */
.main-container {
  padding: 50px;
}

.box {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
}

.box a {
  transition: transform .3s;  
}

.box a:hover {
  transition: transform .3s;
  -ms-transform: scale(1.4);
  -webkit-transform: scale(1.4);  
  transform: scale(1.4);
}

.box img {
  border-radius: 2px;
}

/* LINKS */
.link {
  padding: 50px;
}

.sub-links ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}

.sub-links a {
  color: var(--dark);
  text-decoration: none;
}

.sub-links a:hover {
  color: var(--dark);
  text-decoration: underline;
}

.logos a{
  padding: 10px;
}

.logo {
  color: var(--dark);
}


/* FOOTER */
footer {
  padding: 20px;
  text-align: center;
  color: var(--dark);
  margin: 10px;
}

/* MEDIA QUERIES */

@media(max-width: 900px) {

  header {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
    "nt nt nt  .  .  . sb . . . "
    "mn mn mn mn mn mn  mn mn mn mn";
  }

  .box {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
  }

}

@media(max-width: 700px) {

  header {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
    "nt nt nt  .  .  . sb . . . "
    "mn mn mn mn mn mn  mn mn mn mn";
  }

  .box {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }

  .sub-links ul {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }
   
}

@media(max-width: 500px) {

  .wrapper {
    font-size: 15px;
  }

  header {
    margin: 0;
    padding: 20px 0 0 0;
    position: static;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 
    "nt"    
    "mn"
    "sb";
    text-align: center;
  }

  .netflixLogo {
    max-width: 100%;
    margin: auto;
    padding-right: 20px;
  }

  .main-nav {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
  }

  h1 {
    text-align: center;
    font-size: 18px;
  }

 

  .box {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(1, 1fr);
    text-align: center;    
  }

  .box a:hover {
    transition: transform .3s;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);  
    transform: scale(1.2);
  }

  .logos {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
  }

  .sub-links ul {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
    font-size: 15px;
  }

  

  
   
}
</style>
<body>
  <div class="wrapper">

    <!-- HEADER -->
    <header>
      <div class="netflixLogo">
        <a id="logo" href="#home"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/logo.PNG?raw=true" alt="Logo Image"></a>
      </div>      
      <nav class="main-nav">                
        <a href="#home">Home</a>
        <a href="#tvShows">TV Shows</a>
        <a href="#movies">Movies</a>
        <a href="#originals">Originals</a>
        <a href="#">Recently Added</a>
        <a target="_blank" href="https://codepen.io/cb2307/full/NzaOrm">Portfolio</a>        
      </nav>
      <nav class="sub-nav">
        <a href="#"><i class="fas fa-search sub-nav-logo"></i></a>
        <a href="#"><i class="fas fa-bell sub-nav-logo"></i></a>
        <a href="#">Account</a>        
      </nav>      
    </header>
    <!-- END OF HEADER -->
    
    <!-- MAIN CONTAINER -->
    <section class="main-container" >
      <div class="location" id="home">
          <h1 id="home">Popular on Netflix</h1>
          <div class="box">
            <a href=""><img src="https://assets.pokemon.com/assets//cms2-en-uk/img/misc/_tiles/generic/pokemon-169.jpg" alt=""></a>
            <a href=""><img src="https://occ-0-2219-2218.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABTxnouRNW7oie_bgweNyHifXhCj5uU7tBWE43ZVoJw_DRu6snJ791VGdCrkZoaMpUkZI3_I11c_oAOIYO3lV1MIwu9Ph.jpg?r=f23" alt=""></a>
            <a href=""><img src="https://occ-0-2219-2218.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABVaQ3r0zT3JOmQ8gKYhvw7cqPEkqm0_CQS9slE6vG33ypYNmBOTpQY6DEvw2MOrMGuINSur7WCVs4WuXfN_bHi_seej3.jpg?r=571" alt=""></a>
            <a href=""><img src="https://occ-0-2219-2218.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABQc3mm-SIVYn7B9Vu3ng7c8uyxnCFBwL_37YEeDA2Vf4-jiDSnEo__5FXX1ebNR9XxB8nLywP3dVivXhiRMQtWdWXKL9.jpg?r=74e" alt=""></a>
            <a href=""><img src="https://occ-0-2219-2218.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABfnSy13EEJFPeExRLQoA9ZIhYgBRlagw5E0nLnlrDg0-p9jkqHHOu5WxBMwHC2jYob3EsXk_vlbZ5hT8MbaF4ENLQVvu.jpg?r=d5d" alt=""></a>
            <a href=""><img src="https://ichef.bbci.co.uk/images/ic/1200x675/p01grdh2.jpg" alt=""></a>
    
            <a href=""><img src="https://ichef.bbci.co.uk/images/ic/640x360/p070qzfv.jpg" alt=""></a>
            <a href=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSPGhcqNyIvIKttUwIZrdFKRzUVax1CWMpogaTUzYtvdnDa0wKf&usqp=CAU" alt=""></a>
            <a href=""><img src="https://ichef.bbci.co.uk/images/ic/640x360/p07dpt24.jpg" alt=""></a>
            <a href=""><img src="https://d23.com/app/uploads/2001/11/11.02.2001-monsters-inc-1180x600-780x440.jpg" alt=""></a>        
          </div>
      </div>
      

      <h1 id="myList">Trending Now</h1>
      <div class="box">
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/t1.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/t2.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/t3.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/t4.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/t5.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/t6.PNG?raw=true" alt=""></a>                  
      </div>
      
      <h1 id="tvShows">TV Shows</h1>
      <div class="box">
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv1.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv2.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv3.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv4.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv5.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv6.PNG?raw=true" alt=""></a>

        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv7.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv8.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv9.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv10.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv11.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/tv12.PNG?raw=true" alt=""></a>              
      </div>
      

      <h1 id="movies">Blockbuster Action & Adventure</h1>
      <div class="box">
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m1.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m2.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m3.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m4.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m5.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/m6.PNG?raw=true" alt=""></a>                
      </div>

      <h1 id="originals">Netflix Originals</h1>
      <div class="box">
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o1.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o2.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o3.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o4.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o5.PNG?raw=true" alt=""></a>
        <a href=""><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/o6.PNG?raw=true" alt=""></a>                
      </div>
     
    <!-- END OF MAIN CONTAINER -->

    <!-- LINKS -->
    <section class="link">
      <div class="logos">
        <a href="#"><i class="fab fa-facebook-square fa-2x logo"></i></a>
        <a href="#"><i class="fab fa-instagram fa-2x logo"></i></a>
        <a href="#"><i class="fab fa-twitter fa-2x logo"></i></a>
        <a href="#"><i class="fab fa-youtube fa-2x logo"></i></a>
      </div>
      <div class="sub-links">
        <ul>
          <li><a href="#">Audio and Subtitles</a></li>
          <li><a href="#">Audio Description</a></li>
          <li><a href="#">Help Center</a></li>
          <li><a href="#">Gift Cards</a></li>
          <li><a href="#">Media Center</a></li>
          <li><a href="#">Investor Relations</a></li>
          <li><a href="#">Jobs</a></li>
          <li><a href="#">Terms of Use</a></li>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Legal Notices</a></li>
          <li><a href="#">Corporate Information</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </section>
    <!-- END OF LINKS -->

    <!-- FOOTER -->
    <footer>
      <p>&copy 1997-2018 Netflix, Inc.</p>
      <p>Carlos Avila &copy 2018</p>
    </footer>
  </div>
</body>
</html>

</body>
</html>

6. Jonny streaming UX idea (Netflix clone)

Made by Jack Ellis. It has a more info button which displays more info about the movie in a css popup. Source


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css'>
  
<style>
.loadHidden {
  opacity: 0;
}

.loadVisible {
  opacity: 1;
  transition: opacity 2s ease-out;
}

html,
body {
  padding: 0;
  margin: 0;
  background-color: #141414;
  scroll-behavior: smooth;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

*,
* * {
  box-sizing: border-box;
}

.main-container .hero {
  min-height: 56.2vw;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.main-container .hero::before {
  content: "";
  background: #141414;
  background: linear-gradient(0deg, #141414 25%, rgba(20, 20, 20, 0) 100%);
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 20%;
  z-index: 10;
}
.main-container .hero iframe,
.main-container .hero video {
  transition: opacity 0.5s ease-out;
  min-height: 56.2vw;
}
.main-container .hero .featured-item h3,
.main-container .hero .featured-item p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45);
}
.main-container .main-content .normal-row:first-child h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45);
}
.main-container .main-content .normal-row .first-row-inner {
  scroll-behavior: smooth;
}
.main-container .main-content .normal-row .first-row-inner::-webkit-scrollbar {
  display: none;
}
.main-container .main-content .normal-row .first-row-inner .next-paddle,
.main-container .main-content .normal-row .first-row-inner .previous-paddle {
  background: rgba(20, 20, 20, 0.5);
}
.main-container .main-content .normal-row .first-row-inner .next-paddle:hover i,
.main-container .main-content .normal-row .first-row-inner .next-paddle:hover svg,
.main-container .main-content .normal-row .first-row-inner .previous-paddle:hover i,
.main-container .main-content .normal-row .first-row-inner .previous-paddle:hover svg {
  transform: scale(1.2);
}
.main-container .main-content .normal-row .first-row-inner .row-container .item {
  width: 25vw;
  max-width: 260px;
}
@media (max-width: 768px) {
  .main-container .main-content .normal-row .first-row-inner .row-container .item {
    width: 45vw;
    min-width: 200px;
  }
}
.main-container .main-content .normal-row .first-row-inner .row-container .item_image {
  padding-top: 56%;
}
.main-container .main-content .normal-row .first-row-inner .row-container .item_content {
  min-height: 210px;
}

html:not([data-scroll="0"]) .logo-float {
  background-color: #141414;
}

.logo-float {
  background: #141414;
  background: linear-gradient(180deg, #141414 0%, rgba(20, 20, 20, 0) 100%);
  margin-bottom: -52px;
  transition: background-color 0.75s ease;
}

.lightboxExit {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45);
}

.popupMotion {
  animation: popupMotion 0.3s;
}

@keyframes popupMotion {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  1% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  45% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  80% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
</style>
</head>

<body>
  <script>
  document.body.className = 'loadHidden';
</script>
<div class="logo-float sticky top-0 left-0 z-10 text-red-600 font-bold text-xl p-3">
  NECFLIX
</div>
<div class="main-container text-white">
  <div class="hero relative flex justify-left items-center -mb-40 pb-20 z-0" style="background-image: url(https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);">
    <!--     <iframe id="vimeo" src="https://player.vimeo.com/video/355357902?background=1&autoplay=1&loop=1&byline=0&title=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="w-screen min-h-screen pointer-events-none absolute opacity-0"></iframe> -->
    <div class="featured-item z-10 pl-4 md:w-3/5 w-4/5 text-left">
      <h3 class="text-4xl lg:text-8xl md:text-6xl mb-6">Tasty food yum</h3>
      <p class="text-2xl">Lorem ipsum dolor sit amet consectetur adipisicing elit!</p>
      <div class="links mt-4">
        <span class="bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-xl mr-3 cursor-pointer">
          <i class="fa fa-plus mr-3"></i>
          Add to list
        </span>
        <span class="hero-info bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-xl mr-3 cursor-pointer">
          <i class="fas fa-info-circle mr-3"></i>
          More info
        </span>
      </div>
    </div>
  </div>
  <div class="main-content max-w-screen-xl mx-auto text-white">
    <div class="normal-row mb-10 relative">
      <h2 class="pl-4 relative">Featured</h2>
      <div class="first-row-inner flex overflow-x-scroll flex-1">
        <div class="previous-paddle absolute top-0 left-0 bottom-0 bg-blue-400 flex items-center z-10 my-4 mt-10 p-2 cursor-pointer transition duration-500 rounded opacity-0 pointer-events-none"><i class="fas fa-angle-left text-5xl transition duration-200"></i></div>
        <div class="next-paddle absolute top-0 right-0 bottom-0 bg-blue-400 flex items-center z-10 my-4 mt-10 p-2 cursor-pointer transition duration-500 rounded"><i class="fas fa-angle-right text-5xl transition duration-200"></i></div>
        <div class="row-container flex min-w-min p-4 ">
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/704971/pexels-photo-704971.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/1092730/pexels-photo-1092730.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/2983101/pexels-photo-2983101.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/1351238/pexels-photo-1351238.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/3026808/pexels-photo-3026808.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/3756498/pexels-photo-3756498.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/327098/pexels-photo-327098.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/461198/pexels-photo-461198.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/5938/food-salad-healthy-lunch.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/376464/pexels-photo-376464.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="normal-row mb-10 relative">
      <h2 class="pl-4 relative">Favourites</h2>
      <div class="first-row-inner flex overflow-x-scroll flex-1">
        <div class="previous-paddle absolute top-0 left-0 bottom-0 bg-blue-400 flex items-center z-10 my-4 mt-10 p-2 cursor-pointer transition duration-500 rounded opacity-0 pointer-events-none"><i class="fas fa-angle-left text-5xl transition duration-200"></i></div>
        <div class="next-paddle absolute top-0 right-0 bottom-0 bg-blue-400 flex items-center z-10 my-4 mt-10 p-2 cursor-pointer transition duration-500 rounded"><i class="fas fa-angle-right text-5xl transition duration-200"></i></div>
        <div class="row-container flex min-w-min p-4 ">
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/1640772/pexels-photo-1640772.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/1099680/pexels-photo-1099680.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/958545/pexels-photo-958545.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/675951/pexels-photo-675951.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/45202/brownie-dessert-cake-sweet-45202.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/699953/pexels-photo-699953.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/769289/pexels-photo-769289.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/708488/pexels-photo-708488.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/156114/pexels-photo-156114.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/132694/pexels-photo-132694.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/1267320/pexels-photo-1267320.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="normal-row mb-10 relative">
      <h2 class="pl-4 relative">Flavours</h2>
      <div class="first-row-inner flex overflow-x-scroll flex-1">
        <div class="previous-paddle absolute top-0 left-0 bottom-0 bg-blue-400 flex items-center z-10 my-4 mt-10 p-2 cursor-pointer transition duration-500 rounded opacity-0 pointer-events-none"><i class="fas fa-angle-left text-5xl transition duration-200"></i></div>
        <div class="next-paddle absolute top-0 right-0 bottom-0 bg-blue-400 flex items-center z-10 my-4 mt-10 p-2 cursor-pointer transition duration-500 rounded"><i class="fas fa-angle-right text-5xl transition duration-200"></i></div>
        <div class="row-container flex min-w-min p-4 ">
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/566566/pexels-photo-566566.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/262959/pexels-photo-262959.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/1600711/pexels-photo-1600711.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/1234535/pexels-photo-1234535.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/1639562/pexels-photo-1639562.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/718742/pexels-photo-718742.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/5876/food-salad-healthy-vegetables.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/291528/pexels-photo-291528.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/374052/pexels-photo-374052.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/106343/pexels-photo-106343.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/539451/pexels-photo-539451.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
          <!-- item: -->
          <div class="item bg-gray-500 md:w-3/12 w-7/12 mr-1 rounded overflow-hidden transform hover:scale-105 transition-transform">
            <div class="item_image w-full bg-cover bg-no-repeat bg-center" style="background-image: url(https://images.pexels.com/photos/769969/pexels-photo-769969.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></div>
            <div class="item_content p-2 flex flex-col">
              <p class="item_content_text mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
              </p>
              <div class="item_content_buttons justify-between w-full flex flex-col mt-auto">
                <span class="item-button w-full mb-2 bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fa fa-plus mr-3"></i>
                  Add to list
                </span>
                <span class=" item-button bg-gray-400 bg-opacity-70 text-white hover:bg-opacity-60 px-4 py-2 rounded text-sm cursor-pointer">
                  <i class="fas fa-info-circle mr-3"></i>
                  More info
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="etc">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi iure culpa alias. Dicta hic laudantium ducimus iste culpa modi tempore inventore beatae, eveniet fugiat voluptate neque vel libero mollitia fuga?
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque in omnis consequuntur quod qui molestiae, maiores commodi quos optio minus est numquam cum ducimus mollitia reiciendis quasi nostrum quidem ad.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quis rerum nobis laboriosam eligendi voluptatibus cumque velit at sequi? Dolore aperiam ad maiores. Voluptas veniam adipisci dicta consequuntur laboriosam officia.
      lorem
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora provident deleniti sint, impedit culpa architecto aliquid magni sequi delectus rerum, quis repellendus? Quis, facere. Labore quae atque alias illum. Voluptatibus!
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, pariatur. Laudantium, facilis unde? Quam debitis alias vel quo magni quae corrupti blanditiis unde amet architecto, fugiat ducimus maiores sunt ea?
    </div>
  </div>
</div>

<div id="lightbox-container" class="hiddern text-white flex flex-col">

</div>

<div id="hero-lightbox" class="hero-lightbox lightbox-outer text-white fixed top-0 bottom-0 left-0 right-0 overflow-y-auto bg-gray-600 bg-opacity-75 z-50 pointer-events-none transition-opacity opacity-0" id="lightBoxId2">
  <div id="hero-lightbox-inner" class="hero-lightbox-inner lightbox-inner rounded flex flex-col max-w-screen-sm bg-gray-500 items-center static opacity-0 pointer-events-none my-20 mx-auto transform scale-100 z-50 transition-all">
    <i class="heroLightboxExit lightboxExit fas fa-times-circle absolute -top-5 -right-5 text-3xl cursor-pointer hover:text-gray-200"></i>
    <div class="lightbox-image w-full bg-cover bg-no-repeat bg-center rounded-t" style="background-image: url(https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); padding-top: 56%;"></div>
    <p class="w-full p-5">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa obcaecati dolor provident sint.
    </p>
    <div class="bg-white text-black hover:bg-opacity-75 px-4 py-2 rounded text-xl cursor-pointer flex flex-row-reverse items-center mb-3">
      Add to list
      <i class="fa fa-plus mr-3"></i>
    </div>
  </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
      <script id="rendered-js" type="module">
import confetti from "https://cdn.skypack.dev/canvas-confetti";
confetti();

// this bit is for the scrolling logo:
// The debounce function receives our function as a parameter
const debounce = fn => {
  // This holds the requestAnimationFrame reference, so we can cancel it if we wish
  let frame;
  // The debounce function returns a new function that can receive a variable number of arguments
  return (...params) => {
    // If the frame variable has been defined, clear it now, and queue for next frame
    if (frame) {
      cancelAnimationFrame(frame);
    }
    // Queue our function call for the next frame
    frame = requestAnimationFrame(() => {
      // Call our function and pass any params we received
      fn(...params);
    });
  };
};
// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
};
// Listen for new scroll events, here we debounce our `storeScroll` function
document.addEventListener("scroll", debounce(storeScroll), { passive: true });
// Update scroll position for first time
storeScroll();

// Functionality for making scrolling rows draggable:
// const ele = document.getElementById('container');

let dragRows = document.querySelectorAll(".first-row-inner");
// console.log(dragRows);
dragRows.scrollTop = 100;
dragRows.scrollLeft = 150;

dragRows.forEach(element => {
  const ele = element;
  ele.style.cursor = "grab";

  let pos = { top: 0, left: 0, x: 0, y: 0 };

  const mouseDownHandler = function (e) {
    ele.style.cursor = "grabbing";
    ele.style.userSelect = "none";

    pos = {
      left: ele.scrollLeft,
      top: ele.scrollTop,
      // Get the current mouse position
      x: e.clientX,
      y: e.clientY };


    document.addEventListener("mousemove", mouseMoveHandler);
    document.addEventListener("mouseup", mouseUpHandler);
  };

  const mouseMoveHandler = function (e) {
    // How far the mouse has been moved
    const dx = e.clientX - pos.x;
    const dy = e.clientY - pos.y;

    // Scroll the element
    ele.scrollTop = pos.top - dy;
    ele.scrollLeft = pos.left - dx;
  };

  const mouseUpHandler = function () {
    ele.style.cursor = "grab";
    ele.style.removeProperty("user-select");

    document.removeEventListener("mousemove", mouseMoveHandler);
    document.removeEventListener("mouseup", mouseUpHandler);
  };

  // Attach the handler
  ele.addEventListener("mousedown", mouseDownHandler);
});

// slide paddle functionality:
// this is for calculating how much to move the paddles by:
function getWidth() {
  return Math.max(
  document.body.scrollWidth,
  document.documentElement.scrollWidth,
  document.body.offsetWidth,
  document.documentElement.offsetWidth,
  document.documentElement.clientWidth);

}
let theItemWidth = document.querySelectorAll(".item")[0].offsetWidth;
theItemWidth = Math.floor(getWidth() / theItemWidth) * (theItemWidth + 4);

// This is the bit that actually moves the slides along:
let nextPaddle = document.querySelectorAll(".next-paddle");
nextPaddle.forEach(element => {
  let theParent = element.parentElement;
  let theParentMaxWidth = theParent.scrollWidth - theParent.clientWidth;
  element.addEventListener(
  "click",
  function () {
    theParent.scrollBy({
      left: theItemWidth,
      behavior: "smooth" });


    setTimeout(function () {
      if (theParent.scrollLeft === theParentMaxWidth) {
        element.style.opacity = "0";
        element.style.pointerEvents = "none";
      } else {
        element.style.opacity = "1";
        element.style.pointerEvents = "all";
      }
      if (theParent.scrollLeft != 0) {
        element.parentNode.querySelector(".previous-paddle").style.opacity =
        "1";
        element.parentNode.querySelector(
        ".previous-paddle").
        style.pointerEvents = "all";
      } else {
        element.parentNode.querySelector(".previous-paddle").style.opacity =
        "0";
        element.parentNode.querySelector(
        ".previous-paddle").
        style.pointerEvents = "none";
      }
    }, 500);
  },
  false);

});

let previousPaddle = document.querySelectorAll(".previous-paddle");
previousPaddle.forEach(element => {
  let theParent = element.parentElement;
  let theParentMaxWidth = theParent.scrollWidth - theParent.clientWidth;
  element.addEventListener(
  "click",
  function () {
    theParent.scrollBy({
      left: -theItemWidth,
      behavior: "smooth" });


    setTimeout(function () {
      if (theParent.scrollLeft === 0) {
        element.style.opacity = "0";
        element.style.pointerEvents = "none";
      } else {
        element.style.opacity = "1";
        element.style.pointerEvents = "all";
      }
      if (theParent.scrollLeft != theParentMaxWidth) {
        element.parentNode.querySelector(".next-paddle").style.opacity = "1";
        element.parentNode.querySelector(".next-paddle").style.pointerEvents =
        "all";
      } else {
        element.parentNode.querySelector(".next-paddle").style.opacity = "0";
        element.parentNode.querySelector(".next-paddle").style.pointerEvents =
        "none";
      }
    }, 500);
  },
  false);

});

// lightbox functionality:
let lightBoxLink = document.querySelectorAll(".item");
let lightBoxContainer = document.getElementById("lightbox-container");
let lightBoxId = 1;
// console.log(lightBoxContainer);

// hero lightbox:
let hero = document.querySelector(".hero");
let heroInfoButton = document.querySelector(".hero-info");
let heroLightbox = document.querySelector(".hero-lightbox");
let heroLightboxInner = document.querySelector(".hero-lightbox-inner");
let heroLightboxExit = document.querySelector(".heroLightboxExit");

heroInfoButton.addEventListener("click", function () {
  heroLightbox.classList.add("opacity-100", "pointer-events-auto");
  heroLightboxInner.classList.add(
  "opacity-100",
  "popupMotion",
  "pointer-events-auto");

});

function heroLightboxCloser() {
  heroLightbox.classList.remove("opacity-100", "pointer-events-auto");
  heroLightboxInner.classList.remove(
  "opacity-100",
  "popupMotion",
  "pointer-events-auto");

}
heroLightboxExit.addEventListener("click", function () {
  heroLightboxCloser();
});
heroLightbox.addEventListener("click", function () {
  heroLightboxCloser();
});
heroLightboxInner.addEventListener("click", e => e.stopPropagation());

// normal lightboxes
lightBoxLink.forEach(element => {
  lightBoxId++;
  element.id = "item" + lightBoxId;
  const innerLightBoxId = lightBoxId;

  element.addEventListener("click", function () {
    let lightBoxHtml = document.createElement("div");
    lightBoxHtml.classList.add("lightbox-outer");
    lightBoxHtml.id = "lightBoxId" + innerLightBoxId;
    lightBoxHtml.classList.add(
    "fixed",
    "top-0",
    "bottom-0",
    "left-0",
    "right-0",
    "overflow-y-auto",
    "bg-gray-600",
    "bg-opacity-75",
    "z-50",
    "pointer-events-none",
    "transition-opacity",
    "opacity-0");

    // lightBoxHtml.appendChild(document.createTextNode(lightBoxId));

    let lightBoxInner = document.createElement("div");
    lightBoxInner.classList.add(
    "lightbox-inner",
    "rounded",
    //"overflow-hidden",
    "flex",
    "flex-col",
    "max-w-screen-sm",
    "bg-gray-500",
    "items-center",
    "static",
    "opacity-0",
    "pointer-events-none",
    "rounded",
    "static",
    "my-20",
    "mx-auto",
    // 'inline-block',
    "transform",
    "scale-100",
    "z-50",
    "transition-all");


    let exitButton = document.createElement("i");
    exitButton.classList.add(
    "lightboxExit",
    "fas",
    "fa-times-circle",
    "absolute",
    "-top-5",
    "-right-5",
    "text-3xl",
    "cursor-pointer",
    "hover:text-gray-200");

    lightBoxInner.appendChild(exitButton);

    let lightBoxImageUrl = element.querySelector(".item_image").style.
    backgroundImage;
    // console.log(lightBoxImageUrl);
    let lightBoxImage = document.createElement("div");
    lightBoxImage.classList.add(
    "lightbox-image",
    "w-full",
    "bg-cover",
    "bg-no-repeat",
    "bg-center",
    "rounded-t");


    lightBoxImage.style.backgroundImage = lightBoxImageUrl;
    lightBoxImage.style.paddingTop = "56%";

    let lightBoxText = element.querySelector(".item_content_text").innerText;
    let lightBoxTextContain = document.createElement("p");
    lightBoxTextContain.innerText = lightBoxText.repeat(2);
    lightBoxTextContain.classList.add("w-full", "p-5");

    let lightBoxAdd = document.createElement("div");
    lightBoxAdd.classList.add(
    "bg-white",
    "text-black",
    "hover:bg-opacity-75",
    "px-4",
    "py-2",
    "rounded",
    "text-xl",
    "cursor-pointer",
    // "w-min",
    "flex",
    "flex-row-reverse",
    "items-center",
    "mb-3");

    let addIcon = document.createElement("i");
    addIcon.classList.add("fa", "fa-plus", "mr-3");
    // console.log(addIcon);
    lightBoxAdd.innerText = "Add to list";
    lightBoxAdd.appendChild(addIcon);

    lightBoxInner.appendChild(lightBoxImage);
    lightBoxInner.appendChild(lightBoxTextContain);
    lightBoxInner.appendChild(lightBoxAdd);

    lightBoxHtml.appendChild(lightBoxInner);

    lightBoxContainer.appendChild(lightBoxHtml);
    setTimeout(function () {
      lightBoxHtml.classList.add("opacity-100", "pointer-events-auto");
    }, 200);
    setTimeout(function () {
      lightBoxInner.classList.add(
      "opacity-100",
      "popupMotion",
      "pointer-events-auto");

    }, 300);
    function lightboxCloser() {
      lightBoxHtml.classList.remove("opacity-100", "pointer-events-auto");
      lightBoxInner.classList.remove(
      "opacity-100",
      "popupMotion",
      "pointer-events-auto");

      // this clears the container at the end of the function:
      setTimeout(function () {
        lightBoxHtml.remove();
      }, 300);
    }
    exitButton.addEventListener("click", function () {
      lightboxCloser();
    });
    lightBoxHtml.addEventListener("click", function () {
      lightboxCloser();
    });
    lightBoxInner.addEventListener("click", e => e.stopPropagation());
  });
});

let vimeoVideo = document.getElementById("vimeo");
// if (vimeoVideo) {
//   vimeoVideo.addEventListener("load", () => {
//     console.log("video not yet loaded");

//     vimeoVideo.style.visibility = "visible";
//     vimeoVideo.style.opacity = "1";

//     console.log("video fully loaded");

//     confetti();
//   });
// }

function checkIframeLoaded() {
  // Get a handle to the iframe element
  var iframe = vimeoVideo;
  var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

  // Check if loading is complete
  if (iframeDoc.readyState == "complete") {
    //iframe.contentWindow.alert("Hello");
    iframe.contentWindow.onload = function () {
      alert("I am loaded");
    };
    // The loading is complete, call the function we want executed once the iframe is loaded
    afterLoading();
    return;
  }

  // If we are here, it is not loaded. Set things up so we check   the status again in 100 milliseconds
  window.setTimeout(checkIframeLoaded, 100);
}

function afterLoading() {
  console.log("video not yet loaded");

  vimeoVideo.style.visibility = "visible";
  vimeoVideo.style.opacity = "1";

  console.log("video fully loaded");

  confetti();
}

if (vimeoVideo) {
  vimeoVideo.addEventListener("load", () => {
    checkIframeLoaded();
  });
}

// This needs to be the last thing that runs:
document.body.className = "loadVisible";
//# sourceURL=pen.js
    </script>

</body>
</html>

7. Netflix Clone with Hero Image & Hover Effect

Made by AmandaEvola. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
    margin: 0;
    box-sizing: border-box;

}
body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #111;

}
.row_poster{
    width: 100%;
    object-fit: contain;
    max-height: 100px;
    margin-right: 10px;
    transition: transform 450ms;
}
.row_poster:hover{
    transform: scale(1.1);
}
.row_posters{
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;
    padding: 20px;
}
.row_posters::-webkit-scrollbar{
    display: none;
}
.row_posterLarge{
    max-height: 200px;
}
.row{
    color: antiquewhite;
    margin-left: 20px;
}
.banner{
    background-image: url("https://images.hdqwalls.com/download/lucifer-season-4-4k-tk-3840x2160.jpg");
    width: 100%;
    background-size: cover;
    background-position: center center;
    object-fit: contain;
    height: 448px;
    color: azure;
    margin-bottom: 2rem;
}
.banner_contents{
    margin-left: 30px;
    padding: 144px;
    height: 190px;
}
.banner_title{
    font-size: 3rem;
    font-weight: 800;
    padding-bottom: 0.3rem;
}
.banner_discription{
    width: 45rem;
    line-height: 1.3;
    padding-top: 1rem;
    font-size: .8rem;
    max-width: 360px;
    height: 180px;
    display: flex;
    flex-direction: column;
    
    
}
.banner_button{
    cursor: pointer;
    color: azure;
    outline: none;
    border: none;
    padding-top: .6rem;
    padding-bottom: .4rem;
    margin: .2rem;
    font-weight: 700;
    border-radius: 5px;

    background-color: rgba(51, 51, 51, .5);

}
.banner_button:hover{
    color: #000;
    background-color: #e6e6e6;
    transition: all 0.5s;
}
.nav_logo{
    width: 80px;
    object-fit: contain;
    cursor: pointer;

}
.nav_avatar{
    width: 30px;
    object-fit: contain;
    cursor: pointer;
}
.nav{
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    z-index: 1;
    transition-timing-function: ease-in;
    transition: all 0.5s;

}
.nav_black{
    background-color: #111;
}
a{
    color: azure;
    text-decoration: none;
}
a:hover{
    cursor: pointer;
    color: black;
    transition: all 0.5s;
}
</style>
</head>

<body translate="no" >
  <body>
    <!-- navigation section -->
    <div class="nav" id="nav">
        <img src="https://i.postimg.cc/fTPcTRWQ/netflix-logo.png" alt="" class="nav_logo">
        <img src="https://i.postimg.cc/Fszb4L4x/netflix-avatar.png" alt="" class="nav_avatar">
    </div>
    <!-- banner section -->
<div class="banner">
    <div class="banner_contents">
        <h1 class="banner-title">Lucifer</h1>
        <button class="banner_button"><a href="https://www.netflix.com/bd/title/80057918">Watch</a></button>
        <button class="banner_button">My list</button>
        <div class="banner_discription">
            2016 || 16+ || 6 Seasons | <a href="#">Fantasy TV Shows</a>
            <br>
            Bored with being the Lord of Hell, the devil relocates to Los Angeles, where he opens a nightclub and forms a connection with a homicide detective.
            <br><br>
            <h4>Starring: </h4> Tom Ellis, Lauren German, Kevin Alejandro
        </div>
    </div>

</div>


    <!-- Netflix Originals section -->
    <div class="row">
        <h2>NETFLIX ORIGINALS</h2>
        <div class="row_posters">
          
            <img src="https://i.postimg.cc/1zwcd1Qh/large-movie2.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/zv0kkw1y/large-movie3.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/zX2jbkjM/large-movie4.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/vmrfz7rG/large-movie5.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/c1X72cVH/large-movie6.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/ZqdVhy6Q/large-movie1.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/P58mLnNp/large-movie7.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/mk5HDmsy/large-movie8.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/zv0kkw1y/large-movie3.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/zX2jbkjM/large-movie4.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/vmrfz7rG/large-movie5.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/c1X72cVH/large-movie6.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/ZqdVhy6Q/large-movie1.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/P58mLnNp/large-movie7.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/mk5HDmsy/large-movie8.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/zv0kkw1y/large-movie3.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/zX2jbkjM/large-movie4.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/vmrfz7rG/large-movie5.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/c1X72cVH/large-movie6.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/P58mLnNp/large-movie7.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/mk5HDmsy/large-movie8.jpg" alt="" class="row_poster row_posterLarge">
            <img src="https://i.postimg.cc/1zwcd1Qh/large-movie2.jpg" alt="" class="row_poster row_posterLarge">
        

    </div>
    <!-- trending now section -->
    <div class="row">
        <h2>TRENDING NOW</h2>
        <div class="row_posters">
          
            <img src="https://i.postimg.cc/DZWWNqsW/small-movie3.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/W3QDch65/small-movie2.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/J0nXM99h/small-movie4.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/YCbhqXzG/small-movie5.jpg" alt="" class="row_poster ">
         
            <img src="https://i.postimg.cc/DzpJ5CWk/small-movie7.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/HL6sdVHQ/small-movie8.jpg" alt="" class="row_poster ">
          
            <img src="https://i.postimg.cc/BnGvCrM1/small-movie1.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/BnGvCrM1/small-movie1.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/DZWWNqsW/small-movie3.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/W3QDch65/small-movie2.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/J0nXM99h/small-movie4.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/YCbhqXzG/small-movie5.jpg" alt="" class="row_poster ">
         
            <img src="https://i.postimg.cc/DzpJ5CWk/small-movie7.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/HL6sdVHQ/small-movie8.jpg" alt="" class="row_poster ">
          
            <img src="https://i.postimg.cc/BnGvCrM1/small-movie1.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/BnGvCrM1/small-movie1.jpg" alt="" class="row_poster ">
           
            <img src="https://i.postimg.cc/DZWWNqsW/small-movie3.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/W3QDch65/small-movie2.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/J0nXM99h/small-movie4.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/YCbhqXzG/small-movie5.jpg" alt="" class="row_poster ">
         
            <img src="https://i.postimg.cc/DzpJ5CWk/small-movie7.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/HL6sdVHQ/small-movie8.jpg" alt="" class="row_poster ">
          
            <img src="https://i.postimg.cc/BnGvCrM1/small-movie1.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/BnGvCrM1/small-movie1.jpg" alt="" class="row_poster ">
           
     
        </div>

        

    </div>
    <!-- Top rated section -->
    <div class="row">
        <h2>TOP RATED</h2>
        <div class="row_posters">
            <img src="https://i.postimg.cc/NGZgD3pk/1.webp" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/rwKNTtSk/2.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/yx0Ycn4H/3.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/wTV9z190/4.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/nhhphnzZ/5.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/L8HTn6Gy/10.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/rwB55VHX/11.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/BQtFyP9f/12.jpg" alt="" class="row_poster ">
          
            <img src="https://i.postimg.cc/NGZgD3pk/1.webp" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/rwKNTtSk/2.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/yx0Ycn4H/3.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/wTV9z190/4.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/nhhphnzZ/5.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/L8HTn6Gy/10.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/rwB55VHX/11.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/BQtFyP9f/12.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/NGZgD3pk/1.webp" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/rwKNTtSk/2.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/yx0Ycn4H/3.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/wTV9z190/4.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/nhhphnzZ/5.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/L8HTn6Gy/10.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/rwB55VHX/11.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/BQtFyP9f/12.jpg" alt="" class="row_poster ">
          
     
        </div>

        

    </div>
    <!-- Action movies section -->
    <div class="row">
        <h2>ACTION MOVIES</h2>
        <div class="row_posters">
            <img src="https://i.postimg.cc/W35Y1cfF/13.jpg" alt="" class="row_poster ">
        
            <img src="https://i.postimg.cc/KjLTsnLG/15.webp" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/qqb8Kk8n/16.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/T2qgmcR0/19.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/SN3LdxMN/18.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/ZYFsR3Xt/17.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/W35Y1cfF/13.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/cJ0rdp3N/14.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/KjLTsnLG/15.webp" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/qqb8Kk8n/16.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/T2qgmcR0/19.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/SN3LdxMN/18.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/ZYFsR3Xt/17.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/W35Y1cfF/13.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/cJ0rdp3N/14.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/KjLTsnLG/15.webp" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/qqb8Kk8n/16.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/T2qgmcR0/19.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/SN3LdxMN/18.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/ZYFsR3Xt/17.jpg" alt="" class="row_poster ">
          
     
     
     
        </div>

        

    </div>
    <!-- Comedy movies section -->
    <div class="row">
        <h2>COMEDY MOVIES</h2>
        <div class="row_posters">

            <img src="https://i.postimg.cc/nrZmgX1q/21.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/wv9Jbt2L/22.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/V6gp0C5N/23.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/K8t9gMHy/24.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/SsVQQjh6/25.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/15bv7HqF/26.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/bNmnVNS2/27.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/pV1KVLkY/20.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/nrZmgX1q/21.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/wv9Jbt2L/22.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/V6gp0C5N/23.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/K8t9gMHy/24.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/SsVQQjh6/25.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/15bv7HqF/26.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/bNmnVNS2/27.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/pV1KVLkY/20.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/nrZmgX1q/21.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/wv9Jbt2L/22.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/V6gp0C5N/23.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/K8t9gMHy/24.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/SsVQQjh6/25.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/15bv7HqF/26.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/bNmnVNS2/27.jpg" alt="" class="row_poster ">
     
     
        </div>

        

    </div>
    <!-- Horror Movies -->
    <div class="row">
        <h2>HORROR MOVIES</h2>
        <div class="row_posters">
           
            <img src="https://i.postimg.cc/43fVW7Bt/28.jpg" alt="" class="row_poster ">

            <img src="https://i.postimg.cc/fbnRB6C9/30.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/VkTDTF0M/31.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/kgDTfHGq/32.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/bNXG6CTk/6.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/9Mt0RV6p/7.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/43fVW7Bt/28.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/bJPdNK2h/29.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/fbnRB6C9/30.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/VkTDTF0M/31.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/kgDTfHGq/32.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/bNXG6CTk/6.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/9Mt0RV6p/7.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/43fVW7Bt/28.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/bJPdNK2h/29.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/fbnRB6C9/30.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/VkTDTF0M/31.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/kgDTfHGq/32.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/bNXG6CTk/6.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/9Mt0RV6p/7.jpg" alt="" class="row_poster ">

        </div>

        

    </div>
    <!-- Romance movies -->
    <div class="row">
        <h2>ROMANCE MOVIES</h2>
        <div class="row_posters">
            <img src="https://i.postimg.cc/4dhvrKh3/8.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/XYZgwy1v/banner.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/gjR5DRLW/f1.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/N0zzvb1t/f2.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/63Fgnz3c/f3.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/fRMFcVwG/f4.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/85fnpWH6/f5.jpg" alt="" class="row_poster ">
           
            <img src="https://i.postimg.cc/k4M6v0My/small-movie6.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/XYZgwy1v/banner.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/gjR5DRLW/f1.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/N0zzvb1t/f2.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/63Fgnz3c/f3.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/fRMFcVwG/f4.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/85fnpWH6/f5.jpg" alt="" class="row_poster ">
           
            <img src="https://i.postimg.cc/4dhvrKh3/8.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/XYZgwy1v/banner.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/gjR5DRLW/f1.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/N0zzvb1t/f2.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/63Fgnz3c/f3.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/fRMFcVwG/f4.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/85fnpWH6/f5.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/8cJDVjFK/04.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/JndmgbhH/05.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/rm5CZ9jQ/avatar.jpg" alt="" class="row_poster ">
     
     
        </div>

        

    </div>
    <!-- documeteries section -->
    <div class="row">
        <h2>DOCUMENTARIES</h2>
        <div class="row_posters">
            <img src="https://i.postimg.cc/rm5CZ9jQ/avatar.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/QdWBqd0q/u1.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/mDS1Fp8f/u2.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/3Jq4pvCR/u3.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/tTbVJGdN/u4.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/qqMhcc5t/u5.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/Qx7s4KZV/01.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/hGsK8FWr/02.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/vTJy8bfQ/03.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/8cJDVjFK/04.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/JndmgbhH/05.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/rm5CZ9jQ/avatar.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/QdWBqd0q/u1.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/mDS1Fp8f/u2.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/3Jq4pvCR/u3.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/tTbVJGdN/u4.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/qqMhcc5t/u5.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/Qx7s4KZV/01.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/hGsK8FWr/02.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/vTJy8bfQ/03.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/8cJDVjFK/04.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/JndmgbhH/05.jpg" alt="" class="row_poster ">
          
            <img src="https://i.postimg.cc/rm5CZ9jQ/avatar.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/QdWBqd0q/u1.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/mDS1Fp8f/u2.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/3Jq4pvCR/u3.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/tTbVJGdN/u4.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/qqMhcc5t/u5.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/Qx7s4KZV/01.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/hGsK8FWr/02.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/vTJy8bfQ/03.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/8cJDVjFK/04.jpg" alt="" class="row_poster ">
            <img src="https://i.postimg.cc/JndmgbhH/05.jpg" alt="" class="row_poster ">
          
        </div>
    </div>
<script src="script.js"></script>
      <script id="rendered-js" >
const nav = document.getElementById("nav");
window.addEventListener('scroll', () => {
  if (window.scrollY >= 100) {
    nav.classList.add('nav_black');
  } else {
    nav.classList.remove('nav_black');
  }
});
    </script>

</body>

</html>

8. Netflix clone with Hover effects & Rating

Made by epixieme. Source


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

  <title></title>
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Martel+Sans:[email protected]&display=swap");

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Martel Sans", sans-serif;
  background: #1e2025;
  color: #e5e5e5;
  font-size: 16px;
  height:100%;
  
}

/* .main {
 
  display: flex;
  align-items:center;
 
} */

.left {
  top: 145px;
  bottom: 0;
  left: 0;
}

.right {
  top: 145px;
  bottom: 0;
  right: 0;
}

.left1 {
  top: 385px;
  bottom: 0;
  left: 0;
}

.right1 {
   top: 385px;
  bottom: 0;
  right: 0;
}

.left2 {
  top: 605px;
  bottom: 0;
  left: 0;
}

.right2 {
 
  top: 605px;
  bottom: 0;
  right: 0;
}

.arrow{
  position: absolute;
  color: #fff;
  opacity:0;
  text-decoration: none;
  font-size: 2.5em;
/*   width: 80px; */
  padding: 20px;
  text-align: center;
  z-index: 23;
  cursor: pointer;
}

/* .hide{
  
  display:none
} */

.arrow:hover {
opacity:1;
font-size: 2.5em;
}

.popular,
.trending,
.originals {
  padding-left: 50px;
  padding-top:20px;
  padding-bottom:20px;
  grid-gap: 10px;
}



.popular {
  margin-top:60px;
  display: grid;
  grid-auto-flow: column;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scroll-behavior: smooth;
  align-items:flex-start;
}

/* 
.popular:after{
  
  content: '<';
  position: absolute;
  opacity: 1;  
  top: 180px;
  transition: 0.5s;
  color:white;
  font-size:50px;
} */ 
/* loop over this instead of arrows https://zzz.buzz/2016/06/16/working-with-pseudo-classes-in-javascript/ */

.trending {
 margin-top: 0;
  display: grid;
  grid-auto-flow: column;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scroll-behavior: smooth;
   align-items:flex-start;
}

::-webkit-scrollbar {
  width: 0px; /* Remove scrollbar space */
  background: transparent;
}

.originals {
 margin-top: 0;
  display: grid;
  grid-auto-flow: column;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scroll-behavior: smooth;
  align-items:flex-start;

}

.titles {
  padding-left: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
  margin: 0;

}

.trendTitle,.originalTitle{
  position:relative;
  top:25px;
}



.popularTitle{
  position:relative;
  top:85px;
}


.header {
  margin: 0;
  font-family: "Bebas Neue", cursive;
  display: flex;
  justify-content: flex-start;
  gap: 50px;
  min-width: 100vw;
  align-items: center;
  height: 5vh;
  background: #151515;
  padding: 20px 20px;
  position: fixed;
  z-index: 12;
}

.imagewrapper {
  background:#1E2025;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 220px;
  transition-duration: 0.5s;
  overflow: hidden;
  cursor: pointer;

}

.rating {
  color: #a0afbf;
}

.noOfReviews {
  font-size: 10px;
  color: rgb(160, 175, 191);
}

.imagewrapper:hover {
  display: flex;
  flex-direction: column;
  transform: scale(1.1);
  transition: transform 0.5s; 
  cursor: pointer;
  box-shadow: 5px 2px 10px rgba(0, 0, 0.3, 0.3);

}

.hide {
  display: none;
}

p {
    font-size: 12px;
    text-align: center;
}

.imagewrapper:hover .hide{
  display: grid;
  grid-template-columns: 50px 50px;
  justify-content: center;
  align-items: center;
  margin: 34px;
}

img {
  width: 220px;
  height: 112px;
  border-radius: 5px;
}

.images {
  display: flex;
  justify-content: center;
  width: 261px;
  height: 112px;
  position:relative;
  z-index:3;
}

.thumbsup input {
  display: none;
}

.thumbsup span:after {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  content: "πŸ‘";
  filter: grayscale(100%);
  font-size: 1.2rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.thumbsup:hover {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.thumbsdown:hover {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  70% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  30% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

 .thumbsup:checked + span:after {
  content: "πŸ‘";
  filter: grayscale(100%);
}

.thumbsup input:checked + span:after {
  font-size: 1.2rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid grey;
  border-radius: 50%;
  background: black;
  transition: 0.1s all;
  cursor: pointer;
  z-index: 999;
}

.thumbsup input:checked + span:after {
  font-size: 1.2rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid grey;
  border-radius: 50%;
  background: black;
  transition: 0.1s all;
  cursor: pointer;
  z-index: 999;
}
.thumbsdown input {
  display: none;
}

.thumbsdown span:after {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  content: "πŸ‘Ž";
  filter: grayscale(100%);
  font-size: 1.2rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.thumbsdown:checked + span:after {
  content: "πŸ‘Ž";
  filter: grayscale(100%);
}

.thumbsdown input:checked + span:after {
  font-size: 1.2rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid grey;
  border-radius: 50%;
  background: black;
  transition: 0.1s all;
  cursor: pointer;
  z-index: 999;
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .arrow{
      display:none;
    }
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
 .arrow{
      display:none;
    }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
 .arrow{
      display:none;
    }
}

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
.arrow{
      display:none;
    }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    
    .arrow{
      display:none;
    }

}

@media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3) { 
      .arrow{
        display:none;
      }
      body{
        margin-bottom:120px;
      }
}
</style>
</head>

<body translate="no" >
  <html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  
<header>
  <nav class="header">
    <h1>
      <span class="iconify" data-icon="logos-netflix" data-inline="false"></span> clone
    </h1>
  </nav>
  </header>
  
  <section clas="main">

    <section class="titles popularTitle">
      <h1 id="popularId">Popular On Netflix</h1>
    </section>
    <section class="slides1 popular slides">
    </section>
    <section class="titles trendTitle">
      <h1 id="trendingId">Trending Now</h1>
    </section>
    <section class="slides2 trending slides">
    </section>
    <section class="titles originalTitle">
      <h1 id="originalsId">Netflix Originals</h1>
    </section>
    <section class=" slides3 originals slides">
    </section>
  </section>
  <script src="index.pack.js"></script>
  <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
</body>

</html>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  
      <script id="rendered-js" >
// In this challenge, I want you to create a Dashboard for all our films. Each film should be
// displayed in our browser, in a box of its own with an image of the film of your choice, similar // to how it would
// look on Netflix.
// Please solve this using the film array, as this is an array exercise. Do not hardcode the names,
// even though it might be tempting!

const films = [
{
  title: "Bridgerton",
  url: "https://assets.codepen.io/3383494/bridgerton.jpg",
  rating: 4,
  reviewno: 768,
  category: "popular",
  Type: "series" },

{
  title: "Fate",
  url: "https://assets.codepen.io/3383494/fate.jpg",
  rating: 3,
  reviewno: 78,
  category: "popular",
  Type: "series" },

{
  title: "Lupin",
  url: "https://assets.codepen.io/3383494/lupin.jpg",
  reviewno: 1021,
  rating: 4,
  category: "popular" },

{
  title: "Night Stalker",
  url: "https://assets.codepen.io/3383494/nightstalker.jpg",
  rating: 4,
  category: "popular" },

{
  title: "Star Trek",
  url: "https://assets.codepen.io/3383494/startrek.jpg",
  rating: 5,
  category: "popular" },

{
  title: "The Crown",
  url: "https://assets.codepen.io/3383494/thecrown.jpg",
  rating: 5,
  category: "popular" },

{
  title: "The Last Kingdom",
  url: "https://assets.codepen.io/3383494/thelastkingdom.jpg",
  rating: 4,
  category: "popular" },

{
  title: "The Crown",
  url: "https://assets.codepen.io/3383494/thecrown.jpg",
  rating: 5,
  category: "popular" },

{
  title: "American Horror Story",
  url: "https://assets.codepen.io/3383494/americanhorrorstory.webp",
  rating: 5,
  category: "popular" },

{
  title: "Stranger Things",
  url: "https://assets.codepen.io/3383494/strangerthings.jpg",
  rating: 5,
  category: "popular" },

{
  title: "Bridgerton",
  url: "https://assets.codepen.io/3383494/bridgerton.jpg",
  rating: 4,
  category: "popular" },

{
  title: "Marcella",
  url: "https://assets.codepen.io/3383494/marcella.webp",
  rating: 3,
  category: "popular" },

{
  title: "Surviving Death",
  url: "https://assets.codepen.io/3383494/survivingdeath.jpg",
  rating: 3,
  category: "trending" },

{
  title: "Stranger Things",
  url: "https://assets.codepen.io/3383494/strangerthings.jpg",
  rating: 5,
  category: "trending" },

{
  title: "Marcella",
  url: "https://assets.codepen.io/3383494/marcella.webp",
  rating: 3,
  category: "trending" },

{
  title: "Breaking Bad",
  url: "https://assets.codepen.io/3383494/breakingbad.webp",
  rating: 5,
  category: "trending" },

{
  title: "The Last Kingdom",
  url: "https://assets.codepen.io/3383494/thelastkingdom.jpg",
  rating: 4,
  category: "trending" },

{
  title: "Star Trek",
  url: "https://assets.codepen.io/3383494/startrek.jpg",
  rating: 5,
  category: "trending" },

{
  title: "Bridgerton",
  url: "https://assets.codepen.io/3383494/bridgerton.jpg",
  rating: 4,
  category: "trending",
  Type: "series" },

{
  title: "Fate",
  url: "https://assets.codepen.io/3383494/fate.jpg",
  rating: 3,
  category: "trending" },

{
  title: "Lupin",
  url: "https://assets.codepen.io/3383494/lupin.jpg",
  rating: 4,
  category: "trending" },

{
  title: "American Horror Story",
  url: "https://assets.codepen.io/3383494/americanhorrorstory.webp",
  rating: 5,
  category: "trending" },

{
  title: "Night Stalker",
  url: "https://assets.codepen.io/3383494/nightstalker.jpg",
  rating: 4,
  category: "trending" },

{
  title: "Star Trek",
  url: "https://assets.codepen.io/3383494/startrek.jpg",
  rating: 5,
  category: "trending" },

{
  title: "The Last Kingdom",
  url: "https://assets.codepen.io/3383494/thelastkingdom.jpg",
  rating: 4,
  category: "originals" },

{
  title: "The Crown",
  url: "https://assets.codepen.io/3383494/thecrown.jpg",
  rating: 5,
  category: "originals" },

{
  title: "American Horror Story",
  url: "https://assets.codepen.io/3383494/americanhorrorstory.webp",
  rating: 5,
  category: "originals" },

{
  title: "Stranger Things",
  url: "https://assets.codepen.io/3383494/strangerthings.jpg",
  rating: 5,
  category: "originals" },

{
  title: "Bridgerton",
  url: "https://assets.codepen.io/3383494/bridgerton.jpg",
  rating: 4,
  category: "originals" },

{
  title: "Marcella",
  url: "https://assets.codepen.io/3383494/marcella.webp",
  rating: 3,
  category: "originals" },

{
  title: "Surviving Death",
  url: "https://assets.codepen.io/3383494/survivingdeath.jpg",
  rating: 3,
  category: "originals" },

{
  title: "Bridgerton",
  url: "https://assets.codepen.io/3383494/bridgerton.jpg",
  rating: 4,
  category: "originals" },

{
  title: "Fate",
  url: "https://assets.codepen.io/3383494/fate.jpg",
  rating: 3,
  category: "originals" },

{
  title: "Lupin",
  url: "https://assets.codepen.io/3383494/lupin.jpg",
  rating: 4,
  category: "originals" },

{
  title: "Night Stalker",
  url: "https://assets.codepen.io/3383494/nightstalker.jpg",
  rating: 3,
  category: "originals" },

{
  title: "Star Trek",
  url: "https://assets.codepen.io/3383494/startrek.jpg",
  rating: 4,
  category: "originals" },

{
  title: "The Crown",
  url: "https://assets.codepen.io/3383494/thecrown.jpg",
  rating: 4,
  category: "originals" }];



let popular = "";
let trending = "";
let originals = "";

// console.log(films)
const $ = ele => document.querySelector(ele);
const $$ = ele => document.querySelectorAll(ele);

function getFilms(element, filmElement, rightArrow, leftArrow, displayFilms) {
  films.forEach((film, index) => {
    const { title, url, rating, category, reviewno } = film;

    category === filmElement ?
    element += `
     
    <section class='imagewrapper popularimg'>
    <div class="images">
        <img class="img-${index}" src="${url}">
    </div>
    <div class="hide">
        <label class="thumbsup">
            <input type="checkbox"/>
            <span></span>
        </label>
        <label class="thumbsdown">
            <input type="checkbox"/>
            <span></span>
        </label>
    <p>Rating:</p>
    <p>${"*".repeat(rating)}</p>			
    </section>
        
      ` :
    "Error: cannot load films";
  });

  displayFilms.innerHTML = leftArrow + element + rightArrow; // could use${index}to get leftArrow1/2/3 etc

  //image index.lenght to get padding
}

let popularFilms = getFilms(
popular,
"popular",
`<div class="arrow right next">></div>`,
`<div class="arrow left previous"><</div>`,
$(".popular"));



let trendingFilms = getFilms(
trending,
"trending",
`<div class="arrow right1 next">></div>`,
`<div class="arrow left1 previous"><</div>`,
$(".trending"));


let originalFilms = getFilms(
originals,
"originals",
`<div class="arrow right2 next">></div>`,
`<div class="arrow left2 previous"><</div>`,
$(".originals"));


//****slider functionality*******
let scrollCount = 0;

let slidesScrollWidth = $(".originals").clientWidth;

let scrollClick = $(".img-1").clientWidth + slidesScrollWidth;

function scrollLeft(event) {
  if (event.target === this) {


    this.parentNode.scrollTo({
      left: scrollCount -= scrollClick,
      behaviour: "smooth" });


  }
  if (scrollCount < 0) {
    scrollCount = 0;
  }

}

let slideArray = Array.from($$(".slides"));

function scrollRight(event) {
  if (
  event.target === this &&
  scrollCount <= this.parentNode.scrollWidth - this.parentNode.clientWidth)
  {
    this.parentNode.scrollTo({
      left: scrollCount += scrollClick,
      behaviour: "smooth" });

    scrollCount = 0;
  }

}

function thumbsUpDown() {
  if (this.checked) {
    $$("input").forEach(item => item.checked = false);
    this.checked = true;
  }
}

$$("input").forEach(item => item.addEventListener("click", thumbsUpDown));
$$(".next").forEach(next => next.addEventListener("click", scrollRight));
$$(".previous").forEach((previous) =>
previous.addEventListener("click", scrollLeft));



// hint: use a for loop to create the boxes and add information to them.

//level up:
//1. Are you able to add your own personal rating to each film card too?
//# sourceURL=pen.js
    </script>

</body>
</html>

9. Mobile Netflix clone

Made by sagar mistry. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css'>
  
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Poppins:[email protected],200;400;700");
@import url("https://fonts.googleapis.com/css2?family=Nunito:[email protected];400;600;700;800;900&display=swap");
body {
  background: #e8eaf6;
  height: 100%;
}

.module {
  background: #050505;
  font-family: "Poppins", sans-serif;
  border-radius: 25px;
  padding: 20px;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.1), 0 0 0px 5px black,
    10px 50px 30px -30px rgba(0, 0, 0, 0.5);
  height: 640px;
  overflow: hidden;
  overflow-y: inherit;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  position: relative;
  z-index: 3;
  padding-top: 0;
}
.module .header.activescroll {
  top: -50px;
  background: rgb(0 0 0 / 54%);
}
.other {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 7px 20px;
  padding-bottom: 0;
}

.other span {
  color: #fff;
  font-size: 12px;
}
.module::-webkit-scrollbar {
  display: none;
}
.module:before {
  content: "";
  display: block;
  top: 4px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background: #000;
  z-index: 6;
  border-radius: 100px;
  background-image: url(https://i.imgur.com/GCiEevy.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.module .notify {
  z-index: 3;
  top: 5px;
  position: absolute;
  width: 280px;
  left: 50%;
  transform: translateX(-50%);
}
.module .notify img {
  width: 100%;
}
.header.activescroll .head {
  opacity: 0;
  visibility: hidden;
}
section.banner {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 0px);
  height: 400px;
}

section.banner img {
  width: calc(100% + 0px);
  object-fit: cover;
  height: 100%;
}
.module .movie-detail {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  transform: translatey(100%) scaley(0);
  transition: ease all 0.3s;
  z-index: 2;
}
section.silderbanner {
  position: relative;
  width: 340px;
  height: 400px;
  margin-top: -95px;
  margin-left: -25px;
}

span.toppy .top10 {
  width: 22px;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  color: #fff;
  border: 2px solid #fff;
  font-size: 7px;
  text-align: center;
  font-weight: bold;
  line-height: 7px;
  text-transform: uppercase;
}

span.toppy {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

span.toppy .todaydate {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  padding-left: 6px;
}
section.titlehead {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

section.titlehead img.titleimg {
  width: 146px;
  height: 100%;
  object-fit: contain;
}

.module .movie-detail .wrapper-image {
  background: url("https://image.tmdb.org/t/p/w370_and_h556_bestv2/aRD1vLU7k5NHO0HThfHrjEQwWRz.jpg")
    center center no-repeat;
  background-size: cover;
  height: 320px;
  position: relative;
  border-radius: 0px 0px 60% 60%/35%;
  width: 120%;
  transform: translateX(-10%);
  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.9),
    0px 20px 20px rgba(0, 0, 0, 0.3);
}
.module .movie-detail .wrapper-image .play {
  cursor: pointer;
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 80px;
  height: 80px;
  transition: ease all 0.3s;
  border-radius: 100%;
  background-color: white;
  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6),
    0px 20px 20px rgba(0, 0, 0, 0.1);
}
.module .movie-detail .wrapper-image .play svg {
  transition: ease all 0.3s;
  width: 20px;
  transform: translate(32px, 28px);
  fill: #de3852;
}
.module .movie-detail .wrapper-image .play:hover svg {
  width: 25px;
  transform: translate(30px, 26px);
}
.module .movie-detail h2 {
  font-family: "Nunito", sans-serif;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  padding: 0 60px;
  margin-top: 70px;
  text-transform: uppercase;
}
.module .movie-detail.active {
  transform: translatey(0%) scaley(1);
}
.module .header {
  position: -webkit-sticky;
  position: sticky;
  top: -20px;
  z-index: 2;
  padding: 20px;
  width: calc(100% +40px);
  display: flex;
  background: transparent;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  vertical-align: middle;
  margin: 0 -20px;
  /*     backdrop-filter: blur(2px); */
  padding-bottom: 10px;
  transition: background 0.4s;
}
section.banner:before {
  content: "";
  background: rgb(0 0 0 / 0%);
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 0px);
  height: 400px;
  background-image: linear-gradient(
    rgb(0 0 0 / 57%),
    rgb(0 0 0 / 0%),
    rgb(0 0 0 / 48%),
    rgb(0 0 0)
  );
}
.logo:before {
  content: "";
  width: 10px;
  height: 100%;
  position: absolute;
  background: #e80000;
  top: 0;
  opacity: 1;
  transform: skewX(18deg);
  left: 8px;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 20%), 0 19px 38px rgb(0 0 0 / 30%),
    0 15px 12px rgb(0 0 0 / 22%), 0 0 100px rgb(0 0 0 / 30%);
}
.logo {
  width: 26px;
  height: 33px;
  background-image: linear-gradient(
    to right,
    #b30000 33%,
    #0000 33%,
    #0000 67%,
    #b30000 67%,
    #b30000 100%
  );
  position: relative;
}
span.other {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 40px;
  padding-bottom: 0px;
}

span.other span {
  color: #fff;
  font-size: 15px;
}
.module .header .menu svg {
  width: 18px;
}
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.module .header .search svg {
  width: 18px;
}
.module .hero-slider {
  margin: 0 -20px;
  margin-top: 30px;
  margin-bottom: 0;
}
.module .hero-slider .slick-list {
  padding-bottom: 40px !important;
  height: 235px;
}
.module .hero-slider .slick-slide {
  border: 0;
  outline: none;
  margin: 0 5px;
  width: 250px;
  transition: ease all 0.3s;
  height: 165px;
  transform: translatey(10px);
  opacity: 0.5;
}
.module .hero-slider .slick-slide.slick-current {
  height: 195px;
  opacity: 1;
  transform: translatey(0);
}
.module .hero-slider .slick-slide.slick-current .slide-content {
  height: 195px;
  background-size: 100% auto;
}
.module .hero-slider .slick-slide.slick-current .slide-content h3 {
  -webkit-animation: fadeInUp 0.3s both ease-out;
  animation: fadeInUp 0.3s both ease-out;
}
.module .hero-slider .slide-content {
  transition: ease all 0.3s;
  vertical-align: middle;
  height: 165px;
  background: #eee;
  border-radius: 10px;
  text-align: center;
  background-position: center center;
  position: relative;
  background-size: 130% auto;
}
.module .hero-slider .slide-content.full {
  position: absolute;
}
.module .hero-slider .slide-content.nut {
  background-image: url("https://image.tmdb.org/t/p/w370_and_h556_bestv2/aRD1vLU7k5NHO0HThfHrjEQwWRz.jpg");
}
.module .hero-slider .slide-content.beauty {
  background-image: url("https://media1.popsugar-assets.com/files/thumbor/z5oKgNC9S4DS6Bay78Aoy5aLO4s/fit-in/728xorig/filters:format_auto-!!-:strip_icc-!!-/2017/01/26/813/n/1922283/055dc333c3280d59_BeautyAndTheBeast58726d5b9fac8/i/Beauty-Beast-2017-Movie-Posters.jpg");
}
.module .hero-slider .slide-content.onward {
  background-image: url("https://images-na.ssl-images-amazon.com/images/I/71YwxjfhEiL._AC_SY679_.jpg");
}
.module .hero-slider .slide-content:before {
  transition: ease all 0.3s;
  content: "";
  position: absolute;
  width: 90%;
  height: 100%;
  background-image: inherit;
  background-size: cover;
  z-index: -1;
  filter: blur(12px);
  opacity: 0.6;
  left: 50%;
  transform: translate(-50%, 8%);
  border-radius: 30px;
}
.module .hero-slider .slide-content h3 {
  color: white;
  position: absolute;
  bottom: 10px;
  left: 20px;
  right: 20px;
  text-align: left;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  font-family: "Nunito", sans-serif;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  -webkit-animation: fadeOutDown 0.3s both ease-out;
  animation: fadeOutDown 0.3s both ease-out;
}
.module .category-slider {
  margin: 20px -20px;
}
.module .category-slider .slick-list {
  padding: 0 20px;
  padding-bottom: 40px !important;
}
.module .category-slider .slick-list .slick-slide {
  border: 0;
  outline: none;
  margin: 0 5px;
  height: 70px;
  width: 175px;
}
.module .category-slider .slick-list .category {
  transition: ease all 0.3s;
  vertical-align: middle;
  height: 70px;
  width: 175px;
  background: #eee;
  border-radius: 10px;
  background-position: center center;
  position: relative;
  background-size: 100% auto;
}
.module .category-slider .slick-list .category h4 {
  text-align: center;
  line-height: 70px;
  color: white;
  font-weight: 800;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  z-index: 2;
  transition: ease all 0.3s;
}
.module .category-slider .slick-list .category:after {
  background: #a3222b;
  background: linear-gradient(
    0deg,
    rgba(255, 54, 68, 0.9) 0%,
    rgba(200, 38, 47, 0.9) 50%,
    rgba(195, 63, 73, 0.7) 100%
  );
  transition: ease all 0.3s;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 10px;
}
.module .category-slider .slick-list .category:before {
  transition: ease all 0.3s;
  content: "";
  position: absolute;
  width: 90%;
  height: 100%;
  background-color: #eee;
  background-size: cover;
  z-index: -1;
  filter: blur(20px);
  opacity: 0.9;
  left: 50%;
  transform: translate(-50%, 10%);
  border-radius: 30px;
}
.module .my-list-slider {
  margin: 20px -20px;
}
.module .my-list-slider .slick-list {
  padding: 0 20px;
}
.module .my-list-slider .slick-list .slick-slide {
  border: 0;
  outline: none;
  margin: 0 5px;
  width: 97px;
  height: 145px;
}
.module .my-list-slider .slick-list .itm {
  transition: ease all 0.3s;
  vertical-align: middle;
  background: #eee;
  border-radius: 4px;
  background-position: center center;
  position: relative;
  background-repeat: none;
  background-size: 100% auto;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.netflixoriginals .my-list-slider .slick-list .slick-slide {
    width: 140px;
    height: 208px;
}
.section-header h2 {
  font-size: 15px;
  color: #fff;
  font-weight: bold;
}
.module .my-list-slider .slick-list .itm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.module .my-list-slider .slick-list .itm:before {
  transition: ease all 0.3s;
  content: "";
  position: absolute;
  width: 90%;
  height: 100%;
  background-image: inherit;
  background-size: cover;
  z-index: -1;
  filter: blur(20px);
  opacity: 0.9;
  left: 50%;
  transform: translate(-50%, 10%);
  border-radius: 30px;
}
.module .section-header {
  display: flex;
  width: 100%;
}
.module .section-header h2 {
  font-size: 20px;
  font-family: "Nunito", sans-serif;
  margin: 0;
}
.module .section-header .go {
  margin-left: auto;
}
.module .section-header .go svg {
  height: 20px;
  width: 20px;
}

/* DEV */
.dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
  z-index: 99;
}
.dribbble img {
  display: block;
  height: 28px;
}

.dev {
  position: fixed;
  font-size: 14px;
  top: 10px;
  left: 10px;
  padding: 1em;
  color: #212121;
  background-color: white;
  border-radius: 25px;
  cursor: pointer;
}
.dev a {
  text-decoration: none;
  font-weight: bold;
  color: #212121;
  transition: ease all 0.3s;
}
.dev a:hover {
  color: #ef5350;
  text-decoration: underline;
}
.dev span {
  display: inline-block;
  transition: ease all 0.3s;
}
.dev span:hover {
  transform: scale(1.2);
}
.footerbanner .listbutton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 18px;
}

.footerbanner .listbutton span {
  color: #918f92;
  font-size: 10px;
  font-weight: 600;
}

.footerbanner .listbutton svg {
  color: #e7e5e6;
}

.footerbanner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 57px;
  margin-top: 16px;
}
span.profile {
  width: 30px;
  height: 20px;
  overflow: hidden;
  background: #8842f8;
  border-radius: 2px;
  margin-left: 15px;
  box-shadow: 0px 0px 9px rgb(0 0 0 / 20%);
}

span.profile svg {
  width: 20px !important;
  height: 20px;
  border-radius: 3px;
}
span.playbutton {
  padding: 4px 12px;
  background: #fff;
  border-radius: 2px;
}
span {
  letter-spacing: 1px;
}
span.playbutton svg {
  color: #000;
}

span.playbutton span {
  font-size: 14px;
  font-weight: 800;
  text-transform: capitalize;
  margin-left: 2px;
  color: #000;
}

span.infobutton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 18px;
}

span.infobutton svg {
  color: #e7e5e6;
}

span.infobutton span {
  color: #918f92;
  font-size: 10px;
  font-weight: 600;
}

@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes tracking-out-contract {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
}
@keyframes tracking-out-contract {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
}
</style>
</head>

<body translate="no" >
  <div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-4 col-md-6 col-sm-8 col-12">
      <div class="module my-5">

        <div class="header">
          <div class="head">
            <div class="logo"></div>
            <span class="search">
              <svg viewBox="0 0 512 512" width="100" title="search">
                <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" fill="#ffffff" />
              </svg>
              <span class="profile">

                <svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="150" height="150" fill="#8842F8" />
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M15 0C12.5025 3 11.25 5.4975 11.25 7.5C11.25 10.5 14.25 13.5 17.25 13.5C20.25 13.5 29.25 9.75 30.75 7.5C32.25 5.25 27.75 14.25 27.75 18C27.75 21.75 30 26.25 36 26.25C51.75 26.25 51.7875 0 86.25 0H15Z" fill="#FCFDFF" />
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M117 90.75C130.672 90.75 141.75 79.6725 141.75 66H92.25C92.25 79.6725 103.328 90.75 117 90.75Z" fill="#FCFDFF" />
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M34.5 90C48.1725 90 59.25 78.9225 59.25 65.25H9.75C9.75 78.9225 20.8275 90 34.5 90Z" fill="#FCFDFF" />
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M117 42C130.672 42 141.75 53.0775 141.75 66.75H92.25C92.25 53.0775 103.328 42 117 42Z" fill="#FCFDFF" />
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M34.5 41.25C48.1725 41.25 59.25 52.3275 59.25 66H9.75C9.75 52.3275 20.8275 41.25 34.5 41.25Z" fill="#FCFDFF" />
                  <path d="M33.75 76.5C39.549 76.5 44.25 71.799 44.25 66C44.25 60.201 39.549 55.5 33.75 55.5C27.951 55.5 23.25 60.201 23.25 66C23.25 71.799 27.951 76.5 33.75 76.5Z" fill="#8842F8" />
                  <path d="M116.25 76.5C122.049 76.5 126.75 71.799 126.75 66C126.75 60.201 122.049 55.5 116.25 55.5C110.451 55.5 105.75 60.201 105.75 66C105.75 71.799 110.451 76.5 116.25 76.5Z" fill="#8842F8" />
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M60 84.75C63.5025 78.2475 68.0025 75 73.5 75C78.9975 75 84 78.2475 88.5 84.75H60Z" fill="#FCFDFF" />
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M84 87.75H63.75C65.7525 92.25 69 94.5 73.5 94.5C78 94.5 81.5025 92.25 84 87.75Z" fill="#FCFDFF" />
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M71.25 96.75C73.2525 97.2525 74.7525 97.5 75.75 97.5C76.7475 97.5 78.5025 96.75 81 95.25C84 101.25 85.5 106.253 85.5 110.25C85.5 116.25 81 117.75 81 117.75C81 117.75 76.5 118.5 75.75 113.25C74.7525 114.75 73.2525 115.253 71.25 114.75C68.7525 113.752 67.5 111.503 67.5 108C67.5 104.497 68.7525 100.747 71.25 96.75Z" fill="#FCFDFF" />
                </svg>

              </span>
            </span>
          </div>
          <div class="other">
            <span>TV Shows</span>
            <span>Movies</span>
            <span>Categories <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                <path fill="currentColor" d="M7,10L12,15L17,10H7Z" />
              </svg></span>
          </div>
        </div>
        <section class="silderbanner">
          <section class="banner">
            <img src="https://i.imgur.com/UsDIQul.jpg" class="bannerimg" />

          </section>
          <section class="titlehead">
            <img src="https://i.imgur.com/7lmUyWs.png" class="titleimg" />
            <span class="toppy">
              <span class="top10">Top 10</span>
              <span class="todaydate">
                #1 in Movies Today
              </span>
            </span>
            <div class="footerbanner">
              <span class="listbutton">
                <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                  <path fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                </svg>
                <span>My List</span>
              </span>
              <span class="playbutton">
                <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                  <path fill="currentColor" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
                </svg>
                <span>Play</span>
              </span>
              <span class="infobutton">
                <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                  <path fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" />
                </svg>
                <span>Info</span>
              </span>

            </div>
          </section>

        </section>
        <section style="margin-top: 30px;">
          <div class="mylist" id="mylist">
            <div class="section-header">
              <h2>My List</h2>
            </div>
            <div class="my-list-slider">
              <div class="itm movie-1">
                <img src="https://i.pinimg.com/236x/69/61/ee/6961eef897c18402e09eab07be8dee87.jpg" />
              </div>
              <div class="itm movie-2">
                <img src="https://i.pinimg.com/236x/a7/df/3f/a7df3f73622a7bb7e08d87819884c966.jpg" />
              </div>
              <div class="itm movie-3">
                <img src="https://i.pinimg.com/236x/7c/53/c2/7c53c23a2c437168a108df013f9f447f.jpg" />
              </div>
              <div class="itm movie-4">
                <img src="https://i.pinimg.com/236x/59/47/f4/5947f473d2b7558d7d6c1894347be70b.jpg" />
              </div>
              <div class="itm movie-5">
                <img src="https://i.pinimg.com/236x/7b/1d/1b/7b1d1b854faf3c01dd4aacf1cdbd9aee.jpg" />
              </div>
              <div class="itm movie-6">
                <img src="https://i.pinimg.com/236x/e8/67/2c/e8672c76e14e3efad15a2c8d02dac8b0.jpg" />
              </div>
              <div class="itm movie-7">
                <img src="https://i.pinimg.com/236x/1a/30/98/1a3098d0372034226f09ee362f125184.jpg" />
              </div>
              <div class="itm movie-8">
                <img src="https://i.pinimg.com/236x/9c/d7/d7/9cd7d757b9bbfbadd394867b3d034b55.jpg" />
              </div>
              <div class="itm movie-9">
                <img src="https://i.pinimg.com/236x/d1/49/77/d1497720ae962062d66544002bf47d73.jpg" />
              </div>
            </div>
          </div>
          
          <div class="popularonnetflix" id="popularonnetflix">
            <div class="section-header">
              <h2>Popular on Netflix</h2>
            </div>
            <div class="my-list-slider">
              <div class="itm movie-1">
                <img src="https://i.pinimg.com/236x/69/61/ee/6961eef897c18402e09eab07be8dee87.jpg" />
              </div>
              <div class="itm movie-2">
                <img src="https://i.pinimg.com/236x/ce/3b/77/ce3b77ad6614bbda7cd8eb93cff2c9ad.jpg" />
              </div>
              <div class="itm movie-3">
                <img src="https://i.pinimg.com/236x/d0/53/96/d05396afead4da4938c411847c809907.jpg" />
              </div>
              <div class="itm movie-4">
                <img src="https://i.pinimg.com/236x/59/47/f4/5947f473d2b7558d7d6c1894347be70b.jpg" />
              </div>
              <div class="itm movie-5">
                <img src="https://i.pinimg.com/236x/7b/1d/1b/7b1d1b854faf3c01dd4aacf1cdbd9aee.jpg" />
              </div>
              <div class="itm movie-6">
                <img src="https://i.pinimg.com/236x/e8/67/2c/e8672c76e14e3efad15a2c8d02dac8b0.jpg" />
              </div>
              <div class="itm movie-7">
                <img src="https://i.pinimg.com/236x/65/19/df/6519dffbb4b1868b3941bee08bd4378f.jpg" />
              </div>
              <div class="itm movie-8">
                <img src="https://i.pinimg.com/236x/5c/e6/2d/5ce62d89d391e02f5cc617788a5f6239.jpg" />
              </div>
              <div class="itm movie-9">
                <img src="https://i.pinimg.com/236x/d1/49/77/d1497720ae962062d66544002bf47d73.jpg" />
              </div>
            </div>
          </div>
          
          <div class="trendingnow" id="trendingnow">
            <div class="section-header">
              <h2>Trending Now</h2>
            </div>
            <div class="my-list-slider">
              <div class="itm movie-1">
                <img src="https://i.pinimg.com/236x/28/82/ab/2882abbe14f929dce767a3bbb52e4ecf.jpg" />
              </div>
              <div class="itm movie-2">
                <img src="https://i.pinimg.com/236x/ce/3b/77/ce3b77ad6614bbda7cd8eb93cff2c9ad.jpg" />
              </div>
              <div class="itm movie-3">
                <img src="https://i.pinimg.com/236x/43/4e/d7/434ed75cd410bcf8894821f34299cf73.jpg" />
              </div>
              <div class="itm movie-4">
                <img src="https://i.pinimg.com/236x/f5/85/67/f585677b91bb5517bb6fab4e926066f7.jpg" />
              </div>
              <div class="itm movie-5">
                <img src="https://i.pinimg.com/236x/7b/1d/1b/7b1d1b854faf3c01dd4aacf1cdbd9aee.jpg" />
              </div>
              <div class="itm movie-6">
                <img src="https://i.pinimg.com/236x/e8/67/2c/e8672c76e14e3efad15a2c8d02dac8b0.jpg" />
              </div>
              <div class="itm movie-7">
                <img src="https://i.pinimg.com/236x/e6/41/56/e64156ea0e314df5abdffade75dc643a.jpg" />
              </div>
              <div class="itm movie-8">
                <img src="https://i.pinimg.com/236x/5c/e6/2d/5ce62d89d391e02f5cc617788a5f6239.jpg" />
              </div>
              <div class="itm movie-9">
                <img src="https://i.pinimg.com/236x/11/e1/ae/11e1aece8d0745cb870480c8a2f35afc.jpg" />
              </div>
            </div>
          </div>
          
          <div class="netflixoriginals" id="netflixoriginals">
            <div class="section-header">
              <h2>Netflix Originals</h2>
            </div>
            <div class="my-list-slider">
              <div class="itm movie-1">
                <img src="https://m.media-amazon.com/images/M/MV5BMWZkM2I2NjE[email protected]@._V1_.jpg" />
              </div>
              <div class="itm movie-2">
                <img src="https://m.media-amazon.com/images/M/MV5BYWVkMWEyMDU[email protected]@._V1_.jpg" />
              </div>
              <div class="itm movie-3">
                <img src="https://m.media-amazon.com/images/M/MV5BZmU0ZTQ1OWYt[email protected]._V1_.jpg" />
              </div>
              <div class="itm movie-4">
                <img src="https://m.media-amazon.com/images/M/MV5BZTg0NThkODY[email protected]@._V1_.jpg" />
              </div>
              <div class="itm movie-5">
                <img src="https://m.media-amazon.com/images/M/MV5BZDRmNjVmODUtZjc0Zi00YTVkLWJhZjYtNjRjYmJiMjU4ODJkXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg" />
              </div>
              <div class="itm movie-6">
                <img src="https://m.media-amazon.com/images/M/MV5BYzZkOTY4MDg[email protected]@._V1_.jpg" />
              </div>
              <div class="itm movie-7">
                <img src="https://oyster.ignimgs.com/wordpress/stg.ign.com/2018/08/castle.jpg" />
              </div>
              <div class="itm movie-8">
                <img src="https://static.wikia.nocookie.net/netflix/images/9/96/Secret_Magic_Control_Agency.png/revision/latest?cb=20210324043413" />
              </div>
            </div>
          </div>
<div class="top10" id="top10">
            <div class="section-header">
              <h2>Top 10 in <span id='location'>India</span> Today</h2>
            </div>
            <div class="my-list-slider">
              <div class="itm movie-1">
                <img src="https://i.pinimg.com/236x/28/82/ab/2882abbe14f929dce767a3bbb52e4ecf.jpg" />
              </div>
              <div class="itm movie-2">
                <img src="https://i.pinimg.com/236x/ce/3b/77/ce3b77ad6614bbda7cd8eb93cff2c9ad.jpg" />
              </div>
              <div class="itm movie-3">
                <img src="https://i.pinimg.com/236x/43/4e/d7/434ed75cd410bcf8894821f34299cf73.jpg" />
              </div>
              <div class="itm movie-4">
                <img src="https://i.pinimg.com/236x/f5/85/67/f585677b91bb5517bb6fab4e926066f7.jpg" />
              </div>
              <div class="itm movie-5">
                <img src="https://i.pinimg.com/236x/7b/1d/1b/7b1d1b854faf3c01dd4aacf1cdbd9aee.jpg" />
              </div>
              <div class="itm movie-6">
                <img src="https://i.pinimg.com/236x/e8/67/2c/e8672c76e14e3efad15a2c8d02dac8b0.jpg" />
              </div>
              <div class="itm movie-7">
                <img src="https://i.pinimg.com/236x/e6/41/56/e64156ea0e314df5abdffade75dc643a.jpg" />
              </div>
              <div class="itm movie-8">
                <img src="https://i.pinimg.com/236x/5c/e6/2d/5ce62d89d391e02f5cc617788a5f6239.jpg" />
              </div>
              <div class="itm movie-9">
                <img src="https://i.pinimg.com/236x/11/e1/ae/11e1aece8d0745cb870480c8a2f35afc.jpg" />
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js'></script>
      <script id="rendered-js" >
$('.hero-slider').slick({
  dots: false,
  infinite: false,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: false,
  autoplaySpeed: 2000,
  arrows: false,
  centerMode: true });

$('.category-slider').slick({
  dots: false,
  infinite: false,
  speed: 500,
  slidesToShow: 2,
  slidesToScroll: 1,
  autoplay: false,
  arrows: false,
  variableWidth: true,
  centerMode: false });

$('.my-list-slider').slick({
  dots: false,
  infinite: false,
  speed: 500,
  slidesToShow: 3,
  slidesToScroll: 3,
  autoplay: false,
  arrows: false,
  variableWidth: true,
  centerMode: false });


$('.module').scroll(function () {
  if ($(this).scrollTop() > 20) {
    $('.header').addClass('activescroll');
    $('.banner').addClass('activescroll');
  } else {
    $('.header').removeClass('activescroll');
    $('.banner').removeClass('activescroll');
  }
});

$.get("https://ipinfo.io", function (response) {
  console.log(response.city, response.country);
  $('#location').html(response.city + ' ' + response.country);
}, "jsonp");
    </script>

</body>
</html>
 

10. Netflix Clone In Pure CSS/JS/HTML

Made by VinΓ­cius Vieira. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,[email protected],100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

main {
  width: 100%;
  color: white;
  background: black;
  padding: 0 0 20px 0;
}

.cartaz {
  width: 100%;
  overflow: hidden;
  margin: 0 0 40px 0;
}
.cartaz .background {
  overflow: hidden;
  background: #000000;
}
.cartaz .background img {
  opacity: 0.5;
  z-index: 2;
  width: 100%;
  min-height: 50vh;
  max-height: 65vh;
  margin-top: -1%;
}
.cartaz .background .descriptions {
  top: 25%;
  left: 4%;
  width: 30%;
  z-index: 9;
  position: absolute;
  letter-spacing: 0.7px;
  transform: translateY(-50%);
}
.cartaz .background .descriptions h3, .cartaz .background .descriptions .fas {
  margin: 0 0 10px 0;
}
.cartaz .background .descriptions .fas.red {
  color: #E50914;
}

container {
  z-index: 5;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
container .row {
  position: relative;
  margin: 0 0 30px 0;
}
container .row h3 {
  margin: 0 0 5px 5px;
  letter-spacing: 0.7px;
}
container .row .fas {
  cursor: pointer;
  font-size: 1.5rem;
  position: absolute;
  transition: 0.3s ease-out;
}
container .row .fas:hover {
  transform: scale(1.2);
}
container .row .fa-chevron-left {
  left: 0;
  top: 50%;
  z-index: 800;
  margin: 0 0 0 10px;
}
container .row .fa-chevron-right {
  right: 0;
  top: 50%;
  z-index: 800;
  margin: 0 10px 0 0;
}
container .row .row_items, container .row .row_items1 {
  display: flex;
  padding: 15px 0;
  position: relative;
  align-items: center;
  overflow: auto hidden;
}
container .row .row_items::-webkit-scrollbar, container .row .row_items1::-webkit-scrollbar {
  visibility: hidden;
}
container .row .row_items .item, container .row .row_items1 .item {
  margin: 0 15px 0 0;
  transition: 0.25s ease-out;
}
container .row .row_items .item:hover, container .row .row_items1 .item:hover {
  margin: 0 30px 0 10px;
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .descriptions {
    width: 50% !important;
  }

  .fa-chevron-left, .fa-chevron-right {
    display: none !important;
  }
}
</style>
</head>

<body translate="no" >
  <main>
<!--   <h2 class="title">
    <img src="https://cdn.usbrandcolors.com/images/logos/netflix-logo.svg"/>
  </h2> -->
  
  <div class="cartaz">
    <div class="background">
      <div class="descriptions">
      <h3>Assista a Velvet Buzzsaw</h3>
        <i class="fas fa-star red"></i>
        <i class="fas fa-star red"></i>
        <i class="fas fa-star red"></i>
        <i class="fas fa-star red"></i>
        <i class="fas fa-star"></i>
      <p>Assita a mais filmes como esse da categoria Top 1 de terror se inscrevendo em nosso aplicativo!</p>
      </div>
    <img src="https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABRr4YxdaABuAuH_3FmSQZn7BCvLp-UUPsXE9MiYpvFP3CSUHV2zOew5oVqKqqdaOd3tbFVS0Uf67uIs7_eZydlCghg4nK0nMatRpPImABwTOhnNzCLCxdKrua7pPIcPCZqBYTeAO5g.jpg"/>
    </div>
  </div>
  
  <container>
    <div class="row">
      <h3>Recentemente assistidos</h3>
      <i class="fas fa-chevron-left"></i>
      <i class="fas fa-chevron-right"></i>
      <div class="row_items">
      </div>
    </div>
    
    <div class="row">
      <h3>Filmes de terror</h3>
      <i class="fas fa-chevron-left"></i>
      <i class="fas fa-chevron-right"></i>
      <div class="row_items1">
      </div>
    </div>
    
    <div class="row">
      <h3>Filmes de ação</h3>
      <i class="fas fa-chevron-left"></i>
      <i class="fas fa-chevron-right"></i>
      <div class="row_items">
      </div>
    </div>
  </container>
</main>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
      <script id="rendered-js" >
$(document).ready(function (e)
{
  for (let i = 0; i <= 12; i++)
  {if (window.CP.shouldStopExecution(0)) break;
    $('.row_items').append(
    '<div class="item">' +
    '<img style="border-radius:4px;" src="' + array[i] + '">' +
    '</div>');

    $('.row_items1').prepend(
    '<div class="item">' +
    '<img src="' + array[i] + '">' +
    '</div>');

  }window.CP.exitedLoop(0);

  $('.fa-chevron-left').click(function (e)
  {
    scroll == 0 ? scroll = $(this).closest('.row').find('div').width() * 4 : scroll -= 240;

    $(this).closest('.row').find('div').animate({
      scrollLeft: scroll });

  });

  $('.fa-chevron-right').click(function (e)
  {
    scroll >= array.length * 300 ? scroll = $(this).closest('.row').find('div').width() / 10 : scroll += 240;

    $(this).closest('.row').find('div').animate({
      scrollLeft: scroll });

  });
});

var scroll = 0;
var array = ['https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/a76057bcfd003711a76fb3985b1f2cf74beee3b8/AAAABY7NwkWEJIfXsn6t3Li4bGSCQ1nEErPisI5ZZtXlC-_VRBZOUrhWK5X3vt3t6SR_cpgVhCwxgQqFFDJhk62Kk8hawOnYGZMr0LKeLczMFV2zalCFjkcdLksvT4HB2LEi6LFyruyk3Uu0LmNGsHfC2A8Bly60smr_3sDbz4RruXcklPOG1qYq9wUVu3zfaiwNvqmG4b8aFA.jpg', 'https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABdYtAqj8CyaJTWq5taD8Ro_UgwH3nne9QpFGVps-2J3IG-leqrfqXFii4jzZn48nPYTkrlwKQEV0R7_cEKlYBPRzdKqNODc-Oz26IL3LlLgFboXibIWXwxzeYxzuqn0I9TpARjeByw.jpg', 'https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABTyWK1MKaw8GcObtz47R2Tj7wkLJ7qQu9tk6TVpcoyxpzD4B-zZ569bQ5vGrREBL-MWFkGilXUwy7tCDaj2XOGkUB4RsbbFAmp9NgSr6lygMpUGNHSlyfrFbUORsRkrxSIoh_ggOvg.jpg', 'https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABRr4YxdaABuAuH_3FmSQZn7BCvLp-UUPsXE9MiYpvFP3CSUHV2zOew5oVqKqqdaOd3tbFVS0Uf67uIs7_eZydlCghg4nK0nMatRpPImABwTOhnNzCLCxdKrua7pPIcPCZqBYTeAO5g.jpg', 'https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/a76057bcfd003711a76fb3985b1f2cf74beee3b8/AAAABXSd7bhDddcwkq9XpksoQFCHVx29Sxl_h4hb2n3F2GIt32a4XWcOnctQfgnT5qdolv8UML6_xNB5CJ89h56wueb13mYmEBr0sx5e9iLPdtVcOQAOmKXKWHHXwFvJuCUwuNnL3s8eAQwqLXPVMHMEsujM684rUGrZNF2btN2GRy5-RyEslsxZO93V2Q_H2bWs8A8oayt1h5M.webp', 'https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/a76057bcfd003711a76fb3985b1f2cf74beee3b8/AAAABd3IBDpxbRcHXvRMFCZeKa2aHLU1P4SJtrACMS9om3yhLjqPlvNlmR_fypPxjtbsbnKaC4JZhPSpDG4r_kdxSHHAltWguMcCB-1Y1OShr2zWfUv7Whf_39fNH5ZJ3_0gxQrs0akmQjQz44_LT7jXH5LMZ7iMBAzac5IEj4m7Fn_5OWEGYnVsDsKG-QTommDooULMDF9bEw.jpg', 'https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABTOj1-116yVcgKWMU2dI3GFR4x0fSkiGsqtLLeLUxRR7STaksjAqBTrYlTfrB8nIGnGvXksi0ewXAhVGg6-pLxpFOIfcpjK-pf8D5xehFZo5a6vJbo4L0AGbrzglbyUoq255QBJgRQ.jpg', 'https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABVopDZ5Fy9_fk_HO5WxHTXKKjKhtWFupbSjuvPwfLK_vytzon4EwRUdGgYJ34JwPxOTK_NkV3aXfkULMB0Dcct-FyfqzH-X44VXuRMp4QeBHlvKwWeZFpZlGdItPzmmg4scmwhG7SQ.jpg', 'https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABbcCX42tsqGbBvO2y9CQv5-7QvYbCfoHtXsuc6NPCtZaKa4l4fBX3XWvUwG9F2A3CTsNpHVmulxBbdXKwK8Q6xGjejd9FoadGkZ7CnGrSl601TOQjzSHJ23NuIPC8j0QMGORL4uRIA.jpg',
'https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABdYtAqj8CyaJTWq5taD8Ro_UgwH3nne9QpFGVps-2J3IG-leqrfqXFii4jzZn48nPYTkrlwKQEV0R7_cEKlYBPRzdKqNODc-Oz26IL3LlLgFboXibIWXwxzeYxzuqn0I9TpARjeByw.jpg',
'https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABQCoK53qihwVPLRxPEDX98nyYpGbxgi5cc0ZOM4iHQu7KQvtgNyaNM5PsgI0vy5g3rLPZdjGCFr1EggrCPXpL77p2H08jV0tNEmIfs_e8KUfvBJ6Ay5nM4UM1dl-58xA6t1swmautOM.webp',
'https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABZEK-7pZ1H5FD4cTyUb9qB_KeyJGz5p-kfPhCFv4GU_3mbdm8Xfsy4IBchlG9PFNdGff8cBNPaeMra72VFnot41nt0y3e8RLgaVwwh3UvyM2H2_MkmadWbQUeGuf811K7-cxJJh7gA.jpg',
'https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/a76057bcfd003711a76fb3985b1f2cf74beee3b8/AAAABd3IBDpxbRcHXvRMFCZeKa2aHLU1P4SJtrACMS9om3yhLjqPlvNlmR_fypPxjtbsbnKaC4JZhPSpDG4r_kdxSHHAltWguMcCB-1Y1OShr2zWfUv7Whf_39fNH5ZJ3_0gxQrs0akmQjQz44_LT7jXH5LMZ7iMBAzac5IEj4m7Fn_5OWEGYnVsDsKG-QTommDooULMDF9bEw.jpg'];
    </script>
</body>
</html>