Entwerfe eine atemberaubende Anmeldeseite

Einführung

In diesem Projekt lernst du, wie du eine Anmeldeseite mit einer schönen Schnittstelle entwirfst und gestaltest. Ziel ist es, eine visuell ansprechende Anmeldeseite zu erstellen, die eine angenehme Benutzererfahrung bietet.

👀 Vorschau

Fertiges Design der Anmeldeseite

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die Projektstruktur einrichtest und die bereitgestellten Dateien verstehst
Wie du den Körper und die Navigationsleiste der Anmeldeseite stylst
Wie du das Anmeldeformular stylst, einschließlich des Avatar-Bilds, des Formularcontainers, der Formularelemente und des Texts

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Mit CSS eine visuell ansprechende Layout für die Anmeldeseite zu erstellen
Verschiedene Elemente eines Anmeldeformulars, wie Eingabefelder, Buttons und Text, zu stylen
Bilder und Hintergrundstile einzubauen, um das Gesamtdesign der Anmeldeseite zu verbessern

Projektstruktur einrichten

In diesem Schritt lernst du, wie du die Projektstruktur für die Anmeldeseite einrichtest.

Öffne die Lab-Umgebung und navigiere zum Projektverzeichnis.
Im Projektverzeichnis solltest du die folgende Dateistruktur sehen:

├── css
│   └── style.css
├── images
│   ├── background-pic.jpg
│   ├── cat.png
│   └── icon.png
└── index.html

In der Datei css/style.css wirst du deinen CSS-Code schreiben, um die Anmeldeseite zu stylen. Im Ordner images befinden sich die in Projekt verwendeten Bilddateien.
Öffne die Datei index.html in einem Texteditor. Dies ist die HTML-Datei, die die Struktur der Anmeldeseite enthält.
Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.
Öffne "Web 8080" oben auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Den Körper und die Navigationsleiste stylen

In diesem Schritt wirst du den Körper und die Navigationsleiste der Anmeldeseite stylen.

Öffne die Datei css/style.css in einem Texteditor.
Füge folgenden CSS-Code zur Datei hinzu:

/* Füge deinen CSS-Code hier hinzu */
body {
  background-image: url("../images/background-pic.jpg");
  background-size: cover;
  color: #fff;
  height: 945;
  width: 1920;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-bar img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 15px;
}

Dieser Code setzt das Hintergrundbild für den Körper, den Navigationsleistenstil und fügt ein Bild in die obere rechte Ecke der Seite hinzu, um auf das Profil zuzugreifen.

Den Anmeldeformularbereich gestalten

In diesem Schritt wirst du das Anmeldeformular stylen.

Füge folgenden CSS-Code zur Datei css/style.css hinzu:

.content > img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-left: 125px;
  margin-top: -100px;
}

.content-container {
  margin: 100px auto;
  width: 450px;
  height: 600px;
  background-color: rgb(0, 0, 0, 0.45);
  border-radius: 10px;
}

.form {
  text-align: center;
}

.form > h2 {
  font-size: 45px;
  font-weight: 800;
  margin-bottom: 20px;
}

button {
  width: 80px;
  height: 30px;
  border: #041c32;
  background-color: #2d4263;
  font-size: 16px;
  color: white;
  margin: 10px;
}

input {
  font-size: 20px;
  border-radius: 5px;
  width: 300px;
  margin: 10px;
}

.text {
  text-align: center;
  margin: 10px;
}

.text > a {
  text-decoration: none;
  color: white;
}

Dieser Code formatiert das Anmeldeformular, einschließlich des Avatar-Bilds, des Formularcontainers, der Formularelemente (Überschrift, Button und Eingabefelder) und des Texts am unteren Rand des Formulars.

Den Endresultat überprüfen und testen

In diesem Schritt kannst du die Ähnlichkeit deiner abgeschlossenen Seite mit der tatsächlich vorgegebenen Seite testen.

Speichere die Änderungen in der Datei style.css.
Aktualisiere den Browser, um das fertige Ergebnis zu sehen. Nachdem du die vorherigen Schritte abgeschlossen hast, wirst du lernen, wie du mithilfe von CSS-Syntax eine Seite layouten und veredeln kannst, um deine Anmeldeseite so weit wie möglich wie folgt zu gestalten:

Bildbeschreibung

Herzlichen Glückwunsch! Du hast das Projekt erfolgreich abgeschlossen, um deine Anmeldeseite zu verändern.