✨✨✨

css/main.css

@@ -3,6 +3,7 @@
   * {
     scroll-behavior: smooth !important;
   }
+
   :root {}
 
   body {
@@ -11,7 +12,6 @@
 
   a {
     cursor: pointer !important;
-    /* color: white; */
     transition: all 0.3s ease-in;
   }
 
@@ -70,8 +70,6 @@
   header {
     height: 100vh;
     background-size: cover !important;
-    /* background-position: center !important; */
-    /* background-position: center; */
     background-repeat: no-repeat !important;
   }
 
@@ -88,54 +86,50 @@
   }
 
   #moviesHeader {
-    /* max-width: 1180px; */
-    /* margin: auto; */
     margin-left: 90px;
   }
 
   .container-mov .content .mov-info h1 {
     -webkit-background-clip: text;
     color: white;
-    /* background-image: url(../fire-hell-fire.gif); */
     font-size: 64px;
   }
 
   .nav-icons .search-bar {
     width: 400px;
     height: 80vh;
-    /* left: -210px; */
     right: -100px;
   }
 
   .main-body {
     background-color: #000;
-    /* margin-top: 100vh; */
   }
 
   /* Top Rated */
   .top_rated_mov .top-rated .mov-list {
     gap: 10px;
     display: grid;
     height: 60vh;
-    overflow:auto !important;
+    overflow: auto !important;
   }
+
   .top_rated_mov .top-rated .mov-list::-webkit-scrollbar {
     display: none !important;
   }
-  
-  
+
+
   .top_rated_mov .top-rated .mov-list .list {
     width: 220px;
     border: 1px solid #333;
     height: 300px;
     background: #333;
-    /* overflow:; */
   }
 
   .top_rated_mov .top-rated .mov-list .list img {
     width: 240px;
     transition: all 0.3s ease;
   }
+
   .top_rated_mov .top-rated .mov-list .list img:hover {
     scale: 1.03;
   }
@@ -150,6 +144,7 @@
     #moviesHeader .mov-img {
       display: none;
     }
+
     .content-container .content {
       width: 65%;
     }
@@ -172,7 +167,6 @@
 
     .content-container .content {
       width: 90%;
-      /* text-align: center; */
     }
 
     .container-mov .content .mov-info h1 {
@@ -190,6 +184,7 @@
       align-items: center;
       text-align: center;
     }
+
     .container-mov .content .mov-info h1 {
       font-size: 60px;
     }
@@ -203,6 +198,7 @@
     .content-container .content {
       width: 93%;
     }
+
     .container-mov .content .mov-info h1 {
       font-size: 50px;
     }

index.html

@@ -111,13 +111,11 @@
       </header>
       <div class="top_rated_mov vh-100 bg-000">
         <div class="container top-rated pt-5 ">
-          <!-- <h1 class="text-light fs-90">Movies</h1> -->
 
           <h2 class="text-light text-center mt-4 ">Top Rated Movies</h1>
             <p class="text-muted pt-3">Welcome to our Top Rated Movies section! Here, we've curated a list of some of the most beloved and critically acclaimed movies of all time. These cinematic masterpieces have captivated audiences and left a lasting impact on the world of cinema. Take a journey through the finest stories, exceptional performances, and breathtaking cinematography that make these movies truly extraordinary.
 
             </p>
-          <!-- <p>Movies move us like nothing else can, whether they’re scary, funny, dramatic, romantic or anywhere in-between. So many titles, so much to experience.</p> -->
 
           <div class="pop-movies">
             <div class="mov-list w-100 overflow-hidden " id="topRatedMovies">

js/main.js

@@ -218,24 +218,23 @@ function checkLength(text) {
 // get Popular movies
 async function getPopular() {
   let popularMoviesLength = 100;
-  const movList = document.querySelector('.mov-list')
-  movList.style.gridTemplateColumns = `repeat(${popularMoviesLength}, ${1}fr)`
+  const movList = document.querySelector(".mov-list");
+  movList.style.gridTemplateColumns = `repeat(${popularMoviesLength}, ${1}fr)`;
   let movieContents = await getMovies(api_popular_list, popularMoviesLength);
   try {
     console.log(movieContents);
 
     const movieContent = movieContents;
-    console.log(movieContent)
-    
-    topRatedMovies.innerHTML = ''
+    console.log(movieContent);
+
+    topRatedMovies.innerHTML = "";
     for (let i = 0; i <= popularMoviesLength; i++) {
       const { id, vote_average, poster_path } = movieContent[i];
       topRatedMovies.innerHTML += `
         <div class="list mx-3 rounded-2" id="list">
           <img class="border" src="${img_path + poster_path}" alt="">
         </div>
       `;
-
     }
   } catch (error) {}
 }