Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add correct footer on contributor page #527

Merged
merged 1 commit into from
Oct 22, 2024
+181 −77
Merged

Add correct footer on contributor page #527

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 97 additions & 30 deletions contributor/contributor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
.footer-column {
flex-basis: 100%;
text-align: center;
}
}
131 changes: 84 additions & 47 deletions contributor/contributor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading