Fix issue 2

index.html

@@ -20,7 +20,9 @@ <h1 class="header-title">Awesome Books</h1>
     </header>
 
     <main>
-        <section id="date"></section>
+        <section id="date">
+            <!--Date Section-->
+        </section>
 
         <section class="book-section">
 
@@ -30,7 +32,7 @@ <h2 class="fav-books">All awesome books</h2>
                     <!--Book List-->
                 </ul>
             </section>
-            
+
             <section class="book-container hide" id="addBook-container">
                 <h2 class="fav-books">Add a new book</h2>
                 <form class="form-books">
@@ -49,20 +51,20 @@ <h2 class="contact-header">Contact information</h2>
                 <ul class="contact-details">
                     <li>Our e-mail: mail@mail.com</li>
                     <li>Our phone number: 0043586534422</li>
-                    <li>Our address: Streetname 22, 84503 City, Country</li>
+                    <li>Our address: Streetname 22, City, Country</li>
                 </ul>
             </section>
-
+            
         </section>
-    </main>
+    </main> 
 
     <footer class="footer">
         <p>&copy; awesome book 2022 - Some right reserved - by
           <a target="_blank" rel="noopener" href="https://github.com/Ogaga01">Ogaga1</a> &
           <a target="_blank" rel="noopener" href="https://github.com/AbuRayhaan">AbuRayhaan</a>
         </p>
     </footer>
-    
+
     <script src="./scriptClass.js"></script>
 </body>
 </html>

scriptClass.js

@@ -142,4 +142,4 @@ contactUs.addEventListener('click', () => {
   document.getElementById('contactUs-container').classList.remove('hide');
   document.getElementById('bookList-container').classList.add('hide');
   document.getElementById('addBook-container').classList.add('hide');
-});
+});

style.css

@@ -14,34 +14,33 @@ a {
 
 .header {
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   border: 3px solid black;
   padding: 5px;
   height: 50px;
 }
 
 .header-title {
-  margin-left: 20px;
-  font-size: 22px;
+  font-size: 18px;
 }
 
 .header-menu {
   display: flex;
-  margin-right: 50px;
-  gap: 1px;
+  margin-right: 5px;
+  gap: 10px;
   background-color: black;
 }
 
 .header-items {
   font-weight: bold;
-  font-size: 18px;
+  font-size: 12px;
 }
 
 .bar {
   border-right: 0.3em solid black;
-  padding-right: 20px;
-  padding-left: 5px;
+  padding-right: 5px;
 }
 
 header ul li {
@@ -50,21 +49,22 @@ header ul li {
 }
 
 main {
-  height: 75vh;
+  height: 80vh;
 }
 
 #date {
   display: flex;
   justify-content: flex-end;
   margin-top: 10px;
   font-weight: bold;
+  font-size: 12px;
 }
 
 .booklist-container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 80px;
+  margin-top: 30px;
 }
 
 .booklist-container ul li {
@@ -78,17 +78,10 @@ main {
   border: 3px solid black;
 }
 
-.book-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 80px;
-}
-
 .list-border {
   display: flex;
   flex-direction: column;
-  width: 50%;
+  width: 80%;
   padding-left: 0;
 }
 
@@ -110,10 +103,11 @@ ul li:nth-child(odd) {
   background-color: rgba(128, 128, 128, 0.5);
 }
 
-.hr {
-  height: 1px;
-  background-color: black;
-  width: 5%;
+.book-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 80px;
 }
 
 form {
@@ -148,6 +142,7 @@ form input {
   flex-direction: column;
   align-items: center;
   margin-top: 80px;
+  padding: 0 15px;
 }
 
 .contact-container ul li {
@@ -166,12 +161,13 @@ form input {
 
 .footer {
   border: 3px solid black;
-  padding: 5px;
+  padding: 5px 5px;
   height: 50px;
 }
 
 .footer p {
   font-weight: bold;
+  margin-top: 0;
 }
 
 .footer a {
@@ -181,6 +177,7 @@ form input {
 @media screen and (min-width: 768px) {
   .header {
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
     align-items: center;
     border: 3px solid black;
@@ -214,4 +211,110 @@ form input {
     cursor: pointer;
     list-style: none;
   }
+
+  #date {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+    font-weight: bold;
+    font-size: 18px;
+  }
+
+  .booklist-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 30px;
+  }
+
+  .booklist-container ul li {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 5px;
+  }
+
+  .booklist-border {
+    border: 3px solid black;
+  }
+
+  .list-border {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    padding-left: 0;
+  }
+
+  .book-info {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: 5px;
+    width: 100%;
+  }
+
+  li button {
+    border: 3px solid black;
+    box-shadow: 3px 3px;
+    margin-top: 5px;
+  }
+
+  ul li:nth-child(odd) {
+    background-color: rgba(128, 128, 128, 0.5);
+  }
+
+  .book-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 80px;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .form-books {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: flex-end;
+  }
+
+  #add-book {
+    border: 3px solid black;
+    box-shadow: 3px 3px;
+  }
+
+  form input {
+    border: 3px solid black;
+    width: 180px;
+  }
+
+  .error-msg {
+    color: red;
+  }
+
+  .contact-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 80px;
+  }
+
+  .contact-container ul li {
+    list-style: disc;
+  }
+
+  .contact-details {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+  }
+
+  .hide {
+    display: none;
+  }
 }