Stats Preview Component Solution and YouTube video

Hi there. You did a good job 😎

keep improving your programming skills🛠️

your solution looks great, however, if you want to improve it, you can follow these steps:

✅ fonts duplicating

    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet">

✅ it would be better use autoformatters

    <main>

      <section>
        <h1>Get <span>insights </span>that help your business grow.</h1>

       <p class="lead">Discover the benefits of data analytics and make better decisions
regarding revenue, customer experience, and overall efficiency.</p>

       <ul>
         <li><h2>10k+</h2><p>companies</p></li>
         <li><h2>314 </h2><p>templates</p></li>
         <li><h2>12M+</h2><p>queries</p></li>
       </ul>
        
      </section>

✅ don't use tag selectors. When you add CSS directly on tags, your markup can’t change. Your style is tightly coupled to your DOM, and any change increases the risk of breaking things.

}
section ul{
  display: flex;
  list-style: none;
  justify-content: space-between;
  letter-spacing: 1px;
}
section ul h2{color:  hsl(0, 0%, 100%); margin-bottom: 0.3em;}
section ul p{
  color: hsl(0, 0%, 100%);
  text-transform: uppercase;
  font-size: 0.75rem;
}

I hope my feedback will be helpful. You can mark it as useful if so 👍

Good luck and fun coding 🤝⌨️