Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Failed to decode param 'order-summary-component-gCBkGCVS5%20-%20Issues%20%B7%20joaomaia-code'
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order summary

@nicolasgonzalez98

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

0

Accessibility Issues

0

HTML Issues

View Report

Nicolás Nahuel González’s questions for the community

I need help with the image of the girl and the double bg image. Thank you so much and sorry for my english.

Community Feedback

Abhik 4,740

@abhik-b

Posted

👋 Hello Nicolas , Your solution looks nice 😃

  • I think if you use img tags in html instead of background-image in CSS for the girl image then it will look even nicer & solve the problem.
  • for double bg image ( I assume the background image you are referring to) you can use background-size:contain inside main to make it look nicer
  • I really think you should use media-query for responsiveness & stay away for viewport units vw for width & height of simple elements like card

Other than that overall it looks nice so Please keep solving challenges & happy coding 🥳👍

Marked as helpful

1

Deniel Den 21,600

@denielden

Posted

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

Also I have some tips for improving your code:

  • add descriptive text in the alt attribute of the image
  • for fix the size of top image adding background-size: contain to main tag
  • remove height from card class because it is superfluous
  • use button element and not div for "Proceed to Payment"
  • try to add hover effect and a little transition on the button
  • instead of using px try to use relative units of measurement -> read here

Overall you did well :)

Hope this help and happy coding!

Marked as helpful

1


@nicolasgonzalez98

Posted

@denielden thank you, i will take all your advices :)

1

Please focus on giving high-quality, helpful feedback and answering any questions nicolasgonzalez98 might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!