Submitted over 2 years ago

Order summary component

Klaudia• 50

@Haraved

Preview site View code

This is a solution for...

Huddle landing page with a single introductory section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I'm learning so any feedback would be nice, what u guys think about code. Is it fine? :)

Thanks in advance, have a nice day!

Community feedback

call me hacker man• 20

@magnusuwu

Posted over 2 years ago

Hi, it's my first time here.

When rezising the window .main with all the elements are making a bit of an overflow.

I've just checked it, under .main you've set a width of 30% a quick fix is simply by removing it. Because it's taking the full width of the .container that you've set to 100%.

Things that i would've consider changing

Font-size
Font-weight
Line-height
Button
Background-color on the .plan with some padding

Hope that you could use some of it :)

Marked as helpful

Anar• 700

@anar-sol

Posted over 2 years ago

Hello!

The overall styling is fine, but i have some comments:

As suggested in accessibility and structure reports:
- You have to set a title for the page using <title> in the <head>, don't let it empty.
- Images must have an alternative text using the alt attribute. If it is just a decorative image, you can let the alt attribute empty alt="".
I don't think main the best name for this component, why not card or order-summary-card?
the plan box, as named in your code, has a background color of #F7F9FF in the original design

Marked as helpful

Alif• 40

@alifjs

Posted over 2 years ago

Hey I also did this project a little while back.Your site looks good!

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