Intro
Hello, Readers, I am back with another exciting HTML and CSS project today. In this blog post, I will show you how to make a Netflix clone website using HTML and CSS only. No other languages are used in this project; it creates pure HTML and CSS. Earlier, I shared the blog post How to Make a Login and Registration Form. I also provide the source code of all my projects, which you can download and use according to your needs.
Netflix Clone
In this Netflix clone design, I create a first header section, and one by one, I create all sections like on the official website. I used images in this project that I downloaded from Netflix’s official website.
Header section
In the header section, first you see a background image with some text and two buttons, one for language and another for signing in, and after that, you see an email subscription form. When the user enters her email and clicks the “Get Started” button, Netflix sends the email to the user.
Middle Section
In the middle section, there are two columns: one for text and the other for image. Repeat this process five, two, and six times. In the first column, text is on the left side and the image is on the right, but after this, text will be on the right side and the image will be on the left side.
FAQ Section
After the header and middle section, you see FAQ (frequently asked questions) in this section, which includes some common questions and their answers. If the user clicks on any particular question, its answer is visible, and any other one is automatically closed.
Footer Section
The last section is for the footer, and some use full links available like “about,” “contact,” “privacy,” etc. The footer section is an important part of the website because, when users visit your website, it is very difficult to get the correct URL. The footer helps you navigate very easily; just click on the link and you will be redirected to a particular page.
Video Tutorial: Netflix Clone Using HTML and CSS
In this video, you clearly see how to develop a Netflix clone. Scratch helped me create this project step by step. I think that after watching this video, you will be able to create it without any confusion. I also provide source code for this project if you do not understand it, so download the code and use it.
You might like this:
Netflix Clone in HTML and CSS [Source Codes]
To create this clone website, first you create two files, one for HTML and the other for CSS. After creating these files, just copy the given code and paste it into your files. You can also download the source code files of this Netflix clone in HTML and CSS from the given download button at the bottom.
Create an HTML file first with the name index.html, and then put the provided codes into it. Keep in mind that you must generate a file with the “.html” extension.
HTML FILE
<!DOCTYPE html> <!-- Created by Coding Pakistan www.codingpakistan.com --> <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 Using HTML CSS - CodingPakistan</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header"> <nav> <img src="Images/logo.png" class="logo" alt=""> <div> <button class="language-btn"> English <img src="Images/down-icon.png" alt=""> </button> <button> Sign In </button> </div> </nav> <div class="header-content"> <h1>Unlimited movies, TV shows, and more.</h1> <h3>Watch anywhere. Cancel anytime.</h3> <p>Ready to watch? Enter your email to create or restart your membership.</p> <form class="email-signup"> <input type="email" placeholder="Email Address" required> <button type="submit"> Get Started</button> </form> </div> </div> <div class="features"> <div class="row"> <div class="text-col"> <h2>Enjoy on your TV.</h2> <p>Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more.</p> </div> <div class="img-col"> <img src="Images/feature-1.png" alt=""> </div> </div> <div class="row"> <div class="img-col"> <img src="Images/feature-2.png" alt=""> </div> <div class="text-col"> <h2>Download your shows to watch offline.</h2> <p>Save your favorites easily and always have something to watch.</p> </div> </div> <div class="row"> <div class="text-col"> <h2>Watch everywhere.</h2> <p>Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV.</p> </div> <div class="img-col"> <img src="Images/feature-3.png" alt=""> </div> </div> <div class="row"> <div class="img-col"> <img src="Images/feature-4.png" alt=""> </div> <div class="text-col"> <h2>Create profiles for kids.</h2> <p>Send kids on adventures with their favorite characters in a space made just for them—free with your membership.</p> </div> </div> </div> <!-- Frequently Ask Question --> <div class="faq"> <h2> Frequently Ask Question </h2> <ul class="accordion"> <li> <input type="radio" name="accordion" id="first"> <label for="first">What is Netflix?</label> <div class="content"> <p>Netflix is a streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries, and more on thousands of internet-connected devices. You can watch as much as you want, whenever you want without a single commercial – all for one low monthly price. There's always something new to discover and new TV shows and movies are added every week!</p> </div> </li> <li> <input type="radio" name="accordion" id="second"> <label for="second">How much Doen Netflix Cost?</label> <div class="content"> <p>Watch Netflix on your smartphone, tablet, Smart TV, laptop, or streaming device, all for one fixed monthly fee. Plans range from Rs250 to Rs1,100 a month. No extra costs, no contracts.</p> </div> </li> <li> <input type="radio" name="accordion" id="third"> <label for="third">Where can i Watch?</label> <div class="content"> <p>Watch anywhere, anytime. Sign in with your Netflix account to watch instantly on the web at netflix.com from your personal computer or on any internet-connected device that offers the Netflix app, including smart TVs, smartphones, tablets, streaming media players and game consoles.</p> </div> </li> <li> <input type="radio" name="accordion" id="fourth"> <label for="fourth">How do i Cancel?</label> <div class="content"> <p>Netflix is flexible. There are no pesky contracts and no commitments. You can easily cancel your account online in two clicks. There are no cancellation fees – start or stop your account anytime.</p> </div> </li> <li> <input type="radio" name="accordion" id="fifth"> <label for="fifth">What can i Watch on Netflix</label> <div class="content"> <p>Netflix has an extensive library of feature films, documentaries, TV shows, anime, award-winning Netflix originals, and more. Watch as much as you want, anytime you want.</p> </div> </li> <li> <input type="radio" name="accordion" id="sixth"> <label for="sixth">Is Netflix Good For Kids</label> <div class="content"> <p>The Netflix Kids experience is included in your membership to give parents control while kids enjoy family-friendly TV shows and movies in their own space.</p> </div> </li> </ul> <small> Ready to watch? Enter your email to create or restart your membership. </small> <form class="email-signup"> <input type="email" placeholder="Email Address" required> <button type="submit"> Get Started</button> </form> </div> <!-- --------------------- FOOTER ----------------------> <div class="footer"> <h2> Question? call 000-000-000-0001 </h2> <div class="row"> <div class="col"> <a href="#"> FAQ </a> <a href="#"> Investor Relations </a> <a href="#"> Privacy </a> <a href="#"> Speed Test </a> </div> <div class="col"> <a href="#"> Help Center </a> <a href="#"> Jobs </a> <a href="#"> Cookie Preferences </a> <a href="#"> Legal Notices </a> </div> <div class="col"> <a href="#"> Account </a> <a href="#"> Ways to Watch </a> <a href="#"> Corporate Information </a> <a href="#"> Only on Netflix </a> </div> <div class="col"> <a href="#"> Media Center </a> <a href="#"> Terms of Use </a> <a href="#"> Contact Us </a> </div> </div> <button class="language-btn"> English <img src="Images/down-icon.png" alt=""> </button> </div> </body> </html>
Second, make a CSS file called style.css and put the provided codes inside of it. Keep in mind that you must create a file with the “.css” extension. Put all the images in your folder.
CSS FILE
/* Created by Coding Pakistan www.codingpakistan.com */
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body{
background: black;
color: white;
}
.header{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(Images/header-image.png);
background-size: cover;
background-position: center;
padding: 10px 8%;
position: relative;
border-bottom: 6px solid #777;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
}
.logo{
width: 150px;
cursor: pointer;
}
nav button{
border: 0;
outline: 0;
background: #db0001;
color: white;
padding: 7px 20px;
font-size: 12px;
border-radius: 4px;
margin-left: 10px;
cursor: pointer;
}
.language-btn{
display: inline-flex;
align-items: center;
background: transparent;
border: 1px solid white;
padding: 7px 10px;
}
.language-btn img{
width: 10px;
margin-left: 10px;
}
.header-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
margin-top: 100px;
}
.header-content h1{
font-size: 60px;
line-height: 70px;
font-weight: 600;
max-width: 650px;
}
.header-content h3{
font-weight: 400;
margin-bottom: 20px;
}
.email-signup{
background: white;
border-radius: 4px;
display: flex;
align-items: center;
margin-top: 30px;
overflow: hidden;
}
.email-signup input{
flex: 1;
border: 0;
outline: 0;
margin-left: 20px;
}
.email-signup button{
background: #db0001;
border: 0;
outline: 0;
color: white;
font-size: 16px;
cursor: pointer;
padding: 15px 30px;
}
/*--------------- FEATURES ----------------------*/
.features{
padding: 50px 12%;
font-size: 22px;
}
.row{
display: flex;
width: 100%;
align-items: center;
flex-wrap: wrap;
padding: 50px 0;
}
.text-col{
flex-basis: 50%;
margin-bottom: 20px;
}
.img-col{
flex-basis: 50%;
margin-bottom: 20px;
}
.img-col img{
display: block;
width: 90%;
margin: auto;
}
.features h2{
font-size: 50px;
font-weight: 600;
margin-bottom: 20px;
}
/*----------------Frequently Ask Question------------------- */
.faq{
padding: 10px 12%;
text-align: center;
font-size: 18px;
border-top: 6px solid #777;
}
.faq h2{
font-weight: 500;
font-size: 40px;
}
.accordion{
margin: 60px auto;
width: 100%;
max-width: 750px;
}
.accordion li{
list-style: none;
width: 100%;
padding: 5px;
}
.accordion li label{
display: flex;
align-items: center;
padding: 20px;
font-size: 18px;
font-weight: 500;
background: #303030;
margin-bottom: 2px;
cursor: pointer;
position: relative;
}
label::after{
content: '+';
font-size: 34px;
position: absolute;
right: 20px;
transition: transfrom 0.5s;
}
input[type="radio"]{
display: none;
}
.accordion .content{
background: #303030;
text-align: left;
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s, padding 0.5s;
}
.accordion input[type="radio"]:checked + label + .content{
max-height: 600px;
padding: 30px 20px;
}
.accordion input[type="radio"]:checked + label::after{
transform: rotate(135deg);
}
.faq .email-signup{
max-width: 600px;
margin: 20px auto 60px;
}
.faq small{
font-size: 13px;
}
/*------------------- FOOTER STYLE ----------------- */
.footer{
padding: 50px 15% 10px;
border-top: 6px solid #333;
color: #777;
}
.footer h2{
font-size: 18px;
font-weight: 400;
margin-bottom: 30px;
}
.footer .col{
flex-basis: 25%;
flex-grow: 1;
margin-bottom: 20px;
}
.footer .col a{
display: block;
text-decoration: none;
color: #777;
font-size: 14px;
margin-bottom: 10px;
}
.footer .row{
align-items: flex-start;
padding: 10px 0;
}
.footer .language-btn{
color: white;
padding: 10px 20px;
border-radius: 3px;
}
/* ------------------ MEDIA QUERIES FOR SMALL SCREEN -------------------------- */
@media only screen and (max-width: 600px){
.logo{
width: 100px;
}
nav button{
padding: 5px 10px;
}
nav ,.language-btn{
padding: 4px 8px;
}
.header-content{
position: unset;
transform: none;
padding-top: 150px;
}
.header-content h1{
font-size: 30px;
}
.email-signup button{
font-size: 12px;
padding: 10px 15px;
}
.text-col, .img-col{
flex-basis: 100%;
}
.features h2{
font-size: 30px;
}
.features p{
font-size: 15px;
}
.row:nth-child(2), .row:nth-child(4){
flex-direction: column-reverse;
}
.features .row{
padding: 10px 0;
}
.faq h2{
font-size: 20px;
}
.accordion .content{
font-size: 14px;
}
.accordion li label{
padding: 10px;
font-size: 14px;
}
label::after{
font-size: 22px;
}
}
That’s all. Now you’ve successfully created a Netflix clone using HTML and CSS. If your code doesn’t work or you’ve encountered any errors or problems, then please download the source code files from the given download button. It’s free, and a zip file will be downloaded. Then you’ve got to extract it.
If you have any questions about this, ask them in the comment section, and I will answer as soon as possible. Thanks
