Submitted almost 3 years ago

HTML and CSS only checkout card made easy using flexbox

@samaelwebdev

A solution to the Order summary component challenge

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

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on samaelWebDev's solution.

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