Add footer to HTML and CSS

kognise · Oct 5, 2023 · 22f74bc · 22f74bc
1 parent d950cbc
commit 22f74bc
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -355,9 +355,22 @@ <h4>Heading 4</h4>
     <h5>Heading 5</h5>
     <h6>Heading 6</h6>
 
-    <footer>
-      <a href="#">Back to top ⬆</a>
+
+    <footer class="footer">
+      <div class="footer-content">
+        <p>&copy; 2023 Water.css Project</p>
+        <p>Created by Your Name</p>
+      </div>
+      <div class="footer-social">
+        <a href="https://github.com/kognise/water.css" class="footer-link">
+          GitHub
+        </a>
+        <a href="https://twitter.com/WaterCss" class="footer-link">
+          Twitter
+        </a>
+      </div>
     </footer>
+
     <script src="script.js" defer></script>
   </body>
 </html>
diff --git a/docs/style.css b/docs/style.css
@@ -63,3 +63,31 @@ body > footer {
   align-items: center;
   justify-content: space-between;
 }
+
+
+.footer {
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  padding: 20px;
+  font-size: 14px;
+}
+
+.footer-content {
+  margin-bottom: 10px;
+}
+
+.footer p {
+  margin: 5px 0;
+}
+
+.footer-social a {
+  color: #fff;
+  margin: 0 10px;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-social a:hover {
+  color: #007bff;
+}