HTML & CSS Anfänger 60 min

Projekt: Landing Page erstellen

Baue eine professionelle Landing Page mit HTML und CSS - komplett von Grund auf mit Hero-Sektion, Features und Footer.

Aktualisiert:

Projekt: Landing Page

In diesem Projekt baust du eine professionelle Landing Page komplett von Grund auf. Du wendest alles an, was du in den vorherigen Kapiteln gelernt hast: semantisches HTML, Flexbox, Grid, Responsive Design und moderne CSS-Features.

Was wir bauen

Unsere Landing Page fuer “CloudSync” (eine fiktive SaaS-App) hat:

  • Hero-Sektion mit Ueberschrift und Call-to-Action
  • Features-Bereich mit Grid-Layout
  • Testimonials (Kundenstimmen)
  • Preistabelle mit drei Paketen
  • Footer mit mehreren Spalten

Schritt 1: Projektstruktur

Erstelle einen Ordner landing-page/ mit diesen Dateien:

landing-page/
├── index.html
└── style.css

Schritt 2: HTML-Grundgeruest

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="CloudSync - Deine Dateien, ueberall verfuegbar. Sichere Cloud-Speicher Loesung.">
    <title>CloudSync - Sichere Cloud fuer alle | Deine Dateien, ueberall</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="site-header">
        <nav class="navbar container">
            <a href="/" class="logo">CloudSync</a>
            <ul class="nav-links">
                <li><a href="#features">Features</a></li>
                <li><a href="#testimonials">Kundenstimmen</a></li>
                <li><a href="#preise">Preise</a></li>
                <li><a href="#kontakt" class="btn btn-nav">Kostenlos testen</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <!-- Hero -->
        <section class="hero">
            <div class="container">
                <div class="hero-content">
                    <h1>Deine Dateien.<br>Ueberall verfuegbar.</h1>
                    <p class="hero-text">
                        CloudSync synchronisiert deine Dateien sicher und
                        zuverlaessig zwischen all deinen Geraeten. Einfach,
                        schnell und verschluesselt.
                    </p>
                    <div class="hero-buttons">
                        <a href="#preise" class="btn btn-primary">Kostenlos starten</a>
                        <a href="#features" class="btn btn-secondary">Mehr erfahren</a>
                    </div>
                    <p class="hero-note">Keine Kreditkarte noetig. 14 Tage kostenlos.</p>
                </div>
            </div>
        </section>

        <!-- Features -->
        <section id="features" class="features">
            <div class="container">
                <h2 class="section-title">Warum CloudSync?</h2>
                <p class="section-subtitle">Alles, was du fuer deine Dateien brauchst.</p>

                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">&#128274;</div>
                        <h3>Ende-zu-Ende Verschluesselung</h3>
                        <p>Deine Daten sind immer geschuetzt. Nur du hast den Schluessel.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">&#9889;</div>
                        <h3>Blitzschneller Sync</h3>
                        <p>Aenderungen werden in Echtzeit synchronisiert -- auf allen Geraeten.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">&#128241;</div>
                        <h3>Alle Plattformen</h3>
                        <p>Verfuegbar fuer Windows, Mac, Linux, iOS und Android.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">&#128101;</div>
                        <h3>Team-Zusammenarbeit</h3>
                        <p>Teile Ordner mit deinem Team und arbeite gemeinsam an Dateien.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">&#128336;</div>
                        <h3>Versionsverlauf</h3>
                        <p>Stelle jede Datei-Version der letzten 30 Tage wieder her.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">&#127760;</div>
                        <h3>Offline-Zugriff</h3>
                        <p>Arbeite auch ohne Internet. Aenderungen werden spaeter synchronisiert.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Testimonials -->
        <section id="testimonials" class="testimonials">
            <div class="container">
                <h2 class="section-title">Was unsere Nutzer sagen</h2>
                <div class="testimonials-grid">
                    <blockquote class="testimonial-card">
                        <p>"CloudSync hat unsere Team-Zusammenarbeit komplett veraendert.
                        Dateien sind immer aktuell, egal wo wir arbeiten."</p>
                        <footer>
                            <strong>Anna Mueller</strong>
                            <span>CTO bei TechStart GmbH</span>
                        </footer>
                    </blockquote>
                    <blockquote class="testimonial-card">
                        <p>"Endlich ein Cloud-Dienst, bei dem Datenschutz an erster
                        Stelle steht. Die Verschluesselung gibt mir Sicherheit."</p>
                        <footer>
                            <strong>Thomas Weber</strong>
                            <span>Freiberuflicher Designer</span>
                        </footer>
                    </blockquote>
                    <blockquote class="testimonial-card">
                        <p>"Der Versionsverlauf hat mich schon mehrfach gerettet.
                        Die beste Investition fuer mein kleines Unternehmen."</p>
                        <footer>
                            <strong>Lisa Schmidt</strong>
                            <span>Gruenderin von DesignLab</span>
                        </footer>
                    </blockquote>
                </div>
            </div>
        </section>

        <!-- Preise -->
        <section id="preise" class="pricing">
            <div class="container">
                <h2 class="section-title">Einfache, transparente Preise</h2>
                <p class="section-subtitle">Waehle den Plan, der zu dir passt.</p>

                <div class="pricing-grid">
                    <div class="pricing-card">
                        <h3>Starter</h3>
                        <div class="price">
                            <span class="amount">0</span>
                            <span class="currency">Euro</span>
                            <span class="period">/ Monat</span>
                        </div>
                        <ul class="pricing-features">
                            <li>5 GB Speicher</li>
                            <li>2 Geraete</li>
                            <li>Basis-Verschluesselung</li>
                            <li>E-Mail-Support</li>
                        </ul>
                        <a href="#" class="btn btn-outline">Kostenlos starten</a>
                    </div>

                    <div class="pricing-card featured">
                        <span class="badge">Beliebt</span>
                        <h3>Pro</h3>
                        <div class="price">
                            <span class="amount">9</span>
                            <span class="currency">Euro</span>
                            <span class="period">/ Monat</span>
                        </div>
                        <ul class="pricing-features">
                            <li>100 GB Speicher</li>
                            <li>Unbegrenzte Geraete</li>
                            <li>Ende-zu-Ende Verschluesselung</li>
                            <li>30 Tage Versionsverlauf</li>
                            <li>Prioritaets-Support</li>
                        </ul>
                        <a href="#" class="btn btn-primary">Jetzt starten</a>
                    </div>

                    <div class="pricing-card">
                        <h3>Business</h3>
                        <div class="price">
                            <span class="amount">19</span>
                            <span class="currency">Euro</span>
                            <span class="period">/ Nutzer / Monat</span>
                        </div>
                        <ul class="pricing-features">
                            <li>1 TB Speicher pro Nutzer</li>
                            <li>Unbegrenzte Geraete</li>
                            <li>Ende-zu-Ende Verschluesselung</li>
                            <li>Unbegrenzter Versionsverlauf</li>
                            <li>Admin-Konsole</li>
                            <li>24/7 Support</li>
                        </ul>
                        <a href="#" class="btn btn-outline">Kontakt aufnehmen</a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <a href="/" class="logo">CloudSync</a>
                    <p>Deine Dateien. Sicher. Ueberall.</p>
                </div>
                <div class="footer-links">
                    <h4>Produkt</h4>
                    <ul>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Preise</a></li>
                        <li><a href="#">Sicherheit</a></li>
                    </ul>
                </div>
                <div class="footer-links">
                    <h4>Unternehmen</h4>
                    <ul>
                        <li><a href="#">Ueber uns</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Karriere</a></li>
                    </ul>
                </div>
                <div class="footer-links">
                    <h4>Rechtliches</h4>
                    <ul>
                        <li><a href="#">Impressum</a></li>
                        <li><a href="#">Datenschutz</a></li>
                        <li><a href="#">AGB</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2026 CloudSync. Alle Rechte vorbehalten.</p>
            </div>
        </div>
    </footer>
</body>
</html>

Schritt 3: CSS — Reset und Variablen

/* ===== RESET & VARIABLEN ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --color-primary: #4f46e5;
    --color-primary-dark: #4338ca;
    --color-primary-light: #818cf8;
    --color-text: #1e293b;
    --color-text-light: #64748b;
    --color-bg: #ffffff;
    --color-bg-alt: #f8fafc;
    --color-border: #e2e8f0;
    --font-body: system-ui, -apple-system, sans-serif;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

Schritt 4: CSS — Layout und Komponenten

/* ===== CONTAINER ===== */
.container {
    width: min(90%, 1200px);
    margin: 0 auto;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-border);
}

.btn-outline:hover {
    border-color: var(--color-primary);
}

/* ===== NAVIGATION ===== */
.site-header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    z-index: 100;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links a {
    color: var(--color-text-light);
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--color-primary);
}

.btn-nav {
    background: var(--color-primary);
    color: white !important;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius);
}

/* ===== HERO ===== */
.hero {
    padding: clamp(4rem, 10vw, 8rem) 0;
    text-align: center;
    background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
}

.hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.hero-text {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--color-text-light);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.hero-note {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* ===== SECTIONS ===== */
.section-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    text-align: center;
    margin-bottom: 0.5rem;
}

.section-subtitle {
    text-align: center;
    color: var(--color-text-light);
    font-size: 1.125rem;
    margin-bottom: 3rem;
}

Schritt 5: CSS — Features, Testimonials und Preise

/* ===== FEATURES ===== */
.features {
    padding: clamp(3rem, 8vw, 6rem) 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 2rem;
}

.feature-card {
    padding: 2rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    transition: box-shadow 0.3s, transform 0.3s;
}

.feature-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
}

.feature-card p {
    color: var(--color-text-light);
    font-size: 0.95rem;
}

/* ===== TESTIMONIALS ===== */
.testimonials {
    padding: clamp(3rem, 8vw, 6rem) 0;
    background: var(--color-bg-alt);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: white;
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: none;
}

.testimonial-card p {
    font-style: italic;
    color: var(--color-text);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.testimonial-card footer {
    display: flex;
    flex-direction: column;
}

.testimonial-card footer strong {
    color: var(--color-text);
}

.testimonial-card footer span {
    color: var(--color-text-light);
    font-size: 0.875rem;
}

/* ===== PRICING ===== */
.pricing {
    padding: clamp(3rem, 8vw, 6rem) 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 2rem;
    align-items: start;
}

.pricing-card {
    padding: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-align: center;
    position: relative;
}

.pricing-card.featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
    transform: scale(1.05);
}

.pricing-card .badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: 600;
}

.pricing-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.price {
    margin-bottom: 2rem;
}

.price .amount {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-text);
}

.price .currency,
.price .period {
    color: var(--color-text-light);
}

.pricing-features {
    text-align: left;
    margin-bottom: 2rem;
}

.pricing-features li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-light);
}

.pricing-features li::before {
    content: "✓ ";
    color: var(--color-primary);
    font-weight: bold;
}

.pricing-card .btn {
    width: 100%;
}

/* ===== FOOTER ===== */
.site-footer {
    background: #0f172a;
    color: #94a3b8;
    padding: 4rem 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-brand .logo {
    font-size: 1.5rem;
    color: white;
    display: block;
    margin-bottom: 0.5rem;
}

.footer-links h4 {
    color: white;
    margin-bottom: 1rem;
}

.footer-links a {
    display: block;
    padding: 0.25rem 0;
    color: #94a3b8;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: white;
}

.footer-bottom {
    border-top: 1px solid #1e293b;
    padding-top: 2rem;
    text-align: center;
    font-size: 0.875rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .pricing-card.featured {
        transform: none;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

Schritt 6: Feinschliff

Smooth Scrolling

Fuege diese Zeile am Anfang deines CSS hinzu:

html {
    scroll-behavior: smooth;
}

Fokus-Styles

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

Reduced Motion

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

Erweiterungsideen

  • Hamburger-Menue fuer die mobile Navigation
  • Dark Mode mit prefers-color-scheme
  • Scroll-Animationen fuer die Feature-Cards
  • Kontaktformular am Ende der Seite
  • Bilder in die Feature-Cards oder Hero-Sektion

Was kommt als Naechstes?

Im naechsten Projekt baust du ein persoenliches Portfolio — deine eigene Visitenkarte im Web!

Zusammenfassung

  • Eine Landing Page folgt einem klaren Aufbau: Hero, Features, Social Proof, Pricing, Footer
  • CSS Custom Properties machen das Styling konsistent und aenderbar
  • Flexbox fuer Navigation und Buttons, Grid fuer Sektionen und Cards
  • clamp() und min() fuer fluid responsive Werte
  • Semantisches HTML mit <header>, <main>, <section>, <footer>
  • Sticky Navigation mit position: sticky und backdrop-filter

Pro-Tipp: Speichere diese Landing Page als Template! Du kannst sie fuer zukuenftige Projekte wiederverwenden, indem du einfach die Texte, Farben und Bilder austauschst. Die Struktur bleibt fast immer gleich.

Zurück zum HTML & CSS Kurs