Introduction of Vertical Testimonial Slider
Today we are again here to present you our new Vertical Testimonial Slider. Which is a testimonial card with a vertical slide automatically created by animation with the help of HTML and CSS. In this project, there will be some testimonial cards that will be arranged in a vertical manner. One card will slide upward and another card will come to that place. This process will be done automatically by using the animation. In this card, there will be the name, images, and email ID of the customer, as well as some lines of feedback given by the users. This project is going to be so helpful for you, as you have already seen this type of testimonial page. Where the users can share their experiences about the service of the website.
Now let’s start making this Vertical Animation Css by using the simple and easy code of HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet). This is not going to be so complicated, as everyone can understand it without any problem. Whether they are a fresher or an experienced guy. We have used here the basic concept of coding. If you have any doubt, then you can contact us through the details given in the footer of the page.
HTML (Hypertext Markup Language)
First, we will make the structure of the Vertical Animation Css with the help of HMTL (Hyper Text Markup Language). Which is used to make the structure of the web page of any website. In this project, we will give the title of the project in the title tag (which is used to give the title). Then we will move toward the main body of the content of the project. We will make a parent div and another parent div in the main parent div.
In this, we will make five other divs for cards. In these divs, we will insert information about the cards. We will make two child divs, one for person information and another for feedback. For person information, we will insert the image in the img tag (which is used to insert the image). The name in the h tag (which is used to write the heading). In another div, we will write the feedback given by the users and a 5-star rating.
<!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" />
<link rel="stylesheet" href="style.css">
<title>Testimonial Slider</title>
<link
href="https://cdn.jsdelivr.net/gh/codeOpacity/op_icons@main/op_icons.all.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="cards">
<div class="outer">
<div class="card" style="--delay: -1;">
<div class="header">
<div class="profile">
<div class="img">
<img
src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
alt=""
/>
</div>
<div class="details">
<h4>Francis Goodman</h4>
<p>zod@zud.kp</p>
</div>
</div>
<div class="stars">
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
</div>
</div>
<div class="testimonial">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur
rem cumque dicta consequatur quisquam tempore suscipit
perspiciatis sit?
</p>
</div>
</div>
<div class="card" style="--delay: 0;">
<div class="header">
<div class="profile">
<div class="img">
<img
src="https://images.unsplash.com/photo-1512484776495-a09d92e87c3b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
alt=""
/>
</div>
<div class="details">
<h4>Dorothy Padilla</h4>
<p>ahbo@urimezeze.sa</p>
</div>
</div>
<div class="stars">
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
</div>
</div>
<div class="testimonial">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur
rem cumque dicta consequatur quisquam tempore suscipit
perspiciatis sit?
</p>
</div>
</div>
<div class="card" style="--delay: 1;">
<div class="header">
<div class="profile">
<div class="img">
<img
src="https://images.unsplash.com/photo-1475823678248-624fc6f85785?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
alt=""
/>
</div>
<div class="details">
<h4>Devin Davis</h4>
<p>se@esuruebo.kw</p>
</div>
</div>
<div class="stars">
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
</div>
</div>
<div class="testimonial">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur
rem cumque dicta consequatur quisquam tempore suscipit
perspiciatis sit?
</p>
</div>
</div>
<div class="card" style="--delay: 2;">
<div class="header">
<div class="profile">
<div class="img">
<img
src="https://images.unsplash.com/photo-1484588168347-9d835bb09939?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=334&q=80"
alt=""
/>
</div>
<div class="details">
<h4>Charles Maxwell</h4>
<p>rola@zog.ee</p>
</div>
</div>
<div class="stars">
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
</div>
</div>
<div class="testimonial">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur
rem cumque dicta consequatur quisquam tempore suscipit
perspiciatis sit?
</p>
</div>
</div>
<div class="card" style="--delay: 2;">
<div class="header">
<div class="profile">
<div class="img">
<img
src="https://images.unsplash.com/photo-1511546395756-590dffdcdbd1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
alt=""
/>
</div>
<div class="details">
<h4>Jeffrey Gray</h4>
<p>hopmurpo@ruwkas.pg</p>
</div>
</div>
<div class="stars">
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
<span class="op-star"></span>
</div>
</div>
<div class="testimonial">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur
rem cumque dicta consequatur quisquam tempore suscipit
perspiciatis sit?
</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS (Cascading Style Sheet)
After making the structure of this Vertical Animation Css, we will now do some designing and animation with the help of CSS (CCascading Style Sheet is used to design the web page, apply animation, and make the website responsive). In this, we will make the background dark blue and take all the cards to the center of the screen, and then we will move toward the main content of the card. In the card, we will give the background of the card and set the border and size of the card, and then we will adjust the size and gap of the image,, name, star rating, and paragraph.
Now we will apply the animation to the card, for which we will use @keyframe. This is the framework that CSS uses to apply the animation to the web pages. In this, we have to write the animation, like when the mouse hovers on cards, no action will be performed, and when the mouse does not hover on cards, the cards will move upwards and a new card will come from below. This will continue until you again hover the mouse over the card, at which point the animation will stop. Now we will give the name of the animation and use this name in the class made in CSS by giving timing, repetition, etc. using the animation property.
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Montserrat;
}
.cards {
background: #28223f;
display: grid;
place-items: center;
min-height: 100vh;
}
.outer {
display: flex;
align-items: center;
justify-content: center;
}
.cards .card {
background: #fff;
padding: 1.5rem;
max-width: 30rem;
border-radius: 0.5rem;
position: absolute;
pointer-events: none;
opacity: 0;
animation: animate 15s infinite linear;
animation-delay: calc(3s * var(--delay));
}
.profile,
.header {
display: flex;
align-items: center;
}
.header {
justify-content: space-between;
}
.profile {
margin-bottom: 0.5rem;
}
.profile .img {
height: 50px;
width: 50px;
border-radius: 50%;
padding: 5px;
background: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.178);
}
.profile .img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.profile .details {
margin-left: 10px;
}
.op-star {
color: #28223f;
font-size: 1.1rem;
}
.outer:hover .card {
animation-play-state: paused;
}
.cards .card:last-child {
animation-delay: calc(-3s * var(--delay));
}
@keyframes animate {
0% {
opacity: 0;
transform: translateY(100%) scale(0.5);
}
5%,
20% {
opacity: 0.4;
transform: translateY(100%) scale(0.7);
}
25%,
40% {
opacity: 1;
pointer-events: all;
transform: translateY(0%) scale(1);
}
45%,
60% {
opacity: 0.4;
transform: translateY(-100%) scale(0.7);
}
65%,
100% {
opacity: 0;
transform: translateY(-100%) scale(0.5);
}
}
@media (max-width: 467px) {
/*Edited*/
.card {
font-size: 10px;
padding: 0.5rem !important;
margin: 0.5rem;
text-align: center;
}
.header,
.profile {
flex-direction: column;
margin-bottom: 0.5rem;
}
}
Output of Vertical Testimonial Slider
Finally, we have made this Vertical Testimonial Slider with the help of the simple and easy code of HTML and CSS by following their steps one by one. I hope you understood it completely and have shown interest in this project. You can make such a project by taking ideas from here to enhance your practice and knowledge about the code. If you want the source code, then click the button given below to download it.
For more explanation, click on the link given below to watch the full video.
You can also check:
