Add footer

AbrahaKahsay · Jun 29, 2022 · bb1b91d · bb1b91d
1 parent 7024ff6
commit bb1b91d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -8,25 +8,21 @@
     <title>Awesome Books</title>
   </head>
   <body>
+    <!-- main navigation bar -->
+    <nav class="main-nav">
+      <p>Awesome Books</p>
+      <ul  class="main-links">
+        <li><a href="#" class="active">List</a></li>
+        <li><a href="#" class="middle">Add new</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+    </nav>
+    <!-- date below the navigation bar -->
+    <div id="date"></div>
 
+    <!-- list books page -->
     <div class="books-container">
-
-      <!-- main navigation bar -->
-      <nav class="main-nav">
-        <p>Awesome Books</p>
-        <ul  class="main-links">
-          <li><a href="#" class="active">List</a></li>
-          <li><a href="#" class="middle">Add new</a></li>
-          <li><a href="#">Contact</a></li>
-        </ul>
-      </nav>
-      <!-- date below the navigation bar -->
-      <div id="date"></div>
-
-
-
       <div class="heading"><h1>All awesome Books</h1></div>
-
       <div class="book-list" id="booklist"></div>
       <form>
         <div class="title">
@@ -39,6 +35,12 @@
       </form>
     </div>
 
+
+    <!-- page footer -->
+    <footer class="footer">
+    copyright 2022 Francis and Abraha, all rights reserved
+    </footer>
+
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -88,9 +88,17 @@ nav p {
   color:black;
 }
 
-
 div#date{
   display:flex;
   flex-direction: row;
   justify-content: flex-end;
 }
+
+footer{
+  border:1px solid black;
+  padding:15px 20px;
+  position:relative;
+  box-sizing: border-box;
+  bottom:0;
+  text-align: center;
+}