Products

Ready-to-use Shop product blocks and components.

Products #1

              
                <!-- Products Section -->
                <div class="container space-2 space-3--lg">
                  <div class="row">
                    <div class="col-sm-6 col-lg-3 mb-5">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img15.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h2 class="h5">Longline t-shirt</h2>
                          <span class="d-block h5 text-primary mb-0">$21</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="col-sm-6 col-lg-3 mb-5">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img16.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h3 class="h5">Slip on shoes</h3>
                          <span class="d-block h5 text-primary mb-0">$99</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="col-sm-6 col-lg-3 mb-5">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img17.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h3 class="h5">Women's t-shirt</h3>
                          <span class="d-block h5 text-primary mb-0">$7</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="col-sm-6 col-lg-3 mb-5">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img18.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h3 class="h5">Hoodie</h3>
                          <span class="d-block h5 text-primary mb-0">$67</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="w-100"></div>

                    <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img19.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h2 class="h5">Snapback cap</h2>
                          <span class="d-block h5 text-primary mb-0">$25</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img20.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h3 class="h5">Men's t-shirt</h3>
                          <span class="d-block h5 text-primary mb-0">$7</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img21.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h3 class="h5">Pillow</h3>
                          <span class="d-block h5 text-primary mb-0">$19</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>

                    <div class="col-sm-6 col-lg-3">
                      <!-- Shop Item -->
                      <a class="d-block border text-dark text-center" href="../html/shop/single-product.html">
                        <img class="img-fluid" src="../assets/img/500x550/img22.jpg" alt="Image Description">
                        <div class="border-top p-4">
                          <h3 class="h5">Glasses case</h3>
                          <span class="d-block h5 text-primary mb-0">$34</span>
                        </div>
                      </a>
                      <!-- End Shop Item -->
                    </div>
                  </div>
                </div>
                <!-- End Products Section -->
              
            

Products #2

Space hats

Experience a legend

Show Now

Space collection

You favorite color

Show Now

HTML:

              
                <!-- Products Section -->
                <div class="container space-2 space-3--lg">
                  <div class="card-deck d-block d-lg-flex">
                    <article class="card border-0 mb-5 mb-lg-0">
                      <!-- Category -->
                      <div class="card-body row align-items-stretch no-gutters p-0">
                        <div class="col-6 border border-right-0">
                          <div class="space-2 px-3 px-sm-5">
                            <div class="mb-4">
                              <h3 class="h4">Space hats</h3>
                              <p class="mb-0">Experience a legend</p>
                            </div>
                            <a href="#">Show Now</a>
                          </div>
                        </div>
                        <div class="col-6 border border-left-0 bg-img-hero-center" data-bg-img-src="../assets/img/500x550/img13.jpg"></div>
                      </div>
                      <!-- End Category -->
                    </article>

                    <article class="card border-0 mb-5 mb-lg-0">
                      <!-- Category -->
                      <div class="card-body row align-items-stretch no-gutters p-0">
                        <div class="col-6 border border-right-0">
                          <div class="space-2 px-3 px-sm-5">
                            <div class="mb-4">
                              <h3 class="h4">Space collection</h3>
                              <p class="mb-0">You favorite color</p>
                            </div>
                            <a href="#">Show Now</a>
                          </div>
                        </div>
                        <div class="col-6 border border-left-0 bg-img-hero" data-bg-img-src="../assets/img/500x550/img14.jpg"></div>
                      </div>
                      <!-- End Category -->
                    </article>
                  </div>
                </div>
                <!-- End Products Section -->
              
            

Products #3

HTML:

              
                <div class="row">
                  <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                    <!-- Product -->
                    <a class="card card-shadow bg-img-hero border-0 gradient-overlay-half-dark-v2 min-height-320 text-white rounded-pseudo p-3 h-100" href="#" style="background-image: url(../../assets/img/500x650/img10.jpg);">
                      <div class="mt-auto">
                        <span class="h5 font-weight-medium text-uppercase">Chorizo cantimpalo</span>
                        <p class="text-white mb-2">spanish sausage from Segovia</p>

                        <ul class="list-inline small text-white">
                          <li class="list-inline-item">
                            <span class="fas fa-heart mr-1"></span>
                            25 like
                          </li>
                          <li class="list-inline-item">
                            <span class="fas fa-comments mr-1"></span>
                            139 comments
                          </li>
                        </ul>
                      </div>
                    </a>
                    <!-- Emd Product -->
                  </div>

                  <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                    <!-- Product -->
                    <a class="card card-shadow bg-img-hero border-0 gradient-overlay-half-dark-v2 min-height-320 text-white rounded-pseudo p-3 h-100" href="#" style="background-image: url(../../assets/img/500x650/img11.jpg);">
                      <div class="mt-auto">
                        <span class="h5 font-weight-medium text-uppercase">Lomo embuchado</span>
                        <p class="text-white mb-2">dry cured pork loin</p>

                        <ul class="list-inline small text-white">
                          <li class="list-inline-item">
                            <span class="fas fa-heart mr-1"></span>
                            362 like
                          </li>
                          <li class="list-inline-item">
                            <span class="fas fa-comments mr-1"></span>
                            94 comments
                          </li>
                        </ul>
                      </div>
                    </a>
                    <!-- Emd Product -->
                  </div>

                  <div class="col-sm-6 col-lg-3 mb-5 mb-sm-0">
                    <!-- Product -->
                    <a class="card card-shadow bg-img-hero border-0 gradient-overlay-half-dark-v2 min-height-320 text-white rounded-pseudo p-3 h-100" href="#" style="background-image: url(../../assets/img/500x650/img12.jpg);">
                      <div class="mt-auto">
                        <span class="h5 font-weight-medium text-uppercase">Jamón serrano</span>
                        <p class="text-white mb-2">18 month landrace ham</p>

                        <ul class="list-inline small text-white">
                          <li class="list-inline-item">
                            <span class="fas fa-heart mr-1"></span>
                            845 like
                          </li>
                          <li class="list-inline-item">
                            <span class="fas fa-comments mr-1"></span>
                            9561 comments
                          </li>
                        </ul>
                      </div>
                    </a>
                    <!-- Emd Product -->
                  </div>

                  <div class="col-sm-6 col-lg-3">
                    <!-- Product -->
                    <a class="card card-shadow bg-img-hero border-0 gradient-overlay-half-dark-v2 min-height-320 text-white rounded-pseudo p-3 h-100" href="#" style="background-image: url(../../assets/img/500x650/img13.jpg);">
                      <div class="mt-auto">
                        <span class="h5 font-weight-medium text-uppercase">Sobrasada</span>
                        <p class="text-white mb-2">spreadable chorizo</p>

                        <ul class="list-inline small text-white">
                          <li class="list-inline-item">
                            <span class="fas fa-heart mr-1"></span>
                            4 like
                          </li>
                          <li class="list-inline-item">
                            <span class="fas fa-comments mr-1"></span>
                            0 comments
                          </li>
                        </ul>
                      </div>
                    </a>
                    <!-- Emd Product -->
                  </div>
                </div>
              
            

Products #4

HTML:

              
                <!-- Menu Section -->
                <div class="container space-2 space-3--lg">
                  <!-- Tab Nav -->
                  <div class="nav nav-tabs justify-content-center tab-modern mb-5" id="h-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link h5 active tab-modern__nav-link mb-4" id="h-tab-forward-tab" data-toggle="pill" href="#h-tab-forward" role="tab" aria-controls="h-tab-forward" aria-selected="true">Breakfast</a>
                    <a class="nav-link h5 tab-modern__nav-link mb-4" id="h-tab-together-tab" data-toggle="pill" href="#h-tab-together" role="tab" aria-controls="h-tab-together" aria-selected="false">Lunch</a>
                    <a class="nav-link h5 tab-modern__nav-link mb-4" id="h-tab-tools-tab" data-toggle="pill" href="#h-tab-tools" role="tab" aria-controls="h-tab-tools" aria-selected="false">Dinner</a>
                  </div>
                  <!-- End Tab Nav -->

                  <!-- Tab Content -->
                  <div class="tab-content" id="h-tabContent">
                    <div class="tab-pane fade show active" id="h-tab-forward" role="tabpanel" aria-labelledby="h-tab-forward-tab">
                      <div class="card-deck d-block d-lg-flex">
                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img1.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Sticky chipotle chicken
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$2.50</span>
                              </h4>
                              <p class="mb-0">Sweet chipotle chilli-glazed chicken bites with toasted sesame seeds.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->

                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img2.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Salt & pepper calamari
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$7.99</span>
                              </h4>
                              <p class="mb-0">Served with black garlic aioli.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->
                      </div>

                      <div class="card-deck d-block d-lg-flex">
                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img3.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Wild atlantic scallops
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$5.00</span>
                              </h4>
                              <p class="mb-0">Served with lobster prosecco sauce, peas, crispy pancetta and straw fries (£2 supplement)</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->

                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img4.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Baked cheddar mushrooms
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$9.30</span>
                              </h4>
                              <p class="mb-0">Button mushrooms in a creamy Cheddar & spinach sauce, served with toasted artisan breads.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->
                      </div>

                      <div class="card-deck d-block d-lg-flex">
                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img5.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                House sharer
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$14.20</span>
                              </h4>
                              <p class="mb-0">Southern-fried chicken pieces, beer-battered mushrooms.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->

                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img6.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                New breaded torpedo prawns
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$1.99</span>
                              </h4>
                              <p class="mb-0">With sweet chilli dipping sauce</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->
                      </div>

                      <div class="card-deck d-block d-lg-flex">
                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 mb-lg-0 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img7.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Grilled lamb kofta kebabs
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$8.00</span>
                              </h4>
                              <p class="mb-0">Served with naan bread and fresh tomato & red onion salsa.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->

                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 ie-d-block ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img8.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Southern-fried chicken pieces
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$6.30</span>
                              </h4>
                              <p class="mb-0">With peri-peri sauce and sour cream.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->
                      </div>
                    </div>

                    <div class="tab-pane fade" id="h-tab-together" role="tabpanel" aria-labelledby="h-tab-together-tab">
                      <div class="card-deck d-block d-lg-flex">
                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img5.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                House sharer
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$14.20</span>
                              </h4>
                              <p class="mb-0">Southern-fried chicken pieces, beer-battered mushrooms.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->

                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img6.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                New breaded torpedo prawns
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$1.99</span>
                              </h4>
                              <p class="mb-0">With sweet chilli dipping sauce</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->
                      </div>

                      <div class="card-deck d-block d-lg-flex">
                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img3.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Wild atlantic scallops
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$5.00</span>
                              </h4>
                              <p class="mb-0">Served with lobster prosecco sauce, peas, crispy pancetta and straw fries (£2 supplement)</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->

                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img4.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Baked cheddar mushrooms
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$9.30</span>
                              </h4>
                              <p class="mb-0">Button mushrooms in a creamy Cheddar & spinach sauce, served with toasted artisan breads.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->
                      </div>

                      <div class="card-deck d-block d-lg-flex">
                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img1.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Sticky chipotle chicken
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$2.50</span>
                              </h4>
                              <p class="mb-0">Sweet chipotle chilli-glazed chicken bites with toasted sesame seeds.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->

                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img2.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Salt & pepper calamari
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$7.99</span>
                              </h4>
                              <p class="mb-0">Served with black garlic aioli.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->
                      </div>

                      <div class="card-deck d-block d-lg-flex">
                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 mb-lg-0 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img7.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Grilled lamb kofta kebabs
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$8.00</span>
                              </h4>
                              <p class="mb-0">Served with naan bread and fresh tomato & red onion salsa.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->

                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img8.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Southern-fried chicken pieces
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$6.30</span>
                              </h4>
                              <p class="mb-0">With peri-peri sauce and sour cream.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->
                      </div>
                    </div>

                    <div class="tab-pane fade" id="h-tab-tools" role="tabpanel" aria-labelledby="h-tab-tools-tab">
                      <div class="card-deck d-block d-lg-flex">
                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img7.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Grilled lamb kofta kebabs
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$8.00</span>
                              </h4>
                              <p class="mb-0">Served with naan bread and fresh tomato & red onion salsa.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->

                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img8.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Southern-fried chicken pieces
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$6.30</span>
                              </h4>
                              <p class="mb-0">With peri-peri sauce and sour cream.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->
                      </div>

                      <div class="card-deck d-block d-lg-flex">
                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img5.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                House sharer
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$14.20</span>
                              </h4>
                              <p class="mb-0">Southern-fried chicken pieces, beer-battered mushrooms.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->

                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img6.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                New breaded torpedo prawns
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$1.99</span>
                              </h4>
                              <p class="mb-0">With sweet chilli dipping sauce</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->
                      </div>

                      <div class="card-deck d-block d-lg-flex">
                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img1.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Sticky chipotle chicken
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$2.50</span>
                              </h4>
                              <p class="mb-0">Sweet chipotle chilli-glazed chicken bites with toasted sesame seeds.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->

                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img2.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Salt & pepper calamari
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$7.99</span>
                              </h4>
                              <p class="mb-0">Served with black garlic aioli.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->
                      </div>

                      <div class="card-deck d-block d-lg-flex">
                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 mb-4 mb-lg-0 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img3.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Wild atlantic scallops
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$5.00</span>
                              </h4>
                              <p class="mb-0">Served with lobster prosecco sauce, peas, crispy pancetta and straw fries (£2 supplement)</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->

                        <!-- Item -->
                        <a class="card card-shadow card-text-dark p-4 ie-d-block" href="#">
                          <div class="row align-items-center">
                            <div class="col-3">
                              <img class="img-fluid rounded-circle" src="../../assets/img/500x500/img4.jpg" alt="Image Description">
                            </div>
                            <div class="col-9">
                              <h4 class="h6 font-weight-medium text-uppercase">
                                Baked cheddar mushrooms
                                <span class="badge badge-purple font-weight-medium float-right ml-3">$9.30</span>
                              </h4>
                              <p class="mb-0">Button mushrooms in a creamy Cheddar & spinach sauce, served with toasted artisan breads.</p>
                            </div>
                          </div>
                        </a>
                        <!-- End Item -->
                      </div>
                    </div>
                  </div>
                  <!-- End Tab Content -->
                </div>
                <!-- End Menu Section -->
              
            

Products #5

HTML:

              
                <div class="row">
                  <!-- Room -->
                  <div class="col-sm-6 col-lg-4 mb-5">
                    <a class="card bg-img-hero lift-lg shadow-2-lg-hover border-0 gradient-overlay-half-dark-v2-2 min-height-320 text-white rounded-pseudo p-4 h-100" href="#" style="background-image: url(../../assets/img/demo/hotel/room-1.jpg);">

                      <div class="mb-3">
                        <span class="badge badge-pill badge-dark bg-black-opacity-0_3 font-weight-normal text-uppercase px-3">Best Offer</span>
                      </div>

                      <div class="mt-auto">
                        <h5 class="font-weight-normal">Deluxe Room</h5>

                        <div class="d-flex align-items-center small text-white">
                          <div class="d-flex align-items-center mr-4">
                            <i class="svg-icon svg-icon-xs text-white mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <rect  width="24" height="24" fill="none"/>
                                <path d="M2,4H0C0,1.239,2.239,0,5,0H15c2.761,0,5,1.239,5,4H18c0-1.657-1.343-2-3-2H5C3.343,2,2,2.343,2,4Z" transform="translate(2 18)" fill="#000000" opacity="0.3"/>
                                <rect width="22" height="6" rx="1" transform="translate(1 14)" fill="#000000"/>
                                <path d="M10,7H8V6A1,1,0,0,0,7,5H3A1,1,0,0,0,2,6V7H1A1,1,0,0,1,0,6V2A2,2,0,0,1,2,0H16a2,2,0,0,1,2,2V6a1,1,0,0,1-1,1H16V6a1,1,0,0,0-1-1H11a1,1,0,0,0-1,1Z" transform="translate(3 6)" fill="#000000" opacity="0.3"/>
                              </svg>
                            </i>
                            5 beds
                          </div>

                          <div class="d-flex align-items-center">
                            <i class="svg-icon svg-icon-xs text-white mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="21" height="9" viewBox="0 0 21 9">
                                <path d="M15.525,9H5.476A5,5,0,0,1,.506,4.552L0,0H21l-.506,4.552A4.994,4.994,0,0,1,15.525,9ZM18,1.75a.751.751,0,0,0-.75.751,4.008,4.008,0,0,1-1.7,3.4.75.75,0,0,0,.9,1.2,5.488,5.488,0,0,0,2.3-4.6A.751.751,0,0,0,18,1.75Z" transform="translate(0 0)" fill="#000000"/>
                              </svg>
                            </i>
                            3 bathrooms
                          </div>
                        </div>

                        <hr class="border-white-opacity-0_3">

                        Starts from <span class="text-primary font-weight-medium">$1.520.00</span>
                      </div>
                    </a>
                  </div>
                  <!-- End Room -->

                  <!-- Room -->
                  <div class="col-sm-6 col-lg-4 mb-5">
                    <a class="card bg-img-hero lift-lg shadow-2-lg-hover border-0 gradient-overlay-half-dark-v2-2 min-height-320 text-white rounded-pseudo p-4 h-100" href="#" style="background-image: url(../../assets/img/demo/hotel/room-2.jpg);">

                      <div class="mt-auto">
                        <h5 class="font-weight-normal">Luxury Room</h5>

                        <div class="d-flex align-items-center small text-white">
                          <div class="d-flex align-items-center mr-4">
                            <i class="svg-icon svg-icon-xs text-white mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <rect  width="24" height="24" fill="none"/>
                                <path d="M2,4H0C0,1.239,2.239,0,5,0H15c2.761,0,5,1.239,5,4H18c0-1.657-1.343-2-3-2H5C3.343,2,2,2.343,2,4Z" transform="translate(2 18)" fill="#000000" opacity="0.3"/>
                                <rect width="22" height="6" rx="1" transform="translate(1 14)" fill="#000000"/>
                                <path d="M10,7H8V6A1,1,0,0,0,7,5H3A1,1,0,0,0,2,6V7H1A1,1,0,0,1,0,6V2A2,2,0,0,1,2,0H16a2,2,0,0,1,2,2V6a1,1,0,0,1-1,1H16V6a1,1,0,0,0-1-1H11a1,1,0,0,0-1,1Z" transform="translate(3 6)" fill="#000000" opacity="0.3"/>
                              </svg>
                            </i>
                            3 beds
                          </div>

                          <div class="d-flex align-items-center">
                            <i class="svg-icon svg-icon-xs text-white mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="21" height="9" viewBox="0 0 21 9">
                                <path d="M15.525,9H5.476A5,5,0,0,1,.506,4.552L0,0H21l-.506,4.552A4.994,4.994,0,0,1,15.525,9ZM18,1.75a.751.751,0,0,0-.75.751,4.008,4.008,0,0,1-1.7,3.4.75.75,0,0,0,.9,1.2,5.488,5.488,0,0,0,2.3-4.6A.751.751,0,0,0,18,1.75Z" transform="translate(0 0)" fill="#000000"/>
                              </svg>
                            </i>
                            2 bathrooms
                          </div>
                        </div>

                        <hr class="border-white-opacity-0_3">

                        Starts from <span class="text-primary font-weight-medium">$1.100.00</span>
                      </div>
                    </a>
                  </div>
                  <!-- End Room -->

                  <!-- Room -->
                  <div class="col-sm-6 col-lg-4 mb-5">
                    <a class="card bg-img-hero lift-lg shadow-2-lg-hover border-0 gradient-overlay-half-dark-v2-2 min-height-320 text-white rounded-pseudo p-4 h-100" href="#" style="background-image: url(../../assets/img/demo/hotel/room-3.jpg);">

                      <div class="mt-auto">
                        <h5 class="font-weight-normal">Premium Room</h5>

                        <div class="d-flex align-items-center small text-white">
                          <div class="d-flex align-items-center mr-4">
                            <i class="svg-icon svg-icon-xs text-white mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <rect  width="24" height="24" fill="none"/>
                                <path d="M2,4H0C0,1.239,2.239,0,5,0H15c2.761,0,5,1.239,5,4H18c0-1.657-1.343-2-3-2H5C3.343,2,2,2.343,2,4Z" transform="translate(2 18)" fill="#000000" opacity="0.3"/>
                                <rect width="22" height="6" rx="1" transform="translate(1 14)" fill="#000000"/>
                                <path d="M10,7H8V6A1,1,0,0,0,7,5H3A1,1,0,0,0,2,6V7H1A1,1,0,0,1,0,6V2A2,2,0,0,1,2,0H16a2,2,0,0,1,2,2V6a1,1,0,0,1-1,1H16V6a1,1,0,0,0-1-1H11a1,1,0,0,0-1,1Z" transform="translate(3 6)" fill="#000000" opacity="0.3"/>
                              </svg>
                            </i>
                            3 beds
                          </div>

                          <div class="d-flex align-items-center">
                            <i class="svg-icon svg-icon-xs text-white mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="21" height="9" viewBox="0 0 21 9">
                                <path d="M15.525,9H5.476A5,5,0,0,1,.506,4.552L0,0H21l-.506,4.552A4.994,4.994,0,0,1,15.525,9ZM18,1.75a.751.751,0,0,0-.75.751,4.008,4.008,0,0,1-1.7,3.4.75.75,0,0,0,.9,1.2,5.488,5.488,0,0,0,2.3-4.6A.751.751,0,0,0,18,1.75Z" transform="translate(0 0)" fill="#000000"/>
                              </svg>
                            </i>
                            1 bathrooms
                          </div>
                        </div>

                        <hr class="border-white-opacity-0_3">

                        Starts from <span class="text-primary font-weight-medium">$920.00</span>
                      </div>
                    </a>
                  </div>
                  <!-- End Room -->

                  <!-- Room -->
                  <div class="col-sm-6 col-lg-4 mb-5">
                    <a class="card bg-img-hero lift-lg shadow-2-lg-hover border-0 gradient-overlay-half-dark-v2-2 min-height-320 text-white rounded-pseudo p-4 h-100" href="#" style="background-image: url(../../assets/img/demo/hotel/room-4.jpg);">

                      <div class="mt-auto">
                        <h5 class="font-weight-normal">Cooper Room</h5>

                        <div class="d-flex align-items-center small text-white">
                          <div class="d-flex align-items-center mr-4">
                            <i class="svg-icon svg-icon-xs text-white mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <rect  width="24" height="24" fill="none"/>
                                <path d="M2,4H0C0,1.239,2.239,0,5,0H15c2.761,0,5,1.239,5,4H18c0-1.657-1.343-2-3-2H5C3.343,2,2,2.343,2,4Z" transform="translate(2 18)" fill="#000000" opacity="0.3"/>
                                <rect width="22" height="6" rx="1" transform="translate(1 14)" fill="#000000"/>
                                <path d="M10,7H8V6A1,1,0,0,0,7,5H3A1,1,0,0,0,2,6V7H1A1,1,0,0,1,0,6V2A2,2,0,0,1,2,0H16a2,2,0,0,1,2,2V6a1,1,0,0,1-1,1H16V6a1,1,0,0,0-1-1H11a1,1,0,0,0-1,1Z" transform="translate(3 6)" fill="#000000" opacity="0.3"/>
                              </svg>
                            </i>
                            2 beds
                          </div>

                          <div class="d-flex align-items-center">
                            <i class="svg-icon svg-icon-xs text-white mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="21" height="9" viewBox="0 0 21 9">
                                <path d="M15.525,9H5.476A5,5,0,0,1,.506,4.552L0,0H21l-.506,4.552A4.994,4.994,0,0,1,15.525,9ZM18,1.75a.751.751,0,0,0-.75.751,4.008,4.008,0,0,1-1.7,3.4.75.75,0,0,0,.9,1.2,5.488,5.488,0,0,0,2.3-4.6A.751.751,0,0,0,18,1.75Z" transform="translate(0 0)" fill="#000000"/>
                              </svg>
                            </i>
                            1 bathrooms
                          </div>
                        </div>

                        <hr class="border-white-opacity-0_3">

                        Starts from <span class="text-primary font-weight-medium">$550.00</span>
                      </div>
                    </a>
                  </div>
                  <!-- End Room -->

                  <!-- Room -->
                  <div class="col-sm-6 col-lg-4 mb-5">
                    <a class="card bg-img-hero lift-lg shadow-2-lg-hover border-0 gradient-overlay-half-dark-v2-2 min-height-320 text-white rounded-pseudo p-4 h-100" href="#" style="background-image: url(../../assets/img/demo/hotel/room-5.jpg);">

                      <div class="mt-auto">
                        <h5 class="font-weight-normal">Regular Room</h5>

                        <div class="d-flex align-items-center small text-white">
                          <div class="d-flex align-items-center mr-4">
                            <i class="svg-icon svg-icon-xs text-white mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <rect  width="24" height="24" fill="none"/>
                                <path d="M2,4H0C0,1.239,2.239,0,5,0H15c2.761,0,5,1.239,5,4H18c0-1.657-1.343-2-3-2H5C3.343,2,2,2.343,2,4Z" transform="translate(2 18)" fill="#000000" opacity="0.3"/>
                                <rect width="22" height="6" rx="1" transform="translate(1 14)" fill="#000000"/>
                                <path d="M10,7H8V6A1,1,0,0,0,7,5H3A1,1,0,0,0,2,6V7H1A1,1,0,0,1,0,6V2A2,2,0,0,1,2,0H16a2,2,0,0,1,2,2V6a1,1,0,0,1-1,1H16V6a1,1,0,0,0-1-1H11a1,1,0,0,0-1,1Z" transform="translate(3 6)" fill="#000000" opacity="0.3"/>
                              </svg>
                            </i>
                            1 beds
                          </div>

                          <div class="d-flex align-items-center">
                            <i class="svg-icon svg-icon-xs text-white mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="21" height="9" viewBox="0 0 21 9">
                                <path d="M15.525,9H5.476A5,5,0,0,1,.506,4.552L0,0H21l-.506,4.552A4.994,4.994,0,0,1,15.525,9ZM18,1.75a.751.751,0,0,0-.75.751,4.008,4.008,0,0,1-1.7,3.4.75.75,0,0,0,.9,1.2,5.488,5.488,0,0,0,2.3-4.6A.751.751,0,0,0,18,1.75Z" transform="translate(0 0)" fill="#000000"/>
                              </svg>
                            </i>
                            1 bathrooms
                          </div>
                        </div>

                        <hr class="border-white-opacity-0_3">

                        Starts from <span class="text-primary font-weight-medium">$300.00</span>
                      </div>
                    </a>
                  </div>
                  <!-- End Room -->

                  <!-- Room -->
                  <div class="col-sm-6 col-lg-4 mb-5">
                    <a class="card bg-img-hero lift-lg shadow-2-lg-hover border-0 gradient-overlay-half-dark-v2-2 min-height-320 text-white rounded-pseudo p-4 h-100" href="#" style="background-image: url(../../assets/img/demo/hotel/room-6.jpg);">

                      <div class="mt-auto">
                        <h5 class="font-weight-normal">Budget Room</h5>

                        <div class="d-flex align-items-center small text-white">
                          <div class="d-flex align-items-center mr-4">
                            <i class="svg-icon svg-icon-xs text-white mr-2">
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <rect  width="24" height="24" fill="none"/>
                                <path d="M2,4H0C0,1.239,2.239,0,5,0H15c2.761,0,5,1.239,5,4H18c0-1.657-1.343-2-3-2H5C3.343,2,2,2.343,2,4Z" transform="translate(2 18)" fill="#000000" opacity="0.3"/>
                                <rect width="22" height="6" rx="1" transform="translate(1 14)" fill="#000000"/>
                                <path d="M10,7H8V6A1,1,0,0,0,7,5H3A1,1,0,0,0,2,6V7H1A1,1,0,0,1,0,6V2A2,2,0,0,1,2,0H16a2,2,0,0,1,2,2V6a1,1,0,0,1-1,1H16V6a1,1,0,0,0-1-1H11a1,1,0,0,0-1,1Z" transform="translate(3 6)" fill="#000000" opacity="0.3"/>
                              </svg>
                            </i>
                            1 bed
                          </div>
                        </div>

                        <hr class="border-white-opacity-0_3">

                        Starts from <span class="text-primary font-weight-medium">$50.00</span>
                      </div>
                    </a>
                  </div>
                  <!-- End Room -->
                </div>