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

Made the footer section interactive with CSS Styling #468

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Made the footer section interactive with CSS Styling #468

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cb491e8
Made the footer section interactive
ThunderShadows Oct 30, 2024
e8dd3a2
Made the necessary changes
ThunderShadows Oct 30, 2024
4f0f6d5
Merge branch 'Code-Social:main' into updated_footer_section
ThunderShadows Oct 30, 2024
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
113 changes: 67 additions & 46 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,56 +468,77 @@ <h3>Add Event</h3>
</div>
</section>
<hr>
<footer class="footer-section">
<div class="container">
<!-- Logo and About Section -->
<div class="footer-logo-about">
<a href="index.html" class="footer-logo-link">
<img src="images/logo.png" alt="Code Social Logo" class="footer-logo">
<span class="website-name">Code Social</span>
</a>
<p class="footer-about-text">
Code Social Community is a vibrant and inclusive space for tech enthusiasts <br> to learn, grow, and
connect. Founded in 2023, our mission is to empower individuals <br> with resources, mentorship, and
opportunities to cultivate their skills, explore their interests, and <br>collaborate with
like-minded peers.
</p>
<div class="social-icons">
<a href="https://wa.me/your-whatsapp-number" target="_blank"><img src="./images/whatsapp-icon.png"
alt="WhatsApp"></a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank"><img src="./images/discord-icon.png"
alt="Discord"></a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank"><img
src="./images/linkedin-icon.png" alt="LinkedIn"></a>
</div>
</div>
<footer class="footer-section">
<div class="container">
<!-- Logo and About Section -->
<div class="footer-logo-about">
<a href="index.html" class="footer-logo-link">
<img src="images/logo.png" alt="Code Social Logo" class="footer-logo animated-logo">
<span class="website-name">Code Social</span>
</a>
<p class="footer-about-text">
Code Social Community is a vibrant and inclusive space for tech enthusiasts <br> to learn, grow, and
connect. Founded in 2023, our mission is to empower individuals <br> with resources, mentorship, and
opportunities to cultivate their skills, explore their interests, and <br>collaborate with
like-minded peers.
</p>
</div>

<!-- Links Section -->
<div class="footer-links">
<div class="footer-column">
<p class="footer-title">Quick Links</p>
<ul class="footer-list">
<li><a href="#">About Us</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="#">Community Guidelines</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="footer-column">
<p class="footer-title">Help</p>
<ul class="footer-list">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Volunteer Opportunities</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
<!-- Links Section -->
<div class="footer-links">
<div class="footer-column">
<p class="footer-title">Quick Links</p>
<ul class="footer-list">
<li><a href="#" class="footer-link">About Us</a></li>
<li><a href="events.html" class="footer-link">Events</a></li>
<li><a href="#" class="footer-link">Community Guidelines</a></li>
<li><a href="#" class="footer-link">Careers</a></li>
</ul>
</div>
<div class="footer-column">
<p class="footer-title">Help</p>
<ul class="footer-list">
<li><a href="#" class="footer-link">Contact Us</a></li>
<li><a href="#" class="footer-link">Volunteer Opportunities</a></li>
<li><a href="#" class="footer-link">Terms & Conditions</a></li>
</ul>
</div>
</div>

<!-- Footer Bottom -->
<hr class="footer-divider">
<p class="footer-bottom-text">© Copyright 2024, All Rights Reserved by Code Social</p>
</footer>
<!-- Newsletter Section -->
<div class="footer-newsletter-container">
<div class="footer-newsletter animated-newsletter">
<p class="footer-title">Stay Updated</p>
<br>
<p class="newsletter-text">Subscribe to our newsletter for the latest updates and community news.</p>
<br>
<form class="newsletter-form">
<input type="email" class="newsletter-input" placeholder="Your Email Address" required>
<button type="submit" class="newsletter-btn">Subscribe</button>
</form>
</div>

<div class="social-icons">
<a href="https://wa.me/your-whatsapp-number" target="_blank" class="social-icon-link">
<img src="./images/whatsapp-icon.png" alt="WhatsApp" class="social-icon">
</a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank" class="social-icon-link">
<img src="./images/discord-icon.png" alt="Discord" class="social-icon">
</a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank" class="social-icon-link">
<img src="./images/linkedin-icon.png" alt="LinkedIn" class="social-icon">
</a>
<a href="https://github.com/Code-Social" target="_blank" class="social-icon-link">
<img src="./images/gitHub.png" alt="GitHub" class="social-icon">
</a>
</div>
</div>
</div>

<!-- Footer Bottom -->
<hr class="footer-divider">
<p class="footer-bottom-text">© Copyright 2024, All Rights Reserved by Code Social</p>
</footer>


<script>
Expand Down
234 changes: 229 additions & 5 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -502,7 +502,7 @@ body.dark-mode .calendar-day:hover {
color: orangered;
}
.dark-mode .website-name {
color: white;
color: rgb(20, 19, 19);
}
.dark-mode .website-name li{
color: white;
Expand Down Expand Up @@ -1051,7 +1051,7 @@ body.dark-mode #theme-switch {
/* Footer Styles */
/* General Styling for Footer */
.footer-section {
background-color: #f9fafb;
background-color: #0c0c0d;
padding: 3rem 1rem;
color: #6b7280;
font-family: 'Arial', sans-serif;
Expand All @@ -1065,14 +1065,13 @@ body.dark-mode #theme-switch {

/* Dark Mode Footer */
.dark-mode-footer {
background-color: #2E2E2E;
background-color: #070707;
color: #fff;
}

.dark-text {
color: #f1f1f1;
color: #070707;
}

.light-text {
color: black;
}
Expand Down Expand Up @@ -1179,3 +1178,228 @@ body.dark-mode #theme-switch {
font-size: 0.875rem;
color: #6b7280;
}
/* Footer Styling */
.footer-section {
background-color: #faf9f9;
color: #eee;
padding: 2rem;
text-align: center;
}

.footer-logo-about {
margin-bottom: 1.5rem;
}

.footer-logo-link {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: #eee;
animation: fadeIn 1.2s ease-in-out;
}

.footer-logo {
width: 50px;
transition: transform 0.3s ease;
}

.animated-logo:hover {
transform: rotate(360deg);
}

.website-name {
font-size: 1.5rem;
font-weight: bold;
}

.footer-about-text {
max-width: 600px;
margin: 0.5rem auto;
font-size: 1rem;
line-height: 1.5;
}

.social-icons {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 1rem;
}

.social-icon {
width: 24px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-icon-link:hover .social-icon {
transform: scale(1.2);
box-shadow: 0px 0px 5px #aaa;
}

/* Links Section */
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 1.5rem;
}

.footer-column {
text-align: left;
}

.footer-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #ffcc00;
}

.footer-list {
list-style: none;
padding: 0;
}

.footer-link {
color: #eee;
text-decoration: none;
font-size: 1rem;
transition: color 0.3s;
}

.footer-link:hover {
color: #ffcc00;
}

/* Footer Bottom */
.footer-divider {
margin: 1rem 0;
border: 0;
border-top: 1px solid #555;
}

.footer-bottom-text {
font-size: 0.9rem;
color: #888;
animation: fadeInUp 1.2s ease;
}

/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Link Hover Underline Effect */
.footer-link {
color: #eee;
text-decoration: none;
font-size: 1rem;
position: relative;
transition: color 0.3s;
}

.footer-link::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: #ffcc00;
transform: scaleX(0);
transition: transform 0.3s ease;
transform-origin: left;
}

.footer-link:hover {
color: #ffcc00;
}

.footer-link:hover::after {
transform: scaleX(1);
}
/* Footer Text Animations */
.footer-about-text, .footer-bottom-text, .footer-title, .footer-link {
position: relative;
display: inline-block;
animation: fadeInUp 1.2s ease;
transition: color 0.3s ease;
}

/* Wiggle Effect on Hover */
.footer-about-text:hover,
.footer-bottom-text:hover,
.footer-title:hover,
.footer-link:hover {
color: #ffcc00;
animation: wiggle 0.4s ease-in-out;
}

/* Keyframes for Wiggle */
@keyframes wiggle {
0%, 100% { transform: rotate(0); }
25% { transform: rotate(2deg); }
50% { transform: rotate(-2deg); }
75% { transform: rotate(1deg); }
}

/* Fade-in Animation for Initial Load */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animated-newsletter {
animation: fadeInUp 1s ease-out forwards;
opacity: 0;
}

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

.newsletter-input, .newsletter-btn {
transition: all 0.3s ease;
}
.newsletter-text {
color: black;
}

.newsletter-input:hover, .newsletter-btn:hover {
transform: scale(1.05);
}

.newsletter-input {
padding: 8px;
margin-right: 8px;
}

.newsletter-btn {
padding: 8px 16px;
background-color: #007bff;
color: #121111;
border: none;
cursor: pointer;
}