added footer

xyryc · Jul 29, 2024 · 1b92164 · 1b92164
1 parent eb0c66b
commit 1b92164
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -136,6 +136,30 @@ <h3>Choose Your Destination</h3>
       </section>
     </main>
 
-    <footer></footer>
+    <footer class="footer-section">
+      <div class="container">
+        <div class="logo">
+          <img src="images/logo.png" alt="" />
+          <h3>Travel <span class="span">Vibe</span></h3>
+        </div>
+
+        <p>
+          Lorem ipsum dolor sit amet consectetur. Nulla sit viverra morbi vitae
+          blandit orci potenti vulputate. Leo erat maecenas vitae elementum
+          ultricies nullam.
+        </p>
+
+        <div class="social">
+          <i class="fa-brands fa-twitter"></i>
+          <i class="fa-brands fa-facebook-f"></i>
+          <i class="fa-brands fa-instagram"></i>
+          <a href="https://github.com/xyryc"
+            ><i class="fa-brands fa-github"></i>
+          </a>
+        </div>
+        <hr />
+        <p>&copy; 2024, All Rights Reserved</p>
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/styles/style.css b/styles/style.css
@@ -207,5 +207,38 @@ select {
 
 .your-destination p {
   width: 50%;
+  margin: 24px auto;
+  margin-bottom: 48px;
+}
+
+/* Footer section */
+.footer-section {
+  background: rgba(19, 19, 24, 0.05);
+  padding: 2rem 0;
+}
+
+.footer-section .logo {
+  margin: 2rem auto;
+}
+
+.footer-section p {
+  width: 70%;
   margin: 0 auto;
 }
+
+.social {
+  width: 200px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 2rem auto;
+}
+
+.social i {
+  height: 44px;
+  font-size: 24px;
+}
+
+.footer-section hr {
+  margin: 2rem 0;
+}