Submitted about 3 years ago

Order summary component solution

Kamil Szymański•140

@szymKamil

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 years ago

Use semantic tags like main and footer

<body>
</main>
    <div class="challenge">    
<div class="main">
    <img class="hero" src="illustration-hero.svg" alt="heroimage">
    <br>
    <br>
    <h1>Order summary</h1>
    <p>You can now listen to milions of songs,<br> audiobooks, and podcasts on any device<br> anywhere you like!</p>
    <div class="annual">
        <img src="icon-music.svg" alt="icon-music">
        <div class="annualinside" style="margin-right: 70px"><h2>Annual Plan</h2>
        <p>$59.99/year</p></div>
        <a href="#">Change</a>
    </div>
    <br>
    <button class="button1">Proceed to Payment</button>
    <button class="button2">Cancel Order</button>    
</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="https://github.com/szymKamil">Kamil Szymański</a>.
  </div>
</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