Add contact and FAQs pages on navbar

correct all bug about UI
Ctoic · Oct 14, 2024 · 42e1206 · 42e1206
1 parent 5e81b8a
commit 42e1206
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 154 deletions.
diff --git a/about.html b/about.html
@@ -72,12 +72,12 @@
               >About</a
             >
 
-            <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
+            <a href="./contact.html" class="text-gray-300 hover:text-green-500"
+              >Contact</a
+            >
+            <a href="./faq.html" class="text-gray-300 hover:text-green-500"
+              >FAQs</a
+            >
             <button
               id="theme-toggle"
               class="text-gray-300 hover:text-green-500"

diff --git a/adventures.html b/adventures.html
@@ -72,12 +72,12 @@
               >About</a
             >
 
-            <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
+            <a href="./contact.html" class="text-gray-300 hover:text-green-500"
+              >Contact</a
+            >
+            <a href="./faq.html" class="text-gray-300 hover:text-green-500"
+              >FAQs</a
+            >
             <button
               id="theme-toggle"
               class="text-gray-300 hover:text-green-500"

diff --git a/faq.html b/faq.html
@@ -0,0 +1,38 @@
+<!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" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
+    <title>My Favorite Books Music App</title>
+  </head>
+
+  <body
+    class="dark-theme bg-gray-900 text-gray-300 d-flex flex-column min-vh-100"
+  >
+    <!-- Navbar -->
+    <div id="header-placeholder" class="sticky top-0 z-20"></div>
+
+    <!-- Footer -->
+    <div id="footer-placeholder" class="mt-auto"></div>
+
+    <!-- JavaScript -->
+    <script src="./script.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/fs.html b/fs.html
@@ -72,12 +72,12 @@
               >About</a
             >
 
-            <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
+            <a href="./contact.html" class="text-gray-300 hover:text-green-500"
+              >Contact</a
+            >
+            <a href="./faq.html" class="text-gray-300 hover:text-green-500"
+              >FAQs</a
+            >
             <button
               id="theme-toggle"
               class="text-gray-300 hover:text-green-500"

diff --git a/index.html b/index.html
@@ -72,12 +72,12 @@
               >About</a
             >
 
-            <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
+            <a href="./contact.html" class="text-gray-300 hover:text-green-500"
+              >Contact</a
+            >
+            <a href="./faq.html" class="text-gray-300 hover:text-green-500"
+              >FAQs</a
+            >
             <button
               id="theme-toggle"
               class="text-gray-300 hover:text-green-500"

diff --git a/pages/header.html b/pages/header.html
@@ -1,16 +1,16 @@
-<header>
-  <nav class="sticky top-0 z-20 bg-gray-800 p-4">
+<header class="sticky top-0 z-20 bg-gray-800 p-4 shadow-sm">
+  <nav class="">
     <div class="container mx-auto flex justify-between items-center">
       <!-- Logo -->
       <a
-        class="text-green-500 h3 font-bold d-flex"
+        class="logo-text h3 font-bold d-inline-flex"
         href="./index.html"
         class="navbar-brand"
       >
         <img
-          src="./Images/lisbook-logo.png"
+          src="./Images/lisbook-logo-1.png"
           alt="Logo"
-          width="35"
+          width="40"
           height="auto"
           class="align-text-center me-2"
         />
@@ -48,12 +48,10 @@
           >About</a
         >
 
-        <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
+        <a href="./contact.html" class="text-gray-300 hover:text-green-500"
+          >Contact</a
+        >
+        <a href="./faq.html" class="text-gray-300 hover:text-green-500">FAQs</a>
         <button id="theme-toggle" class="text-gray-300 hover:text-green-500">
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/pbd.html b/pbd.html
@@ -73,12 +73,12 @@
               >About</a
             >
 
-            <!-- <a href="./index.html" class="text-gray-300 hover:text-green-500"
-            >Previous</a
-          >
-          <a href="./pbd.html" class="text-gray-300 hover:text-green-500"
-            >Next</a
-          > -->
+            <a href="./contact.html" class="text-gray-300 hover:text-green-500"
+              >Contact</a
+            >
+            <a href="./faq.html" class="text-gray-300 hover:text-green-500"
+              >FAQs</a
+            >
             <button
               id="theme-toggle"
               class="text-gray-300 hover:text-green-500"
@@ -206,20 +206,18 @@ <h1 class="modal-title fs-5" id="exampleModalToggleLabel">
             >
               <img
                 id="img"
-                src="./Images/Sapiens.jpg"
+                src="./Images/cs.jpg"
                 alt="God Delusion Cover"
                 class="card-img-top img-fluid"
               />
             </div>
             <!-- Book Details -->
             <div class="mt-4">
-              <h1 class="text-2xl font-bold text-green-500">
-                Sapiens: A Brief History of Humankind
-              </h1>
-              <h3 class="text-lg mt-2">By Yuval Noah Harari</h3>
+              <h1 class="text-2xl font-bold text-green-500">God Delusion</h1>
+              <h3 class="text-lg mt-2">By Richard Dawkins</h3>
               <p class="text-sm mt-2">
-                Sapiens explores the history and evolution of humanity, from
-                early Homo sapiens to modern society.
+                The God Delusion is a book by English biologist Richard Dawkins
+                that argues against the existence of a supernatural creator.
               </p>
             </div>
 
@@ -340,14 +338,14 @@ <h3 class="text-lg mt-2">By Yuval Noah Harari</h3>
       >
         <div class="col-md-6">
           <a
-            href="./fs.html"
+            href="./index.html"
             class="text-gray-300 hover:text-green-500 border p-3 d-block rounded-start-5"
             >Previous Book</a
           >
         </div>
         <div class="col-md-6">
           <a
-            href="./adventures.html"
+            href="./fs.html"
             class="text-gray-300 hover:text-green-500 p-3 border d-block rounded-end-5"
             >Next Book</a
           >