DEV Community

Cover image for December Magic
Aditya Debnath
Aditya Debnath

Posted on

3 3 4 4 4

December Magic

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
Enter fullscreen mode Exit fullscreen mode

.
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--->

CodePen:

_

`


<!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>

&lt;section class="section" id="holidays-section">
  &lt;h2>Holiday Celebrations&lt;/h2>
  &lt;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.
  &lt;/p>
  &lt;div class="festival-list">
    &lt;div class="holiday-card">
      &lt;h3>Christmas&lt;/h3>
      &lt;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.&lt;/p>
    &lt;/div>
    &lt;div class="holiday-card">
      &lt;h3>Hanukkah&lt;/h3>
      &lt;p>The Festival of Lights commemorates the rededication of the Second Temple in Jerusalem with eight nights of candle lighting, traditional foods, and games.&lt;/p>
    &lt;/div>
    &lt;div class="holiday-card">
      &lt;h3>Kwanzaa&lt;/h3>
      &lt;p>December 26th - January 1st - A celebration of African American culture and heritage, focusing on seven core principles including unity, creativity, and faith.&lt;/p>
    &lt;/div>
  &lt;/div>
&lt;/section>

&lt;section class="section" id="traditions-section">
  &lt;h2>December Traditions&lt;/h2>
  &lt;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.
  &lt;/p>
  &lt;ul class="festival-list">
    &lt;li>Holiday decorating and light displays - Communities transform with twinkling lights and festive decorations&lt;/li>
    &lt;li>Family gatherings and festive meals - Special recipes and shared meals strengthen family bonds&lt;/li>
    &lt;li>Gift exchanges and charitable giving - The spirit of generosity flourishes during this season&lt;/li>
    &lt;li>Carol singing and holiday music - Traditional songs and modern classics fill the air&lt;/li>
    &lt;li>New Year's Eve celebrations - Communities worldwide prepare to welcome the coming year&lt;/li>
  &lt;/ul>
&lt;/section>

&lt;section class="section" id="about-section">
  &lt;h2>About December&lt;/h2>
  &lt;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.
  &lt;/p>
&lt;/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();


`

Image description

Image description

Image description

Image description

Image description

Image description

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)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay