Technigo · xingyin2024 · Sep 18, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-# project-library
+# project-library
+
+https://xingsbooklibrary.netlify.app
diff --git a/assets/facebook-icon.png b/assets/facebook-icon.png
diff --git a/assets/github-icon.png b/assets/github-icon.png
diff --git a/assets/instagram-icon.png b/assets/instagram-icon.png
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/assets/search-icon.png b/assets/search-icon.png
diff --git a/assets/twitter-icon.png b/assets/twitter-icon.png
diff --git a/books-images/harry-potter-and-the-sorcerer.jpg b/books-images/harry-potter-and-the-sorcerer.jpg
diff --git a/index.html b/index.html
@@ -1,13 +1,76 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <!-- Don't forget to change the title and connect the CSS file -->
-  <title>Project Library</title>
+  <link rel="stylesheet" href="./style.css">
+  <title>XingS Book Library</title>
+  <!-- Sole by Xing Yin *********** NETLIFT *********** https://xingsbooklibrary.netlify.app  -->
 </head>
+
 <body>
-  <h1>Project Library</h1>
-  <!-- Don't forget to connect the JavaScript file -->
+  <header class="header">
+    <h1>Book Library</h1>
+    <nav class="nav">
+      <!-- Filter dropdown with radio buttons -->
+      <div class="sort-container" id="sortContainer"></div>
+
+      <!-- Dropdown for filtering by genre -->
+      <select id="dropdown">
+        <option value="all">All</option>
+        <option value="Adventure">Adventure</option>
+        <option value="Fiction">Fiction</option>
+        <option value="Science Fiction">Science Fiction</option>
+        <option value="Fantasy">Fantasy</option>
+        <option value="Horror">Horror</option>
+        <option value="Mystery">Mystery</option>
+        <option value="Dystopian">Dystopian</option>
+      </select>
+
+      <!-- Search input -->
+      <input type="text" id="searchInput" placeholder="Search by title...">
+
+      <!-- Reset Button to refresh the page -->
+      <button id="resetButton" class="reset-btn">Reset</button>
+
+      <!-- Hamburger menu for favorite books -->
+      <div class="hamburger-menu" onclick="toggleFavouriteMenu()">
+        <div class="bar1"></div>
+        <div class="bar2"></div>
+      </div>
+
+      <nav id="favourites" class="hidden">
+        <ul id="favouriteList">Choose your favorite books❤️</ul>
+      </nav>
+
+    </nav>
+  </header>
+
+  <!-- add book cards here from JS -->
+  <section id="container"></section>
+
+  <!-- Footer spans full width -->
+  <footer class="footer-container">
+    <div class="logo">
+      <a href="#" id="logo"><img src="assets/logo.png" alt="XingS Logo"></a>
+    </div>
+
+    <div class="footer-bottom">
+      <p>&copy; 2024 XingS Book Library. All rights reserved.</p>
+    </div>
+
+    <div class="social-media">
+      <a href="#"><img src="assets/facebook-icon.png" alt="Facebook"></a>
+      <a href="#"><img src="assets/twitter-icon.png" alt="Twitter"></a>
+      <a href="#"><img src="assets/instagram-icon.png" alt="Instagram"></a>
+      <a href="#"><img src="assets/github-icon.png" alt="GitHub"></a>
+    </div>
+
+
+  </footer>
+
+  <script src="./script.js"></script>
 </body>
+
 </html>
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -1,7 +1,5 @@
 ## Netlify link
-Add your Netlify link here.
-PS. Don't forget to add it in your readme as well.
+https://xingsbooklibrary.netlify.app
 
 ## Collaborators
-Add your collaborators here. Write their GitHub usernames in square brackets. If there's more than one, separate them with a comma, like this:
-[github-username-1, github-username-2]
+SOLO
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