Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order summary component with HTML and CSS

Tristan 80

@TristanBerger6

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, this is my first challenge. Any tips/advice would be greatly appreciated

Community feedback

Juveria Dalvi 1,375

@JuveriaD

Posted

use semantic tags like main, footer

<body>
<main>
  <div class="card">
    <div class="illustration"><img src="./images/illustration-hero.svg" alt="illustration"></div>
    <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="order_summary">
      <div class="icon_music"><img src="./images/icon-music.svg" alt="icon-music"></div>
      <div class="plan_price">
        <h2>Annual Plan</h2>
        <p>$59.99/year </p>
      </div>
      <p class= "change_option"><a href="#">Change</a></p>
    </div>
    <p class="payment_button"> <a href="#">Proceed to Payment</a></p>
    <p class="cancel_button"><a href="#"> Cancel Order</a></p>
  </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="#">Tristan Berger</a>.
  </div>
</footer>
</body>```

Marked as helpful

0

Tristan 80

@TristanBerger6

Posted

@JuveriaD Thanks !

0
P
Hamza H. 460

@hhamza1

Posted

Very good job. The design is pixel-perfect.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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