Submitted about 1 year ago

Stats preview card component [7]

Dean•190

@DeanMustafa

Preview site View code

This is a solution for...Stats preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I do not know how to add accent color on top of the image. I will appreciate it if someone teaches me how to do it.

Community feedback

hitmorecode•6,250

@hitmorecodePosted about 1 year ago

main {
  position: relative;
  width: 90%;
  max-width: 375px;
  margin: 0 auto;
  margin-top: 20px;
  background: var(---darkDesaturatedBlue-cardBG);
  border-radius: 7px;
}

main::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 500px;
  height: 100%;;
  background-color: hsla(277, 64%, 61%);
  mix-blend-mode: multiply;
  opacity: .8;
}

Marked as helpful

Please log in to post a comment

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