Merge pull request #66 from DedSec2050/FE_Testimonials

Fe testimonials

static/assets/css/style.css

@@ -1001,33 +1001,11 @@ section {
 /*--------------------------------------------------------------
 # Clients
 --------------------------------------------------------------*/
-.clients .clients-slider .swiper-slide img {
-
-  opacity: 0.5;
-  transition: 0.3s;
-}
 
-.clients .clients-slider .swiper-slide img:hover {
 
-  opacity: 1;
-}
 
-.clients .clients-slider .swiper-pagination {
-  margin-top: 20px;
-  position: relative;
-}
 
-.clients .clients-slider .swiper-pagination .swiper-pagination-bullet {
-  width: 12px;
-  height: 12px;
-  background-color: #fff;
-  opacity: 1;
-  border: 1px solid #eb5d1e;
-}
 
-.clients .clients-slider .swiper-pagination .swiper-pagination-bullet-active {
-  background-color: #eb5d1e;
-}
 
 /*--------------------------------------------------------------
 # Contact Us

static/assets/css/testamonials.css

@@ -0,0 +1,133 @@
+#slidecontainer{
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-items: center;
+    /* background-color: red; */
+    flex-direction: column;
+}
+.slide-container{
+    max-width: 1120px;
+
+    width: 100%;
+    background-color: transparent;
+}
+
+.slide-content{
+    margin: 0 40px;
+    margin-left: 60px;
+    margin-right: 60px;
+    margin-bottom: 50px;
+    overflow: hidden;
+}
+.card{
+    border-color: #fef8f5;
+    /* width: 320px; */
+    /* Change height here  */
+    border-radius: 25px;
+    background-color: #fef8f5;
+}
+.image-content,
+.card-content{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px 14px;
+}
+
+
+.card-image{
+    position: relative;
+    height: 150px;
+    width: 150px;
+    border-radius: 50%;
+    background: #fff;
+    padding: 3px;
+
+}
+.image-content{
+    position: relative;
+    row-gap: 5px;
+    padding: 25px 0;
+}
+.overlay{
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background-color: #fb771a;
+    border-radius: 25px 25px 0 25px;
+}
+.overlay::before,
+.overlay::after{
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: -40px;
+    height: 40px;
+    width: 40px;
+    background-color: #fb771a;
+}
+.overlay::after{
+    border-radius: 0 25px 0 0;
+    background-color: #fef8f5;
+}
+.card-image .card-img{
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+    border: 4px solid #fb771a;
+}
+
+.name{
+    font-size: 18px;
+    font-weight: 500;
+    color: #333;
+}
+.description{
+    font-size: 14px;
+    color: #707070;
+    text-align: center;
+}
+
+.domain p{
+    border: none;
+    font-size: 16px;
+    color: #fff;
+    padding: 8px 16px;
+    background-color: #fb771a;
+    border-radius: 6px;
+}
+.swiper-pagination-bullet{
+    background-color: #fb8633;
+    opacity: 1;
+}
+.swiper-button-prev{
+    width: 40px;
+    opacity: 1;
+    transition: 0.3s ease-in;
+}
+.swiper-button-prev:hover{
+    opacity: 0.85;
+}
+
+.swiper-button-next{
+    width: 40px;
+    opacity: 1;
+    transition: 0.3s ease-in;
+}
+.swiper-button-next:hover{
+    opacity: 0.85;
+}
+
+@media screen and (max-width: 750px){
+    .swiper-button-next{
+        display: none;
+    }
+    .swiper-button-prev{
+        display: none;
+    }
+}

static/assets/js/main.js

@@ -209,38 +209,7 @@
   /**
    * Clients Slider
    */
-  new Swiper('.clients-slider', {
-    speed: 400,
-    loop: true,
-    autoplay: {
-      delay: 5000,
-      disableOnInteraction: false
-    },
-    slidesPerView: 'auto',
-    pagination: {
-      el: '.swiper-pagination',
-      type: 'bullets',
-      clickable: true
-    },
-    breakpoints: {
-      320: {
-        slidesPerView: 2,
-        spaceBetween: 40
-      },
-      480: {
-        slidesPerView: 3,
-        spaceBetween: 60
-      },
-      640: {
-        slidesPerView: 4,
-        spaceBetween: 80
-      },
-      992: {
-        slidesPerView: 6,
-        spaceBetween: 120
-      }
-    }
-  });
+
 
   /**
    * Animation on scroll

static/assets/js/testamonials.js

@@ -0,0 +1,33 @@
+var swiper = new Swiper(".slide-content", {
+    watchSlidesProgress: true,
+    spaceBetween: 25,
+    loop: true,
+    centeredSlides: false,
+    loopFillGroupWithBlank: true,
+    fade: true,
+    grabCursor: true,
+    pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+        dynamicBullets: true,
+    },
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    breakpoints: {
+        520: {
+            slidesPerView: 1,
+        },
+        1000: {
+            slidesPerView: 2,
+        },
+        1200: {
+            slidesPerView: 3,
+        },
+    },
+    autoplay: {
+        delay: 2500,
+        disableOnInteraction: false,
+    },
+});