Skip to main content

Aufgabe 5: Preispläne Content

  1. Füge in den card-header-Elemente einen Titel mit der Klasse kleiner-titel hinzu.
Tipp: Wiederverwenden

Wir verwenden dafür die Klasse kleiner-titel aus einer vorherigen Aufgabe erneut.

  1. Füge in den card-body-Elemente eine große Überschrift mit dem Preis hinzu.
  2. Füge in den card-body-Elemente eine ungeordnete Liste mit den Features des Preisplans hinzu. Geben den Listenelementen die Klasse list-unstyled mit.
Tipp: Standard Listen-Styling

Die Klasse list-unstyled entfernt die Standard-Listen-Styling.

Lösung

index.html (eine Card)​

<div class="card rounded-3">
  <div class="card-header">
    <h3 class="kleiner-titel">Free</h3>
  </div>
  <div class="card-body">
    <h1>0€</h1>
    <ul class="list-unstyled">
      <li>Limitierte Features</li>
      <li>Werbung</li>
      <li>Kein Support</li>
    </ul>
  </div>
</div>