From a6329c64cd8b76887e8b49060dda4106d62b8e87 Mon Sep 17 00:00:00 2001
From: AryaD14 <aryadanech9@gmail.com>
Date: Fri, 29 Sep 2023 18:54:29 +0530
Subject: [PATCH] [Refactor] change in links and styling

---
 css/index.css                 | 241 +++++++++++++++++-----------------
 index.html                    |  63 +++++----
 js/navbar.js                  |  12 +-
 {html => pages}/about-us.html |   0
 {html => pages}/login.html    |   0
 5 files changed, 160 insertions(+), 156 deletions(-)
 rename {html => pages}/about-us.html (100%)
 rename {html => pages}/login.html (100%)

diff --git a/css/index.css b/css/index.css
index f9bae8b..c5ad4f5 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,123 +1,120 @@
 * {
-    margin: 0;
-    padding: 0;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  }
-  
-  nav {
-    background-color: #aa5040;
-    padding: 10px;
-  }
-  
-  #navbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 20px;
-  }
-  
-  #navbar h2 {
-    margin: 0;
-  }
-  
-  #navbar ul {
-    list-style-type: none;
-    display: flex;
-    margin-left: auto;
-  }
-  
-  #navbar ul li {
-    margin-left: 10px;
-  }
-  
-  #navbar ul li a {
-    text-decoration: none;
-    color: #333;
-  }
-  
-  .welcome {
-    background-color: #ffffff;
-    padding: 20px;
-    text-align: center;
-  }
-  
-  .search {
-    text-align: center;
-    padding: 20px;
-  }
-  
-  .search input[type="text"] {
-    padding: 10px;
-    width: 190px;
-    border-radius: 10px;
-  }
-  
-  .search button[type="submit"] {
-    padding: 10px 20px;
-    background-color: #333;
-    color: #fff;
-    border: none;
-    cursor: pointer;
-    border-radius: 10px;
-  }
-  
-  /* Featured books section styles */
-  .featured-books {
-    padding: 20px;
-    overflow: hidden;
-  }
-  
-  .featured-books h2 {
-    margin-bottom: 10px;
-    padding: 10px;
-  }
-  
-  .img1 {
-    width: 150px;
-    display: flex;
-  }
-  
-  .img1 img {
-    width: 100%;
-    padding: 10px;
-    float: left;
-    box-sizing: border-box;
-  }
-  
-  /* Footer styles */
-  footer {
-    background-color: #aa5040;
-    padding: 10px;
-    text-align: center;
-  }
-  
-  .contact-info p {
-    margin-bottom: 10px;
-  }
-  
-  .static-pages ul {
-    list-style-type: none;
-  }
-  
-  .static-pages ul li {
-    display: inline;
-    margin-right: 10px;
-  }
-  
-  .static-pages ul li a {
-    text-decoration: none;
-    color: #333;
-  }
-  
-  .i1 {
-    float: left;
-  }
-  
-  .i2 {
-    float: left;
-  }
-  
-  .i3 {
-    float: left;
-  }
-  
\ No newline at end of file
+  margin: 0;
+  padding: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+:root {
+  --primary-color: #aa5040;
+  --text-color-light: #ededed;
+}
+
+header {
+  background-color: var(--primary-color);
+  padding: 10px;
+}
+
+#navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+}
+
+#navbar h2 {
+  margin: 0;
+}
+
+#navbar ul {
+  list-style-type: none;
+  display: flex;
+  margin-left: auto;
+}
+
+#navbar ul li {
+  margin-left: 16px;
+}
+
+#navbar ul li a {
+  text-decoration: none;
+  color: var(--text-color-light);
+}
+
+.welcome {
+  background-color: var(--text-color-light);
+  padding: 20px;
+  text-align: center;
+}
+
+.search {
+  text-align: center;
+  padding: 20px;
+}
+
+.search input[type="text"] {
+  padding: 10px;
+  width: 190px;
+  border-radius: 10px;
+}
+
+.search button[type="submit"] {
+  padding: 10px 20px;
+  background-color: #333;
+  color: var(--text-color-light);
+  border: none;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+/* Featured books section styles */
+.featured-books {
+  padding: 20px;
+  overflow: hidden;
+}
+
+.featured-books h2 {
+  margin-bottom: 10px;
+  padding: 10px;
+}
+
+.img1 {
+  width: 150px;
+  display: flex;
+}
+
+.img1 img {
+  width: 100%;
+  padding: 10px;
+  float: left;
+  box-sizing: border-box;
+}
+
+/* Footer styles */
+footer {
+  background-color: var(--primary-color);
+  padding: 10px;
+  text-align: center;
+}
+
+.contact-info p {
+  margin-bottom: 10px;
+  color: var(--text-color-light);
+}
+
+.static-pages ul {
+  list-style-type: none;
+}
+
+.static-pages ul li {
+  display: inline;
+  margin-right: 10px;
+}
+
+.static-pages ul li a {
+  text-decoration: none;
+  color: var(--text-color-light);
+}
+
+.book-img {
+  float: left;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 040112d..24b278d 100644
--- a/index.html
+++ b/index.html
@@ -1,41 +1,47 @@
 <!DOCTYPE html>
 <html>
+
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>E-Library</title>
-  <link rel="stylesheet" type="text/css" href="./css/index.css">
+  <link rel="stylesheet" href="./css/index.css">
 </head>
+
 <body>
-  <nav>
+  <header>
     <div id="navbar">
       <h2>E-Library</h2>
       <ul>
         <li><a href="index.html">Home</a></li>
-        <li><a href="books.html">Books</a></li>
-        <li><a href="./html/login.html">Log In</a></li>
-        <li><a href="./html/about-us.html">About Us</a></li>
-        <li><a href="contact.html">Contact</a></li>
+        <li><a href="pages/books.html">Books</a></li>
+        <li><a href="pages/login.html">Log In</a></li>
+        <li><a href="pages/about-us.html">About Us</a></li>
+        <li><a href="pages/contact.html">Contact</a></li>
       </ul>
     </div>
-  </nav>
-
-  <div class="welcome">
-    <h1>Welcome to the E-Library</h1>
-    <p>A brief introduction to the e-library.</p>
-  </div>
+  </header>
 
-  <div class="search">
-    <input type="text" placeholder="Search for books">
-    <button type="submit">Search</button>
-  </div>
+  <main>
+    <div class="welcome">
+      <h1>Welcome to the E-Library</h1>
+      <p>A brief introduction to the e-library.</p>
+    </div>
 
-  <section class="featured-books">
-    <h2>Featured Books</h2>
-    <div class="img1">
-        <img class="i1" src="/static/book1.jpeg" >
-        <img class="i2" src="/static/book2.jpeg" >
-        <img class="i3" src="/static/book3.jpeg" >       
+    <div class="search">
+      <input type="text" placeholder="Search for books">
+      <button type="submit">Search</button>
     </div>
-  </section>
+
+    <section class="featured-books">
+      <h2>Featured Books</h2>
+      <div class="img1">
+        <img class="book-img" src="static/book1.jpeg">
+        <img class="book-img" src="static/book2.jpeg">
+        <img class="book-img" src="static/book3.jpeg">
+      </div>
+    </section>
+  </main>
 
   <footer>
     <div class="contact-info">
@@ -43,12 +49,13 @@ <h2>Featured Books</h2>
     </div>
     <div class="static-pages">
       <ul>
-        <li><a href="about.html">About Us</a></li>
-        <li><a href="contact.html">Contact</a></li>
-        <li><a href="privacy.html">Privacy Policy</a></li>
-        <li><a href="terms.html">Terms of Service</a></li>
+        <li><a href="pages/about.html">About Us</a></li>
+        <li><a href="pages/contact.html">Contact</a></li>
+        <li><a href="pages/privacy.html">Privacy Policy</a></li>
+        <li><a href="pages/terms.html">Terms of Service</a></li>
       </ul>
     </div>
   </footer>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/js/navbar.js b/js/navbar.js
index 45188f3..912561a 100644
--- a/js/navbar.js
+++ b/js/navbar.js
@@ -2,7 +2,7 @@ window.addEventListener('DOMContentLoaded', () => {
     const navbarDiv = document.getElementById('navbar');
     const nav = document.createElement('nav');
     nav.style.backgroundColor = '#aa5040';
-    nav.style.padding = '10px'; 
+    nav.style.padding = '10px';
 
     nav.innerHTML = `
         <ul style="display: flex; justify-content: space-between; align-items: center;">
@@ -10,19 +10,19 @@ window.addEventListener('DOMContentLoaded', () => {
                 <strong style="font-weight: bold;">E-library</strong>
             </li>
             <li style="display: inline; margin-left: auto;">
-                <a href="../index.html" style="text-decoration: none; color: #333;">Home</a>
+                <a href="../index.html" class="nav-link">Home</a>
             </li>
             <li style="display: inline; margin-left: 10px;">
-                <a href="books.html" style="text-decoration: none; color: #333;">Books</a>
+                <a href="books.html" class="nav-link">Books</a>
             </li>
             <li style="display: inline; margin-left: 10px;">
-                <a href="login.html" style="text-decoration: none; color: #333;">Log In</a>
+            <a href="about-us.html" class="nav-link">About Us</a>
             </li>
             <li style="display: inline; margin-left: 10px;">
-                <a href="about-us.html" style="text-decoration: none; color: #333;">About Us</a>
+            <a href="contact.html" class="nav-link">Contact</a>
             </li>
             <li style="display: inline; margin-left: 10px;">
-                <a href="contact.html" style="text-decoration: none; color: #333;">Contact</a>
+                <a href="login.html" class="nav-link">Log In</a>
             </li>
         </ul>
     `;
diff --git a/html/about-us.html b/pages/about-us.html
similarity index 100%
rename from html/about-us.html
rename to pages/about-us.html
diff --git a/html/login.html b/pages/login.html
similarity index 100%
rename from html/login.html
rename to pages/login.html