Submitted about 3 years ago

3-column preview card component

Kauê Leal de Lima•80

@kauelima21

Preview site View code

This is a solution for...3-column preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

It's the first solution I develop, I hope you like it. If possible, help me with some feedback! :)

Community feedback

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 years ago

Use footer for div with class attribution and write img tag instead of inserting that big svg code

<body>
  
  <main class="main_content">
    <section class="main_content_section">
      <article id="sedan">
        <header>
          <img src="images/icon-sedans.svg" alt="">
          <h1>Sedans</h1>
        </header>
        <section>
          <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
          <a href="#">Learn More</a>
        </section>
      </article>

      <article id="suv">
        <header>
          <img src="images/icon-suvs.svg" alt="">
          <h1>SUVs</h1>
        </header>
        <section>
          <p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p>
          <a href="#">Learn More</a>
        </section>
      </article>

      <article id="luxury">
        <header>
          <img src="images/icon-luxury.svg" alt="">
          <h1>Luxury</h1>
        </header>
        <section>
          <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</p>
          <a href="#">Learn More</a>
        </section>
      </article>
    </section>
  </main>
  <footer>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Kauê Leal</a>.
  </div>
</footer>
</body>```

Marked as helpful

Kauê Leal de Lima•80

@kauelima21Posted about 3 years ago

@JuveriaD Thank you!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord