Bootstrap 4 Schnellstart – Webshop Produktseite mit Inhalten füllen
In diesem Projekt werden wir unsere Produktseite mit Inhalten befüllen und mit Bootstrap verschönern.
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 Produktseite mit Bootstrap.
Starten wir mit der ersten Aufgabe:
1. Menü
Ändere den style der Menüzeile auf einen grauen Hintergrund (grey).
Ändere den Text in Ballon Bowling und füge 3 Links hinzu.
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div class="row" style="background-color: gray">
<div class="col small">
Balloon Bowling
<a href="#">Home</a>
<a href="#">Herunterladen</a>
<a href="#">Über uns</a>
</div>
</div>
[/lp_spoiler]
2. Header
Für den Header nutzen wir eine Zeile mit 2 Spalten: Eine für die Überschrift und eine für das Produktbild.
Füge in die erste Spalte eine Überschrift mit einem Ergänzungstext ein.
In die zweite Spalte kannst du folgendes Bild verwenden mit 300px Breite: /assets/img/produkt1.png
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div class="row" style="background-color: lightgray">
<div class="col">
<h1 class="display-1">Balloon Bowling</h1>
<p class="lead">Beste Spiel 2018</p>
</div>
</div>
[/lp_spoiler]
3. Vorteile
Für jeden Produktvorteil kannst du eine h2-Überschrift und einen Textabsatz verwenden.
Schreibe 4 Vorteile für das Produkt (Spaß, Zeit, Multiplayer, Grafik).
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div class="row">
<div class="col">
<h2>MEGA Spaß</h2>
<p>Dieses Spiel macht richtig viel Spaß!</p>
</div>
<div class="col">
<h2>Zeitvertreib</h2>
<p>Langeweile? Nicht mit diesem Spiel!</p>
</div>
</div>
<div class="row">
<div class="col">
<h2>Multiplayer</h2>
<p>Gewinne gegen deine Freunde!</p>
</div>
<div class="col">
<h2>Schöne Grafiken</h2>
<p>Es sieht dazu auch noch verdammt gut aus!</p>
</div>
</div>
[/lp_spoiler]
4. Video-Trailer
In der nächsten Zeile fügst du eine h2-Überschrift für einen TRailer hinzu und dazu betten wir ein Video ein.
Folgendes Video kannst du einbetten: https://www.youtube.com/embed/XGakvZ4tDKM
(Da das Marketing-Team von Balloon Bowling noch kein Video erstellt hat, nehmen wir eins von lerneProgrammieren.de)
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div class="row" style="background-color: lightgray">
<div class="col">
<h2>Balloon Bowling - Der Trailer</h1>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src=" https://www.youtube.com/embed/XGakvZ4tDKM"></iframe>
</div>
</div>
</div>
[/lp_spoiler]
5. Footer
Der Footer-Bereich ist simpel erstellt und besteht aus 3 Spalten.
Die erste Spalte enthält nur den Produktnamen.
In die erste und zweite kommen jeweils Links für Inhalte und Rechtliches.
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div class="row">
<div class="col">
Ballon Bowling
</div>
<div class="col">
<a href="#">Links</a>
</div>
<div class="col">
<a href="#">Rechtliches</a>
</div>
</div>
[/lp_spoiler]
Komplettlösung:
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div class="row" style="background-color: gray">
<div class="col small">
Balloon Bowling
<a href="#">Home</a>
<a href="#">Herunterladen</a>
<a href="#">Über uns</a>
</div>
</div>
<div class="row" style="background-color: lightgray">
<div class="col">
<h1 class="display-1">Balloon Bowling</h1>
<p class="lead">Beste Spiel 2018</p>
</div>
</div>
<div class="row">
<div class="col">
<img src="/assets/img/produkt1.png" class="mx-auto d-block img-fluid rounded" width="300px">
</div>
</div>
<div class="row">
<div class="col">
<h2>MEGA Spaß</h2>
<p>Dieses Spiel macht richtig viel Spaß!</p>
</div>
<div class="col">
<h2>Zeitvertreib</h2>
<p>Langeweile? Nicht mit diesem Spiel!</p>
</div>
</div>
<div class="row">
<div class="col">
<h2>Multiplayer</h2>
<p>Gewinne gegen deine Freunde!</p>
</div>
<div class="col">
<h2>Schöne Grafiken</h2>
<p>Es sieht dazu auch noch verdammt gut aus!</p>
</div>
</div>
<div class="row" style="background-color: lightgray">
<div class="col">
<h2>Balloon Bowling - Der Trailer</h1>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src=" https://www.youtube.com/embed/XGakvZ4tDKM"></iframe>
</div>
</div>
</div>
<div class="row">
<div class="col">
Ballon Bowling
</div>
<div class="col">
<a href="#">Links</a>
</div>
<div class="col">
<a href="#">Rechtliches</a>
</div>
</div>
[/lp_spoiler]