Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Order Summary Component

@lordlughas

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I found it really difficult using the desktop and mobile background svg image as background image. Please review the code and help with suggestions Also applying border radius to the hero image proved abortive as i couldnt edit the svg image. suggestions thank you..

Community feedback

@CarolineLienard

Posted

Hi Charles 👋

Good job on going that far ! For your issues, it might help you :

  • Delete your <svg> tag in your index.html. Instead, in your CSS file, use the CSS property "background-image" and "background-color" directly on <body>. As you can see, the background have a transparent part, it's a little bit tricky but you need to set the blue color as your body color background, and your SVG as your background image.

  • About the border radius, you can try to make a new <div> inside your "container", that contain both "hero-img" and "summary-container". You will add the border radius on this new one.

Good luck 🍀

0

Please log in to post a comment

Log in with GitHub
Discord logo

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