first commit

SayanDeveloper · Oct 8, 2021 · e67726c · e67726c
commit e67726c
Show file tree

Hide file tree

Showing 7 changed files with 441 additions and 0 deletions.
diff --git a/21.jpg b/21.jpg
diff --git a/3.jpg b/3.jpg
diff --git a/4.jpg b/4.jpg
diff --git a/6.jpg b/6.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Responsive Testimonials</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css"/>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+<body>
+
+<section class="total-home-slider">
+    <div class="testimonials-carousel-wrap">
+        <div class="testimonials-carousel">
+            <div class="swiper-container">
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+                        <div class="testi-item">
+                            <div class="testi-avatar"><img src="6.jpg"></div>
+                            <div class="testimonials-text">
+                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et </p>
+                                <div class="listing-rating">
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+
+                    <!--second--->
+                    <div class="swiper-slide">
+                        <div class="testi-item">
+                            <div class="testi-avatar"><img src="6.jpg"></div>
+                            <div class="testimonials-text">
+                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et </p>
+                                <div class="listing-rating">
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                    <!--third-->
+
+                    <div class="swiper-slide">
+                        <div class="testi-item">
+                            <div class="testi-avatar"><img src="6.jpg"></div>
+                            <div class="testimonials-text">
+                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et </p>
+                                <div class="listing-rating">
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star half-star"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!--fourth-->
+                    <!-- <div class="swiper-slide">
+                        <div class="testi-item">
+                            <div class="testi-avatar"><img src="6.jpg"></div>
+                            <div class="testimonials-text">
+                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</p>
+                                <div class="listing-rating">
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                    <i class="fa fa-star"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div> -->
+                    <!--testi end-->
+
+                </div>
+            </div>
+        </div>
+
+        <div class="tc-pagination"></div>
+    </div>
+</section>
+
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script>
+    <script src="scripts.js"></script>
+</body>
+</html>
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,52 @@
+//   all ------------------
+function initParadoxWay() {
+    "use strict";
+
+    if ($(".testimonials-carousel").length > 0) {
+        var j2 = new Swiper(".testimonials-carousel .swiper-container", {
+            preloadImages: false,
+            slidesPerView: 1,
+            spaceBetween: 20,
+            loop: true,
+            grabCursor: true,
+            mousewheel: false,
+            autoplay: true,
+            centeredSlides: true,
+            pagination: {
+                el: '.tc-pagination',
+                clickable: true,
+                dynamicBullets: true,
+            },
+            navigation: {
+                nextEl: '.listing-carousel-button-next',
+                prevEl: '.listing-carousel-button-prev',
+            },
+            breakpoints: {
+                1024: {
+                    slidesPerView: 3,
+                },
+
+            }
+        });
+    }
+
+// bubbles -----------------
+
+
+    setInterval(function () {
+        var size = randomValue(sArray);
+        $('.bubbles').append('<div class="individual-bubble" style="left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height:' + size + 'px;"></div>');
+        $('.individual-bubble').animate({
+            'bottom': '100%',
+            'opacity': '-=0.7'
+        }, 4000, function () {
+            $(this).remove()
+        });
+    }, 350);
+
+}
+
+//   Init All ------------------
+$(document).ready(function () {
+    initParadoxWay();
+});