Stats preview card component with HTML/CSS

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey! It looks good!... Here are some suggestions:

  • An easy way to color the image... First, Delete this element ---> <div id="imageHeaderOverlay"></div>, then give the wrapper of the image(#imageSection) background color to blend it with the image:

  #imageSection {
    position: relative;
    background-color: var(--accent);    /* <---- Add */
  }
  
  #imageHeader {
  /*   filter: contrast(0.7);        /* <---- Remove */
    mix-blend-mode: multiply;    /* <---- Add */
    opacity: 75%;    /* <---- Add */
  }
  
  /* #imageHeaderOverlay {       /* <---- Remove all */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: hsla(283, 74%, 53%, 0.63);
    mix-blend-mode: multiply;
  } */
  

  • Put the status of the preview card component into the list item to add more semantics to your project, Div's don't do much for semantics but a list is much more meaningful..:

  <ul class="stats-preview__stats">
     <li>
        <span class="stat-number">10K+</span>
        <span class="stat-name">Companies</span>
     </li>
     <li>
        <span class="stat-number">314</span>
        <span class="stat-name">Templates</span>
     </li>
     <li>
        <span class="stat-number">12M+</span>
        <span class="stat-name">Queries</span>
     </li>
  </ul>
  

  Hope this help!... Keep coding👍

  Marked as helpful

  0