Skip to content
Submitted over 3 years ago

Order Summary Component Main

bootstrap
Leonel Montiel•40
@leonelmontiel
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I have not found a way to make the tips of the top edge of the cover image rounded. Any suggestions? Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • Shashree Samuel•8,860
    @shashreesamuel

    Hey good job completing this challenge, keep up the good work.

    Your solution looks great however I think your card needs some margin from the top using margin-top property.

    In terms of your accessibility issues, simply wrap all your content between main tags

    I hope this helps

    Cheers Happy coding 👍

    Marked as helpful
  • DanielK•440
    @DanK1368

    Hi Leonel,

    You have to apply the top borders to your illustration image. border-radius: 10px 10px 0px 0px; Then it should work.

    Also to get rid of the Accessibility issues you have to wrap your content in a <main> tag. The order summary text should be an <h1> Tag.

    Hope this helps a little.

    Happy Coding

    Marked as helpful

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