Netflix is a popular streaming service that provides a wide variety of TV shows, movies, documentaries, and original content to its subscribers. It was founded in 1997 by Reed Hastings and Marc Randolph and has since grown to become one of the largest and most well-known streaming platforms globally.
Creating a Netflix clone using HTML and CSS for learning purposes can be a great exercise in web development. Below is a simple example of HTML and CSS code that you can use as a starting point for a basic Netflix-like layout. Note that this is a simplified example, and a complete clone would involve more complex functionality and additional technologies like JavaScript for interactivity.
Download the images used in the source code from here : Download Images
Download the Logo from here : Netflix Logo
Follow this video for complete guidance :
https://www.youtube.com/watch?v=EneN2-Z_1Os&ab_channel=LetsTryThis%21
Complete Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Netflix Clone using HTML and CSS</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
<style>
body{
background-color: black;
}
header .brand-logo{
width:200px;
display: inline-block;
}
header .menu{
display: inline-block;
}
header ul li{
display: inline-block;
margin-right: 10px;
}
header ul li a{
color:#fff;
text-decoration: none;
}
.font-light{
color:#fff;
}
section{
margin-top:50px;
margin-bottom: 50px;
}
section h2{
font-size:22px;
font-weight: bold;
margin-bottom:20px;
margin-top:20px;
}
figure{
height:100px;
overflow: hidden;
}
figure img{
cursor: pointer;
transition: transform .5s cubic-bezier(.455,.03,.515,.955),-webkit-transform .5s cubic-bezier(.455,.03,.515,.955);
}
figure img:hover{
transform:scale(1.4);
}
footer{
margin-top: 60px;
}
footer ul li a{
color:#999;
text-decoration: none;
}
footer ul li{
margin-bottom: 20px;
list-style: none;
}
.copyright{
color:#aaa;
}
</style>
</head>
<body>
<div class="container">
<header class="py-4">
<div class="brand-logo">
<img src="logo.png">
</div>
<div class="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">TV Shows</a></li>
<li><a href="">Movies</a></li>
<li><a href="">Originals</a></li>
<li><a href="">Recently Added</a></li>
</ul>
</div>
<div class="float-end font-light">
<div class="d-inline-block me-3">
<i class="fa fa-search"></i>
</div>
<div class="d-inline-block me-3">
<i class="fa-solid fa-bell"></i>
</div>
<div class="d-inline-block">
<span>Account</span>
</div>
</div>
</header>
<section>
<h2 class="font-light">Popular on Netflix</h2>
<div class="row">
<?php for($i=1;$i<13;$i++){?>
<div class="col-lg-2">
<figure>
<img class="w-100" src="images/p<?php echo $i;?>.png">
</figure>
</div>
<?php } ?>
</div>
</section>
<section>
<h2 class="font-light">Trending Now</h2>
<div class="row">
<?php for($i=1;$i<7;$i++){?>
<div class="col-lg-2">
<figure>
<img class="w-100" src="images/t<?php echo $i;?>.png">
</figure>
</div>
<?php } ?>
</div>
</section>
<section>
<h2 class="font-light">TV Shows</h2>
<div class="row">
<?php for($i=1;$i<13;$i++){?>
<div class="col-lg-2">
<figure>
<img class="w-100" src="images/tv<?php echo $i;?>.png">
</figure>
</div>
<?php } ?>
</div>
</section>
<section>
<h2 class="font-light">Movies</h2>
<div class="row">
<?php for($i=1;$i<7;$i++){?>
<div class="col-lg-2">
<figure>
<img class="w-100" src="images/m<?php echo $i;?>.png">
</figure>
</div>
<?php } ?>
</div>
</section>
<section>
<h2 class="font-light">Netflix Originals</h2>
<div class="row">
<?php for($i=1;$i<7;$i++){?>
<div class="col-lg-2">
<figure>
<img class="w-100" src="images/o<?php echo $i;?>.png">
</figure>
</div>
<?php } ?>
</div>
</section>
<footer>
<div class="row">
<div class="col-lg-3">
<ul>
<li><a href="">Audio and Subtitles</a></li>
<li><a href="">Media Center</a></li>
<li><a href="">Privacy</a></li>
</ul>
</div>
<div class="col-lg-3">
<ul>
<li><a href="">Audio Description</a></li>
<li><a href="">Investor Relations</a></li>
<li><a href="">Legal Notices</a></li>
</ul>
</div>
<div class="col-lg-3">
<ul>
<li><a href="">Help Center</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Corporate Information</a></li>
</ul>
</div>
<div class="col-lg-3">
<ul>
<li><a href="">Gift Cards</a></li>
<li><a href="">Terms of Use</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</div>
<div class="text-center py-4 copyright">Netflix 2023</div>
</footer>
</div>
</body>
</html>
