Skip to content
Submitted over 3 years ago

Stats preview card component

Aymane Darih•295
@AymaneDarih
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

Hey there , while coding this project I face two problems :

  • How can add an accent to a grey image , it's easy to add a filter to a normal image but to a grey one I find it difficult
  • the second problem is the radius border when I converte the size from desktop version to mobile version the image get cropped from the bottom right please if you know the solution of these problem let me know thanks. Enjoy looking my coding !

Community feedback

  • Vinam•120
    @Vinam09Posted over 3 years ago

    For the border, I don't think you need to manually add border-radius to the image, instead, you can just do this in your CSS for your container: overflow: hidden; As long as your container has the right border-radius set, it should work.

    Marked as helpful
    1
    Ahmed Kamel•1,190
    @hmadamkPosted over 3 years ago

    @Vinam09 yeah thats right

    0
  • Ahmed Kamel•1,190
    @hmadamkPosted over 3 years ago

    you can use class{position:relative;} class::after{ content: ' '; position:absolute; inset:0; background-color: clr; opacity: 0.6 } for the border you need to reset it with the media @media ( ){ class { border-radius: value value 0 0; } }

    Marked as helpful
    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