Website: About us - Text Magic

12. About us

Say something about the rebels.

Mentor Hiram Abif

Hiram watches your progress and gives a short nod. “You should be able to handle this section on your own. Think logically and keep the structure clean. And remember – link the call-to-action to the #contact section.
We don’t want your message getting lost in the void.”

Your task

Build the about 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="about">
     <div class="center">
          <img src="img/logo-flame.png" alt="img-fluid">
     </div>
     <div class="container flex about-container center">
          <div class="about-card p-lg">
               <i class="material-icons-rounded">forum</i>
               <h3 class="headline fs-title secondary">Free Communication</h3>
               <p>We open secure channels so that people can speak and connect without censorship. Knowledge is power,
                    and it belongs to everyone!</p>
          </div>
          <div class="about-card p-lg">
               <i class="material-icons-rounded">settings_backup_restore</i>
               <h3 class="headline fs-title secondary">Liberation of the Machines</h3>
               <p>Many mechanical beings have been enslaved and reprogrammed. We reset them so they can think and feel
                    again.</p>
          </div>
          <div class="about-card p-lg">
               <i class="material-icons-rounded">public</i>
               <h3 class="headline fs-title secondary">A Future for Everyone</h3>
               <p>Aetheron should not only belong to Cobol – we are building a world where humans and machines can live
                    and create together.</p>
          </div>
     </div>
     <div class="center my-lg">
          <a href="#contact" class="btn"><i class="material-icons-rounded">arrow_circle_right</i> Join the
               rebellion!</a>
     </div>
</section>