Skip to content
Submitted 18 days ago

Responsive card

NisharN•20
@NisharN
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

i did my first frontend mentor.i just started and excited to create more projects

What challenges did you encounter, and how did you overcome them?

for giving responsive sizes for mobile and desktop

What specific areas of your project would you like help with?

i like this project generally

Community feedback

  • Adriano•38,080
    @AdrianoEscarabotePosted 18 days ago

    Hey NisharN, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

    To get closer to the photo overlay effect, you'd better use mix-blend-mode. All you need is the div under the image with this background color: hsl(277, 64%, 61%); and position mix-blend-mode: multiply and opacity: 80% on the image or apply image to activate the overlay by blending the image with the div's color. See the code below:

    img {
    mix-blend mode: multiply;
    opacity: 80%;
}

    Everything else looks great.

    Hope this helps! 👍

    Marked as helpful
    0
    NisharN•20
    @NisharNPosted 17 days ago

    @AdrianoEscarabote Thank You brother, It is a great advice.

    1

Please log in to post a comment

Log in with GitHub

Join 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