Submitted about 3 years ago

Mobile First Solution using Flexbox.

Manuel Torres•20

@squirtleturtle02

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 years ago

hey.. the accessibility issue says that you should have wrapped all divs in <main> which is the semantic tag ,except for the div with class attribution that should be wrapper in <footer> tag also use "/" in img tag instead of "\ "

<body>
<main>
  <div class="card">
  <img src="images/illustration-hero.svg" alt="hero-Img" class="hero"/>

  <section class="summary">
    <h1>Order Summary
    </h1>
    <p>
      You can now listen to millions of songs, audiobooks, and podcasts on any
      device anywhere you like!
    </p>
  </section>
  <section class="description">
    <img src="images/icon-music.svg" alt="music icon">

    <div class="pricing">
      <p class="plan">Annual Plan</p>
      <p class="price">$59.99/year</p>
    </div>
    <a>Change</a>
  </section>
  <section class="pay">
    
    <button class="pay-button">Proceed to Payment</button>
    <button class="cancel-button">Cancel Order</button>
   </section>
</div>
</main>
</footer>
  <div class="attribution">

    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="www.panamanny.com" target="blank">Manuel Jose Torres</a>.
  </div>
</footer>
</body>```

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