Submitted about 3 years ago

tried to make it simple as possible due to this being my first project

abril zacarias•10

@abrilzacarias

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

i'll love any feedback! i'm new on all of this and this is the first thing i've built all by myself so please be nice lol. thank you :) i'll love some info or help to make it responsive btw

Community feedback

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 years ago

You wrote body closing tag twice check it and also try using semantic tags main, footer...

<body>
<main>
    <div class="box">
        <img src="illustration-hero.svg" id="pic1">
        <h1>Order Summary</h1>
        <p class="text">You can now listen to millions of songs, <br>
            audiobooks, and podcasts in any device <br>
            anywhere you like!</p>
        <div class="box_2">
            <img src="icon-music.svg" id="pic2">
            <p id="plan">Annual Plan</p>
            <p id="change"><u>Change</u></p>
            <p id="price">$59.99/year</p>
            
        </div>
        <div id="box_3">
            <p id="pay">Proceed to Payment</p>
        </div>
        <p id="cancel">Cancel Order</p>
    </div>
</main>
</body>```

Marked as helpful

abril zacarias•10

@abrilzacariasPosted about 3 years ago

@JuveriaD thank you! i'll add it asap :)

bowbowzai•160
@bowbowzaiPosted about 3 years ago
You can use media query to make it responsive. I have done it before you can see my code here --> https://github.com/bowbowzai/html-css-order_summary
Marked as helpful
0
abril zacarias•10
@abrilzacariasPosted about 3 years ago
@bowbowzai thank you so much! i'll check it out later
0
bowbowzai•160
@bowbowzaiPosted about 3 years ago
@abrilzacarias my pleasure
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