Responsive Landing Page using CUBE CSS - Every Layout - Codyhouse

Community feedback

• 

  Ahmed Bayoumi•6,700

  @Bayoumi-dev

  Posted about 3 years ago

  It looks good Mitchell,

  • I suggest you put the status of the preview card component in the list item to add more semantics to your project. like this:

  <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>
  

  • Also I suggest you center the component on the page, by giving the parent element <main> the following properties:

  main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  Some Resources

  • How to Center Anything with CSS - Align a Div, Text, and More
  • 11 Ways to Center Div or Text in Div in CSS

  I hope this is useful to you... Keep coding👍

  01