People: |
|
|---|
I have complete 90% of the team assignment
Review Request #29 — Created April 19, 2024 and updated
In this team assignment that teamleader has assign to me to build the homepage of the netfilx and do the animation like hover and show the images
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Netflix</title>
<link rel="stylesheet" href="../src/css/test/o_test1-smey.css">
</head>
<body><!-- nav bar container -->
<nav class="navbar">
<div class="navbar-container">
<div class="logo-contanier"><img class="logo" src="../src/img/netflix_logo.png" alt=""></div>
<div class="menu-contanier">
<ul class="menu_list">
<li class="menu_item"><a class="active" href="#">Home</a></li>
<li class="menu_item"><a href="#">TV Shows</a></li>
<li class="menu_item"><a href="#">Movies</a></li>
<li class="menu_item"><a href="#">Latest</a></li>
<li class="menu_item"><a href="#">My List</a></li>
<li class="menu_item"><a href="#">Browse by Languages</a></li>
</ul>
</div>
<div class="profile-contanier">
<img class="search-img" src="../src/img/search.png" alt="">
<div class="profile_text_centainer">
<span class="profile-text">Kids</span>
</div>
<img class="notifications-img" src="../src/img/notifications.png" alt="" srcset="" />
<img class="profile-img" src="../src/img/Netflix-profile.png" alt="" srcset="" />
</div>
</div>
</nav>
<!-- Movie -->
<div class="container">
<div class="container-content">
<div class="feature-container">
<div class="featured-movies">
<div class="featured-movies">
<img class="feater-title-image" src="../src/img/Sword-art-online-logo.jpeg" alt="">
</div>
</div>
</div>
<!-- card section -->
<div class="movielist-container">
<div class="movielist-title">
<h1>New Releases</h1>
</div>
<div class="movie-list-wrapper">
<div class="movie-list">
<div class="movie-list-item">
<img class="movie-list-item-img" src="../src/img/JuJukisu.webp" alt="" />
<div class="movie-info"></div>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="../src/img/sowrd-online.jpg" alt="" />
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="../src/img/Jujuson.webp" alt="" />
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="../src/img/Solo leving .webp" alt="" />
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="../src/img/sawman.webp" alt="" />
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="../src/img/zom100.webp" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
3. SCSS Code * {
margin: 0px;
}body {
font-family: sans-serif;
}// Navbar styles
$navbar-height: 20px;
$navbar-color: white;.navbar {
height: $navbar-height;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.1); // Semi-transparent black
padding: 20px;
color: $navbar-color;
text-align: center;
}.navbar-container {
display: flex;
justify-content: center;
align-items: center;
margin: 0px 50px;
height: 100%;
}.profile-contanier {
flex: 2;
display: flex;
align-items: center;
justify-content: end;
}.logo {
height: 100px;
width: 100px;
}.menu_list {
display: flex;
list-style: none;
}.menu_item {
justify-content: center;
align-items: center;
margin: 10px;
}.menu_item > a {
text-decoration: none;
color: aliceblue;
}.profile-img {
height: 32px;
width: 32px;
object-fit: cover;
align-items: center;
}.search-img {
height: 32px;
width: 32px;
align-items: center;
color: white;
margin: 5px;
}.notifications-img {
height: 32px;
width: 32px;
object-fit: cover;
align-items: center;
margin: 10px;
}.profile_text_centainer {
display: flex;
margin: 0px 10px;
}.profile-text {
margin: 10px;
color: white;
}// Movie styling
$container-height: 2100px;.container {
height: $container-height;
background-color: rgb(0, 0, 0);
color: #fff;
}.container-content {
height: 100%;
}.feater-title-image {
height: 20%;
margin: 30px;
position: absolute;
top: 30%;
left: 20px;
transform: translateY(-50%);// Vendor prefixes for transform -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);}
.featured-text {
margin-left: 30px;
width: 50%;
color: rgb(126, 118, 118);
}.featured-link {
margin: 20px 30px;
background-color: white;
padding: 10px;
height: 60px;
width: 120px;
border: none;
border-radius: 30px;
outline: none;
font-weight: bold;
font-size: 15px;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);// Vendor prefixes for transform -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);}
.featured-movies {
width: auto;
height: 100vh;
background-image: linear-gradient(to bottom, rgba(3, 3, 3, 0), #020202),url(/src/img/sword-art-online.webp);
background-size: cover;
background-position: center;
}
// Movie List styling$movie-list-height: 300px;
.movielist-title {
font-size: 1rem;
}.movielist-container {
padding: 20px;
overflow: hidden;
}.movie-list {
display: flex;
height: $movie-list-height;
align-items: center;
transition: all 1s ease-in-out;
transform: translateX(0);
}.movie-list-item:hover .movie-list-item-img {
transform: scale(1.2);
opacity: 1;
}.movie-list-item-img {
transition: all 250ms ease-in-out;
height: 200px;
width: 400px;
object-fit: cover;
border-radius: 15px;
}.movie-list-item {
margin-right: 20px;
position: relative;
}// Media Queries
@media only screen and (max-width: 940px) {
.menu-contanier {
display: none;
}.container {
height: 2600px;
background-color: black;
}
}