Arbeitsauftrag

Die vier Jahreszeiten – eine informative Webseite

Baue Schritt für Schritt eine vollständige Webseite über die vier Jahreszeiten – mit Navbar, Bildern, Karten, Galerie und Social-Media-Links.

1 Auftrag

Erstelle eine Webseite zum Thema „Die vier Jahreszeiten". Die Seite soll informativ sein, die vier Jahreszeiten mit Bildern vorstellen und einen Social-Media-Bereich im Footer enthalten.

Anforderungen

  • Bootstrap 5 und Font Awesome einbinden (CDN-Links).
  • Navbar mit Links zu den Abschnitten (Einführung, Jahreszeiten, Galerie, Kontakt).
  • Hero-Bereich mit großem Hintergrundbild und Titel.
  • Vier Jahreszeiten-Cards – je eine Karte pro Jahreszeit, mit eigenem Bild.
  • Galerie mit mindestens 8 Impressionen.
  • Fakten-Bereich mit 3 Info-Boxen.
  • Footer mit Social-Media-Icons (Instagram, Facebook, YouTube, Twitter, TikTok).
  • Eigene Farbnote – siehe Schritt 10.
  • Responsives Layout – funktioniert auf Handy, Tablet und PC.
Bilder: Alle Bilder liegen bereits im Projektordner Vierjahreszeiten/bilder/. Verwende sie direkt, ohne eigene Downloads.

2 Projekt-Setup

Dein Projekt liegt bereits fertig im Ordner Vierjahreszeiten/. Du bearbeitest nur die Datei index.php – die Bilder liegen im Unterordner bilder/.

Projektstruktur

📁 Vierjahreszeiten/
├─ index.php   ← hier arbeitest du
└─ 📁 bilder/
   ├─ 1008-400x300.jpg
   ├─ 188-400x300.jpg
   ├─ 227-700x450.jpg
   ├─ 231-400x300.jpg
   ├─ 244-500x400.jpg
   ├─ 442-500x400.jpg
   ├─ 458-500x400.jpg
   ├─ 653-400x300.jpg
   ├─ 735-400x300.jpg
   ├─ 769-400x300.jpg
   ├─ 864-400x300.jpg
   ├─ 87-500x400.jpg
   ├─ 89-400x300.jpg
   └─ 988-400x300.jpg

Grundgerüst der index.php

<?php /* index.php */ ?>
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Die vier Jahreszeiten</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
</head>
<body>
  <!-- Inhalt kommt hier hin -->

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

4 Hero-Bereich

Der Hero ist der große Begrüßungsbereich oben. Er nutzt ein Bild aus deinem bilder/-Ordner als Hintergrund (hier: 227-700x450.jpg), das mit einem dunklen Farbverlauf überlagert wird, damit weiße Schrift gut lesbar bleibt. 

<header class="hero">
  <div class="container">
    <h1>Die vier Jahreszeiten</h1>
    <p class="mt-3">Eine bunte Reise durch Frühling, Sommer, Herbst und Winter</p>
    <a href="#seasons" class="btn btn-light btn-lg mt-3">
      <i class="fas fa-arrow-down"></i> Entdecken
    </a>
  </div>
</header>

Dazugehöriges CSS

.hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url("bilder/227-700x450.jpg") center/cover no-repeat;
  color: #fff;
  min-height: 60vh;
  display: flex;
  align-items: center;
  text-align: center;
}
.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

5 Einführung

Zwei Spalten: links der Text, rechts ein Bild (z. B. bilder/87-500x400.jpg). Auf kleinen Bildschirmen stapeln sich die Spalten automatisch untereinander. 

<section id="intro" class="py-5">
  <div class="container">
    <div class="row align-items-center">

      <div class="col-lg-6">
        <h2 class="mb-3">Warum gibt es Jahreszeiten?</h2>
        <p class="lead">
          Die Jahreszeiten entstehen durch die Neigung der Erdachse
          und die Umlaufbahn der Erde um die Sonne.
        </p>
        <p>
          Jede Jahreszeit hat ihren eigenen Charakter ...
        </p>
      </div>

      <div class="col-lg-6 mt-4 mt-lg-0">
        <img src="bilder/87-500x400.jpg"
             alt="Erde und Sonne"
             class="img-fluid rounded shadow-sm">
      </div>

    </div>
  </div>
</section>

6 Jahreszeiten-Cards

Vier Karten in einem Bootstrap-Grid. Auf dem Handy eine Spalte, auf Tablets zwei, auf dem Desktop vier (col-md-6 col-lg-3). 

<section id="seasons" class="py-5 bg-light">
  <div class="container">
    <h2 class="text-center mb-5">Die vier Jahreszeiten im Überblick</h2>

    <div class="row g-4">

      <div class="col-md-6 col-lg-3">
        <div class="card season-card season-spring h-100">
          <img src="bilder/188-400x300.jpg"
               class="card-img-top" alt="Frühling">
          <div class="card-body">
            <h5 class="card-title">🌸 Frühling</h5>
            <p class="card-text small text-muted">März – Mai</p>
            <p class="card-text">
              Blumen blühen, Bäume bekommen neue Blätter.
            </p>
          </div>
        </div>
      </div>

      <!-- Weitere Karten analog: -->
      <!-- Sommer:  bilder/231-400x300.jpg -->
      <!-- Herbst:  bilder/458-500x400.jpg -->
      <!-- Winter:  bilder/769-400x300.jpg -->

    </div>
  </div>
</section>
Tipp: Verwende g-4 im row, um automatisch Abstände zwischen den Karten zu erzeugen.

7 Impressionen-Galerie

Acht Bilder in einem Grid. Klein = 2 Spalten, Tablet = 3 Spalten, Desktop = 4 Spalten. Du kannst alle restlichen Bilder aus bilder/ verwenden. 

<section id="gallery" class="py-5">
  <div class="container">
    <h2 class="text-center mb-5">Impressionen</h2>

    <div class="row g-3 gallery">
      <div class="col-6 col-md-4 col-lg-3">
        <img src="bilder/1008-400x300.jpg" alt="Impression 1">
      </div>
      <!-- weitere 7 Bilder analog -->
    </div>
  </div>
</section>

CSS für Galeriebilder

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease;
}
.gallery img:hover {
  transform: scale(1.05);
}

8 Fakten-Bereich

Drei Info-Boxen mit Icon, Überschrift und kurzem Text.

<section class="py-5 bg-light">
  <div class="container">
    <h2 class="text-center mb-5">Wusstest du schon?</h2>

    <div class="row text-center g-4">
      <div class="col-md-4">
        <div class="p-4 bg-white rounded shadow-sm h-100">
          <i class="fas fa-temperature-high fa-2x text-danger mb-3"></i>
          <h4>Höchsttemperaturen</h4>
          <p>Die höchste je gemessene Temperatur lag bei 56,7 °C.</p>
        </div>
      </div>
      <!-- zwei weitere Boxen analog -->
    </div>
  </div>
</section>

10 Eigene Farbnote einbringen

Deine Seite soll deine Handschrift tragen. Wähle eine Farbpalette, die zu deinem Thema passt, und ziehe sie konsequent durch die Seite – Navbar, Buttons, Akzentstreifen der Jahreszeiten-Cards und Social-Media-Hover.

Vorschläge – such dir eine aus oder mische selbst

Klassisch (Jahreszeiten)
Pink & Violett
Naturtöne
Dark & Warm
Auftrag: Wähle eine Palette, lege sie als eine zentrale Farbvariable an und passe mindestens drei Stellen auf deiner Seite damit an (z. B. Navbar-Farbe, Button-Farbe, Akzentstreifen der Cards).

So geht's – zentrale Farbvariable anlegen

Lege ganz oben in deinem <style>-Bereich eine Variable --meine-farbe an und verwende sie überall dort, wo du den Akzent haben willst. So kannst du die Farbe später mit einer einzigen Zeile ändern. 

/* Meine Farbnote – ganz oben im style-Bereich */
:root {
  --meine-farbe: #e91e63;          /* hier deinen Farbwert eintragen */
  --meine-farbe-hell: #fce4ec;     /* hellere Variante für Hintergründe */
}

/* Navbar in deiner Farbe */
.navbar {
  background-color: var(--meine-farbe) !important;
}

/* Buttons in deiner Farbe */
.btn-light {
  background-color: var(--meine-farbe-hell);
  border-color: var(--meine-farbe);
  color: var(--meine-farbe);
  font-weight: 600;
}

/* Akzentstreifen über jeder Jahreszeiten-Card */
.season-card .card-body {
  border-top: 5px solid var(--meine-farbe);
}

/* Social-Media-Buttons bekommen deine Farbe im Hover */
.social-links a:hover {
  background-color: var(--meine-farbe) !important;
}
Tipp: Wenn dir eine Farbe nicht gefällt, ändere nur den Wert von --meine-farbe – schon passt sich die ganze Seite an.

Nützliche Ressourcen

Bootstrap: Navbar Bootstrap: Grid Bootstrap: Cards Font-Awesome-Icons Farbpaletten-Generator