Body

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 50 von 76.

Aufgabe

Einfach

In diesem Projekt erstellen und gestalten wir ein einfaches Anmeldeformular. Dieses Projekt hilft dir dabei, wichtige CSS-Konzepte zu üben, darunter:
✅ Elemente auf einer Webseite perfekt zu zentrieren
✅ Formularelemente wie Eingabefelder und Schaltflächen zu gestalten
✅ Mit Rahmen, Schatten und Abständen zu arbeiten
✅ Raum für Kreativität beim Design zu lassen

Am Ende des Projekts wirst du ein ansprechend gestaltetes Anmeldeformular haben, das modern und professionell aussieht, ähnlich wie auf dem Bild unten.

Wende Stile auf das <body>-Tag an. Befolge die folgenden Schritte:

Lege die Hintergrundfarbe auf einen hellen Farbton deiner Wahl fest.
Verwende Flexbox, um das Formular sowohl horizontal als auch vertikal zu zentrieren.
Lege die Höhe der Seite auf 100vh fest, damit das Formular auch bei einer Größenänderung zentriert bleibt.

Probier es selbst

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>