Winter Solstice Celebrations.

Winter Solstice Celebrations: Exploring Science, Traditions, and Culture

Project Overview

This project showcases an interactive and visually appealing web page dedicated to the Winter Solstice. It delves into its scientific significance, cultural importance, and traditions celebrated worldwide. The goal is to create a stunning and interactive experience, blending modern design with meaningful content.

Demo

You can preview the live version of the Winter Solstice project and access the source code below:

Live Demo Link

GitHub Repository

Journey

The inspiration for this project came from the universal significance of the solstice. I wanted to present both scientific facts and cultural diversity through a modern and engaging interface. The project allowed me to:

Enhance my frontend skills using HTML, CSS, and JavaScript.

Experiment with smooth animations, responsive design, and interactive elements.

Learn about optimizing user navigation with smooth scrolling and dynamic buttons.

Here’s how the project evolved:

1. HTML: Structured content for clarity and semantic accuracy.

2. CSS: Enhanced the design with gradient backgrounds, animations, and responsive layouts.

3. JavaScript: Brought the page to life with interactive navigation and scroll-triggered effects.

I am proud of the smooth animations, responsive design, and scroll-to-top feature, which ensure a delightful user experience. Future improvements could include adding a carousel of solstice imagery or integrating API-based data for live solstice tracking.

Code

HTML

Winter Solstice

Explore the Science, Traditions, and Global Celebrations

• Introduction
• Science
• Hemispheres
• Celebrations
• Traditions
• Conclusion

<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

// Smooth Scroll to Sections
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});

// Scroll-to-Top Button
const scrollTopBtn = document.getElementById('scrollTopBtn');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
scrollTopBtn.style.display = 'block';
} else {
scrollTopBtn.style.display = 'none';
}
});

scrollTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});

Conclusion

This project reflects the significance of the Winter Solstice while leveraging modern web technologies to provide an engaging user experience. It demonstrates creative design, interactive navigation, and responsive functionality, making it a strong contender in the challenge.Thank you so much for this opportunity,hope you will consider my submission.

The above is the detailed content of Winter Solstice Celebrations.. For more information, please follow other related articles on the PHP Chinese website!