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
Request path contains unescaped characters
Not Found
Not Found
Your session has expired please log in again.
Not Found
Not Found

Submitted

Html and Css

@Dewanshakib

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


Fun and tricky project.

Community feedback

Adrianoβ€’ 34,090

@AdrianoEscarabote

Posted

Hello Dewan Md Shakib al-mujib, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

  1. Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.
  2. Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

Feel free to choose one of the two!

images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.

The remainder is excellent.

I hope it's useful. πŸ‘

Marked as helpful

0

@eewa-SANJ

Posted

Overall your solution is great but there, but you can make some improvement Here are my findings

  1. Missing the box shadow on the "proceed to payment" button
  2. Missing the provided font in the "proceed to payment" button text where different font family is being inherited
  3. Does not change underline in the "change" link when the mouse hover
  4. When you writing CSS, try to format each property according to alphabetical order which is for readability but the only suggestion

These are,y finding and try to fix them if you can possible.

Marked as helpful

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