@HarmoniaCodes
Posted
Hello Allen! Congrats on completing the challenge! I have a few pieces of feedback for your code:
- The background images are missing. This requires the use of 2 .svg files in order to match the design prompt. You might look into positioning properties and z-index values in order to get these where they need to go. The MDN documentation for these is below.
Edit: Upon further inspection, it also appears that the url you are using for the background images is resulting in a 404 error.
CSS Position Property: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Z-index Values: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
- The card itself should have a shadow effect. Box-shadow is an easy solution to this. Check out the MDN documentation for this below.
Box-shadow Property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Keep up the great work! Happy Coding!
Marked as helpful
@Alienowy
Posted
@HarmoniaCodes I have improved my code. Thank You so much for your feedback. Would you mind checking it again?
@HarmoniaCodes
Posted
@Alienowy You made some really great changes! I can see the box-shadow and the background images. Everything is displaying very nicely on desktop. My only remaining suggestion would be to check how the page looks on a mobile display and see how it compares to the design images for the challenge.
You can do this without having to use a mobile device by accessing the responsive design modes in your browser. Check the links below for how to activate this.
- On Firefox: https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/
- On Chrome: https://developer.chrome.com/docs/devtools/device-mode/
You might also try using media queries to create more responsive code for various display sizes. I have linked the MDN documentation below.
You are doing great work! Keep it up :)
Marked as helpful
@Alienowy
Posted
@HarmoniaCodes Thank You!
