itenmarcalex/msc-uxd-fs26-test
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge pull request 'feature-amanda-nielsen' (#24) from feature-amanda-nielsen into feature-hasicicsalih

Browse Source 
Reviewed-on: #24
This commit is contained in:
Salih Hasicic 2026-03-12 11:30:03 +01:00
commit 6d060ceaac
2 changed files with 89 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
amanda-nielsen.html
View File

@ -3,21 +3,56 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Graubündner Steinböcke</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Das ist eine Webseite</h1>
<section>
<h2>Über Graubünden</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>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>
<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>

42
styles.css
View File

@ -55,3 +55,45 @@ 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; }
}