Submitted almost 3 years ago

order-summary-card

Amina Arif• 40

@AminaArif0005

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

please leave your feedback on the way classes are being applied and also if you see any other issue please do point out.

Community feedback

Muhammad Shajjar• 1,100

@muhammadshajjar

Posted almost 3 years ago

Hello, congrats for completing your first challenge

I have some suggestion for you

always try to use html semantics e.g Proceed to payment and cancel both imply navigation so should probably be a tags, and avoid just using 'div'
change more likely to be a button, because it acts to control some thing
I appreciated to leave alt blank on your decorative images but better to add aria-hidden="true" or role="presentation" to avoid them from assistive technologies
Try to add one h1 to your page and heading level should increase by one you directly wrote h4,
Always have a look on report it tells you more

Aside form it, very well done it looks great.

Marked as helpful

Amina Arif• 40

@AminaArif0005

Posted almost 3 years ago

@muhammadshajjar thanks for your feedback

Juveria Dalvi• 1,375

@Juveria-Dalvi

Posted almost 3 years ago

Use semantic tags like main, footer😊 Also use h1 for "order summary"

<body>
<main>
  <div class="wrapper">

    <div class="top">
   
        <img src="./images/illustration-hero.svg" alt="" srcset="">

    </div>

    <div class="card-content">
      
      <div class="order-summary center">
        <div class="summary-title ">
          <h1>Order Summary</h1>
        </div>
       
        <div class="summary-content">
         <p> You can now listen to millions of songs, audiobooks, and podcasts on any 
          device anywhere you like!</p>
        </div>
        
      </div>
     
      <div class="selected-plan-content center">
        
        <div class="icon">
          <img src="./images/icon-music.svg" alt="">
        </div>
        <div class="selected-plan">
          
        <div class="selected-plan-title">
          <span>Annual Plan</span>
        </div>
        
        <div class="selected-plan-price">
          <span>$59.99/year</span>
        </div>
        
      </div>
    
        <a href = "#">Change</a>
      
      </div>
      
      <div class="btn payment-btn center">
        Proceed to Payment
  
      </div>
      
     
      <div class="btn order-cancel-btn center">
        Cancel Order
        
      </div>
    </div>
  </div>
</main>
<footer>
  <div class="attribution center">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Amina Arif</a>.
  </div>
  </footer>
</body>```

Marked as helpful

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