store.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grandma's Sweet Setup</title>

    <!-- fontawesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    />

    <!-- Bootstrap css -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    />
    <!-- custom css -->
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-----------------------------------------
      Header with Navbar and Banner-BGImage
   ------------------------------------------>
    <header>
      <nav class="navbar navbar-expand-lg  bg-danger-subtle px-5">
        <div class="container-fluid">
          <a href="index.html" class="navbar-brand">
            <img src="img/sweet-logo.png" alt="logo icon" />
          </a>
          <button
            type="button"
            class="navbar-toggler"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="toggler-icon">
              <i class="fa-solid fa-bars"></i>
            </span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav text-capitalize mx-auto">
              <li class="nav-item">
                <a href="/" class="nav-link active" aria-current="page">home</a>
              </li>
              <li class="nav-item">
                <a href="about.html" class="nav-link">about</a>
              </li>
              <li class="nav-item">
                <a href="store.html" class="nav-link">store</a>
              </li>
              <li class="nav-item">
                <a href="services.html" class="nav-link">services</a>
              </li>
              <li class="nav-item">
                <a href="cakes.html" class="nav-link">order</a>
              </li>
            </ul>
            <!-- nav-info-items -->
            <div class="nav-info-items d-none d-lg-flex me-5">
              <!-- single-info-1 -->
              <div
                class="nav-info d-flex align-items-center justify-content-center mx-lg-5"
              >
                <span class="info-icon mx-lg-2"
                  ><i class="fa-solid fa-phone"></i
                ></span>
                <p class="mb-0">+123 456 7890</p>
              </div>
              <!-- single-info-2 -->
              <div
                id="cart-info"
                class="nav-info align-items-center cart-info d-flex justify-content-between mx-lg-5"
              >
                <span class="cart-info-icon me-lg-3"
                  ><i class="fa-solid fa-shopping-cart"></i>
                </span>
                <p class="mb-0 text-capitalize">
                  <span id="item-count">2</span>
                  items - $
                  <span class="item-total">10.49</span>
                </p>
              </div>
              <!-- end of single-info-2 -->
            </div>
            <!--end of nav-info-items -->
          </div>
          <!-- collapse -->
        </div>
        <!-- container-fluid -->
      </nav>
      <!-- end of nav -->
         <!-----------------
          Banner BG-Image
        ------------------>
      <div class="container-fluid">
        <div
          class="row banner-bgimage justify-content-center align-items-center"
        >
          <div class="col-10 mx-auto text-center banner">
            <h1 class="text-capitalize mt-4">
              welcome to
              <strong class="banner-title">grandma's</strong>
            </h1>
          </div>
          <!-- col-10 -->
        </div>
        <!-- row -->
      </div>
      <!-- container-fluid -->

      <!-- end of banner -->
    </header>
     <!----------------
        Store Section
     ------------------>
  <section id="store" class="store py-5 bg-dark-subtle">
    <div class="container">
      <!-- store-title -->
      <div class="row">
        <div class="col-10 mx-auto col-sm-6 text-center">
          <h1 class="text-capitalize">
            our <strong class="banner-title">store</strong>
          </h1>
        </div>
        <!-- /col-10 -->
      </div>
      <!-- /row -->
      <!-- end of store-title -->

      <!-- filter buttons -->
      <div class="row">
        <div class="col-lg-8 mx-auto my-3 d-flex justify-content-around sortBtn flex-wrap">
          <a href="#" class="btn btn-dark text-uppercase filter-btn m-2" data-filter="all">all</a>
          <a href="#" class="btn btn-outline-dark border-4 text-uppercase filter-btn m-2" data-filter="all">cakes</a>
          <a href="#" class="btn btn-outline-dark border-4 text-uppercase filter-btn m-2" data-filter="all">sweets</a>
          <a href="#" class="btn btn-outline-dark border-4 text-uppercase filter-btn m-2" data-filter="all">cupcakes</a>
          <a href="#" class="btn btn-outline-dark border-4 text-uppercase filter-btn m-2"
            data-filter="all">doughnuts</a>
        </div>
      </div>
      <!-- end of filter buttons -->
      <!-- search box -->
      <div class="row">
        <div class="col-10 mx-auto col-md-6">
          <form>
            <div class="input-group  input-group-lg m-3">
              <span class="input-group-text search-box">
                <i class="fa-solid fa-search"></i>
              </span>

              <input type="text" class="form-control" placeholder="item..." id="search-item" />
            </div>
          </form>
        </div>
      </div>
      <!-- end of search box -->
      <!-- store-items -->
      <div class="row my-5">
        <!-- single items -->
        <div class="col-10 col-sm-6 col-lg-4 my-3 mx-auto" data-item="sweets">
          <!-- card-1 single-item -->
          <div class="card single-item shadow-lg">
            <img src="img/grandma-sweet/sweets-3.jpeg" class="card-img-top" alt="sweet-1" />
            <div class="card-body">
              <div class="card-text d-flex justify-content-between text-capitalize">
                <h5 id="store-item-name">sweet item</h5>
                <h5 class="store-item-value">
                  $ <strong id="store-item-price" class="fw-bold">5</strong>
                </h5>
              </div>
            </div>
          </div>
          <!-- end of card -->
        </div>
        <!-- end of single items -->
        <!-- single items-2 -->
        <div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
          <!-- card-2 -->
          <div class="card single-item shadow-lg">
            <img src="img/grandma-sweet/cake-1.jpeg" class="card-img-top" alt="cake-1" />
            <div class="card-body">
              <div class="card-text d-flex justify-content-between text-capitalize">
                <h5 id="store-item-name">sweet item</h5>
                <h5 class="store-item-value">
                  $ <strong id="store-item-price" class="fw-bold">5</strong>
                </h5>
              </div>
            </div>
          </div>
          <!-- end of card -->
        </div>
        <!-- end of single items -->
        <!-- single items-3 -->
        <div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
          <!-- card-3 -->
          <div class="card single-item shadow-lg">
            <img src="img/grandma-sweet/cake-2.jpeg" class="card-img-top" alt="cake-2" />
            <div class="card-body">
              <div class="card-text d-flex justify-content-between text-capitalize">
                <h5 id="store-item-name">sweet item</h5>
                <h5 class="store-item-value">
                  $ <strong id="store-item-price" class="fw-bold">5</strong>
                </h5>
              </div>
            </div>
          </div>
          <!-- end of card -->
        </div>
        <!-- end of single items -->

        <!-- single items -5-->
        <div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
          <!-- card-5 -->
          <div class="card single-item shadow-lg">
            <img src="img/grandma-sweet/cupcake-3.jpeg" class="card-img-top" alt="sweet-1" />
            <div class="card-body">
              <div class="card-text d-flex justify-content-between text-capitalize">
                <h5 id="store-item-name">sweet item</h5>
                <h5 class="store-item-value">
                  $ <strong id="store-item-price" class="fw-bold">5</strong>
                </h5>
              </div>
            </div>
          </div>
          <!-- end of card -->
        </div>
        <!-- end of single items -->
        <!-- single items-6 -->
        <div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
          <!-- card-6-->
          <div class="card single-item shadow-lg">
            <img src="img/grandma-sweet/cake-3.jpeg" class="card-img-top" alt="sweet-1" />
            <div class="card-body">
              <div class="card-text d-flex justify-content-between text-capitalize">
                <h5 id="store-item-name">sweet item</h5>
                <h5 class="store-item-value">
                  $ <strong id="store-item-price" class="fw-bold">5</strong>
                </h5>
              </div>
            </div>
          </div>
          <!-- end of card -->
        </div>
        <!-- end of single items -->
        <!-- single items-7 -->
        <div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
          <!-- card-7 -->
          <div class="card single-item shadow-lg">
            <img src="img/grandma-sweet/cupcake-1.jpeg" class="card-img-top" alt="cupcake-1" />
            <div class="card-body">
              <div class="card-text d-flex justify-content-between text-capitalize">
                <h5 id="store-item-name">sweet item</h5>
                <h5 class="store-item-value">
                  $ <strong id="store-item-price" class="fw-bold">5</strong>
                </h5>
              </div>
            </div>
          </div>
          <!-- end of card -->
        </div>
        <!-- end of single items -->
        <!-- single items-8 -->
        <div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
          <!-- card-8 -->
          <div class="card single-item shadow-lg">
            <img src="img/grandma-sweet/doughnut-1.jpeg" class="card-img-top" alt="sweet-1" />
            <div class="card-body">
              <div class="card-text d-flex justify-content-between text-capitalize">
                <h5 id="store-item-name">sweet item</h5>
                <h5 class="store-item-value">
                  $ <strong id="store-item-price" class="fw-bold">5</strong>
                </h5>
              </div>
            </div>
          </div>
          <!-- end of card -->
        </div>
        <!-- end of single items -->
        <!-- single items-9 -->
        <div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
          <!-- card-9-->
          <div class="card single-item shadow-lg">
            <img src="img/grandma-sweet/sweets-3.jpeg" class="card-img-top" alt="sweet-3" />
            <div class="card-body">
              <div class="card-text d-flex justify-content-between text-capitalize">
                <h5 id="store-item-name">sweet item</h5>
                <h5 class="store-item-value">
                  $ <strong id="store-item-price" class="fw-bold">5</strong>
                </h5>
              </div>
            </div>
          </div>
          <!-- end of card -->
        </div>
        <!-- end of single items -->
        <!-- single items-10 -->
        <div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
          <!-- card-10 -->
          <div class="card single-item shadow-lg">
            <img src="img/grandma-sweet/sweets-2.jpeg" class="card-img-top" alt="sweet-2" />
            <div class="card-body">
              <div class="card-text d-flex justify-content-between text-capitalize">
                <h5 id="store-item-name">sweet item</h5>
                <h5 class="store-item-value">
                  $ <strong id="store-item-price" class="fw-bold">5</strong>
                </h5>
              </div>
            </div>
          </div>
          <!-- end of card -->
        </div>
        <!-- end of single items -->
        <!-- single items-11-->
        <div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
          <!-- card-11 -->
          <div class="card single-item shadow-lg">
            <img src="img/grandma-sweet/doughnut-3.jpeg" class="card-img-top" alt="doughnut-3" />
            <div class="card-body">
              <div class="card-text d-flex justify-content-between text-capitalize">
                <h5 id="store-item-name">sweet item</h5>
                <h5 class="store-item-value">
                  $ <strong id="store-item-price" class="fw-bold">5</strong>
                </h5>
              </div>
            </div>
          </div>
          <!-- end of card -->
        </div>
        <!-- end of single items -->
        <!-- single items-12 -->
        <div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
          <!-- card-12 -->
          <div class="card single-item shadow-lg">
            <img src="img/grandma-sweet/cupcake-3.jpeg" class="card-img-top" alt="cipcake-3" />
            <div class="card-body">
              <div class="card-text d-flex justify-content-between text-capitalize">
                <h5 id="store-item-name">sweet item</h5>
                <h5 class="store-item-value">
                  $ <strong id="store-item-price" class="fw-bold">5</strong>
                </h5>
              </div>
            </div>
          </div>
          <!-- end of card -->
        </div>
        <!-- end of single items -->
        <!-- single items-13 -->
        <div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
          <!-- card-13 -->
          <div class="card single-item shadow-lg">
            <img src="img/grandma-sweet/cupcake-2.jpeg" class="card-img-top" alt="cupcake-2" />
            <div class="card-body">
              <div class="card-text d-flex justify-content-between text-capitalize">
                <h5 id="store-item-name">sweet item</h5>
                <h5 class="store-item-value">
                  $ <strong id="store-item-price" class="fw-bold">5</strong>
                </h5>
              </div>
            </div>
          </div>
          <!-- end of card -->
        </div>
        <!-- end of single items -->
      </div>
      <!-- end of store-items -->
  </section>
  <!-- End of Store Section -->

    <!--------------------
         Footer
    ---------------------->
    <footer class="container-fluid">
      <div class="row text-center">
        <div class="col-md-6 bg-black py-5 mx-auto text-center">
          <h1 class="text-white text-capitalize">
            welcome to <strong class="banner-title">grandma's</strong>
          </h1>
          <!-- footer-icons -->
          <div class="footer-icons mt-3 d-flex justify-content-around fs-2">
            <a href="#">
              <i class="fa-brands fa-square-facebook text-white"></i>
            </a>
            <a href="#">
              <i class="fa-brands fa-square-twitter text-white"></i>
            </a>
            <a href="#">
              <i class="fa-brands fa-square-instagram text-white"></i>
            </a>
            <a href="#">
              <i class="fa-brands fa-square-google-plus text-white"></i>
            </a>
          </div>
        </div>
        <div class="col-md-6 bg-light-subtle py-5 text-center">
          <h3 class="mb-5 text-capitalize">contact</h3>
          <p class="contact-icons d-flex flex-wrap ms-5">
            <span class="me-4">
              <i class="fa-solid fa-map"></i>
            </span>
            <span class="text-capitalize w-50">
              123 main street, san diego, CA 90101</span
            >
          </p>
          <p class="d-flex flex-wrap ms-5 text-center">
            <span class="me-4">
              <i class="fa-solid fa-envelope-square"></i>
            </span>
            <span>example@grandma.com</span>
          </p>
          <p class="d-flex flex-wrap ms-5 text-center">
            <span class="me-4">
              <i class="fa-solid fa-phone"></i>
            </span>
            <span>+123 456 7890</span>
          </p>
        </div>
      </div>
    </footer>
    <!-- END OF FOOTER -->

    <!-- Bootstrap Js Files -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>