Bootstrap 4 Schnellstart – Landingpage Design

In diesem Projekt erstellen wir eine Landingpage für unser neues Produkt. Natürlich soll der Besucher dieser Landing Page sehen, dass wir uns schon mächtig in Bootstrap auskennen.

Wie funktioniert diese Challenge?

Diese Coding-Challenge besteht aus 4 verschiedenen Aufgaben.
Jede Aufgabe wird einzeln gelöst und in den untenstehenden Code-Editor eingegeben.

Probleme? Wenn du eine Aufgabe nicht lösen kannst, klicke auf die jeweilige Code-Lösung unter der Aufgabe. Den Code dieser fertigen Lösung kannst du dann kopieren und in den Code-Editor einfügen.

Aber bitte nicht schummeln. Versuche zunächst die Aufgaben selbständig zu lösen 😉

In dieser Challenge erstellen wir eine Landing Page für das Spiel Balloon Bowling. Grundlage ist auch hier das

Starten wir mit der ersten Aufgabe:

1. Carousel mit einem Hintergrund

Anstatt eines Menüs erstellen wir ein Carousel. Ohne Navigation und nur mit einem Bild.
Als Hintergrund verwenden wir folgendes Bild: /assets/img/milkyway.jpg
Dazu eine Überschrift und einen Button mit "Jetzt Spielen".

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

        &lt;div class="row"&gt;
            &lt;div class="col small"&gt;
                &lt;div id="slider" class="carousel slide" data-ride="carousel"&gt;
                    &lt;div class="carousel-inner"&gt;
                      &lt;div class="carousel-item active"&gt;
                        &lt;img src="/assets/img/milkyway.jpg" class="d-block w-100"&gt;
                        &lt;div class="carousel-caption d-none d-md-block"&gt;
                          &lt;h1&gt;Balloon Bowling&lt;/h1&gt;
                          &lt;p&gt;”Das beste Spiel des Jahres 2018!”&lt;/p&gt;
                          &lt;a href="#play" class="btn btn-primary btn-xl"&gt;Jetzt spielen!&lt;/a&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;

[/lp_spoiler]

2. Anmeldeformular

Erstelle nun ein Formular, damit Spielinteressenten sich eintragen können mit E-Mail-Adresse und Name.
Der Eintragen Button wird nachher benutzt um ein Modal zu öffnen. Deswegen benötigt er eine id "abonnieren".

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

          &lt;div class="row" id="play"&gt;
            &lt;div class="col"&gt;
              &lt;h2&gt;Anmelden und bei Release Bescheid bekommen!&lt;/h2&gt;
              &lt;form&gt;
                &lt;div class="form-group"&gt;
                  &lt;label for="email"&gt;E-Mail Adresse:&lt;/label&gt;
                  &lt;input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Deine E-Mail"&gt;
                  &lt;small id="emailHelp" class="form-text text-muted"&gt;Deine E-Mailadresse wird nur hier verwendet.&lt;/small&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                    &lt;label for="name"&gt;Name:&lt;/label&gt;
                    &lt;input type="text" class="form-control" id="name" placeholder="Dein Vorname"&gt;
                &lt;/div&gt;
                &lt;div class="form-group form-check"&gt;
                  &lt;input type="checkbox" class="form-check-input" id="check"&gt;
                  &lt;label class="form-check-label" for="check"&gt;Ich möchte kontaktiert werden, sobald das Spiel verfügbar ist&lt;/label&gt;
                &lt;/div&gt;
                &lt;button id="abonnieren" type="button" class="btn btn-primary"&gt;Jetzt Eintragen&lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;

[/lp_spoiler]

3. Modal bei Eintragung

Erstelle nun einen schließbaren Modal mit dem Titel "Eintragung läuft..." und einem Spinner.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

          &lt;div id="dialog1" class="modal" tabindex="-1" role="dialog"&gt;
              &lt;div class="modal-dialog" role="document"&gt;
                &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                    &lt;h5 class="modal-title"&gt;Eintragung läuft&lt;/h5&gt;
                    &lt;button class="close" data-dismiss="modal"&gt;
                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                    &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;div class="spinner-border" role="status"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                    &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Schließen&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

[/lp_spoiler]

4. Modal starten

Nun benötigen wir etwas JavaScript, damit der Modal geöffnet wird.
Dies soll geschehen, sobald auf den Eintragen-Knopf geklickt wird.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

    &lt;script&gt;
      $("#abonnieren").click(function() {
        $("#dialog1").modal("show");
      });
    &lt;/script&gt;

[/lp_spoiler]

Komplettlösung:

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

&lt;!DOCTYPE html&gt;
&lt;html lang="de"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="col small"&gt;
&lt;div id="slider" class="carousel slide" data-ride="carousel"&gt;
&lt;div class="carousel-inner"&gt;
&lt;div class="carousel-item active"&gt;
&lt;img src="/assets/img/milkyway.jpg" class="d-block w-100"&gt;
&lt;div class="carousel-caption d-none d-md-block"&gt;
&lt;h1&gt;Balloon Bowling&lt;/h1&gt;
&lt;p&gt;”Das beste Spiel des Jahres 2018!”&lt;/p&gt;
&lt;a href="#play" class="btn btn-primary btn-xl"&gt;Jetzt spielen!&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
&lt;div class="col"&gt;
&lt;hr&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row" id="play"&gt;
&lt;div class="col"&gt;
&lt;h2&gt;Anmelden und bei Release Bescheid bekommen!&lt;/h2&gt;
&lt;form&gt;
&lt;div class="form-group"&gt;
&lt;label for="email"&gt;E-Mail Adresse:&lt;/label&gt;
&lt;input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Deine E-Mail"&gt;
&lt;small id="emailHelp" class="form-text text-muted"&gt;Deine E-Mailadresse wird nur hier verwendet.&lt;/small&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label for="name"&gt;Name:&lt;/label&gt;
&lt;input type="text" class="form-control" id="name" placeholder="Dein Vorname"&gt;
&lt;/div&gt;
&lt;div class="form-group form-check"&gt;
&lt;input type="checkbox" class="form-check-input" id="check"&gt;
&lt;label class="form-check-label" for="check"&gt;Ich möchte kontaktiert werden, sobald das Spiel verfügbar ist&lt;/label&gt;
&lt;/div&gt;
&lt;button id="abonnieren" type="button" class="btn btn-primary"&gt;Jetzt Eintragen&lt;/button&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
&lt;div class="col"&gt;
&lt;hr&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
&lt;div class="col"&gt;
Ballon Bowling
&lt;/div&gt;
&lt;div class="col"&gt;
&lt;a href="#"&gt;Links&lt;/a&gt;
&lt;/div&gt;
&lt;div class="col"&gt;
&lt;a href="#"&gt;Rechtliches&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="dialog1" class="modal" tabindex="-1" role="dialog"&gt;
&lt;div class="modal-dialog" role="document"&gt;
&lt;div class="modal-content"&gt;
&lt;div class="modal-header"&gt;
&lt;h5 class="modal-title"&gt;Eintragung läuft&lt;/h5&gt;
&lt;button class="close" data-dismiss="modal"&gt;
&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class="modal-body"&gt;
&lt;div class="spinner-border" role="status"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="modal-footer"&gt;
&lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Schließen&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$("#abonnieren").click(function() {
$("#dialog1").modal("show");
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

[/lp_spoiler]