Erstellen einer responsiven „Coming Soon'-Seite

Ich habe mich kürzlich einer Frontend-Mentor-Herausforderung gestellt: der Erstellung einer responsiven „Coming Soon“-Landingpage für einen Modehändler. Der Auftrag erforderte ein E-Mail-Abonnementformular, ein ansprechendes Hintergrundbild und eine nahtlose Reaktionsfähigkeit auf Desktop und Mobilgeräten. In diesem Beitrag werden mein Ansatz, wichtige Entscheidungen und Problemlösungsstrategien detailliert beschrieben.

Phase 1: Projektrückbau

Vor dem Codieren habe ich die Projektanforderungen sorgfältig analysiert:

• Ein Heldenbereich mit dem Logo und der „Coming Soon“-Nachricht.
• Ein E-Mail-Abonnementformular für Benutzeranmeldungen.
• Ein responsives Layout mit einem Hintergrundbild, das sich dynamisch an die Bildschirmgröße anpasst.
• Grundlegende E-Mail-Validierung, um eine korrekte E-Mail-Eingabe sicherzustellen.

Phase 2: HTML-Struktur

Ich habe einer sauberen, semantischen HTML-Struktur mit minimalen Divs Priorität eingeräumt. Das Layout umfasste zwei Hauptabschnitte:

1. Details-Abschnitt: Enthält das Logo, die Überschrift, die Beschreibung und das E-Mail-Eingabeformular.
2. Bildbereich:Anzeige des Hintergrundbilds.

Meine HTML-Struktur:

<code class="language-html"><div class="coming-soon-container">
  <!-- Details Section -->
  <div class="details">
    <!-- Logo, Heading, Description, Form -->
  </div>
  <!-- Image Section -->
  <div class="image-container">
    <img src="..." alt="Coming Soon Image">
  </div>
</div></code>

Phase 3: CSS-Styling und Reaktionsfähigkeit

Flexbox war maßgeblich an der Erzielung eines optisch ansprechenden und ansprechenden Layouts beteiligt. Es optimierte die Anordnung der Elemente sowohl horizontal (Desktop) als auch vertikal (mobil).

Ursprünglich wurde .coming-soon-container für ein Side-by-Side-Desktop-Layout display: flex verwendet. Eine Medienabfrage (@media (max-width: 768px)) hat das flex-direction in column-reverse für Mobilgeräte geändert und das Bild unter den Details platziert.

Flexbox-CSS:

<code class="language-css">.coming-soon-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .coming-soon-container {
    flex-direction: column-reverse;
  }
}</code>

Phase 4: E-Mail-Eingabe und Pfeilsymbol-Design

Das E-Mail-Formular wurde im Hinblick auf eine klare, moderne Ästhetik gestaltet. Das Eingabefeld und die Schaltfläche „Senden“ (ein Pfeilsymbol) wurden optisch ansprechend gestaltet.

CSS für Eingabe und Symbol:

<code class="language-css">.input-container {
  position: relative;
  width: 385px;
}

/* ... (input and span styles) ... */</code>

Phase 5: Responsives Heldenbild

Die object-fit-Eigenschaft stellte sicher, dass das Heldenbild ohne Verzerrung reaktionsschnell skaliert wurde.

CSS für Bildcontainer:

<code class="language-css">.image-container {
  width: 40%;
  height: 100vh;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}</code>

Phase 6: JavaScript-E-Mail-Validierung

Die clientseitige E-Mail-Validierung wurde mithilfe von JavaScript implementiert, um das E-Mail-Format zu überprüfen. Ein regulärer Ausdruck überprüfte die Eingabe anhand eines Standard-E-Mail-Musters.

JavaScript-Validierungsfunktion:

<code class="language-javascript">function validateEmail() {
  // ... (validation logic) ...
}</code>

Fazit

Dieses „Coming Soon“-Seitenprojekt hat meine Fähigkeiten im Bereich Responsive Design und Formularvalidierung verfeinert. Die Verwendung von Flexbox für Layout, individuelles Design und Mobile-First-Prinzipien führte zu einem klaren und funktionalen Design. Ich kann die Challenges von Frontend Mentor wärmstens empfehlen, um die Fähigkeiten in der Frontend-Entwicklung zu schärfen. Der vollständige Code ist auf GitHub verfügbar: GitHub Link

Das obige ist der detaillierte Inhalt vonErstellen einer responsiven „Coming Soon'-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!