E commerce product showing
How do I make an e commerce product showing?
What is a e commerce product showing? How do you make a e commerce product showing? This script and codes were developed by Siful Islam on 30 January 2023, Monday.
E commerce product showing Previews
E commerce product showing - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>E commerce product showing </title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="tm-section single-product-details-area ptb-80 bg-white"> <div class="container"> <!-- Start single product details inner --> <div class="single-pro-details-inner"> <div class="row"> <div class="col-md-5 col-lg-5 col-sm-6 col-xs-12"> <div class="single-pro-best-view"> <div class="single-pro-small-view"> <div class="tab-content sin-pro-small-image"> <div role="tabpanel" id="sin-pro-1" class="tab-pane fade"> <a class="grouped_elements" rel="group1" href="http://nscreativestudio.com/tanzim/tanzim/images/single-product/small/3.jpg"> <img src="http://nscreativestudio.com/tanzim/tanzim/images/single-product/small/3.jpg" alt=""> </a> </div> <div role="tabpanel" id="sin-pro-2" class="tab-pane fade"> <a class="grouped_elements" rel="group1" href="http://nscreativestudio.com/tanzim/tanzim/images/single-product/small/3.jpg"> <img src="http://nscreativestudio.com/tanzim/tanzim/images/single-product/small/3.jpg" alt=""> </a> </div> <div role="tabpanel" id="sin-pro-3" class="tab-pane fade active in"> <a class="grouped_elements" rel="group1" href="http://nscreativestudio.com/tanzim/tanzim/images/single-product/small/3.jpg"> <img src="http://nscreativestudio.com/tanzim/tanzim/images/single-product/small/3.jpg" alt=""> </a> </div> <div role="tabpanel" id="sin-pro-4" class="tab-pane fade"> <a class="grouped_elements" rel="group1" href="http://nscreativestudio.com/tanzim/tanzim/images/single-product/small/3.jpg"> <img src="http://nscreativestudio.com/tanzim/tanzim/images/single-product/small/3.jpg" alt=""> </a> </div> </div> </div> <div class="single-product-thumbs"> <ul id="tablist" class="single-pro-thumbs-list" role="tablist"> <li role="presentation" class=""> <a href="#sin-pro-1" role="tab" data-toggle="tab" aria-expanded="false"> <img src="http://nscreativestudio.com/tanzim/tanzim/images/single-product/thumb/2.png" alt="product thumbs"> </a> </li> <li role="presentation" class=""> <a href="#sin-pro-2" role="tab" data-toggle="tab" aria-expanded="false"> <img src="http://nscreativestudio.com/tanzim/tanzim/images/single-product/thumb/2.png" alt="product thumbs"> </a> </li> <li role="presentation" class="active"> <a href="#sin-pro-3" role="tab" data-toggle="tab" aria-expanded="true"> <img src="http://nscreativestudio.com/tanzim/tanzim/images/single-product/thumb/2.png" alt="product thumbs"> </a> </li> <li role="presentation" class=""> <a href="#sin-pro-4" role="tab" data-toggle="tab" aria-expanded="false"> <img src="http://nscreativestudio.com/tanzim/tanzim/images/single-product/thumb/2.png" alt="product thumbs"> </a> </li> </ul> </div> </div> </div> <div class="col-md-7 col-lg-7 col-sm-6 col-xs-12"> <form action="#"> <!-- Start single product description --> <div class="single-product-description"> <h3 class="tm-single-product-title">Polo T-shirt</h3> <div class="ratting-box"> <ul> <li><span class="yes"><i class="fa fa-star"></i></span></li> <li><span class="yes"><i class="fa fa-star"></i></span></li> <li><span class="yes"><i class="fa fa-star"></i></span></li> <li><span class="yes"><i class="fa fa-star"></i></span></li> <li><span class="yes"><i class="fa fa-star"></i></span></li> </ul> (Based on 75 ratings) </div> <p class="product-details-paragraph">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> <div class="price-box"> <span class="price">$699.00</span> <span class="old-price">$745.00</span> </div> <div class="tm-size-color"> <div class="tm-size-color-single"> <label>Size</label> <select name="product-size"> <option value="1">XXL</option> <option value="2">XL</option> <option value="3">L</option> <option value="4">M</option> <option value="5">S</option> </select> </div> <div class="tm-size-color-single"> <label>Color</label> <select name="product-color"> <option value="1">White</option> <option value="2">BLack</option> <option value="3">Green</option> <option value="4">Yellow</option> <option value="5">Blue</option> <option value="6">Gray</option> </select> </div> </div> <div class="tm-size-color-single"> <h4>Quantity</h4> <div class="cart-quantity"> <div class="cart-plus-minus"> <input class="cart-plus-minus-box" type="text" name="qtybutton" value="2"> <div class="dec qtybutton">-</div><div class="inc qtybutton">+</div></div> </div> </div> <div class="product-action"> <a href="#" class="pro-btn add-to-cart">Add to Cart</a> <a href="#" class="pro-btn"><span class="lnr lnr-heart"></span></a> <a href="#" class="pro-btn"><span class="lnr lnr-link"></span></a> </div> <div class="tm-single-product-share"> <h4>Share</h4> <ul class="social-list"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-pinterest"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </div> <div class="tm-single-product-categories"> <h4>Categories</h4> <div class="categories-tags"> <a href="#">Shirt</a><span>,</span> <a href="#">T-Shirt</a><span>,</span> <a href="#">Dress</a><span>,</span> <a href="#">Men's product</a> </div> </div> </div> <!-- End single product description --> </form> </div> </div> </div> <!-- End single product details inner --> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
E commerce product showing - Script Codes CSS Codes
/********************************************************************* Template Name: Tanzim - eCommerce HTML Template Template URI: https://themeforest.net/user/ Description: This is html5 multipurpose e-connerce template Author: nilArtStudio Author URI: https://themeforest.net/user/nilArtStudio Version: 1.2\ Note: This is product css. ALl product related css declare here.
*********************************************************************/
/*Single product styles*/
.single-product{ margin-top:50px;
}
.product-thumb a { display: block; position: relative;
}
.product-thumb a img.back-img { left: 0; opacity: 0; position: absolute; top: 0; transition: all 0.3s ease 0s;
}
.pro-title h4 { font-size: 15px; font-weight: 500;
}
.pro-price-ratting { display: flex; justify-content: space-between;
}
.ratting-box ul { display: flex;
}
.ratting-box ul li + li { margin-left: 5px;
}
.pro-title { margin-bottom: 10px;
}
.price-box .price { color: #ff3333; font-size: 18px; font-weight: 700;
}
.ratting-box ul li span.yes i { color: #f3c258;
}
.ratting-box ul li i { font-size: 15px;
}
.product-action .pro-btn { border: 1px solid #e0e0e0; color: #666666; display: inline-block; font-size: 18px; height: 40px; line-height: 40px; padding: 0 11px; transition: all 0.3s ease 0s;
}
.pro-price-ratting { margin-bottom: 12px;
}
.product-action {
}
.product-info { margin-top: 50px; position: relative;
}
.product-info::before { background: #e0e0e0 none repeat scroll 0 0; content: ""; height: 1px; left: 0; position: absolute; top: -20px; width: 50px;
}
.product-action { display: flex; justify-content: flex-start;
}
.product-action a.pro-btn + a.pro-btn { margin-left: 10px;
}
.pro-btn.add-to-cart { color: #666666; font-size: 16px; font-weight: 400; line-height: 38px; padding: 0 15px; text-transform: uppercase;
}
.product-action a.pro-btn:hover { background: #000 none repeat scroll 0 0; border-color: #000; color: #fff;
}
.single-product:hover .product-thumb a img.back-img { opacity: 1;
}
.single-product:hover .product-info::before { background: #000 none repeat scroll 0 0;
}
/*Single product new*/
.single-product.new{ position: relative;
}
.single-product.new:before{ content:"New"; position: absolute; top:12px; left:12px; background: #FF4136; color: #fff; font-weight:700; text-transform: uppercase; line-height: 22px; height:22px; padding:0 12px; z-index: 1;
}
/*-------Banner styles----------*/
/*Small banner style*/
.small-size-banner { position: relative; overflow: hidden;
}
.small-size-banner:hover .small-banner-thumb img { transform: scale(1.1);
}
.small-banner-thumb img { transform: scale(1); transition: all 0.3s ease 0s;
}
.small-banner-thumb { position: relative;
}
.small-banner-thumb::before { background: rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)) no-repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1;
}
.small-banner-content { bottom: 25px; position: absolute; text-align: center; width: 100%; z-index:2;
}
.small-banner-content h2{ color: #fff; font-size: 30px; font-weight: 700; line-height: 40px; text-transform: uppercase; transition:all 0.3s ease 0s;
}
.small-banner-content p{ color: #fff; font-size: 15px; line-height: 40px; text-transform: uppercase; transition:all 0.3s ease 0s;
}
/*Large banner style*/
.large-size-banner { display: flex;
}
.large-size-banner div{ width: 50%;
}
.large-banner-content { padding: 30px; padding-right:0px;
}
.large-banner-content h4 { color: #717171; font-size: 15px; margin-top: 10px; text-transform: uppercase;
}
.large-banner-content h2 { color: #000; font-size: 30px; line-height: 40px; margin-top: 10px; text-transform: uppercase;
}
.large-banner-content > p { color: #727272; font-size: 15px; line-height: 26px; margin-top: 13px;
}
.large-banner-content .price-box { display: flex; margin-top: 5px;
}
.large-banner-content .price-box .price { color: #ff4136; font-size: 30px; font-weight: 700; line-height: 72px;
}
.large-banner-content .price-box .old-price { color: #727272; font-size: 15px; font-weight: 400; line-height: 72px; margin-left: 15px; margin-top: 3px; text-decoration: line-through;
}
.old-price{ text-decoration: line-through;
}
.large-banner-content a { margin-top: 21px;
}
.large-banner-thumb > img { padding: 30px 0 30px 30px;
}
/*Mens banner css*/ /*large size banner*/
.single-men-banner { background: #f1f1f1 none repeat scroll 0 0; padding: 30px;
}
.single-men-content h4 { color: #727272; font-size: 15px; letter-spacing: 2px; line-height: 40px; text-transform: uppercase;
}
.single-men-content h2 { color: #000; font-size: 30px; font-weight: 700; line-height: 40px; margin-bottom: 15px; text-transform: uppercase;
}
.single-men-content h2 span { color: #ff4136; font-size: 42px; line-height: 40px;
}
.single-men-content p { color: #727272; font-size: 15px; line-height: 26px; margin-bottom: 30px;
}
.single-men-content a { margin-bottom: 42px;
} /*Small banner*/
.medium .single-men-content h4{ margin-bottom:5px;
}
.medium .single-men-content h2 { font-size: 24px; line-height: 36px; margin-bottom:25px;
}
.medium .single-men-thumb { margin-top: 17px;
}
.small.single-men-banner{ position: relative;
}
.small.single-men-banner a:before{ position: absolute; height: 100%; width:100%; background:rgba(0,0,0,0.2); content:""; left: 0; top:0; opacity: 0; transition: all 0.3s ease 0s;
}
.small.single-men-banner:hover a:before{ opacity: 1;
}
/*Product action style 2*/
.product-action-2 ul { display: flex;
}
.product-action-2 li a span { color: #fff; font-size: 20px; line-height: 40px; padding: 0 9px; transition: all 0.3s ease-in-out 0s;
}
.product-action-2 li a { border: 1px solid #fff; border-radius: 100%; display: block; height: 40px; transition: all 0.3s ease-in-out 0s; width: 40px;
}
.product-action-2 ul li { padding: 0 5px;
}
.product-action-2 li a:hover { background: #ff4136 none repeat scroll 0 0; border: 1px solid #ff4136;
}
/*Phone & accessories css*/
.tm-pa-single { background: #f1f1f1 none repeat scroll 0 0; height: 360px; margin-top: 30px; overflow: hidden; width: 100%;
}
.tm-pa-single .tm-pa-thumb { padding: 30px; display: flex; align-items: center; justify-content: center; height:100%;
} /*accessories large product*/
.tm-pa-single.large { align-items: center; display: flex; justify-content: space-between;
}
.tm-pa-single.large .tm-pa-thumb{ width:468px;
}
.tm-pa-single.large .tm-pa-content { width: 282px;
}
.large .tm-pa-content > h4 { color: #727272; font-size: 15px; font-weight: 400; letter-spacing: 2px; line-height: 40px; margin-bottom: 10px; text-transform: uppercase;
}
.large .tm-pa-content > h2 { color: #000; font-size: 30px; line-height: 40px; margin-bottom: 10px;
}
.large .tm-pa-content .price-box span.price { color: #ff4136; font-size: 24px; font-weight: 700; line-height: 40px;
}
.large .tm-pa-content .price-box span.old-price { color: #727272; line-height: 40px; padding-left: 15px; text-decoration: line-through;
}
.large .tm-pa-content .ratting-box { align-items: center; display: flex; margin-bottom: 25px; margin-top: 7px;
}
.large .tm-pa-content .ratting-box > span { color: #727272; font-size: 15px; margin-left: 15px;
} /*accessories small product*/
.tm-pa-single.small { position: relative;
}
.tm-pa-single.small:hover > .tm-pa-content{ height: calc(100% - 40px); width: calc(100% - 40px); visibility: visible; left: 20px; top: 20px; opacity: 1;
}
.tm-pa-single.small .tm-pa-content { align-items: center; background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; display: flex; flex-flow: column wrap; height: 100%; justify-content: flex-end; left: 0px; position: absolute; top: 0px; width: 100%; transition:all 0.3s ease-in-out 0s; visibility: hidden; opacity: 0;
}
.small .tm-pa-content .product-action-2 { margin-bottom: 25px; transition:all 0.3s ease-in-out 0.4s; opacity: 0;
}
.small .tm-pa-content > h2 { color: #fff; font-size: 24px; font-weight: 700; line-height: 36px; margin-bottom: 15px; transition:all 0.3s ease-in-out 0.2s; opacity:0;
}
.small .tm-pa-content > h4 a { color: #fff; font-size: 18px; font-weight: 700; line-height: 36px; transition: all 0.3s ease-in-out 0s;
}
.small .tm-pa-content > h4 { margin-bottom: 10px; transition:all 0.3s ease-in-out 0s; opacity: 0;
}
.small .tm-pa-content > h4 a:hover { color: #ff4136;
}
.tm-pa-single.small:hover > .tm-pa-content .product-action-2{ margin-bottom: 30px; opacity: 1;
}
.tm-pa-single.small:hover > .tm-pa-content > h2{ margin-bottom: 20px; opacity: 1;
}
.tm-pa-single.small:hover > .tm-pa-content > h4{ margin-bottom: 15px; opacity: 1;
}
/*Mens product 2 styles*/
.mens-product-2-wrap { display: flex;
}
.tm-pa-content-layout-2 { padding-right: 5px; width: 71%;
}
.sidebar-brand-logos { padding-left: 5px; width: 29%; padding-top: 10px;
}
.tm-pa-content-row{ margin-left: -5px; margin-right: -5px;
}
.tm-pa-single-wrap { float: left; width: 33.33%; padding: 0 5px;
}
.tm-pa-single-wrap.large-pro { width: 66.66%;
}
.mens-product-2-wrap .tm-pa-single{ margin-top: 10px;
}
.mens-product-2-wrap .tm-pa-single.large .tm-pa-thumb { width: 250px; padding: 0;
}
.mens-product-2-wrap .tm-pa-single.large .tm-pa-thumb img { text-align: center;
}
.mens-product-2-wrap .tm-pa-single { height: 300px;
}
.mens-product-2-wrap .tm-pa-thumb { padding: 0;
}
/*Single product page style*/
/*.single-pro-details-inner { display: flex;
}
*/
/*Single product style 2*/
.single-pro-details-inner.style-2 .single-product-description { padding-left: 0; padding-right:30px; width: 50%;
}
.single-pro-details-inner.style-2 .zoom-wrapper { width: 50%;
}
.single-pro-details-inner.style-2 .single-product-details-view { display: flex;
}
.single-pro-details-inner.style-2 .single-product-small-thumbs { display: flex; flex-wrap: wrap; justify-content: right; margin-top: 0; width: 120px;
}
.single-pro-details-inner.style-2 .single-product-small-thumbs a { margin-left: 10px; display: inline-block;
}
.single-pro-details-inner.style-2 .single-product-small-thumbs a + a{ margin-top:8px;
}
/*Single product thumbs*/
.single-product-small-thumbs { margin-top: 20px;
}
.single-product-small-thumbs a + a { margin-left: 12px;
}
.single-product-small-thumbs a{ border: 1px solid transparent; transition:all 0.3s ease-in-out 0s; display: inline-block;
}
.single-product-small-thumbs a.elevatezoom-gallery.active{ border: 1px solid #000;
}
/*Single pfoduct reverse style*/
.style-2 .single-pro-details-m-inner { display: flex;
}
.style-2 .single-pro-best-view { display: inline-flex; height: 100%; margin-left: 30px; width: 50%;
}
.style-2 .single-pro-thumbs-list { flex-direction: column; justify-content: space-between; margin-top: 0;
}
.style-2 .single-pro-details-m-inner > form { width: 50%;
}
.style-2 .single-product-thumbs { display: flex; justify-content: right; margin-left: 10px;
}
/*Single product description*/
h3.tm-single-product-title { color: #000; font-size: 24px; font-weight: 700; line-height: 72px; margin-top:-25px;
}
.single-product-description .ratting-box { display: inline-flex;
}
.single-product-description .ratting-box > ul { margin-right: 20px;
}
.product-details-paragraph { color: #727272; font-size: 15px; margin-top: 15px;
}
.single-product-description .price-box span.price { font-size: 24px;
}
.single-product-description .price-box { margin-top: 30px;
}
.tm-size-color-single { display: flex; margin-top: 30px;
}
.tm-size-color-single label,
.tm-size-color-single h4 { color: #000; font-size: 15px; font-weight: 500; line-height: 40px; width: 85px;
}
.tm-size-color-single select { -moz-appearance: none; background:url("../../images/icons/down-array.png") no-repeat scroll right center; width: 300px;
}
.tm-size-color-single select option{ padding:5px 15px;
}
.single-product-description .product-action { margin-top: 30px;
}
.tm-single-product-share { display: flex; margin-top: 30px;
}
.tm-single-product-share h4,
.tm-single-product-categories h4 { font-size: 15px; font-weight: 500; line-height: 30px; color: #000;
}
.tm-single-product-share .social-list { display: flex; margin-left: 30px;
}
.tm-single-product-share .social-list > li { padding: 0 5px;
}
.tm-single-product-share .social-list > li > a { border: 1px solid #e1e1e1; border-radius: 100%; color: #727272; display: inline-block; font-size: 14px; height: 30px; line-height: 30px; text-align: center; transition: all 0.3s ease 0s; width: 30px;
}
.tm-single-product-share .social-list > li > a:hover { border: 1px solid #000; color: #000;
}
.single-product-description .tm-single-product-categories { display: flex; margin-top:25px;
}
.single-product-description .categories-tags { line-height: 30px; margin-left: 20px;
}
.single-product-description .categories-tags > a { color: #727272; font-style: italic; transition: all 0.3s ease 0s;
}
.single-product-description .categories-tags > a:hover { color: #000;
}
/*Single product description 2*/
.single-product-description.style-2 .subscribe-btn { display: inline-block; height: 40px; line-height: 40px;
}
.single-product-description.style-2 .purchase-amazon-box { margin-top: 40px;
}
.tm-single-product-available h5 { color: #000; font-size: 15px; font-weight: 500;
}
.tm-single-product-available { margin-bottom: 40px; margin-top: 30px;
}
.tm-single-product-available h5 span { color: #46d054; font-weight: 400; padding-left: 10px;
}
.single-product-description.style-2 .product-details-paragraph { border-bottom: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; margin-top: 0; padding: 35px 0;
}
/*Single product tab description*/
.sin-pro-description-inner p,
.sin-pro-description-inner ul{ margin-top: 40px;
}
.sin-pro-description-inner ul { list-style: disc; margin-left: 50px;
}
/*Single product review area*/
.single-pro-reviews { border: 1px solid #e0e0e0; display: flex; margin-top: 40px; padding: 20px;
}
.reviewer-name { color: #000; font-size: 20px; font-weight: 700;
}
.reveiw-content { padding-left: 20px;
}
.review-content-top { display: flex; padding-bottom: 7px;
}
.review-date-count { font-style: italic; margin-left: 20px;
}
.review-date-count::before { content: "( ";
}
.review-date-count::after { content: " )";
}
.review-content-bottom { padding-top: 7px; position: relative;
}
.review-content-bottom::before { background: #727272 none repeat scroll 0 0; content: ""; height: 1px; left: 0; position: absolute; top: 0; width: 100px;
}
.single-pro-review-bottom { border: 1px solid #e0e0e0; margin-top: 40px; padding: 20px;
}
.single-review-input { margin-top: 20px;
}
.single-pro-review-bottom .new-review { color: #000; font-weight: 700; text-transform: uppercase;
}
/*Sigle product review tags*/
.single-pro-review-tags { margin-left: -20px;
}
.single-pro-review-tags .taglist { margin-top: 20px;
}
.single-pro-review-tags .taglist li a { background: #E6E6E6 none repeat scroll 0 0; display: inline-block; padding: 5px 15px; transition: all 0.3s ease 0s;
}
.single-pro-review-tags .taglist li a:hover { color: #727272;
}
.single-pro-review-tags .taglist > li { float: left; margin-left: 20px; margin-top: 20px;
}
/*Best selling product css*/
.single-product-layout-b { position: relative; margin-top:40px;
}
.single-pro-lay-b-content { position: absolute; text-align: center; width: 100%;
}
.best-selling-pro-price { background: #ff4136 none repeat scroll 0 0; color: #fff; font-weight: 700; position: absolute; right: 0; top: 30px;
}
.large .single-pro-lay-b-content h4 { color: #000; font-size: 20px; font-weight: 500;
}
.large .single-pro-lay-b-content { bottom: 0; padding: 50px 0;
}
.single-pro-lay-b-content h4 { color: #000; font-size: 15px; font-weight: 500;
}
.single-pro-lay-b-content { bottom: 0; padding: 30px 0;
}
.single-pro-lay-b-content::before { background: #a8a8a8 none repeat scroll 0 0; content: ""; height: 1px; left: 50%; position: absolute; top: 0; transform: translateX(-50%); width: 50px;
}
.large .best-selling-pro-price { font-size: 18px; padding: 12px 40px;
}
.best-selling-pro-price { font-size: 15px; padding: 8px 25px;
}
.single-product-layout-b a{ display: block; position: relative;
}
.single-product-layout-b a:before{ position:absolute; transition: all 0.3s ease 0s; content: ""; height:100%; width: 100%; left: 0; top:0; background: rgba(0,0,0,0.2); opacity: 0;
}
.single-product-layout-b a:hover:before{ opacity: 1;
}
.best-selling-pro-group .single-product-layout-b + .single-product-layout-b{ margin-top: 30px;
}
.single-product-layout-b .product-info{ margin-top:15px;
}
.single-product-layout-b .product-info:before{ display: none;
}
.single-product-layout-b .product-info .price-box{ background: #FF4136; padding:7px 25px;
}
.single-product-layout-b .product-info .price-box span{ color: #fff;
}
.single-product-layout-b .product-info .pro-price-ratting{ justify-content: flex-start;
}
.single-product-layout-b .product-info .pro-price-ratting .ratting-box ul{ padding: 7px 20px;
}
.all-recent-products .single-product{ margin-top: 30px;
}
/*Single product list style (full width list) */
.single-product.full-width-list { display: flex;
}
.full-width-list .product-info { margin-left: 30px; margin-top: 0px; display: flex; flex-direction: column; justify-content: space-between;
}
.full-width-list .product-info:before{ top:0px;
}
.full-width-list .pro-price-ratting { flex-direction: column;
}
.full-width-list .product-thumb { width: 46%;
}
.full-width-list .ratting-box { color: #727272; display: flex;
}
.full-width-list .ratting-box > ul { padding-right: 20px;
}
.full-width-list .price-box { margin-top: 10px;
}
.full-width-list .pro-title h4 { font-weight: 700; padding-top:20px;
}
.full-width-list .tm-single-product-available { margin-bottom: 5px; margin-top: 0px;
}
.full-width-list .product-action { margin-top: 50px;
}
/*Category page trend product*/
.cp-trend-single { display: flex; margin-top: 20px;
}
.cp-trend-single > a{ display: inline-block;
}
.cp-trend-single > a img{ transition: all 0.3s ease-in-out 0s;
}
.cp-trend-single:hover > a img{ opacity: 0.7;
}
.cp-trend-content > h6 > a { color: #000; font-size: 15px; font-weight: 500; line-height: 26px; transition: all 0.3s ease-in-out 0s;
}
.cp-trend-content { padding-left: 20px;
}
.cp-trend-content > h6 > a:hover { color: #727272;
}
ul.single-pro-thumbs-list { display: flex; justify-content: space-between; margin-top: 20px;
}
ul.single-pro-thumbs-list li a{ display: block; border:1px solid transparent;
}
ul.single-pro-thumbs-list li.active > a{ border:1px solid #000;
}
img { max-width: 100%;
}E commerce product showing - Script Codes JS Codes
/********************************************************************* Template Name: Tanzim - eCommerce HTML Template Template URI: https://themeforest.net/user/ Description: This is html5 multipurpose e-connerce template Author: nilArtStudio Author URI: https://themeforest.net/user/nilArtStudio Version: 1.2 Note: This is mian js. Declare your javascript code and pkugin activation code here.
*********************************************************************/
/*================================================
[ Table of contents ]
================================================ 01. Selectpicker 02. Count Down 03. Owl active 03.1 Product slider owl active 03.2 Main slider 1 owl active 03.3 Main slider 2 owl active 03.4 Main slider 3 owl active 03.5 Brand logo owl active 04. Tab active 05. Meanmenu active 06. Wow js active 07. Scroll up active 08. Fancybox active 09. Cart-plus-minus-button 10. Price slider active 11. Custom query 11.1 Menu slice active 11.2 Shopping cart 11.3 Account box 11.4 Account box top 11.5 Search box 11.6 Category menu 11.7 Account action 2 11.8 Shopping cart 2 11.9 Search box 2 11.10 Category menu 2
======================================
[ End table content ]
======================================*/
(function($) { 'use strict'; /* 01. Selectpicker -------------------------*/ $('.selectpicker').selectpicker({ multiple: true }); /* 02. Count Down ---------------------------*/ $('#offer-time').countdown('2017/03/15', function(event) { var totalHours = event.offset.totalDays * 24 + event.offset.hours; $(this).html(event.strftime(totalHours + ' : %M : %S')); }); /* 03. Owl active ---------------------------*/ // 03.1 Product slider owl active $('.owl-carousel.featured-products').owlCarousel({ autoplay: false, loop:true, items : 4, nav: true, dots: false, lazyLoad: true, navText: ['<span class="lnr lnr-chevron-left"></span>','<span class="lnr lnr-chevron-right"></span>'], responsive : { 0 : { items:1, }, 600 : { items:2, }, 768 : { items:3, }, 992 : { items:4, } } }); // 03.2 Main slider 1 owl active $('.slider-style-1.owl-carousel').owlCarousel({ autoplay: false, loop:true, items : 1, nav: false, navText: ['<span class="lnr lnr-chevron-left"></span>','<span class="lnr lnr-chevron-right"></span>'], dots: true, lazyLoad: true, center: true }); // 03.3 Main slider 2 owl active $('.slider-style-2-active.owl-carousel').owlCarousel({ autoplay: false, loop:true, items : 1, dots: true, nav:false, lazyLoad: true, center: true }); //03.4 Main slider 3 owl active $('.slider-area.slider-style-3').owlCarousel({ autoplay: false, loop:true, items : 1, dots: false, navText: ['<span class="lnr lnr-chevron-left"></span>','<span class="lnr lnr-chevron-right"></span>'], nav:true, lazyLoad: true, center: true }); // 03.5 Brand logo owl active $('.brand-logo-activator').owlCarousel({ autoplay: false, loop:true, items : 4, dots: false, nav:false, lazyLoad: true, responsive : { 0 : { items:1, }, 480 : { items:2, }, 768 : { items:3, }, 992 : { items:4, } } }); /* 04. Tab active ---------------------------*/ $('#tablist li a').on('click', function (e) { e.preventDefault() $(this).tab('show') }); /* 05. Meanmenu active ---------------------------*/ $('.mobile-menu-area nav').meanmenu({ meanScreenWidth: '991', meanMenuClose: 'X', meanMenuContainer: '.mobile-menu-area', }); /* 06. Wow js active-------------------------- */ new WOW().init(); /* 07. Scroll up active ---------------------*/ $.scrollUp({ scrollText: '<i class="fa fa-angle-up"></i>', easingType: 'linear', scrollSpeed: 900, animation: 'fade' }); /* 08. Fancybox active ---------------------*/ $('.grouped_elements').fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, 'speedOut' : 200 }); /*09. Cart-plus-minus-button -------------*/ $('.cart-plus-minus').append('<div class="dec qtybutton">-</i></div><div class="inc qtybutton">+</div>'); $('.qtybutton').on('click', function () { var $button = $(this); var oldValue = $button.parent().find('input').val(); if ($button.text() == "+") { var newVal = parseFloat(oldValue) + 1; } else { // Don't allow decrementing below zero if (oldValue > 1) { var newVal = parseFloat(oldValue) - 1; } else { newVal = 1; } } $button.parent().find('input').val(newVal); }); /* 10. Price slider active ----------------------*/ $( '#slider-range' ).slider({ range: true, min: 0, max: 1000, values: [ 275, 645 ], slide: function( event, ui ) { $( '#amount' ).val( '$' + ui.values[ 0 ] + ' - $' + ui.values[ 1 ] ); } }); $( '#amount' ).val( '$' + $( '#slider-range' ).slider( 'values', 0 ) + ' - $' + $( '#slider-range' ).slider( 'values', 1 ) ); /* 11. Custom query ----------------------*/ // 11.1 Menu slice active $('.main-menu > li').slice(-2).addClass('last-elements'); // 11.2 Shopping cart $('.wish-cart .shopping').on('mouseover', function(e){ e.preventDefault(); $('.shopping-cart-list').addClass('shopping-cart-show'); }); $('.wish-cart .shopping').on('mouseout', function(e){ e.preventDefault(); $('.shopping-cart-list').removeClass('shopping-cart-show'); }); $('.shopping-cart-list').on('mouseover', function(e){ e.preventDefault(); $('.shopping-cart-list').addClass('shopping-cart-show'); }); $('.shopping-cart-list').on('mouseout', function(e){ e.preventDefault(); $('.shopping-cart-list').removeClass('shopping-cart-show'); }); // 11.3 Account box $('.account-action a').on('click', function(e){ e.preventDefault(); $(this).parent().parent().find('.account-form').slideToggle(400).css('display','block'); }); // 11.4 Account box top $('.account-action.account-action-top a').on('click', function(e){ e.preventDefault(); $(this).parent().find('.account-form').slideToggle(400).css('display','block'); }); // 11.5 Search box $('.wish-cart .search').on('mouseover', function(e){ e.preventDefault(); $('.search-form-2-inner').addClass('search-box-show'); }); $('.wish-cart .search').on('mouseout', function(e){ e.preventDefault(); $('.search-form-2-inner').removeClass('search-box-show'); }); $('.search-form-2-inner').on('mouseover', function(e){ e.preventDefault(); $('.search-form-2-inner').addClass('search-box-show'); }); $('.search-form-2-inner').on('mouseout', function(e){ e.preventDefault(); $('.search-form-2-inner').removeClass('search-box-show'); }); // 11.6 Category menu $('.cat-menu-more a').on('click', function(e){ e.preventDefault(); $(this).find('span.lnr').toggleClass('lnr-circle-minus'); $(this).parent().find('.cat-menu-more-items').toggleClass('cat-menu-more-show'); }); // 11.7 Account action 2 $('.user-action-button').on('click', function(e){ e.preventDefault(); $(this).parent().find('.account-form').slideToggle(400).css('display', 'block'); }); // 11.8 Shopping cart action 2 $('.shopping-action-button').on('mouseover', function(e){ e.preventDefault(); $(this).parent().find('.shopping-cart-list').addClass('shopping-cart-show'); }); $('.shopping-action-button').on('mouseout', function(e){ e.preventDefault(); $(this).parent().find('.shopping-cart-list').removeClass('shopping-cart-show'); }); // 11.9 Search form 2 $('.search-action-button').on('mouseover', function(e){ e.preventDefault(); $(this).parent().find('.search-form-2-inner').addClass('search-box-show'); }); $('.search-action-button').on('mouseout', function(e){ e.preventDefault(); $(this).parent().find('.search-form-2-inner').removeClass('search-box-show'); }); // 11.10 Category menu 2 $('#category-menu-active > ul > li > a').on('click', function(e){ e.preventDefault(); $(this).parent().find('.fa').toggleClass('fa-minus'); $(this).parent().find('.cp-category-sub').slideToggle('slow'); });
})(jQuery);
| Developer | Siful Islam |
| Username | sifulislam |
| Uploaded | January 30, 2023 |
| Rating | 3 |
| Size | 8,836 Kb |
| Views | 2,024 |
Do you need developer help for E commerce product showing?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Siful Islam (sifulislam) Script Codes
| Name | Size |
| Material Contact Form | 3,657 Kb |
| Google map search only | 1,889 Kb |
| Owl Carousel - Navigation buttons on sides | 2,655 Kb |
| Reading Progress bar | 3,435 Kb |
| Animate a Border Below a Horizontal Nav Item from Left to Right | 1,561 Kb |
| Percentage preloader | 3,571 Kb |
| HTML5 Jquery audio player play and pause button | 6,211 Kb |
| Percentage preloader Jquery | 0 Kb |
| Vertical nav | 2,022 Kb |
| Bootstrap Gallery Style | 3,656 Kb |
Create amazing web content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Wikipedia Viewer | Codinger | 4,681 Kb |
| Display properties | Hamzaerbay | 1,886 Kb |
| NgEasyModal | Lorenzodianni | 4,159 Kb |
| PNotify Demo | Adittmar | 1,731 Kb |
| CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
| RRC wrapSwitch | Pshrmn | 2,922 Kb |
| Drag and Drop Quiz | Cgspicer | 3,837 Kb |
| Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
| Twitch | SarahDunlap | 2,937 Kb |
| Tic Tac Toe | Volv | 4,862 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!