Lernfabrik

💻 Anleitung: Webseite „Vier Jahreszeiten“ mit Bootstrap & CSS – ohne JavaScript

Schritt 1: Neues Projekt anlegen

Erstelle auf deinem Computer einen neuen Ordner, z. B. vier_jahreszeiten. In diesem Ordner legst du folgende Dateien und Unterordner an:

  • index.html – die Hauptdatei
  • bilder/ – Ordner für deine Bilder (Herbst, Winter, Frühling, Sommer)

Lege in bilder/ z. B. folgende Dateien ab:

bilder/
 ├── herbst1.jpg
 ├── herbst2.jpg
 ├── herbst3.jpg
 ├── herbst4.jpg
 ├── winter1.jpg
 ├── winter2.jpg
 ├── fruehling1.jpg
 ├── sommer1.jpg
 └── ...

Schritt 2: HTML-Grundgerüst erstellen

Öffne deinen Editor (z. B. VS Code) und schreibe folgendes Grundgerüst:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vier Jahreszeiten</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <header>
    <h1>Die vier Jahreszeiten</h1>
  </header>

</body>
</html>

Speichere die Datei als index.html.

Schritt 3: Grundstruktur der Seite

Im <body> fügst du vier Abschnitte ein – einen für jede Jahreszeit:

<main class="container">
  <section>🍂 Herbst</section>
  <section>❄️ Winter</section>
  <section>🌸 Frühling</section>
  <section>☀️ Sommer</section>
</main>

Schritt 4: Slider für den Herbst

Der Herbst bekommt ein CSS-Karussell ohne JavaScript:

<div class="slider">
  <input type="radio" name="r1" id="r1" checked>
  

  <div class="slides">
    <div class="slide"><img src="bilder/herbst1.jpg" alt="Herbst 1"></div>
    ...
  </div>

  <div class="nav-manual">
    <label for="r1"></label>
    
	
  </div>
</div>

Schritt 5: Bootstrap-Galerien

Für die anderen Jahreszeiten nutzt du Bootstrap-Spalten:

<div class="row g-3 season-gallery">
  <div class="col-6 col-md-3"><img src="bilder/winter1.jpg" class="img-fluid rounded" alt="Winter 1"></div>
  ...
</div>

Schritt 6: Einfaches CSS hinzufügen

Im <style>-Bereich deiner HTML-Datei kannst du dein Grunddesign einfügen:

.slide img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

.season-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

Schritt 7: Seite testen

  1. Öffne index.html im Browser.
  2. Klicke auf die Punkte unter dem Slider.
  3. Die Bilder sollen sauber wechseln, ohne Verzerrung.

Schritt 8: CSS-Design & Denkaufgaben

Hier findest du das wichtigste CSS für dein Projekt. Lies die Kommentare genau und überlege, was jede Regel bewirkt. Ergänze oder verändere einzelne Werte, um dein eigenes Design zu gestalten.

<style>
/* 💡 Grunddesign: Schrift, Farben, Hintergrund */
body {
  background: #f8f9fa;
  font-family: "Segoe UI", sans-serif;
  color: #333;
}

/* 💡 Kopfbereich mit Farbverlauf */
header {
  background: linear-gradient(135deg, #ff9966, #ff5e62);
  color: white;
  text-align: center;
  padding: 2rem 1rem;
}

/* 💡 Abstand und Textformat in Abschnitten */
section {
  padding: 2rem 0;
  text-align: center;
}

/* ---------- 🌅 Slider ---------- */
.slider {
  max-width: 700px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* 💡 Die Slides liegen nebeneinander – flex hilft dabei */
.slides {
  display: flex;
  transition: transform 1s ease;
}

/* 💡 Alle Bilder gleich groß – keine Verzerrung! */
.slide img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

/* ---------- ⚫ Punkte unter dem Slider ---------- */
.nav-manual label {
  border: 2px solid #bbb;
  border-radius: 50%;
  padding: 4px;
  margin: 0 5px;
  cursor: pointer;
}

/* ---------- 🖼️ Bilder in Galerien ---------- */
.season-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* 💡 Kleiner Zoom-Effekt beim Überfahren */
.season-gallery img:hover {
  transform: scale(1.05);
}
</style>
🧠 Hinweise für Schüler
  • ✏️ Füge selbst Farben oder Schriftgrößen hinzu, um das Design anzupassen.
  • 💬 Was passiert, wenn du object-fit entfernst? → Teste es!
  • 🔍 Warum wird flex für .slides genutzt? → Denk an die Anordnung der Bilder nebeneinander.
  • 🎨 Erweitere den Header – z. B. mit Schatten, anderer Schrift oder Farbe.