Design comparison
Community feedback
- @denieldenPosted about 2 years ago
Hello Gaston, You have done a good work! ๐
Some little tips to improve your code:
- To fix the top image in the background just put more specific background properties to the body:
background: url("../img/pattern-background-desktop.svg") no-repeat top center; background-size: contain; background-color: #e0e8ff;
section
tag go inside ofmain
tag and not viceversa- use
main
tag to wrap the card and improve the Accessibility but not as a container of that one element - also you can use
article
tag instead of a simplediv
to the container card for improve the Accessibility - add descriptive text in the
alt
attribute of the images - remove all unnecessary code, the less you write the better as well as being clearer: for example the
div
container of image - use
min-height: 100vh
instead ofheight
, otherwise the content is cut off when the browser height is less than the content
Keep learning how to code with your amazing solutions to challenges.
Hope this help ๐ and Happy coding!
0 - @correlucasPosted about 2 years ago
๐พHello @GastonSKL, Congratulations on completing this challenge!
Great code and great solution! Iโve few suggestions for you that you can consider adding to your code:
The background wave image is missing and hereโs the step-by-step to add it.First of all add the image as a background inside the
body
this is the code for that:background-image: url(../images/pattern-background-desktop.svg);
Then you add
background-repeat: no-repeat
to avoid the background repeating andbackground-size: contain
to make it fit full width and center with the card this is the best choice, but an alternative to resize it is to usebackground-size: 125%
, Hereโs the code with the modification and the image applied as background:body { background-size: contain; background-image: url(./images/pattern-background-desktop.svg); background-repeat: no-repeat; font-family: 'Red Hat Display', sans-serif; font-size: 16px; background-color: var(--aleblue); }
โ๏ธ I hope this helps you and happy coding!
0
Please log in to post a comment
Log in with GitHubJoin 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