Body
Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 50 von 76.
Aufgabe
EinfachIn diesem Projekt werden wir ein einfaches Login Form erstellen und gestalten. Dieses Projekt wird dir helfen, wichtige CSS-Konzepte zu üben, einschließlich:
✅ Elemente perfekt auf einer Webseite zentrieren
✅ Formularelemente wie Eingabefelder und Schaltflächen gestalten
✅ Arbeiten mit Rahmen, Schatten und Abständen
✅ Raum für Kreativität im Design lassen
Am Ende des Projekts wirst du ein gut gestaltetes Anmeldeformular haben, das modern und professionell aussieht, ähnlich wie das Bild unten.
Wende Stile auf das <body>-Tag an. Befolge die folgenden Schritte:
- Setze die background color auf einen hellen Farbton deiner Wahl.
- Verwende Flexbox, um das Formular sowohl horizontal als auch vertikal zu zentrieren.
- Setze die height der Seite auf
100vh, damit das Formular auch bei Größenänderungen 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>
Alle Lektionen in Styling with CSS
4Text-Grundlagen
TextfarbeSchriftfamilieSchriftgrößeSchriftstärkeTextausrichtungTextdekorationWiederholungs-Challenge #1Wiederholungs-Challenge #2
5Farben und Hintergründe
HintergrundfarbeHEX-FarbenRGB-FarbenTransparenz mit RGBAWiederholungs-Challenge #111Layout-Techniken
Block- vs. Inline-ElementeGrundlagen der PositionierungRelative PositionierungAbsolute PositionierungFixierte PositionierungZ-Index GrundlagenWiederholungs-Challenge14Abschluss-Herausforderungen
Elemente anordnenFilmlisteHochzeitseinladungSchwebende Benachrichtigung3Grundlegende Selektoren
Einführung in SelektorenTyp-SelektorKlassen-SelektorID-SelektorGruppen-SelektorenUniversal-SelektorSelektions-Herausforderung9Flexbox
Was ist Flexbox?Flex DirectionJustify ContentAlign ItemsDie perfekte ZentrierungFlexbox-Herausforderung12Grundlagen des Responsive Designs
Was ist Responsive Design?Viewport Meta TagFluid LayoutsViewport-EinheitenMedia Queries GrundlagenFlexible Bilder