DEV Community

Cover image for Netflix UI clone using HTML & CSS
Manitej ⚡
Manitej ⚡

Posted on • Originally published at manitej.hashnode.dev

29 9

Netflix UI clone using HTML & CSS

#html #css

In this post, lets make a netflix clone using HTML & CSS.

netf.png

Building the Netflix Originals row

index.html

  <div>
      <h2 style="margin: 8px;">Netflix Originals</h2>
      <div class="row">
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
      </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

index.css

.row {
  display: flex;
  overflow-y: hidden;
}

.row > img {
  margin: 8px;
  transition: transform 0.5s;
}

.row > img:hover {
  transform: scale(1.1);
}

::-webkit-scrollbar {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

Repeat the same code for other rows, just change the width and height.

Building the header

index.html

<div class="container">
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg"
        width="80"
        style="margin: 20px;"
      />
    </div>
Enter fullscreen mode Exit fullscreen mode

index.css

.container {
  background-image: url("http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
}
Enter fullscreen mode Exit fullscreen mode

Full Code 😎

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="index.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Netflix clone ❤</title>
  </head>
  <body>
    <div class="container">
      <img
        style="position: fixed;"        
       src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg"
        width="80"
        style="margin: 20px;"
      />
    </div>
    <div>
      <h2 style="margin: 8px;">Netflix Originals</h2>
      <div class="row">
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/en/1/14/Tenet_movie_poster.jpg"
          width="140"
          height="200"
        />
      </div>
    </div>

    <div>
      <h2 style="margin: 8px;">Top Rated</h2>
      <div class="row">
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
      </div>
    </div>

    <div>
      <h2 style="margin: 8px;">Comedy Movies</h2>
      <div class="row">
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
        <img
          src="http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg"
          width="160"
          height="100"
        />
      </div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

index.css

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: black;
  color: white;
}

.container {
  background-image: url("http://www.impawards.com/2012/posters/dark_knight_rises_ver13_xlg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
}

.row {
  display: flex;
  overflow-y: hidden;
}

.row > img {
  margin: 8px;
  transition: transform 0.5s;
}

.row > img:hover {
  transform: scale(1.1);
}

::-webkit-scrollbar {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

That's it if you liked my work give a thumbs up 🥳

profile
Postmark
 Promoted

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (7)

Collapse
 
manitej profile image
Manitej ⚡ •

Glad you liked it

Collapse
 
zamfir80 profile image
Razvan Zamfir •

Is there a demo available?

Collapse
 
manitej profile image
Manitej ⚡ •

I Haven't deployed anywhere, but I did a similar app using React. If you wanna see
netflix-dummy.netlify.app/

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

profile
Postmark
 Promoted

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Read next

mikeyoung44 profile image

AI Breakthrough Makes Voice Recordings Crystal Clear in Any Background Noise

Mike Young -

mikeyoung44 profile image

AI Robot Successfully Adapts to Changes, Achieves 76% Task Success in Real-World Tests

Mike Young -

mikeyoung44 profile image

Simple Training Trick Makes AI Better at Logic, Regardless of Information Order

Mike Young -

mikeyoung44 profile image

AI Performance Breakthrough: New Method Cuts Costs 30% While Boosting Speed 25%

Mike Young -

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay