spaceman(og) practice project - Stats preview card component

Community feedback

• 

  ROCKY BARUA•1,090

  @DrougnovPosted about 2 years ago

  Hi @SpacemanOG, the design is looking great. Good job.

  Use a pseudo-element(::after,::before) to create an overlay on that image container. Like this:

   .heroImage::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: hsla(277, 64%, 40%, 0.6);
    top: 0;
    left: 0;
  }
  

  And don't forget to add position: relative to the heroImage.

  You can remove the 'source media' for the 300px width as the img will be shown by default on lower that 1200px width screen.

  Hope this helps. Have a good day :)

  Marked as helpful

  0

  ---

  

  spacemanOG•120

  @SpacemanOGPosted about 2 years ago

  @Drougnov Hi bro. I see that you are from Bangladesh, just like me 🙏

  Thanks for the suggestions by the way. I have applied it and updated the code. Had to make some minor adjustments, but I think it is okay now.

  1