Submitted about 3 years ago

Order summary component with HTML and CSS

Tristan•80

@TristanBerger6

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 years ago

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

Tristan•80

@TristanBerger6Posted about 3 years ago

@JuveriaD Thanks !

Hamza H.•460
@hhamza1Posted about 3 years ago
Very good job. The design is pixel-perfect.
0

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