Design comparison
SolutionDesign
Solution retrospective
Feedback please :)
Community feedback
- @abdulrahman-rwimPosted almost 3 years ago
Hi @Yahir-am good job solving this challenge, I've got some feedback for this solution.
- the background image does not cover the entire page to solve it try this line of code
background: var(--violet) url("./images/bg-desktop.svg") no-repeat top left / cover;
- check out this amazing article on the background property
- avoid using height especially on images because that makes them stretch
- wrap the illustration image with div and give it
max-width:100%
to make sure not to get bigger - give your text content a limit width
max-width:40%
to make sure not to get bigger - avoid using width and height on buttons use padding instead ,try this
button { display: block; margin-top: 1.5em; padding: 0.7rem 5rem; }
- I suggest adding
transition: color 250ms;
to the button and the links, this will make: hover smoother. - start with the mobile design first because that makes styling elements easier
- lastly to fix the accessibility issue remove the script tag from the body and for the icons use this instead put a CDN link inside the head tag you can find it here font awesome CDN link
- I hope this was helpful for you, other than that, nicely done, happy coding π
Marked as helpful0 - the background image does not cover the entire page to solve it try this line of code
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