API tools faq
paste
Advertisement
hsianghui

electro template (modified)

hsianghui
May 21st, 2024
810
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 61.20 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  7.     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  8.  
  9.     <title>Electro - HTML Ecommerce Template</title>
  10.  
  11.     <!-- Google font -->
  12.     <link
  13.      href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700"
  14.      rel="stylesheet"
  15.    />
  16.  
  17.     <!-- Bootstrap -->
  18.     <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
  19.  
  20.     <!-- Slick -->
  21.     <link type="text/css" rel="stylesheet" href="css/slick.css" />
  22.     <link type="text/css" rel="stylesheet" href="css/slick-theme.css" />
  23.  
  24.     <!-- nouislider -->
  25.     <link type="text/css" rel="stylesheet" href="css/nouislider.min.css" />
  26.  
  27.     <!-- Font Awesome Icon -->
  28.     <link rel="stylesheet" href="css/font-awesome.min.css" />
  29.  
  30.     <!-- Custom stlylesheet -->
  31.     <link type="text/css" rel="stylesheet" href="css/style.css" />
  32.  
  33.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  34.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  35.     <!--[if lt IE 9]>
  36.      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  37.      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  38.    <![endif]-->
  39.   </head>
  40.   <body>
  41.     <!-- HEADER -->
  42.     <header>
  43.       <!-- TOP HEADER -->
  44.       <div id="top-header">
  45.         <div class="container">
  46.           <ul class="header-links pull-left">
  47.             <li>
  48.               <a href="#"><i class="fa fa-phone"></i> +021-95-51-84</a>
  49.             </li>
  50.             <li>
  51.               <a href="#"><i class="fa fa-envelope-o"></i> email@email.com</a>
  52.             </li>
  53.             <li>
  54.               <a href="#"
  55.                ><i class="fa fa-map-marker"></i> 1734 Stonecoal Road</a
  56.              >
  57.             </li>
  58.           </ul>
  59.           <ul class="header-links pull-right">
  60.             <li>
  61.               <a href="#"><i class="fa fa-dollar"></i> USD</a>
  62.             </li>
  63.             <li>
  64.               <a href="#"><i class="fa fa-user-o"></i> My Account</a>
  65.             </li>
  66.           </ul>
  67.         </div>
  68.       </div>
  69.       <!-- /TOP HEADER -->
  70.  
  71.       <!-- MAIN HEADER -->
  72.       <div id="header">
  73.         <!-- container -->
  74.         <div class="container">
  75.           <!-- row -->
  76.           <div class="row">
  77.             <!-- LOGO -->
  78.             <div class="col-md-3">
  79.               <div class="header-logo">
  80.                 <a href="#" class="logo">
  81.                   <img src="./img/logo.png" alt="" />
  82.                 </a>
  83.               </div>
  84.             </div>
  85.             <!-- /LOGO -->
  86.  
  87.             <!-- SEARCH BAR -->
  88.             <div class="col-md-6">
  89.               <div class="header-search">
  90.                 <form>
  91.                   <select class="input-select">
  92.                     <option value="0">All Categories</option>
  93.                     <option value="1">Category 01</option>
  94.                     <option value="1">Category 02</option>
  95.                   </select>
  96.                   <input class="input" placeholder="Search here" />
  97.                   <button class="search-btn">Search</button>
  98.                 </form>
  99.               </div>
  100.             </div>
  101.             <!-- /SEARCH BAR -->
  102.  
  103.             <!-- ACCOUNT -->
  104.             <div class="col-md-3 clearfix">
  105.               <div class="header-ctn">
  106.                 <!-- Wishlist -->
  107.                 <div>
  108.                   <a href="#">
  109.                     <i class="fa fa-heart-o"></i>
  110.                     <span>Your Wishlist</span>
  111.                     <div class="qty">2</div>
  112.                   </a>
  113.                 </div>
  114.                 <!-- /Wishlist -->
  115.  
  116.                 <!-- Cart -->
  117.                 <div class="dropdown">
  118.                   <a
  119.                    class="dropdown-toggle"
  120.                    data-toggle="dropdown"
  121.                    aria-expanded="true"
  122.                  >
  123.                     <i class="fa fa-shopping-cart"></i>
  124.                     <span>Your Cart</span>
  125.                     <div class="qty">3</div>
  126.                   </a>
  127.                   <div class="cart-dropdown">
  128.                     <div class="cart-list">
  129.                       <div class="product-widget">
  130.                         <div class="product-img">
  131.                           <img src="./img/product01.png" alt="" />
  132.                         </div>
  133.                         <div class="product-body">
  134.                           <h3 class="product-name">
  135.                             <a href="#">product name goes here</a>
  136.                           </h3>
  137.                           <h4 class="product-price">
  138.                             <span class="qty">1x</span>$980.00
  139.                           </h4>
  140.                         </div>
  141.                         <button class="delete">
  142.                           <i class="fa fa-close"></i>
  143.                         </button>
  144.                       </div>
  145.  
  146.                       <div class="product-widget">
  147.                         <div class="product-img">
  148.                           <img src="./img/product02.png" alt="" />
  149.                         </div>
  150.                         <div class="product-body">
  151.                           <h3 class="product-name">
  152.                             <a href="#">product name goes here</a>
  153.                           </h3>
  154.                           <h4 class="product-price">
  155.                             <span class="qty">3x</span>$980.00
  156.                           </h4>
  157.                         </div>
  158.                         <button class="delete">
  159.                           <i class="fa fa-close"></i>
  160.                         </button>
  161.                       </div>
  162.                     </div>
  163.                     <div class="cart-summary">
  164.                       <small>3 Item(s) selected</small>
  165.                       <h5>SUBTOTAL: $2940.00</h5>
  166.                     </div>
  167.                     <div class="cart-btns">
  168.                       <a href="#">View Cart</a>
  169.                       <a href="#"
  170.                        >Checkout <i class="fa fa-arrow-circle-right"></i
  171.                      ></a>
  172.                     </div>
  173.                   </div>
  174.                 </div>
  175.                 <!-- /Cart -->
  176.  
  177.                 <!-- Menu Toogle -->
  178.                 <div class="menu-toggle">
  179.                   <a href="#">
  180.                     <i class="fa fa-bars"></i>
  181.                     <span>Menu</span>
  182.                   </a>
  183.                 </div>
  184.                 <!-- /Menu Toogle -->
  185.               </div>
  186.             </div>
  187.             <!-- /ACCOUNT -->
  188.           </div>
  189.           <!-- row -->
  190.         </div>
  191.         <!-- container -->
  192.       </div>
  193.       <!-- /MAIN HEADER -->
  194.     </header>
  195.     <!-- /HEADER -->
  196.  
  197.     <!-- NAVIGATION -->
  198.     <nav id="navigation">
  199.       <!-- container -->
  200.       <div class="container">
  201.         <!-- responsive-nav -->
  202.         <div id="responsive-nav">
  203.           <!-- newly added-->
  204.           <div id="categorylist1">
  205.             <!-- NAV -->
  206.             <ul class="main-nav nav navbar-nav">
  207.               <li class="active"><a href="#">Home</a></li>
  208.               <li><a href="#">Hot Deals</a></li>
  209.               <li><a href="#">Categories</a></li>
  210.               <li><a href="#">Laptops</a></li>
  211.               <li><a href="#">Smartphones</a></li>
  212.               <li><a href="#">Cameras</a></li>
  213.               <li><a href="#">Accessories</a></li>
  214.             </ul>
  215.             <!-- /NAV -->
  216.           </div>
  217.           <!-- newly added-->
  218.         </div>
  219.         <!-- /responsive-nav -->
  220.       </div>
  221.       <!-- /container -->
  222.     </nav>
  223.     <!-- /NAVIGATION -->
  224.  
  225.     <!-- SECTION -->
  226.     <div class="section">
  227.       <!-- container -->
  228.       <div class="container">
  229.         <!-- row -->
  230.         <div class="row">
  231.           <!-- shop -->
  232.           <div class="col-md-4 col-xs-6">
  233.             <div class="shop">
  234.               <div class="shop-img">
  235.                 <img src="./img/shop01.png" alt="" />
  236.               </div>
  237.               <div class="shop-body">
  238.                 <h3>Laptop<br />Collection</h3>
  239.                 <a href="#" class="cta-btn"
  240.                  >Shop now <i class="fa fa-arrow-circle-right"></i
  241.                ></a>
  242.               </div>
  243.             </div>
  244.           </div>
  245.           <!-- /shop -->
  246.  
  247.           <!-- shop -->
  248.           <div class="col-md-4 col-xs-6">
  249.             <div class="shop">
  250.               <div class="shop-img">
  251.                 <img src="./img/shop03.png" alt="" />
  252.               </div>
  253.               <div class="shop-body">
  254.                 <h3>Accessories<br />Collection</h3>
  255.                 <a href="#" class="cta-btn"
  256.                  >Shop now <i class="fa fa-arrow-circle-right"></i
  257.                ></a>
  258.               </div>
  259.             </div>
  260.           </div>
  261.           <!-- /shop -->
  262.  
  263.           <!-- shop -->
  264.           <div class="col-md-4 col-xs-6">
  265.             <div class="shop">
  266.               <div class="shop-img">
  267.                 <img src="./img/shop02.png" alt="" />
  268.               </div>
  269.               <div class="shop-body">
  270.                 <h3>Cameras<br />Collection</h3>
  271.                 <a href="#" class="cta-btn"
  272.                  >Shop now <i class="fa fa-arrow-circle-right"></i
  273.                ></a>
  274.               </div>
  275.             </div>
  276.           </div>
  277.           <!-- /shop -->
  278.         </div>
  279.         <!-- /row -->
  280.       </div>
  281.       <!-- /container -->
  282.     </div>
  283.     <!-- /SECTION -->
  284.  
  285.     <!-- SECTION -->
  286.     <div class="section">
  287.       <!-- container -->
  288.       <div class="container">
  289.         <!-- row -->
  290.         <div class="row">
  291.           <!-- section title -->
  292.           <div class="col-md-12">
  293.             <div class="section-title">
  294.               <h3 class="title">New Products</h3>
  295.               <div class="section-nav">
  296.                 <!-- newly added-->
  297.                 <div class="top-categories">
  298.                   <ul class="section-tab-nav tab-nav">
  299.                     <li class="active">
  300.                       <a data-toggle="tab" href="#tab1">Laptops</a>
  301.                     </li>
  302.                     <li><a data-toggle="tab" href="#tab1">Smartphones</a></li>
  303.                     <li><a data-toggle="tab" href="#tab1">Cameras</a></li>
  304.                     <li><a data-toggle="tab" href="#tab1">Accessories</a></li>
  305.                   </ul>
  306.                 </div>
  307.                 <!-- newly added-->
  308.               </div>
  309.             </div>
  310.           </div>
  311.           <!-- /section title -->
  312.  
  313.           <!-- Products tab & slick -->
  314.           <div class="col-md-12">
  315.             <div class="row">
  316.               <div class="products-tabs">
  317.                 <!-- tab -->
  318.                 <div id="tab1" class="tab-pane active">
  319.                   <div class="products-slick" data-nav="#slick-nav-1">
  320.                     <!-- product -->
  321.                     <div class="product">
  322.                       <div class="product-img">
  323.                         <img src="./img/product01.png" alt="" />
  324.                         <div class="product-label">
  325.                           <span class="sale">-30%</span>
  326.                           <span class="new">NEW</span>
  327.                         </div>
  328.                       </div>
  329.                       <div class="product-body">
  330.                         <p class="product-category">Category</p>
  331.                         <h3 class="product-name">
  332.                           <a href="#">product name goes here</a>
  333.                         </h3>
  334.                         <h4 class="product-price">
  335.                           $980.00 <del class="product-old-price">$990.00</del>
  336.                         </h4>
  337.                         <div class="product-rating">
  338.                           <i class="fa fa-star"></i>
  339.                           <i class="fa fa-star"></i>
  340.                           <i class="fa fa-star"></i>
  341.                           <i class="fa fa-star"></i>
  342.                           <i class="fa fa-star"></i>
  343.                         </div>
  344.                         <div class="product-btns">
  345.                           <button class="add-to-wishlist">
  346.                             <i class="fa fa-heart-o"></i
  347.                            ><span class="tooltipp">add to wishlist</span>
  348.                           </button>
  349.                           <button class="add-to-compare">
  350.                             <i class="fa fa-exchange"></i
  351.                            ><span class="tooltipp">add to compare</span>
  352.                           </button>
  353.                           <button class="quick-view">
  354.                             <i class="fa fa-eye"></i
  355.                            ><span class="tooltipp">quick view</span>
  356.                           </button>
  357.                         </div>
  358.                       </div>
  359.                       <div class="add-to-cart">
  360.                         <button class="add-to-cart-btn">
  361.                           <i class="fa fa-shopping-cart"></i> add to cart
  362.                         </button>
  363.                       </div>
  364.                     </div>
  365.                     <!-- /product -->
  366.  
  367.                     <!-- product -->
  368.                     <div class="product">
  369.                       <div class="product-img">
  370.                         <img src="./img/product02.png" alt="" />
  371.                         <div class="product-label">
  372.                           <span class="new">NEW</span>
  373.                         </div>
  374.                       </div>
  375.                       <div class="product-body">
  376.                         <p class="product-category">Category</p>
  377.                         <h3 class="product-name">
  378.                           <a href="#">product name goes here</a>
  379.                         </h3>
  380.                         <h4 class="product-price">
  381.                           $980.00 <del class="product-old-price">$990.00</del>
  382.                         </h4>
  383.                         <div class="product-rating">
  384.                           <i class="fa fa-star"></i>
  385.                           <i class="fa fa-star"></i>
  386.                           <i class="fa fa-star"></i>
  387.                           <i class="fa fa-star"></i>
  388.                           <i class="fa fa-star-o"></i>
  389.                         </div>
  390.                         <div class="product-btns">
  391.                           <button class="add-to-wishlist">
  392.                             <i class="fa fa-heart-o"></i
  393.                            ><span class="tooltipp">add to wishlist</span>
  394.                           </button>
  395.                           <button class="add-to-compare">
  396.                             <i class="fa fa-exchange"></i
  397.                            ><span class="tooltipp">add to compare</span>
  398.                           </button>
  399.                           <button class="quick-view">
  400.                             <i class="fa fa-eye"></i
  401.                            ><span class="tooltipp">quick view</span>
  402.                           </button>
  403.                         </div>
  404.                       </div>
  405.                       <div class="add-to-cart">
  406.                         <button class="add-to-cart-btn">
  407.                           <i class="fa fa-shopping-cart"></i> add to cart
  408.                         </button>
  409.                       </div>
  410.                     </div>
  411.                     <!-- /product -->
  412.  
  413.                     <!-- product -->
  414.                     <div class="product">
  415.                       <div class="product-img">
  416.                         <img src="./img/product03.png" alt="" />
  417.                         <div class="product-label">
  418.                           <span class="sale">-30%</span>
  419.                         </div>
  420.                       </div>
  421.                       <div class="product-body">
  422.                         <p class="product-category">Category</p>
  423.                         <h3 class="product-name">
  424.                           <a href="#">product name goes here</a>
  425.                         </h3>
  426.                         <h4 class="product-price">
  427.                           $980.00 <del class="product-old-price">$990.00</del>
  428.                         </h4>
  429.                         <div class="product-rating"></div>
  430.                         <div class="product-btns">
  431.                           <button class="add-to-wishlist">
  432.                             <i class="fa fa-heart-o"></i
  433.                            ><span class="tooltipp">add to wishlist</span>
  434.                           </button>
  435.                           <button class="add-to-compare">
  436.                             <i class="fa fa-exchange"></i
  437.                            ><span class="tooltipp">add to compare</span>
  438.                           </button>
  439.                           <button class="quick-view">
  440.                             <i class="fa fa-eye"></i
  441.                            ><span class="tooltipp">quick view</span>
  442.                           </button>
  443.                         </div>
  444.                       </div>
  445.                       <div class="add-to-cart">
  446.                         <button class="add-to-cart-btn">
  447.                           <i class="fa fa-shopping-cart"></i> add to cart
  448.                         </button>
  449.                       </div>
  450.                     </div>
  451.                     <!-- /product -->
  452.  
  453.                     <!-- product -->
  454.                     <div class="product">
  455.                       <div class="product-img">
  456.                         <img src="./img/product04.png" alt="" />
  457.                       </div>
  458.                       <div class="product-body">
  459.                         <p class="product-category">Category</p>
  460.                         <h3 class="product-name">
  461.                           <a href="#">product name goes here</a>
  462.                         </h3>
  463.                         <h4 class="product-price">
  464.                           $980.00 <del class="product-old-price">$990.00</del>
  465.                         </h4>
  466.                         <div class="product-rating">
  467.                           <i class="fa fa-star"></i>
  468.                           <i class="fa fa-star"></i>
  469.                           <i class="fa fa-star"></i>
  470.                           <i class="fa fa-star"></i>
  471.                           <i class="fa fa-star"></i>
  472.                         </div>
  473.                         <div class="product-btns">
  474.                           <button class="add-to-wishlist">
  475.                             <i class="fa fa-heart-o"></i
  476.                            ><span class="tooltipp">add to wishlist</span>
  477.                           </button>
  478.                           <button class="add-to-compare">
  479.                             <i class="fa fa-exchange"></i
  480.                            ><span class="tooltipp">add to compare</span>
  481.                           </button>
  482.                           <button class="quick-view">
  483.                             <i class="fa fa-eye"></i
  484.                            ><span class="tooltipp">quick view</span>
  485.                           </button>
  486.                         </div>
  487.                       </div>
  488.                       <div class="add-to-cart">
  489.                         <button class="add-to-cart-btn">
  490.                           <i class="fa fa-shopping-cart"></i> add to cart
  491.                         </button>
  492.                       </div>
  493.                     </div>
  494.                     <!-- /product -->
  495.  
  496.                     <!-- product -->
  497.                     <div class="product">
  498.                       <div class="product-img">
  499.                         <img src="./img/product05.png" alt="" />
  500.                       </div>
  501.                       <div class="product-body">
  502.                         <p class="product-category">Category</p>
  503.                         <h3 class="product-name">
  504.                           <a href="#">product name goes here</a>
  505.                         </h3>
  506.                         <h4 class="product-price">
  507.                           $980.00 <del class="product-old-price">$990.00</del>
  508.                         </h4>
  509.                         <div class="product-rating">
  510.                           <i class="fa fa-star"></i>
  511.                           <i class="fa fa-star"></i>
  512.                           <i class="fa fa-star"></i>
  513.                           <i class="fa fa-star"></i>
  514.                           <i class="fa fa-star"></i>
  515.                         </div>
  516.                         <div class="product-btns">
  517.                           <button class="add-to-wishlist">
  518.                             <i class="fa fa-heart-o"></i
  519.                            ><span class="tooltipp">add to wishlist</span>
  520.                           </button>
  521.                           <button class="add-to-compare">
  522.                             <i class="fa fa-exchange"></i
  523.                            ><span class="tooltipp">add to compare</span>
  524.                           </button>
  525.                           <button class="quick-view">
  526.                             <i class="fa fa-eye"></i
  527.                            ><span class="tooltipp">quick view</span>
  528.                           </button>
  529.                         </div>
  530.                       </div>
  531.                       <div class="add-to-cart">
  532.                         <button class="add-to-cart-btn">
  533.                           <i class="fa fa-shopping-cart"></i> add to cart
  534.                         </button>
  535.                       </div>
  536.                     </div>
  537.                     <!-- /product -->
  538.                   </div>
  539.                   <div id="slick-nav-1" class="products-slick-nav"></div>
  540.                 </div>
  541.                 <!-- /tab -->
  542.               </div>
  543.             </div>
  544.           </div>
  545.           <!-- Products tab & slick -->
  546.         </div>
  547.         <!-- /row -->
  548.       </div>
  549.       <!-- /container -->
  550.     </div>
  551.     <!-- /SECTION -->
  552.  
  553.     <!-- HOT DEAL SECTION -->
  554.     <div id="hot-deal" class="section">
  555.       <!-- container -->
  556.       <div class="container">
  557.         <!-- row -->
  558.         <div class="row">
  559.           <div class="col-md-12">
  560.             <div class="hot-deal">
  561.               <ul class="hot-deal-countdown">
  562.                 <li>
  563.                   <div>
  564.                     <h3>02</h3>
  565.                     <span>Days</span>
  566.                   </div>
  567.                 </li>
  568.                 <li>
  569.                   <div>
  570.                     <h3>10</h3>
  571.                     <span>Hours</span>
  572.                   </div>
  573.                 </li>
  574.                 <li>
  575.                   <div>
  576.                     <h3>34</h3>
  577.                     <span>Mins</span>
  578.                   </div>
  579.                 </li>
  580.                 <li>
  581.                   <div>
  582.                     <h3>60</h3>
  583.                     <span>Secs</span>
  584.                   </div>
  585.                 </li>
  586.               </ul>
  587.               <h2 class="text-uppercase">hot deal this week</h2>
  588.               <p>New Collection Up to 50% OFF</p>
  589.               <a class="primary-btn cta-btn" href="#">Shop now</a>
  590.             </div>
  591.           </div>
  592.         </div>
  593.         <!-- /row -->
  594.       </div>
  595.       <!-- /container -->
  596.     </div>
  597.     <!-- /HOT DEAL SECTION -->
  598.  
  599.     <!-- SECTION -->
  600.     <div class="section">
  601.       <!-- container -->
  602.       <div class="container">
  603.         <!-- row -->
  604.         <div class="row">
  605.           <!-- section title -->
  606.           <div class="col-md-12">
  607.             <div class="section-title">
  608.               <h3 class="title">Top selling</h3>
  609.               <div class="section-nav">
  610.                 <!-- newly added-->
  611.                 <div class="top-categories">
  612.                   <ul class="section-tab-nav tab-nav">
  613.                     <li class="active">
  614.                       <a data-toggle="tab" href="#tab2">Laptops</a>
  615.                     </li>
  616.                     <li><a data-toggle="tab" href="#tab2">Smartphones</a></li>
  617.                     <li><a data-toggle="tab" href="#tab2">Cameras</a></li>
  618.                     <li><a data-toggle="tab" href="#tab2">Accessories</a></li>
  619.                   </ul>
  620.                 </div>
  621.                 <!-- newly added-->
  622.               </div>
  623.             </div>
  624.           </div>
  625.           <!-- /section title -->
  626.  
  627.           <!-- Products tab & slick -->
  628.           <div class="col-md-12">
  629.             <div class="row">
  630.               <div class="products-tabs">
  631.                 <!-- tab -->
  632.                 <div id="tab2" class="tab-pane fade in active">
  633.                   <div class="products-slick" data-nav="#slick-nav-2">
  634.                     <!-- product -->
  635.                     <div class="product">
  636.                       <div class="product-img">
  637.                         <img src="./img/product06.png" alt="" />
  638.                         <div class="product-label">
  639.                           <span class="sale">-30%</span>
  640.                           <span class="new">NEW</span>
  641.                         </div>
  642.                       </div>
  643.                       <div class="product-body">
  644.                         <p class="product-category">Category</p>
  645.                         <h3 class="product-name">
  646.                           <a href="#">product name goes here</a>
  647.                         </h3>
  648.                         <h4 class="product-price">
  649.                           $980.00 <del class="product-old-price">$990.00</del>
  650.                         </h4>
  651.                         <div class="product-rating">
  652.                           <i class="fa fa-star"></i>
  653.                           <i class="fa fa-star"></i>
  654.                           <i class="fa fa-star"></i>
  655.                           <i class="fa fa-star"></i>
  656.                           <i class="fa fa-star"></i>
  657.                         </div>
  658.                         <div class="product-btns">
  659.                           <button class="add-to-wishlist">
  660.                             <i class="fa fa-heart-o"></i
  661.                            ><span class="tooltipp">add to wishlist</span>
  662.                           </button>
  663.                           <button class="add-to-compare">
  664.                             <i class="fa fa-exchange"></i
  665.                            ><span class="tooltipp">add to compare</span>
  666.                           </button>
  667.                           <button class="quick-view">
  668.                             <i class="fa fa-eye"></i
  669.                            ><span class="tooltipp">quick view</span>
  670.                           </button>
  671.                         </div>
  672.                       </div>
  673.                       <div class="add-to-cart">
  674.                         <button class="add-to-cart-btn">
  675.                           <i class="fa fa-shopping-cart"></i> add to cart
  676.                         </button>
  677.                       </div>
  678.                     </div>
  679.                     <!-- /product -->
  680.  
  681.                     <!-- product -->
  682.                     <div class="product">
  683.                       <div class="product-img">
  684.                         <img src="./img/product07.png" alt="" />
  685.                         <div class="product-label">
  686.                           <span class="new">NEW</span>
  687.                         </div>
  688.                       </div>
  689.                       <div class="product-body">
  690.                         <p class="product-category">Category</p>
  691.                         <h3 class="product-name">
  692.                           <a href="#">product name goes here</a>
  693.                         </h3>
  694.                         <h4 class="product-price">
  695.                           $980.00 <del class="product-old-price">$990.00</del>
  696.                         </h4>
  697.                         <div class="product-rating">
  698.                           <i class="fa fa-star"></i>
  699.                           <i class="fa fa-star"></i>
  700.                           <i class="fa fa-star"></i>
  701.                           <i class="fa fa-star"></i>
  702.                           <i class="fa fa-star-o"></i>
  703.                         </div>
  704.                         <div class="product-btns">
  705.                           <button class="add-to-wishlist">
  706.                             <i class="fa fa-heart-o"></i
  707.                            ><span class="tooltipp">add to wishlist</span>
  708.                           </button>
  709.                           <button class="add-to-compare">
  710.                             <i class="fa fa-exchange"></i
  711.                            ><span class="tooltipp">add to compare</span>
  712.                           </button>
  713.                           <button class="quick-view">
  714.                             <i class="fa fa-eye"></i
  715.                            ><span class="tooltipp">quick view</span>
  716.                           </button>
  717.                         </div>
  718.                       </div>
  719.                       <div class="add-to-cart">
  720.                         <button class="add-to-cart-btn">
  721.                           <i class="fa fa-shopping-cart"></i> add to cart
  722.                         </button>
  723.                       </div>
  724.                     </div>
  725.                     <!-- /product -->
  726.  
  727.                     <!-- product -->
  728.                     <div class="product">
  729.                       <div class="product-img">
  730.                         <img src="./img/product08.png" alt="" />
  731.                         <div class="product-label">
  732.                           <span class="sale">-30%</span>
  733.                         </div>
  734.                       </div>
  735.                       <div class="product-body">
  736.                         <p class="product-category">Category</p>
  737.                         <h3 class="product-name">
  738.                           <a href="#">product name goes here</a>
  739.                         </h3>
  740.                         <h4 class="product-price">
  741.                           $980.00 <del class="product-old-price">$990.00</del>
  742.                         </h4>
  743.                         <div class="product-rating"></div>
  744.                         <div class="product-btns">
  745.                           <button class="add-to-wishlist">
  746.                             <i class="fa fa-heart-o"></i
  747.                            ><span class="tooltipp">add to wishlist</span>
  748.                           </button>
  749.                           <button class="add-to-compare">
  750.                             <i class="fa fa-exchange"></i
  751.                            ><span class="tooltipp">add to compare</span>
  752.                           </button>
  753.                           <button class="quick-view">
  754.                             <i class="fa fa-eye"></i
  755.                            ><span class="tooltipp">quick view</span>
  756.                           </button>
  757.                         </div>
  758.                       </div>
  759.                       <div class="add-to-cart">
  760.                         <button class="add-to-cart-btn">
  761.                           <i class="fa fa-shopping-cart"></i> add to cart
  762.                         </button>
  763.                       </div>
  764.                     </div>
  765.                     <!-- /product -->
  766.  
  767.                     <!-- product -->
  768.                     <div class="product">
  769.                       <div class="product-img">
  770.                         <img src="./img/product09.png" alt="" />
  771.                       </div>
  772.                       <div class="product-body">
  773.                         <p class="product-category">Category</p>
  774.                         <h3 class="product-name">
  775.                           <a href="#">product name goes here</a>
  776.                         </h3>
  777.                         <h4 class="product-price">
  778.                           $980.00 <del class="product-old-price">$990.00</del>
  779.                         </h4>
  780.                         <div class="product-rating">
  781.                           <i class="fa fa-star"></i>
  782.                           <i class="fa fa-star"></i>
  783.                           <i class="fa fa-star"></i>
  784.                           <i class="fa fa-star"></i>
  785.                           <i class="fa fa-star"></i>
  786.                         </div>
  787.                         <div class="product-btns">
  788.                           <button class="add-to-wishlist">
  789.                             <i class="fa fa-heart-o"></i
  790.                            ><span class="tooltipp">add to wishlist</span>
  791.                           </button>
  792.                           <button class="add-to-compare">
  793.                             <i class="fa fa-exchange"></i
  794.                            ><span class="tooltipp">add to compare</span>
  795.                           </button>
  796.                           <button class="quick-view">
  797.                             <i class="fa fa-eye"></i
  798.                            ><span class="tooltipp">quick view</span>
  799.                           </button>
  800.                         </div>
  801.                       </div>
  802.                       <div class="add-to-cart">
  803.                         <button class="add-to-cart-btn">
  804.                           <i class="fa fa-shopping-cart"></i> add to cart
  805.                         </button>
  806.                       </div>
  807.                     </div>
  808.                     <!-- /product -->
  809.  
  810.                     <!-- product -->
  811.                     <div class="product">
  812.                       <div class="product-img">
  813.                         <img src="./img/product01.png" alt="" />
  814.                       </div>
  815.                       <div class="product-body">
  816.                         <p class="product-category">Category</p>
  817.                         <h3 class="product-name">
  818.                           <a href="#">product name goes here</a>
  819.                         </h3>
  820.                         <h4 class="product-price">
  821.                           $980.00 <del class="product-old-price">$990.00</del>
  822.                         </h4>
  823.                         <div class="product-rating">
  824.                           <i class="fa fa-star"></i>
  825.                           <i class="fa fa-star"></i>
  826.                           <i class="fa fa-star"></i>
  827.                           <i class="fa fa-star"></i>
  828.                           <i class="fa fa-star"></i>
  829.                         </div>
  830.                         <div class="product-btns">
  831.                           <button class="add-to-wishlist">
  832.                             <i class="fa fa-heart-o"></i
  833.                            ><span class="tooltipp">add to wishlist</span>
  834.                           </button>
  835.                           <button class="add-to-compare">
  836.                             <i class="fa fa-exchange"></i
  837.                            ><span class="tooltipp">add to compare</span>
  838.                           </button>
  839.                           <button class="quick-view">
  840.                             <i class="fa fa-eye"></i
  841.                            ><span class="tooltipp">quick view</span>
  842.                           </button>
  843.                         </div>
  844.                       </div>
  845.                       <div class="add-to-cart">
  846.                         <button class="add-to-cart-btn">
  847.                           <i class="fa fa-shopping-cart"></i> add to cart
  848.                         </button>
  849.                       </div>
  850.                     </div>
  851.                     <!-- /product -->
  852.                   </div>
  853.                   <div id="slick-nav-2" class="products-slick-nav"></div>
  854.                 </div>
  855.                 <!-- /tab -->
  856.               </div>
  857.             </div>
  858.           </div>
  859.           <!-- /Products tab & slick -->
  860.         </div>
  861.         <!-- /row -->
  862.       </div>
  863.       <!-- /container -->
  864.     </div>
  865.     <!-- /SECTION -->
  866.  
  867.     <!-- SECTION -->
  868.     <div class="section">
  869.       <!-- container -->
  870.       <div class="container">
  871.         <!-- row -->
  872.         <div class="row">
  873.           <div class="col-md-4 col-xs-6">
  874.             <div class="section-title">
  875.               <h4 class="title">Top selling</h4>
  876.               <div class="section-nav">
  877.                 <div id="slick-nav-3" class="products-slick-nav"></div>
  878.               </div>
  879.             </div>
  880.  
  881.             <div class="products-widget-slick" data-nav="#slick-nav-3">
  882.               <div>
  883.                 <!-- product widget -->
  884.                 <div class="product-widget">
  885.                   <div class="product-img">
  886.                     <img src="./img/product07.png" alt="" />
  887.                   </div>
  888.                   <div class="product-body">
  889.                     <p class="product-category">Category</p>
  890.                     <h3 class="product-name">
  891.                       <a href="#">product name goes here</a>
  892.                     </h3>
  893.                     <h4 class="product-price">
  894.                       $980.00 <del class="product-old-price">$990.00</del>
  895.                     </h4>
  896.                   </div>
  897.                 </div>
  898.                 <!-- /product widget -->
  899.  
  900.                 <!-- product widget -->
  901.                 <div class="product-widget">
  902.                   <div class="product-img">
  903.                     <img src="./img/product08.png" alt="" />
  904.                   </div>
  905.                   <div class="product-body">
  906.                     <p class="product-category">Category</p>
  907.                     <h3 class="product-name">
  908.                       <a href="#">product name goes here</a>
  909.                     </h3>
  910.                     <h4 class="product-price">
  911.                       $980.00 <del class="product-old-price">$990.00</del>
  912.                     </h4>
  913.                   </div>
  914.                 </div>
  915.                 <!-- /product widget -->
  916.  
  917.                 <!-- product widget -->
  918.                 <div class="product-widget">
  919.                   <div class="product-img">
  920.                     <img src="./img/product09.png" alt="" />
  921.                   </div>
  922.                   <div class="product-body">
  923.                     <p class="product-category">Category</p>
  924.                     <h3 class="product-name">
  925.                       <a href="#">product name goes here</a>
  926.                     </h3>
  927.                     <h4 class="product-price">
  928.                       $980.00 <del class="product-old-price">$990.00</del>
  929.                     </h4>
  930.                   </div>
  931.                 </div>
  932.                 <!-- product widget -->
  933.               </div>
  934.  
  935.               <div>
  936.                 <!-- product widget -->
  937.                 <div class="product-widget">
  938.                   <div class="product-img">
  939.                     <img src="./img/product01.png" alt="" />
  940.                   </div>
  941.                   <div class="product-body">
  942.                     <p class="product-category">Category</p>
  943.                     <h3 class="product-name">
  944.                       <a href="#">product name goes here</a>
  945.                     </h3>
  946.                     <h4 class="product-price">
  947.                       $980.00 <del class="product-old-price">$990.00</del>
  948.                     </h4>
  949.                   </div>
  950.                 </div>
  951.                 <!-- /product widget -->
  952.  
  953.                 <!-- product widget -->
  954.                 <div class="product-widget">
  955.                   <div class="product-img">
  956.                     <img src="./img/product02.png" alt="" />
  957.                   </div>
  958.                   <div class="product-body">
  959.                     <p class="product-category">Category</p>
  960.                     <h3 class="product-name">
  961.                       <a href="#">product name goes here</a>
  962.                     </h3>
  963.                     <h4 class="product-price">
  964.                       $980.00 <del class="product-old-price">$990.00</del>
  965.                     </h4>
  966.                   </div>
  967.                 </div>
  968.                 <!-- /product widget -->
  969.  
  970.                 <!-- product widget -->
  971.                 <div class="product-widget">
  972.                   <div class="product-img">
  973.                     <img src="./img/product03.png" alt="" />
  974.                   </div>
  975.                   <div class="product-body">
  976.                     <p class="product-category">Category</p>
  977.                     <h3 class="product-name">
  978.                       <a href="#">product name goes here</a>
  979.                     </h3>
  980.                     <h4 class="product-price">
  981.                       $980.00 <del class="product-old-price">$990.00</del>
  982.                     </h4>
  983.                   </div>
  984.                 </div>
  985.                 <!-- product widget -->
  986.               </div>
  987.             </div>
  988.           </div>
  989.  
  990.           <div class="col-md-4 col-xs-6">
  991.             <div class="section-title">
  992.               <h4 class="title">Top selling</h4>
  993.               <div class="section-nav">
  994.                 <div id="slick-nav-4" class="products-slick-nav"></div>
  995.               </div>
  996.             </div>
  997.  
  998.             <div class="products-widget-slick" data-nav="#slick-nav-4">
  999.               <div>
  1000.                 <!-- product widget -->
  1001.                 <div class="product-widget">
  1002.                   <div class="product-img">
  1003.                     <img src="./img/product04.png" alt="" />
  1004.                   </div>
  1005.                   <div class="product-body">
  1006.                     <p class="product-category">Category</p>
  1007.                     <h3 class="product-name">
  1008.                       <a href="#">product name goes here</a>
  1009.                     </h3>
  1010.                     <h4 class="product-price">
  1011.                       $980.00 <del class="product-old-price">$990.00</del>
  1012.                     </h4>
  1013.                   </div>
  1014.                 </div>
  1015.                 <!-- /product widget -->
  1016.  
  1017.                 <!-- product widget -->
  1018.                 <div class="product-widget">
  1019.                   <div class="product-img">
  1020.                     <img src="./img/product05.png" alt="" />
  1021.                   </div>
  1022.                   <div class="product-body">
  1023.                     <p class="product-category">Category</p>
  1024.                     <h3 class="product-name">
  1025.                       <a href="#">product name goes here</a>
  1026.                     </h3>
  1027.                     <h4 class="product-price">
  1028.                       $980.00 <del class="product-old-price">$990.00</del>
  1029.                     </h4>
  1030.                   </div>
  1031.                 </div>
  1032.                 <!-- /product widget -->
  1033.  
  1034.                 <!-- product widget -->
  1035.                 <div class="product-widget">
  1036.                   <div class="product-img">
  1037.                     <img src="./img/product06.png" alt="" />
  1038.                   </div>
  1039.                   <div class="product-body">
  1040.                     <p class="product-category">Category</p>
  1041.                     <h3 class="product-name">
  1042.                       <a href="#">product name goes here</a>
  1043.                     </h3>
  1044.                     <h4 class="product-price">
  1045.                       $980.00 <del class="product-old-price">$990.00</del>
  1046.                     </h4>
  1047.                   </div>
  1048.                 </div>
  1049.                 <!-- product widget -->
  1050.               </div>
  1051.  
  1052.               <div>
  1053.                 <!-- product widget -->
  1054.                 <div class="product-widget">
  1055.                   <div class="product-img">
  1056.                     <img src="./img/product07.png" alt="" />
  1057.                   </div>
  1058.                   <div class="product-body">
  1059.                     <p class="product-category">Category</p>
  1060.                     <h3 class="product-name">
  1061.                       <a href="#">product name goes here</a>
  1062.                     </h3>
  1063.                     <h4 class="product-price">
  1064.                       $980.00 <del class="product-old-price">$990.00</del>
  1065.                     </h4>
  1066.                   </div>
  1067.                 </div>
  1068.                 <!-- /product widget -->
  1069.  
  1070.                 <!-- product widget -->
  1071.                 <div class="product-widget">
  1072.                   <div class="product-img">
  1073.                     <img src="./img/product08.png" alt="" />
  1074.                   </div>
  1075.                   <div class="product-body">
  1076.                     <p class="product-category">Category</p>
  1077.                     <h3 class="product-name">
  1078.                       <a href="#">product name goes here</a>
  1079.                     </h3>
  1080.                     <h4 class="product-price">
  1081.                       $980.00 <del class="product-old-price">$990.00</del>
  1082.                     </h4>
  1083.                   </div>
  1084.                 </div>
  1085.                 <!-- /product widget -->
  1086.  
  1087.                 <!-- product widget -->
  1088.                 <div class="product-widget">
  1089.                   <div class="product-img">
  1090.                     <img src="./img/product09.png" alt="" />
  1091.                   </div>
  1092.                   <div class="product-body">
  1093.                     <p class="product-category">Category</p>
  1094.                     <h3 class="product-name">
  1095.                       <a href="#">product name goes here</a>
  1096.                     </h3>
  1097.                     <h4 class="product-price">
  1098.                       $980.00 <del class="product-old-price">$990.00</del>
  1099.                     </h4>
  1100.                   </div>
  1101.                 </div>
  1102.                 <!-- product widget -->
  1103.               </div>
  1104.             </div>
  1105.           </div>
  1106.  
  1107.           <div class="clearfix visible-sm visible-xs"></div>
  1108.  
  1109.           <div class="col-md-4 col-xs-6">
  1110.             <div class="section-title">
  1111.               <h4 class="title">Top selling</h4>
  1112.               <div class="section-nav">
  1113.                 <div id="slick-nav-5" class="products-slick-nav"></div>
  1114.               </div>
  1115.             </div>
  1116.  
  1117.             <div class="products-widget-slick" data-nav="#slick-nav-5">
  1118.               <div>
  1119.                 <!-- product widget -->
  1120.                 <div class="product-widget">
  1121.                   <div class="product-img">
  1122.                     <img src="./img/product01.png" alt="" />
  1123.                   </div>
  1124.                   <div class="product-body">
  1125.                     <p class="product-category">Category</p>
  1126.                     <h3 class="product-name">
  1127.                       <a href="#">product name goes here</a>
  1128.                     </h3>
  1129.                     <h4 class="product-price">
  1130.                       $980.00 <del class="product-old-price">$990.00</del>
  1131.                     </h4>
  1132.                   </div>
  1133.                 </div>
  1134.                 <!-- /product widget -->
  1135.  
  1136.                 <!-- product widget -->
  1137.                 <div class="product-widget">
  1138.                   <div class="product-img">
  1139.                     <img src="./img/product02.png" alt="" />
  1140.                   </div>
  1141.                   <div class="product-body">
  1142.                     <p class="product-category">Category</p>
  1143.                     <h3 class="product-name">
  1144.                       <a href="#">product name goes here</a>
  1145.                     </h3>
  1146.                     <h4 class="product-price">
  1147.                       $980.00 <del class="product-old-price">$990.00</del>
  1148.                     </h4>
  1149.                   </div>
  1150.                 </div>
  1151.                 <!-- /product widget -->
  1152.  
  1153.                 <!-- product widget -->
  1154.                 <div class="product-widget">
  1155.                   <div class="product-img">
  1156.                     <img src="./img/product03.png" alt="" />
  1157.                   </div>
  1158.                   <div class="product-body">
  1159.                     <p class="product-category">Category</p>
  1160.                     <h3 class="product-name">
  1161.                       <a href="#">product name goes here</a>
  1162.                     </h3>
  1163.                     <h4 class="product-price">
  1164.                       $980.00 <del class="product-old-price">$990.00</del>
  1165.                     </h4>
  1166.                   </div>
  1167.                 </div>
  1168.                 <!-- product widget -->
  1169.               </div>
  1170.  
  1171.               <div>
  1172.                 <!-- product widget -->
  1173.                 <div class="product-widget">
  1174.                   <div class="product-img">
  1175.                     <img src="./img/product04.png" alt="" />
  1176.                   </div>
  1177.                   <div class="product-body">
  1178.                     <p class="product-category">Category</p>
  1179.                     <h3 class="product-name">
  1180.                       <a href="#">product name goes here</a>
  1181.                     </h3>
  1182.                     <h4 class="product-price">
  1183.                       $980.00 <del class="product-old-price">$990.00</del>
  1184.                     </h4>
  1185.                   </div>
  1186.                 </div>
  1187.                 <!-- /product widget -->
  1188.  
  1189.                 <!-- product widget -->
  1190.                 <div class="product-widget">
  1191.                   <div class="product-img">
  1192.                     <img src="./img/product05.png" alt="" />
  1193.                   </div>
  1194.                   <div class="product-body">
  1195.                     <p class="product-category">Category</p>
  1196.                     <h3 class="product-name">
  1197.                       <a href="#">product name goes here</a>
  1198.                     </h3>
  1199.                     <h4 class="product-price">
  1200.                       $980.00 <del class="product-old-price">$990.00</del>
  1201.                     </h4>
  1202.                   </div>
  1203.                 </div>
  1204.                 <!-- /product widget -->
  1205.  
  1206.                 <!-- product widget -->
  1207.                 <div class="product-widget">
  1208.                   <div class="product-img">
  1209.                     <img src="./img/product06.png" alt="" />
  1210.                   </div>
  1211.                   <div class="product-body">
  1212.                     <p class="product-category">Category</p>
  1213.                     <h3 class="product-name">
  1214.                       <a href="#">product name goes here</a>
  1215.                     </h3>
  1216.                     <h4 class="product-price">
  1217.                       $980.00 <del class="product-old-price">$990.00</del>
  1218.                     </h4>
  1219.                   </div>
  1220.                 </div>
  1221.                 <!-- product widget -->
  1222.               </div>
  1223.             </div>
  1224.           </div>
  1225.         </div>
  1226.         <!-- /row -->
  1227.       </div>
  1228.       <!-- /container -->
  1229.     </div>
  1230.     <!-- /SECTION -->
  1231.  
  1232.     <!-- NEWSLETTER -->
  1233.     <div id="newsletter" class="section">
  1234.       <!-- container -->
  1235.       <div class="container">
  1236.         <!-- row -->
  1237.         <div class="row">
  1238.           <div class="col-md-12">
  1239.             <div class="newsletter">
  1240.               <p>Sign Up for the <strong>NEWSLETTER</strong></p>
  1241.               <form>
  1242.                 <input
  1243.                  class="input"
  1244.                  type="email"
  1245.                  placeholder="Enter Your Email"
  1246.                />
  1247.                 <button class="newsletter-btn">
  1248.                   <i class="fa fa-envelope"></i> Subscribe
  1249.                 </button>
  1250.               </form>
  1251.               <ul class="newsletter-follow">
  1252.                 <li>
  1253.                   <a href="#"><i class="fa fa-facebook"></i></a>
  1254.                 </li>
  1255.                 <li>
  1256.                   <a href="#"><i class="fa fa-twitter"></i></a>
  1257.                 </li>
  1258.                 <li>
  1259.                   <a href="#"><i class="fa fa-instagram"></i></a>
  1260.                 </li>
  1261.                 <li>
  1262.                   <a href="#"><i class="fa fa-pinterest"></i></a>
  1263.                 </li>
  1264.               </ul>
  1265.             </div>
  1266.           </div>
  1267.         </div>
  1268.         <!-- /row -->
  1269.       </div>
  1270.       <!-- /container -->
  1271.     </div>
  1272.     <!-- /NEWSLETTER -->
  1273.  
  1274.     <!-- FOOTER -->
  1275.     <footer id="footer">
  1276.       <!-- top footer -->
  1277.       <div class="section">
  1278.         <!-- container -->
  1279.         <div class="container">
  1280.           <!-- row -->
  1281.           <div class="row">
  1282.             <div class="col-md-3 col-xs-6">
  1283.               <div class="footer">
  1284.                 <h3 class="footer-title">About Us</h3>
  1285.                 <p>
  1286.                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  1287.                   do eiusmod tempor incididunt ut.
  1288.                 </p>
  1289.                 <ul class="footer-links">
  1290.                   <li>
  1291.                     <a href="#"
  1292.                      ><i class="fa fa-map-marker"></i>1734 Stonecoal Road</a
  1293.                    >
  1294.                   </li>
  1295.                   <li>
  1296.                     <a href="#"><i class="fa fa-phone"></i>+021-95-51-84</a>
  1297.                   </li>
  1298.                   <li>
  1299.                     <a href="#"
  1300.                      ><i class="fa fa-envelope-o"></i>email@email.com</a
  1301.                    >
  1302.                   </li>
  1303.                 </ul>
  1304.               </div>
  1305.             </div>
  1306.  
  1307.             <div class="col-md-3 col-xs-6">
  1308.               <div class="footer">
  1309.                 <h3 class="footer-title">Categories</h3>
  1310.                 <ul class="footer-links">
  1311.                   <li><a href="#">Hot deals</a></li>
  1312.                   <li><a href="#">Laptops</a></li>
  1313.                   <li><a href="#">Smartphones</a></li>
  1314.                   <li><a href="#">Cameras</a></li>
  1315.                   <li><a href="#">Accessories</a></li>
  1316.                 </ul>
  1317.               </div>
  1318.             </div>
  1319.  
  1320.             <div class="clearfix visible-xs"></div>
  1321.  
  1322.             <div class="col-md-3 col-xs-6">
  1323.               <div class="footer">
  1324.                 <h3 class="footer-title">Information</h3>
  1325.                 <ul class="footer-links">
  1326.                   <li><a href="#">About Us</a></li>
  1327.                   <li><a href="#">Contact Us</a></li>
  1328.                   <li><a href="#">Privacy Policy</a></li>
  1329.                   <li><a href="#">Orders and Returns</a></li>
  1330.                   <li><a href="#">Terms & Conditions</a></li>
  1331.                </ul>
  1332.              </div>
  1333.            </div>
  1334.  
  1335.            <div class="col-md-3 col-xs-6">
  1336.              <div class="footer">
  1337.                <h3 class="footer-title">Service</h3>
  1338.                <ul class="footer-links">
  1339.                  <li><a href="#">My Account</a></li>
  1340.                  <li><a href="#">View Cart</a></li>
  1341.                  <li><a href="#">Wishlist</a></li>
  1342.                  <li><a href="#">Track My Order</a></li>
  1343.                  <li><a href="#">Help</a></li>
  1344.                </ul>
  1345.              </div>
  1346.            </div>
  1347.          </div>
  1348.          <!-- /row -->
  1349.        </div>
  1350.        <!-- /container -->
  1351.      </div>
  1352.      <!-- /top footer -->
  1353.  
  1354.      <!-- bottom footer -->
  1355.      <div id="bottom-footer" class="section">
  1356.        <div class="container">
  1357.          <!-- row -->
  1358.          <div class="row">
  1359.            <div class="col-md-12 text-center">
  1360.              <ul class="footer-payments">
  1361.                <li>
  1362.                  <a href="#"><i class="fa fa-cc-visa"></i></a>
  1363.                </li>
  1364.                <li>
  1365.                  <a href="#"><i class="fa fa-credit-card"></i></a>
  1366.                </li>
  1367.                <li>
  1368.                  <a href="#"><i class="fa fa-cc-paypal"></i></a>
  1369.                </li>
  1370.                <li>
  1371.                  <a href="#"><i class="fa fa-cc-mastercard"></i></a>
  1372.                </li>
  1373.                <li>
  1374.                  <a href="#"><i class="fa fa-cc-discover"></i></a>
  1375.                </li>
  1376.                <li>
  1377.                  <a href="#"><i class="fa fa-cc-amex"></i></a>
  1378.                </li>
  1379.              </ul>
  1380.              <span class="copyright">
  1381.                <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
  1382.                Copyright &copy;
  1383.                 <script>
  1384.                   document.write(new Date().getFullYear());
  1385.                 </script>
  1386.                 All rights reserved | This template is made with
  1387.                 <i class="fa fa-heart-o" aria-hidden="true"></i> by
  1388.                 <a href="https://colorlib.com" target="_blank">Colorlib</a>
  1389.                 <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
  1390.               </span>
  1391.             </div>
  1392.           </div>
  1393.           <!-- /row -->
  1394.         </div>
  1395.         <!-- /container -->
  1396.       </div>
  1397.       <!-- /bottom footer -->
  1398.     </footer>
  1399.     <!-- /FOOTER -->
  1400.  
  1401.     <!-- jQuery Plugins -->
  1402.     <script src="js/jquery.min.js"></script>
  1403.     <script src="js/bootstrap.min.js"></script>
  1404.     <script src="js/slick.min.js"></script>
  1405.     <script src="js/nouislider.min.js"></script>
  1406.     <script src="js/jquery.zoom.min.js"></script>
  1407.     <script src="js/main.js"></script>
  1408.  
  1409.     <script>
  1410.       fetch("https://dummyjson.com/products/categories")
  1411.         .then((res) => res.json())
  1412.         .then((categories) => {
  1413.           console.log(categories);
  1414.  
  1415.           let categoryHTML1 = "";
  1416.  
  1417.           //iterate through each category (top 10)
  1418.           for (let i = 0; i < 10; i++) {
  1419.            const category = categories[i];
  1420.            categoryHTML1 += `<li><a href="#">${category}</a></li>`;
  1421.           }
  1422.  
  1423.           //generate the HTML by codes
  1424.           let generatedHTML1 = `
  1425.                 <ul class="main-nav nav navbar-nav" id="categorylist">
  1426.                <li class="active"><a href="#">Home</a></li>
  1427.                ${categoryHTML1}
  1428.             </ul>`;
  1429.  
  1430.           document.getElementById("categorylist1").innerHTML = generatedHTML1;
  1431.  
  1432.           //iterate through each category (top 4) and formulate the html
  1433.           let categoryHTML2 = `
  1434.             <li class="active">
  1435.                 <a data-toggle="tab" href="#tab1">${categories[0]}</a>
  1436.             </li>
  1437.         `;
  1438.           for (let i = 1; i < 4; i++) {
  1439.            const category = categories[i];
  1440.            categoryHTML2 += `<li><a data-toggle="tab" href="#tab1">${category}</a></li>`;
  1441.           }
  1442.  
  1443.           //generate the HTML by codes
  1444.           let generatedHTML2 = `
  1445.                 <ul class="section-tab-nav tab-nav">
  1446.             <li class="active">
  1447.                 <a data-toggle="tab" href="#tab1">Laptops</a>
  1448.             </li>
  1449.             ${categoryHTML2}
  1450.         </ul>`;
  1451.           document.getElementsByClassName("top-categories")[0].innerHTML =
  1452.             generatedHTML2;
  1453.         });
  1454.  
  1455.       //get the first 6 products
  1456.       fetch("https://dummyjson.com/products?limit=6")
  1457.         .then((res) => res.json())
  1458.         .then((products) => {
  1459.           products = products.products;
  1460.           console.log(products);
  1461.  
  1462.           let productsHTML = "";
  1463.  
  1464.           //iterate through each category (top 5) and formulate the html
  1465.           for (const product of products) {
  1466.             const {
  1467.               title,
  1468.               price,
  1469.               rating,
  1470.               discountPercentage,
  1471.               category,
  1472.               thumbnail,
  1473.             } = product;
  1474.             const originalPrice = (
  1475.               price *
  1476.               ((100 + discountPercentage) / 100)
  1477.             ).toFixed(2);
  1478.  
  1479.             const ratingRoundOff = Math.round(rating);
  1480.  
  1481.             let ratingHTML = "";
  1482.  
  1483.             for (let i = 0; i < ratingRoundOff; i++) {
  1484.              ratingHTML += `<i class="fa fa-star"></i>`;
  1485.             }
  1486.  
  1487.             for (let i = 0; i < 5 - ratingRoundOff; i++) {
  1488.              ratingHTML += `<i class="fa fa-star-o"></i>`;
  1489.             }
  1490.  
  1491.             productsHTML += `
  1492.             <!-- product -->
  1493.             <div class="product">
  1494.                 <div class="product-img">
  1495.                     <img src="${thumbnail}" alt=""/>
  1496.         <div class="product-label">
  1497.             <span class="sale">-${discountPercentage}%</span>
  1498.         </div>
  1499.                 </div>
  1500.                 <div class="product-body">
  1501.                     <p class="product-category">${category}</p>
  1502.                     <h3 class="product-name">
  1503.                         <a href="#">${title}</a>
  1504.                     </h3>
  1505.                     <h4 class="product-price">
  1506.                         $${price} <del class="product-old-price">$${originalPrice}</del>
  1507.                     </h4>
  1508.                     <div class="product-rating">
  1509.                         ${ratingHTML}
  1510.                     </div>
  1511.                     <div class="product-btns">
  1512.                         <button class="add-to-wishlist">
  1513.                             <i class="fa fa-heart-o"></i
  1514.                             ><span class="tooltipp">add to wishlist</span>
  1515.                         </button>
  1516.                         <button class="add-to-compare">
  1517.                             <i class="fa fa-exchange"></i
  1518.                             ><span class="tooltipp">add to compare</span>
  1519.                         </button>
  1520.                         <button class="quick-view">
  1521.                             <i class="fa fa-eye"></i
  1522.                             ><span class="tooltipp">quick view</span>
  1523.                         </button>
  1524.                     </div>
  1525.                 </div>
  1526.                 <div class="add-to-cart">
  1527.                     <button class="add-to-cart-btn">
  1528.                         <i class="fa fa-shopping-cart"></i> add to cart
  1529.                     </button>
  1530.                 </div>
  1531.             </div>
  1532.             <!-- /product -->
  1533.  
  1534.             `;
  1535.           }
  1536.  
  1537.           //generate the HTML by codes
  1538.           //generate the HTML by codes
  1539.           let generateProductHTML = `
  1540.         <div id="tab1" class="tab-pane active">
  1541.             <div class="products-slick" data-nav="#slick-nav-1">
  1542.                 ${productsHTML}
  1543.             </div>
  1544.             <div id="slick-nav-1" class="products-slick-nav"></div>
  1545.         </div>
  1546.       `;
  1547.  
  1548.           document.getElementById("tab1").innerHTML = generateProductHTML;
  1549.  
  1550.           // Products Slick
  1551.           $(".products-slick").each(function () {
  1552.             var $this = $(this),
  1553.               $nav = $this.attr("data-nav");
  1554.  
  1555.             $this.slick({
  1556.               slidesToShow: 4,
  1557.               slidesToScroll: 1,
  1558.               autoplay: true,
  1559.               infinite: true,
  1560.               speed: 300,
  1561.               dots: false,
  1562.               arrows: true,
  1563.               appendArrows: $nav ? $nav : false,
  1564.               responsive: [
  1565.                 {
  1566.                   breakpoint: 991,
  1567.                   settings: {
  1568.                     slidesToShow: 2,
  1569.                     slidesToScroll: 1,
  1570.                   },
  1571.                 },
  1572.                 {
  1573.                   breakpoint: 480,
  1574.                   settings: {
  1575.                     slidesToShow: 1,
  1576.                     slidesToScroll: 1,
  1577.                   },
  1578.                 },
  1579.               ],
  1580.             });
  1581.           });
  1582.         });
  1583.     </script>
  1584.   </body>
  1585. </html>
  1586.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!