Resolved Footer section UI

apu52 · Jul 31, 2024 · 0682fb3 · 0682fb3
1 parent 2401499
commit 0682fb3
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 11 deletions.
diff --git a/footer.css b/footer.css
@@ -1,3 +1,18 @@
+.footer__container {
+    width: 100%;
+    /* max-width: 1800px; */
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    color: var(--secondary-color);
+    margin: 0;
+    padding: 0;
+  }
+
 .goog-te-combo{
     background: #5074cf;
     color: white;
@@ -17,3 +32,14 @@
     font-size: medium;
     color: black;
 }
+
+.footer_text{
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.footer_text a{
+    color: white;
+    /* margin-top: 10px; */
+}
diff --git a/index.html b/index.html
@@ -1618,7 +1618,7 @@ <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__container">
         <div class="footer__col">
           <h3 class="footer-head" class="footer__title" style="cursor: default;">Tourguide<span>.</span></h3>
           <p>
@@ -1630,7 +1630,7 @@ <h3 class="footer-head" class="footer__title" style="cursor: default;">Tourguide
         </div>
         <div class="footer__col">
           <h3 class="footer-head" class="footer__title">Places You May Want to Visit<span>.</span></h3>
-          <p class="footer__text">
+          <p class="footer__text footer_text">
 
             <a href="Cultural_Exp.html">Cultural Experiences</a>
 
@@ -1734,6 +1734,14 @@ <h4>Contact Us</h4>
         <div style="padding: 32px; background-color: transparent; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
           <label for="google_translate_element" style="display: block; font-weight: bold; margin-bottom: 10px; font-size: 20px; color: white;">Select Language:</label>
           <div id="google_translate_element" style="display: inline-block; margin-top: 10px; padding: 20px; border: 1px solid #ff9fcf; border-radius: 5px; background-color: #fff;"></div>
+        </div>
+      </div>
+
+      <!--  New copyright code to make it dynamic and display current year -->
+      <div class="footer__bar">
+        <div>
+          <li>Copyright &copy;<span id="year"></span> </span> Arpan Chowdhury. All rights reserved. </li>
+        </div>
       </div>
 
 
@@ -1785,14 +1793,6 @@ <h4>Contact Us</h4>
         </script> -->
 
 
-
-        <!--  New copyright code to make it dynamic and display current year -->
-        <div class="footer__bar">
-          <div>
-            <li>Copyright &copy;<span id="year"></span> </span> Arpan Chowdhury. All rights reserved. </li>
-          </div>
-        </div>
-
     </footer>
 
 

diff --git a/styles.css b/styles.css
@@ -1280,15 +1280,17 @@ body, html {
 
 .footer__container {
   width: 100%;
+  /* max-width: 1800px; */
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
+  justify-content: space-between;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   color: var(--secondary-color);
   margin: 0;
-    padding: 0;
+  padding: 0;
 }
 
 .footer__col {