Website: Zeige Fortschritt

16. Zeige Fortschritt

Weil jede Rebellion Fortschritte zeigen sollte

Mentor Hiram Abif

„Siehst du das? Ohne CSS ist HTML wie ein Gerüst ohne Fassade – stabil vielleicht, aber keiner will’s anschauen. Trotzdem: Wenn dein Fundament wackelt, zieht dir Seraphina höchstpersönlich die Ohren lang.
Und glaub mir, das willst du nicht erleben.“

Er deutet auf das Referenzbild.
„Das Bild zeigt dir alles. Schau genau hin. Jede Struktur, jede Einrückung zählt. Bau es sauber auf – sonst tanzen dir später die Klassen auf der Nase rum.“

Deine Aufgaben

Baue die Sektion der Gegner auf

Achte bereits im HTML, welche Stile bereits geschrieben wurden.

Löse die Aufgabe hier in der Konsole [–> im neuen Tab öffnen]

HTML

<section id="enemies">
     <h2 class="center"><span class="secondary bold">Unser</span> Fortschritt</h2>
     <div class="enemy container-large">
          <div class="enemy-card flex">
               <div class="enemy-name secondary center">
                    <i class="material-icons-rounded">target</i>
                    <h3>Tharnok</h3>
                    <p>Falsch abgebogen</p>
               </div>
          </div>
          <div class="enemy-card flex">
               <div class="enemy-name secondary center">
                    <i class="material-icons-rounded">target</i>
                    <h3>Kragor</h3>
                    <p>In der Werkstatt</p>
               </div>
          </div>
          <div class="enemy-card flex">
               <div class="enemy-name secondary center">
                    <i class="material-icons-rounded">target</i>
                    <h3>Vorath</h3>
                    <p>Nur noch ein Spiegelpicasso</p>
               </div>
          </div>
          <div class="enemy-card flex">
               <div class="enemy-name secondary center">
                    <i class="material-icons-rounded">target</i>
                    <h3>Zaraya</h3>
                    <p>Bietet jetzt sicheres Geleit</p>
               </div>
          </div>
          <div class="enemy-card flex">
               <div class="enemy-name secondary center">
                    <i class="material-icons-rounded">target</i>
                    <h3>Umbra</h3>
                    <p>auf unserer Seite</p>
               </div>
          </div>
          <div class="enemy-card flex">
               <div class="enemy-name secondary center">
                    <i class="material-icons-rounded">target</i>
                    <h3>Cobol</h3>
                    <p style="background-color:red">In Arbeit</p>
               </div>
          </div>
     </div>
</section>

CSS

.news-container {
   flex-wrap: wrap;
   gap: var(--spacing-large)
}

.news-container>div {
   flex: 1 1 20rem;
   border-radius: var(--border-large);
}

.news img {
   border-radius: var(--border-large) var(--border-large) 0 0;
}

.news h3::first-letter {
   font-size: 3rem;
}

.news {
   box-shadow: var(--shadow-light);
}