This is a submission for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice
What I Built
I created "December Magic", a responsive and visually captivating landing page celebrating the wonders of December. My goal was to combine the warmth of the season with an interactive user experience. The landing page features:
- A sticky navigation bar for easy access to different sections.
- A countdown timer to New Year 2025, adding a sense of anticipation.
- Sections highlighting winter phenomena, holiday celebrations, and cultural traditions.
- A beautiful background with a "snow overlay" effect to immerse users in the winter theme
.
Through this project, I aimed to enhance my frontend development skills while embracing the festive spirit.
Live Demo of the Project
_Source Code on GitHub--->
_
`
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>December - A Month of Wonder</title>
<link rel="stylesheet" href="style.css"></head>
<body>
<div class="snow-overlay"></div><nav class="navbar">
<div class="nav-container">
<a href="#" class="nav-logo">December Magic</a>
<div class="nav-links">
<a href="#winter-section">Winter</a>
<a href="#holidays-section">Holidays</a>
<a href="#traditions-section">Traditions</a>
<a href="#about-section">About</a>
</div>
</div>
</nav><header>
<h1>December Magic</h1>
<div class="countdown">
Countdown to New Year 2025
</div>
<div class="countdown-container" id="countdown-clock">
<div class="countdown-box">
<div class="countdown-number" id="days">00</div>
<div class="countdown-label">Days</div>
</div>
<div class="countdown-box">
<div class="countdown-number" id="hours">00</div>
<div class="countdown-label">Hours</div>
</div>
<div class="countdown-box">
<div class="countdown-number" id="minutes">00</div>
<div class="countdown-label">Minutes</div>
</div>
<div class="countdown-box">
<div class="countdown-number" id="seconds">00</div>
<div class="countdown-label">Seconds</div>
</div>
</div>
</header><main class="main-content">
<section class="section" id="winter-section">
<h2>Winter Wonder</h2>
<p class="section-description">
December heralds the arrival of winter in the Northern Hemisphere, transforming landscapes into pristine wonderlands. This section explores the natural phenomena and celestial events that make December uniquely beautiful.
</p>
<div class="nature-gallery">
<div class="nature-item">
<h3>Winter Solstice</h3>
<p>December 21st marks the shortest day of the year, a pivotal moment in Earth's annual journey around the sun. This astronomical event has been celebrated by cultures worldwide for millennia.</p>
</div>
<div class="nature-item">
<h3>Snowy Landscapes</h3>
<p>Experience the tranquil beauty of snow-covered landscapes, where every branch and surface is decorated with nature's own crystalline artwork.</p>
</div>
<div class="nature-item">
<h3>Frost Patterns</h3>
<p>Discover the intricate patterns of frost that transform windows and leaves into natural masterpieces, each design unique and ephemeral.</p>
</div>
</div>
</section><section class="section" id="holidays-section"> <h2>Holiday Celebrations</h2> <p class="section-description"> December brings together people of various cultures and faiths in celebration. This section highlights the major holidays and festivals that make this month special for billions around the world. </p> <div class="festival-list"> <div class="holiday-card"> <h3>Christmas</h3> <p>December 25th - A celebration of joy, giving, and family togetherness. Christmas brings warmth to winter with its traditions of decorated trees, festive lights, and heartfelt gift-giving.</p> </div> <div class="holiday-card"> <h3>Hanukkah</h3> <p>The Festival of Lights commemorates the rededication of the Second Temple in Jerusalem with eight nights of candle lighting, traditional foods, and games.</p> </div> <div class="holiday-card"> <h3>Kwanzaa</h3> <p>December 26th - January 1st - A celebration of African American culture and heritage, focusing on seven core principles including unity, creativity, and faith.</p> </div> </div> </section> <section class="section" id="traditions-section"> <h2>December Traditions</h2> <p class="section-description"> Beyond specific holidays, December is rich with cultural traditions that bring communities together. This section explores the customs and activities that make this month memorable. </p> <ul class="festival-list"> <li>Holiday decorating and light displays - Communities transform with twinkling lights and festive decorations</li> <li>Family gatherings and festive meals - Special recipes and shared meals strengthen family bonds</li> <li>Gift exchanges and charitable giving - The spirit of generosity flourishes during this season</li> <li>Carol singing and holiday music - Traditional songs and modern classics fill the air</li> <li>New Year's Eve celebrations - Communities worldwide prepare to welcome the coming year</li> </ul> </section> <section class="section" id="about-section"> <h2>About December</h2> <p class="section-description"> December, derived from the Latin word "decem" meaning ten, was originally the tenth month of the Roman calendar. Today, it serves as a bridge between the old year and the new, combining ancient traditions with modern celebrations to create a truly magical month. </p> </section></main>
<footer>
<p>Embrace the magic of December ❄️</p>
</footer><script src="script.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Arial", sans-serif;
}
body {
background-image: url("/api/placeholder/1920/1080");
background-size: cover;
background-attachment: fixed;
background-position: center;
color: #fff;
min-height: 100vh;
}
.navbar {
background: rgba(0, 0, 0, 0.8);
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}
.nav-logo {
font-size: 1.5rem;
font-weight: bold;
color: #ff9999;
text-decoration: none;
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
color: #fff;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: background-color 0.3s;
}
.nav-links a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
header {
text-align: center;
padding: 4rem 2rem;
background: rgba(0, 0, 0, 0.5);
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: #e6e6ff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.countdown {
font-size: 1.5rem;
margin: 1rem 0;
padding: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
.countdown-container {
display: flex;
justify-content: center;
gap: 2rem;
margin: 1.5rem 0;
}
.countdown-box {
background: rgba(255, 255, 255, 0.1);
padding: 1rem;
border-radius: 10px;
min-width: 100px;
text-align: center;
}
.countdown-number {
font-size: 2.5rem;
font-weight: bold;
color: #ff9999;
margin-bottom: 0.5rem;
}
.countdown-label {
font-size: 0.9rem;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
}
.main-content {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.section {
background: rgba(0, 0, 0, 0.7);
margin: 2rem 0;
padding: 2rem;
border-radius: 15px;
}
.section-description {
color: #ccc;
margin-bottom: 1.5rem;
line-height: 1.6;
}
h2 {
color: #ff9999;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid rgba(255, 153, 153, 0.3);
}
.holiday-card {
background: rgba(255, 255, 255, 0.1);
padding: 1.5rem;
margin: 1rem 0;
border-radius: 10px;
}
.nature-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
}
.nature-item {
background: rgba(255, 255, 255, 0.1);
padding: 1.5rem;
border-radius: 10px;
text-align: center;
}
.festival-list {
list-style: none;
}
.festival-list li {
margin: 1rem 0;
padding: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
footer {
text-align: center;
padding: 2rem;
background: rgba(0, 0, 0, 0.8);
margin-top: 3rem;
}
.snow-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(
2px 2px at 20px 30px,
#fff,
rgba(0, 0, 0, 0)
),
radial-gradient(2px 2px at 40px 70px, #fff, rgba(0, 0, 0, 0)),
radial-gradient(2px 2px at 50px 160px, #fff, rgba(0, 0, 0, 0)),
radial-gradient(2px 2px at 90px 40px, #fff, rgba(0, 0, 0, 0)),
radial-gradient(2px 2px at 130px 80px, #fff, rgba(0, 0, 0, 0)),
radial-gradient(2px 2px at 160px 120px, #fff, rgba(0, 0, 0, 0));
background-repeat: repeat;
pointer-events: none;
z-index: 1;
opacity: 0.4;
}
function updateCountdown() {
const now = new Date();
const newYear = new Date(2025, 0, 1); // January 1, 2025
const diff = newYear - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
document.getElementById("days").textContent = days
.toString()
.padStart(2, "0");
document.getElementById("hours").textContent = hours
.toString()
.padStart(2, "0");
document.getElementById("minutes").textContent = minutes
.toString()
.padStart(2, "0");
document.getElementById("seconds").textContent = seconds
.toString()
.padStart(2, "0");
}
setInterval(updateCountdown, 1000);
updateCountdown();
`
Journey
This project was an exciting exploration of frontend technologies, including HTML, CSS, and JavaScript. Here’s what I learned and achieved:
Challenges and Solutions:
Countdown Timer: Implementing the countdown timer required learning how to calculate and display dynamic time differences using JavaScript.
Design Consistency: Ensuring a uniform look across devices taught me to pay attention to responsive design principles.
Interactive Elements: Hover effects and transitions helped improve user engagement.
Highlights:
CSS Snow Overlay: Creating a subtle snowfall effect with CSS radial gradients was a fun way to bring the magic of winter to life.
Dynamic Sections: Using a grid layout for the "Nature Gallery" made the page visually appealing and adaptive to screen sizes.
What’s Next:
Add festive animations, such as glowing lights for the holidays.
Include user interaction features like a "Write Your Wish" section for New Year resolutions.
This project was an incredible learning experience, and I’m thrilled to share it with the community. Feedback is welcome!
Top comments (0)