December Magic

Aditya Debnath — Sun, 29 Dec 2024 19:43:21 +0000

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

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();

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!

DEV Community: Aditya Debnath

December Magic

What I Built

_