58 lines
2.2 KiB
HTML
58 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Graubündner Steinböcke</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<h1>Graubündner Steinböcke</h1>
|
||
|
||
<section id="intro">
|
||
<h2>Willkommen</h2>
|
||
<p>Der Graubündner Steinbock ist ein Symbol der Alpen und hat sich perfekt an das raue Gebirgsklima angepasst. Mit seinem beeindruckenden Geweih und der robusten Statur klettert er elegant über steile Felsen.</p>
|
||
</section>
|
||
|
||
<section id="gallery">
|
||
<h2>Bildergalerie</h2>
|
||
<div class="gallery">
|
||
<img src="steinbock1.jpg" alt="Steinbock im Fels" class="gallery-img active">
|
||
<img src="steinbock2.jpg" alt="Steinbock in den Alpen" class="gallery-img">
|
||
</div>
|
||
<button id="nextImage">Nächstes Bild</button>
|
||
</section>
|
||
|
||
<section id="facts">
|
||
<h2>Interessante Fakten</h2>
|
||
<button id="toggleFacts">Fakten anzeigen</button>
|
||
<div id="factBox" class="fact-box">
|
||
<ul>
|
||
<li>Steinböcke können bis zu 3.50 Meter hoch springen.</li>
|
||
<li>Sie erreichen ein Alter von etwa 15–20 Jahren in freier Wildbahn.</li>
|
||
<li>Ihre Hufe sind speziell geformt, um auf Eis und Fels Halt zu finden.</li>
|
||
<li>Jedes Jahr im Herbst schiebt der Bock sein Geweih ab und bildet es neu.</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
// Bildwechsler
|
||
const imgs = document.querySelectorAll('.gallery-img');
|
||
let idx = 0;
|
||
document.getElementById('nextImage').addEventListener('click', () => {
|
||
imgs[idx].classList.remove('active');
|
||
idx = (idx + 1) % imgs.length;
|
||
imgs[idx].classList.add('active');
|
||
});
|
||
|
||
// Fakten ein-/ausblenden
|
||
const toggleBtn = document.getElementById('toggleFacts');
|
||
const factBox = document.getElementById('factBox');
|
||
toggleBtn.addEventListener('click', () => {
|
||
factBox.classList.toggle('show');
|
||
toggleBtn.textContent = factBox.classList.contains('show') ? 'Fakten verbergen' : 'Fakten anzeigen';
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |