Scribd
Upload
28 views

Netflixclone

The document is an HTML file for a Netflix clone project. It includes sections for the navigation bar, banner, Netflix Originals, Trending Now, Top Rated, and various movie genres. Each section displays poster images for movies and TV shows. The file also links to an external CSS file that defines styles for the elements like colors, sizing and positioning of images.

Uploaded by

Zara
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views

Netflixclone

The document is an HTML file for a Netflix clone project. It includes sections for the navigation bar, banner, Netflix Originals, Trending Now, Top Rated, and various movie genres. Each section displays poster images for movies and TV shows. The file also links to an external CSS file that defines styles for the elements like colors, sizing and positioning of images.

Uploaded by

Zara
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

 

 
 
 

Department of Computer Engineering


 
Academic Session: 2022

Assignment :
Netflix Clone

Submitted to:

 Sir Sheheryar Khan

Submitted by:

 Zara Khan
 22-CP-Omega

Subject Details:

 Computing Fundamentals (Lab)


 
 
Dated: 9-11-2022
Netflix Clone.Html

<!DOCTYPE html>
<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</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- nav -->
    <div id="nav" class="nav">
      <img class="nav__logo" src="C:\Users\DELL\Desktop\netfliximages\netflix-logo.png"
alt="" />
      <img class="nav__avatar" src="C:\Users\DELL\Desktop\netfliximages\netflix-avatar.png"
alt="" />
    </div>

    <!-- header -->


    <header class="banner">
      <div class="banner__contents">
        <h1 class="banner__title">Money Heist</h1>
        <div class="banner__buttons">
          <button class="banner__button">Play</button>
          <button class="banner__button">My List</button>
        </div>
        <h1 class="banner__description">
          To carry out the biggest heist in history, a mysterious man called The Professor
recruits
          a band of eight robbers who have a single characteristic: n...
        </h1>
      </div>
      <div class="banner--fadeBottom"></div>
    </header>

    <!-- Netflix Originals -->


    <div class="row">
      <h2>NETFLIX ORIGINALS</h2>
      <div class="row__posters">
        <img class="row__poster row__posterLarge" src="large-movie1.jpg" alt="" />

        <img class="row__poster row__posterLarge" src="large-movie2.jpg" alt="" />


        <img class="row__poster row__posterLarge" src="large-movie3.jpg" alt="" />

        <img class="row__poster row__posterLarge" src="large-movie4.jpg" alt="" />

        <img class="row__poster row__posterLarge" src="large-movie5.jpg" alt="" />

        <img class="row__poster row__posterLarge" src="large-movie6.jpg" alt="" />

        <img class="row__poster row__posterLarge" src="large-movie7.jpg" alt="" />

        <img class="row__poster row__posterLarge" src="large-movie8.jpg" alt="" />


      </div>
    </div>
     <!-- Trending Now -->
     <div class="row">
        <h2>Trending Now</h2>
        <div class="row__posters">
          <img class="row__poster" src="small-movie1.jpg" alt="" />
 
          <img class="row__poster" src="small-movie2.jpg" alt="" />
 
          <img class="row__poster" src="small-movie3.jpg" alt="" />
 
          <img class="row__poster" src="small-movie4.jpg" alt="" />
 
          <img class="row__poster" src="small-movie5.jpg" alt="" />
 
          <img class="row__poster" src="small-movie6.jpg" alt="" />
 
          <img class="row__poster" src="small-movie7.jpg" alt="" />
 
          <img class="row__poster" src="small-movie8.jpg" alt="" />
        </div>
      </div>
        <!-- Top Rated -->
    <div class="row">
        <h2>Top Rated</h2>
        <div class="row__posters">
            <img class="row__poster" src="small-movie1.jpg" alt="" />
 
            <img class="row__poster" src="small-movie2.jpg" alt="" />
   
            <img class="row__poster" src="small-movie3.jpg" alt="" />
   
            <img class="row__poster" src="small-movie4.jpg" alt="" />
   
            <img class="row__poster" src="small-movie5.jpg" alt="" />
   
            <img class="row__poster" src="small-movie6.jpg" alt="" />
   
            <img class="row__poster" src="small-movie7.jpg" alt="" />
   
            <img class="row__poster" src="small-movie8.jpg" alt="" />
        </div>
      </div>
 
      <!-- Action Movies -->
      <div class="row">
        <h2>Action Movies</h2>
        <div class="row__posters">
            <img class="row__poster" src="small-movie1.jpg" alt="" />
 
            <img class="row__poster" src="small-movie2.jpg" alt="" />
   
            <img class="row__poster" src="small-movie3.jpg" alt="" />
   
            <img class="row__poster" src="small-movie4.jpg" alt="" />
   
            <img class="row__poster" src="small-movie5.jpg" alt="" />
   
            <img class="row__poster" src="small-movie6.jpg" alt="" />
   
            <img class="row__poster" src="small-movie7.jpg" alt="" />
   
            <img class="row__poster" src="small-movie8.jpg" alt="" />
        </div>
      </div>
       <!-- Comedy Movies -->
    <div class="row">
        <h2>Comedy Movies</h2>
        <div class="row__posters">
            <img class="row__poster" src="small-movie1.jpg" alt="" />
 
            <img class="row__poster" src="small-movie2.jpg" alt="" />
   
            <img class="row__poster" src="small-movie3.jpg" alt="" />
   
            <img class="row__poster" src="small-movie4.jpg" alt="" />
   
            <img class="row__poster" src="small-movie5.jpg" alt="" />
   
            <img class="row__poster" src="small-movie6.jpg" alt="" />
   
            <img class="row__poster" src="small-movie7.jpg" alt="" />
   
            <img class="row__poster" src="small-movie8.jpg" alt="" />
        </div>
      </div>
 
      <!-- Horror Movies -->
      <div class="row">
        <h2>Horror Movies</h2>
        <div class="row__posters">
            <img class="row__poster" src="small-movie1.jpg" alt="" />
 
            <img class="row__poster" src="small-movie2.jpg" alt="" />
   
            <img class="row__poster" src="small-movie3.jpg" alt="" />
   
            <img class="row__poster" src="small-movie4.jpg" alt="" />
   
            <img class="row__poster" src="small-movie5.jpg" alt="" />
   
            <img class="row__poster" src="small-movie6.jpg" alt="" />
   
            <img class="row__poster" src="small-movie7.jpg" alt="" />
   
            <img class="row__poster" src="small-movie8.jpg" alt="" />
      </div>
 
      <!-- Romance Movies -->
      <div class="row">
        <h2>Romance Movies</h2>
        <div class="row__posters">
            <img class="row__poster" src="small-movie1.jpg" alt="" />
 
            <img class="row__poster" src="small-movie2.jpg" alt="" />
   
            <img class="row__poster" src="small-movie3.jpg" alt="" />
   
            <img class="row__poster" src="small-movie4.jpg" alt="" />
   
            <img class="row__poster" src="small-movie5.jpg" alt="" />
   
            <img class="row__poster" src="small-movie6.jpg" alt="" />
   
            <img class="row__poster" src="small-movie7.jpg" alt="" />
   
            <img class="row__poster" src="small-movie8.jpg" alt="" />
        </div>
      </div>
 
      <!-- Documentaries -->
      <div class="row">
        <h2>Documentaries</h2>
        <div class="row__posters">
            <img class="row__poster" src="small-movie1.jpg" alt="" />
            <img class="row__poster" src="small-movie2.jpg" alt="" />
            <img class="row__poster" src="small-movie3.jpg" alt="" />
            <img class="row__poster" src="small-movie4.jpg" alt="" />
            <img class="row__poster" src="small-movie5.jpg" alt="" />
            <img class="row__poster" src="small-movie6.jpg" alt="" />
            <img class="row__poster" src="small-movie7.jpg" alt="" />
            <img class="row__poster" src="small-movie8.jpg" alt="" />

        </div>
      </div>
      <script>
        const nav = document.getElementById('nav');
        window.addEventListener('scroll', () => {
          if (window.scrollY >= 100) {
            nav.classList.add('nav__black');
          } else {
            nav.classList.remove('nav__black');
          }
        });
      </script>
    </body>
    </html>
Styles.CSS File:
* {
    margin: 0;
    box-sizing: border-box;
  }
 
  body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #111;
  }
 
  .row__poster {
    width: 100%;
    object-fit: contain;
    max-height: 100px;
    margin-right: 10px;
    transition: transform 450ms;
  }
 
  .row__posters {
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;
    padding: 20px;
  }
 
  .row__poster:hover {
    transform: scale(1.08);
  }
 
  .row__posters::-webkit-scrollbar {
    display: none;
  }
 
  .row__posterLarge {
    max-height: 250px;
  }
 
  .row__posterLarge:hover {
    transform: scale(1.09);
  }
 
  .row {
    color: white;
    margin-left: 20px;
  }
 
  /* banner */
  .banner {
    background-image:url("banner.jpg");
    background-size: cover;
    background-position: center center;
    color: white;
    object-fit: contain;
    height: 448px;
  }
 
  .banner__contents {
    margin-left: 30px;
    padding-top: 140px;
    height: 190px;
  }
 
  .banner__title {
    font-size: 3rem;
    font-weight: 800;
    padding-bottom: 0.3rem;
  }
 
  .banner__description {
    width: 45rem;
    line-height: 1.3;
    padding-top: 1rem;
    font-size: 0.8rem;
    max-width: 360px;
    height: 180px;
  }
 
  .banner__button {
    cursor: pointer;
    color: #fff;
    outline: none;
    border: none;
    font-weight: 700;
    border-radius: 0.2vw;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: rgba(51, 51, 51, 0.5);
  }
 
  .banner__button:hover {
    color: #000;
    background-color: #e6e6e6;
    transition: all 0.2s;
  }
 
  .banner--fadeBottom {
    margin-top: 145px;
    height: 7.4rem;
    background-image: linear-gradient(180deg, transparent, rgba(37, 37, 37, 0.61), #111);
  }
 
  /* nav */
 
  .nav__logo {
    width: 80px;
    object-fit: contain;
  }
 
  .nav__avatar {
    width: 30px;
    object-fit: contain;
  }
 
  .nav {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    /* background-color: #111; */
    z-index: 1;
    transition-timing-function: ease-in;
    transition: all 0.5s;
  }
 
  .nav__black {
    background-color: #111;
  }
Finished Output:
The HTML and CSS are also separately attached along with the pictures of the code
and website and a video on the working of the website.

You might also like