order-summary-component using html and css

Community feedback

• 

  Muhammad Adam•210

  @Muhammad-adam778Posted almost 2 years ago

  Good job my friend.

  • There is a little tips to improve the accessibility :

  1. Any section element should contain a heading but in this challenge there is no heading so you need to delete <section> element like code below:
  2. Heading should increase one by one from <h1> to <h6>, in your code you jumped from <h1> to <h4>, try to replace <h4> by <h2> and if you need to descrease the font-size you can do that by css, please check code below.

  <main>
      <img src="images/illustration-hero.svg" alt="hero dancing">
      <article>
        <div class="text">
          <h1>Order Summary</h1>
          <p>You can now listen to millions of songs, audiobooks, and podcasts on any
            device anywhere you like!</p>
        </div>
  
        <div class="plans">
          <div class="img-plan">
            <img src="images/icon-music.svg" alt="">
            <div class="price">
              <h2>Annual plan</h2>
              <p>$59.99/year</p>
            </div>
          </div>
          <a href="#">Change</a>
        </div>
        <button>Proceed to Payment</button>
        <a href="#" class="order">
          Cancel Order
        </a>
      </article>
    </main>
  

  • I hope you find this helpful.

  0