Netflixclone

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>

<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 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>


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


</div>
</div>

<div class="row">
<h2>Trending Now</h2>
<img class="row__poster" src="small-movie1.jpg" alt="" />







</div>
</div>

<div class="row">
<h2>Top Rated</h2>







</div>
</div>


<div class="row">
<h2>Action Movies</h2>







</div>
</div>

<div class="row">
<h2>Comedy Movies</h2>







</div>
</div>


<div class="row">
<h2>Horror Movies</h2>







</div>


<div class="row">
<h2>Romance Movies</h2>







</div>
</div>


<div class="row">
<h2>Documentaries</h2>
</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;
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;
}

.nav__avatar {
width: 30px;
}

.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.

Netflixclone

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Netflixclone

Uploaded by

Copyright:

Available Formats

Department of Computer Engineering

 Sir Sheheryar Khan

 Computing Fundamentals (Lab)

<img class="rowposter rowposterLarge" src="large-movie2.jpg" alt="" />

<img class="rowposter rowposterLarge" src="large-movie4.jpg" alt="" />

<img class="rowposter rowposterLarge" src="large-movie5.jpg" alt="" />

<img class="rowposter rowposterLarge" src="large-movie6.jpg" alt="" />

<img class="rowposter rowposterLarge" src="large-movie7.jpg" alt="" />

<img class="rowposter rowposterLarge" src="large-movie8.jpg" alt="" />

You might also like

Netflixclone

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Netflixclone

Uploaded by

Copyright:

Available Formats

Department of Computer Engineering

 Sir Sheheryar Khan

 Computing Fundamentals (Lab)

<img class="row__poster row__posterLarge" src="large-movie2.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="" />

You might also like

<img class="rowposter rowposterLarge" src="large-movie2.jpg" alt="" />

<img class="rowposter rowposterLarge" src="large-movie4.jpg" alt="" />

<img class="rowposter rowposterLarge" src="large-movie5.jpg" alt="" />

<img class="rowposter rowposterLarge" src="large-movie6.jpg" alt="" />

<img class="rowposter rowposterLarge" src="large-movie7.jpg" alt="" />

<img class="rowposter rowposterLarge" src="large-movie8.jpg" alt="" />