Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Ritik, congratulations for your new solution!
Here's some tips for you:
In this case the container is a bit bigger around
max-width: 1115px
.card { display: grid; grid-template-columns: 1fr 1fr; width: 700px; background-color: #1c1938; border-radius: 10px; margin: 20px; }
To have your image purple with the same overlay effect, you need to use
mix-blend-mode
to make this color blend between the image and the background-color of the container. See the steps below to apply to theimg
orpicture
selector:img { mix-blend-mode: multiply; opacity: 75%;}
👋 I hope this helps you and happy coding!
Marked as helpful1@ritiksaxena124Posted about 2 years ago@correlucas Thank you so much for the tips I will definitely apply these
1@correlucasPosted about 2 years ago@ritiksaxena124 then say me if works, keep it up 👏
0 - @Pulkit-s21Posted about 2 years ago
In the desktop version, the font size and card size aren't as big as they can be. User will have to try hard to read whats written in the text area and will move away from the site. Readability is very important for sites and help user get it without any changes or any effort. Try fixing that and font size is good at mobile version
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