🔧 阿川の電商水電行
這是前端挑戰賽－萬聖節特輯「完美著陸」的參賽作品。
🔥 我打造的
為了參加Dev.to 前端挑戰賽，我建立了一個名為「2025 年萬聖節派對」的響應式萬聖節著陸頁，這是一個令人毛骨悚然、氛圍濃厚且行動友善的網站，旨在推廣一個虛構的萬聖節活動。
目標是創造既有趣又專業的產品，將設計、回應性和效能優化結合起來，帶來沉浸式的使用者體驗。
它完全使用HTML、CSS 和 JavaScript建置，沒有使用任何框架，純粹是前端開發流程的結晶👻
✨ 此落地頁的主要功能
-
採用 CSS 媒體查詢實現完全響應式設計，適用於所有螢幕尺寸
-
電影般的英雄場景，採用層次豐富的背景和炫目的特效。
-
鬼屋派對場所位置展示
-
帶有動畫 CTA 按鈕的預訂和定價部分
-
使用原生 JavaScript 建立的行動友善導覽選單
-
優化背景圖片並採用懶加載方式，以提升效能
-
利用輕量級程式碼和可重複使用的 CSS 變數進行效能最佳化
📺 演示
{% cta https://halloweenpartyevent.netlify.app/ %} 線上示範 🔥 {% endcta %}
{% cta https://github.com/Hadil-Ben-Abdallah/Halloween-Landing-Page %} GitHub 倉庫 🐈 {% endcta %}
👻 如果你覺得它酷炫又驚悚，請在 GitHub 程式庫上按個讚 ⭐ 吧！這對我們意義重大！ 💙
以下是預覽圖👇🏻
👩🏻💻 旅程
我啟動這個專案的初衷是希望將創意與精準結合。我的目標是打造一個既能給人以萬聖節邀請函真實感，又符合現代前端標準的頁面。
旅程中的一些精彩時刻：
-
嘗試使用漸層疊加和響應式背景縮放，打造電影般的主角視覺效果。
-
專注於使用flexbox 和媒體查詢來實現完全響應式佈局。
-
使用JavaScript實現了具有流暢開啟/關閉動畫的行動友善導航切換功能。
-
精心調整的字體、縮放和間距，營造出精緻專業的視覺效果。
這個專案是一次絕佳的前端挑戰設計練習，促使我在創造力和實際性能優化之間取得平衡。
🛠 技術棧
-
HTML5 ：簡潔、語意化的結構
-
CSS3（Flexbox + 媒體查詢） ：響應式佈局與詭異效果
-
原生 JavaScript ：互動性、導航切換、平滑滾動
-
圖片優化 + 懶加載：提升頁面效能
-
客製化萬聖節設計：手工製作的視覺效果和動畫
💯 績效目標
由於這個專案是前端挑戰賽的一部分，我確保響應式著陸頁符合現代網路標準：
-
Lighthouse 在效能、可存取性、SEO和最佳實踐方面得分很高
-
完全響應式佈局
-
輕量級動畫，實現流暢渲染
-
保持 CSS 變數的簡潔性，以提高可維護性和可擴展性
🧡 反思
這個挑戰讓我意識到，前端開發既是藝術，也是工程。
打造一個既視覺效果驚艷又適合行動裝置的落地頁，既需要創造力，也需要注重技術細節。
平衡詭異的美學效果與可用性和性能是最有成就感的部分。
🕯️ 結語
非常感謝Dev.to組織這次前端挑戰賽，這是一個鍛鍊設計技能、優化性能並打造節日主題作品的絕佳機會🎃
如果你喜歡這個專案，請分享你的想法，我很樂意與其他開發者交流！ 💙
感謝閱讀！ 🙏🏻
希望這對您有幫助✅
請按讚並關注，以獲得更多精彩內容😍
由Hadil Ben Abdallah傾情打造 | 
|
|---------|----------|---------|
{% embed https://dev.to/hadil %}
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
