Skip to content

Commit

Permalink
Final Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@anshul9809
anshul9809 committed Jul 31, 2023
1 parent 4691e9e commit 42447c6
Show file tree
Hide file tree
Showing 8 changed files with 493 additions and 0 deletions.
271 changes: 271 additions & 0 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,271 @@
*{
margin: 0;
padding: 0;
}
body{
background-color: black;
color: white;
}
img{
max-width:100%;
height: 100%;
aspect-ratio: 1;
transition: all ease-in-out 0.3s;
}
a{
color: white;
text-decoration: none;
}
ul{
list-style: none;
}
.flex{
display: flex;
}

.movies-grid img{
border-radius: 10px;
}

#favorites{
display: none;
}

/* starting with header */
header{
background-color:#0f0f0f;
box-shadow:0px 0px 5px white;
height: 70px;
width: 100%;
display: flex;
justify-content: center;
border-radius: 5px;
position: fixed;
}
.head-container{
width: 95%;
justify-content: space-between;
}
header .brand{
width: 100px;
height: 100%;
}
header .menu-parent{
width: 50%;
justify-content: space-between;
}
header .menu-parent .search-movie{
width: 70%;
justify-content: center;
align-items: center;
position: relative;
}

header .menu-parent .search-movie input{
padding:.5rem ;
position: relative;
background-color: white;
text-indent: 0.3rem;
width: 100%;
border: none;
padding-right: 2.2rem;
border-radius: 5px;
}
header .menu-parent .search-movie input:focus{
outline: 2px solid white;
box-sizing: border-box;
box-shadow: 0px 0px 35px white;
font-family: 'Times New Roman';
font-size: 15px;
letter-spacing: 0.5px;
font-weight: 500;

}
header .menu-parent .search-movie button{
position: absolute;
border: none;
color: black;
background-color: white;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
right: 0px;
padding: 0.5rem;
}

header .menu-parent .wishlist,
header .menu-parent .profile{
align-items: center;
padding: 0.3rem;
font-size: 20px;
word-spacing: 5px;
}
/* header completed */

/* starting with the movie container */
.movies-grid-container{
width: 100%;
justify-content: center;
padding-top: 100px;
}
.movies-grid{
width: 90vw;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 1rem;
}
.movies-grid li{
min-width: 24vw;
min-height: 300px;
/* max-height: 300px; */
margin: 15px 2px;
padding: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
margin-top: 15px;
}
.movies-grid li h3{
padding: 10px;
text-align: center;
}
.movies-grid li img{
width: 100%;
height: 70%;
}
.movies-grid .btn-div{
width: 100%;
/* background-color: green; */
text-align: center;
/* margin-top: 10%; */
padding: 0.5rem;
}

.movies-grid li:hover {
box-shadow: 0px 0px 3px grey;
}
.movies-grid li button {
margin-top: 10px;
width: 50%;
line-height: 20px;
background-color: white;
padding: 0.3rem;
border-radius: 20px;
transition: 0.3s;
border: none;
font-weight: bold;
cursor: pointer;
}
.movies-grid li button:active {
background-color: black;
color: white;
}

.movies-grid .poster{
justify-content: space-around;
flex-direction: row;
width: 100%;
padding: 10px;
}
.movies-grid .poster .movie-poster{
width: 30%;
height: 100%;
border-radius: 10px;
overflow: hidden;
}

.movies-grid .poster .movie-poster img{
width: 100%;
height: 100%;
}
.movies-grid .poster .movie-info{
width: 60%;
padding: 10px;
justify-content: center;
}

.movies-grid .poster .movie-info .container{
color: white;
width: 80%;
padding: 20px;
}
.movies-grid .poster .movie-info .container > *{
padding: 5px;
margin: 5px;
font-size: 20px;
}
.movies-grid .poster .movie-info .container .movie-title{
color: white;
font-weight: bold;
font-size: 25px;
background-color: #0f0f0f;
}


.movies-grid .poster .movie-info .container .rated{
background-color: var(--yellow-color);
padding: 0.4rem;
margin: 0 0.4rem;
border-radius: 3px;
font-weight: 600;
}
.movies-grid .poster .movie-info .container .released{
font-size: 0.9rem;
opacity: 0.9;
}
.movies-grid .poster .movie-info .container .writer{
padding: 0.5rem;
margin: 1rem 0;
}
.movies-grid .poster .movie-info .container .genre{
background-color: var(--light-dark-color);
display: inline-block;
padding: 0.5rem;
border-radius: 3px;
}
.movies-grid .poster .movie-info .container .plot{
max-width: 400px;
/* margin: 1rem auto; */
}
.movies-grid .poster .movie-info .container .language{
color: var(--yellow-color);
font-style: italic;
}
.movies-grid .poster .movie-info .container .awards{
font-weight: 300;
font-size: 0.9rem;
}
.movies-grid .poster .movie-info .container .awards i{
color: var(--yellow-color);
margin: 1rem 0.7rem 0 0;
}


/* for responsive desgin */

@media(max-width:920px){
header .menu-parent{
width: 70%;
}
}

@media(max-width: 660px) {

.wishlist .label-text{
display: none;
}
.movies-grid li{
width: 100%;
}
.movies-grid .poster{
flex-direction: column;
}
.movies-grid .poster .movie-poster{
width: 100%;
}
.movies-grid .poster .movie-info{
width: 100%;
}
}
Empty file added favorite.html
View file
Empty file.
Binary file added img/icon2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/icon3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/imdb_icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/notFound.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 52 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMDB</title>
<link rel="icon" href="img/imdb_icon.png" type="image/x-icon"/>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<div class="head-container flex">
<a href="#" class="brand">
<img src="img/icon3.jpg" alt="">
</a>

<div class="menu-parent flex">
<!-- <form action="" method="post" class="search-movie flex" onsubmit=" return loadMovies()"> -->
<div class="search-movie flex">
<input type="text" id="search" class="search-input" placeholder="Search.." onclick="loadMovies()" onkeyup="loadMovies()" autocomplete="off">
<button type="submit" class="search-button" onclick="loadMovies()"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>

<!-- </form> -->

<div class="wishlist flex">
<a href="#" id="wishlist"><i class="fa-solid fa-bookmark"></i> <span class="label-text">Wishlist</span> </a>
</div>
<div class="profile flex">
<a href="">
<i class="fa fa-user"></i>
</a>
</div>
</div>
</div>

</header>

<!-- starting with the search result list -->
<div id="movies-grid-container" class="movies-grid-container flex">
<ul class="movies-grid" id="movies-grid">
<i id="favorites" >Wishlist is empty</i>

</ul>

</div>

<!-- search list end -->
<script src="js/script.js"></script>
</body>
</html>
Loading

0 comments on commit 42447c6

Please sign in to comment.