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>