<!DOCTYPE html>
Winter Solstice
<br>
body {<br>
margin: 0;<br>
font-family: Arial, sans-serif;<br>
line-height: 1.6;<br>
background: linear-gradient(to bottom, #1e3c72, #2a5298);<br>
color: white;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> header {
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 1rem 2rem;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
header h1 {
margin: 0;
font-size: 1.8rem;
}
nav {
margin-top: 10px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
transition: color 0.3s;
}
nav a:hover {
color: #ffcc00;
}
section {
padding: 100px 20px;
min-height: 100vh;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.hero h2 {
font-size: 3rem;
margin: 0;
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
margin: 20px auto 0;
}
.cta {
margin-top: 20px;
}
.cta button {
background: #ffcc00;
border: none;
padding: 10px 20px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s;
}
.cta button:hover {
background: #e6b800;
}
footer {
text-align: center;
padding: 20px;
background: rgba(0, 0, 0, 0.8);
position: relative;
}
footer p {
margin: 0;
font-size: 0.9rem;
}
</style>
</code></pre></div>
<p></head><br>
<body><br>
<header><br>
<h1>Winter Solstice</h1><br>
<nav><br>
<a href="#about">About</a><br>
<a href="#celebrations">Celebrations</a><br>
<a href="#contact">Contact</a><br>
</nav><br>
</header></p>
<div class="highlight"><pre class="highlight plaintext"><code><section class="hero" id="about">
<h2>Welcome to the Winter Solstice</h2>
<p>The longest night of the year marks a time of reflection, renewal, and celebration. Explore traditions, festivities, and more.</p>
<div class="cta">
<button onclick="scrollToSection('celebrations')">Learn More</button>
</div>
</section>
<section id="celebrations">
<h2>Celebrations</h2>
<p>From ancient rituals to modern festivities, the Winter Solstice is celebrated worldwide. Share in the joy and traditions.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>If you have questions or want to learn more about our events, feel free to reach out. We'd love to hear from you!</p>
</section>
<footer>
<p>&copy; 2024 Winter Solstice. All Rights Reserved.</p>
</footer>
<script>
function scrollToSection(sectionId) {
const section = document.getElementById(sectionId);
if (section) {
window.scrollTo({
top: section.offsetTop - 60, // Offset to account for fixed header
behavior: 'smooth'
});
}
}
// Smooth scroll for nav links
document.querySelectorAll('nav a').forEach(anchor =&gt; {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1);
scrollToSection(targetId);
});
});
</script>
</code></pre></div>
<p></body><br>
</html></p>
Top comments (0)