Are you ready to showcase your star products and entice visitors to explore your offerings further? The feature product section is a key element of any successful e-commerce website. In this tutorial, we’ll guide you through creating an attractive feature product section using HTML and CSS.
<div class="brief cp60" id="brief">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="brief_text text-center">
<h3>Cuban Cigar Online</h3>
<h2>Our Featured Products</h2>
<p>Explore rare finds and unexpected treasures in our latest collection. A fresh horizon of
elegance and sophistication awaits your discerning taste. Embrace this novel voyage. Ideal
for rejuvenating your collection or adding a spark of
excitement to your routine. Act now, the journey of discovery awaits!</p>
</div>
</div>
</div>
<div class="row feature_prod">
<div class="col-6">
<div class="prod">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="w-100" alt="" data-lazy-src="images/cohiba.gif"><noscript><img src="images/cohiba.gif" class="w-100" alt=""></noscript>
<h2 class="pt-2 pb-2">Montecristo No 2 Grand Reserva 2005</h2>
<div class="price">
<p>$ 2,058 <span>(Save 48%)</span></p>
<h3>Limited stock!</h3>
</div>
<p class="pt-2 pb-3">Delivery & Satisfaction Guaranteed.
Free returns within 14 days.
</p>
<a href="#" class="btn btn-cstm w-100">Buy Now</a>
</div>
</div>
<div class="col-6">
<div class="prod">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="w-100" alt="" data-lazy-src="images/montecristo.gif"><noscript><img src="images/montecristo.gif" class="w-100" alt=""></noscript>
<h2 class="pt-2 pb-2">Cohiba Behike Ceramic Jar (25 Cigars)</h2>
<div class="price">
<p>$ 1,763 <span>(Save 40%)</span></p>
<h3>Limited stock!</h3>
</div>
<p class="pt-2 pb-3">Delivery & Satisfaction Guaranteed.
Free returns within 14 days.
</p>
<a href="#" class="btn btn-cstm w-100">Buy Now</a>
</div>
</div>
<div class="col-md-12 mt-4 text-center">
<h2> Anticipate Delightful Mystery Gifts at Checkout. Embark on a Treasure Hunt!</h2>
</div>
</div>
</div>
</div>
.feature_prod {
width: 70%;
margin: auto;
}
.brief_text {
width: 70%;
margin: auto;
margin-bottom: 30px;
}
.brief_text h2 {
margin: 15px 0px;
}
.prod {
padding: 15px;
border: 1px solid var(--cs-subprimary);
}
.prod img {
height: 384px;
object-fit: cover;
--webkit-object-fit: cover;
}
.prod h2 {
font-size: 21px;
}
.price {
display: flex;
align-items: center;
justify-content: space-between;
}
.price p {
font-weight: 600;
}
.price p span {
color: var(--cs-subprimary);
}
