Submitted over 2 years ago

Order Summary Card Component

Juan Cruz Ardanaz• 230

@juanardanaz

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi! For this challenge I decided to use the @font-face property instead of importing the fonts from Google Fonts.

Also, I tested the challenge with the Lighthouse Report Viewer extension from Google Chrome, and I found it really useful.

Thank you for your time and I´m open to read tips and critics.

Community feedback

Shashree Samuel• 9,260

@shashreesamuel

Posted over 2 years ago

Hey juanardanaz good job completing this challenge. Keep up the good work.

Your solution looks great however the button is missing a subtle box-shadow and the card needs a bit of blur on the box-shadow.

In terms of your accessibility issues simply wrap all your content between <main> tags to resolve all your accessibility issues.

I hope this helps

Cheers Happy coding 👍

Marked as helpful

Juan Cruz Ardanaz• 230

@juanardanaz

Posted over 2 years ago

Hi @TheCoderGuru! Thank you very much for your feedback! You are right, thanks for that observation. I´ll apply your feedback and see how it works.

Thanks for the help!

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