275 lines
6.4 KiB
Sass
275 lines
6.4 KiB
Sass
/*******************************************************/
|
|
/*************** ## Testimonials Area *****************/
|
|
/*******************************************************/
|
|
.testimonials-active
|
|
+gapLR(margin, -15px)
|
|
.testimonial-item
|
|
+gapLR(margin, 15px)
|
|
.slick-dots
|
|
margin-top: 35px
|
|
|
|
.testimonial-item
|
|
background: white
|
|
margin-bottom: 30px
|
|
padding: 40px 40px 35px 45px
|
|
+res-bl(xs)
|
|
+gapLR(padding, 25px)
|
|
.quote
|
|
font-size: 75px
|
|
width: max-content
|
|
margin-bottom: 26px
|
|
color: $primary-color
|
|
transform: rotate(180deg)
|
|
.text
|
|
@extend %h5
|
|
+res-bl(xs)
|
|
font-size: 20px
|
|
.author
|
|
display: flex
|
|
margin-top: 28px
|
|
padding-top: 35px
|
|
align-items: center
|
|
border-top: 1px solid $border-color
|
|
img
|
|
max-width: 55px
|
|
border-radius: 50%
|
|
margin-right: 20px
|
|
h5
|
|
line-height: 1
|
|
margin-top: 10px
|
|
margin-bottom: 0
|
|
|
|
.testimonials-shapes
|
|
.shape
|
|
z-index: -1
|
|
min-width: 5%
|
|
position: absolute
|
|
&.one
|
|
left: 5%
|
|
bottom: 15%
|
|
&.two
|
|
right: 5%
|
|
bottom: 20%
|
|
&.three
|
|
left: 5%
|
|
top: 13%
|
|
&.four
|
|
right: 8%
|
|
top: 16%
|
|
&.five
|
|
right: 28%
|
|
bottom: 0
|
|
|
|
.testimonials-three
|
|
.testimonials-shapes .shape
|
|
max-width: 10%
|
|
|
|
/* Testimonials Two */
|
|
.testimonials-two-content
|
|
+container(750px)
|
|
+res-bl(xl)
|
|
padding-left: 0
|
|
padding-right: 25px
|
|
+res-bl(lg)
|
|
padding-left: 25px
|
|
.marquee-wrap.style-two
|
|
+poLT(0, -35px)
|
|
+res-bl(lg)
|
|
top: 2%
|
|
.shape
|
|
+poRB(10%, 0)
|
|
z-index: -1
|
|
max-width: 10%
|
|
|
|
|
|
.testimonials-two-carousel
|
|
.slick-dots
|
|
margin-top: 60px
|
|
li
|
|
background: $secondary-color
|
|
|
|
.testimonial-two-item
|
|
.quote i
|
|
line-height: 1
|
|
font-size: 88px
|
|
display: inline-block
|
|
color: $secondary-color
|
|
transform: rotate(180deg)
|
|
.text
|
|
font-size: 24px
|
|
+container(610px)
|
|
line-height: 1.66
|
|
font-family: $heading-font
|
|
+res-bl(ms)
|
|
font-size: 20px
|
|
.author
|
|
display: block
|
|
margin-top: 10px
|
|
font-family: $heading-font
|
|
+res-ab(ms)
|
|
font-size: 20px
|
|
|
|
&.style-two
|
|
+res-ab(lg)
|
|
display: flex
|
|
align-items: center
|
|
.image
|
|
flex: none
|
|
display: flex
|
|
margin-right: 3%
|
|
+res-bl(lg)
|
|
margin-bottom: 25px
|
|
.quote
|
|
margin-right: -12%
|
|
border: 1px solid white
|
|
+circle(transparent, 185px)
|
|
+res-bl(ms)
|
|
+size(100px)
|
|
margin-right: -6%
|
|
line-height: 100px
|
|
i
|
|
font-size: 50px
|
|
i
|
|
color: white
|
|
line-height: 1.8
|
|
img
|
|
border-radius: 50%
|
|
+res-bl(ms)
|
|
+size(100px)
|
|
.content
|
|
.icon
|
|
margin-bottom: 30px
|
|
img
|
|
border-radius: 50%
|
|
.text
|
|
margin-left: 0
|
|
margin-bottom: 18px
|
|
|
|
.testimonials-three-content
|
|
.testimonial-two-item
|
|
.image
|
|
img,
|
|
.quote
|
|
opacity: 0
|
|
transition: 1s
|
|
transform: translate(50px)
|
|
.content
|
|
opacity: 0
|
|
transition: 1s
|
|
transform: translate(-50px)
|
|
&.slick-active
|
|
.content,
|
|
.image img,
|
|
.image .quote
|
|
opacity: 1
|
|
transform: translate(0)
|
|
.image .quote
|
|
transition-delay: 0.35s
|
|
|
|
/* Testimonials Five */
|
|
.testimonials-five-authors
|
|
height: 75px
|
|
+container(215px)
|
|
.slick-track
|
|
display: flex
|
|
align-items: center
|
|
|
|
.testimonial-five-author-item
|
|
img
|
|
+size(55px)
|
|
cursor: pointer
|
|
transition: 0.5s
|
|
border-radius: 50%
|
|
&.slick-center
|
|
+gapLR(margin, 15px)
|
|
img
|
|
+size(75px)
|
|
border: 3px solid $primary-color
|
|
|
|
.testimonials-five-content
|
|
.slick-dots
|
|
margin-top: 70px
|
|
|
|
.testimonial-five-item
|
|
color: $heading-color
|
|
padding: 30px 40px
|
|
position: relative
|
|
background: white
|
|
line-height: 1.66
|
|
margin-top: 30px
|
|
font-size: 24px
|
|
+res-bl(sm)
|
|
font-size: 20px
|
|
+res-bl(ms)
|
|
+gapLR(padding, 20px)
|
|
+res-bl(xs)
|
|
font-size: 16px
|
|
&:before
|
|
opacity: 0
|
|
content: ''
|
|
transition: 0.5s
|
|
transform: translate(-50%)
|
|
+poLB(50%, calc(100% - 30px))
|
|
border-bottom: 30px solid white
|
|
border-left: 25px solid transparent
|
|
border-right: 25px solid transparent
|
|
.author
|
|
display: block
|
|
line-height: 1
|
|
margin-top: 25px
|
|
font-family: $heading-font
|
|
.designation
|
|
font-size: 0.6em
|
|
&.slick-active
|
|
&:before
|
|
opacity: 1
|
|
bottom: 100%
|
|
|
|
.testimonials-five
|
|
.testimonials-shapes
|
|
.shape
|
|
max-width: 10%
|
|
|
|
.testimonials-five-shapes
|
|
.shape
|
|
z-index: -1
|
|
position: absolute
|
|
&.left
|
|
top: 50%
|
|
left: -5%
|
|
max-width: 24%
|
|
transform: translateY(-50%)
|
|
&.right
|
|
bottom: 0
|
|
right: -7%
|
|
max-width: 27%
|
|
|
|
/* Testimonials Six */
|
|
.testimonials-six
|
|
margin-top: -170px
|
|
.slick-dots
|
|
justify-content: flex-start
|
|
|
|
.testimonial-quote-badge
|
|
max-width: 350px
|
|
.testi-badge
|
|
text-align: right
|
|
margin-bottom: -33%
|
|
img
|
|
max-width: 55%
|
|
.quote
|
|
+size(285px)
|
|
font-size: 150px
|
|
margin-right: 18%
|
|
line-height: 285px
|
|
text-align: center
|
|
border-radius: 50%
|
|
color: $secondary-color
|
|
border: 1px solid white
|
|
+res-bl(xs)
|
|
+size(222px)
|
|
font-size: 100px
|
|
line-height: 222px
|
|
i
|
|
display: inline-block
|
|
transform: rotate(180deg) |