banner area added

akashyap2013 · Apr 15, 2020 · 0471018 · 0471018
1 parent 70db4db
commit 0471018
Show file tree

Hide file tree

Showing 27 changed files with 133 additions and 3 deletions.
diff --git a/assets/Banner1.png b/assets/Banner1.png
diff --git a/assets/Banner2.png b/assets/Banner2.png
diff --git a/assets/banner1-cr-500x150.jpg b/assets/banner1-cr-500x150.jpg
diff --git a/assets/banner2-cr-500x150.jpg b/assets/banner2-cr-500x150.jpg
diff --git a/assets/blog/blog1.jpg b/assets/blog/blog1.jpg
diff --git a/assets/blog/blog2.jpg b/assets/blog/blog2.jpg
diff --git a/assets/blog/blog3.jpg b/assets/blog/blog3.jpg
diff --git a/assets/blog/empty_cart.png b/assets/blog/empty_cart.png
diff --git a/assets/products/1.png b/assets/products/1.png
diff --git a/assets/products/10.png b/assets/products/10.png
diff --git a/assets/products/11.png b/assets/products/11.png
diff --git a/assets/products/12.png b/assets/products/12.png
diff --git a/assets/products/13.png b/assets/products/13.png
diff --git a/assets/products/14.png b/assets/products/14.png
diff --git a/assets/products/15.png b/assets/products/15.png
diff --git a/assets/products/2.png b/assets/products/2.png
diff --git a/assets/products/3.png b/assets/products/3.png
diff --git a/assets/products/4.png b/assets/products/4.png
diff --git a/assets/products/5.png b/assets/products/5.png
diff --git a/assets/products/6.png b/assets/products/6.png
diff --git a/assets/products/8.png b/assets/products/8.png
diff --git a/index.html b/index.html
@@ -71,7 +71,24 @@
     <!-- !start #header -->
 
     <!-- start #main-site -->
-        <main>
+        <main id="main-site">
+
+          <!-- Owl-carousel -->
+            <section id="banner-area">
+              <div class="owl-carousel owl-theme">
+                  <div class="item">
+                    <img src="./assets/Banner1.png" alt="Banner1">
+                  </div>
+                  <div class="item">
+                    <img src="./assets/Banner2.png" alt="Banner2">
+                  </div>
+                  <div class="item">
+                    <img src="./assets/Banner1.png" alt="Banner3">
+                  </div>
+              </div>
+            </section>
+          <!-- !Owl-carousel -->
+
 
         </main>
     <!-- !start #main-site -->
@@ -85,5 +102,11 @@
     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+
+    <!-- Owl Carousel Js file -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
+
+    <!-- Custom Javascript -->
+    <script src="./index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,27 @@
+$(document).ready(function(){
+
+    // banner owl carousel
+    $("#banner-area .owl-carousel").owlCarousel({
+        dots: true,
+        items: 1
+    });
+
+    // top sale owl carousel
+    $("#top-sale .owl-carousel").owlCarousel({
+        loop: true,
+        nav: true,
+        dots: false,
+        responsive : {
+            0: {
+                items: 1
+            },
+            600: {
+                items: 3
+            },
+            1000 : {
+                items: 5
+            }
+        }
+    });
+
+});
diff --git a/sass/include/top-sale.scss b/sass/include/top-sale.scss
@@ -0,0 +1,45 @@
+/*  top sale template   */
+
+#top-sale{
+    .owl-carousel .item .product a{
+        overflow: hidden;
+    }
+
+    .owl-carousel .item .product img{
+        transition: transform .5s ease;
+    }
+
+    .owl-carousel .item .product img:hover{
+        transform: scale(1.1);
+    }
+
+    .owl-carousel .owl-nav button{
+        position: absolute;
+        top: 30%;
+        outline: none;
+    }
+
+    .owl-carousel .owl-nav button.owl-prev{
+        left: 0;
+    }
+
+    .owl-carousel .owl-nav button.owl-prev span,
+    .owl-carousel .owl-nav button.owl-next span{
+        font-size: 35px;
+        color: $color-primary;
+        padding: 0 1rem;
+    }
+
+    .owl-carousel .owl-nav button.owl-prev span{
+        margin-left: -4rem;
+    }
+
+    .owl-carousel .owl-nav button.owl-next{
+        right: 0;
+    }
+
+    .owl-carousel .owl-nav button.owl-next span{
+        margin-right: -4rem;
+    }
+
+}
diff --git a/sass/style.scss b/sass/style.scss
@@ -4,4 +4,5 @@
 @import './include/variables.scss';
 @import './include/global.scss';
 @import './include/typography.scss';
-@import './include/color.scss';
+@import './include/color.scss';
+@import './include/top-sale.scss';
diff --git a/style.css b/style.css
diff --git a/style.css.map b/style.css.map