Design comparison
Solution retrospective
Any suggestion on how i can implement this in mobile view through tailwind. Any insights will be very helpful
Community feedback
- @correlucasPosted about 2 years ago
๐พHi Quintin Latimore, congrats 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's some tips to improve your solution:
You can add the same effect of the design for the image overlaying it with
purple
there's a shortcut that is by usingmix-blend-mode
with the modemultiply
and with an opacity aroundopacity: 82%
. See the code below:img { mix-blend-mode: multiply; opacity: 82%;}
To make your hero image have the same look and the color purple overlay, you need to use
mix-blend-mode
using themultiply
one.The mix-blend-mode CSS property sites how an element's content should blend with the content of the element's parent and the element's background.Hereโs how you can add this to your
img
selector:img { mix-blend-mode: multiply; opacity: 84%;}
โ๏ธ I hope this helps you and happy coding!
Marked as helpful0@quintin156Posted about 2 years ago@correlucas Thanks for the insight that's exactly what i was looking for
1 - @llKryptonixllPosted about 2 years ago
Great work I also made this with Tailwind and it was my first project with Tailwind. You can add media queries in Tailwind aswell https://tailwindcss.com/docs/responsive-design. I hope this helps if not you can check my solution https://www.frontendmentor.io/solutions/stats-preview-card-html-tailwind-css-gTtRv83I0x.
0 - @AdrianoEscarabotePosted about 2 years ago
Hi Quintin Latimore, how are you?
I really liked the result of your project, but I have some tips that I think you will like:
1- Document should have one main landmark, you could have put all the content inside the
main
tag click here2- All page content should be contained by landmarks click here
The rest is great!!
Hope it helps...๐
0
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