This is a submission for Frontend Challenge - June Celebrations, Perfect Landing: June Celebrations
What I Built
A vibrant Pride Month 2025 landing page celebrating love, equality, and community. I chose Pride Month because it represents not just celebration, but remembrance of the courage shown at Stonewall and the ongoing fight for LGBTQ+ rights worldwide.
Features:
- Interactive timeline of LGBTQ+ milestones
- 2025 Pride events worldwide
- Accessibility-first design with ARIA labels and keyboard navigation
- Dynamic rainbow animations using Pride flag colors
- Responsive glassmorphism design
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pride Month 2025 - Celebrate Love, Equality & Community</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--pride-red: #e40303;
--pride-orange: #ff8c00;
--pride-yellow: #ffed00;
--pride-green: #008018;
--pride-blue: #0066cc;
--pride-purple: #8b00ff;
--dark-bg: #1a1a2e;
--light-text: #ffffff;
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--light-text);
background: linear-gradient(135deg, var(--dark-bg) 0%, #16213e 100%);
overflow-x: hidden;
}
.rainbow-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,
var(--pride-red),
var(--pride-orange),
var(--pride-yellow),
var(--pride-green),
var(--pride-blue),
var(--pride-purple)
);
opacity: 0.1;
z-index: -1;
animation: rainbow-shift 10s ease-in-out infinite;
}
@keyframes rainbow-shift {
0%, 100% { transform: translateX(0) rotate(0deg); }
50% { transform: translateX(20px) rotate(2deg); }
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
padding: 20px 0;
position: relative;
z-index: 100;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 15px 30px;
margin: 0 20px;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
background: linear-gradient(45deg, var(--pride-red), var(--pride-orange), var(--pride-yellow), var(--pride-green), var(--pride-blue), var(--pride-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: logo-glow 3s ease-in-out infinite;
}
@keyframes logo-glow {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.3); }
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: var(--light-text);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.nav-links a:hover {
transform: translateY(-2px);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--pride-red), var(--pride-purple));
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
.hero {
text-align: center;
padding: 100px 0;
position: relative;
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
margin-bottom: 20px;
background: linear-gradient(45deg, var(--pride-red), var(--pride-orange), var(--pride-yellow), var(--pride-green), var(--pride-blue), var(--pride-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: text-shine 4s ease-in-out infinite;
}
@keyframes text-shine {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.hero p {
font-size: 1.3rem;
margin-bottom: 40px;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-button {
display: inline-block;
padding: 15px 40px;
background: linear-gradient(45deg, var(--pride-red), var(--pride-purple));
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.cta-button:hover::before {
left: 100%;
}
.cta-button:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
.features {
padding: 80px 0;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.feature-card {
backdrop-filter: blur(15px);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, var(--pride-red), var(--pride-orange), var(--pride-yellow), var(--pride-green), var(--pride-blue), var(--pride-purple), var(--pride-red));
opacity: 0;
animation: rotate 4s linear infinite;
transition: opacity 0.3s ease;
}
.feature-card:hover::before {
opacity: 0.1;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 20px;
background: linear-gradient(45deg, var(--pride-red), var(--pride-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--light-text);
}
.feature-card p {
opacity: 0.8;
line-height: 1.6;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 20px;
background: linear-gradient(45deg, var(--pride-red), var(--pride-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
text-align: center;
font-size: 1.2rem;
opacity: 0.8;
max-width: 600px;
margin: 0 auto;
}
.flag-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: linear-gradient(90deg, var(--pride-red), var(--pride-orange), var(--pride-yellow), var(--pride-green), var(--pride-blue), var(--pride-purple));
z-index: 1000;
animation: flag-wave 3s ease-in-out infinite;
}
@keyframes flag-wave {
0%, 100% { transform: scaleX(1); }
50% { transform: scaleX(1.02); }
}
.footer {
text-align: center;
padding: 60px 0;
backdrop-filter: blur(15px);
background: var(--glass-bg);
border-top: 1px solid var(--glass-border);
}
.footer h3 {
font-size: 1.8rem;
margin-bottom: 20px;
background: linear-gradient(45deg, var(--pride-red), var(--pride-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@media (max-width: 768px) {
.nav {
flex-direction: column;
gap: 20px;
padding: 20px;
}
.nav-links {
gap: 20px;
}
.hero {
padding: 60px 0;
}
.features-grid {
grid-template-columns: 1fr;
}
}
.accessibility-skip {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.accessibility-skip:focus {
position: fixed;
top: 20px;
left: 20px;
width: auto;
height: auto;
padding: 10px 20px;
background: var(--dark-bg);
color: var(--light-text);
border-radius: 5px;
z-index: 9999;
text-decoration: none;
}
</style>
</head>
<body>
<div class="rainbow-bg"></div>
<div class="flag-animation"></div>
<a href="#main-content" class="accessibility-skip">Skip to main content</a>
<header>
<nav class="nav" role="navigation" aria-label="Main navigation">
<div class="logo">🏳️🌈 Pride 2025</div>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#history">History</a></li>
<li><a href="#events">Events</a></li>
</ul>
</nav>
</header>
<main id="main-content">
<section class="hero">
<div class="container">
<h1>Love Wins, Every Day</h1>
<p>Join us in celebrating Pride Month 2025 - a time to honor our history, celebrate our progress, and continue the fight for equality and acceptance for all LGBTQ+ individuals worldwide.</p>
<a href="#events" class="cta-button" aria-label="View Pride Month events">Explore Events</a>
</div>
</section>
<section id="about" class="features">
<div class="container">
<h2 class="section-title">Why Pride Matters</h2>
<p class="section-subtitle">Pride Month is more than celebration - it's remembrance, resistance, and hope for a more inclusive future.</p>
<div class="features-grid">
<article class="feature-card">
<div class="feature-icon">🏛️</div>
<h3>Historical Significance</h3>
<p>Commemorating the Stonewall Riots of 1969 and the birth of the modern LGBTQ+ rights movement.</p>
</article>
<article class="feature-card">
<div class="feature-icon">🤝</div>
<h3>Community & Unity</h3>
<p>Building bridges between diverse communities, fostering understanding, and creating safe spaces.</p>
</article>
<article class="feature-card">
<div class="feature-icon">⚖️</div>
<h3>Ongoing Advocacy</h3>
<p>Fighting for equal rights, protections, and opportunities. The work continues every day of the year.</p>
</article>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<h3>Love is Love 🌈</h3>
<p>© 2025 Pride Month Celebration. Love wins, always.</p>
</div>
</footer>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Add animation on scroll
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe elements for animation
document.querySelectorAll('.feature-card').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
// Dynamic rainbow background
const rainbowBg = document.querySelector('.rainbow-bg');
let hue = 0;
function updateRainbow() {
hue = (hue + 0.5) % 360;
rainbowBg.style.filter = `hue-rotate(${hue}deg)`;
requestAnimationFrame(updateRainbow);
}
updateRainbow();
</script>
</body>
</html>
Journey
Why Pride Month? As a celebration of love, resilience, and the ongoing fight for equality, Pride Month represents everything I believe web development should be - inclusive, accessible, and empowering.
Key Technical Highlights:
- Accessibility First: Skip links, ARIA labels, keyboard navigation, and screen reader optimization
- Performance: CSS animations using GPU acceleration for smooth 60fps effects
- Responsive Design: Mobile-first approach with glassmorphism effects
- Visual Storytelling: Dynamic rainbow animations and Pride flag color gradients
What I Learned:
- Advanced CSS animation techniques for performance
- Intersection Observer API for scroll-triggered animations
- Creating accessible interactive experiences
- Building inclusive design that welcomes everyone
The landing page celebrates not just the joy of Pride, but honors the courage of those who fought for our rights. Every rainbow gradient and smooth animation is a small tribute to the idea that love wins - but only when we keep building spaces where everyone belongs.
License: MIT - Feel free to use this code to create your own inclusive web experiences! 🌈
Pride Month is more than June - it's a year-round commitment to equality, love, and acceptance.
Top comments (0)