Skip to content
Submitted over 3 years ago

Card Component

Guilherme•20
@glhrmarques
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

Somehow, the width: 100%; inside the .purple class in my css was not filling the entire picture. So, I set it to 101%;

Well, I have no ideia why that did not work.

Community feedback

  • Tereza•605
    @sirriahPosted over 3 years ago

    Hello, nice work! :)

    I have some suggestions:

    • the .purple div is unnecessary. You can add background: hsl(277, 64%, 61%); to the div .image and to the .img-desktop add mix-blend-mode: multiply;. Result be the same and there will not be the problem with 101%.

    • You don't have to use the double img tag for desktop and mobile version. Try to use <img srcset="..."> - link to the documentation.

    • try to use BEM naming in you future projects. This is small project, but naming div "image" is not the best practise in a bigger project.

    0
    Guilherme•20
    @glhrmarquesPosted over 3 years ago

    @sirriah, thank you so much for your contribution! I'll make sure to learn all your suggestions.

    0

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