Skip to content

Commit d01d387

Browse files
steam-bell-92steam-bell-92
authored
Merge pull request steam-bell-92#1338 from parulpaliwal01/main
Improve footer link and social icon hover effects
2 parents db1c84f + 94d7e18 commit d01d387

2 files changed

Lines changed: 182 additions & 29 deletions

File tree

‎web-app/css/styles.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5826,6 +5826,28 @@ button:focus-visible,
58265826
-webkit-backdrop-filter: none;
58275827
}
58285828

5829+
.footer-social-icons a {
5830+
display: flex;
5831+
align-items: center;
5832+
justify-content: center;
5833+
width: 40px;
5834+
height: 40px;
5835+
border-radius: 50%;
5836+
background: rgba(34, 197, 94, 0.08);
5837+
color: var(--accent-color);
5838+
font-size: 1.2rem;
5839+
transition: var(--transition);
5840+
border: 1px solid rgba(34, 197, 94, 0.15);
5841+
text-decoration: none;
5842+
transition: all 0.35s ease;
5843+
}
5844+
5845+
.footer-social-icons a:hover {
5846+
background: var(--accent-color);
5847+
color: var(--on-accent);
5848+
transform: translateY(-5px);
5849+
box-shadow: 0 10px 20px rgba(34, 197, 94, 0.3);
5850+
transform: translateY(-5px) scale(1.08);
58295851
.project-card:hover {
58305852
transform: translateY(-6px);
58315853
border-color: var(--accent-color);
@@ -5836,7 +5858,62 @@ button:focus-visible,
58365858
background: #ffffff;
58375859
border-color: rgba(106, 191, 141, 0.4);
58385860
}
5861+
.footer-social-icons .github:hover i {
5862+
filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
5863+
}
5864+
5865+
.footer-social-icons .github:hover {
5866+
background: #a09999;
5867+
color: #181717;
5868+
5869+
box-shadow:
5870+
0 0 8px rgba(255,255,255,0.35),
5871+
0 0 18px rgba(255,255,255,0.22),
5872+
0 0 32px rgba(255,255,255,0.12);
5873+
5874+
transform: translateY(-5px) scale(1.08);
5875+
}
5876+
5877+
.footer-social-icons .twitter:hover {
5878+
background: #1DA1F2;
5879+
color: white;
5880+
box-shadow:
5881+
0 0 10px rgba(29,161,242,0.8),
5882+
0 0 25px rgba(29,161,242,0.5),
5883+
0 0 45px rgba(29,161,242,0.25);
5884+
}
5885+
5886+
.footer-social-icons .linkedin:hover {
5887+
background: #0A66C2;
5888+
color: white;
5889+
box-shadow:
5890+
0 0 10px rgba(10,102,194,0.8),
5891+
0 0 25px rgba(10,102,194,0.5),
5892+
0 0 45px rgba(10,102,194,0.25);
5893+
}
5894+
5895+
.footer-social-icons .instagram:hover {
5896+
background: linear-gradient(
5897+
135deg,
5898+
#f58529,
5899+
#dd2a7b,
5900+
#8134af,
5901+
#515bd4
5902+
);
5903+
color: white;
58395904

5905+
box-shadow:
5906+
0 0 12px rgba(221,42,123,0.8),
5907+
0 0 30px rgba(129,52,175,0.5),
5908+
0 0 55px rgba(81,91,212,0.25);
5909+
}
5910+
.footer-links h3,
5911+
.footer-newsletter h3 {
5912+
font-size: 1.2rem;
5913+
color: var(--text-color);
5914+
margin-bottom: 1.5rem;
5915+
position: relative;
5916+
padding-bottom: 0.5rem;
58405917
[data-theme="dark"] .project-card {
58415918
background: #1e1a18;
58425919
border-color: rgba(159, 221, 181, 0.3);
@@ -5861,6 +5938,47 @@ button:focus-visible,
58615938
width: 100%;
58625939
}
58635940

5941+
.footer-links a {
5942+
color: var(--text-secondary);
5943+
text-decoration: none;
5944+
transition: var(--transition);
5945+
display: flex;
5946+
align-items: center;
5947+
gap: 0.5rem;
5948+
transition: all 0.3s ease;
5949+
position: relative;
5950+
5951+
}
5952+
.footer-links a::before {
5953+
content: "";
5954+
width: 5px;
5955+
height: 5px;
5956+
border-radius: 50%;
5957+
background: #c084fc; /* violet */
5958+
position: absolute;
5959+
left: -12px;
5960+
opacity: 0;
5961+
transition: all 0.3s ease;
5962+
}
5963+
5964+
.footer-links a:hover {
5965+
transform: translateX(6px);
5966+
color: #c084fc;
5967+
}
5968+
5969+
.footer-links a:hover::before {
5970+
opacity: 1;
5971+
left: -8px;
5972+
background: #c084fc;
5973+
}
5974+
.footer-links a i {
5975+
font-size: 0.9rem;
5976+
color: var(--accent-color);
5977+
opacity: 0.7;
5978+
transition: var(--transition);
5979+
}
5980+
5981+
58645982
.card-actions .btn-play {
58655983
margin-top: 0;
58665984
padding: 0.5rem 1rem;

‎web-app/index.html‎

Lines changed: 64 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -758,35 +758,70 @@ <h2 class="playground-title">🐍 Python Playground</h2>
758758

759759
<!-- Footer -->
760760
<footer class="footer">
761-
<div class="container">
762-
<div class="footer-content">
763-
<div class="footer-brand">
764-
<h2>Python Mini Projects</h2>
765-
<p>
766-
Learn Python the Fun Way! Interactive games, math visualizations,
767-
and utilities built directly in your browser.
768-
</p>
769-
<div class="footer-social-icons">
770-
<a
771-
aria-label="GitHub"
772-
href="https://github.com/steam-bell-92/python-mini-project"
773-
rel="noopener noreferrer"
774-
target="_blank"
775-
><i class="fab fa-github"></i
776-
></a>
777-
<a aria-label="Twitter" href="https://x.com/AnujKulkarni040"
778-
><i class="fab fa-twitter"></i
779-
></a>
780-
<a
781-
aria-label="LinkedIn"
782-
href="https://www.linkedin.com/in/anuj-chandrakant-kulkarni"
783-
><i class="fab fa-linkedin"></i
784-
></a>
785-
<a
786-
aria-label="YouTube"
787-
href="https://www.instagram.com/obscura.nuj"
788-
><i class="fab fa-instagram"></i
789-
></a>
761+
<div class="container">
762+
<div class="footer-content">
763+
<div class="footer-brand">
764+
<h2>🎮 Python Mini Projects</h2>
765+
<p>Learn Python the Fun Way! Interactive games, math visualizations, and utilities built directly in
766+
your browser.</p>
767+
<div class="footer-social-icons">
768+
<a href="https://github.com/steam-bell-92/python-mini-project" target="_blank" class="github"
769+
rel="noopener noreferrer" aria-label="GitHub"><i class="fab fa-github"></i></a>
770+
<a href="https://x.com/AnujKulkarni040" class="twitter" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
771+
<a href="https://www.linkedin.com/in/anuj-chandrakant-kulkarni" class="linkedin" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
772+
<a href="https://www.instagram.com/obscura.nuj" class="instagram" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
773+
</div>
774+
</div>
775+
<div class="footer-links">
776+
<h3>Quick Links</h3>
777+
<ul>
778+
<li><a href="#main-content"
779+
onclick="document.querySelector('[data-category=\'games\']').click()">Games</a></li>
780+
<li><a href="#main-content"
781+
onclick="document.querySelector('[data-category=\'math\']').click()">Math</a></li>
782+
<li><a href="#main-content"
783+
onclick="document.querySelector('[data-category=\'utilities\']').click()">Utilities</a></li>
784+
<li><a href="#main-content"
785+
onclick="document.querySelector('[data-category=\'favorites\']').click()">⭐
786+
Favorites</a></li>
787+
<li><a href="#main-content"
788+
onclick="document.querySelector('[data-category=\'playground\']').click()">🐍
789+
Playground</a></li>
790+
</ul>
791+
</div>
792+
<div class="footer-links">
793+
<h3>Resources</h3>
794+
<ul>
795+
<li><a href="https://github.com/steam-bell-92/python-mini-project/blob/main/README.md"><i
796+
class="fas fa-book" aria-hidden="true"></i> Documentation</a></li>
797+
<li><a
798+
href="https://github.com/steam-bell-92/python-mini-project/blob/a54ac8251fd79a6b7f4e43b54720c7f45225ac7e/CONTRIBUTING.md"><i
799+
class="fas fa-code-branch" aria-hidden="true"></i>
800+
Contribute</a></li>
801+
<li><a href="https://github.com/steam-bell-92/python-mini-project/issues/new"><i
802+
class="fas fa-bug" aria-hidden="true"></i> Report a Bug</a></li>
803+
<li><a href="https://github.com/steam-bell-92/python-mini-project/blob/main/README.md"><i
804+
class="fas fa-question-circle" aria-hidden="true"></i> FAQ</a></li>
805+
</ul>
806+
</div>
807+
<div class="footer-newsletter">
808+
<h3>Stay Updated</h3>
809+
<p>Get notified about new projects and features!</p>
810+
<form class="newsletter-form" onsubmit="event.preventDefault(); alert('Thanks for subscribing!');">
811+
<input type="email" placeholder="Enter your email" required aria-label="Email for newsletter">
812+
<button type="submit" aria-label="Subscribe">
813+
<i class="fas fa-paper-plane"></i>
814+
</button>
815+
</form>
816+
</div>
817+
</div>
818+
<div class="footer-bottom">
819+
<div class="footer-bottom-links">
820+
<a href="#">Privacy Policy</a>
821+
<span class="separator">•</span>
822+
<a href="#">Terms of Service</a>
823+
</div>
824+
<p>Made with ❤️ for Python learners everywhere &copy; 2026</p>
790825
</div>
791826
</div>
792827
<div class="footer-links">

0 commit comments

Comments
 (0)