HTML5 & CSS3 – Einführungskurs

Übung 2: Preispakete

Drei Karten nebeneinander – Layout mit CSS Flexbox

CSS Flexbox Media Queries Google Fonts Font Awesome CSS Transitions

Ziel der Übung

Du erstellst eine Preisübersicht mit drei Karten nebeneinander, wie man sie von fast jeder kommerziellen Website kennt. Die mittlere Karte ist optisch hervorgehoben: Sie hat einen dunklen Hintergrund und wirkt durch transform: scale() etwas größer als die anderen beiden.

Das Layout der drei Karten wird mit CSS Flexbox umgesetzt. Auf kleinen Bildschirmen stapeln sich die Karten untereinander.

Starter
0 €/Monat

Professional
19 €/Monat
★ Beliebt

Enterprise
49 €/Monat

So sieht das fertige Layout schematisch aus (Desktop). Die mittlere Karte ist per scale() leicht vergrößert.

Hinweis: Das komplette CSS kommt in die externe Datei css/pricing.css. Im <style>-Tag in der HTML-Datei steht kein CSS.

1Dateien anlegen

Lege die folgenden Dateien an, der css-Ordner ist bereits aus Übung 1 vorhanden:

TAG3/
  ├── pricing.html
  └── css/
      └── pricing.css

In pricing.html kommt die HTML-Struktur.
In css/pricing.css kommt das gesamte CSS.

2HTML-Struktur

Kopfbereich (`<head>`)

Binde FontAwesome und die externe CSS-Datei ein. Den Font Poppins lädst du nicht per <link> im HTML, sondern per @import direkt am Anfang der pricing.css (dazu mehr in Abschnitt 3):

<!-- FontAwesome -->
<link rel="stylesheet" href="fontawesome/css/all.min.css">

<!-- Externe CSS-Datei (der @import für den Font steht darin) -->
<link rel="stylesheet" href="css/pricing.css">

Seitenaufbau (`<body>`)

Der Body besteht aus einem <header> mit Überschrift und einem <main> mit dem Karten-Container. Jede Karte ist ein <article class="card"> und folgt immer dem gleichen Muster. Baue alle drei Karten so ein:

<header>
    <h1>Unsere Pakete</h1>
    <p>Wählen Sie das passende Paket für Ihr Projekt</p>
</header>

<main>
    <div class="cards">

        <!-- Dieses Muster für alle 3 Karten wiederholen.
             Die mittlere (hervorgehobene) Karte bekommt class="card highlight".
             Nur die Highlight-Karte enthält außerdem ein <div class="badge">. -->
        <article class="card">

            <!-- Nur bei der Highlight-Karte: -->
            <div class="badge">Beliebt</div>

            <div class="card-header">
                <i class="fas fa-rocket fa-2x"></i>
                <h2>Paketname</h2>
                <div class="preis">
                    <span class="betrag">19 €</span>
                    <span class="zeitraum">/ Monat</span>
                </div>
            </div>

            <ul class="features">
                <li><i class="fas fa-check"></i> Verfügbares Feature</li>
                <li class="deaktiviert"><i class="fas fa-times"></i> Nicht verfügbar</li>
            </ul>

            <a href="#" class="btn">Button-Text</a>

        </article>

        <!-- ... weitere article-Elemente -->

    </div>
</main>

Inhalte der drei Karten

	Starter	Professional `highlight`	Enterprise
Icon	`fa-seedling`	`fa-rocket`	`fa-building`
Preis	0 €	19 €	49 €
Button	Kostenlos starten	Jetzt starten	Kontakt aufnehmen
1 Webseite	✓	✓	✓
Speicher	500 MB	10 GB	100 GB
SSL-Zertifikat	✓	✓	✓
Eigene Domain	–	✓	✓
E-Mail-Postfächer	–	5 Stück	unbegrenzt
Prioritäts-Support	–	–	✓

3CSS – Basis-Styling (`pricing.css`)

Dieser Block enthält das gesamte visuelle Styling der Seite: Hintergrund, Schrift, Karten-Aussehen, Badge, Preisdarstellung, Feature-Liste und Button. Er ist fertig vorgegeben – du kannst ihn direkt in deine pricing.css übernehmen und danach das Flexbox-CSS ergänzen.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 3em 1.5em 4em;
    color: #333;
}

header {
    text-align: center;
    color: white;
    margin-bottom: 3em;
}

header h1 {
    font-size: 2.2em;
    font-weight: 700;
    margin-bottom: 0.3em;
}

header p {
    font-size: 1.05em;
    opacity: 0.8;
}

.card {
    background: #fff;
    border-radius: 12px;
    width: 280px;
    padding: 2em 1.5em;
    box-shadow: 0 12px 35px rgba(0,0,0,0.18);
    position: relative;
}

.card.highlight {
    background: #1a1a2e;
    color: #fff;
}

.badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: #e94560;
    color: #fff;
    font-size: 0.68em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3em 1.1em;
    border-radius: 20px;
    white-space: nowrap;
}

.card-header {
    text-align: center;
    padding-bottom: 1.5em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 1.5em;
}

.card.highlight .card-header {
    border-color: rgba(255,255,255,0.12);
}

.card-header i {
    color: #667eea;
    margin-bottom: 0.5em;
    display: block;
}

.card.highlight .card-header i {
    color: #e94560;
}

.card-header h2 {
    font-size: 1.15em;
    font-weight: 600;
    margin-bottom: 0.8em;
}

.preis .betrag {
    font-size: 2.3em;
    font-weight: 700;
    color: #1a1a2e;
}

.card.highlight .preis .betrag {
    color: #fff;
}

.preis .zeitraum {
    font-size: 0.85em;
    color: #999;
}

.card.highlight .preis .zeitraum {
    color: #aaa;
}

.features {
    list-style: none;
    margin-bottom: 2em;
}

.features li {
    padding: 0.4em 0;
    font-size: 0.87em;
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.features li i.fa-check {
    color: #4caf50;
    width: 14px;
}

.features li i.fa-times {
    color: #ccc;
    width: 14px;
}

.features li.deaktiviert {
    color: #bbb;
}

.card.highlight .features li.deaktiviert {
    color: #555;
}

.btn {
    display: block;
    text-align: center;
    background: #667eea;
    color: #fff;
    text-decoration: none;
    padding: 0.85em;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9em;
    transition: background 0.2s, transform 0.1s;
}

.btn:hover {
    background: #5563c1;
    transform: translateY(-1px);
}

.card.highlight .btn {
    background: #e94560;
}

.card.highlight .btn:hover {
    background: #c73652;
}

4CSS Flexbox – Layout der Karten

Das ist der Kern der Aufgabe. Ergänze folgende Regeln am Ende deiner pricing.css:

Schritt 4a – Karten nebeneinander

Mache .cards zum Flex-Container. Wichtig: align-items: flex-start sorgt dafür, dass unterschiedlich hohe Karten oben bündig bleiben (statt auf gleiche Höhe gestreckt zu werden):

.cards {
    /* Schalte den Flexbox-Modus ein.
       Zentriere die Karten horizontal.
       Stelle sicher, dass unterschiedlich hohe Karten oben
       bündig bleiben und nicht gestreckt werden.
       Füge einen Abstand zwischen den Karten hinzu (gap).
       Erlaube Umbruch in neue Zeilen, falls nötig. */
}

Schritt 4b – Highlight-Karte vergrößern

Die mittlere Karte soll optisch größer wirken, ohne das Layout zu verschieben. transform: scale() skaliert ein Element, ohne den umgebenden Fluss zu verändern:

.card.highlight {
    /* Skaliere die Karte auf ca. 106 % ihrer normalen Größe.
       Verwende transform: scale(). */
}

5Responsive Design – Media Queries

Auf kleineren Bildschirmen passen drei Karten nebeneinander nicht mehr gut. Füge diese Blöcke ans Ende deiner pricing.css:

Ab 900 px: Highlight-Skalierung aufheben

Bei mittlerer Bildschirmbreite ist die Vergrößerung der Highlight-Karte störend. Setze die Skalierung zurück auf den Normalwert:

@media (max-width: 900px) {
    .card.highlight {
        /* Hebe die Skalierung auf (Normalwert: scale(1)). */
    }
}

Ab 768 px: Karten untereinander stapeln

Auf Smartphones sollen die Karten untereinander angezeigt werden. Außerdem bekommt jede Karte eine maximale Breite, damit sie nicht zu breit wird:

@media (max-width: 768px) {
    .cards {
        /* Stapele die Karten untereinander (flex-direction).
           Zentriere sie dabei horizontal (align-items). */
    }

    .card {
        /* Gib jeder Karte eine Breite von maximal 380px,
           aber nicht breiter als 90 % des Viewports.
           Tipp: width: min(380px, 90vw) */
    }
}

CSS-Eigenschaften in dieser Übung

Folgende Eigenschaften werden hier u.a. eingesetzt, manche davon sind eventuell neu:

display: flex – schaltet den Flexbox-Modus ein
justify-content – verteilt Elemente entlang der Hauptachse (horizontal)
align-items – richtet Elemente auf der Querachse aus (vertikal)
gap – Abstand zwischen den Flex-Elementen
flex-wrap: wrap – erlaubt Umbruch in neue Zeilen
flex-direction: column – stapelt Elemente untereinander statt nebeneinander
transform: scale() – skaliert ein Element ohne den Layoutfluss zu verändern
min(a, b) – nimmt den kleineren der beiden Werte (nützlich für responsive Breiten)
linear-gradient() – erzeugt einen Farbverlauf als Hintergrund
transition – animiert CSS-Änderungen sanft (z. B. Hover-Effekte)
@media (max-width: …) – Regeln gelten nur unterhalb einer bestimmten Breite

Für mehr Hintergrundwissen zu den neuen CSS-Eigenschaften lese in einer Referenz nach (z.B. W3Schools)