Submitted over 2 years ago

Semantic HTML and CSS

Reemy• 20

@1reemy

Preview site View code

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Good Evening Team

Finally completed this challenge! It really showed me how rusty I am with CSS. I particularly would like feedback on getting the background image for the <body> tag to show as how the example provided is displayed. I'd also like to know why when I was converting the hero Image file to Jpeg why it only converts to a blue rectangle. Should I have converted the image files to JPEG? Or is there a way to use the image files as is? Whatever other tips you can provide will be greatly appreciated.

Kareem.

Community feedback

Ken• 935

@kenreibman

Posted over 2 years ago

The images are in .svg format and if you correctly link the path to the files it will have no problems displaying on your site. You do not need to convert.

for the illustration-hero, your img source would be src= ”images/illustration-hero.svg”

Learn about positioning background with css to get the background in the right position.

Also in the future, It’s best practice making a separate css file for your styles so your index.html isn’t so cluttered. Stay away from in-line styles.

Marked as helpful

Reemy• 20

@1reemy

Posted over 2 years ago

@lmaoken Thank you for the feedback Ken, especially where the image issue is concerned. Next time I'll definitely use a separate style sheet instead of coding in the page itself.

Reemy• 20

@1reemy

Posted over 2 years ago

Ok. So I made some corrections to my solution(thanks again Imaoken), so it now displays the hero image and the background. I also made some corrections to the HTML to improve accessibility and readability.

That being said though, how does one get the background to be displayed as it is in the given design?

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