flipkart like website template free download || ecommerce website template free - ecommerce website template free download || ecommerce website layout design
A Pen by Sunil Kumar on CodePen.
Created
January 29, 2022 18:10
-
-
Save chaairsoft/7bacee794a06f1bd633c47ac23c09137 to your computer and use it in GitHub Desktop.
ecommerce website template free download || ecommerce website layout design
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-2"> | |
| <div class="logo"> | |
| <a href="#"> E-commerce </a> | |
| </div> | |
| </div> | |
| <div class="col-md-7"> | |
| <div class="search-area input-group"> | |
| <input type="search" name="" placeholder="Search for products"> | |
| <button class="search-btn"> | |
| <i class="fa fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <div class="logoin-area"> | |
| <ul> | |
| <li><a href="#"> <i class="fa fa-user"></i> Login </a></li> | |
| <li><a href="#"> <i class="fa fa-sign-in"></i> Register </a></li> | |
| <li><a href="#"> <i class="fa fa-shopping-cart"></i> Cart </a></li> | |
| <li><span class="mob_menu"><i class="fa fa-bars"></i></span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="blank-header"></div> | |
| <section class="sec bg-white _category"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <div class="_category"> | |
| <ul> | |
| <li> | |
| <div class="_txt"> <img src="https://img.pngio.com/free-rewards-on-groceries-fetch-rewards-products-png-1045_837.png"> | |
| <a href="#"> <span> Top Offers </span> </a> <i class="fa fa-angle-down _handler"></i> | |
| <ul class="dropdown_menu"> | |
| <li> <a href="#"> Men's Top Wear </a> </li> | |
| <li> <a href="#"> Men's Bottom Wear </a> </li> | |
| <li> <a href="#"> Women Ethnic </a> </li> | |
| <li> <a href="#"> Women Western </a></li> | |
| <li> <a href="#"> Men Footwear </a> </li> | |
| <li> <a href="#"> Bags, Suitcases & Luggage </a></li> | |
| <li> <a href="#"> Kids </a></li> | |
| <li> <a href="#"> Essentials </a> </li> | |
| <li> <a href="#"> Winter </a> </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="_txt"> <img src="https://img.icons8.com/bubbles/2x/product.png"> | |
| <a href="#"> <span> Fashion </span> </a> <i class="fa fa-angle-down _handler"></i> | |
| <ul class="dropdown_menu"> | |
| <li> <a href="#"> Men's Top Wear </a> </li> | |
| <li> <a href="#"> Men's Bottom Wear </a> </li> | |
| <li> <a href="#"> Women Ethnic </a> </li> | |
| <li> <a href="#"> Women Western </a></li> | |
| <li> <a href="#"> Men Footwear </a> </li> | |
| <li> <a href="#"> Bags, Suitcases & Luggage </a></li> | |
| <li> <a href="#"> Kids </a></li> | |
| <li> <a href="#"> Essentials </a> </li> | |
| <li> <a href="#"> Winter </a> </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="_txt"> <img src="https://us.123rf.com/450wm/dzein/dzein1501/dzein150100029/35148397-set-of-colorful-empty-shopping-bags-isolated-vector-illustration.jpg"> | |
| <a href="#"> <span> Electronics </span> </a> <i class="fa fa-angle-down _handler"></i> | |
| <ul class="dropdown_menu"> | |
| <li> | |
| <a href="#"> Men's Top Wear </a> <i class="fa fa-angle-right _handler"></i> | |
| <ul class="dropdown_menu"> | |
| <li> <a href="#"> Men's Top Wear </a> </li> | |
| <li> <a href="#"> Men's Bottom Wear </a> </li> | |
| <li> <a href="#"> Women Ethnic </a> </li> | |
| <li> <a href="#"> Women Western </a></li> | |
| <li> <a href="#"> Men Footwear </a> </li> | |
| <li> <a href="#"> Bags, Suitcases & Luggage </a></li> | |
| <li> <a href="#"> Kids </a></li> | |
| <li> <a href="#"> Essentials </a> </li> | |
| <li> <a href="#"> Winter </a> </li> | |
| </ul> | |
| </li> | |
| <li> <a href="#"> Men's Bottom Wear </a> </li> | |
| <li> <a href="#"> Men Footwear </a> </li> | |
| <li> <a href="#"> Bags, Suitcases & Luggage </a></li> | |
| <li> <a href="#"> Kids </a></li> | |
| <li> <a href="#"> Essentials </a> <i class="fa fa-angle-right _handler"></i> | |
| <ul class="dropdown_menu"> | |
| <li> <a href="#"> Men's Top Wear </a> </li> | |
| <li> <a href="#"> Men's Bottom Wear </a> </li> | |
| <li> <a href="#"> Women Ethnic </a> </li> | |
| <li> <a href="#"> Women Western </a></li> | |
| <li> <a href="#"> Men Footwear </a> </li> | |
| <li> <a href="#"> Bags, Suitcases & Luggage </a></li> | |
| </ul> | |
| </li> | |
| <li> <a href="#"> Winter </a> </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="_txt"> <img src="https://www.clipartkey.com/mpngs/m/21-213178_transparent-gondola-clipart-vector-shopping-bag-png.png"> | |
| <a href="#"> <span> Top Offers </span> </a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="_txt"> <img src="https://img.pngio.com/free-rewards-on-groceries-fetch-rewards-products-png-1045_837.png"> | |
| <a href="#"> <span> Fashion </span> </a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="_txt"> <img src="https://img.pngio.com/free-rewards-on-groceries-fetch-rewards-products-png-1045_837.png"> | |
| <a href="#"> <span> Electronics </span> </a> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <main> | |
| <!-- Start Slider Area --> | |
| <div id="home" class="slider-area"> | |
| <div class="bend niceties preview-2"> | |
| <div id="ensign-nivoslider" class="slides"> | |
| <img src="https://www.grocerysumo.com/media/slider/home/fsfhjllz_vegetables-banner.png" alt="" title="#slider-direction-4" /> | |
| <img src="https://www.grocerysumo.com/media/slider/home/vh9oeys6_fruit-banner.png" alt="" title="#slider-direction-1" /> | |
| <img src="http://freshplazaexim.com/assets/images/banner1.jpg" alt="" title="#slider-direction-2" /> | |
| <img src="https://www.grocerysumo.com/media/slider/home/fsfhjllz_vegetables-banner.png" alt="" title="#slider-direction-3" /> | |
| </div> | |
| <!-- direction 1 --> | |
| </div> | |
| <section class="sec bg-white"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-12 text-center mb-4"> | |
| <a class="btn btn-primary" target="_blank" href="https://www.paypal.com/paypalme/skd1996"> Donate Now <i class="fa fa-dollar"></i></a> | |
| </div> | |
| <div class="col-sm-12"> | |
| <div class="title_bx"> | |
| <h3 class="title"> Best offer </h3> | |
| <a class="view_btn" href="#"> View All </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12 list-slider mt-2"> | |
| <div class="owl-carousel common_wd owl_slider owl-theme"> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/7.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/11.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#">Dazzling Green Blended Silk Saree </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Mens Designer Shirts - Brands mens cloths </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Mens Designer Shirts </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="sec bg-white"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12 list-slider mt-2"> | |
| <div class="owl-carousel common_wd owl_slider owl-theme"> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/7.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/11.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#">Dazzling Green Blended Silk Saree </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Mens Designer Shirts - Brands mens cloths </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Mens Designer Shirts </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="sec bg-white"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12 list-slider mt-2"> | |
| <div class="owl-carousel common_wd owl_slider owl-theme"> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/7.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/11.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#">Dazzling Green Blended Silk Saree </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Mens Designer Shirts - Brands mens cloths </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Mens Designer Shirts </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="sec bg-white"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12 list-slider mt-2"> | |
| <div class="owl-carousel common_wd owl_slider owl-theme"> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/7.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/11.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#">Dazzling Green Blended Silk Saree </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Mens Designer Shirts - Brands mens cloths </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="sq_box shadow"> | |
| <div class="pdis_img"> | |
| <span class="wishlist"> | |
| <a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a> | |
| </span> | |
| <a href="#"> | |
| <img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png"> | |
| <div class="q-bx"> | |
| <span> Quick View </span> | |
| </div> | |
| </a> | |
| </div> | |
| <h4 class="mb-1"> <a href="#"> Mens Designer Shirts </a> </h4> | |
| <div class="price-box mb-2"> | |
| <span class="price"> Price <i class="fa fa-inr"></i> 200 </span> | |
| <span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span> | |
| </div> | |
| <div class="btn-box text-center"> | |
| <a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="site-footer"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-6 col-md-3"> | |
| <h6> Johar Bro Associate </h6> | |
| <ul class="footer-links"> | |
| <li><a href="#"> Who We Are </a></li> | |
| <li><a href="#"> Join Our Team </a></li> | |
| <li><a href="#"> Terms & Conditions </a></li> | |
| <li><a href="#"> We Respect Your Privacy </a></li> | |
| <li><a href="#"> Fees & Payments </a></li> | |
| <li><a href="#"> Returns & Refunds Policy </a></li> | |
| <li><a href="#"> Promotions Terms & Conditions </a></li> | |
| </ul> | |
| </div> | |
| <div class="col-6 col-md-3"> | |
| <h6> Help </h6> | |
| <ul class="footer-links"> | |
| <li><a href="#"> Track Your Order </a></li> | |
| <li><a href="#"> Frequently Asked Questions </a></li> | |
| <li><a href="#"> Returns </a></li> | |
| <li><a href="#"> Cancellations </a></li> | |
| <li><a href="#"> Payments </a></li> | |
| <li><a href="#"> How Do I Redeem My Coupon? </a></li> | |
| </ul> | |
| </div> | |
| <div class="col-6 col-md-3"> | |
| <h6> Shop by </h6> | |
| <ul class="footer-links"> | |
| <li><a href="#"> Collections </a></li> | |
| <li><a href="#"> Men </a></li> | |
| <li><a href="#"> Women </a></li> | |
| <li><a href="#"> Kids </a></li> | |
| <li><a href="#"> Indie </a></li> | |
| <li><a href="#"> New Arrivals </a></li> | |
| </ul> | |
| </div> | |
| <div class="col-6 col-md-3"> | |
| <h6> Follow us </h6> | |
| <ul class="footer-links"> | |
| <li> <a href="#"> | |
| <i class="fa fa-facebook"></i> Facebook </a> | |
| </li> | |
| <li> <a href="#"> | |
| <i class="fa fa-instagram"></i> Instagram </a> | |
| </li> | |
| <li> <a href="#"> | |
| <i class="fa fa-twitter"></i> Twitter </a> | |
| </li> | |
| <li> <a href="#"> | |
| <i class="fa fa-pinterest"></i> Pinterest </a> | |
| </li> | |
| <li> <a href="#"> | |
| <i class="fa fa-whatsapp"></i> WhatsApp </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <div class="footer-bottom"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-8 pay-mathod"> | |
| <h4> Payment methods </h4> | |
| <ul class="ul-payment"> | |
| <li> | |
| <img src="https://www.smileyo.in/assets/img/payment.png"> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="col-md-4 ssl_img"> | |
| <h4> Secure systems </h4> | |
| <img src="https://www.bobtherailwaydog.com/yahoo_site_admin/assets/images/Paypal_Security20225400_std.33160711_std.jpg" width="80px"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * jQuery Nivo Slider v3.2 | |
| * http://nivo.dev7studios.com | |
| * | |
| * Copyright 2012, Dev7studios | |
| * Free to use and abuse under the MIT license. | |
| * http://www.opensource.org/licenses/mit-license.php | |
| */ | |
| (function($) { | |
| var NivoSlider = function(element, options){ | |
| // Defaults are below | |
| var settings = $.extend({}, $.fn.nivoSlider.defaults, options); | |
| // Useful variables. Play carefully. | |
| var vars = { | |
| currentSlide: 0, | |
| currentImage: '', | |
| totalSlides: 0, | |
| running: false, | |
| paused: false, | |
| stop: false, | |
| controlNavEl: false | |
| }; | |
| // Get this slider | |
| var slider = $(element); | |
| slider.data('nivo:vars', vars).addClass('nivoSlider'); | |
| // Find our slider children | |
| var kids = slider.children(); | |
| kids.each(function() { | |
| var child = $(this); | |
| var link = ''; | |
| if(!child.is('img')){ | |
| if(child.is('a')){ | |
| child.addClass('nivo-imageLink'); | |
| link = child; | |
| } | |
| child = child.find('img:first'); | |
| } | |
| // Get img width & height | |
| var childWidth = (childWidth === 0) ? child.attr('width') : child.width(), | |
| childHeight = (childHeight === 0) ? child.attr('height') : child.height(); | |
| if(link !== ''){ | |
| link.css('display','none'); | |
| } | |
| child.css('display','none'); | |
| vars.totalSlides++; | |
| }); | |
| // If randomStart | |
| if(settings.randomStart){ | |
| settings.startSlide = Math.floor(Math.random() * vars.totalSlides); | |
| } | |
| // Set startSlide | |
| if(settings.startSlide > 0){ | |
| if(settings.startSlide >= vars.totalSlides) { settings.startSlide = vars.totalSlides - 1; } | |
| vars.currentSlide = settings.startSlide; | |
| } | |
| // Get initial image | |
| if($(kids[vars.currentSlide]).is('img')){ | |
| vars.currentImage = $(kids[vars.currentSlide]); | |
| } else { | |
| vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); | |
| } | |
| // Show initial link | |
| if($(kids[vars.currentSlide]).is('a')){ | |
| $(kids[vars.currentSlide]).css('display','block'); | |
| } | |
| // Set first background | |
| var sliderImg = $('<img/>').addClass('nivo-main-image'); | |
| sliderImg.attr('src', vars.currentImage.attr('src')).show(); | |
| slider.append(sliderImg); | |
| // Detect Window Resize | |
| $(window).resize(function() { | |
| slider.children('img').width(slider.width()); | |
| sliderImg.attr('src', vars.currentImage.attr('src')); | |
| sliderImg.stop().height('auto'); | |
| $('.nivo-slice').remove(); | |
| $('.nivo-box').remove(); | |
| }); | |
| //Create caption | |
| slider.append($('<div class="nivo-caption"></div>')); | |
| // Process caption function | |
| var processCaption = function(settings){ | |
| var nivoCaption = $('.nivo-caption', slider); | |
| if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){ | |
| var title = vars.currentImage.attr('title'); | |
| if(title.substr(0,1) == '#') title = $(title).html(); | |
| if(nivoCaption.css('display') == 'block'){ | |
| setTimeout(function(){ | |
| nivoCaption.html(title); | |
| }, settings.animSpeed); | |
| } else { | |
| nivoCaption.html(title); | |
| nivoCaption.stop().fadeIn(settings.animSpeed); | |
| } | |
| } else { | |
| nivoCaption.stop().fadeOut(settings.animSpeed); | |
| } | |
| } | |
| //Process initial caption | |
| processCaption(settings); | |
| // In the words of Super Mario "let's a go!" | |
| var timer = 0; | |
| if(!settings.manualAdvance && kids.length > 1){ | |
| timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); | |
| } | |
| // Add Direction nav | |
| if(settings.directionNav){ | |
| slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+ settings.prevText +'</a><a class="nivo-nextNav">'+ settings.nextText +'</a></div>'); | |
| $(slider).on('click', 'a.nivo-prevNav', function(){ | |
| if(vars.running) { return false; } | |
| clearInterval(timer); | |
| timer = ''; | |
| vars.currentSlide -= 2; | |
| nivoRun(slider, kids, settings, 'prev'); | |
| }); | |
| $(slider).on('click', 'a.nivo-nextNav', function(){ | |
| if(vars.running) { return false; } | |
| clearInterval(timer); | |
| timer = ''; | |
| nivoRun(slider, kids, settings, 'next'); | |
| }); | |
| } | |
| // Add Control nav | |
| if(settings.controlNav){ | |
| vars.controlNavEl = $('<div class="nivo-controlNav"></div>'); | |
| slider.after(vars.controlNavEl); | |
| for(var i = 0; i < kids.length; i++){ | |
| if(settings.controlNavThumbs){ | |
| vars.controlNavEl.addClass('nivo-thumbs-enabled'); | |
| var child = kids.eq(i); | |
| if(!child.is('img')){ | |
| child = child.find('img:first'); | |
| } | |
| if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>'); | |
| } else { | |
| vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>'); | |
| } | |
| } | |
| //Set initial active link | |
| $('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active'); | |
| $('a', vars.controlNavEl).bind('click', function(){ | |
| if(vars.running) return false; | |
| if($(this).hasClass('active')) return false; | |
| clearInterval(timer); | |
| timer = ''; | |
| sliderImg.attr('src', vars.currentImage.attr('src')); | |
| vars.currentSlide = $(this).attr('rel') - 1; | |
| nivoRun(slider, kids, settings, 'control'); | |
| }); | |
| } | |
| //For pauseOnHover setting | |
| if(settings.pauseOnHover){ | |
| slider.hover(function(){ | |
| vars.paused = true; | |
| clearInterval(timer); | |
| timer = ''; | |
| }, function(){ | |
| vars.paused = false; | |
| // Restart the timer | |
| if(timer === '' && !settings.manualAdvance){ | |
| timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); | |
| } | |
| }); | |
| } | |
| // Event when Animation finishes | |
| slider.bind('nivo:animFinished', function(){ | |
| sliderImg.attr('src', vars.currentImage.attr('src')); | |
| vars.running = false; | |
| // Hide child links | |
| $(kids).each(function(){ | |
| if($(this).is('a')){ | |
| $(this).css('display','none'); | |
| } | |
| }); | |
| // Show current link | |
| if($(kids[vars.currentSlide]).is('a')){ | |
| $(kids[vars.currentSlide]).css('display','block'); | |
| } | |
| // Restart the timer | |
| if(timer === '' && !vars.paused && !settings.manualAdvance){ | |
| timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); | |
| } | |
| // Trigger the afterChange callback | |
| settings.afterChange.call(this); | |
| }); | |
| // Add slices for slice animations | |
| var createSlices = function(slider, settings, vars) { | |
| if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block'); | |
| $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show(); | |
| var sliceHeight = ($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height(); | |
| for(var i = 0; i < settings.slices; i++){ | |
| var sliceWidth = Math.round(slider.width()/settings.slices); | |
| if(i === settings.slices-1){ | |
| slider.append( | |
| $('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ | |
| left:(sliceWidth*i)+'px', | |
| width:(slider.width()-(sliceWidth*i))+'px', | |
| height:sliceHeight+'px', | |
| opacity:'0', | |
| overflow:'hidden' | |
| }) | |
| ); | |
| } else { | |
| slider.append( | |
| $('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ | |
| left:(sliceWidth*i)+'px', | |
| width:sliceWidth+'px', | |
| height:sliceHeight+'px', | |
| opacity:'0', | |
| overflow:'hidden' | |
| }) | |
| ); | |
| } | |
| } | |
| $('.nivo-slice', slider).height(sliceHeight); | |
| sliderImg.stop().animate({ | |
| height: $(vars.currentImage).height() | |
| }, settings.animSpeed); | |
| }; | |
| // Add boxes for box animations | |
| var createBoxes = function(slider, settings, vars){ | |
| if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block'); | |
| $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show(); | |
| var boxWidth = Math.round(slider.width()/settings.boxCols), | |
| boxHeight = Math.round($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height() / settings.boxRows); | |
| for(var rows = 0; rows < settings.boxRows; rows++){ | |
| for(var cols = 0; cols < settings.boxCols; cols++){ | |
| if(cols === settings.boxCols-1){ | |
| slider.append( | |
| $('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({ | |
| opacity:0, | |
| left:(boxWidth*cols)+'px', | |
| top:(boxHeight*rows)+'px', | |
| width:(slider.width()-(boxWidth*cols))+'px' | |
| }) | |
| ); | |
| $('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px'); | |
| } else { | |
| slider.append( | |
| $('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({ | |
| opacity:0, | |
| left:(boxWidth*cols)+'px', | |
| top:(boxHeight*rows)+'px', | |
| width:boxWidth+'px' | |
| }) | |
| ); | |
| $('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px'); | |
| } | |
| } | |
| } | |
| sliderImg.stop().animate({ | |
| height: $(vars.currentImage).height() | |
| }, settings.animSpeed); | |
| }; | |
| // Private run method | |
| var nivoRun = function(slider, kids, settings, nudge){ | |
| // Get our vars | |
| var vars = slider.data('nivo:vars'); | |
| // Trigger the lastSlide callback | |
| if(vars && (vars.currentSlide === vars.totalSlides - 1)){ | |
| settings.lastSlide.call(this); | |
| } | |
| // Stop | |
| if((!vars || vars.stop) && !nudge) { return false; } | |
| // Trigger the beforeChange callback | |
| settings.beforeChange.call(this); | |
| // Set current background before change | |
| if(!nudge){ | |
| sliderImg.attr('src', vars.currentImage.attr('src')); | |
| } else { | |
| if(nudge === 'prev'){ | |
| sliderImg.attr('src', vars.currentImage.attr('src')); | |
| } | |
| if(nudge === 'next'){ | |
| sliderImg.attr('src', vars.currentImage.attr('src')); | |
| } | |
| } | |
| vars.currentSlide++; | |
| // Trigger the slideshowEnd callback | |
| if(vars.currentSlide === vars.totalSlides){ | |
| vars.currentSlide = 0; | |
| settings.slideshowEnd.call(this); | |
| } | |
| if(vars.currentSlide < 0) { vars.currentSlide = (vars.totalSlides - 1); } | |
| // Set vars.currentImage | |
| if($(kids[vars.currentSlide]).is('img')){ | |
| vars.currentImage = $(kids[vars.currentSlide]); | |
| } else { | |
| vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); | |
| } | |
| // Set active links | |
| if(settings.controlNav){ | |
| $('a', vars.controlNavEl).removeClass('active'); | |
| $('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active'); | |
| } | |
| // Process caption | |
| processCaption(settings); | |
| // Remove any slices from last transition | |
| $('.nivo-slice', slider).remove(); | |
| // Remove any boxes from last transition | |
| $('.nivo-box', slider).remove(); | |
| var currentEffect = settings.effect, | |
| anims = ''; | |
| // Generate random effect | |
| if(settings.effect === 'random'){ | |
| anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade', | |
| 'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse'); | |
| currentEffect = anims[Math.floor(Math.random()*(anims.length + 1))]; | |
| if(currentEffect === undefined) { currentEffect = 'fade'; } | |
| } | |
| // Run random effect from specified set (eg: effect:'fold,fade') | |
| if(settings.effect.indexOf(',') !== -1){ | |
| anims = settings.effect.split(','); | |
| currentEffect = anims[Math.floor(Math.random()*(anims.length))]; | |
| if(currentEffect === undefined) { currentEffect = 'fade'; } | |
| } | |
| // Custom transition as defined by "data-transition" attribute | |
| if(vars.currentImage.attr('data-transition')){ | |
| currentEffect = vars.currentImage.attr('data-transition'); | |
| } | |
| // Run effects | |
| vars.running = true; | |
| var timeBuff = 0, | |
| i = 0, | |
| slices = '', | |
| firstSlice = '', | |
| totalBoxes = '', | |
| boxes = ''; | |
| if(currentEffect === 'sliceDown' || currentEffect === 'sliceDownRight' || currentEffect === 'sliceDownLeft'){ | |
| createSlices(slider, settings, vars); | |
| timeBuff = 0; | |
| i = 0; | |
| slices = $('.nivo-slice', slider); | |
| if(currentEffect === 'sliceDownLeft') { slices = $('.nivo-slice', slider)._reverse(); } | |
| slices.each(function(){ | |
| var slice = $(this); | |
| slice.css({ 'top': '0px' }); | |
| if(i === settings.slices-1){ | |
| setTimeout(function(){ | |
| slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); | |
| }, (100 + timeBuff)); | |
| } else { | |
| setTimeout(function(){ | |
| slice.animate({opacity:'1.0' }, settings.animSpeed); | |
| }, (100 + timeBuff)); | |
| } | |
| timeBuff += 50; | |
| i++; | |
| }); | |
| } else if(currentEffect === 'sliceUp' || currentEffect === 'sliceUpRight' || currentEffect === 'sliceUpLeft'){ | |
| createSlices(slider, settings, vars); | |
| timeBuff = 0; | |
| i = 0; | |
| slices = $('.nivo-slice', slider); | |
| if(currentEffect === 'sliceUpLeft') { slices = $('.nivo-slice', slider)._reverse(); } | |
| slices.each(function(){ | |
| var slice = $(this); | |
| slice.css({ 'bottom': '0px' }); | |
| if(i === settings.slices-1){ | |
| setTimeout(function(){ | |
| slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); | |
| }, (100 + timeBuff)); | |
| } else { | |
| setTimeout(function(){ | |
| slice.animate({opacity:'1.0' }, settings.animSpeed); | |
| }, (100 + timeBuff)); | |
| } | |
| timeBuff += 50; | |
| i++; | |
| }); | |
| } else if(currentEffect === 'sliceUpDown' || currentEffect === 'sliceUpDownRight' || currentEffect === 'sliceUpDownLeft'){ | |
| createSlices(slider, settings, vars); | |
| timeBuff = 0; | |
| i = 0; | |
| var v = 0; | |
| slices = $('.nivo-slice', slider); | |
| if(currentEffect === 'sliceUpDownLeft') { slices = $('.nivo-slice', slider)._reverse(); } | |
| slices.each(function(){ | |
| var slice = $(this); | |
| if(i === 0){ | |
| slice.css('top','0px'); | |
| i++; | |
| } else { | |
| slice.css('bottom','0px'); | |
| i = 0; | |
| } | |
| if(v === settings.slices-1){ | |
| setTimeout(function(){ | |
| slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); | |
| }, (100 + timeBuff)); | |
| } else { | |
| setTimeout(function(){ | |
| slice.animate({opacity:'1.0' }, settings.animSpeed); | |
| }, (100 + timeBuff)); | |
| } | |
| timeBuff += 50; | |
| v++; | |
| }); | |
| } else if(currentEffect === 'fold'){ | |
| createSlices(slider, settings, vars); | |
| timeBuff = 0; | |
| i = 0; | |
| $('.nivo-slice', slider).each(function(){ | |
| var slice = $(this); | |
| var origWidth = slice.width(); | |
| slice.css({ top:'0px', width:'0px' }); | |
| if(i === settings.slices-1){ | |
| setTimeout(function(){ | |
| slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); | |
| }, (100 + timeBuff)); | |
| } else { | |
| setTimeout(function(){ | |
| slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed); | |
| }, (100 + timeBuff)); | |
| } | |
| timeBuff += 50; | |
| i++; | |
| }); | |
| } else if(currentEffect === 'fade'){ | |
| createSlices(slider, settings, vars); | |
| firstSlice = $('.nivo-slice:first', slider); | |
| firstSlice.css({ | |
| 'width': slider.width() + 'px' | |
| }); | |
| firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); }); | |
| } else if(currentEffect === 'slideInRight'){ | |
| createSlices(slider, settings, vars); | |
| firstSlice = $('.nivo-slice:first', slider); | |
| firstSlice.css({ | |
| 'width': '0px', | |
| 'opacity': '1' | |
| }); | |
| firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); }); | |
| } else if(currentEffect === 'slideInLeft'){ | |
| createSlices(slider, settings, vars); | |
| firstSlice = $('.nivo-slice:first', slider); | |
| firstSlice.css({ | |
| 'width': '0px', | |
| 'opacity': '1', | |
| 'left': '', | |
| 'right': '0px' | |
| }); | |
| firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ | |
| // Reset positioning | |
| firstSlice.css({ | |
| 'left': '0px', | |
| 'right': '' | |
| }); | |
| slider.trigger('nivo:animFinished'); | |
| }); | |
| } else if(currentEffect === 'boxRandom'){ | |
| createBoxes(slider, settings, vars); | |
| totalBoxes = settings.boxCols * settings.boxRows; | |
| i = 0; | |
| timeBuff = 0; | |
| boxes = shuffle($('.nivo-box', slider)); | |
| boxes.each(function(){ | |
| var box = $(this); | |
| if(i === totalBoxes-1){ | |
| setTimeout(function(){ | |
| box.animate({ opacity:'1' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); | |
| }, (100 + timeBuff)); | |
| } else { | |
| setTimeout(function(){ | |
| box.animate({ opacity:'1' }, settings.animSpeed); | |
| }, (100 + timeBuff)); | |
| } | |
| timeBuff += 20; | |
| i++; | |
| }); | |
| } else if(currentEffect === 'boxRain' || currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){ | |
| createBoxes(slider, settings, vars); | |
| totalBoxes = settings.boxCols * settings.boxRows; | |
| i = 0; | |
| timeBuff = 0; | |
| // Split boxes into 2D array | |
| var rowIndex = 0; | |
| var colIndex = 0; | |
| var box2Darr = []; | |
| box2Darr[rowIndex] = []; | |
| boxes = $('.nivo-box', slider); | |
| if(currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrowReverse'){ | |
| boxes = $('.nivo-box', slider)._reverse(); | |
| } | |
| boxes.each(function(){ | |
| box2Darr[rowIndex][colIndex] = $(this); | |
| colIndex++; | |
| if(colIndex === settings.boxCols){ | |
| rowIndex++; | |
| colIndex = 0; | |
| box2Darr[rowIndex] = []; | |
| } | |
| }); | |
| // Run animation | |
| for(var cols = 0; cols < (settings.boxCols * 2); cols++){ | |
| var prevCol = cols; | |
| for(var rows = 0; rows < settings.boxRows; rows++){ | |
| if(prevCol >= 0 && prevCol < settings.boxCols){ | |
| /* Due to some weird JS bug with loop vars | |
| being used in setTimeout, this is wrapped | |
| with an anonymous function call */ | |
| (function(row, col, time, i, totalBoxes) { | |
| var box = $(box2Darr[row][col]); | |
| var w = box.width(); | |
| var h = box.height(); | |
| if(currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){ | |
| box.width(0).height(0); | |
| } | |
| if(i === totalBoxes-1){ | |
| setTimeout(function(){ | |
| box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3, '', function(){ slider.trigger('nivo:animFinished'); }); | |
| }, (100 + time)); | |
| } else { | |
| setTimeout(function(){ | |
| box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3); | |
| }, (100 + time)); | |
| } | |
| })(rows, prevCol, timeBuff, i, totalBoxes); | |
| i++; | |
| } | |
| prevCol--; | |
| } | |
| timeBuff += 100; | |
| } | |
| } | |
| }; | |
| // Shuffle an array | |
| var shuffle = function(arr){ | |
| for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i, 10), x = arr[--i], arr[i] = arr[j], arr[j] = x); | |
| return arr; | |
| }; | |
| // For debugging | |
| var trace = function(msg){ | |
| if(this.console && typeof console.log !== 'undefined') { console.log(msg); } | |
| }; | |
| // Start / Stop | |
| this.stop = function(){ | |
| if(!$(element).data('nivo:vars').stop){ | |
| $(element).data('nivo:vars').stop = true; | |
| trace('Stop Slider'); | |
| } | |
| }; | |
| this.start = function(){ | |
| if($(element).data('nivo:vars').stop){ | |
| $(element).data('nivo:vars').stop = false; | |
| trace('Start Slider'); | |
| } | |
| }; | |
| // Trigger the afterLoad callback | |
| settings.afterLoad.call(this); | |
| return this; | |
| }; | |
| $.fn.nivoSlider = function(options) { | |
| return this.each(function(key, value){ | |
| var element = $(this); | |
| // Return early if this element already has a plugin instance | |
| if (element.data('nivoslider')) { return element.data('nivoslider'); } | |
| // Pass options to plugin constructor | |
| var nivoslider = new NivoSlider(this, options); | |
| // Store plugin object in this element's data | |
| element.data('nivoslider', nivoslider); | |
| }); | |
| }; | |
| //Default settings | |
| $.fn.nivoSlider.defaults = { | |
| effect: 'random', | |
| slices: 15, | |
| boxCols: 8, | |
| boxRows: 4, | |
| animSpeed: 500, | |
| pauseTime: 3000, | |
| startSlide: 0, | |
| directionNav: true, | |
| controlNav: true, | |
| controlNavThumbs: false, | |
| pauseOnHover: true, | |
| manualAdvance: false, | |
| prevText: 'Prev', | |
| nextText: 'Next', | |
| randomStart: false, | |
| beforeChange: function(){}, | |
| afterChange: function(){}, | |
| slideshowEnd: function(){}, | |
| lastSlide: function(){}, | |
| afterLoad: function(){} | |
| }; | |
| $.fn._reverse = [].reverse; | |
| })(jQuery);/* | |
| * jQuery Nivo Slider v3.2 | |
| * http://nivo.dev7studios.com | |
| * | |
| * Copyright 2012, Dev7studios | |
| * Free to use and abuse under the MIT license. | |
| * http://www.opensource.org/licenses/mit-license.php | |
| */ | |
| (function($) { | |
| var NivoSlider = function(element, options){ | |
| // Defaults are below | |
| var settings = $.extend({}, $.fn.nivoSlider.defaults, options); | |
| // Useful variables. Play carefully. | |
| var vars = { | |
| currentSlide: 0, | |
| currentImage: '', | |
| totalSlides: 0, | |
| running: false, | |
| paused: false, | |
| stop: false, | |
| controlNavEl: false | |
| }; | |
| // Get this slider | |
| var slider = $(element); | |
| slider.data('nivo:vars', vars).addClass('nivoSlider'); | |
| // Find our slider children | |
| var kids = slider.children(); | |
| kids.each(function() { | |
| var child = $(this); | |
| var link = ''; | |
| if(!child.is('img')){ | |
| if(child.is('a')){ | |
| child.addClass('nivo-imageLink'); | |
| link = child; | |
| } | |
| child = child.find('img:first'); | |
| } | |
| // Get img width & height | |
| var childWidth = (childWidth === 0) ? child.attr('width') : child.width(), | |
| childHeight = (childHeight === 0) ? child.attr('height') : child.height(); | |
| if(link !== ''){ | |
| link.css('display','none'); | |
| } | |
| child.css('display','none'); | |
| vars.totalSlides++; | |
| }); | |
| // If randomStart | |
| if(settings.randomStart){ | |
| settings.startSlide = Math.floor(Math.random() * vars.totalSlides); | |
| } | |
| // Set startSlide | |
| if(settings.startSlide > 0){ | |
| if(settings.startSlide >= vars.totalSlides) { settings.startSlide = vars.totalSlides - 1; } | |
| vars.currentSlide = settings.startSlide; | |
| } | |
| // Get initial image | |
| if($(kids[vars.currentSlide]).is('img')){ | |
| vars.currentImage = $(kids[vars.currentSlide]); | |
| } else { | |
| vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); | |
| } | |
| // Show initial link | |
| if($(kids[vars.currentSlide]).is('a')){ | |
| $(kids[vars.currentSlide]).css('display','block'); | |
| } | |
| // Set first background | |
| var sliderImg = $('<img/>').addClass('nivo-main-image'); | |
| sliderImg.attr('src', vars.currentImage.attr('src')).show(); | |
| slider.append(sliderImg); | |
| // Detect Window Resize | |
| $(window).resize(function() { | |
| slider.children('img').width(slider.width()); | |
| sliderImg.attr('src', vars.currentImage.attr('src')); | |
| sliderImg.stop().height('auto'); | |
| $('.nivo-slice').remove(); | |
| $('.nivo-box').remove(); | |
| }); | |
| //Create caption | |
| slider.append($('<div class="nivo-caption"></div>')); | |
| // Process caption function | |
| var processCaption = function(settings){ | |
| var nivoCaption = $('.nivo-caption', slider); | |
| if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){ | |
| var title = vars.currentImage.attr('title'); | |
| if(title.substr(0,1) == '#') title = $(title).html(); | |
| if(nivoCaption.css('display') == 'block'){ | |
| setTimeout(function(){ | |
| nivoCaption.html(title); | |
| }, settings.animSpeed); | |
| } else { | |
| nivoCaption.html(title); | |
| nivoCaption.stop().fadeIn(settings.animSpeed); | |
| } | |
| } else { | |
| nivoCaption.stop().fadeOut(settings.animSpeed); | |
| } | |
| } | |
| //Process initial caption | |
| processCaption(settings); | |
| // In the words of Super Mario "let's a go!" | |
| var timer = 0; | |
| if(!settings.manualAdvance && kids.length > 1){ | |
| timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); | |
| } | |
| // Add Direction nav | |
| if(settings.directionNav){ | |
| slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+ settings.prevText +'</a><a class="nivo-nextNav">'+ settings.nextText +'</a></div>'); | |
| $(slider).on('click', 'a.nivo-prevNav', function(){ | |
| if(vars.running) { return false; } | |
| clearInterval(timer); | |
| timer = ''; | |
| vars.currentSlide -= 2; | |
| nivoRun(slider, kids, settings, 'prev'); | |
| }); | |
| $(slider).on('click', 'a.nivo-nextNav', function(){ | |
| if(vars.running) { return false; } | |
| clearInterval(timer); | |
| timer = ''; | |
| nivoRun(slider, kids, settings, 'next'); | |
| }); | |
| } | |
| // Add Control nav | |
| if(settings.controlNav){ | |
| vars.controlNavEl = $('<div class="nivo-controlNav"></div>'); | |
| slider.after(vars.controlNavEl); | |
| for(var i = 0; i < kids.length; i++){ | |
| if(settings.controlNavThumbs){ | |
| vars.controlNavEl.addClass('nivo-thumbs-enabled'); | |
| var child = kids.eq(i); | |
| if(!child.is('img')){ | |
| child = child.find('img:first'); | |
| } | |
| if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>'); | |
| } else { | |
| vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>'); | |
| } | |
| } | |
| //Set initial active link | |
| $('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active'); | |
| $('a', vars.controlNavEl).bind('click', function(){ | |
| if(vars.running) return false; | |
| if($(this).hasClass('active')) return false; | |
| clearInterval(timer); | |
| timer = ''; | |
| sliderImg.attr('src', vars.currentImage.attr('src')); | |
| vars.currentSlide = $(this).attr('rel') - 1; | |
| nivoRun(slider, kids, settings, 'control'); | |
| }); | |
| } | |
| //For pauseOnHover setting | |
| if(settings.pauseOnHover){ | |
| slider.hover(function(){ | |
| vars.paused = true; | |
| clearInterval(timer); | |
| timer = ''; | |
| }, function(){ | |
| vars.paused = false; | |
| // Restart the timer | |
| if(timer === '' && !settings.manualAdvance){ | |
| timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); | |
| } | |
| }); | |
| } | |
| // Event when Animation finishes | |
| slider.bind('nivo:animFinished', function(){ | |
| sliderImg.attr('src', vars.currentImage.attr('src')); | |
| vars.running = false; | |
| // Hide child links | |
| $(kids).each(function(){ | |
| if($(this).is('a')){ | |
| $(this).css('display','none'); | |
| } | |
| }); | |
| // Show current link | |
| if($(kids[vars.currentSlide]).is('a')){ | |
| $(kids[vars.currentSlide]).css('display','block'); | |
| } | |
| // Restart the timer | |
| if(timer === '' && !vars.paused && !settings.manualAdvance){ | |
| timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); | |
| } | |
| // Trigger the afterChange callback | |
| settings.afterChange.call(this); | |
| }); | |
| // Add slices for slice animations | |
| var createSlices = function(slider, settings, vars) { | |
| if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block'); | |
| $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show(); | |
| var sliceHeight = ($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height(); | |
| for(var i = 0; i < settings.slices; i++){ | |
| var sliceWidth = Math.round(slider.width()/settings.slices); | |
| if(i === settings.slices-1){ | |
| slider.append( | |
| $('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ | |
| left:(sliceWidth*i)+'px', | |
| width:(slider.width()-(sliceWidth*i))+'px', | |
| height:sliceHeight+'px', | |
| opacity:'0', | |
| overflow:'hidden' | |
| }) | |
| ); | |
| } else { | |
| slider.append( | |
| $('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ | |
| left:(sliceWidth*i)+'px', | |
| width:sliceWidth+'px', | |
| height:sliceHeight+'px', | |
| opacity:'0', | |
| overflow:'hidden' | |
| }) | |
| ); | |
| } | |
| } | |
| $('.nivo-slice', slider).height(sliceHeight); | |
| sliderImg.stop().animate({ | |
| height: $(vars.currentImage).height() | |
| }, settings.animSpeed); | |
| }; | |
| // Add boxes for box animations | |
| var createBoxes = function(slider, settings, vars){ | |
| if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block'); | |
| $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show(); | |
| var boxWidth = Math.round(slider.width()/settings.boxCols), | |
| boxHeight = Math.round($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height() / settings.boxRows); | |
| for(var rows = 0; rows < settings.boxRows; rows++){ | |
| for(var cols = 0; cols < settings.boxCols; cols++){ | |
| if(cols === settings.boxCols-1){ | |
| slider.append( | |
| $('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({ | |
| opacity:0, | |
| left:(boxWidth*cols)+'px', | |
| top:(boxHeight*rows)+'px', | |
| width:(slider.width()-(boxWidth*cols))+'px' | |
| }) | |
| ); | |
| $('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px'); | |
| } else { | |
| slider.append( | |
| $('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({ | |
| opacity:0, | |
| left:(boxWidth*cols)+'px', | |
| top:(boxHeight*rows)+'px', | |
| width:boxWidth+'px' | |
| }) | |
| ); | |
| $('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px'); | |
| } | |
| } | |
| } | |
| sliderImg.stop().animate({ | |
| height: $(vars.currentImage).height() | |
| }, settings.animSpeed); | |
| }; | |
| // Private run method | |
| var nivoRun = function(slider, kids, settings, nudge){ | |
| // Get our vars | |
| var vars = slider.data('nivo:vars'); | |
| // Trigger the lastSlide callback | |
| if(vars && (vars.currentSlide === vars.totalSlides - 1)){ | |
| settings.lastSlide.call(this); | |
| } | |
| // Stop | |
| if((!vars || vars.stop) && !nudge) { return false; } | |
| // Trigger the beforeChange callback | |
| settings.beforeChange.call(this); | |
| // Set current background before change | |
| if(!nudge){ | |
| sliderImg.attr('src', vars.currentImage.attr('src')); | |
| } else { | |
| if(nudge === 'prev'){ | |
| sliderImg.attr('src', vars.currentImage.attr('src')); | |
| } | |
| if(nudge === 'next'){ | |
| sliderImg.attr('src', vars.currentImage.attr('src')); | |
| } | |
| } | |
| vars.currentSlide++; | |
| // Trigger the slideshowEnd callback | |
| if(vars.currentSlide === vars.totalSlides){ | |
| vars.currentSlide = 0; | |
| settings.slideshowEnd.call(this); | |
| } | |
| if(vars.currentSlide < 0) { vars.currentSlide = (vars.totalSlides - 1); } | |
| // Set vars.currentImage | |
| if($(kids[vars.currentSlide]).is('img')){ | |
| vars.currentImage = $(kids[vars.currentSlide]); | |
| } else { | |
| vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); | |
| } | |
| // Set active links | |
| if(settings.controlNav){ | |
| $('a', vars.controlNavEl).removeClass('active'); | |
| $('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active'); | |
| } | |
| // Process caption | |
| processCaption(settings); | |
| // Remove any slices from last transition | |
| $('.nivo-slice', slider).remove(); | |
| // Remove any boxes from last transition | |
| $('.nivo-box', slider).remove(); | |
| var currentEffect = settings.effect, | |
| anims = ''; | |
| // Generate random effect | |
| if(settings.effect === 'random'){ | |
| anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade', | |
| 'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse'); | |
| currentEffect = anims[Math.floor(Math.random()*(anims.length + 1))]; | |
| if(currentEffect === undefined) { currentEffect = 'fade'; } | |
| } | |
| // Run random effect from specified set (eg: effect:'fold,fade') | |
| if(settings.effect.indexOf(',') !== -1){ | |
| anims = settings.effect.split(','); | |
| currentEffect = anims[Math.floor(Math.random()*(anims.length))]; | |
| if(currentEffect === undefined) { currentEffect = 'fade'; } | |
| } | |
| // Custom transition as defined by "data-transition" attribute | |
| if(vars.currentImage.attr('data-transition')){ | |
| currentEffect = vars.currentImage.attr('data-transition'); | |
| } | |
| // Run effects | |
| vars.running = true; | |
| var timeBuff = 0, | |
| i = 0, | |
| slices = '', | |
| firstSlice = '', | |
| totalBoxes = '', | |
| boxes = ''; | |
| if(currentEffect === 'sliceDown' || currentEffect === 'sliceDownRight' || currentEffect === 'sliceDownLeft'){ | |
| createSlices(slider, settings, vars); | |
| timeBuff = 0; | |
| i = 0; | |
| slices = $('.nivo-slice', slider); | |
| if(currentEffect === 'sliceDownLeft') { slices = $('.nivo-slice', slider)._reverse(); } | |
| slices.each(function(){ | |
| var slice = $(this); | |
| slice.css({ 'top': '0px' }); | |
| if(i === settings.slices-1){ | |
| setTimeout(function(){ | |
| slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); | |
| }, (100 + timeBuff)); | |
| } else { | |
| setTimeout(function(){ | |
| slice.animate({opacity:'1.0' }, settings.animSpeed); | |
| }, (100 + timeBuff)); | |
| } | |
| timeBuff += 50; | |
| i++; | |
| }); | |
| } else if(currentEffect === 'sliceUp' || currentEffect === 'sliceUpRight' || currentEffect === 'sliceUpLeft'){ | |
| createSlices(slider, settings, vars); | |
| timeBuff = 0; | |
| i = 0; | |
| slices = $('.nivo-slice', slider); | |
| if(currentEffect === 'sliceUpLeft') { slices = $('.nivo-slice', slider)._reverse(); } | |
| slices.each(function(){ | |
| var slice = $(this); | |
| slice.css({ 'bottom': '0px' }); | |
| if(i === settings.slices-1){ | |
| setTimeout(function(){ | |
| slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); | |
| }, (100 + timeBuff)); | |
| } else { | |
| setTimeout(function(){ | |
| slice.animate({opacity:'1.0' }, settings.animSpeed); | |
| }, (100 + timeBuff)); | |
| } | |
| timeBuff += 50; | |
| i++; | |
| }); | |
| } else if(currentEffect === 'sliceUpDown' || currentEffect === 'sliceUpDownRight' || currentEffect === 'sliceUpDownLeft'){ | |
| createSlices(slider, settings, vars); | |
| timeBuff = 0; | |
| i = 0; | |
| var v = 0; | |
| slices = $('.nivo-slice', slider); | |
| if(currentEffect === 'sliceUpDownLeft') { slices = $('.nivo-slice', slider)._reverse(); } | |
| slices.each(function(){ | |
| var slice = $(this); | |
| if(i === 0){ | |
| slice.css('top','0px'); | |
| i++; | |
| } else { | |
| slice.css('bottom','0px'); | |
| i = 0; | |
| } | |
| if(v === settings.slices-1){ | |
| setTimeout(function(){ | |
| slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); | |
| }, (100 + timeBuff)); | |
| } else { | |
| setTimeout(function(){ | |
| slice.animate({opacity:'1.0' }, settings.animSpeed); | |
| }, (100 + timeBuff)); | |
| } | |
| timeBuff += 50; | |
| v++; | |
| }); | |
| } else if(currentEffect === 'fold'){ | |
| createSlices(slider, settings, vars); | |
| timeBuff = 0; | |
| i = 0; | |
| $('.nivo-slice', slider).each(function(){ | |
| var slice = $(this); | |
| var origWidth = slice.width(); | |
| slice.css({ top:'0px', width:'0px' }); | |
| if(i === settings.slices-1){ | |
| setTimeout(function(){ | |
| slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); | |
| }, (100 + timeBuff)); | |
| } else { | |
| setTimeout(function(){ | |
| slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed); | |
| }, (100 + timeBuff)); | |
| } | |
| timeBuff += 50; | |
| i++; | |
| }); | |
| } else if(currentEffect === 'fade'){ | |
| createSlices(slider, settings, vars); | |
| firstSlice = $('.nivo-slice:first', slider); | |
| firstSlice.css({ | |
| 'width': slider.width() + 'px' | |
| }); | |
| firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); }); | |
| } else if(currentEffect === 'slideInRight'){ | |
| createSlices(slider, settings, vars); | |
| firstSlice = $('.nivo-slice:first', slider); | |
| firstSlice.css({ | |
| 'width': '0px', | |
| 'opacity': '1' | |
| }); | |
| firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); }); | |
| } else if(currentEffect === 'slideInLeft'){ | |
| createSlices(slider, settings, vars); | |
| firstSlice = $('.nivo-slice:first', slider); | |
| firstSlice.css({ | |
| 'width': '0px', | |
| 'opacity': '1', | |
| 'left': '', | |
| 'right': '0px' | |
| }); | |
| firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ | |
| // Reset positioning | |
| firstSlice.css({ | |
| 'left': '0px', | |
| 'right': '' | |
| }); | |
| slider.trigger('nivo:animFinished'); | |
| }); | |
| } else if(currentEffect === 'boxRandom'){ | |
| createBoxes(slider, settings, vars); | |
| totalBoxes = settings.boxCols * settings.boxRows; | |
| i = 0; | |
| timeBuff = 0; | |
| boxes = shuffle($('.nivo-box', slider)); | |
| boxes.each(function(){ | |
| var box = $(this); | |
| if(i === totalBoxes-1){ | |
| setTimeout(function(){ | |
| box.animate({ opacity:'1' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); | |
| }, (100 + timeBuff)); | |
| } else { | |
| setTimeout(function(){ | |
| box.animate({ opacity:'1' }, settings.animSpeed); | |
| }, (100 + timeBuff)); | |
| } | |
| timeBuff += 20; | |
| i++; | |
| }); | |
| } else if(currentEffect === 'boxRain' || currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){ | |
| createBoxes(slider, settings, vars); | |
| totalBoxes = settings.boxCols * settings.boxRows; | |
| i = 0; | |
| timeBuff = 0; | |
| // Split boxes into 2D array | |
| var rowIndex = 0; | |
| var colIndex = 0; | |
| var box2Darr = []; | |
| box2Darr[rowIndex] = []; | |
| boxes = $('.nivo-box', slider); | |
| if(currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrowReverse'){ | |
| boxes = $('.nivo-box', slider)._reverse(); | |
| } | |
| boxes.each(function(){ | |
| box2Darr[rowIndex][colIndex] = $(this); | |
| colIndex++; | |
| if(colIndex === settings.boxCols){ | |
| rowIndex++; | |
| colIndex = 0; | |
| box2Darr[rowIndex] = []; | |
| } | |
| }); | |
| // Run animation | |
| for(var cols = 0; cols < (settings.boxCols * 2); cols++){ | |
| var prevCol = cols; | |
| for(var rows = 0; rows < settings.boxRows; rows++){ | |
| if(prevCol >= 0 && prevCol < settings.boxCols){ | |
| /* Due to some weird JS bug with loop vars | |
| being used in setTimeout, this is wrapped | |
| with an anonymous function call */ | |
| (function(row, col, time, i, totalBoxes) { | |
| var box = $(box2Darr[row][col]); | |
| var w = box.width(); | |
| var h = box.height(); | |
| if(currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){ | |
| box.width(0).height(0); | |
| } | |
| if(i === totalBoxes-1){ | |
| setTimeout(function(){ | |
| box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3, '', function(){ slider.trigger('nivo:animFinished'); }); | |
| }, (100 + time)); | |
| } else { | |
| setTimeout(function(){ | |
| box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3); | |
| }, (100 + time)); | |
| } | |
| })(rows, prevCol, timeBuff, i, totalBoxes); | |
| i++; | |
| } | |
| prevCol--; | |
| } | |
| timeBuff += 100; | |
| } | |
| } | |
| }; | |
| // Shuffle an array | |
| var shuffle = function(arr){ | |
| for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i, 10), x = arr[--i], arr[i] = arr[j], arr[j] = x); | |
| return arr; | |
| }; | |
| // For debugging | |
| var trace = function(msg){ | |
| if(this.console && typeof console.log !== 'undefined') { console.log(msg); } | |
| }; | |
| // Start / Stop | |
| this.stop = function(){ | |
| if(!$(element).data('nivo:vars').stop){ | |
| $(element).data('nivo:vars').stop = true; | |
| trace('Stop Slider'); | |
| } | |
| }; | |
| this.start = function(){ | |
| if($(element).data('nivo:vars').stop){ | |
| $(element).data('nivo:vars').stop = false; | |
| trace('Start Slider'); | |
| } | |
| }; | |
| // Trigger the afterLoad callback | |
| settings.afterLoad.call(this); | |
| return this; | |
| }; | |
| $.fn.nivoSlider = function(options) { | |
| return this.each(function(key, value){ | |
| var element = $(this); | |
| // Return early if this element already has a plugin instance | |
| if (element.data('nivoslider')) { return element.data('nivoslider'); } | |
| // Pass options to plugin constructor | |
| var nivoslider = new NivoSlider(this, options); | |
| // Store plugin object in this element's data | |
| element.data('nivoslider', nivoslider); | |
| }); | |
| }; | |
| //Default settings | |
| $.fn.nivoSlider.defaults = { | |
| effect: 'random', | |
| slices: 15, | |
| boxCols: 8, | |
| boxRows: 4, | |
| animSpeed: 500, | |
| pauseTime: 3000, | |
| startSlide: 0, | |
| directionNav: true, | |
| controlNav: true, | |
| controlNavThumbs: false, | |
| pauseOnHover: true, | |
| manualAdvance: false, | |
| prevText: 'Prev', | |
| nextText: 'Next', | |
| randomStart: false, | |
| beforeChange: function(){}, | |
| afterChange: function(){}, | |
| slideshowEnd: function(){}, | |
| lastSlide: function(){}, | |
| afterLoad: function(){} | |
| }; | |
| $.fn._reverse = [].reverse; | |
| })(jQuery); | |
| $(document).ready(function () { | |
| $(".mob_menu").click(function(){ | |
| $("._category").slideToggle(); | |
| }); | |
| $('._handler').on("click", function() { | |
| $(this).siblings('ul.dropdown_menu').toggle(); | |
| }); | |
| var owl = $('.owl_slider'); | |
| owl.owlCarousel({ | |
| margin:10, | |
| dots:false, | |
| nav: true, | |
| navText: [ | |
| "<i class='fa fa-chevron-left'></i>", | |
| "<i class='fa fa-chevron-right'></i>" | |
| ], | |
| autoplay: true, | |
| autoplayHoverPause: false, | |
| responsive: { | |
| 0: { | |
| items: 2 | |
| }, | |
| 600: { | |
| items:3 | |
| }, | |
| 1000: { | |
| items:5 | |
| }, | |
| 1200: { | |
| items:5 | |
| } | |
| } | |
| }); | |
| $('#ensign-nivoslider').nivoSlider({ | |
| effect: 'random', | |
| slices: 15, | |
| boxCols: 12, | |
| boxRows: 8, | |
| animSpeed: 500, | |
| pauseTime: 5000, | |
| startSlide: 0, | |
| directionNav: true, | |
| controlNavThumbs: false, | |
| pauseOnHover: true, | |
| manualAdvance: false, | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * jQuery Nivo Slider v3.2 | |
| * http://nivo.dev7studios.com | |
| * | |
| * Copyright 2012, Dev7studios | |
| * Free to use and abuse under the MIT license. | |
| * http://www.opensource.org/licenses/mit-license.php | |
| */ | |
| /* The Nivo Slider styles */ | |
| /* #container { | |
| width:100%; | |
| height:100%; | |
| overflow:hidden; | |
| position:fixed; | |
| top:0px; | |
| left:0px; | |
| } | |
| .nivoSlider { | |
| position:fixed; | |
| top:-16px; | |
| left:0px; | |
| } | |
| .nivoSlider img {position:absolute; | |
| top:0px; | |
| left:0px; | |
| } */ | |
| .nivoSlider { | |
| position:relative; | |
| width:100%; | |
| height:auto; | |
| overflow: hidden; | |
| } | |
| .nivoSlider img { | |
| position:absolute; | |
| top:0px; | |
| left:0px; | |
| max-width: none; | |
| } | |
| .nivo-main-image { | |
| display: block !important; | |
| position: relative !important; | |
| width: 100% !important; | |
| height:100% !important; | |
| } | |
| /* If an image is wrapped in a link */ | |
| .nivoSlider a.nivo-imageLink { | |
| position:absolute; | |
| top:0px; | |
| left:0px; | |
| width:100%; | |
| height:100%; | |
| border:0; | |
| padding:0; | |
| margin:0; | |
| z-index:6; | |
| display:none; | |
| background:white; | |
| filter:alpha(opacity=0); | |
| opacity:0; | |
| } | |
| /* The slices and boxes in the Slider */ | |
| .nivo-slice { | |
| display:block; | |
| position:absolute; | |
| z-index:5; | |
| height:100%; | |
| top:0; | |
| } | |
| .nivo-box { | |
| display:block; | |
| position:absolute; | |
| z-index:5; | |
| overflow:hidden; | |
| } | |
| .nivo-box img { display:block; } | |
| /* Caption styles */ | |
| .nivo-caption { | |
| position:absolute; | |
| left:0px; | |
| bottom:0px; | |
| color:#fff; | |
| width:100%; | |
| z-index:8; | |
| padding: 5px 10px; | |
| opacity: 0.8; | |
| overflow: hidden; | |
| display: none; | |
| -moz-opacity: 0.8; | |
| filter:alpha(opacity=8); | |
| -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ | |
| -moz-box-sizing: border-box; /* Firefox, other Gecko */ | |
| box-sizing: border-box; /* Opera/IE 8+ */ | |
| } | |
| .nivo-caption p { | |
| padding:5px; | |
| margin:0; | |
| } | |
| .nivo-caption a { | |
| display:inline !important; | |
| } | |
| .nivo-html-caption { | |
| display:none; | |
| } | |
| /* Direction nav styles (e.g. Next & Prev) */ | |
| .nivo-directionNav a { | |
| cursor: pointer; | |
| margin-top: -25px; | |
| position: absolute; | |
| top: 50%; | |
| z-index: 9; | |
| } | |
| .nivo-prevNav { | |
| left:0px; | |
| } | |
| .nivo-nextNav { | |
| right:0px; | |
| } | |
| /* Control nav styles (e.g. 1,2,3...) */ | |
| .nivo-controlNav { | |
| text-align:center; | |
| padding: 15px 0; | |
| } | |
| .nivo-controlNav a { | |
| cursor:pointer; | |
| } | |
| .nivo-controlNav a.active { | |
| font-weight:bold; | |
| } | |
| /* ------------------------------ | |
| Default Theme | |
| ---------------------------------*/ | |
| .slider-direction { | |
| position: absolute; | |
| left:0; | |
| top:0; | |
| width: 100%; | |
| background: none; | |
| color: #fff; | |
| font-size: 16px; | |
| z-index: 999; | |
| display: none; | |
| } | |
| /* If an image is wrapped in a link */ | |
| .nivoSlider a.nivo-imageLink { | |
| position:absolute; | |
| top:0px; | |
| left:0px; | |
| width:100%; | |
| height:100%; | |
| border:0; | |
| padding:0; | |
| margin:0; | |
| z-index:6; | |
| display:none; | |
| background:white; | |
| filter:alpha(opacity=0); | |
| opacity:0; | |
| } | |
| /* The slices and boxes in the Slider */ | |
| .nivo-slice { | |
| display:block; | |
| position:absolute; | |
| z-index:5; | |
| height:100%; | |
| top:0; | |
| } | |
| .nivo-box { | |
| display:block; | |
| position:absolute; | |
| z-index:5; | |
| overflow:hidden; | |
| } | |
| .nivo-box img { display:block; } | |
| .nivo-caption { | |
| position:absolute; | |
| left:0; | |
| top:0; | |
| color:#fff; | |
| width:100%; | |
| height: 100%; | |
| z-index:8; | |
| opacity:1; | |
| } | |
| .nivo-main-image { | |
| display: block !important; | |
| position: relative !important; | |
| width: 100% !important; | |
| } | |
| /* The slices and boxes in the Slider */ | |
| .nivo-slice { | |
| display:block; | |
| position:absolute; | |
| z-index:5; | |
| height:100%; | |
| top:0; | |
| } | |
| .nivo-box { | |
| display:block; | |
| position:absolute; | |
| z-index:5; | |
| overflow:hidden; | |
| } | |
| @-webkit-keyframes myfirst { | |
| from {width: 0;} | |
| to {width: 100%;} | |
| } | |
| @keyframes myfirst { | |
| from {width: 0;} | |
| to {width: 100%;} | |
| } | |
| .slider-progress.pos_hover{ | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| /* ------------------------------ | |
| custom slider | |
| ---------------------------------*/ | |
| .slider-progress{ | |
| position:absolute; | |
| top:0; | |
| left:0; | |
| background-color: rgba(49, 56, 72, 0.298); | |
| height:5px; | |
| -webkit-animation: myfirst 5000ms ease-in-out; | |
| -moz-animation: myfirst 5000ms ease-in-out; | |
| -ms-animation: myfirst 5000ms ease-in-out; | |
| animation: myfirst 5000ms ease-in-out; | |
| } | |
| .s-tb{ | |
| display: table; | |
| height: 100%; | |
| width: 100%; | |
| float: left; | |
| } | |
| .s-tb-c{ | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| .t-cn{text-align: center} | |
| .t-lft{text-align: left} | |
| .t-lfr{text-align: right} | |
| /* ------------------------------ | |
| slider animation | |
| ---------------------------------*/ | |
| /* -------------- Home 1 ---------------- */ | |
| .home1 .slider-1 h1{ | |
| -webkit-animation: bounceInUp 1000ms ease-in-out; | |
| -moz-animation: bounceInUp 1000ms ease-in-out; | |
| -ms-animation: bounceInUp 1000ms ease-in-out; | |
| animation: bounceInUp 1000ms ease-in-out; | |
| } | |
| .home1 .slider-1 h2{ | |
| -webkit-animation: fadeInRight 1500ms ease-in-out; | |
| -moz-animation: fadeInRight 1500ms ease-in-out; | |
| -ms-animation: fadeInRight 1500ms ease-in-out; | |
| animation: fadeInRight 1500ms ease-in-out; | |
| } | |
| .home1 .slider-2 h1{ | |
| -webkit-animation: fadeInLeft 500ms ease-in-out; | |
| -moz-animation: fadeInLeft 500ms ease-in-out; | |
| -ms-animation: fadeInLeft 500ms ease-in-out; | |
| animation: fadeInLeft 500ms ease-in-out; | |
| } | |
| .home1 .slider-2 h3{ | |
| -webkit-animation: fadeInLeft 1500ms ease-in-out; | |
| -moz-animation: fadeInLeft 1500ms ease-in-out; | |
| -ms-animation: fadeInLeft 1500ms ease-in-out; | |
| animation: fadeInLeft 1500ms ease-in-out; | |
| } | |
| /* -------------- Home 2 ---------------- */ | |
| .home2 .slider-2 h1{ | |
| -webkit-animation: fadeInLeft 500ms ease-in-out; | |
| -moz-animation: fadeInLeft 500ms ease-in-out; | |
| -ms-animation: fadeInLeft 500ms ease-in-out; | |
| animation: fadeInLeft 500ms ease-in-out; | |
| } | |
| .home2 .slider-2 h3{ | |
| -webkit-animation: fadeInLeft 1500ms ease-in-out; | |
| -moz-animation: fadeInLeft 1500ms ease-in-out; | |
| -ms-animation: fadeInLeft 1500ms ease-in-out; | |
| animation: fadeInLeft 1500ms ease-in-out; | |
| } | |
| .home2 .layer-1{ | |
| -webkit-animation: fadeInLeft 1500ms ease-in-out; | |
| -moz-animation: fadeInLeft 1500ms ease-in-out; | |
| -ms-animation: fadeInLeft 1500ms ease-in-out; | |
| animation: fadeInLeft 1500ms ease-in-out; | |
| } | |
| .home2 .layer-2{ | |
| -webkit-animation: bounceInUp 1000ms ease-in-out; | |
| -moz-animation: bounceInUp 1000ms ease-in-out; | |
| -ms-animation: bounceInUp 1000ms ease-in-out; | |
| animation: bounceInUp 1000ms ease-in-out; | |
| } | |
| .home2 .layer-3{ | |
| -webkit-animation: fadeInRight 1500ms ease-in-out; | |
| -moz-animation: fadeInRight 1500ms ease-in-out; | |
| -ms-animation: fadeInRight 1500ms ease-in-out; | |
| animation: fadeInRight 1500ms ease-in-out; | |
| } | |
| .home2 .layer-1-1{ | |
| -webkit-animation: fadeInRight 1500ms ease-in-out; | |
| -moz-animation: fadeInRight 1500ms ease-in-out; | |
| -ms-animation: fadeInRight 1500ms ease-in-out; | |
| animation: fadeInRight 1500ms ease-in-out; | |
| } | |
| /* -------------- Home 3 ---------------- */ | |
| .home3 .slider-1 h1{ | |
| -webkit-animation: fadeInLeft 500ms ease-in-out; | |
| -moz-animation: fadeInLeft 500ms ease-in-out; | |
| -ms-animation: fadeInLeft 500ms ease-in-out; | |
| animation: fadeInLeft 500ms ease-in-out; | |
| } | |
| .home3 .slider-1 h3{ | |
| -webkit-animation: fadeInLeft 1500ms ease-in-out; | |
| -moz-animation: fadeInLeft 1500ms ease-in-out; | |
| -ms-animation: fadeInLeft 1500ms ease-in-out; | |
| animation: fadeInLeft 1500ms ease-in-out; | |
| } | |
| .home3 .slider-2 h1{ | |
| -webkit-animation: bounceInUp 1000ms ease-in-out; | |
| -moz-animation: bounceInUp 1000ms ease-in-out; | |
| -ms-animation: bounceInUp 1000ms ease-in-out; | |
| animation: bounceInUp 1000ms ease-in-out; | |
| } | |
| .home3 .slider-2 h3{ | |
| -webkit-animation: fadeInLeft 1500ms ease-in-out; | |
| -moz-animation: fadeInLeft 1500ms ease-in-out; | |
| -ms-animation: fadeInLeft 1500ms ease-in-out; | |
| animation: fadeInLeft 1500ms ease-in-out; | |
| } | |
| .home3 .slider-3 h1{ | |
| -webkit-animation: fadeInRight 500ms ease-in-out; | |
| -moz-animation: fadeInRight 500ms ease-in-out; | |
| -ms-animation: fadeInRight 500ms ease-in-out; | |
| animation: fadeInRight 500ms ease-in-out; | |
| } | |
| .home3 .slider-3 h3{ | |
| -webkit-animation: fadeInRight 1500ms ease-in-out; | |
| -moz-animation: fadeInRight 1500ms ease-in-out; | |
| -ms-animation: fadeInRight 1500ms ease-in-out; | |
| animation: fadeInRight 1500ms ease-in-out; | |
| } | |
| :root{ | |
| --libre:'Roboto', sans-serif; | |
| --sky-blue:#2699cf; | |
| --blue:#175f9e; | |
| --orange:#f66620; | |
| --black:#000000; | |
| --white:#ffffff; | |
| --gray:#F5F6FA; | |
| --lightgray:#e9ecef; | |
| --red:#da251d; | |
| } | |
| *{margin:0;padding:0;box-sizing:border-box; font-family:Roboto; } | |
| ::-webkit-scrollbar-track{background-color:#eee;} | |
| ::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:10px;} | |
| ::-webkit-scrollbar{width:10px;border-radius:10px;} | |
| html, body{margin:0;padding:0;font-family:'Roboto', sans-serif;scroll-behavior:smooth;font-size:20px;color:var(--black);background:#EEEEEE;} | |
| ul, ul~li{margin:0;padding:0;list-style-type:none;} | |
| body{ | |
| font-size: 14px; | |
| background-color: #dbdbdc; | |
| color: #212121; | |
| line-height: 1.4; | |
| } | |
| a{text-decoration:none;} | |
| @media (min-width: 1200px){ | |
| .container { | |
| max-width: 1290px; | |
| }} | |
| /*========header=========*/ | |
| header { | |
| padding: 10px 0px 10px 0px; | |
| background-color: #007bff; | |
| position: fixed; | |
| width: 100%; | |
| z-index: 100; | |
| } | |
| .logo { | |
| margin-top: 0px; | |
| } | |
| .logo a{ color:#fff; font-size:30px; } | |
| .logo img { | |
| width: 90px; | |
| } | |
| .mob_menu { | |
| display: none; | |
| } | |
| .logoin-area { | |
| position: relative; | |
| padding-top:20px; | |
| } | |
| .logoin-area ul { | |
| list-style: none; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .logoin-area ul li { margin-right:20px; } | |
| .logoin-area ul li a { | |
| color: #fff; | |
| font-size: 16px; | |
| } | |
| .search-area { | |
| display: flex; | |
| position: relative; | |
| align-items: center; | |
| justify-content: center; | |
| padding-top: 10px; | |
| width:90%; | |
| margin:auto; | |
| } | |
| .search-area input { | |
| padding:4px 10px; | |
| border: solid 1px #ccc; | |
| width: 100%; | |
| height:40px; | |
| border-radius: 4px; | |
| box-shadow: 0px 1px 3px rgb(0 0 0 / 22%); | |
| } | |
| .search-area button.search-btn { | |
| position: absolute; | |
| right: 0px; | |
| border: 0px; | |
| border-radius: 4px; | |
| height:40px; | |
| width: 50px; | |
| background-color: transparent; | |
| color: #ef363c; | |
| cursor: pointer; | |
| } | |
| .search-area input::placeholder{color:#000;font-size:16px;} | |
| .search-area button.search-btn:focus, .search-area input:focus{ outline:none; } | |
| .title_bx .view_btn { | |
| background-color: #ed2027; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: #fff; | |
| width: 90px; | |
| height: 35px; | |
| border-radius: 4px; | |
| box-shadow: 0px 1px 2px #ccc; | |
| font-size: 15px; | |
| cursor: pointer; | |
| position: relative; | |
| top: -5px; | |
| } | |
| /*========menu=========*/ | |
| ._category > ul { | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| ._category ul li a{ text-decoration:none; } | |
| ._category ul li ._txt { | |
| text-align: center; | |
| font-size: 16px; | |
| font-weight: 400; | |
| color: #212529; | |
| position: relative; | |
| } | |
| ._category ul li ._txt img { | |
| display: block; | |
| height: 65px; | |
| } | |
| .slider-area .slides img { | |
| height: 345px; | |
| object-fit: cover; | |
| } | |
| section._category{ margin:0px; padding:5px 0px; } | |
| ._category ul li { | |
| position: relative; | |
| cursor:pointer; | |
| } | |
| ._category ul li ul.dropdown_menu { | |
| position: absolute; | |
| width: 200px; | |
| background-color: #f9f8f8; | |
| z-index: 100; | |
| left: -25px; | |
| margin-top: 0px; | |
| display: none; | |
| } | |
| ._category ul li ul.dropdown_menu li { | |
| display: block; | |
| } | |
| ._category ul li ul.dropdown_menu li a { | |
| display: block; | |
| width: 100%; | |
| text-align: left; | |
| font-size: 15px; | |
| padding: 8px 10px; | |
| border-bottom: solid 1px #ece8ea; | |
| transition: all ease-in-out 0.3s; | |
| cursor: pointer; | |
| color: #353535; | |
| } | |
| ._category ul li ul.dropdown_menu li:last-child a { border-bottom:0px; } | |
| ._category ul li ._txt a { | |
| color: #000; | |
| } | |
| ._category > ul > li:hover ul { | |
| display: block; | |
| } | |
| ._category > ul > li:hover ul li ul { | |
| display: none; | |
| } | |
| ._category > ul > li ul li:hover ul { | |
| display: block; | |
| left: 100%; | |
| top: 0px; | |
| background-color: #d0cdcd; | |
| } | |
| ._category ul li ul.dropdown_menu li a:hover { | |
| background-color: #b66f35; | |
| color: #fff; | |
| } | |
| ._category ul li ul.dropdown_menu li i.fa { | |
| position: absolute; | |
| right: 0px; | |
| top: 0px; | |
| width: 40px; | |
| height: 38px; | |
| background-color: transparent; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| ._category ul li i.fa { | |
| font-size: 18px; | |
| font-weight: 900; | |
| cursor: pointer; | |
| } | |
| section._category { | |
| margin: 0px !important; | |
| padding: 5px 0px !important; | |
| } | |
| .blank-header { | |
| height: 70px; | |
| } | |
| /*=======sliderArea======*/ | |
| .slider-area .slides img { | |
| height: 500px; | |
| width: 100%; | |
| object-fit: cover; | |
| } | |
| .slider-area{color:#fff;position:relative;text-align:center;} | |
| .slider-content{padding:180px 60px;} | |
| .nivo-caption::after{background:#444 none repeat scroll 0 0;content:"";height:100%;left:0;opacity:0.0;position:absolute;top:0;width:100%;z-index:-1;} | |
| .layer-1-2{margin:20px 0;} | |
| .layer-1-1 h2{color:#fff;font-size:22px;font-weight:500;} | |
| .layer-1-2 h1{color:#fff;font-size:40px;font-weight:500;text-shadow:1px 1px 1px #000;} | |
| .layer-1-3{margin:50px 0 0;} | |
| .layer-1-3 a.ready-btn{border:1px solid #fff;border-radius:30px;color:#fff;cursor:pointer;font-size:17px;font-weight:600;margin-top:30px;padding:10px 20px;text-align:center;text-transform:uppercase;transition:all 0.4s ease 0s;z-index:222;display:none;} | |
| .layer-1-3 a.ready-btn:hover{color:#fff;background:#3EC1D5;border:1px solid #3EC1D5;text-decoration:none;} | |
| .ready-btn.right-btn{margin-right:15px;background:#3EC1D5;border:1px solid #3EC1D5 !important;} | |
| .ready-btn.right-btn:hover{background:transparent !important;border:1px solid #fff !important;} | |
| .nivo-controlNav{bottom:0;left:0;position:absolute;right:0;z-index:8;} | |
| .nivo-directionNav{display:block;} | |
| .nivo-controlNav a{background:transparent none repeat scroll 0 0;border:2px solid #fff;box-shadow:none;display:inline-block;font-size:0;height:2px;margin:5px 3px;opacity:1;text-align:center;text-indent:inherit;vertical-align:top;width:20px;} | |
| .nivo-controlNav a:hover, .nivo-controlNav a.active{background:#fff none repeat scroll 0 0;border-color:#3EC1D5;-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);} | |
| (min-width:1400px) and (max-width:1920px){.slider-content{padding:340px 0;} | |
| } | |
| @media (min-width:992px) and (max-width:1169px){.slider-content{padding:144px 0;} | |
| } | |
| @media (min-width:768px) and (max-width:991px){.slider-content{padding:93px 0;} | |
| .layer-1-2 h1{font-size:22px;line-height:24px;} | |
| .layer-1-3 a.ready-btn{font-size:14px;margin-top:20px;padding:10px 20px;} | |
| } | |
| @media (max-width:767px){.nivo-directionNav{display:none;} | |
| .slider-content{padding:46px 0px;} | |
| .layer-1-2{margin:10px 0;} | |
| .layer-1-1 h2{font-size:14px;line-height:16px;} | |
| .layer-1-2 h1{font-size:14px;line-height:16px;} | |
| .layer-1-3 a.ready-btn{font-size:12px;margin-top:10px;padding:8px 10px;} | |
| .layer-1-3{margin:10px 0 0;} | |
| .nivo-controlNav{bottom:-8px;} | |
| } | |
| @media only screen and (min-width:480px) and (max-width:767px){.slider-content{padding:70px 0px;} | |
| .layer-1-1 h2, .layer-1-2 h1{font-size:24px;line-height:30px;} | |
| } | |
| .preview-1 .nivoSlider{position:relative;background:url(../lib/nivo-slider/img/loading.gif) no-repeat 50% 50%;} | |
| .preview-1 .nivoSlider img{position:absolute;top:0px;left:0px;display:none;} | |
| .preview-1 .nivoSlider a{border:0;display:block;} | |
| .preview-1 .nivo-controlNav{text-align:center;padding:20px 0;} | |
| .preview-1 .nivo-controlNav a{display:inline-block;width:22px;height:22px;background:url(../lib/nivo-slider/img/bullets.png) no-repeat;text-indent:-9999px;border:0;margin:0 2px;} | |
| .preview-1 .nivo-controlNav a.active{background-position:0 -22px;} | |
| .preview-1 .nivo-directionNav a{display:block;width:30px;height:30px;background:url(../lib/nivo-slider/img/arrows.png) no-repeat;text-indent:-9999px;border:0;opacity:0;-webkit-transition:all 200ms ease-in-out;-moz-transition:all 200ms ease-in-out;-o-transition:all 200ms ease-in-out;transition:all 200ms ease-in-out;} | |
| .preview-1:hover .nivo-directionNav a{opacity:1;} | |
| .nivo-prevNav{left:15px;} | |
| .nivo-nextNav{right:15px;} | |
| .preview-1 a.nivo-nextNav{background-position:-30px 0;} | |
| .preview-1 .nivo-caption{font-family:Helvetica, Arial, sans-serif;} | |
| .preview-1 .nivo-caption a{color:#fff;border-bottom:1px dotted #fff;} | |
| .preview-1 .nivo-caption a:hover{color:#fff;} | |
| .preview-1 .nivo-controlNav.nivo-thumbs-enabled{width:100%;} | |
| .preview-1 .nivo-controlNav.nivo-thumbs-enabled a{width:auto;height:auto;background:none;margin-bottom:5px;} | |
| .preview-1 .nivo-controlNav.nivo-thumbs-enabled img{display:block;width:120px;height:auto;} | |
| .preview-1 .nivo-controlNav{position:relative;z-index:99999;bottom:68px;} | |
| .preview-1 .nivo-controlNav a{border:5px solid #fff;display:inline-block;height:18px;margin:0 5px;text-indent:-9999px;width:18px;line-height:8px;background:#3c3c3c;cursor:pointer;position:relative;z-index:9;border-radius:100%;opacity:0;z-index:-999;} | |
| .preview-1:hover .nivo-controlNav a{opacity:1;z-index:999999;} | |
| .preview-1 .nivo-controlNav a:hover, .preview-1 .nivo-controlNav a.active{background:#000;cursor:pointer;} | |
| .preview-2 .nivoSlider:hover .nivo-directionNav a.nivo-prevNav{left:50px;} | |
| .preview-2 .nivoSlider:hover .nivo-directionNav a.nivo-nextNav{right:50px;} | |
| .preview-2 .nivoSlider .nivo-directionNav a.nivo-prevNav{font-size:0;} | |
| .preview-2 .nivoSlider .nivo-directionNav a.nivo-nextNav{font-size:0;} | |
| .preview-2 .nivo-directionNav a.nivo-prevNav::before{background:rgba(0, 0, 0, 0) none repeat scroll 0 0;color:#ffffff;content:"\f053";cursor:pointer;font:300 50px/50px FontAwesome;position:absolute;text-align:center;top:50%;transition:all 300ms ease-in 0s;z-index:9;font-weight:100;left:0px;width:50px;border:1px solid #fff;border-radius:50%;font-size:30px;} | |
| .preview-2 .nivo-directionNav a.nivo-nextNav:hover:before, .preview-2 .nivo-directionNav a.nivo-prevNav:hover:before{border-color:var(--blue);color:#fff;background:var(--blue);} | |
| .preview-2 .nivo-directionNav a.nivo-nextNav::before{background:rgba(0, 0, 0, 0) none repeat scroll 0 0;border:1px solid #fff;border-radius:50%;color:#ffffff;content:"\f054";cursor:pointer;font:100 30px/50px FontAwesome;height:50px;position:absolute;right:0px;text-align:center;top:50%;transition:all 300ms ease-in 0s;width:50px;z-index:9;font-size:30px;} | |
| .niceties.preview-2{position:relative;height:100%;} | |
| /*========products-slider========*/ | |
| section.sec { | |
| padding: 25px 0px; | |
| position: relative; | |
| margin: 10px 10px; | |
| } | |
| .bg-white { | |
| background-color: #fff!important; | |
| } | |
| .title_bx { | |
| margin-bottom: 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .title_bx h3.title { | |
| font-size: 22px; | |
| text-transform: capitalize; | |
| position: relative; | |
| color: #495057; | |
| font-weight: 700; | |
| line-height: 1.2em; | |
| } | |
| /*========box========*/ | |
| .sq_box { | |
| padding-bottom: 5px; | |
| border-bottom: solid 2px var(--blue); | |
| background-color: #fff; | |
| text-align: center; | |
| margin-bottom: 20px; | |
| padding-bottom: 10px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| transition: 0.5s; | |
| -webkit-transition: 0.5s; | |
| -moz-transition:0.5s; | |
| -o-transition: 0.5s; | |
| } | |
| .item .sq_box span.wishlist { | |
| right: 8px !important; | |
| } | |
| .sq_box span.wishlist { | |
| position: absolute; | |
| top:10px; | |
| right: 20px; | |
| z-index: 20; | |
| } | |
| .sq_box span { | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin: 0px 3px; | |
| } | |
| .sq_box span.wishlist i { | |
| color: #adb5bd; | |
| font-size: 20px; | |
| } | |
| .sq_box h4 { | |
| font-size: 16px; | |
| text-align: center; | |
| font-weight: 500; | |
| color: #343a40; | |
| margin-top: 8px; | |
| padding: 0px 8px; | |
| margin-bottom: 8px !important; | |
| } | |
| .sq_box h4 a { | |
| color: #000; | |
| font-size: 16px; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| display: block; | |
| } | |
| .sq_box .price-box { | |
| margin-bottom:10px !important; | |
| } | |
| .pdis_img:hover .q-bx { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .sq_box .btn { | |
| border-radius: 50px; | |
| padding: 5px 13px; | |
| font-size: 15px; | |
| color: #fff; | |
| background-color: var(--red); | |
| font-weight: 600; | |
| } | |
| .sq_box .price-box span.price { | |
| text-decoration: line-through; | |
| color: #6c757d; | |
| } | |
| .sq_box span { | |
| font-size: 14px; | |
| font-weight:500; | |
| margin: 0px 5px; | |
| } | |
| .sq_box .price-box span.offer-price { | |
| color:#28a745; | |
| } | |
| .sq_box img { | |
| object-fit: cover; | |
| height:250px !important; | |
| margin-top:0px; | |
| } | |
| .sq_box span.wishlist i:hover { | |
| color: #fd7f34; | |
| } | |
| #recent_post .owl-nav { | |
| top: -26%; | |
| } | |
| .sq_box .pdis_img{ position:relative; overflow:hidden; | |
| transition:0.5s; | |
| -webkit-transition:0.5s; | |
| -moz-transition:0.5s; | |
| -o-transition:0.5s; | |
| } | |
| .sq_box .pdis_img img{ | |
| transition:0.5s; | |
| -webkit-transition:0.5s; | |
| -moz-transition:0.5s; | |
| -o-transition:0.5s; | |
| cursor:pointer; | |
| } | |
| .sq_box .pdis_img:hover img{ -webkit-transform:scale(1.2); | |
| -moz-transform:scale(1.2); | |
| -ms-transform:scale(1.2); | |
| -o-transform:scale(1.2); | |
| transform:scale(1.2); } | |
| .sq_box .pdis_img .q-bx { } | |
| .sq_box .pdis_img .q-bx span { color:#fff; } | |
| .pdis_img:hover .q-bx { | |
| height: 40px; | |
| } | |
| .q-bx { | |
| background-color:rgba(218, 37, 29, 0.52); | |
| width: 100%; | |
| height: 0px; | |
| position: absolute; | |
| bottom:0px; | |
| text-align: center; | |
| transition:0.5s; | |
| -webkit-transition:0.5s; | |
| -moz-transition:0.5s; | |
| -o-transition:0.5s; | |
| } | |
| .sq_box:hover span.wishlist i { | |
| color: #fd7f34; | |
| } | |
| .common_wd .owl-nav { | |
| position: absolute; | |
| top: 40%; | |
| right: 4px; | |
| width: 100%; | |
| } | |
| .common_wd .owl-nav .owl-prev, .common_wd .owl-nav .owl-next { | |
| background-color: #ed2027 !important; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 75px; | |
| width: 35px; | |
| text-align: center; | |
| border-radius: 3px !important; | |
| } | |
| .owl-nav .owl-prev, .owl-nav .owl-next { | |
| top: 32%; | |
| position: absolute; | |
| border-radius: 40px !important; | |
| color: var(--white) !important; | |
| width: 40px; | |
| height: 40px; | |
| text-align: center; | |
| } | |
| .owl-nav .owl-prev { | |
| left: -15px; | |
| } | |
| .owl-nav .owl-next { | |
| right: -20px; | |
| } | |
| /*================footer=========*/ | |
| .site-footer{background-color:#2c4152;padding:45px 0 20px;font-size:16px;line-height:24px;color:#fff;} | |
| .site-footer h6{color:#fff;font-size:14px;text-transform:capitalize;margin-top:5px;margin-bottom:20px;font-weight:400;text-align:left;} | |
| .site-footer a:hover{color:#3366cc;text-decoration:none;} | |
| .footer-links{padding-left:0;list-style:none;text-align:left;} | |
| .footer-logo{padding:15px;border-radius:4px;} | |
| .footer-logo a{} | |
| footer.site-footer ul.footer-links li a{font-size:12px;color:#ccc;} | |
| footer.site-footer ul.footer-links li{margin-bottom:5px;} | |
| .footer-logo a img{max-width:100%;} | |
| .footer-links ul{margin-top:30px;} | |
| .footer-links ul li{display:inline-block;margin:0px 15px;} | |
| .footer-links ul li a{font-size:16px;font-weight:100;} | |
| .footer-links a{color:#fff;opacity:1;} | |
| .footer-links a:hover{color:#50aed6;} | |
| .footer-bottom{background-color:#2c4152;padding:30px 0px;border-top:solid 1px #13446f;} | |
| .footer-bottom p{font-size:20px;color:#fff;text-align:center;margin-bottom:0px;} | |
| .footer-bottom h4{font-size:14px;color:#ccc;margin-bottom:15px;} | |
| .footer-bottom ul{margin:0px;padding:0px;} | |
| .footer-bottom ul li{display:inline-block;} | |
| .footer-bottom ul li img{width:180px;border-radius:3px;} | |
| @media(max-width:600px){ | |
| .logo { | |
| text-align: center; | |
| } | |
| header{ position:relative; } | |
| .blank-header{ display:none; } | |
| .mob_menu { | |
| display: flex !important; | |
| border: solid 2px #e9ecef; | |
| width: 45px; | |
| height: 35px; | |
| text-align: center; | |
| padding-top: 1px; | |
| justify-content: center; | |
| border-radius: 4px; | |
| position: absolute; | |
| align-items: center; | |
| top: 20%; | |
| right: 5%; | |
| cursor: pointer; | |
| } | |
| section.sec { | |
| padding: 10px 0px; | |
| position: relative; | |
| } | |
| ._category ul { | |
| flex-wrap: wrap; | |
| } | |
| ._category > ul > li { | |
| width: 100%; | |
| text-align: left; | |
| padding-bottom: 10px; | |
| border-bottom: solid 1px #989595cc; | |
| margin-bottom: 10px; | |
| } | |
| ._category ul li ._txt { | |
| text-align: left; | |
| font-size: 16px; | |
| font-weight: 400; | |
| color: #212529; | |
| } | |
| ._category ul li ._txt img { | |
| display: none; | |
| height: 40px; | |
| margin: auto; | |
| } | |
| ._category ul li i.fa { | |
| font-size: 22px; | |
| font-weight: 900; | |
| cursor: pointer; | |
| float: right; | |
| width: 50px; | |
| height: 30px; | |
| background-color: transparent; | |
| position: absolute; | |
| right: 0px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| color: #000; | |
| top: 0px; | |
| } | |
| ._category ul li ul.dropdown_menu { | |
| position: relative; | |
| width: 100%; | |
| background-color: #dcd6d6; | |
| z-index: 100; | |
| left: 0px; | |
| margin-top: 0px; | |
| display: none; | |
| top:15px; | |
| } | |
| ._category > ul > li ul li:hover ul { | |
| left: 0px; | |
| } | |
| ._category{ display:none; } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment