[아임웹 코드] 랜딩페이지에 활용가능한 리뷰, 인터뷰 슬라이드 애니메이션

시연 동영상 보기

<main>
<section>
<div class="testimonial">
<div class="container">
<div class="testimonial__inner">
<div class="testimonial-slider">
<div class="testimonial-slide">
<div class="testimonial_box">
<div class="testimonial_box-inner">
<div class="testimonial_box-top">
<div class="testimonial_box-icon">
<i class="fas fa-quote-right"></i>
</div>
<div class="testimonial_box-text">
<p>아임웹 코드 위젯을 사용하면 홈페이지를 더욱 완성도 있게 만들 수 있습니다.</p>
</div>
<div class="testimonial_box-img">
<img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/04cd2c9856eff.png" alt="profile">
</div>
<div class="testimonial_box-name">
<h4>아임웹 코드 위젯</h4>
</div>
<div class="testimonial_box-job">
<p>MAPPING</p>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial_box">
<div class="testimonial_box-inner">
<div class="testimonial_box-top">
<div class="testimonial_box-icon">
<i class="fas fa-quote-right"></i>
</div>
<div class="testimonial_box-text">
<p>아임웹 코드 위젯을 사용하면 홈페이지를 더욱 완성도 있게 만들 수 있습니다.</p>
</div>
<div class="testimonial_box-img">
<img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/a2d0ddd23fba5.png" alt="profile">
</div>
<div class="testimonial_box-name">
<h4>아임웹 코드 위젯2</h4>
</div>
<div class="testimonial_box-job">
<p>MAPPING</p>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial_box">
<div class="testimonial_box-inner">
<div class="testimonial_box-top">
<div class="testimonial_box-icon">
<i class="fas fa-quote-right"></i>
</div>
<div class="testimonial_box-text">
<p>아임웹 코드 위젯을 사용하면 홈페이지를 더욱 완성도 있게 만들 수 있습니다.</p>
</div>
<div class="testimonial_box-img">
<img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/066e88fefa15b.png" alt="profile">
</div>
<div class="testimonial_box-name">
<h4>아임웹 코드 위젯3</h4>
</div>
<div class="testimonial_box-job">
<p>MAPPING</p>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial_box">
<div class="testimonial_box-inner">
<div class="testimonial_box-top">
<div class="testimonial_box-icon">
<i class="fas fa-quote-right"></i>
</div>
<div class="testimonial_box-text">
<p>아임웹 코드 위젯을 사용하면 홈페이지를 더욱 완성도 있게 만들 수 있습니다.</p>
</div>
<div class="testimonial_box-img">
<img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/6e2c54a738c7c.png" alt="profile">
</div>
<div class="testimonial_box-name">
<h4>아임웹 코드 위젯4</h4>
</div>
<div class="testimonial_box-job">
<p>MAPPING</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>

<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

.testimonial {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #3d5a80;
}
.testimonial-slide {
padding: 40px 20px;
}
.testimonial_box-top {
background-color: #e0fbfc;
padding: 30px;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
box-shadow: 5px 5px 20px rgba(152, 193, 217, 0.493);
}
.testimonial_box-icon {
padding: 10px 0;
}
.testimonial_box-icon i {
font-size: 25px;
color: #14213d;
}
.testimonial_box-text {
padding: 10px 0;
}
.testimonial_box-text p {
color: #293241;
font-size: 14px;
line-height: 20px;
margin-bottom: 0;
}
.testimonial_box-img {
padding: 20px 0 10px;
display: flex;
justify-content: center;
}
.testimonial_box-img img {
width: 70px;
height: 70px;
border-radius: 50px;
border: 2px solid #e5e5e5;
}
.testimonial_box-name {
padding-top: 10px;
}
.testimonial_box-name h4 {
font-size: 20px;
line-height: 25px;
color: #293241;
margin-bottom: 0;
}
.testimonial_box-job p {
color: #293241;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 20px;
font-weight: 300;
margin-bottom: 0;
}
</style>
<script>
$(document).ready(function() {
$('.testimonial-slider').slick({
autoplay: true,
autoplaySpeed: 1000,
speed: 600,
draggable: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: false,
dots: false,
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 575,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
});
</script>