Design comparison
Community feedback
- @denieldenPosted over 2 years ago
Hi Gabriel, great work on this challenge! 😉
Here are a few tips for improve your code:
- fix the url of body background image like this:
var(--Pale-blue) url(../images/pattern-background-desktop.svg) no-repeat
- remove all unnecessary code, the less you write the better as well as being clearer: for example the
figure
tag container of image - instead of using
px
use relative units of measurement likerem
-> read here
Overall you did well 😁 Hope this help!
Marked as helpful1 - fix the url of body background image like this:
- @jesuisbienbienPosted over 2 years ago
Hi Gabriel,
Your solution looks very nice. Love what you did with the box-shadow. All the transitions on the buttons are smooth. I noticed that it's bigger comparing to the design and it's not scaled down on mobile designs. There's a toggle device toolbar under the developer tools that you can use to check what your solution looks like on different kinds of devices. I'd recommend you use it for responsiveness. I'm sure both Chrome and Firefox have it. (The icon looks like a phone and tablet)
FYI, in order to make your solution look as close to the designs as possible, I usually use paint tool to get the approximate measurements.
Also, here is my solution to this challenge if you want to check it out. Solution
Hope this helps.
Nguyen
Marked as helpful1
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