Merge pull request #42 from Mahak008/main

Owl Carousel
ssitvit · Oct 21, 2022 · bbdd014 · bbdd014
2 parents dc54ee4 + 5533ec7
commit bbdd014
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 0 deletions.
diff --git a/Owl Carousel/img.jpg b/Owl Carousel/img.jpg
diff --git a/Owl Carousel/index.html b/Owl Carousel/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Owl Carousel</title>
+        <link rel="stylesheet" href="styles.css">
+        <link rel="stylesheet" href="owl.carousel.min.css">
+    </head>
+
+    <body>
+        <div class="slider">
+            <div class="owl-carousel">
+
+                <div class="slider-card">
+                    <div class="slider-img">
+                        <img src="img.jpg" alt="">
+                    </div>    
+                    <div class="slider-title">My Name</div>
+                    <div class="slider-text">
+                        <div>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde consequatur voluptates consectetur perferendis id itaque, consequuntur voluptas minus nihil? Quae nobis deserunt hic, explicabo in recusandae porro dolorem tenetur beatae culpa, magnam veritatis laboriosam iure aliquid, repellat facere exercitationem amet saepe? Vel eveniet iure, repudiandae sol.
+                        </div>
+                    </div>       
+                    <a href="#">Read More</a>
+                </div> 
+
+                <div class="slider-card">
+                    <div class="slider-img">
+                        <img src="img.jpg" alt="">
+                    </div>    
+                    <div class="slider-title">My Name</div>
+                    <div class="slider-text">
+                        <div>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde consequatur voluptates consectetur perferendis id itaque, consequuntur voluptas minus nihil? Quae nobis deserunt hic, explicabo in recusandae porro dolorem tenetur beatae culpa, magnam veritatis laboriosam iure aliquid, repellat facere exercitationem amet saepe? Vel eveniet iure, repudiandae sol.
+                        </div>
+                    </div>       
+                    <a href="#">Read More</a>
+                </div> 
+
+                <div class="slider-card">
+                    <div class="slider-img">
+                        <img src="img.jpg" alt="">
+                    </div>    
+                    <div class="slider-title">My Name</div>
+                    <div class="slider-text">
+                        <div>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde consequatur voluptates consectetur perferendis id itaque, consequuntur voluptas minus nihil? Quae nobis deserunt hic, explicabo in recusandae porro dolorem tenetur beatae culpa, magnam veritatis laboriosam iure aliquid, repellat facere exercitationem amet saepe? Vel eveniet iure, repudiandae sol.
+                        </div>
+                    </div>       
+                    <a href="#">Read More</a>
+                </div> 
+
+            </div>
+        </div>
+
+        <script src="jquery.js"></script>
+        <script src="owl.carousel.min.js"></script>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/Owl Carousel/jquery.js b/Owl Carousel/jquery.js
diff --git a/Owl Carousel/owl.carousel.min.css b/Owl Carousel/owl.carousel.min.css
diff --git a/Owl Carousel/owl.carousel.min.js b/Owl Carousel/owl.carousel.min.js
diff --git a/Owl Carousel/script.js b/Owl Carousel/script.js
@@ -0,0 +1,26 @@
+$(document).ready(function() {
+    $('.owl-carousel').owlCarousel({
+        loop:true,
+        margin:20,
+        autoplay: true,
+        responsiveClass:true,
+        center:true,
+        nav: false,
+        NavText:[
+            "<i class='bx bx-chevron-left'></i>",
+            "<i class='bx bxs-chevron-right'></i>"
+        ],
+        responsive:{
+            0: {
+                items: 1,
+            },
+            600: {
+                items: 2,
+            },
+            1000: {
+                items: 3,
+            }
+        }
+    })    
+});
+
diff --git a/Owl Carousel/styles.css b/Owl Carousel/styles.css
@@ -0,0 +1,71 @@
+.slider {
+    margin-top: 5%;
+}
+
+.slider .owl-item.active.center .slider-card {
+    transform: scale(1.1);
+    opacity: 1;
+}
+
+.slider-card {
+    background-color: brown;
+    border-radius: 20px;
+    color: #fff;
+    padding: 50px 20px;
+    line-height: 1.3em;
+    text-align: justify;
+    transform: scale(0.9);
+    opacity: 0.5;
+    transition: all 0.3s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.slider-card .slider-img{
+    border-radius: 50%;
+    border: 5px solid #ffff00;
+    height: 160px;
+    width: 160px;
+}
+
+.slider-img img {
+    border-radius: 50%;
+    height: 100%;
+    width: 100%;
+}
+
+.slider-title {
+    font-size: 23px;
+    font-weight: 700;
+    font-family: 'Segoe UI', sans-serif;
+    color: #ffff00;
+    margin: 17px auto 3px;
+}
+
+.slider-text {
+    margin: 10px auto 15px;
+    font-weight: 500;
+}
+
+.slider-card a {
+    color: #000;
+    text-align: center;
+    font-family: 'Segoe UI', sans-serif;
+    font-weight: bolder;
+    width: 30%;
+    text-decoration: none;
+    border-radius: 40px 0 40px 0;
+    padding: 6px 10px;
+    background-color: #ffff00;
+    transition: linear 0.4s ease-in;
+}
+
+.slider-text a:hover {
+    font-weight: bolder;
+    text-decoration: none;
+    background: #fff;
+    border: 1px solid rgba(160, 49, 252, 1);
+    color: rgba(160, 49, 252, 1);
+}