Base Elements
Template Elements
Template Elements
E-Commerce
Base Elements
Template Elements
Template Elements
E-Commerce
Gearing up something amazing for you…
Still waiting? Magic takes a moment! ✨
Unimart is a E-commerce Template. Worldwide electronics store since 1978.
Limited Item, checkout within 10m 00s
Subtotal (2 items)
$758.00
Shipping
$10.00
Total
$768.00
Add $248.00 More To Get Free Shipping
For orders over $9.90
For orders over $9.90
To change lookbook portion position, set an number value for the
attribute data-rbt-position-vertical="25" and
data-rbt-position-horigental="55".
Note: The value of both
vertical and horizontal attribute counted as percentage(%) based on it's
immediate parent which have position: relative;
Example:
<div class="rbt-lookbook-portion" data-rbt-position-vertical="35" data-rbt-position-horigental="75">
<!-- Content -->
...
</div>
To change lookbook card position, add a class from
.placed-top or .placed-right or
.placed-bottom or .placed-left with the class
.rbt-lookbook-dot-content. So that, the lookbook card will appear
that side based on the class you selected.
Example:
<!-- top position -->
<div class="rbt-lookbook-dot-content placed-top">
...
</div>
<!-- right position -->
<div class="rbt-lookbook-dot-content placed-right">
...
</div>
<!-- bottom position -->
<div class="rbt-lookbook-dot-content placed-bottom">
...
</div>
<!-- left position -->
<div class="rbt-lookbook-dot-content placed-left">
...
</div>
<div class="row row--0 mt_dec--24 align-items-center justify-content-center">
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 mt--24 text-xl-end text-center">
<div class="rbt-lookbook-section">
<div class="rbt-lookbook-banner rbt-lookbook-banner-one rbt-scroll-trigger zoom_in animation-order-1">
<img src="assets/images/lookbook-images/lookbook-image-01.webp" alt="Lookbook Image">
<a href="#" class="rbt-lookbook-dot rbt-lookbook-dot-one show-rbt-lookbook-dot" data-rbt-position-vertical="35" data-rbt-position-horigental="30" data-index="1"></a>
<a href="#" class="rbt-lookbook-dot rbt-lookbook-dot-two show-rbt-lookbook-dot" data-rbt-position-vertical="33" data-rbt-position-horigental="71" data-index="2"></a>
<a href="#" class="rbt-lookbook-dot rbt-lookbook-dot-three show-rbt-lookbook-dot" data-rbt-position-vertical="87" data-rbt-position-horigental="26" data-index="3"></a>
<a href="#" class="rbt-lookbook-dot rbt-lookbook-dot-four show-rbt-lookbook-dot" data-rbt-position-vertical="75" data-rbt-position-horigental="73" data-index="4"></a>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 mt--24">
<div class="rbt-lookbook-content">
<div class="rbt-component-section-title text-center p-0 border-0 mb--32 mb_sm--16">
<h2 class="rbt-title rbt-scroll-trigger fade_in animation-order-1">Lookbook <span class="rbt-bold--text">Special Denim</span></h2>
</div>
<!-- Start Card Swiper Area -->
<div class="swiper product-swiper-activation-three-lookbook rbt-arrow-between rbt-dot-bottom-center gutter-swiper-24 pb--40">
<div class="swiper-wrapper">
<!-- single slide -->
<div class="swiper-slide">
<div class="single-slide">
your card...
</div>
</div>
repeat slide...
</div>
<div class="rbt-swiper-arrow rbt-arrow-right">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-right"></i>
<i class="rbt-icon-top fa-regular fa-arrow-right"></i>
</div>
</div>
<div class="rbt-swiper-pagination rbt-swiper-pagination-var-one "></div>
</div>
<!-- End Card Swiper Area -->
</div>
</div>
</div>
<div class="row row--0 mt_dec--24 align-items-center justify-content-center">
<div class="col-lg-12 col-md-12 col-sm-12 col-12 mt--24 text-end">
<div class="rbt-lookbook-section rbt-lookbook-style--two p-0">
<div class="rbt-lookbook-banner rbt-lookbook-banner-two rbt-scroll-trigger zoom_in animation-order-3">
<img src="assets/images/lookbook-images/lookbook-image-lg-01.webp" alt="Lookbook Image">
<!-- single lookbook -->
<div class="rbt-lookbook-portion" data-rbt-position-vertical="10" data-rbt-position-horigental="25">
<button class="rbt-lookbook-dot"></button>
<div class="rbt-dot-lookbok-product-wrapper">
<button><i class="fas fa-times"></i></button>
<div class="rbt-lookbook-dot-content placed-bottom">
<div class="rbt-card rbt-product-card">
<div class="inner border-0">
<div class="rbt-card-img rbt-bg-color-white">
<a href="#"><img src="assets/images/lookbook-images/product-f-01.webp" alt="Card Image"></a>
<div class="rbt-product-badge rbt-product-badge-bg-green border-rounded rbt-badge-top-left--position">New</div>
<button class="rbt-wishlisted-btn rbt-round-btn bg-light-one rbt-top-right--position tooltips" type="button" data-tooltip="Add to wishlist" data-tooltip-position="left"><i class="fa-regular fa-heart"></i></button>
</div>
<div class="rbt-card-body">
<div class="rbt-color-select-area">
<a class="prd-link-text" href="#">+3 More Items</a>
</div>
<a href="#" class="rbt-card-subtitle rbt-card-catagories-text">Table</a>
<h6 class="rbt-card-title text-start"><a href="#">CH24 Wishbone Sofa</a></h6>
<div class="rbt-card-rating">
<ul class="rbt-rating-icon-list">
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
</ul>
<p class="rating-digit">(25)</p>
</div>
<div class="pricing-part">
<del class="price-text">$295.00</del>
<span class="price-text">$179.98</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- single lookbook -->
<div class="rbt-lookbook-portion" data-rbt-position-vertical="70" data-rbt-position-horigental="15">
<button class="rbt-lookbook-dot"></button>
<div class="rbt-dot-lookbok-product-wrapper">
<button><i class="fas fa-times"></i></button>
<div class="rbt-lookbook-dot-content placed-top">
<div class="rbt-card rbt-product-card">
<div class="inner border-0">
<div class="rbt-card-img rbt-bg-color-white">
<a href="#"><img src="assets/images/lookbook-images/product-f-01.webp" alt="Card Image"></a>
<div class="rbt-product-badge rbt-product-badge-bg-green border-rounded rbt-badge-top-left--position">New</div>
<button class="rbt-wishlisted-btn rbt-round-btn bg-light-one rbt-top-right--position tooltips" type="button" data-tooltip="Add to wishlist" data-tooltip-position="left"><i class="fa-regular fa-heart"></i></button>
</div>
<div class="rbt-card-body">
<div class="rbt-color-select-area">
<a class="prd-link-text" href="#">+3 More Items</a>
</div>
<a href="#" class="rbt-card-subtitle rbt-card-catagories-text">Table</a>
<h6 class="rbt-card-title text-start"><a href="#">CH24 Wishbone Sofa</a></h6>
<div class="rbt-card-rating">
<ul class="rbt-rating-icon-list">
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
</ul>
<p class="rating-digit">(25)</p>
</div>
<div class="pricing-part">
<del class="price-text">$295.00</del>
<span class="price-text">$179.98</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
repeat...
</div>
</div>
</div>
</div>
<div class="row row--12 mt_dec--24">
<div class="col-lg-1-5 col-lg-4 col-md-6 col-sm-12 col-12 mt--24">
<div class="rbt-lookbook-section lookbook-style--three">
<div class="rbt-lookbook-banner hover-appeardot-style rbt-lookbook-banner-three">
<img class="rbt-scroll-trigger zoom_in animation-order-1" src="assets/images/lookbook-images/lookbook-image-02.webp" alt="Lookbook Image">
<!-- single lookbook -->
<div class="rbt-lookbook-portion" data-rbt-position-vertical="25" data-rbt-position-horigental="25">
<button class="rbt-lookbook-dot"></button>
<!-- lookbook card -->
<div class="rbt-dot-lookbok-product-wrapper">
<button><i class="fas fa-times"></i></button>
<div class="rbt-lookbook-dot-content placed-right">
<div class="rbt-card rbt-product-card">
<div class="inner border-0">
<div class="rbt-card-img rbt-bg-color-white">
<a href="product-single-default.html"><img src="assets/images/lookbook-images/product-f-01.webp" alt="Card Image"></a>
<div class="rbt-product-badge rbt-product-badge-bg-green border-rounded rbt-badge-top-left--position">New</div>
<button class="rbt-wishlisted-btn rbt-round-btn bg-light-one rbt-top-right--position tooltips" type="button" data-tooltip="Add to wishlist" data-tooltip-position="left"><i class="fa-regular fa-heart"></i></button>
</div>
<div class="rbt-card-body">
<a href="#" class="rbt-card-subtitle rbt-card-catagories-text">Table</a>
<h6 class="rbt-card-title text-start"><a href="product-single-default.html">CH24 Wishbone Sofa</a></h6>
<div class="rbt-card-rating">
<ul class="rbt-rating-icon-list">
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
</ul>
<p class="rating-digit">(25)</p>
</div>
<div class="pricing-part">
<del class="price-text">$295.00</del>
<span class="price-text">$179.98</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
repeat lookbook portion...
</div>
</div>
<div class="rbt-lookbook-section lookbook-style--three mt--24">
<div class="rbt-lookbook-banner hover-appeardot-style rbt-lookbook-banner-four">
<img class="rbt-scroll-trigger zoom_in animation-order-2" src="assets/images/lookbook-images/lookbook-image-03.webp" alt="Lookbook Image">
<!-- single lookbook -->
<div class="rbt-lookbook-portion" data-rbt-position-vertical="75" data-rbt-position-horigental="25">
<button class="rbt-lookbook-dot"></button>
<!-- lookbook card -->
lookbook card goes here...
</div>
repeat lookbook portion...
</div>
</div>
</div>
<div class="col-lg-1-5 col-lg-4 col-md-6 col-sm-12 col-12 mt--24">
<div class="rbt-lookbook-section lookbook-style--three">
<div class="rbt-lookbook-banner hover-appeardot-style rbt-lookbook-banner-five">
<img class="rbt-scroll-trigger zoom_in animation-order-3" src="assets/images/lookbook-images/lookbook-image-06.webp" alt="Lookbook Image">
<!-- single lookbook -->
<div class="rbt-lookbook-portion" data-rbt-position-vertical="75" data-rbt-position-horigental="25">
<button class="rbt-lookbook-dot"></button>
<!-- lookbook card -->
lookbook card goes here...
</div>
repeat lookbook portion...
</div>
</div>
<div class="rbt-lookbook-box-content box-content-bg-green mt--24 rbt-scroll-trigger fade_in animation-order-3">
<h3 class="title">Steel Package</h3>
<p class="desc b2">Make yours celebrations even more special this years with beautiful items .</p>
<a class="rbt-btn rbt-btn-border rbt-square-btn rbt-btn-md" href="shop-by-brands.html">Shop Now</a>
</div>
</div>
<div class="col-lg-1-5 col-lg-4 col-md-6 col-sm-12 col-12 mt--24">
<div class="rbt-lookbook-section lookbook-style--three">
<div class="rbt-lookbook-banner hover-appeardot-style rbt-lookbook-banner-five">
<img class="rbt-scroll-trigger zoom_in animation-order-3" src="assets/images/lookbook-images/lookbook-image-05.webp" alt="Lookbook Image">
<!-- single lookbook -->
<div class="rbt-lookbook-portion" data-rbt-position-vertical="75" data-rbt-position-horigental="25">
<button class="rbt-lookbook-dot"></button>
<!-- lookbook card -->
lookbook card goes here...
</div>
repeat lookbook portion...
</div>
<div class="rbt-lookbook-banner hover-appeardot-style rbt-lookbook-banner-six mt--24">
<img class="rbt-scroll-trigger zoom_in animation-order-4" src="assets/images/lookbook-images/lookbook-image-06.webp" alt="Lookbook Image">
<!-- single lookbook -->
<div class="rbt-lookbook-portion" data-rbt-position-vertical="75" data-rbt-position-horigental="25">
<button class="rbt-lookbook-dot"></button>
<!-- lookbook card -->
lookbook card goes here...
</div>
repeat lookbook portion...
</div>
</div>
</div>
<div class="col-lg-1-5 col-lg-8 col-md-6 col-sm-12 col-12 mt--24">
<div class="rbt-lookbook-box-content box-content-bg-yellow rbt-scroll-trigger fade_in animation-order-4">
<h3 class="title">Festival Shop</h3>
<p class="desc b2">Enhance your festive moments season with gorgeous products from our store</p>
<a class="rbt-btn rbt-btn-border rbt-square-btn rbt-btn-md" href="shop-by-brands.html">Shop Now</a>
</div>
<div class="rbt-lookbook-section lookbook-style--three mt--24">
<div class="rbt-lookbook-banner hover-appeardot-style rbt-lookbook-banner-seven">
<img class="rbt-scroll-trigger zoom_in animation-order-5" src="assets/images/lookbook-images/lookbook-image-07.webp" alt="Lookbook Image">
<!-- single lookbook -->
<div class="rbt-lookbook-portion" data-rbt-position-vertical="75" data-rbt-position-horigental="25">
<button class="rbt-lookbook-dot"></button>
<!-- lookbook card -->
lookbook card goes here...
</div>
repeat lookbook portion...
</div>
</div>
</div>
<div class="col-lg-1-5 col-lg-4 col-md-6 col-sm-12 col-12 mt--24">
<div class="rbt-lookbook-section lookbook-style--three">
<div class="rbt-lookbook-banner hover-appeardot-style rbt-lookbook-banner-eight">
<img class="rbt-scroll-trigger zoom_in animation-order-6" src="assets/images/lookbook-images/lookbook-image-08.webp" alt="Lookbook Image">
<!-- single lookbook -->
<div class="rbt-lookbook-portion" data-rbt-position-vertical="75" data-rbt-position-horigental="25">
<button class="rbt-lookbook-dot"></button>
<!-- lookbook card -->
lookbook card goes here...
</div>
repeat lookbook portion...
</div>
</div>
<div class="rbt-lookbook-section lookbook-style--three mt--24">
<div class="rbt-lookbook-banner hover-appeardot-style rbt-lookbook-banner-nine">
<img class="rbt-scroll-trigger zoom_in animation-order-7" src="assets/images/lookbook-images/lookbook-image-09.webp" alt="Lookbook Image">
<!-- single lookbook -->
<div class="rbt-lookbook-portion" data-rbt-position-vertical="75" data-rbt-position-horigental="25">
<button class="rbt-lookbook-dot"></button>
<!-- lookbook card -->
lookbook card goes here...
</div>
repeat lookbook portion...
</div>
</div>
</div>
</div>
<div class="rbt-lookbook-section lookbook-listbanner-style lookbook-listbanner-style-one">
<div class="lookbook-left-portion">
<div class="rbt-lookbook-banner">
<img class="rbt-scroll-trigger zoom_in animation-order-1" src="assets/images/lookbook-images/lookbook-banner-02.webp" alt="Lookbook Image">
<!-- single lookbook portion -->
<div class="rbt-lookbook-portion" data-rbt-position-horigental="75" data-rbt-position-vertical="55">
<button class="rbt-lookbook-dot"></button>
<div class="rbt-dot-lookbok-product-wrapper">
<button><i class="fas fa-times"></i></button>
<div class="rbt-lookbook-dot-content placed-left lookbook-content-width--420">
<div class="rbt-card rbt-product-card card-list-styled">
<div class="inner border-0 d-flex p-0">
<div class="rbt-card-img rbt-bg-color-white">
<a href="product-single-default.html"><img src="assets/images/lookbook-images/product-list-01.webp" alt="Card Image"></a>
</div>
<div class="rbt-card-body">
<a href="#" class="rbt-card-subtitle rbt-card-catagories-text">Table</a>
<h6 class="rbt-card-title text-start"><a href="product-single-default.html">CH24 Wishbone Sofa</a></h6>
<div class="rbt-card-rating">
<ul class="rbt-rating-icon-list">
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
</ul>
<p class="rating-digit">(25)</p>
</div>
<div class="pricing-part">
<del class="price-text">$295.00</del>
<span class="price-text">$179.98</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
repeat lookbook portion...
</div>
</div>
<div class="lookbook-right-portion">
<div class="content-part text-center">
<h2 class="title">Get inspired or build your own art wall with tool</h2>
<a class="rbt-btn rbt-btn-md bg-white" href="#">Shop This Look</a>
</div>
</div>
</div>
<div class="rbt-lookbook-section lookbook-style--three">
<div class="rbt-lookbook-banner hover-appeardot-style rbt-lookbook-banner-five">
<img class="rbt-scroll-trigger zoom_in animation-order-1"
src="image-url..." alt="...">
<div class="rbt-lookbook-portion" data-rbt-position-vertical="75" data-rbt-position-horigental="25">
<button class="rbt-lookbook-dot"></button>
<div class="rbt-dot-lookbok-product-wrapper">
<button><i class="fas fa-times"></i></button>
<div class="rbt-lookbook-dot-content placed-top lookbook-content-width--420">
<div class="rbt-card rbt-product-card card-list-styled">
<div class="inner border-0 d-flex p-0">
<div class="rbt-card-img rbt-bg-color-white">
<a href="product-single-default.html"><img
src="assets/images/lookbook-images/product-list-02.webp"
alt="Card Image"></a>
</div>
<div class="rbt-card-body">
<a href="#" class="rbt-card-subtitle rbt-card-catagories-text">Table</a>
<h6 class="rbt-card-title text-start"><a href="product-single-default.html">CH24
Wishbone Sofa</a></h6>
<div class="rbt-card-rating">
<ul class="rbt-rating-icon-list">
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
</ul>
<p class="rating-digit">(25)</p>
</div>
<div class="pricing-part">
<del class="price-text">$295.00</del>
<span class="price-text">$179.98</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
repeat lookbook...
</div>
</div>
...