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 card using SASS and HTML

#sass/scss

@prajotsurey

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 have used an empty div with a background image to place the hero image. Is there a better way of doing it?

Also, please suggest any other ways to improve my solution. Thank you !!

Community feedback

LiBee 390

@Li-Bee

Posted

Good job. Another way to set the background is to do the following:

body {
background-image: url(../images/pattern-background-mobile.svg);
  background-color: #e0e8ff;
  background-repeat: no-repeat;
  /* not cover as dont want to cover entire element */
  background-size: contain;
  background-attachment: fixed;
}

Marked as helpful

2
Travolgi 🍕 31,460

@denielden

Posted

Hi Prajot, I took some time to look at your solution and you did a great job!

Also I have some tips for improving your code:

  • the better way is using img element not div with role
  • try to add a little transition on the element with hover effect
  • instead of using px try to use relative units of measurement -> read here

Overall you did well :)

Hope this help and happy coding!

1

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