Desktop design

Mobile design

Order summary component

<section class="header"> 
      
      <h1>Order Summary</h1>
    </section>

<section class="main-text">
  <p>You can now listen to millions of songs, audiobooks, and podcasts on any 
  device anywhere you like!</p>
</section>

<section class="price">
  <span class="annual">Annual Plan</span>
  <span class="cost">$59.99/year</span>
  <span class="change"><a href="">Change</a></span>
</section>

<span class="cancel"><a href="#">Cancel Order</a></span>

<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://github.com/Arzu475" target="_blank">Arzu475</a>.
  </div>

Please log in to post a comment

Community feedback

Order Summary Card using HTML CSS

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community