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 -->