Hello Coder! Welcome to Codewithrandom Blog. Today we are going to Create Netflix Clone Using HTML, CSS, and JavaScript with Source Code. We create a Complete Netflix clone to knowing about the working process of the online platform developed using Codng. Also, we can add movie names, cast actors, a description of the movie, etc.
Behalf of Landing pages is one of the good practices to get a practical experience of responsive design and the most popular OTT Netflix Clone landing page is created in this project.
The complete code for the project is given below.
Netflix Html Code:-
If you decide Netflix isn't for you - no problem. No commitment.
Cancel online anytime.
Watch Free For 30 Days
Watch TV shows and movies anytime, anywhere — personalized for
you.
Watch Free For 30 Days
Watch on your TV
Smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray
players and more.
Watch instantly or download for later
Available on phone and tablet, wherever you go.
Use any computer
Watch right on Netflix.com.
Choose one plan and watch everything on Netflix.
Watch Free For 30 Days
Basic
Standard
Premium
Monthly price after free month ends on 6/19/19
$8.99
$12.99
$15.99
HD Available
Ultra HD Available
Screens you can watch on at the same time
1
2
4
Watch on your laptop, TV, phone and tablet
Unlimited movies and TV shows
Cancel anytime
First month free
Now we have inserted the basic HTML code for the Netflix clone project. Then we inserted several div tags along with various links to perform navigation on several pages.
Secondly, we added images, icons, and a lot more stuff to bring the exact clone of the popular online platform website Netflix.
Also, we have engaged with grid cards to bring the plan option and certain social media icons for sharing options, then links for pages, download options for movies, device support frames, and a lot more.
So use the code mentioned above for this project and that’s for HTML code.
Now it’s time to design our project so it would look as same as the official Netflix web page.
CSS Code For Netflix Clone:
/* Global Styles */
:root {
--primary-color: #e50914;
--dark-color: #141414;
--light-color: #f4f4f4;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
-webkit-font-smoothing: antialiased;
background: #000;
color: #999;
}
ul {
list-style: none;
}
h1,
h2,
h3,
h4 {
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
p {
margin: 0.5rem 0;
}
img {
width: 100%;
}
.showcase {
width: 100%;
height: 93vh;
position: relative;
background: url('https://i.ibb.co/vXqDmnh/background.jpg') no-repeat center center/cover;
}
.showcase::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
box-shadow: inset 120px 100px 250px #000000, inset -120px -100px 250px #000000;
}
.showcase-top {
position: relative;
z-index: 2;
height: 90px;
}
.showcase-top img {
width: 170px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: 0;
}
.showcase-top a {
position: absolute;
top: 50%;
right: 0;
transform: translate(-50%, -50%);
}
.showcase-content {
position: relative;
z-index: 2;
width: 65%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 9rem;
}
.showcase-content h1 {
font-weight: 700;
font-size: 5.2rem;
line-height: 1.1;
margin: 0 0 2rem;
}
.showcase-content p {
text-transform: uppercase;
color: #fff;
font-weight: 400;
font-size: 1.9rem;
line-height: 1.25;
margin: 0 0 2rem;
}
/* Tabs */
.tabs {
background: var(--dark-color);
padding-top: 1rem;
border-bottom: 3px solid #3d3d3d;
border-right: none;
}
.tabs .container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
align-items: center;
justify-content: center;
text-align: center;
}
.tabs p {
font-size: 1.2rem;
padding-top: 0.5rem;
}
.tabs .container > div {
padding: 1.5rem 0;
}
.tabs .container > div:hover {
color: #fff;
cursor: pointer;
}
.tab-border {
border-bottom: var(--primary-color) 4px solid;
}
/* Tab Content */
.tab-content {
padding: 3rem 0;
background: #000;
color: #fff;
}
/* Hide initial content */
#tab-1-content,
#tab-2-content,
#tab-3-content {
display: none;
opacity: 0;
}
.show {
display: block !important;
opacity: 1 !important;
transition: all 1000 ease-in;
}
#tab-1-content .tab-1-content-inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2rem;
align-items: center;
justify-content: center;
}
#tab-2-content .tab-2-content-top {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 1rem;
justify-content: center;
align-items: center;
}
#tab-2-content .tab-2-content-bottom {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 2rem;
text-align: center;
}
.table {
width: 100%;
margin-top: 2rem;
border-collapse: collapse;
border-spacing: 0;
}
.table thead th {
text-transform: uppercase;
padding: 0.8rem;
}
.table tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
.table tbody tr td {
color: #999;
padding: 0.8rem 1.2rem;
text-align: center;
}
.table tbody tr td:first-child {
text-align: left;
}
.table tbody tr:nth-child(odd) {
background: #222;
}
.footer {
max-width: 70%;
margin: 1rem auto;
overflow: auto;
}
.footer,
.footer a {
color: #999;
font-size: 0.9rem;
}
.footer p {
margin-bottom: 1.5rem;
}
.footer .footer-cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2rem;
}
.footer li {
line-height: 1.9;
}
.footer .lang-select {
margin-top: 2rem;
color: #999;
background-color: #000;
background-image: none;
border: 1px solid #333;
padding: 1rem 1.2rem;
border-radius: 5px;
}
/* Container */
.container {
max-width: 70%;
margin: auto;
overflow: hidden;
padding: 0 2rem;
}
/* Text Styles */
.text-xl {
font-size: 2rem;
}
.text-lg {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.text-md {
margin-bottom: 1.5rem;
font-size: 1.2rem;
}
.text-center {
text-align: center;
}
.text-dark {
color: #999;
}
/* Buttons */
.btn {
display: inline-block;
background: var(--primary-color);
color: #fff;
padding: 0.4rem 1.3rem;
font-size: 1rem;
text-align: center;
border: none;
cursor: pointer;
margin-right: 0.5rem;
transition: opacity 0.2s ease-in;
outline: none;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
border-radius: 2px;
}
.btn:hover {
opacity: 0.9;
}
.btn-rounded {
border-radius: 5px;
}
.btn-xl {
font-size: 2rem;
padding: 1.5rem 2.1rem;
text-transform: uppercase;
}
.btn-lg {
font-size: 1rem;
padding: 0.8rem 1.3rem;
text-transform: uppercase;
}
.btn-icon {
margin-left: 1rem;
}
@media (max-width: 960px) {
.showcase {
height: 70vh;
}
.hide-sm {
display: none;
}
.showcase-top img {
top: 30%;
left: 5%;
transform: translate(0);
}
.showcase-content h1 {
font-size: 3.7rem;
line-height: 1;
}
.showcase-content p {
font-size: 1.5rem;
}
.footer .footer-cols {
grid-template-columns: repeat(2, 1fr);
}
.btn-xl {
font-size: 1.5rem;
padding: 1.4rem 2rem;
text-transform: uppercase;
}
.text-xl {
font-size: 1.5rem;
}
.text-lg {
font-size: 1.3rem;
margin-bottom: 1rem;
}
.text-md {
margin-bottom: 1rem;
font-size: 1.2rem;
}
}
@media (max-width: 700px) {
.showcase::after {
background: rgba(0, 0, 0, 0.6);
box-shadow: inset 80px 80px 150px #000000, inset -80px -80px 150px #000000;
}
.showcase-content h1 {
font-size: 2.5rem;
line-height: 1;
}
.showcase-content p {
font-size: 1rem;
}
#tab-1-content .tab-1-content-inner {
grid-template-columns: 1fr;
text-align: center;
}
#tab-2-content .tab-2-content-top {
display: block;
text-align: center;
}
#tab-2-content .tab-2-content-bottom {
margin-top: 2rem;
display: grid;
grid-template-columns: 1fr;
grid-gap: 2rem;
text-align: center;
}
As apart from HTML, it’s time to perform CSS to engage the attractiveness and use responsiveness of a web page. Here we are styling every element with a specific font family, size, color, etc.. to make it look better for users.
Also, we have used form pages for new users and existing users to log in or create accounts on Netflix. it is also styled with responsiveness, hover effect, and focus which enlightens the new experiences of the O-T-T platform.
Some of the grid properties were used to make the card options work for every device without any collapse and moreover the media queries were also included for better responsiveness.
So that’s for now… The CSS Is also completed, but the last one is there which is javascript to enable the performance for specific elements in a website like input validation, cross-platform, etc.
The javascript code for the project is down below..!!
JavaScript Code For Netflix Clone:
const tabItems = document.querySelectorAll('.tab-item');
const tabContentItems = document.querySelectorAll('.tab-content-item');
// Select tab content item
function selectItem(e) {
// Remove all show and border classes
removeBorder();
removeShow();
// Add border to current tab item
this.classList.add('tab-border');
// Grab content item from DOM
const tabContentItem = document.querySelector(`#${this.id}-content`);
// Add show class
tabContentItem.classList.add('show');
}
// Remove bottom borders from all tab items
function removeBorder() {
tabItems.forEach(item => {
item.classList.remove('tab-border');
});
}
// Remove show class from all content items
function removeShow() {
tabContentItems.forEach(item => {
item.classList.remove('show');
});
}
// Listen for tab item click
tabItems.forEach(item => {
item.addEventListener('click', selectItem);
});
Here is a JavaScript code for the project, In this code, we specifically included various actions on button clicks, menu bars, sign-in pages, and lot.
Mostly displaying the recently released movies should be shown when we click to download so for that specific function the above code is used. we also included select item property which is used in addition, to removing and deleting properties of the web page.
selection and border color formats were used to enhance the card properties to perform actions before and after clicking. so I hope you got the idea of how javascript is used, finally, now we can view the output for the specific project.
Hope you like this project, so it is now your turn to work on this project the codes for references are given above which you can use it for developing your project.
Furthermore, if you have any queries and need for various projects then you can contact codewithrandom Instagram page regarding your clarifications.
This project is based on cloning of some popular O-T-T Platforms for movies and series, so with the help of this project you can create your own O-T-T platform, and the clear output image for this project is mentioned above.
STAY TUNED !!
REFER CODE – Brad Traversy
WRITTEN BY – RAGUNATHAN S
