Stats Preview Card Component with HTML & CSS

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

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

  • All page content should be contained by landmarks, Contain the attribution with <footer>.

  <footer>
     <div class="attribution">
        //...
     </div>
  </footer>
  

  • I suggest you 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>
  

  • This is another way to achieve the colored overlay on the image, by by creating pseudo-elements containing the image and then give the parent element background color to blend it with the image:

  .header-image {
  	background-color: var(--violet);
  	min-height: 220px;
  	width: 100%;
  	position:relative;
  }
  .header-image::before {
  	content: "";
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	background: url('./images/image-header-mobile.jpg') no-repeat;
  	background-size: cover;
          mix-blend-mode: multiply;
          opacity: 75%;
  }
  

  Hope this help!... Keep coding👍

  Marked as helpful

  0

  ---

  

  Adam•90

  @adamlevoyPosted over 2 years ago

  @Bayoumi-dev Thank you! This was very helpful :)

  0