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>
              
            

Products #6

HTML:

              
                <div class="row">
                  <div class="col-md-6 col-lg-4 mb-5">
                    <!-- Property -->
                    <article class="card border-0 shadow-sm h-100 mb-3">
                      <a href="#"><img class="card-img-top" src="../assets/img/demo/real-estate/property-1.jpg" alt="Image Description"></a>
                      <div class="card-body pb-0">
                        <h6 class="small text-uppercase font-weight-medium letter-spacing-0_06 text-muted mb-1">Open House</h6>
                        <h3 class="h4">
                          <a href="#">$14,502,000</a>
                        </h3>
                        <p class="text-muted mb-0">4 Floors • 8 Beds •  2,114 Sqft.</p>
                      </div>
                      <div class="card-footer text-muted d-flex justify-content-between align-items-center mx-3 px-0">
                        <div class="d-flex align-items-center text-muted">
                          <i class="svg-icon svg-icon-xs text-secondary mt-n1 mr-2">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Stockholm-icons-/-Map-/-Marker#1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect id="bound" x="0" y="0" width="24" height="24"></rect>
                                <path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" id="Combined-Shape" fill="#000000"></path>
                              </g>
                            </svg>
                          </i>
                          Los Angeles, CA
                        </div>
                        <a class="d-flex align-items-center font-weight-bold" href="#">
                          Details
                          <i class="svg-icon svg-icon-xs text-primary mt-n1 ml-2">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Stockholm-icons-/-Navigation-/-Arrow-right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
                                <rect id="Rectangle" fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1"></rect>
                                <path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" id="Path-94" fill="#000000" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) "></path>
                              </g>
                            </svg>
                          </i>
                        </a>
                      </div>
                    </article>
                    <!-- End Property -->
                  </div>

                  <div class="col-md-6 col-lg-4 mb-5">
                    <!-- Property -->
                    <article class="card border-0 shadow-sm h-100 mb-3">
                      <a href="#"><img class="card-img-top" src="../assets/img/demo/real-estate/property-2.jpg" alt="Image Description"></a>
                      <div class="card-body pb-0">
                        <h6 class="small text-uppercase font-weight-medium letter-spacing-0_06 text-muted mb-1">Open House</h6>
                        <h3 class="h4">
                          <a href="#">$2,700,000</a>
                        </h3>
                        <p class="text-muted mb-0">3 Floors • 4 Beds •  1,200 Sqft.</p>
                      </div>
                      <div class="card-footer text-muted d-flex justify-content-between align-items-center mx-3 px-0">
                        <div class="d-flex align-items-center text-muted">
                          <i class="svg-icon svg-icon-xs text-secondary mt-n1 mr-2">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Stockholm-icons-/-Map-/-Marker#1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect id="bound" x="0" y="0" width="24" height="24"></rect>
                                <path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" id="Combined-Shape" fill="#000000"></path>
                              </g>
                            </svg>
                          </i>
                          Ohio, CLE
                        </div>
                        <a class="d-flex align-items-center font-weight-bold" href="#">
                          Details
                          <i class="svg-icon svg-icon-xs text-primary mt-n1 ml-2">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Stockholm-icons-/-Navigation-/-Arrow-right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
                                <rect id="Rectangle" fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1"></rect>
                                <path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" id="Path-94" fill="#000000" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) "></path>
                              </g>
                            </svg>
                          </i>
                        </a>
                      </div>
                    </article>
                    <!-- End Property -->
                  </div>

                  <div class="col-md-6 col-lg-4 mb-5">
                    <!-- Property -->
                    <article class="card border-0 shadow-sm h-100 mb-3">
                      <a href="#"><img class="card-img-top" src="../assets/img/demo/real-estate/property-3.jpg" alt="Image Description"></a>
                      <div class="card-body pb-0">
                        <h6 class="small text-uppercase font-weight-medium letter-spacing-0_06 text-muted mb-1">Open House</h6>
                        <h3 class="h4">
                          <a href="#">$5,050,000</a>
                        </h3>
                        <p class="text-muted mb-0">2 Floors • 4 Beds •  509 Sqft.</p>
                      </div>
                      <div class="card-footer text-muted d-flex justify-content-between align-items-center mx-3 px-0">
                        <div class="d-flex align-items-center text-muted">
                          <i class="svg-icon svg-icon-xs text-secondary mt-n1 mr-2">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Stockholm-icons-/-Map-/-Marker#1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect id="bound" x="0" y="0" width="24" height="24"></rect>
                                <path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" id="Combined-Shape" fill="#000000"></path>
                              </g>
                            </svg>
                          </i>
                          San Francisco, CA
                        </div>
                        <a class="d-flex align-items-center font-weight-bold" href="#">
                          Details
                          <i class="svg-icon svg-icon-xs text-primary mt-n1 ml-2">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Stockholm-icons-/-Navigation-/-Arrow-right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
                                <rect id="Rectangle" fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1"></rect>
                                <path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" id="Path-94" fill="#000000" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) "></path>
                              </g>
                            </svg>
                          </i>
                        </a>
                      </div>
                    </article>
                    <!-- End Property -->
                  </div>

                  <div class="col-md-6 col-lg-4 mb-5">
                    <!-- Property -->
                    <article class="card border-0 shadow-sm h-100 mb-3">
                      <a href="#"><img class="card-img-top" src="../assets/img/demo/real-estate/property-4.jpg" alt="Image Description"></a>
                      <div class="card-body pb-0">
                        <h6 class="small text-uppercase font-weight-medium letter-spacing-0_06 text-muted mb-1">Open House</h6>
                        <h3 class="h4">
                          <a href="#">$7,590,000</a>
                        </h3>
                        <p class="text-muted mb-0">3 Floors • 12 Beds •  3,508 Sqft.</p>
                      </div>
                      <div class="card-footer text-muted d-flex justify-content-between align-items-center mx-3 px-0">
                        <div class="d-flex align-items-center text-muted">
                          <i class="svg-icon svg-icon-xs text-secondary mt-n1 mr-2">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Stockholm-icons-/-Map-/-Marker#1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect id="bound" x="0" y="0" width="24" height="24"></rect>
                                <path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" id="Combined-Shape" fill="#000000"></path>
                              </g>
                            </svg>
                          </i>
                          Minneapolis, MN
                        </div>
                        <a class="d-flex align-items-center font-weight-bold" href="#">
                          Details
                          <i class="svg-icon svg-icon-xs text-primary mt-n1 ml-2">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Stockholm-icons-/-Navigation-/-Arrow-right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
                                <rect id="Rectangle" fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1"></rect>
                                <path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" id="Path-94" fill="#000000" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) "></path>
                              </g>
                            </svg>
                          </i>
                        </a>
                      </div>
                    </article>
                    <!-- End Property -->
                  </div>

                  <div class="col-md-6 col-lg-4 mb-5">
                    <!-- Property -->
                    <article class="card border-0 shadow-sm h-100 mb-3">
                      <a href="#"><img class="card-img-top" src="../assets/img/demo/real-estate/property-5.jpg" alt="Image Description"></a>
                      <div class="card-body pb-0">
                        <h6 class="small text-uppercase font-weight-medium letter-spacing-0_06 text-muted mb-1">Open House</h6>
                        <h3 class="h4">
                          <a href="#">$3,422,000</a>
                        </h3>
                        <p class="text-muted mb-0">2 Floors • 4 Beds •  8,090 Sqft.</p>
                      </div>
                      <div class="card-footer text-muted d-flex justify-content-between align-items-center mx-3 px-0">
                        <div class="d-flex align-items-center text-muted">
                          <i class="svg-icon svg-icon-xs text-secondary mt-n1 mr-2">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Stockholm-icons-/-Map-/-Marker#1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect id="bound" x="0" y="0" width="24" height="24"></rect>
                                <path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" id="Combined-Shape" fill="#000000"></path>
                              </g>
                            </svg>
                          </i>
                          San Francisco, CA
                        </div>
                        <a class="d-flex align-items-center font-weight-bold" href="#">
                          Details
                          <i class="svg-icon svg-icon-xs text-primary mt-n1 ml-2">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Stockholm-icons-/-Navigation-/-Arrow-right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
                                <rect id="Rectangle" fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1"></rect>
                                <path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" id="Path-94" fill="#000000" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) "></path>
                              </g>
                            </svg>
                          </i>
                        </a>
                      </div>
                    </article>
                    <!-- End Property -->
                  </div>

                  <div class="col-md-6 col-lg-4 mb-5">
                    <!-- Property -->
                    <article class="card border-0 shadow-sm h-100 mb-3">
                      <a href="#"><img class="card-img-top" src="../assets/img/demo/real-estate/property-6.jpg" alt="Image Description"></a>
                      <div class="card-body pb-0">
                        <h6 class="small text-uppercase font-weight-medium letter-spacing-0_06 text-muted mb-1">Open House</h6>
                        <h3 class="h4">
                          <a href="#">$1,080,000</a>
                        </h3>
                        <p class="text-muted mb-0">2 Floors • 2 Beds •  5,720 Sqft.</p>
                      </div>
                      <div class="card-footer text-muted d-flex justify-content-between align-items-center mx-3 px-0">
                        <div class="d-flex align-items-center text-muted">
                          <i class="svg-icon svg-icon-xs text-secondary mt-n1 mr-2">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Stockholm-icons-/-Map-/-Marker#1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect id="bound" x="0" y="0" width="24" height="24"></rect>
                                <path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" id="Combined-Shape" fill="#000000"></path>
                              </g>
                            </svg>
                          </i>
                          Ohio, CLE
                        </div>
                        <a class="d-flex align-items-center font-weight-bold" href="#">
                          Details
                          <i class="svg-icon svg-icon-xs text-primary mt-n1 ml-2">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Stockholm-icons-/-Navigation-/-Arrow-right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
                                <rect id="Rectangle" fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1"></rect>
                                <path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" id="Path-94" fill="#000000" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) "></path>
                              </g>
                            </svg>
                          </i>
                        </a>
                      </div>
                    </article>
                    <!-- End Property -->
                  </div>
                </div>