Submitted over 2 years ago

Responsive layout using HTML and CSS

#itcss

Jeremiah Lateef• 160

@jeremiahlateef

Preview site View code

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I wasn't given the color for the box-shadow property so I had to invent one. The background-image I was given was also different. All in all, it was a fairly easy challenge.

Community feedback

Danilo Blas• 6,300

@Sdann26

Posted over 2 years ago

Hi Jeremiah!

Add the following attributes in your body

background-repeat: no-repeat;
background-size: contain;

And uncomment the line background color: hsl(225, 100%, 94%); to make it more similar to the design

Also do not forget that when using the main tag it is good practice to use an h1 tag to avoid accessibility problems. Good coding!

Marked as helpful

Jeremiah Lateef• 160

@jeremiahlateef

Posted over 2 years ago

@Sdann26 Thank you so much, Danilo, especially about the main tag accessibility problems. I had seen it in my previous solution but did not understand it. Thanks a lot.

darryncodes• 6,430

@darryncodes

Posted over 2 years ago

Hi Jeremiah,

You've done a really good job here, with a few tweaks it could be perfect!

to make your background better match the design: background-repeat: no-repeat; background-size: 100% auto; (the first value is for the width, and the second is for the height) background-color: hsl(225, 100%, 94%);. CSS background property has a shorthand too.
also add dome Flexbox to your <body> to centre it nicely in the viewport responsively display: flex; justify-content: center; align-items: center; min-height: 100vh;
add cursor: pointer; to your button and link

All the best!

Marked as helpful

Jeremiah Lateef• 160

@jeremiahlateef

Posted over 2 years ago

Wow. So much to recommendations. Thank you so much, Darrycodes! I have implemented all you wrote. Didn't know I still had so much to still do. Really appreciate the help.

Please log in to post a comment

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