footer section done

Razib2019 · Mar 3, 2024 · 7eff354 · 7eff354
1 parent 6f3dca3
commit 7eff354
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -192,6 +192,33 @@ <h3 class="card-title secondary-color">Best Price Guarantee</h3>
       <!-- Why Choose Us Section Start From Here -->
     </main>
     <!-- Main Section End Here -->
-    <footer></footer>
+
+    <!-- Footer Section Start From Here -->
+    <footer class="background-color3">
+      <div class="footer-container">
+        <div class="footer-img-container">
+          <img src="./Images/1.png" alt="" />
+          <h1 class="footer-title secondary-color">
+            Hero <span class="primary-color">Travel</span>
+          </h1>
+        </div>
+        <p class="footer-description additional-color1">
+          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-media-container">
+          <i class="fa-brands fa-twitter"></i>
+          <i class="fa-brands fa-facebook-f"></i>
+          <i class="fa-brands fa-instagram"></i>
+          <i class="fa-brands fa-github"></i>
+        </div>
+        <hr />
+        <p class="secondary-color all-reserve">
+          2024 &copy; All Rights Reserved by BD Travel
+        </p>
+      </div>
+    </footer>
+    <!-- Footer Section End Here -->
   </body>
 </html>
diff --git a/styles/bd_travel.css b/styles/bd_travel.css
@@ -34,6 +34,10 @@ body {
   border: 1px solid rgba(41, 206, 246, 0.2);
 }
 
+.background-color3 {
+  background-color: rgba(19, 19, 24, 0.05);
+}
+
 .btn-primary {
   border-radius: 8px;
   background-color: #ff5400;
@@ -311,3 +315,47 @@ main {
 }
 /* Why Choose Us Section Style End Here */
 /* Main Section Style End Here */
+
+/* Footer Section Start From Here */
+.footer-container {
+  padding: 110px 0;
+  margin: 0 auto;
+  max-width: 600px;
+}
+.footer-img-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 15px;
+}
+.footer-img-container img {
+  width: 40px;
+  margin-right: 16px;
+}
+.footer-img-container .footer-title {
+  font-size: 32px;
+  font-weight: 800;
+}
+.footer-description {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+}
+.social-media-container {
+  margin-top: 32px;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 50px;
+}
+.social-media-container .fa-brands {
+  font-size: 24px;
+  margin-left: 20px;
+}
+.all-reserve {
+  margin-top: 50px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 300;
+}
+/* Footer Section End Here */
diff --git a/styles/responsive.css b/styles/responsive.css
@@ -153,4 +153,35 @@
     line-height: 24px;
   }
   /* Why Choose Us Section Style End Here */
+
+  /* Footer Section Start From Here */
+  .footer-container {
+    padding: 32px 0;
+    max-width: 280px;
+  }
+  .footer-img-container img {
+    width: 32px;
+    margin-right: 10px;
+  }
+  .footer-img-container .footer-title {
+    font-size: 22px;
+  }
+  .footer-description {
+    font-size: 14px;
+    line-height: 24px;
+  }
+  .social-media-container {
+    margin-top: 16px;
+    margin-bottom: 24px;
+  }
+  .social-media-container .fa-brands {
+    font-size: 16px;
+    margin-left: 16px;
+  }
+  .all-reserve {
+    margin-top: 24px;
+    text-align: center;
+    font-size: 14px;
+  }
+  /* Footer Section End Here */
 }