Heim >Web-Frontend >CSS-Tutorial >BLAH! BLAU! BLAU! DEZEMBER...!
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; }
Die längste Nacht des Jahres markiert eine Zeit des Nachdenkens, der Erneuerung und des Feierns. Entdecken Sie Traditionen, Feste und mehr.
Von alten Ritualen bis hin zu modernen Festen wird die Wintersonnenwende weltweit gefeiert. Teilen Sie die Freude und die Traditionen.Feierlichkeiten
Wenn Sie Fragen haben oder mehr über unsere Veranstaltungen erfahren möchten, können Sie sich gerne an uns wenden. Wir würden uns freuen, von Ihnen zu hören!Kontaktieren Sie uns
<script><br>
Funktion scrollToSection(sectionId) {<br>
const section = document.getElementById(sectionId);<br>
if (Abschnitt) {<br>
window.scrollTo({<br>
top: section.offsetTop - 60, // Offset zur Berücksichtigung des festen Headers<br>
Verhalten: 'glatt'<br>
});<br>
}<br>
}</p>
<pre class="brush:php;toolbar:false">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;
}
</pre>
<p></script>