<style>
.content-slider {
width: 100%;
height: 160px;
margin-bottom: -25px;
background-color: #ffffff;
}
.slider {
height: 120px;
width: 380px;
background-color: #ffffff;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
.mask {
overflow: hidden;
height: 120px;
background-color: #ffffff;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 360px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}
.slider .quote {
font-size: 20px;
font-style: italic;
}
.slider .source {
font-size: 20px;
text-align: right;
}
.slider li.anim1 {
animation: cycle 55s linear infinite;
}
.slider li.anim2 {
animation: cycle2 55s linear infinite;
}
.slider li.anim3 {
animation: cycle3 55s linear infinite;
}
.slider li.anim4 {
animation: cycle4 55s linear infinite;
}
.slider li.anim5 {
animation: cycle5 55s linear infinite;
}
.slider:hover li {
animation-play-state: paused;
}
@keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 325px;
opacity: 0;
z-index: 0;
}
21% {
top: -325px;
opacity: 0;
z-index: -1;
}
50% {
top: -325px;
opacity: 0;
z-index: -1;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
96% {
top: -325px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
@keyframes cycle2 {
0% {
top: -325px;
opacity: 0;
}
16% {
top: -325px;
opacity: 0;
}
20% {
top: 0px;
opacity: 1;
}
24% {
top: 0px;
opacity: 1;
}
36% {
top: 0px;
opacity: 1;
z-index: 0;
}
40% {
top: 325px;
opacity: 0;
z-index: 0;
}
41% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
@keyframes cycle3 {
0% {
top: -325px;
opacity: 0;
}
36% {
top: -325px;
opacity: 0;
}
40% {
top: 0px;
opacity: 1;
}
44% {
top: 0px;
opacity: 1;
}
56% {
top: 0px;
opacity: 1;
z-index: 0;
}
60% {
top: 325px;
opacity: 0;
z-index: 0;
}
61% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
@keyframes cycle4 {
0% {
top: -325px;
opacity: 0;
}
56% {
top: -325px;
opacity: 0;
}
60% {
top: 0px;
opacity: 1;
}
64% {
top: 0px;
opacity: 1;
}
76% {
top: 0px;
opacity: 1;
z-index: 0;
}
80% {
top: 325px;
opacity: 0;
z-index: 0;
}
81% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
@keyframes cycle5 {
0% {
top: -325px;
opacity: 0;
}
76% {
top: -325px;
opacity: 0;
}
80% {
top: 0px;
opacity: 1;
}
84% {
top: 0px;
opacity: 1;
}
96% {
top: 0px;
opacity: 1;
z-index: 0;
}
100% {
top: 325px;
opacity: 0;
z-index: 0;
}
}
</style>
<h1>Testimonials</h1>
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote">"The speakers were entertaining and very knowledgeable. They made the training fun."</div>
<div class="source">- HCD 101 Attendee<></div>
</li>
<li class="anim2">
<div class="quote">"The breakout rooms were very beneficial. It helped reinforce the concepts that were being presented."</div>
<div class="source">- HCD 101 Attendee<></div>
</li>
<li class="anim3">
<div class="quote">"The exercises were thought-provoking and easy to apply in day-to-day work tasks."</div>
<div class="source"></div>
</li>
<li class="anim4">
<div class="quote">"I enjoyed the activities that gave us an opportunity to pilot some of the strategies we were learning."</div>
<div class="source"></div>
</li>
<li class="anim5">
<div class="quote">"The exercises were thought-provoking and easy to apply in day-to-day work tasks."</div>
<div class="source"></div>
</li>
</ul>
</div>
</div>
</div>
|