Scribd
Upload
12 views26 pages

Finet HTML, CSS, Js

The document outlines the structure of a movie design webpage, featuring a navigation bar, sidebar, and multiple sections for displaying new releases and featured content. It includes various movie items with images, titles, descriptions, and watch buttons. The layout is styled using CSS and incorporates external fonts and icons for enhanced visual appeal.

Uploaded by

androposer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
12 views26 pages

Finet HTML, CSS, Js

The document outlines the structure of a movie design webpage, featuring a navigation bar, sidebar, and multiple sections for displaying new releases and featured content. It includes various movie items with images, titles, descriptions, and watch buttons. The layout is styled using CSS and incorporates external fonts and icons for enhanced visual appeal.

Uploaded by

androposer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 26

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

<link rel="stylesheet" href="style.css">

<link

href="https://fonts.googleapis.com/css2?
family=Roboto:wght@100;300;400;500;700;900&family=Sen:wght@400;700;800&display=swap"

rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/


all.min.css">

<title>Movie Design</title>

</head>

<body>

<div class="navbar">

<div class="navbar-container">

<div class="logo-container">

<h1 class="logo">flakes</h1>

</div>

<div class="menu-container">

<ul class="menu-list">

<li class="menu-list-item active">Home</li>

<li class="menu-list-item">Movies</li>
<li class="menu-list-item">Series</li>

<li class="menu-list-item">Popular</li>

<li class="menu-list-item">Trends</li>

</ul>

</div>

<div class="profile-container">

<img class="profile-picture" src="img/profile.jpg" alt="">

<div class="profile-text-container">

<span class="profile-text">Profile</span>

<i class="fas fa-caret-down"></i>

</div>

<div class="toggle">

<i class="fas fa-moon toggle-icon"></i>

<i class="fas fa-sun toggle-icon"></i>

<div class="toggle-ball"></div>

</div>

</div>

</div>

</div>

<div class="sidebar">

<i class="left-menu-icon fas fa-search"></i>

<i class="left-menu-icon fas fa-home"></i>

<i class="left-menu-icon fas fa-users"></i>

<i class="left-menu-icon fas fa-bookmark"></i>


<i class="left-menu-icon fas fa-tv"></i>

<i class="left-menu-icon fas fa-hourglass-start"></i>

<i class="left-menu-icon fas fa-shopping-cart"></i>

</div>

<div class="container">

<div class="content-container">

<div class="featured-content"

style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('img/f-1.jpg');">

<img class="featured-title" src="img/f-t-1.png" alt="">

<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo
dolor

deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam
omnis

minima voluptatibus incidunt. Accusamus, provident.</p>

<button class="featured-button">WATCH</button>

</div>

<div class="movie-list-container">

<h1 class="movie-list-title">NEW RELEASES</h1>

<div class="movie-list-wrapper">

<div class="movie-list">

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/1.jpeg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>
</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/2.jpeg" alt="">

<span class="movie-list-item-title">Star Wars</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/3.jpg" alt="">

<span class="movie-list-item-title">Storm</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/4.jpg" alt="">

<span class="movie-list-item-title">1917</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/5.jpg" alt="">


<span class="movie-list-item-title">Avengers</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/6.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/7.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

</div>

<i class="fas fa-chevron-right arrow"></i>

</div>

</div>

<div class="movie-list-container">
<h1 class="movie-list-title">NEW RELEASES</h1>

<div class="movie-list-wrapper">

<div class="movie-list">

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/8.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/9.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/10.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>
<div class="movie-list-item">

<img class="movie-list-item-img" src="img/11.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/12.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/1.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/1.jpg" alt="">

<span class="movie-list-item-title">Her</span>
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.
At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

</div>

<i class="fas fa-chevron-right arrow"></i>

</div>

</div>

<div class="featured-content"

style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('img/f-2.jpg');">

<img class="featured-title" src="img/f-t-2.png" alt="">

<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto illo
dolor

deserunt nam assumenda ipsa eligendi dolore, ipsum id fugiat quo enim impedit, laboriosam
omnis

minima voluptatibus incidunt. Accusamus, provident.</p>

<button class="featured-button">WATCH</button>

</div>

<div class="movie-list-container">

<h1 class="movie-list-title">NEW RELEASES</h1>

<div class="movie-list-wrapper">

<div class="movie-list">

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/1.jpeg" alt="">

<span class="movie-list-item-title">Her</span>
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.
At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/2.jpeg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/15.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/3.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>


<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/4.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/5.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/1.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

</div>
<i class="fas fa-chevron-right arrow"></i>

</div>

</div>

<div class="movie-list-container">

<h1 class="movie-list-title">NEW RELEASES</h1>

<div class="movie-list-wrapper">

<div class="movie-list">

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/17.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/18.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/19.jpg" alt="">

<span class="movie-list-item-title">Her</span>
<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.
At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/7.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/1.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/1.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>


<button class="movie-list-item-button">Watch</button>

</div>

<div class="movie-list-item">

<img class="movie-list-item-img" src="img/1.jpg" alt="">

<span class="movie-list-item-title">Her</span>

<p class="movie-list-item-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.


At

hic fugit similique accusantium.</p>

<button class="movie-list-item-button">Watch</button>

</div>

</div>

<i class="fas fa-chevron-right arrow"></i>

</div>

</div>

</div>

</div>

<script src="app.js"></script>

</body>

</html>

#css

*{

margin: 0;

}
body {

font-family: "Roboto", sans-serif;

.navbar {

width: 100%;

height: 50px;

background-color: black;

position: sticky;

top: 0;

.navbar-container {

display: flex;

align-items: center;

padding: 0 50px;

height: 100%;

color: white;

font-family: "Sen", sans-serif;

.logo-container {

flex: 1;

}
.logo {

font-size: 30px;

color: #4dbf00;

.menu-container {

flex: 6;

.menu-list {

display: flex;

list-style: none;

.menu-list-item {

margin-right: 30px;

.menu-list-item.active {

font-weight: bold;

.profile-container {

flex: 2;

display: flex;
align-items: center;

justify-content: flex-end;

.profile-text-container {

margin: 0 20px;

.profile-picture {

width: 32px;

height: 32px;

border-radius: 50%;

object-fit: cover;

.toggle {

width: 40px;

height: 20px;

background-color: white;

border-radius: 30px;

display: flex;

align-items: center;

justify-content: space-around;

position: relative;

}
.toggle-icon {

color: goldenrod;

.toggle-ball {

width: 18px;

height: 18px;

background-color: black;

position: absolute;

right: 1px;

border-radius: 50%;

cursor: pointer;

transition: 1s ease all;

.sidebar {

width: 50px;

height: 100%;

background-color: black;

position: fixed;

top: 0;

display: flex;

flex-direction: column;

align-items: center;
padding-top: 60px;

.left-menu-icon {

color: white;

font-size: 20px;

margin-bottom: 40px;

.container {

background-color: #151515;

min-height: calc(100vh - 50px);

color: white;

.content-container {

margin-left: 50px;

.featured-content {

height: 50vh;

padding: 50px;

.featured-title {
width: 200px;

.featured-desc {

width: 500px;

color: lightgray;

margin: 30px 0;

.featured-button {

background-color: #4dbf00;

color: white;

padding: 10px 20px;

border-radius: 10px;

border: none;

outline: none;

font-weight: bold;

.movie-list-container {

padding: 0 20px;

.movie-list-wrapper {

position: relative;
overflow: hidden;

.movie-list {

display: flex;

align-items: center;

height: 300px;

transform: translateX(0);

transition: all 1s ease-in-out;

.movie-list-item {

margin-right: 30px;

position: relative;

.movie-list-item:hover .movie-list-item-img {

transform: scale(1.2);

margin: 0 30px;

opacity: 0.5;

.movie-list-item:hover .movie-list-item-title,

.movie-list-item:hover .movie-list-item-desc,

.movie-list-item:hover .movie-list-item-button {
opacity: 1;

.movie-list-item-img {

transition: all 1s ease-in-out;

width: 270px;

height: 200px;

object-fit: cover;

border-radius: 20px;

.movie-list-item-title {

background-color: #333;

padding: 0 10px;

font-size: 32px;

font-weight: bold;

position: absolute;

top: 10%;

left: 50px;

opacity: 0;

transition: 1s all ease-in-out;

.movie-list-item-desc {

background-color: #333;
padding: 10px;

font-size: 14px;

position: absolute;

top: 30%;

left: 50px;

width: 230px;

opacity: 0;

transition: 1s all ease-in-out;

.movie-list-item-button {

padding: 10px;

background-color: #4dbf00;

color: white;

border-radius: 10px;

outline: none;

border: none;

cursor: pointer;

position: absolute;

bottom: 20px;

left: 50px;

opacity: 0;

transition: 1s all ease-in-out;

}
.arrow {

font-size: 120px;

position: absolute;

top: 90px;

right: 0;

color: lightgray;

opacity: 0.5;

cursor: pointer;

.container.active {

background-color: white;

.movie-list-title.active {

color: black;

.navbar-container.active {

background-color: white;

color: black;

.sidebar.active{
background-color: white;

.left-menu-icon.active{

color: black;

.toggle.active{

background-color: black;

.toggle-ball.active{

background-color: white;

transform: translateX(-20px);

@media only screen and (max-width: 940px){

.menu-container{

display: none;

#JavaScript

const arrows = document.querySelectorAll(".arrow");


const movieLists = document.querySelectorAll(".movie-list");

arrows.forEach((arrow, i) => {

const itemNumber = movieLists[i].querySelectorAll("img").length;

let clickCounter = 0;

arrow.addEventListener("click", () => {

const ratio = Math.floor(window.innerWidth / 270);

clickCounter++;

if (itemNumber - (4 + clickCounter) + (4 - ratio) >= 0) {

movieLists[i].style.transform = `translateX(${

movieLists[i].computedStyleMap().get("transform")[0].x.value - 300

}px)`;

} else {

movieLists[i].style.transform = "translateX(0)";

clickCounter = 0;

});

console.log(Math.floor(window.innerWidth / 270));

});

//TOGGLE

const ball = document.querySelector(".toggle-ball");

const items = document.querySelectorAll(


".container,.movie-list-title,.navbar-container,.sidebar,.left-menu-icon,.toggle"

);

ball.addEventListener("click", () => {

items.forEach((item) => {

item.classList.toggle("active");

});

ball.classList.toggle("active");

});

You might also like