Design comparison
Solution retrospective
Are the fonts used in the website correct according to the challenge? How can I make the code shorter? Do I need to make any changes to the webpage?
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @barnilsarma, congratulations on your first solution!
Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:
1.Prefer
CLASS
instead ofID
to give style to your elements, choosingid
is not a good idea because it’s a too specific selector and it's better to use it forforms
or Javascript code. It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again.2.Instead of using a long code for the IMAGE OVERLAY. You can do it using a shortcut with a few lines of code
mix-blend-mode
, that in my opinion is a better way and makes the color tone really close to the challenge design. All you need is thediv
under theimage
with thisbackground-color: hsl(277, 64%, 61%);
and applymix-blend-mode: multiply
andopacity: 80%
on theimg
orpicture
selector to activate the overlay blending the image with the color of the div. See the code bellow:img { mix-blend-mode: multiply; opacity: 80%; }
✌️ I hope this helps you and happy coding!
Marked as helpful0
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