Skip to content
Submitted 10 months ago

Used css grid for practice

JanAbe•230
@JanAbe
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

How does one make the image purple?

I looked at some other frontend mentor's code to see how he did it and copied it partially but don't understand everything.

How to make my solution more responsive, at the moment it looks good on small screens and large screens but not really on those between.

Community feedback

  • Aykın Sancaklı•680
    @aykinsancakliPosted 10 months ago

    Hi @JanAbe,

    You can use background-image property

      background-image: linear-gradient(
      to right bottom,
      rgba($color-primary-light, 0.8),
      rgba($color-primary-dark, 0.8)
    ),
    url(../img/nat-4.jpg);
  background-size: cover;

    So you can add a layer of gradient on top of the image you want 😉.

    Cheers,

    Aykın

    Marked as helpful
    0
    JanAbe•230
    @JanAbePosted 10 months ago

    @aykinsancakli

    Thank you so much for the clear and easy answer!

    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