a stats preview card using CSS and HTML

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello , congratulations for your new solution!

  Your solution is good done, but you can choose a simple way to build it, you don't really need to use position absolute in this challenge. You can use GRID to create the component with 2 column, replace the widthasmax-width: 1110px(it's the container size) anddisplay: grid/grid-template-column: 1fr 1fr`(this means that your component will have two columns with 50% of the container width each thats 550px).

  To add the exact same purple overlay effect for the image, matching the design files you can use, filter, background-blend-mode or mix-blend-mode (the best choice in my opinion). See the code below

  img {
  mix-blend-mode: multiply;
  opacity: 0.8;}
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0