Skip to content
Submitted about 3 years ago

Order summary component

Klaudia•50
@Haraved
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

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
    @magnusuwuPosted about 3 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
    1
  • Anar•700
    @anar-solPosted about 3 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
    1
  • Alif•40
    @alifjsPosted about 3 years ago

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

    0

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