2 changed files with 12 additions and 89 deletions
--- a/amanda-nielsen.html
+++ b/amanda-nielsen.html
@ -3,56 +3,21 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Graubündner Steinböcke</title>
+    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <h1>Graubündner Steinböcke</h1>
+    <h1>Das ist eine Webseite</h1>
-
+    <section>
-    <section id="intro">
+        <h2>Über Graubünden</h2>
-        <h2>Willkommen</h2>
+        <p>Graubünden ist der größte und östlichste Kanton der Schweiz, bekannt für seine beeindruckende Alpenlandschaft, vielfältige Kultur und drei Amtssprachen: Deutsch, Rätoromanisch und Italienisch.</p>
-        <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>
+        <p>Die Region bietet zahlreiche Aktivitäten wie Wandern, Skifahren und kulturelle Veranstaltungen. Städte wie Chur, die älteste Stadt der Schweiz, sowie malerische Bergdörfer wie St. Moritz und Davos laden Besucher ein.</p>
        <p>Graubünden ist auch Heimat des UNESCO-geschützten Nationalparks und vieler historischer Sehenswürdigkeiten, die die reiche Geschichte und Tradition des Kantons widerspiegeln.</p>
        <figure>
            <img src="graubuenden.jpg" alt="Berglandschaft in Graubünden" style="max-width:100%;height:auto;">
            <figcaption>Typische Alpenlandschaft in Graubünden</figcaption>
        </figure>
        <button type="button" onclick="alert('Mehr erfahren über Graubünden!')">Mehr erfahren</button>
    </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>
--- a/styles.css
+++ b/styles.css
@ -55,45 +55,3 @@ button {
 button:hover {
    background-color: #2980b9;
 }
 /* gallery slider */
 .gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 300px;
    overflow: hidden;
 }
 .gallery-img {
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    position: absolute;
    transition: opacity 0.6s ease;
 }
 .gallery-img.active {
    opacity: 1;
 }
 /* facts box */
 .fact-box {
    max-width: 800px;
    margin: 1rem auto;
    padding: 1rem;
    background: #ecf0f1;
    border-radius: 6px;
    display: none;
    animation: fadeIn 0.5s ease-in;
 }
 .fact-box.show {
    display: block;
 }
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
 }