Netflix Clone Using HTML,CSS and JavaScritp

Netflix Clone Using HTML,CSS and JavaScritp (Source Code)

Netflix Clone Using HTML, CSS, and JavaScript 

Hello Coder, Welcome to Codewithrandom Blog. Today we are going to Create Netflix Clone Using HTML, CSS, and JavaScript with Source Code. We created a Complete Netflix clone to know about the working process of the online platform developed using Coding. Also, we can add movie names, cast actors, a description of the movie, etc.

Netflix Clone Using HTML and CSSNetflix Clone Using HTML and CSS

 

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.

Before we start with our unique frontend projects, let’s understand some of the basic concepts of a clone website, what a clone website is, and the need for working on clone website projects.

What is a Clone Website?

A clone website is a replica of the original website, which looks exactly the same as the clone website. In a clone website, the user can perform all the tasks that an original website provides. These types of projects are helpful for developers to understand the styling concepts and what tools and technologies have been used for creating a clone website.

What is the need for creating clone websites?

Creating a clone website is the most demanding and popular clone website project in which the user gets real-world hands-on experience with the tools and technologies that have been used in the website creation. This type of project also helps in gaining real-world experience on big projects and helps in enhancing skills.

Create a Spotify Clone Project Using HTML and CSS (Source Code)

Preview of Netflix Clone Using Html and Css:-

 

Code byBrad Traversy
Project DownloadLink Available Below
Language usedHTML,CSS, and JavaScript
External link / DependenciesYes
ResponsiveYes
Netflix Clone Table

The complete code for the project is given below.

50+ HTML, CSS & JavaScript Projects With Source Code

Netflix Clone Html Code:-

<header class="showcase">
      <div class="showcase-top">
        <img src="https://i.ibb.co/r5krrdz/logo.png" alt="" />
        <a href="#" class="btn btn-rounded">Sign In</a>
      </div>
      <div class="showcase-content">
        <h1>See what's next</h1>
        <p>Watch anywhere. Cancel Anytime</p>
        <a href="#" class="btn btn-xl"
          >Watch Free For 30 Days <i class="fas fa-chevron-right btn-icon"></i
        ></a>
      </div>
    </header>
    <section class="tabs">
      <div class="container">
        <div id="tab-1" class="tab-item tab-border">
          <i class="fas fa-door-open fa-3x"></i>
          <p class="hide-sm">Cancel at any time</p>
        </div>
        <div id="tab-2" class="tab-item">
          <i class="fas fa-tablet-alt fa-3x"></i>
          <p class="hide-sm">Watch anywhere</p>
        </div>
        <div id="tab-3" class="tab-item">
          <i class="fas fa-tags fa-3x"></i>
          <p class="hide-sm">Pick your price</p>
        </div>
      </div>
    </section>

    <section class="tab-content">
      <div class="container">
        <!-- Tab Content 1 -->
        <div id="tab-1-content" class="tab-content-item show">
          <div class="tab-1-content-inner">
            <div>
              <p class="text-lg">
                If you decide Netflix isn't for you - no problem. No commitment.
                Cancel online anytime.
              </p>
              <a href="#" class="btn btn-lg">Watch Free For 30 Days</a>
            </div>
            <img src="https://i.ibb.co/J2xDJV7/tab-content-1.png" alt="" />
          </div>
        </div>

        <!-- Tab Content 2 -->
        <div id="tab-2-content" class="tab-content-item">
          <div class="tab-2-content-top">
            <p class="text-lg">
              Watch TV shows and movies anytime, anywhere — personalized for
              you.
            </p>
            <a href="#" class="btn btn-lg">Watch Free For 30 Days</a>
          </div>
          <div class="tab-2-content-bottom">
            <div>
              <img src="https://i.ibb.co/DpdN7Gn/tab-content-2-1.png" alt="" />
              <p class="text-md">
                Watch on your TV
              </p>
              <p class="text-dark">
                Smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray
                players and more.
              </p>
            </div>
            <div>
              <img src="https://i.ibb.co/R3r1SPX/tab-content-2-2.png" alt="" />
              <p class="text-md">
                Watch instantly or download for later
              </p>
              <p class="text-dark">
                Available on phone and tablet, wherever you go.
              </p>
            </div>
            <div>
              <img src="https://i.ibb.co/gDhnwWn/tab-content-2-3.png" alt="" />
              <p class="text-md">
                Use any computer
              </p>
              <p class="text-dark">
                Watch right on Netflix.com.
              </p>
            </div>
          </div>
        </div>

        <!-- Tab Content 3 -->
        <div id="tab-3-content" class="tab-content-item">
          <div class="text-center">
            <p class="text-lg">
              Choose one plan and watch everything on Netflix.
            </p>
            <a href="#" class="btn btn-lg">Watch Free For 30 Days</a>
          </div>

          <table class="table">
            <thead>
              <tr>
                <th></th>
                <th>Basic</th>
                <th>Standard</th>
                <th>Premium</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Monthly price after free month ends on 6/19/19</td>
                <td>$8.99</td>
                <td>$12.99</td>
                <td>$15.99</td>
              </tr>
              <tr>
                <td>HD Available</td>
                <td><i class="fas fa-times"></i></td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
              </tr>
              <tr>
                <td>Ultra HD Available</td>
                <td><i class="fas fa-times"></i></td>
                <td><i class="fas fa-times"></i></td>
                <td><i class="fas fa-check"></i></td>
              </tr>
              <tr>
                <td>Screens you can watch on at the same time</td>
                <td>1</td>
                <td>2</td>
                <td>4</td>
              </tr>
              <tr>
                <td>Watch on your laptop, TV, phone and tablet</td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
              </tr>
              <tr>
                <td>Unlimited movies and TV shows</td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
              </tr>
              <tr>
                <td>Cancel anytime</td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
              </tr>
              <tr>
                <td>First month free</td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>

    <footer class="footer">
      <p>Questions? Call 1-866-579-7172</p>
      <div class="footer-cols">
        <ul>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">Investor Relations</a></li>
          <li><a href="#">Ways To Watch</a></li>
          <li><a href="#">Corporate Information</a></li>
          <li><a href="#">Netflix Originals</a></li>
        </ul>
        <ul>
          <li><a href="#">Help Center</a></li>
          <li><a href="#">Jobs</a></li>
          <li><a href="#">Terms Of Use</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
        <ul>
          <li><a href="#">Account</a></li>
          <li><a href="#">Redeem Gift Cards</a></li>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Speed Test</a></li>
        </ul>
        <ul>
          <li><a href="#">Media Center</a></li>
          <li><a href="#">Buy Gift Cards</a></li>
          <li><a href="#">Cookie Preferences</a></li>
          <li><a href="#">Legal Notices</a></li>
        </ul>
      </div>

    </footer>

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.

ADVERTISEMENT

ADVERTISEMENT

Build a Quiz App With HTML ,CSS and JavaScript

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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.

HTML Output:

HTML Output

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.

Restaurant Website Using HTML and CSS

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.

CSS Output:

Netflix Clone Using HTML and CSS

Facebook Clone Website Using HTML & CSS With Source Code

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);
});


Resources

5+ HTML CSS Projects With Source Code

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.

[su_button id=”download” url=”https://drive.google.com/drive/folders/1-6-K3BoczLg89CynQPBLtXUkHT06EWYO?usp=sharing” target=”blank” style=”3d” size=”11″ wide=”yes” center=”yes” icon=”icon: download”]DOWNLOAD NOW[/su_button]

 Final Output Of Netflix Clone Source Code:-


Netflix Clone Using HTML,CSS and JavaScritp

Final video Output of Netflix Clone:

 

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.

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

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

FAQ For Netflix Clone Source Code

Which code editor do you use for this Netflix Clone coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

What is a Clone Website?

A clone website is a replica of the original website, which looks exactly the same as the clone website. In a clone website, the user can perform all the tasks that an original website provides. These types of projects are helpful for developers to understand the styling concepts and what tools and technologies have been used for creating a clone website.

What is the need for creating clone websites?

Creating a clone website is the most demanding and popular clone website project in which the user gets real-world hands-on experience with the tools and technologies that have been used in the website creation. This type of project also helps in gaining real-world experience on big projects and helps in enhancing skills.



Leave a Reply