Section & Variations › Product Details Page
Available Variations
Starter Kit Codes
<!-- include sections/product-details -->
<section class="product-details product-details-variation-2">
<div class="container-fluid">
<div class="section-content">
<div class="section-content-left">
<div class="product-thumbnails product-details-variation-2">
<div class="product-gallery">
<figure class="product-gallery-wrapper ">
<div data-thumb="" data-thumb-alt="" class="product-gallery-image">
<img src="assets/images/fashion-product-details-1.png" />
</div>
<div data-thumb="" data-thumb-alt="" class="product-gallery-image">
<img src="assets/images/fashion-product-details-2.png" />
</div>
<div data-thumb="" data-thumb-alt="" class="product-gallery-image">
<img src="assets/images/fashion-product-details-3.png" />
</div>
<div data-thumb="" data-thumb-alt="" class="product-gallery-image">
<img src="assets/images/fashion-product-details-4.png" />
</div>
</figure>
</div>
</div>
</div>
<div class="section-content-right">
<nav class="nav-breadcrumb" aria-label="breadcrumb">
<div class="container">
<ol class="breadcrumb">
<li class="breadcrumb-item "><a href="homepage.html">Home page</a></li>
<li class="breadcrumb-item "><a href="product-list.html">Collection</a></li>
<li class="breadcrumb-item "><a href="product-list.html">Summer Sale</a></li>
<li class="breadcrumb-item "><a href="product-list.html">Men</a></li>
<li class="breadcrumb-item active"><a href="product-list.html">Outter</a></li>
</ol>
</div>
</nav>
<div class="product-header">
<strong class="product-category">Men's Tees</strong>
<h4 class="product-title">Slim Fit Waffled polo shirt</h4>
<div class="product-rating product-details-variation-2">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star half"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(890 reviews)</span>
</div>
</div>
</div>
<div class="product-price-wrapper">
<label>Taxes included</label>
<div class="product-price">
<span>$32.00</span>
</div>
</div>
</div>
<div class="product-description">
<p>Beauty is in the details lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique comfort and quality go hand in hand and these materials.</p>
</div>
<div class="product-variations">
<div class="product-variation variation-type-selectColor">
<label class="product-variation-label">Color:</label>
<span class="product-variation-selected"></span>
<div class="product-variation-options">
<label class="product-variation-option">
<input type="radio" class="product-variation-option-radio" name="Color:">
<span style="background: #B49C90; border-color: #B49C90;">Pale Taupe</span>
</label>
<label class="product-variation-option">
<input type="radio" class="product-variation-option-radio" name="Color:">
<span style="background: #EEEBDD; border-color: #E1E1E1;">Eggshell</span>
</label>
<label class="product-variation-option">
<input type="radio" class="product-variation-option-radio" name="Color:">
<span style="background: #2C2C2C; border-color: #2C2C2C;">Heavy Metal</span>
</label>
</div>
</div>
<div class="product-variation variation-type-selectButton">
<label class="product-variation-label">Size</label>
<span class="product-variation-selected"></span>
<div class="product-variation-options">
<label class="product-variation-option">
<input type="radio" class="product-variation-option-radio" name="Size">
<span>S</span>
</label>
<label class="product-variation-option">
<input type="radio" class="product-variation-option-radio" name="Size">
<span>M</span>
</label>
<label class="product-variation-option">
<input type="radio" class="product-variation-option-radio" name="Size">
<span>XL</span>
</label>
<label class="product-variation-option">
<input type="radio" class="product-variation-option-radio" name="Size">
<span>XXL</span>
</label>
<label class="product-variation-option">
<input type="radio" class="product-variation-option-radio" name="Size">
<span>3XL</span>
</label>
</div>
</div>
</div>
<div class="product-details-buttons">
<button class="btn btn-xl btn-brand-primary">ADD TO CART</button>
<button class="btn btn-xl btn-icon btn-outline-dark-3"> <i class="ic ic-heart-straight dark-1"></i> FAVOURITE</button>
</div>
<div class="product-more-informations" id="product-more-informations-accordion-parent">
<div class="product-more-informations-items accordion" id="product-more-informations-accordion">
<div class="product-more-informations-item accordion-item">
<h2 class="accordion-header" id="product-more-informations-heading-1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#product-more-informations-collapse-1" aria-expanded="false" aria-controls="product-more-informations-collapse-1">Materials & Care</button>
</h2>
<div id="product-more-informations-collapse-1" class="accordion-collapse collapse" aria-labelledby="product-more-informations-heading-1" data-bs-parent="#product-more-informations-accordion-parent">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="product-more-informations-item accordion-item">
<h2 class="accordion-header" id="product-more-informations-heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#product-more-informations-collapse-2" aria-expanded="false" aria-controls="product-more-informations-collapse-2">Size Guide</button>
</h2>
<div id="product-more-informations-collapse-2" class="accordion-collapse collapse" aria-labelledby="product-more-informations-heading-2" data-bs-parent="#product-more-informations-accordion-parent">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="product-more-informations-item accordion-item">
<h2 class="accordion-header" id="product-more-informations-heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#product-more-informations-collapse-3" aria-expanded="false" aria-controls="product-more-informations-collapse-3">Shipping Info</button>
</h2>
<div id="product-more-informations-collapse-3" class="accordion-collapse collapse" aria-labelledby="product-more-informations-heading-3" data-bs-parent="#product-more-informations-accordion-parent">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Starter Kit Codes
<!-- include sections/product-details -->
<section class="product-details product-details-variation-3">
<div class="container">
<div class="section-header">
<nav class="nav-breadcrumb" aria-label="breadcrumb">
<div class="container">
<ol class="breadcrumb">
<li class="breadcrumb-item "><a href="homepage.html">Home page</a></li>
<li class="breadcrumb-item "><a href="product-list.html">Skincare</a></li>
<li class="breadcrumb-item active"><a href="product-list.html">Power Infusing Eye Concentrate</a></li>
</ol>
</div>
</nav>
</div>
<div class="section-content">
<div class="section-content-left">
<div class="product-thumbnails product-details-variation-3">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="product-thumbnails-tab-1" data-bs-toggle="tab" data-bs-target="#product-thumbnails-tab-1-pane" type="button" role="tab" aria-controls="product-thumbnails-tab-1-pane" aria-selected="true">
<img src="assets/images/cosmetics-product-details-1.png" />
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="product-thumbnails-tab-2" data-bs-toggle="tab" data-bs-target="#product-thumbnails-tab-2-pane" type="button" role="tab" aria-controls="product-thumbnails-tab-2-pane" aria-selected="false">
<img src="assets/images/cosmetics-product-details-2.png" />
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="product-thumbnails-tab-3" data-bs-toggle="tab" data-bs-target="#product-thumbnails-tab-3-pane" type="button" role="tab" aria-controls="product-thumbnails-tab-3-pane" aria-selected="false">
<img src="assets/images/cosmetics-product-details-3.png" />
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="product-thumbnails-tab-4" data-bs-toggle="tab" data-bs-target="#product-thumbnails-tab-4-pane" type="button" role="tab" aria-controls="product-thumbnails-tab-4-pane" aria-selected="false">
<img src="assets/images/cosmetics-product-details-4.png" />
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="product-thumbnails-tab-5" data-bs-toggle="tab" data-bs-target="#product-thumbnails-tab-5-pane" type="button" role="tab" aria-controls="product-thumbnails-tab-5-pane" aria-selected="false">
<img src="assets/images/cosmetics-product-details-5.png" />
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="product-thumbnails-tab-6" data-bs-toggle="tab" data-bs-target="#product-thumbnails-tab-6-pane" type="button" role="tab" aria-controls="product-thumbnails-tab-6-pane" aria-selected="false">
<img src="assets/images/cosmetics-product-details-6.png" />
</button>
</li>
</ul>
<div class="product-gallery">
<figure class="product-gallery-wrapper tab-content">
<div class="tab-pane fade show active" id="product-thumbnails-tab-1-pane" role="tabpanel" aria-labelledby="product-thumbnails-tab-1" tabindex="1">
<img src="assets/images/cosmetics-product-details-1.png" />
<a href="#" class="btn-love"><i class="ic ic-heart-straight dark-1"></i></a>
</div>
<div class="tab-pane fade " id="product-thumbnails-tab-2-pane" role="tabpanel" aria-labelledby="product-thumbnails-tab-2" tabindex="2">
<img src="assets/images/cosmetics-product-details-2.png" />
<a href="#" class="btn-love"><i class="ic ic-heart-straight dark-1"></i></a>
</div>
<div class="tab-pane fade " id="product-thumbnails-tab-3-pane" role="tabpanel" aria-labelledby="product-thumbnails-tab-3" tabindex="3">
<img src="assets/images/cosmetics-product-details-3.png" />
<a href="#" class="btn-love"><i class="ic ic-heart-straight dark-1"></i></a>
</div>
<div class="tab-pane fade " id="product-thumbnails-tab-4-pane" role="tabpanel" aria-labelledby="product-thumbnails-tab-4" tabindex="4">
<img src="assets/images/cosmetics-product-details-4.png" />
<a href="#" class="btn-love"><i class="ic ic-heart-straight dark-1"></i></a>
</div>
<div class="tab-pane fade " id="product-thumbnails-tab-5-pane" role="tabpanel" aria-labelledby="product-thumbnails-tab-5" tabindex="5">
<img src="assets/images/cosmetics-product-details-5.png" />
<a href="#" class="btn-love"><i class="ic ic-heart-straight dark-1"></i></a>
</div>
<div class="tab-pane fade " id="product-thumbnails-tab-6-pane" role="tabpanel" aria-labelledby="product-thumbnails-tab-6" tabindex="6">
<img src="assets/images/cosmetics-product-details-6.png" />
<a href="#" class="btn-love"><i class="ic ic-heart-straight dark-1"></i></a>
</div>
</figure>
</div>
</div>
</div>
<div class="section-content-right">
<div class="product-header">
<strong class="product-category">Skincare</strong>
<h4 class="product-title">Virena Smoothing Starter Set</h4>
<div class="product-rating product-details-variation-3">
<div class="product-rating-inner">
<ul class="rating">
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star active"></i>
</li>
<li>
<i class="ic ic-star in-active"></i>
</li>
</ul>
<div class="rating-text">
<span class="rating-description">(260 reviews)</span>
</div>
</div>
</div>
</div>
<div class="product-description">
<p>Begin your wrinkle smoothing routine with this starter kit, featuring three skincare powerhouses in mini sizes for daily anti-aging hydration and sun protection. Ideal for trial or travel.</p>
</div>
<div class="product-price-wrapper">
<label>Price</label>
<div class="product-price">
<span>$32.00</span>
</div>
</div>
<form class="product-details-form-add-to-cart">
<div class="product-details-add-to-cart">
<label>QTY</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="product-details-buttons">
<button class="btn btn-brand-primary">Add to bag</button>
</div>
</form>
<div class="alert alert-special-offer" role="alert">
<i class="ic ic-seal-check"></i>
<div> Independence day Special offer. Get the best price now! </div>
</div>
<div class="product-more-informations" id="product-more-informations-accordion-parent">
<div class="product-details-more-information-tabs-container">
<ul class="nav nav-tabs" id="product-details-more-information-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="product-more-information-tab-1" data-bs-toggle="tab" data-bs-target="#product-more-information-tab-1-pane" type="button" role="tab" aria-controls="product-more-information-tab-1-pane" aria-selected="true">Description</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="product-more-information-tab-2" data-bs-toggle="tab" data-bs-target="#product-more-information-tab-2-pane" type="button" role="tab" aria-controls="product-more-information-tab-2-pane" aria-selected="false">How to use</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="product-more-information-tab-3" data-bs-toggle="tab" data-bs-target="#product-more-information-tab-3-pane" type="button" role="tab" aria-controls="product-more-information-tab-3-pane" aria-selected="false">Ingredient</button>
</li>
</ul>
</div>
<div class="product-more-informations-items tab-content" id="product-more-informations-tab-content">
<div class="tab-pane fade show active" id="product-more-information-tab-1-pane" role="tabpanel" aria-labelledby="product-more-information-tab-1" tabindex="1">
<p>Convenient mini sizes with high-level wrinkle-fighting power. This skincare starter kit includes travel-size Benefiance Wrinkle Smoothing Day Cream SPF 23 to deeply hydrate and protect.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tab-pane fade " id="product-more-information-tab-2-pane" role="tabpanel" aria-labelledby="product-more-information-tab-2" tabindex="2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Convenient mini sizes with high-level wrinkle-fighting power. This skincare starter kit includes travel-size Benefiance Wrinkle Smoothing Day Cream SPF 23 to deeply hydrate and protect.</p>
</div>
<div class="tab-pane fade " id="product-more-information-tab-3-pane" role="tabpanel" aria-labelledby="product-more-information-tab-3" tabindex="3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Convenient mini sizes with high-level wrinkle-fighting power. This skincare starter kit includes travel-size Benefiance Wrinkle Smoothing Day Cream SPF 23 to deeply hydrate and protect.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>