Hello Coders, In this article you are going to learn how to create Responsive Netflix Clone using HTML and CSS. We are going to try to clone Netflix and make it look exactly like it.
If you ask me what is the best way to learn html and css? I would suggest you to build real world projects like this one. They will help you learn everything faster and by the time you know, You will be web developer who can already develop real world projects.
Responsive Netflix Clone with HTML and CSS | Video Tutorial
Watch the above video tutorial, I have show how to build it step by step. If you are a complete beginner, consider watching the video tutorial. Follow the video tutorial, I have explained each and everything.
Responsive Netflix Clone using HTML and CSS | Source Code
Below I have provided both HTML and CSS Source Code for you to build the Netflix Clone. You can also download complete source code of this project by clicking on the download button at the bottom of this article.
How do I create Netflix Clone using HTML? HTML Source Code
Create index.html file and copy paste the below code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Netflix Clone</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- nav -->
<div id="nav" class="nav">
<img class="nav__logo" src="images/netflix-logo.png" alt="" />
<img class="nav__avatar" src="images/netflix-avatar.png" alt="" />
</div>
<!-- header -->
<header class="banner">
<div class="banner__contents">
<h1 class="banner__title">Money Heist</h1>
<div class="banner__buttons">
<button class="banner__button">Play</button>
<button class="banner__button">My List</button>
</div>
<h1 class="banner__description">
To carry out the biggest heist in history, a mysterious man called The Professor recruits
a band of eight robbers who have a single characteristic: n...
</h1>
</div>
<div class="banner--fadeBottom"></div>
</header>
<!-- Netflix Originals -->
<div class="row">
<h2>NETFLIX ORIGINALS</h2>
<div class="row__posters">
<img class="row__poster row__posterLarge" src="images/large-movie1.jpg" alt="" />
<img class="row__poster row__posterLarge" src="images/large-movie2.jpg" alt="" />
<img class="row__poster row__posterLarge" src="images/large-movie3.jpg" alt="" />
<img class="row__poster row__posterLarge" src="images/large-movie4.jpg" alt="" />
<img class="row__poster row__posterLarge" src="images/large-movie5.jpg" alt="" />
<img class="row__poster row__posterLarge" src="images/large-movie6.jpg" alt="" />
<img class="row__poster row__posterLarge" src="images/large-movie7.jpg" alt="" />
<img class="row__poster row__posterLarge" src="images/large-movie8.jpg" alt="" />
</div>
</div>
<!-- Trending Now -->
<div class="row">
<h2>Trending Now</h2>
<div class="row__posters">
<img class="row__poster" src="images/small-movie1.jpg" alt="" />
<img class="row__poster" src="images/small-movie2.jpg" alt="" />
<img class="row__poster" src="images/small-movie3.jpg" alt="" />
<img class="row__poster" src="images/small-movie4.jpg" alt="" />
<img class="row__poster" src="images/small-movie5.jpg" alt="" />
<img class="row__poster" src="images/small-movie6.jpg" alt="" />
<img class="row__poster" src="images/small-movie7.jpg" alt="" />
<img class="row__poster" src="images/small-movie8.jpg" alt="" />
</div>
</div>
<!-- Top Rated -->
<div class="row">
<h2>Top Rated</h2>
<div class="row__posters">
<img class="row__poster" src="images/small-movie1.jpg" alt="" />
<img class="row__poster" src="images/small-movie2.jpg" alt="" />
<img class="row__poster" src="images/small-movie3.jpg" alt="" />
<img class="row__poster" src="images/small-movie4.jpg" alt="" />
<img class="row__poster" src="images/small-movie5.jpg" alt="" />
<img class="row__poster" src="images/small-movie6.jpg" alt="" />
<img class="row__poster" src="images/small-movie7.jpg" alt="" />
<img class="row__poster" src="images/small-movie8.jpg" alt="" />
</div>
</div>
<!-- Action Movies -->
<div class="row">
<h2>Action Movies</h2>
<div class="row__posters">
<img class="row__poster" src="images/small-movie1.jpg" alt="" />
<img class="row__poster" src="images/small-movie2.jpg" alt="" />
<img class="row__poster" src="images/small-movie3.jpg" alt="" />
<img class="row__poster" src="images/small-movie4.jpg" alt="" />
<img class="row__poster" src="images/small-movie5.jpg" alt="" />
<img class="row__poster" src="images/small-movie6.jpg" alt="" />
<img class="row__poster" src="images/small-movie7.jpg" alt="" />
<img class="row__poster" src="images/small-movie8.jpg" alt="" />
</div>
</div>
<!-- Comedy Movies -->
<div class="row">
<h2>Comedy Movies</h2>
<div class="row__posters">
<img class="row__poster" src="images/small-movie1.jpg" alt="" />
<img class="row__poster" src="images/small-movie2.jpg" alt="" />
<img class="row__poster" src="images/small-movie3.jpg" alt="" />
<img class="row__poster" src="images/small-movie4.jpg" alt="" />
<img class="row__poster" src="images/small-movie5.jpg" alt="" />
<img class="row__poster" src="images/small-movie6.jpg" alt="" />
<img class="row__poster" src="images/small-movie7.jpg" alt="" />
<img class="row__poster" src="images/small-movie8.jpg" alt="" />
</div>
</div>
<!-- Horror Movies -->
<div class="row">
<h2>Horror Movies</h2>
<div class="row__posters">
<img class="row__poster" src="images/small-movie1.jpg" alt="" />
<img class="row__poster" src="images/small-movie2.jpg" alt="" />
<img class="row__poster" src="images/small-movie3.jpg" alt="" />
<img class="row__poster" src="images/small-movie4.jpg" alt="" />
<img class="row__poster" src="images/small-movie5.jpg" alt="" />
<img class="row__poster" src="images/small-movie6.jpg" alt="" />
<img class="row__poster" src="images/small-movie7.jpg" alt="" />
<img class="row__poster" src="images/small-movie8.jpg" alt="" />
</div>
</div>
<!-- Romance Movies -->
<div class="row">
<h2>Romance Movies</h2>
<div class="row__posters">
<img class="row__poster" src="images/small-movie1.jpg" alt="" />
<img class="row__poster" src="images/small-movie2.jpg" alt="" />
<img class="row__poster" src="images/small-movie3.jpg" alt="" />
<img class="row__poster" src="images/small-movie4.jpg" alt="" />
<img class="row__poster" src="images/small-movie5.jpg" alt="" />
<img class="row__poster" src="images/small-movie6.jpg" alt="" />
<img class="row__poster" src="images/small-movie7.jpg" alt="" />
<img class="row__poster" src="images/small-movie8.jpg" alt="" />
</div>
</div>
<!-- Documentaries -->
<div class="row">
<h2>Documentaries</h2>
<div class="row__posters">
<img class="row__poster" src="images/small-movie1.jpg" alt="" />
<img class="row__poster" src="images/small-movie2.jpg" alt="" />
<img class="row__poster" src="images/small-movie3.jpg" alt="" />
<img class="row__poster" src="images/small-movie4.jpg" alt="" />
<img class="row__poster" src="images/small-movie5.jpg" alt="" />
<img class="row__poster" src="images/small-movie6.jpg" alt="" />
<img class="row__poster" src="images/small-movie7.jpg" alt="" />
<img class="row__poster" src="images/small-movie8.jpg" alt="" />
</div>
</div>
<script>
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>
How do I design Responsive Netflix Clone using CSS? CSS Source Code
Create an styles.css file and dont forget to link the file to our html document. Copy the below css codes.
* {
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__posters {
display: flex;
overflow-y: hidden;
overflow-x: scroll;
padding: 20px;
}
.row__poster:hover {
transform: scale(1.08);
}
.row__posters::-webkit-scrollbar {
display: none;
}
.row__posterLarge {
max-height: 250px;
}
.row__posterLarge:hover {
transform: scale(1.09);
}
.row {
color: white;
margin-left: 20px;
}
/* banner */
.banner {
background-image: url('images/banner.jpg');
background-size: cover;
background-position: center center;
color: white;
object-fit: contain;
height: 448px;
}
.banner__contents {
margin-left: 30px;
padding-top: 140px;
height: 190px;
}
.banner__title {
font-size: 3rem;
font-weight: 800;
padding-bottom: 0.3rem;
}
.banner__description {
width: 45rem;
line-height: 1.3;
padding-top: 1rem;
font-size: 0.8rem;
max-width: 360px;
height: 180px;
}
.banner__button {
cursor: pointer;
color: #fff;
outline: none;
border: none;
font-weight: 700;
border-radius: 0.2vw;
padding-left: 2rem;
padding-right: 2rem;
margin-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: rgba(51, 51, 51, 0.5);
}
.banner__button:hover {
color: #000;
background-color: #e6e6e6;
transition: all 0.2s;
}
.banner--fadeBottom {
margin-top: 145px;
height: 7.4rem;
background-image: linear-gradient(180deg, transparent, rgba(37, 37, 37, 0.61), #111);
}
/* nav */
.nav__logo {
width: 80px;
object-fit: contain;
}
.nav__avatar {
width: 30px;
object-fit: contain;
}
.nav {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
padding: 20px;
/* background-color: #111; */
z-index: 1;
transition-timing-function: ease-in;
transition: all 0.5s;
}
.nav__black {
background-color: #111;
}
Done! Completed. That’s it for this article. You can download the complete source code of this project by clicking on the download button below.
