Magie de décembre-tutoriel CSS-php.cn

Ceci est une soumission pour Frontend Challenge - Édition de décembre, Glam Up My Markup: Winter Solstice

Ce que j'ai construit

J'ai créé "December Magic", une page de destination réactive et visuellement captivante célébrant les merveilles de décembre. Mon objectif était de combiner la chaleur de la saison avec une expérience utilisateur interactive. Les fonctionnalités de la page de destination :

- 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

Copier après la connexion

.
Grâce à ce projet, j'avais pour objectif d'améliorer mes compétences en développement frontend tout en embrassant l'esprit festif.

Démo en direct du projet
_Code source sur GitHub--->

CodePen :

_

<!DOCTYPE html><br>
<html lang="en">

<p><head><br>
  <meta charset="UTF-8"><br>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>
  <title>December - A Month of Wonder</title><br>
  <link rel="stylesheet" href="style.css"></p>

<p></head></p>

<p><body><br>
  <div>

<p><nav>
    <div class="nav-container"><br>
      <a href="#">
      <div class="nav-links"><br>
        <a href="#winter-section">Winter</a><br>
        <a href="#holidays-section">Holidays</a><br>
        <a href="#traditions-section">Traditions</a><br>
        <a href="#about-section">About</a><br>
      </div><br>
    </div><br>
  </nav></p>

<p><header><br>
    <h1>December Magic</h1><br>
    <div>
      Countdown to New Year 2025<br>
    </div><br>
    <div>
      <div class="countdown-box"><br>
        <div>
        <div class="countdown-label">Days</div><br>
      </div><br>
      <div>
        <div class="countdown-number">
        <div class="countdown-label">Hours</div><br>
      </div><br>
      <div>
        <div class="countdown-number">
        <div class="countdown-label">Minutes</div><br>
      </div><br>
      <div>
        <div class="countdown-number">
        <div class="countdown-label">Seconds</div><br>
      </div><br>
    </div><br>
  </header></p>

<p><main>
    <section class="section">
      <h2>Winter Wonder</h2><br>
      <p>
        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.<br>
      </p><br>
      <div>
        <div class="nature-item"><br>
          <h3>Winter Solstice</h3><br>
          <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><br>
        </div><br>
        <div>
          <h3>Snowy Landscapes</h3><br>
          <p>Experience the tranquil beauty of snow-covered landscapes, where every branch and surface is decorated with nature's own crystalline artwork.</p><br>
        </div><br>
        <div>
          <h3>Frost Patterns</h3><br>
          <p>Discover the intricate patterns of frost that transform windows and leaves into natural masterpieces, each design unique and ephemeral.</p><br>
        </div><br>
      </div><br>
    </section></p>

<pre class="brush:php;toolbar:false"><section class="section">

<p></main>

<p><footer><br>
    <p>Embrace the magic of December ❄️</p><br>
  </footer></p>

<p><script src="script.js"></script></p>

<p></body></p>

<p></html></p>

Copier après la connexion

* {<br>
  margin: 0;<br>
  padding: 0;<br>
  box-sizing: border-box;<br>
  font-family: "Arial", sans-serif;<br>
}

<p>body {<br>
  background-image: url("/api/placeholder/1920/1080");<br>
  background-size: cover;<br>
  background-attachment: fixed;<br>
  background-position: center;<br>
  color: #fff;<br>
  min-height: 100vh;<br>
}</p>

<p>.navbar {<br>
  background: rgba(0, 0, 0, 0.8);<br>
  padding: 1rem 0;<br>
  position: sticky;<br>
  top: 0;<br>
  z-index: 1000;<br>
}</p>

<p>.nav-container {<br>
  max-width: 1200px;<br>
  margin: 0 auto;<br>
  display: flex;<br>
  justify-content: space-between;<br>
  align-items: center;<br>
  padding: 0 2rem;<br>
}</p>

<p>.nav-logo {<br>
  font-size: 1.5rem;<br>
  font-weight: bold;<br>
  color: #ff9999;<br>
  text-decoration: none;<br>
}</p>

<p>.nav-links {<br>
  display: flex;<br>
  gap: 2rem;<br>
}</p>

<p>.nav-links a {<br>
  color: #fff;<br>
  text-decoration: none;<br>
  padding: 0.5rem 1rem;<br>
  border-radius: 5px;<br>
  transition: background-color 0.3s;<br>
}</p>

<p>.nav-links a:hover {<br>
  background-color: rgba(255, 255, 255, 0.1);<br>
}</p>

<p>header {<br>
  text-align: center;<br>
  padding: 4rem 2rem;<br>
  background: rgba(0, 0, 0, 0.5);<br>
}</p>

<p>h1 {<br>
  font-size: 3rem;<br>
  margin-bottom: 1rem;<br>
  color: #e6e6ff;<br>
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);<br>
}</p>

<p>.countdown {<br>
  font-size: 1.5rem;<br>
  margin: 1rem 0;<br>
  padding: 1rem;<br>
  background: rgba(255, 255, 255, 0.1);<br>
  border-radius: 10px;<br>
}</p>

<p>.countdown-container {<br>
  display: flex;<br>
  justify-content: center;<br>
  gap: 2rem;<br>
  margin: 1.5rem 0;<br>
}</p>

<p>.countdown-box {<br>
  background: rgba(255, 255, 255, 0.1);<br>
  padding: 1rem;<br>
  border-radius: 10px;<br>
  min-width: 100px;<br>
  text-align: center;<br>
}</p>

<p>.countdown-number {<br>
  font-size: 2.5rem;<br>
  font-weight: bold;<br>
  color: #ff9999;<br>
  margin-bottom: 0.5rem;<br>
}</p>

<p>.countdown-label {<br>
  font-size: 0.9rem;<br>
  color: #fff;<br>
  text-transform: uppercase;<br>
  letter-spacing: 1px;<br>
}</p>

<p>.main-content {<br>
  max-width: 1200px;<br>
  margin: 0 auto;<br>
  padding: 2rem;<br>
}</p>

<p>.section {<br>
  background: rgba(0, 0, 0, 0.7);<br>
  margin: 2rem 0;<br>
  padding: 2rem;<br>
  border-radius: 15px;<br>
}</p>

<p>.section-description {<br>
  color: #ccc;<br>
  margin-bottom: 1.5rem;<br>
  line-height: 1.6;<br>
}</p>

<p>h2 {<br>
  color: #ff9999;<br>
  margin-bottom: 1rem;<br>
  padding-bottom: 0.5rem;<br>
  border-bottom: 2px solid rgba(255, 153, 153, 0.3);<br>
}</p>

<p>.holiday-card {<br>
  background: rgba(255, 255, 255, 0.1);<br>
  padding: 1.5rem;<br>
  margin: 1rem 0;<br>
  border-radius: 10px;<br>
}</p>

<p>.nature-gallery {<br>
  display: grid;<br>
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));<br>
  gap: 1.5rem;<br>
  margin-top: 1rem;<br>
}</p>

<p>.nature-item {<br>
  background: rgba(255, 255, 255, 0.1);<br>
  padding: 1.5rem;<br>
  border-radius: 10px;<br>
  text-align: center;<br>
}</p>

<p>.festival-list {<br>
  list-style: none;<br>
}</p>

<p>.festival-list li {<br>
  margin: 1rem 0;<br>
  padding: 1rem;<br>
  background: rgba(255, 255, 255, 0.1);<br>
  border-radius: 10px;<br>
}</p>

<p>footer {<br>
  text-align: center;<br>
  padding: 2rem;<br>
  background: rgba(0, 0, 0, 0.8);<br>
  margin-top: 3rem;<br>
}</p>

<p>.snow-overlay {<br>
  position: fixed;<br>
  top: 0;<br>
  left: 0;<br>
  width: 100%;<br>
  height: 100%;<br>
  background-image: radial-gradient(<br>
      2px 2px at 20px 30px,<br>
      #fff,<br>
      rgba(0, 0, 0, 0)<br>
    ),<br>
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0, 0, 0, 0)),<br>
    radial-gradient(2px 2px at 50px 160px, #fff, rgba(0, 0, 0, 0)),<br>
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0, 0, 0, 0)),<br>
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0, 0, 0, 0)),<br>
    radial-gradient(2px 2px at 160px 120px, #fff, rgba(0, 0, 0, 0));<br>
  background-repeat: repeat;<br>
  pointer-events: none;<br>
  z-index: 1;<br>
  opacity: 0.4;<br>
}<br>
</p>

Copier après la connexion

function updateCountdown() {<br>
  const now = new Date();<br>
  const newYear = new Date(2025, 0, 1); // January 1, 2025<br>
  const diff = newYear - now;

<p>const days = Math.floor(diff / (1000 * 60 * 60 * 24));<br>
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));<br>
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));<br>
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);</p>

<p>document.getElementById("days").textContent = days<br>
    .toString()<br>
    .padStart(2, "0");<br>
  document.getElementById("hours").textContent = hours<br>
    .toString()<br>
    .padStart(2, "0");<br>
  document.getElementById("minutes").textContent = minutes<br>
    .toString()<br>
    .padStart(2, "0");<br>
  document.getElementById("seconds").textContent = seconds<br>
    .toString()<br>
    .padStart(2, "0");<br>
}</p>

<p>setInterval(updateCountdown, 1000);<br>
updateCountdown();<br>
</p>

Copier après la connexion

December Magic

Voyage
Ce projet était une exploration passionnante des technologies frontend, notamment HTML, CSS et JavaScript. Voici ce que j'ai appris et réalisé :

Défis et solutions :
Compte à rebours : la mise en œuvre du compte à rebours a nécessité d'apprendre à calculer et à afficher les différences horaires dynamiques à l'aide de JavaScript.
Cohérence de la conception : assurer une apparence uniforme sur tous les appareils m'a appris à prêter attention aux principes de conception réactive.
Éléments interactifs : les effets de survol et les transitions ont contribué à améliorer l'engagement des utilisateurs.
Points forts :
CSS Snow Overlay : créer un subtil effet de chute de neige avec des dégradés radiaux CSS était une façon amusante de donner vie à la magie de l'hiver.
Sections dynamiques : l'utilisation d'une disposition en grille pour la « Galerie de la nature » a rendu la page visuellement attrayante et adaptative aux tailles d'écran.
Et ensuite :
Ajoutez des animations festives, comme des lumières lumineuses pour les vacances.
Incluez des fonctionnalités d'interaction utilisateur comme une section « Écrivez votre souhait » pour les résolutions du Nouvel An.
Ce projet a été une expérience d’apprentissage incroyable et je suis ravi de le partager avec la communauté. Les commentaires sont les bienvenus !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!