From 4405348255b7e23cbc939234eef7657498d4e3a0 Mon Sep 17 00:00:00 2001
From: sudhanshu248 <sainisudhanshu389@gmail.com>
Date: Tue, 22 Oct 2024 09:36:45 +0530
Subject: [PATCH] Add correct footer on contributor page

---
 contributor/contributor.css  | 127 +++++++++++++++++++++++++--------
 contributor/contributor.html | 131 ++++++++++++++++++++++-------------
 2 files changed, 181 insertions(+), 77 deletions(-)

diff --git a/contributor/contributor.css b/contributor/contributor.css
index c1a98fa..c1aa9c5 100644
--- a/contributor/contributor.css
+++ b/contributor/contributor.css
@@ -305,45 +305,112 @@ body {
 
 
 
-.contributor-footer-link{
-  display: grid;
-  grid-template-columns: repeat(4 ,1fr);
-  place-items: center;
-  margin-top: 4rem;
-  
-}
 
-.footer-row {
-  text-align: start;
-  min-width: 135px;
-}
 
-.footer-row h3{
-  color: #07a893;
-}
 
-.footer-row ul li{
-  list-style-type: none;
+/* General Footer Styling */
+.footer-container {
+  background-color: #1f2937;
+  color: #ffffff;
+  padding: 40px 0;
+  font-family: Arial, sans-serif;
 }
 
-.footer-row ul li a{
+/* Logo and Tagline */
+.footer-logo-section {
+  text-align: center;
+  margin-bottom: 30px;
+}
+.footer-logo {
+  max-width: 150px;
+  margin-bottom: 10px;
+  border-radius: 50px;
+}
+.footer-logo-section p {
+  margin: 5px 0;
+  font-size: 0.95rem;
+}
+.follow-us {
+  margin-top: 10px;
+  font-weight: bold;
+}
 
-  color: white;
+/* Social Media Icons */
+.social-icons a {
+  display: inline-block;
+  margin: 0 10px;
+  color: #12e9cc;
+  font-size: 1.5rem;
   text-decoration: none;
- }
+}
+.social-icons a:hover {
+  color: #76b2ab;
+}
 
- .footer-row ul li a:hover{
+/* Footer Link Sections */
+.footer-links {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin: 20px 100px;
+}
+.footer-column {
+  flex-basis: 20%;
+  margin-bottom: 10px;
+}
+.footer-column h4 {
+  font-size: 1rem;
+  margin-bottom: 10px;
+  color: #12e9cc;
+}
+.footer-column ul {
+  list-style: none;
+  padding: 0;
+}
+.footer-column ul li {
+  margin-bottom: 8px;
+}
+.footer-column ul li a {
+  color: #ffffff;
+  text-decoration: none;
+  font-size: 0.95rem;
+}
+.footer-column ul li a:hover {
   text-decoration: underline;
-  }
-
+}
 
- .icon:hover{
-  transform: scale(1.2);
-   color: #12e9cc;
- }
+/* Footer Bottom Links */
+.footer-bottom {
+  text-align: center;
+  border-top: 1px solid #ddd;
+  padding-top: 20px;
+}
+.footer-bottom ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.footer-bottom ul li {
+  display: inline-block;
+  margin: 0 15px;
+}
+.footer-bottom ul li a {
+  color: #12e9cc;
+  text-decoration: none;
+  font-size: 0.95rem;
+}
+.footer-bottom ul li a:hover {
+  text-decoration: underline;
+}
 
- @media (max-width:600px) {
-  .contributor-footer-link{
-    grid-template-columns: repeat(2 ,1fr);
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .footer-links {
+    flex-direction: column;
+    align-items: center;
   }
- }
\ No newline at end of file
+  .footer-column {
+    flex-basis: 100%;
+    text-align: center;
+  }
+}
diff --git a/contributor/contributor.html b/contributor/contributor.html
index 9406f0a..ab82a7c 100644
--- a/contributor/contributor.html
+++ b/contributor/contributor.html
@@ -59,61 +59,98 @@ <h2>Meet Our Contributors</h2>
     </section>
 
     <!-- Call to Action -->
-    <section id="contribute" class="contributor-cta">
-        <h2>Ready to Make an Impact?</h2>
-        <p>Join our community and help shape the future with us at Ticket Booking platform.</p>
+    
+        
         <form id="subscribeForm">
-            <input type="email" id="emailInput" placeholder="Enter your email" required>
-            <button type="submit" class="contributor-btn contributor-btn-secondary">Get Started</button>
+            
         </form>
         <div id="notification" class="contributor-notification contributor-hidden"></div>
 
-        <!-- Add footer links -->
-        <div class="contributor-footer-link">
-            <div class="footer-row">
-                <h3>Helping</h3>
-                <ul>
-                <li><a href="#">Help center</a></li>
-                <li><a href="#">Assistance</a></li>
-                <li><a href="#">Download App </a></li>
-                <li><a href="#">Booking Conditions</a></li>
-                </ul>
-                
-            </div>
-            <div class="footer-row">
-                <h3>About us</h3>
-                <ul>
-                <li><a href="#">Media center</a></li>
-                <li><a href="#">Investors</a></li>
-                <li><a href="#">Modern slavery </a></li>
-                <li><a href="#">Terms of use</a></li>
-                </ul>
-            </div>
-            <div class="footer-row">
-                <h3>Find us</h3>
-                <ul>
-                <li><a href="#">Contact Us </a></li>
-                <li><a href="#"> Group Cookie Notice</a></li>
-                <li><a href="#"> Privacy And Policy </a></li>
-                <li><a href="#"> Sitemap</a></li>
-                </ul>
-            </div>
-
-            <div class="footer-row social-icon">
-                <h3>follow Us</h3>
-                <ul>
-                <li>   <a href="#"><i class="fab fa-facebook icon"></i>  facebook</a>        </li>
-                <li>   <a href="#"><i class="fab fa-instagram icon "></i> instagram</a>       </li>
-                <li>    <a href="#"><i class="fab fa-youtube icon "></i> Youtube</a></li>
-                <li>    <a href="#"><i class="fab fa-linkedin icon "></i> linkdin</a>       </li>
-                </ul>
-            </div>
-        </div>
+        
+           
 
 
-    </section>
+    
   </div>
 
+
+  
+<footer class="footer-container">
+    <div class="footer-top">
+      
+      <div class="footer-logo-section">
+        
+
+        <img src="../images/3.jpeg" alt="easyJet holidays logo" class="footer-logo">
+        <p style="color: #b5fdf4;" >Affordable adventures, unforgettable memories—explore with ease.</p>
+        <p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>
+        
+        <div class="social-icons">
+          <a href="#"><i class="fab fa-facebook"></i></a>
+          <a href="#"><i class="fab fa-instagram"></i></a>
+          <a href="#" ><i class="fa-brands fa-x-twitter"></i></a>
+          <a href="#"><i class="fab fa-linkedin"></i></a>
+          <a href="#"><i class="fab fa-youtube"></i></a>
+        </div>
+      </div>
+  
+      
+      <div class="footer-links">
+        <div class="footer-column">
+          <h4>HELPFUL LINKS</h4>
+          <ul>
+            <li><a href="#">Help Centre</a></li>
+            <li><a href="#">Special Assistance</a></li>
+            <li><a href="#">Download The App</a></li>
+            <li><a href="#">Booking Conditions</a></li>
+          </ul>
+        </div>
+  
+        <div class="footer-column">
+          <h4>ABOUT US</h4>
+          <ul>
+            <li><a href="#">Media Center</a></li>
+            <li><a href="#">Investors</a></li>
+            <li><a href="#">Modern Slavery Act</a></li>
+            <li><a href="#">Terms Of Use</a></li>
+          </ul>
+        </div>
+  
+        <div class="footer-column">
+          <h4>KEEPING SAFE</h4>
+          <ul>
+            <li><a href="#">ATOL Protected</a></li>
+            <li><a href="#">Travel Aware</a></li>
+            <li><a href="#">FCDO Travel Advice</a></li>
+            <li><a href="#">ABTA</a></li>
+          </ul>
+        </div>
+  
+        <div class="footer-column">
+          <h4>FIND US</h4>
+          <ul>
+            <li><a href="#">Contact Us</a></li>
+            <li><a href="#">Group Cookie Notice</a></li>
+            <li><a href="privacy.html">Privacy And Policy</a></li>
+            <li><a href="#">Sitemap</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  
+    
+    <div class="footer-bottom">
+      <ul>
+        <li><a href="#">Holiday Type</a></li>
+        <li><a href="#">Holiday Deals</a></li>
+        <li><a href="#">Popular Counters</a></li>
+        <!-- <li><a href="#">Flight Only</a></li> -->
+        <li><a href="#">Top Hotels</a></li>
+      </ul>
+    </div>
+  </footer>
+
+
     <script src="contributor.js"></script>
 </body>
 </html>
\ No newline at end of file