Space hats
Experience a legend
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 collection
You favorite color
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
Sticky chipotle chicken $2.50
Sweet chipotle chilli-glazed chicken bites with toasted sesame seeds.
Salt & pepper calamari $7.99
Served with black garlic aioli.
Wild atlantic scallops $5.00
Served with lobster prosecco sauce, peas, crispy pancetta and straw fries (£2 supplement)
Baked cheddar mushrooms $9.30
Button mushrooms in a creamy Cheddar & spinach sauce, served with toasted artisan breads.
House sharer $14.20
Southern-fried chicken pieces, beer-battered mushrooms.
New breaded torpedo prawns $1.99
With sweet chilli dipping sauce
Wild atlantic scallops $5.00
Served with lobster prosecco sauce, peas, crispy pancetta and straw fries (£2 supplement)
Baked cheddar mushrooms $9.30
Button mushrooms in a creamy Cheddar & spinach sauce, served with toasted artisan breads.
Grilled lamb kofta kebabs $8.00
Served with naan bread and fresh tomato & red onion salsa.
Southern-fried chicken pieces $6.30
With peri-peri sauce and sour cream.
House sharer $14.20
Southern-fried chicken pieces, beer-battered mushrooms.
New breaded torpedo prawns $1.99
With sweet chilli dipping sauce
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>