Skip to content
Submitted almost 2 years ago

HTML and CSS only checkout card made easy using flexbox

samaelWebDev•240
@samaelwebdev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I tried to make this card as semantic as possible but I feel like I maybe overdid it a little... not too sure, please let your advice and your input for this new developer.

HTML and CSS only checkout card made up of 3 sections: header, main and footer.

The header contains the cards image.

The main section of the card is divided into three separate content sections, (card order summary description section, card pricing information section and card check out options section).

The footer contains the challenge creator and the solution creator.

The layout was done using CSS Flexbox and CSS custome properties.

Contains over states for interactive elements.

Happy coding

Community feedback

  • S MD suleman•3,530
    @sulemaan7070Posted almost 2 years ago

    hey samaelWebDev😄, I have reviewd your code.. there was unwanted spacing in the a tag..

    <a href="https://www.frontendmentor.io/profile/samaelwebdev"  
target="_blank">
 samaelWebDev
</a>

    this snippet is working fine.. and it is leading me to your profile Hope that helps,happy coding🔥🔥

    Marked as helpful
    1
    samaelWebDev•240
    @samaelwebdevPosted almost 2 years ago

    @sulemaan7070 thank you so much, I guess it something much simpler than i thought ... very helpful indeed

    1

Please log in to post a comment

Log in with GitHub

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