NETFLIX Clone using HTML CSS & JavaScript
Introduction :
The Netflix clone project is a web application developed using HTML, CSS, and JavaScript, aiming to replicate the user interface and some features of the popular streaming service, Netflix. Let’s break down the project into its key components and functionalities. This project is implemented using a combination of three fundamental web technologies: HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript. Each of these technologies plays a crucial role in defining the structure, styling, and interactivity of the web application. To enhance user interaction, the JavaScript file introduces dynamic elements to the project. A key feature is the implementation of accordions within the FAQ section. Each FAQ title functions as a toggle switch, expanding or collapsing the corresponding answer upon user click. Furthermore, a visual indicator in the form of an icon dynamically changes between a plus and a times symbol to signify the current state of each accordion. This JavaScript functionality adds a layer of user engagement and interactivity to the project. In essence, the Netflix Clone project encapsulates the convergence of HTML, CSS, and JavaScript to create a compelling and responsive user interface. It successfully emulates the design philosophy and some interactive elements of Netflix, providing users with a familiar yet distinct experience. This endeavor showcases the capabilities of web technologies in recreating sophisticated interfaces and underscores the importance of a well-structured, styled, and interactive web presence.
Explanation :
HTML Structure:
The HTML file defines the structure of the web page, including the header, main content sections, and footer. Notable elements include:
- Header: Contains the Netflix logo, language dropdown, and a “Sign in” button.
- Main Sections: Divided into a hero section, features section, frequently asked questions (FAQ) section, and a “Get Started” email section.
- Footer: Comprising multiple rows with links and information, including a language dropdown and Netflix India details.
CSS Styling:
The CSS file is responsible for styling the HTML elements, providing a visually appealing and responsive layout. Some key styling aspects include:
- Global Styling: Resets default margin and padding, sets the background color, and defines the font family.
- Navbar Styling: Ensures the navigation bar is positioned at the top, styled the logo, language dropdown, and “Sign in” button.
- Hero Section Styling: Creates an overlay on the hero background image, styles the hero card with the title, subtitle, and email form.
- Feature Section Styling: Styles individual feature cards with details and images, including the background videos and GIFs.
- FAQ Section Styling: Styles FAQ accordions, making them visually appealing and ensuring smooth transitions.
JavaScript Interactivity:
The JavaScript file adds interactivity to the project, particularly to the FAQ section. Key JavaScript functionalities include:
- Accordions: Enables the toggle functionality for FAQ accordions. Clicking on a question expands or collapses the corresponding answer, and the icon changes between a plus and a times symbol accordingly.
- Event Listeners: Attaches click event listeners to each FAQ title, triggering the accordion functionality.
Project Responsiveness:
The project incorporates media queries to ensure responsiveness across different screen sizes. Notable breakpoints include adjustments for larger screens, such as tablets and desktops, to enhance the user experience.
SOURCE CODE :
HTML (index.html)
Netflix India - Watch TV Shows Online, Watch Movies Online
Unlimited Movies TV,
Shows and More.
Watch anywhere and cancel anytime.
Ready to watch? Enter your email to create or restart your
membership .
Enjoy on your TV.
Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV,
Blu-ray players and more.
Download your shows to watch offline.
Save your favourites easily and always have something to watch.
Stranger Things
Downloading...
Watch everywhere.
Stream unlimited movies and TV shows on your phone, tablet,
laptop, and TV.
Create profiles for children.
Send children on adventures with their favourite characters in a
space made just for them—free with your membership.
Frequently Asked Questions
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 ad – all for one low monthly price. There's always
something new to discover, and new TV shows and movies are added
every week!
Watch Netflix on your smartphone, tablet, Smart TV, laptop, or
streaming device, all for one fixed monthly fee. Plans range
from ₹ 199 to ₹ 799 a month. No extra costs, no contracts.
Watch anywhere, anytime, on an unlimited number of devices. Sign
in with your Netflix account to watch instantly on the web at
netflix.com from your personal computer or on any
internet-connected device that offers the Netflix app, including
smart TVs, smartphones, tablets, streaming media players and
game consoles.
You can also download your favourite shows with the iOS,
Android, or Windows 10 app. Use downloads to watch while you're
on the go and without an internet connection. Take Netflix with
you anywhere.
Netflix is flexible. There are no annoying contracts and no
commitments. You can easily cancel your account online in two
clicks. There are no cancellation fees – start or stop your
account anytime.
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.
The Netflix Kids experience is included in your membership to
give parents control while kids enjoy family-friendly TV shows
and films in their own space.
Kids profiles come with PIN-protected parental controls that let
you restrict the maturity rating of content kids can watch and
block specific titles you don’t want kids to see.
Ready to watch? Enter your email to create or restart your
membership.
CSS (style.css)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
color: white;
font-family: "Poppins", sans-serif;
}
.navbar {
position: absolute;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
padding: 3% 5%;
z-index: 10;
}
.navbar__brand {
width: 100px;
height: 100%;
}
.brand__logo {
width: 100%;
height: 100%;
}
.language__drop__down {
background: transparent;
border: none;
color: white;
}
.language__drop__down:focus {
outline: none;
}
.language__drop__down option {
background-color: black;
}
.dropdown__container {
border: 1px solid white;
padding: 0.4rem;
border-radius: 4px;
background: rgba(0, 0, 0, 0.4);
}
.signin__button {
background-color: #dc030f;
border: 1px solid #dc030f;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.navbar__nav__items {
display: flex;
gap: 10px;
}
.hero__bg__image__container {
width: 100%;
height: 80vh;
}
.hero__bg__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__bg__overlay {
position: absolute;
inset: 0;
width: 100%;
height: 80vh;
background: rgba(0, 0, 0, 0.4);
background-image: linear-gradient(to top,
rgba(0, 0, 0, 0.8) 0,
rgba(0, 0, 0, 0) 60%,
rgba(0, 0, 0, 0.8) 100%);
}
.hero__card {
position: absolute;
top: 20%;
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
}
.hero__title {
font-weight: 600;
font-size: 2rem;
}
.hero__subtitle,
.hero__description {
font-weight: 400;
font-size: 1rem;
}
.hero__description {
margin: 0 50px;
}
.email__input {
border: none;
background: transparent;
width: 100%;
height: 100%;
padding-left: 7px;
}
.email__label {
color: black;
position: absolute;
top: 28%;
left: 2%;
color: rgb(153, 149, 149);
transition: 0.5s;
}
.email__form__container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15px;
}
.form__container {
background-color: white;
width: 90%;
height: 50px;
position: relative;
}
.email__input:focus+.email__label {
top: 0.2rem;
font-size: 10px;
}
.email__input:not(:placeholder-shown).email__input:not(:focus)+.email__label {
top: 0.2rem;
font-size: 10px;
}
.email__input:focus-visible {
outline: none;
}
.primary__button {
background-color: #dc030f;
border: 1px solid #dc030f;
color: white;
padding: 0.8rem 1.2rem;
border-radius: 2px;
font-size: 15px;
letter-spacing: 1px;
}
.feature {
border-top: 8px solid #222;
padding: 2rem 1rem;
}
.feature__details {
text-align: center;
}
.feature__title {
font-size: 25px;
font-weight: 600;
margin: 10px 0;
}
.feature__sub__title {
font-size: 15px;
font-weight: 400;
}
.feature__image__container {
width: 100%;
position: relative;
}
.feature__image {
width: 100%;
}
.feature__backgroud__video__container {
position: absolute;
width: 100%;
top: 20%;
left: 13%;
height: 100%;
max-width: 73%;
max-height: 54%;
z-index: -2;
}
.feature__backgroud__video {
width: 100%;
}
.feature__2__poster__container {
position: absolute;
bottom: 8%;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 16em;
display: flex;
align-items: center;
background-color: black;
border: 2px solid rgba(255, 255, 255, 0.25);
border-radius: 10px;
height: 60px;
padding: 0.25rem 0.6rem;
gap: 15px;
}
.poster__container {
width: 20%;
}
.poster {
width: 100%;
height: 100%;
}
.poster__details {
width: 60%;
}
.poster__details>h4 {
font-size: 13px;
font-weight: 500;
}
.poster__details>h6 {
font-size: 12px;
font-weight: 400;
color: rgb(63, 63, 246);
}
.download__gif__container {
width: 20%;
height: 100%;
}
.gif {
width: 100%;
height: 100%;
}
.feature__3__backgroud__video__container {
max-width: 63%;
max-height: 47%;
z-index: -2;
top: 9%;
left: 19%;
}
.FAQ__accordian {
width: 100%;
}
.FAQ__title {
width: 100%;
display: flex;
justify-content: space-between;
padding: 15px 20px;
font-size: 18px;
background-color: #303030;
border: 1px solid #303030;
color: white;
}
.FAQ__visible {
background-color: #303030;
border-top: 1px solid black;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out;
}
.FAQ__visible>p {
margin: 1rem;
}
.FAQ__list__container {
border-top: 8px solid #222;
padding: 2rem 0;
}
.FAQ__heading {
font-size: 20px;
text-align: center;
font-weight: 600;
margin: 1rem 3rem;
}
.FAQ__list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}
.FAQ__get__started__email {
text-align: center;
}
.FAQ__get__started__email>h3 {
font-size: 18px;
font-weight: 400;
margin: 2rem 0;
}
footer {
border-top: 8px solid #333;
padding: 2rem 1rem;
color: #757575;
display: flex;
flex-direction: column;
gap: 20px;
}
.footer__row__2 {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 20px;
}
.footer__row__1>h4 {
font-size: 15px;
font-weight: 500;
}
.footer__row__3>.dropdown__container {
width: fit-content;
border: 1px solid #757575;
color: #757575;
}
.footer__row__3>.dropdown__container>.language__drop__down {
color: #757575;
}
@media (min-width: 768px) {
.hero__bg__image__container {
height: 100vh;
}
.hero__bg__overlay {
height: 100vh;
}
.hero__card {
top: 40%;
left: 30%;
transform: translate(-20%, -20%);
}
.hero__title {
font-size: 3rem;
}
.hero__subtitle,
.hero__description {
font-size: 1.3rem;
}
.feature {
padding: 4rem;
}
.feature__title {
font-size: 35px;
}
.feature__sub__title {
font-size: 20px;
}
.feature__2__poster__container {
max-width: 26em;
height: 85px;
}
.poster__container {
width: 15%;
}
.download__gif__container {
width: 3rem;
height: 3rem;
}
.poster__details>h4 {
font-size: 18px;
}
.poster__details>h6 {
font-size: 14px;
}
.FAQ__title {
font-size: 20px;
}
.FAQ__heading {
font-size: 38px;
font-weight: 500;
letter-spacing: 1px;
}
.FAQ__list {
padding: 1rem 5rem;
}
.FAQ__get__started__email {
width: 75%;
display: flex;
flex-direction: column;
justify-content: center;
transform: translateX(15%);
}
}
@media (min-width: 1024px) {
.navbar {
padding: 2% 5%;
}
.navbar__brand {
width: 150px;
}
.signin__button {
padding: 10px 20px;
font-size: 18px;
}
.dropdown__container {
padding: 10px 5px;
}
.navbar__nav__items {
gap: 30px;
}
.hero__card {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.form__container {
width: 50%;
}
.email__form__container {
flex-direction: row;
align-items: center;
gap: 1px;
}
.primary__button {
height: 50px;
}
.feature {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.feature__details {
text-align: left;
padding: 0 6rem;
}
.feature__title {
font-size: 50px;
}
.feature__sub__title {
font-size: 25px;
}
.feature__image__container {
max-width: 500px;
}
.feature:nth-child(even) {
flex-direction: row-reverse;
}
.feature__2__poster__container {
max-width: 20em;
height: 100px;
padding: 1rem;
}
.poster__container {
width: 20%;
}
.FAQ__list {
padding: 1rem 25rem;
}
.FAQ__get__started__email {
transform: translateX(16%);
}
footer {
padding: 2rem 20rem;
justify-content: flex-start;
text-align: left;
align-items: flex-start;
}
.footer__row__2 {
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
}
.footer__row__1,
.footer__row__3,
.footer__row__4 {
align-self: flex-start;
}
}
@media (min-width: 1254px) {}
JavaScript (index.js)
let accordian = document.getElementsByClassName("FAQ__title");
for (let i = 0; i < accordian.length; i++) {
accordian[i].addEventListener("click", function () {
if (this.childNodes[1].classList.contains("fa-plus")) {
this.childNodes[1].classList.remove("fa-plus");
this.childNodes[1].classList.add("fa-times");
} else {
this.childNodes[1].classList.remove("fa-times");
this.childNodes[1].classList.add("fa-plus");
}
let content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
Conclusion :
In essence, the Netflix Clone project encapsulates the convergence of HTML, CSS, and JavaScript to create a compelling and responsive user interface. It successfully emulates the design philosophy and some interactive elements of Netflix, providing users with a familiar yet distinct experience. This endeavor showcases the capabilities of web technologies in recreating sophisticated interfaces and underscores the importance of a well-structured, styled, and interactive web presence.
OUTPUT :
More HTML CSS JS Projects
Get Huge Discounts
Get Discount on Top EdTech Compnies
Find More Projects
Jungle Dash Game Using Python with source code with pygame module Introduction: Dive into the excitement of jungle adventures with our new …
Building a Tetris Game with Python with source code Introduction: Welcome to the world of Tetris, where falling blocks meet strategic maneuvers …
Super Mario Game Using Python with source code Introduction: Remember playing Super Mario as a kid? It’s that classic game where you …
library management system using python with source code using Python GUI Tkinter (Graphical User Interface) How to Run the code: Introduction: Imagine …
Space Shooter Game Using Python with source code Overview: A space shooter game typically involves controlling a spaceship to navigate through space …
Hotel Management System Using Python with source code Introduction: Welcome to our blog post introducing a helpful tool for hotels: the Tkinter-based …