フロントエンド チャレンジ: 12 月版: Glam Up My Markup: 冬至

これは、フロントエンド チャレンジ - 12 月版、CSS アート: 12 月への提出物です。

インスピレーション

このチャレンジでは、冬至のストーリーを伝えながら、セクションごとに異なる体験を作成しようとしました。課題は、追加の div タグを使用して HTML ページをまったく編集できないことです。そのため、JavaScript で追加のタグを挿入する方法を見つける必要がありました。

私の CSS スキルが少し錆びているだけでなく、ビジュアル デザイン スキルも少し錆びています。

デモ

これが私のライブデモです
(https://december24-glamup.vercel.app/christmas.html)

そしてこれが私のコードです
https://github.com/aislinngreycat/payment-Dress-Up-CSS

画像は Unsplash から取得したもので、コードの一部をスキャフォールディングするために ChatGpt を使用しました。 ChatGPT を使用するとサンプル コードを探すのが非常に簡単になるのは興味深いことです。

旅

これは私の初めての全体的な挑戦であり、約 5 (?) 年ぶりの CSS 編集です。それ以来、多くのことが変わり、JavaScript がなくても多くの視覚効果が可能になったことを知ってうれしく思います。

冬至は「雪」を連想することが多いですが、必ずしもそうではありません。まったくクリスマスの話でもありません。世界には雪が降らずに 12 月 21 日を迎える場所がたくさんあり、クリスマスを祝わない文化もたくさんあります。
それは実際には地球と太陽の動き、そして日光がどのように変化するかについてです。それが私が伝えたかったことです。

祝賀と伝統のセクションは、これまで無視してきたものです。祝宴と社交行事の間の次の数日間に時間があれば、引き続き取り組みたいと思っています -

1. お祝いセクションのカードが公開されます。カーソルを合わせるとカードが表示されるようにしたいです。

2. 伝統セクションはもっと良くできるはずですが、まだ少しインスピレーションが必要です。

読んでいただきありがとうございます!

以上がフロントエンド チャレンジ: 12 月版: Glam Up My Markup: 冬至の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。