index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Miscellaneous Store</title>
  <!-- style sheet here -->
  <link rel="stylesheet" href="./src/styles/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
  <script src="https://kit.fontawesome.com/9d34235b2f.js" crossorigin="anonymous"></script>
</head>
<body>
  <!-- navbar component -->
  <div class="navbar">
    <div class="logo__name">
      <i class="bi bi-award-fill logo"></i>
      <a href="index.html"><h2>Your Store</h2></a>
    </div>
    <div class="search__bar">
      <i class="bi bi-search"></i>
      <input type="text" placeholder="search products">
      <i class="bi bi-mic-fill"></i>
    </div>
    <a href="cart.html">
      <div class="cart">
        <i class="bi bi-cart2"></i>
        <div class="cart__count" id="cart__count">0</div>
      </div>
    </a>
  </div>

  <!-- shop store container -->
  <div class="shop" id="shop">
    <!-- product item card -->
  </div>
   
</body>
  <!-- data js file here -->
  <script src="./src/data/data.js"></script>
  <!-- feature js file here -->
  <script src="./src/features/index.js"></script>
</html>