Design comparison
Community feedback
- @VCaramesPosted about 2 years ago
Hey @Mikssxed, great job on this project!
Some suggestions to improve you code:
- When using different images for responsiveness, it’s far more efficient to use the <picture> element.
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
- To help keep your CSS code organized and easier to use, I suggest implementing CSS Variables. This will come in handy when building large websites, using light/dark mode, etc…
It’ll look something like this:
:root { --primary-color: value; --secondary-color: value; --tertiary-color: value; }
And to use the variables you’ll use the var() function. So it’ll look like this.
h1 { color: var(—primary-color); }
Heres are some articles regarding CSS Variables.
You can also take a look at my projects and see how I use it.
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
Marked as helpful1 - @correlucasPosted about 2 years ago
👾Hello @Mikssxed, Congratulations on completing this challenge!
I've just opened your live site and I can say that you did a great job putting everything together! There are some tips to improve your solution:
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 helpful1 - @llKryptonixllPosted about 2 years ago
Hey first off all great work but it is not full responsive you should add a min height or make the card bigger at some point because the text ist not staying in his container.
1
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