In the travel.html file Footer is added, issue number PriyaGhosal#1750 …

…is solved.
Hemraj-7 · Oct 28, 2024 · c7fca11 · c7fca11
1 parent c9ef90c
commit c7fca11
Show file tree

Hide file tree

Showing 2 changed files with 157 additions and 2 deletions.
diff --git a/travel.css b/travel.css
@@ -62,9 +62,118 @@ body {
   border-color: #0056b3;
 }
 
+/* Footer styles (unchanged) */
+footer {
+  background-color: #000000;
+  padding: 30px 0;
+  font-family: Arial, sans-serif;
+  color: #fff5f5;
+}
+
+.footer-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.footer-container-top {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.footer-column {
+  flex: 1 1 25%; /* Each column takes up about 25% of the width */
+  padding: 10px 20px;
+  min-width: 200px; /* Ensures columns don't get too small */
+  text-align: center;
+  line-height: 2;
+}
+
+.footer-column h3 {
+  font-size: 18px;
+  margin-bottom: 15px;
+  color: #f9c3c3;
+}
+
+.footer-column p,
+.footer-column li,
+.footer-bottom p {
+  font-size: 14px;
+  margin: 5px 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.footer-column ul {
+  padding: 0;
+}
+
+.footer-column ul li {
+  margin: 8px 0;
+
+}
+.footer-column a {
+  text-decoration: none;
+  color: #fff5f5;
+  transition: color 0.3s ease;
+}
+
+.footer-column  a:hover {
+  color: #f9c3c3;
+}
+.social-icons{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+}
+
+.social-icons a {
+  margin-right: 15px; /* Space between icons */
+  margin: 0 15px;
+}
+
+.social-icons i {
+  font-size: 24px; /* Icon size */
+  color: #fff; /* Icon color (you can change this) */
+  transition: color 0.3s ease;
+}
+
+.social-icons i:hover {
+  color: #f9c3c3; /* Hover effect color */
+}
+.footer-column img {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  transition: opacity 0.3s ease;
+
+}
+
+.footer-column img:hover {
+  opacity: 0.7;
+}
+
+.footer-bottom {
+  text-align: center;
+  padding: 20px;
+  border-top: 1px solid #eaeaea;
+  font-size: 13px;
+  color: #e6dcdc;
+  background-color: #000000;
+  width: 100%;
+}
+
+.footer-bottom p {
+  margin: 0;
+
+}
+
 @media (max-width: 768px) {
   .row-cols-md-2 > * {
       flex: 0 0 100%;
       max-width: 100%;
   }
-}
+}
diff --git a/travel.html b/travel.html
@@ -13,7 +13,7 @@
         <nav>
           <div class="logo">
             <img src="img/logo.png" id="logo-web">
-            <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
+            <h1 id="logo"><a href="/index.html">BuddyTrail</a></h1>
           </div>
 
           <!-- Hamburger button for mobile -->
@@ -159,6 +159,52 @@ <h6>Climate:</h6>
         </div>
     </div>
 
+    <footer>
+        <div class="footer-container">
+          <div style="display: flex" class="footer-container-top">
+            <!-- About Us Section -->
+            <div class="footer-column">
+              <h3>About Us</h3>
+              <p>We are a team of passionate developers creating amazing web experiences.</p>
+            </div>
+
+            <!-- Quick Links Section -->
+            <div class="footer-column">
+              <h3>Quick Links</h3>
+              <div>
+                <li><a href="/index.html">Home</a></li>
+                <li><a href="/about.html">About</a></li>
+                <li><a href="/index.html#services">Services</a></li>
+                <li><a href="/contact.html">Contact</a></li>
+              </div>
+            </div>
+
+            <!-- Contact Us Section -->
+            <div class="footer-column">
+              <h3>Contact Us</h3>
+              <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
+              <p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
+            </div>
+
+            <!-- Follow Us Section -->
+            <div class="footer-column">
+              <h3>Follow Us</h3>
+              <div class="social-icons">
+                <a href="https://discord.com/invite/priyaghosal" target="_blank"><i class="fab fa-discord"></i></a>
+                <a href="https://twitter.com/PriyaGhosa39968" target="_blank"><i class="fab fa-twitter"></i></a>
+                <a href="https://github.com/PriyaGhosal/BuddyTrail" target="_blank"><i class="fab fa-github"></i></a>
+                <a href="https://www.linkedin.com/in/priya-ghosal-785771286/" target="_blank"><i
+                    class="fab fa-linkedin-in"></i></a>
+              </div>
+            </div>
+          </div>
+
+          <!-- Footer Bottom -->
+          <div class="footer-bottom">
+            <p>&copy; 2024 Buddy Trail. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>