Design comparison
Solution retrospective
Hi everyone! I tried my best to make this responsive and it's ok but tablet version is not perfect. I am very proud that I made this challenge! I would be grateful for any advice to optimize my code :)
Community feedback
- @VCaramesPosted about 2 years ago
Hey @katrine9176, some suggestions to improve you code:
-
The statistics section is a list of statistics, so it should be built using an Unordered List along with a List Items Element.
-
The image serve no other purpose than to be decorative; It adds no value. The Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.
-
This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:
https://www.w3schools.com/html/html_images_picture.asp
https://web.dev/learn/design/picture-element/
Happy Coding! 👻🎃
Marked as helpful1 -
- @correlucasPosted about 2 years ago
👾Hello @katrine9176, congratulations on your solution!
Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:
1.Its not so good that you used
overflow: hidden
for the whole content, in this case this property is making the content get cropped when the component gets tiny. Instead of usingoverflow
to make the rounded borders useborder-radius
2.The image is getting distorted, to avoid this behavior, use these steps, first add
display: block
andmax-width: 100%
to the<img>
selector. To improve the responsiveness even more by adding the auto-crop property you can addobject-fit: cover
to make the image crop inside the container. Here’s the code:img { display: block; object-fit: cover; max-width: 100%; }
3.To get closer to
overlay effect
on the photo as the Figma Design its better you usemix-blend-mode
. 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%; }
Here's a good article explaining these effects with mix-blend-mode:
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
✌️ 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