Stats preview card using Flexbox.

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Marina, It looks good!...

  My suggestions:

  • Document should have one main landmark, Contain the component with <main>.

  <main>
     <div class="container">
        //...
     </div>
  </main>
  

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

  #box-2{
      //...
  
      background-color: #aa5cdb;    /* <---- Add */
  }
  #box-2  img {
      //...
  
      mix-blend-mode: multiply;     /* <---- Add to blend with the content of the element's parent and the element's background.*/
      opacity: 75%;       /* <---- Add */ 
  }
  #box-2 .overlay {        /* <---- Remove */ 
      //...
  }
  

  • I suggest you center the component on the page with Flexbox, by giving the parent element .container the following properties:

  .container{
      display: flex;
      justify-content: center;
      /* margin-top: 230px;    <---Remove */
      align-items: center;       /* <---- Add */ 
      min-height: 100vh;       /* <---- Add this to center the component at this height */ 
  }
  

  • h1 or p element is not allowed to use inside span instead, I suggest you put the status of the preview card component into the list item to add more semantics to your project.

  <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

  ---

  

  Marina•70

  @hellomarinaPosted over 2 years ago

  @Bayoumi-dev Thank you so much for your feedback! I already made the changes and I will make sure to practice more. Thank you again for taking time to explain me, I really appreciate it :)

  0

  

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  @hellomarina You are welcome😊

  1