Website: Show Progress

16. Show Progress

Because every rebellion should show progress

Mentor Hiram Abif

“See that? Without CSS, HTML is like scaffolding without a façade – maybe stable, but nobody wants to look at it. Still, if your foundation’s shaky, Seraphina will personally twist your ears. And trust me, you don’t want to experience that.”

He points at the reference image. “The picture tells you everything. Look closely. Every structure, every indentation matters. Build it cleanly – or the classes will run wild on you later.”

Your task

Build the progress layout.

While writing your HTML, keep an eye on which styles have already been defined —
there’s no need to reinvent what’s already written.

Solve the task here in the console [–> Open in a new tab]

HTML

<section id="enemies">
     <h2 class="center"><span class="secondary bold">Our</span> Progress</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>Took a wrong turn</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 the workshop</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>Now just a mirror Picasso</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>Now offering safe passage</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>On our side</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 progress</p>
               </div>
          </div>
     </div>
</section>