Merge pull request #974 from sanskritisahu21/main-Branch

feat: Improvement of UI for Footer
apu52 · Jul 3, 2024 · 5a662e5 · 5a662e5
2 parents e561f6a + 30f0271
commit 5a662e5
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -1057,19 +1057,19 @@ <h2 class="section__title" data-aos="fade-up">Subscribe to get special prize</h2
     <footer class="footer" data-aos="fade-up">
       <div class="section__container footer__container">
         <div class="footer__col">
-          <h3 class="footer__title">Places You May Want to Visit<span>.</span></h3>
+          <h3 class="footer-head" class="footer__title">Places You May Want to Visit<span>.</span></h3>
           <p class="footer__text"> 
-           <ul class="interested  " >
-            <li><a href="Cultural_Exp.html">Cultural Experiences</a></li>
 
-            <li><a href="HoneyMoon.html">Honeymoon Places</a></li>
-            <li><a href="Adventure.html">Adventure travel</a></li>
+            <a href="Cultural_Exp.html">Cultural Experiences</a>
+
+            <a href="HoneyMoon.html">Honeymoon Places</a>
+            <a href="Adventure.html">Adventure travel</a>
+
 
-           </ul>
           </p>
         </div>
         <div class="footer__col">
-          <h3 class="footer__title">Tourguide<span>.</span></h3>
+          <h3 class="footer-head" class="footer__title">Tourguide<span>.</span></h3>
           <p>
             Ready for your next adventure? Let's make it unforgettable.<br>
           </p>
@@ -1079,7 +1079,7 @@ <h3 class="footer__title">Tourguide<span>.</span></h3>
         </div>
         <div class="footer__col">
           <div class="footer__area">
-            <h4 class="footer__subtitle">Support</h4>
+            <h4 class="footer-head" class="footer__subtitle">Support</h4>
           <p><a href="./faq.html" class="footer__link">FAQs</a></p>
           <p><a href="./tnc.html" class="footer__link">Terms & Conditions</a></p>
           <p><a href="./privacy.html" class="footer__link">Privacy Policy</a></p>
@@ -1095,7 +1095,7 @@ <h4 class="footer__subtitle">Support</h4>
         </section>
         </div>
         <div class="footer__col">
-          <h4>Address</h4>
+          <h4 class="footer-head" style="padding-left: 35px;">  Address</h4>
           <div class="mapouter">
             <div class="gmap_canvas"><iframe width="200" height="200" id="gmap_canvas"
                 src="https://maps.google.com/maps?q=wellington%20street%20kolkata&t=k&z=11&ie=UTF8&iwloc=&output=embed"
@@ -1136,24 +1136,24 @@ <h4>Reach Out To Us</h4>
         </div>
         <div class="footer__col">
           <div class="footer__area">
-            <h4>Follow Us</h4>
-
-              <a href="https://www.facebook.com/yourpage" target="_blank" class="footer__link">
+            <h4 class="footer-head" style="margin-left: -43px;" >Follow Us</h4>
+            <br>
+              <a style="margin-left: -43px;" href="https://www.facebook.com/yourpage" target="_blank" class="footer__link">
                 <i class="fab fa-facebook-f"></i> 
               </a>
 
 
-              <a href="https://twitter.com/ArpanCh40193288" target="_blank" class="footer__link">
+              <a style="margin-left: -10px;" href="https://twitter.com/ArpanCh40193288" target="_blank" class="footer__link">
                 <i class="fab fa-twitter"></i> 
               </a>
 
 
-              <a href="https://www.instagram.com/anuragbasu1973/" target="_blank" class="footer__link">
+              <a style="margin-left: -10px;" href="https://www.instagram.com/anuragbasu1973/" target="_blank" class="footer__link">
                 <i class="fab fa-instagram"></i> 
               </a>
 
 
-              <a href="https://www.linkedin.com/in/arpan-chowdhury-775294251" target="_blank" class="footer__link">
+              <a style="margin-left: -10px;" href="https://www.linkedin.com/in/arpan-chowdhury-775294251" target="_blank" class="footer__link">
                 <i class="fab fa-linkedin-in"></i> 
               </a>
 

diff --git a/styles.css b/styles.css
@@ -1241,11 +1241,22 @@ body.dark-theme #emailInput {
   text-align: left;
   flex-direction: column;
 }
+
+.social-icon{
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
 .social-icon a {
   transition: transform 0.3s ease;
   padding: 10px;
 }
-
+.footer__text a{
+  color: white;
+}
+.footer__text a:hover{
+  color: red;
+}
 
 .social-icon a:hover {
   transform: scale(1.1);
@@ -2074,7 +2085,40 @@ body {
   }
 
 }
+.footer-head {
+  position: relative;
+  display: inline-block;
+  padding: 10px 0;
+}
+
+.footer-head::before,
+.footer-head::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  background-color: red;
+  transition: width 0.2s ease-in;
+}
+
+.footer-head::before {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.footer-head::after {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
 
+.footer-head:hover::before{
+  width: 100%;
+}
+.footer-head:hover::after{
+  width: 100%;
+}
 .navLinks .link a:active {
   color:red;