冬至慶祝活動。

冬至慶祝活動：探索科學、傳統與文化

專案概況

該專案展示了一個專門針對冬至的互動式且具有視覺吸引力的網頁。它深入探討了其科學意義、文化重要性和全世界慶祝的傳統。我們的目標是創造令人驚嘆的互動體驗，將現代設計與有意義的內容融為一體。

---

示範

您可以預覽冬至專案的即時版本並存取以下原始程式碼：

現場示範連結

GitHub 儲存庫

---

旅程

這個計畫的靈感來自於夏至的普遍意義。我想透過一個現代且引人入勝的介面來展示科學事實和文化多樣性。該專案讓我能夠：

使用 HTML、CSS 和 JavaScript 來增強我的前端技能。

嘗試流暢的動畫、響應式設計和互動元素。

了解如何透過平滑滾動和動態按鈕來優化使用者導航。

以下是本計畫的演變過程：

1. HTML：結構化內容，確保清晰度和語義準確性。

2. CSS：透過漸變背景、動畫和響應式版面增強設計。

3. JavaScript：透過互動式導航和滾動觸發效果使頁面變得栩栩如生。

我對流暢的動畫、響應式設計和滾動到頂部功能感到自豪，這確保了令人愉快的用戶體驗。未來的改進可能包括添加夏至圖像輪播或整合基於 API 的數據以進行即時夏至追蹤。

---

代碼

HTML

冬至慶祝活動

冬至

探索科學、傳統和全球慶祝活動

開始探索

• 簡介
• 科學
• 半球
• 慶祝活動
• 傳統
• 結論

<main>
    <section>



<hr>

<p>CSS</p>

<p>/* Base Reset */</p>

<ul>
<li>{
margin: 0;
padding: 0;
box-sizing: border-box;
}</li>
</ul>

<p>/* Fonts and Colors */<br>
body {<br>
    font-family: 'Arial', sans-serif;<br>
    line-height: 1.6;<br>
    background: linear-gradient(to bottom, #001f3f, #1c1c1c);<br>
    color: #fff;<br>
}</p>

<p>header {<br>
    position: relative;<br>
    text-align: center;<br>
    color: #fff;<br>
    background: url('header-bg.jpg') no-repeat center center/cover;<br>
    height: 100vh;<br>
    display: flex;<br>
    flex-direction: column;<br>
    justify-content: center;<br>
    align-items: center;<br>
}</p>

<p>.header-overlay {<br>
    background: rgba(0, 0, 0, 0.5);<br>
    padding: 20px;<br>
    border-radius: 8px;<br>
}</p>

<p>header h1 {<br>
    font-size: 3rem;<br>
    margin-bottom: 10px;<br>
}</p>

<p>header p {<br>
    font-size: 1.2rem;<br>
    margin-bottom: 20px;<br>
}</p>

<p>.btn {<br>
    padding: 10px 20px;<br>
    font-size: 1.1rem;<br>
    color: #001f3f;<br>
    background: #ffcc00;<br>
    border: none;<br>
    border-radius: 5px;<br>
    cursor: pointer;<br>
    transition: all 0.3s ease;<br>
}</p>

<p>.btn:hover {<br>
    background: #e0ac00;<br>
}</p>

<p>main section {<br>
    padding: 40px 20px;<br>
    max-width: 800px;<br>
    margin: 20px auto;<br>
    background: rgba(255, 255, 255, 0.1);<br>
    border-radius: 8px;<br>
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);<br>
}</p>

<p>/* Animations */<br>
.fade-in {<br>
    opacity: 0;<br>
    transform: translateY(20px);<br>
    animation: fadeIn 1s forwards;<br>
}</p>

<p>@keyframes fadeIn {<br>
    to {<br>
        opacity: 1;<br>
        transform: translateY(0);<br>
    }<br>
}</p>

<p>footer {<br>
    text-align: center;<br>
    padding: 10px 0;<br>
    background: #111;<br>
    color: #fff;<br>
}</p>

<h2>
  
  
  scrollTopBtn {
</h2>

<pre class="brush:php;toolbar:false">position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 15px;
background: #ffcc00;
color: #001f3f;
border: none;
border-radius: 50%;
cursor: pointer;
display: none;
transition: all 0.3s ease;

}

---

JavaScript

// 平滑滾動到各個部分
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('點選', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
行為：「平滑」
});
});
});

// 捲動到頂部按鈕
constscrollTopBtn = document.getElementById('scrollTopBtn');
window.addEventListener('滾動', () => {
if (window.scrollY > 300) {
scrollTopBtn.style.display = 'block';
} 其他 {
scrollTopBtn.style.display = 'none';
}
});

scrollTopBtn.addEventListener('click', () => {
window.scrollTo({
上：0，
行為：「平滑」
});
});

---

結論

此專案反映了冬至的重要性，同時利用現代網路技術提供引人入勝的使用者體驗。它展示了創意設計、互動式導航和響應式功能，使其成為挑戰賽中的有力競爭者。非常感謝您提供這個機會，希望您能考慮我的提交。