index.html File
<!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>Testimonials</title>
<!--Swiper.js CDN-->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Testimonials</h2>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" >
<div class="card">
<div class="description">
<i class="fa fa-quote-left"></i>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi corporis, aliquam sit non qui ipsum dolorem.</p>
</div>
<div class="profile">
<img src="team/team-1.jpg" alt="member1">
<h4>John Doe</h4>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" >
<div class="card">
<div class="description">
<i class="fa fa-quote-left"></i>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi corporis, aliquam sit non qui ipsum dolorem.</p>
</div>
<div class="profile">
<img src="team/team-1.jpg" alt="member1">
<h4>John Doe</h4>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" >
<div class="card">
<div class="description">
<i class="fa fa-quote-left"></i>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi corporis, aliquam sit non qui ipsum dolorem.</p>
</div>
<div class="profile">
<img src="team/team-1.jpg" alt="member1">
<h4>John Doe</h4>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" >
<div class="card">
<div class="description">
<i class="fa fa-quote-left"></i>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi corporis, aliquam sit non qui ipsum dolorem.</p>
</div>
<div class="profile">
<img src="team/team-1.jpg" alt="member1">
<h4>John Doe</h4>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay : 2500,
d<!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>Testimonials</title>
<!--Swiper.js CDN-->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Testimonials</h2>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" >
<div class="card">
<div class="description">
<i class="fa fa-quote-left"></i>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi corporis, aliquam sit non qui ipsum dolorem.</p>
</div>
<div class="profile">
<img src="team/team-1.jpg" alt="member1">
<h4>John Doe</h4>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" >
<div class="card">
<div class="description">
<i class="fa fa-quote-left"></i>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi corporis, aliquam sit non qui ipsum dolorem.</p>
</div>
<div class="profile">
<img src="team/team-1.jpg" alt="member1">
<h4>John Doe</h4>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" >
<div class="card">
<div class="description">
<i class="fa fa-quote-left"></i>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi corporis, aliquam sit non qui ipsum dolorem.</p>
</div>
<div class="profile">
<img src="team/team-1.jpg" alt="member1">
<h4>John Doe</h4>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="swiper-slide" >
<div class="card">
<div class="description">
<i class="fa fa-quote-left"></i>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi corporis, aliquam sit non qui ipsum dolorem.</p>
</div>
<div class="profile">
<img src="team/team-1.jpg" alt="member1">
<h4>John Doe</h4>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay : 2500,
disableOnInteraction : false,
}
});
</script>
</body>
</html>isableOnInteraction : false,
}
});
</script>
</body>
</html>
style.css file
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');
body {
background: #fff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
h2{
text-align: center;
font-size: 30px;
font-family: 'Roboto',sans-serif;
font-weight: bold;
color: #e93b81;
}
.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 350px;
height: 400px;
-webkit-box-shadow: 0px 10px 13px -7px #000000, 42px 3px 0px -12px rgba(0,0,0,0);
box-shadow: 0px 10px 13px -7px #000000, 42px 3px 0px -12px rgba(0,0,0,0) ;
}
.swiper-slide .card{
padding: 30px 20px;
}
.swiper-slide .card .description i{
font-size: 30px;
color: #0099ff;
}
.swiper-slide .card .description p{
text-align: center;
font-size: 16px;
color:rgb(58, 54, 54);
font-family: 'Roboto', sans-serif;
line-height: 25px;
}
.swiper-slide .card .profile{
padding: 20px 0px;
background-color: #0099ff;
clip-path: polygon(20% 0, 100% 0, 82% 90%, 0 93%);
text-align: center;
}
.swiper-slide .card .profile h4{
font-size: 18px;
font-family: 'Roboto',sans-serif;
color: #eee;
}
.swiper-slide .profile a{
text-decoration: none;
color: #eee;
padding: 5px 10px;
font-size: 18px
}
.swiper-slide .profile a:hover{
color: #e93b81;
transition: 0.3s all;
}
.swiper-slide .profile img{
height: 80px;
width: 80px;
border: 4px solid #eee;
border-radius: 50%;
}
Follow On Facebook :
► https://www.facebook.com/Codeground000
Landing Page design Using html and css
► https://www.youtube.com/watch?v=-nzQ1AOFXXg
Make a Portfolio Website Using typedJs
► https://www.youtube.com/watch?v=I_z8-t8r1KE&t=0s
Instagram login-page using html and css
► https://www.youtube.com/watch?v=1fZryk-_II0&t=0s
Login page design using html and css
► https://www.youtube.com/watch?v=Vag8KlDlWgE&t=0s
Avo Portfolio Template
► https://www.youtube.com/watch?v=8WTrHkv_qiQ
Instagrame Clone Using HTML and CSS
► https://www.youtube.com/watch?v=1fZryk-_II0
