コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > ディセンバーマジック

ディセンバーマジック

DDD
リリース： 2025-01-05 08:50:40
オリジナル
189 人が閲覧しました

これはフロントエンド チャレンジ - 12 月版、Glam Up My Markup: Winter Solstice への提出です

私が作ったもの

私は、12 月の素晴らしさを祝う、レスポンシブで視覚的に魅力的なランディング ページ「Decert Magic」を作成しました。私の目標は、季節の暖かさとインタラクティブなユーザー エクスペリエンスを組み合わせることでした。ランディング ページの特徴:

- 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
ログイン後にコピー

.
このプロジェクトを通じて、私はお祭り気分を味わいながらフロントエンド開発スキルを向上させることを目指しました。

プロジェクトのライブデモ
_GitHub のソース コード --->

コードペン:

_

`


<!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>
ログイン後にコピー

* {<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>
ログイン後にコピー

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>
ログイン後にコピー

`

December Magic

December Magic

December Magic

December Magic

December Magic

December Magic

旅
このプロジェクトは、HTML、CSS、JavaScript などのフロントエンド テクノロジのエキサイティングな探究でした。私が学び、達成したことは次のとおりです:

課題と解決策:
カウントダウン タイマー: カウントダウン タイマーを実装するには、JavaScript を使用して動的な時差を計算して表示する方法を学習する必要がありました。
デザインの一貫性: デバイス間で統一した外観を確保することで、レスポンシブ デザインの原則に注意を払うようになりました。
インタラクティブな要素: ホバー効果とトランジションは、ユーザー エンゲージメントの向上に役立ちました。
ハイライト:
CSS 雪オーバーレイ: CSS 放射状グラデーションを使用して微妙な降雪効果を作成することは、冬の魔法に命を吹き込む楽しい方法でした。
動的セクション: 「ネイチャー ギャラリー」にグリッド レイアウトを使用することで、ページが視覚的に魅力的で、画面サイズに適応できるようになりました。
次は何ですか:
休日に光るライトなど、お祝いのアニメーションを追加します。
新年の抱負の「願い事を書く」セクションなどのユーザー インタラクション機能を組み込みます。
このプロジェクトは素晴らしい学習体験でした。それをコミュニティと共有できることを嬉しく思います。フィードバックは大歓迎です!

以上がディセンバーマジックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：ブラウザ間でテキストの不透明度に影響を与えずに透明な背景を作成するにはどうすればよいですか? 次の記事：4 でびっくりした CSS に関する記事
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2540
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2688
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2269
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
2136
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
2243
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート