Sambutan Solstis Musim Sejuk.

Sambutan Solstis Musim Sejuk: Meneroka Sains, Tradisi dan Budaya

Gambaran Keseluruhan Projek

Projek ini mempamerkan halaman web yang interaktif dan menarik secara visual khusus untuk Solstis Musim Sejuk. Ia menyelidiki kepentingan saintifiknya, kepentingan budaya dan tradisi yang diraikan di seluruh dunia. Matlamatnya adalah untuk mencipta pengalaman yang menakjubkan dan interaktif, menggabungkan reka bentuk moden dengan kandungan yang bermakna.

---

Demo

Anda boleh pratonton versi langsung projek Winter Solstice dan akses kod sumber di bawah:

Pautan Demo Langsung

Repositori GitHub

---

Perjalanan

Inspirasi untuk projek ini datang daripada kepentingan universal solstis. Saya ingin membentangkan kedua-dua fakta saintifik dan kepelbagaian budaya melalui antara muka yang moden dan menarik. Projek ini membenarkan saya:

Tingkatkan kemahiran bahagian hadapan saya menggunakan HTML, CSS dan JavaScript.

Percubaan dengan animasi lancar, reka bentuk responsif dan elemen interaktif.

Ketahui tentang mengoptimumkan navigasi pengguna dengan tatal lancar dan butang dinamik.

Begini cara projek itu berkembang:

1. HTML: Kandungan berstruktur untuk kejelasan dan ketepatan semantik.

2. CSS: Mempertingkatkan reka bentuk dengan latar belakang kecerunan, animasi dan reka letak responsif.

3. JavaScript: Menghidupkan halaman dengan navigasi interaktif dan kesan tercetus tatal.

Saya berbangga dengan animasi yang lancar, reka bentuk responsif dan ciri tatal ke atas, yang memastikan pengalaman pengguna yang menyeronokkan. Penambahbaikan masa hadapan boleh termasuk menambah karusel imejan solstis atau menyepadukan data berasaskan API untuk penjejakan solstis langsung.

---

Kod

HTML

Sambutan Solstis Musim Sejuk

Solstis Musim Sejuk

Teroka Sains, Tradisi dan Perayaan Global

Mula Meneroka

• Pengenalan
• Sains
• Hemisfera
• Perayaan
• Tradisi
• Kesimpulan

<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

// Tatal Lancar ke Bahagian
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('klik', fungsi (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
tingkah laku: 'licin'
});
});
});

// Butang Tatal ke Atas
const scrollTopBtn = document.getElementById('scrollTopBtn');
window.addEventListener('scroll', () => {
jika (window.scrollY > 300) {
scrollTopBtn.style.display = 'sekat';
} lain {
scrollTopBtn.style.display = 'tiada';
}
});

scrollTopBtn.addEventListener('klik', () => {
window.scrollTo({
atas: 0,
tingkah laku: 'licin'
});
});

---

Kesimpulan

Projek ini menggambarkan kepentingan Winter Solstice sambil memanfaatkan teknologi web moden untuk memberikan pengalaman pengguna yang menarik. Ia menunjukkan reka bentuk kreatif, navigasi interaktif dan fungsi responsif, menjadikannya pesaing yang kuat dalam cabaran. Terima kasih banyak atas peluang ini, harap anda akan mempertimbangkan penyerahan saya.