.slider {
width: 100%;
}
.slider input {
display: none;
}
.testimonials {
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 350px;
perspective: 1000px;
overflow: hidden;
}
.testimonials .item {
width: 450px;
padding: 30px;
border-radius: 5px;
background-color: #0a0220;
position: absolute;
top: 0;
box-sizing: border-box;
text-align: center;
transition: transform 0.4s;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
user-select: none;
cursor: pointer;
}
.testimonials .item img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
border: 13px solid #3b344d;
}
.testimonials .item p {
color: #ddd;
}
.testimonials .item h2 {
font-size: 14px;
}
.dots {
display: flex;
justify-content: center;
align-items: center;
}
.dots label {
height: 5px;
width: 5px;
border-radius: 50%;
cursor: pointer;
background-color: #413b52;
margin: 7px;
transition-duration: 0.2s;
}
#t-1:checked ~ .dots label[for="t-1"],
#t-2:checked ~ .dots label[for="t-2"],
#t-3:checked ~ .dots label[for="t-3"],
#t-4:checked ~ .dots label[for="t-4"],
#t-5:checked ~ .dots label[for="t-5"] {
transform: scale(2);
background-color: #fff;
}
#t-1:checked ~ .dots label[for="t-2"],
#t-2:checked ~ .dots label[for="t-1"],
#t-2:checked ~ .dots label[for="t-3"],
#t-3:checked ~ .dots label[for="t-2"],
#t-3:checked ~ .dots label[for="t-4"],
#t-4:checked ~ .dots label[for="t-3"],
#t-4:checked ~ .dots label[for="t-5"],
#t-5:checked ~ .dots label[for="t-4"] {
transform: scale(1.5);
}
#t-1:checked ~ .testimonials label[for="t-5"] {
transform: translate3d(1200px, 0, -360px) rotateY(-45deg);
}
#t-1:checked ~ .testimonials label[for="t-4"],
#t-2:checked ~ .testimonials label[for="t-5"] {
transform: translate3d(900px, 0, -270px) rotateY(-35deg);
z-index: 1;
}
#t-1:checked ~ .testimonials label[for="t-3"],
#t-2:checked ~ .testimonials label[for="t-4"],
#t-3:checked ~ .testimonials label[for="t-5"] {
transform: translate3d(600px, 0, -180px) rotateY(-25deg);
z-index: 2;
}
#t-1:checked ~ .testimonials label[for="t-2"],
#t-2:checked ~ .testimonials label[for="t-3"],
#t-3:checked ~ .testimonials label[for="t-4"],
#t-4:checked ~ .testimonials label[for="t-5"] {
transform: translate3d(300px, 0, -90px) rotateY(-15deg);
z-index: 3;
}
#t-2:checked ~ .testimonials label[for="t-1"],
#t-3:checked ~ .testimonials label[for="t-2"],
#t-4:checked ~ .testimonials label[for="t-3"],
#t-5:checked ~ .testimonials label[for="t-4"] {
transform: translate3d(-300px, 0, -90px) rotateY(15deg);
z-index: 3;
}
#t-3:checked ~ .testimonials label[for="t-1"],
#t-4:checked ~ .testimonials label[for="t-2"],
#t-5:checked ~ .testimonials label[for="t-3"] {
transform: translate3d(-600px, 0, -180px) rotateY(25deg);
}
#t-5:checked ~ .testimonials label[for="t-2"],
#t-4:checked ~ .testimonials label[for="t-1"] {
transform: translate3d(-900px, 0, -270px) rotateY(35deg);
}
#t-5:checked ~ .testimonials label[for="t-1"] {
transform: translate3d(-1200px, 0, -360px) rotateY(45deg);
}
#t-1:checked ~ .testimonials label[for="t-1"],
#t-2:checked ~ .testimonials label[for="t-2"],
#t-3:checked ~ .testimonials label[for="t-3"],
#t-4:checked ~ .testimonials label[for="t-4"],
#t-5:checked ~ .testimonials label[for="t-4"],
#t-5:checked ~ .testimonials label[for="t-5"] {
z-index: 4;
}
