☃️❄️冬至網：一個以冬至為靈感的網頁❄️☃️

這是前端挑戰賽 - 12 月版的提交，魅力我的標記：冬至

☀️❄️ 簡要介紹（關於我建造的內容）

歡迎來到“冬至網”，這是一個製作精美的網站，以冬季為主題，提供了寒冷和一些天體的設計。這是受到冬至主題、聖誕節精神和降雪的啟發。該網站為用戶提供了流暢的滾動和互動功能。

？現場演示

我的程式碼連結 - https://github.com/Divya4879/winter-solistice_web-glam.git

即時網站 - https://divya4879.github.io/winter-solistice_web-glam

我的程式碼網站的預覽：-
https://codepen.io/divya-2002/pen/xbKgYZY

希望你喜歡這個，在這裡感受寒冷的天氣，這個季節的寒冷，了解冬至活動的真相。

??‍??設計

這個網站是圍繞著冬至主題設計的，其冷淡的藍色、白色和深色背景的調色板（字面上和比喻上的？）。我在整體上添加了動畫下雪背景，並在所有部分上添加了降雪以增加其魅力，並為各部分配備了透明覆蓋層和帶有文本陰影的標題，以確保可讀性並增強對比度。

??️??️ 主要特點

我非常喜歡並努力開發的網站的一些主要功能是：-

1. 平滑滾動和視差效果：我為此使用了 GSAP 連續滾動功能。它使用戶能夠在向下或向上滾動時體驗各部分的平滑滾動行為。

2. 標題和導航：我添加了一個粘性標題，以確保當用戶在我的網站上移動時導航欄保持固定/卡在原位。至於導航，我將其設為響應式，並且針對不同的螢幕尺寸具有不同的佈局。我還在導覽列上使用了一些懸停效果，以使其更具吸引力。

3. 行動響應：我使用了 Flexbox 和垂直導航欄，讓我的網站能夠回應不同的螢幕尺寸。

4. 冬季主題動畫/效果：我添加了雪動畫作為背景，為網站創建整個冬季主題。我還在我的所有部分分別添加了一點古怪但有趣的“降雪”。

5. 版式和顏色：我嘗試並使用了一些新字體，例如「Cinzel」、「Itim」、「Mountains of Christmas」來應對 Google 字體的挑戰。網站的整體顏色主題包含冬季主題顏色，如藍色和白色，以及紫色及其不同​​的色調。

6. 自訂動畫和效果：我還在整個網站中添加了動畫、滾動效果等，以賦予其現代感並邀請人們探索這一切。

?️?☹️ 我的旅程-學習、高潮和低谷

說實話，這讓我學到了很多。我以前從未使用過 GSAP，所以我必須溫習一些基礎知識和基礎知識，研究我想要的東西是否可能，是的，然後如何嘗試，盡可能多次地更改它，以便它正常工作。

這對我來說是一次很棒的學習和創作經歷，我學到了很多東西，熬夜完成並提交，嘗試了很多東西，最終構建了這個。

??我從這次挑戰中學到了什麼？

因為我完成了這個挑戰，我能夠：-

1. 培養我的滾動動畫技能（GSAP）。

2. 增強、改進和練習網站的「互動」部分。

3. 了解有關冬至的許多有趣的事實，以及根據特定主題研究字體和調色板。

4. 練習了我的CSS技能，練習並學習了JS部分->降雪、滾動動畫、DOM 操作。

5. 使用 Web 開發的基礎 - HTML、CSS 和 JS 來建立具有美感、互動性和功能性的網站。

我知道我們已經有了主要內容作為模板- HTML，但是我的設計在製作過程中也迭代了很多次。這對我來說是一次很棒的經驗。

？ ️？為什麼叫「冬至網」？

老實說，有點理所當然，但因為它是基於冬至前夕，並且是一個有關其基本信息的網站。

❄️☃️結論

我開始這個挑戰只是因為我想練習我的基本前端技能，而且因為我一直想參加「Dev.to Challenges」。這段時間我的心情是亢奮的、高興的、期待的、高興的、沮喪的、失望的、滿足的。這個「冬至網」對我來說不僅僅是另一個項目，它提醒了我在製作過程中所經歷的旅程，也是我基於冬至事件創作的一個美麗的冰霜主題網絡至日活動。

我希望這不是令人畏縮的，這是我第一次在任何平台上寫關於我的專案的部落格。
另外，我在製作這個的過程中經歷了一段不可思議的旅程，希望你和我一樣享受它。

？ ️？回饋

正如我之前提到的，我是第一次在這個平台上提交項目，而且我以前從未寫過任何此類部落格。

衷心感謝您對我的冬至網站和/或我的部落格的回饋。請在下面的評論部分告訴我您的想法。

謝謝您讀到這裡。感謝您給我的博客，希望還有我的網站以及您的一些寶貴時間。

以上是☃️❄️冬至網：一個以冬至為靈感的網頁❄️☃️的詳細內容。更多資訊請關注PHP中文網其他相關文章！