Skip to content
Submitted about 1 year ago

Order summary component with vanilla CSS

Kate Dames•250
@funficient
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I'm definitely getting more comfortable with the layouts! Two questions I need help with please:

  1. How do I create the background with the curves?

  2. Is there a better way to handle the image border radius? I feel I'm duplicating the rounding on the image but it doesn't inherit the shape from the container and overflow: hidden; doesn't seem to make a difference.

Any other feedback to make my code better would be highly valued!

Thank you! Kate

Community feedback

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted about 1 year ago

    Hi Kate, great job!

    You're right. It is not necesary duplicate the rounding on the image. Just add overflow:hidden on your .card-container class.

    Marked as helpful
    0
    Kate Dames•250
    @funficientPosted about 1 year ago

    Thanks @MaximilianoDanielGarcia !

    So I was on the right track, I just tried it on the child and not the parent. Tried it and it works. Thank you!

    0
  • Baki Jessy Justice Julien•110
    @blackdreamer15Posted about 1 year ago

    Hey, @funficient! Great work out there.

    You do not actually need to create that illustration. It is part of the assets. In case you do not have those, The link below refers you to my GitHub where you can get those assets: pattern-background-desktop.svg and pattern-background-mobile.svg.

    Click on this link.

    Best of luck! 😊

    Marked as helpful
    0
    Kate Dames•250
    @funficientPosted about 1 year ago

    Thanks @blackdreamer15 Silly me! I thought I had to create it myself with CSS.

    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