Technigo · cholpoun · Sep 17, 2024 · Sep 17, 2024 · Sep 18, 2024 · Sep 18, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-# project-library
+# Project Movie Library 
+ttps://movielibraryknc.netlify.app/
+This website allows users to filter movies by genre, sort by Title. Director, Year, Rating. It also has a randomizer button, which selects the random movie. 
diff --git a/books-images/1984.jpg b/books-images/1984.jpg
diff --git a/books-images/harry-potter-and-the-sorcerer.jpg b/books-images/harry-potter-and-the-sorcerer.jpg
diff --git a/books-images/moby-dick.jpg b/books-images/moby-dick.jpg
diff --git a/books-images/pride-and-prejudice.jpg b/books-images/pride-and-prejudice.jpg
diff --git a/books-images/the-chronicles-of-narnia.jpg b/books-images/the-chronicles-of-narnia.jpg
diff --git a/books-images/the-great-gatsby.jpg b/books-images/the-great-gatsby.jpg
diff --git a/books-images/the-hobbit.jpg b/books-images/the-hobbit.jpg
diff --git a/books-images/the-lord-of-the-rings.jpg b/books-images/the-lord-of-the-rings.jpg
diff --git a/books-images/to-kill-a-mockingbird.jpg b/books-images/to-kill-a-mockingbird.jpg
diff --git a/books-images/unknown.jpg b/books-images/unknown.jpg
diff --git a/index.html b/index.html
@@ -1,13 +1,87 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+
   <!-- Don't forget to change the title and connect the CSS file -->
   <title>Project Library</title>
+
+  <!-- h1 font  -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Fascinate+Inline&display=swap" rel="stylesheet">
+
+  <!-- font for the text -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
+    rel="stylesheet">
+
 </head>
+
+<!-- Don't forget to connect the JavaScript file -->
+
 <body>
-  <h1>Project Library</h1>
-  <!-- Don't forget to connect the JavaScript file -->
+  <header class="hero">
+    <div class="hero-h1">
+      <h1>Movie Time</h1>
+      <h2></h2>
+    </div>
+  </header>
+  <section class="movie-library">
+
+    <!-- Filter and Sorting Controls -->
+    <div class="controls">
+      <!-- Filter Section -->
+      <div class="filter">
+        <h3>Browse by Genre</h3>
+        <div id="filterOptions">
+
+          <button class="filter-btn" id="all-btn">All Genres</button>
+          <button class="filter-btn" id="action-btn">Action</button>
+          <button class="filter-btn" id="comedy-btn">Comedy</button>
+          <button class="filter-btn" id="drama-btn">Drama</button>
+          <button class="filter-btn" id="sci-fi-btn">Sci-Fi</button>
+        </div>
+      </div>
+
+
+
+      <select id="filterDropdown">
+        <option value="all">All Movies</option>
+        <option value="title">Title</option> <!--Alphabetical-->
+        <option value="director">Director</option> <!--Alphabetical-->
+        <option value="year">Year</option> <!--From latest to oldest-->
+        <option value="rating">Rating</option> <!--highest to lowest-->
+      </select>
+
+
+
+  </section>
+
+
+  <!-- Movie Cards (grid) -->
+  <section class="container" id="container">
+  </section>
+
+  <!-- Random Movie Button and Container for dysplaying chosen random movie -->
+  <section class="random-box">
+    <div class="randomMovieButtonBox">
+      <h2>Let Fate Choose Your Movie!</h2>
+      <button class="random-btn" id="random-btn">Surpise Me!</button>
+    </div>
+
+    <div class="randomMovieContainer" id="randomMovieContainer"></div>
+  </section>
+
+  <script src="script.js"></script>
+
 </body>
+
+
+
 </html>
diff --git a/pull_request_template.md b/pull_request_template.md
diff --git a/recipe-images/baked-chicken.jpg b/recipe-images/baked-chicken.jpg
diff --git a/recipe-images/cheat’s-cheesy-focaccia.jpg b/recipe-images/cheat’s-cheesy-focaccia.jpg
diff --git a/recipe-images/chicken-paprikash.jpg b/recipe-images/chicken-paprikash.jpg
diff --git a/recipe-images/deep-fried-fish-bones.jpg b/recipe-images/deep-fried-fish-bones.jpg
diff --git a/recipe-images/fish-dish.jpg b/recipe-images/fish-dish.jpg
diff --git a/recipe-images/grilled.jpg b/recipe-images/grilled.jpg
diff --git a/recipe-images/individual-vegetarian-lasagnes.jpg b/recipe-images/individual-vegetarian-lasagnes.jpg
diff --git a/recipe-images/meat.jpg b/recipe-images/meat.jpg
diff --git a/recipe-images/vegetarian-shepherd's-pie.jpg b/recipe-images/vegetarian-shepherd's-pie.jpg
diff --git a/recipe-images/vegetarian-stir-fried-garlic-s.jpg b/recipe-images/vegetarian-stir-fried-garlic-s.jpg