DailyKadenceWP 6: Responsive Horizontal Timeline (v1)

Today’s challenge is a responsive horizontal timeline, using a Testimonial element + custom CSS

Here is a preview of the end result:

How it’s built:

The main element is the Testimonial carousel + custom CSS for adjusting the order of the Testimonials’ element + the horizontal line as pseudo-element.

This is the CSS I used:

/* Horizontal Timeline v1 */
/* reverse the order of the testimonial's elements */
.timeline-carousel .kt-testimonial-item-wrap {
	display: flex;
	flex-direction: column-reverse;
}
.timeline-carousel .kt-testimonial-text-wrap {
	margin-top: 30px;
}

/* styling the year (blue-round element) */
 .kt-testimonial-style-inlineimage .kt-testimonial-meta-wrap .kt-testimonial-meta-name-wrap .kt-testimonial-name-wrap {
	padding-right: 0!important;
	background-color: #107cfe;
	width: 100px;
	height: 100px;
	border-radius: 100%;
	 position: relative;
	 z-index: 2;
}

.timeline-carousel .kt-testimonial-meta-wrap {
	padding-left: 0;
	justify-content: center;
}

/* adding the horizontal line */
 .kt-testimonial-style-inlineimage .kt-testimonial-meta-wrap .kt-testimonial-meta-name-wrap .kt-testimonial-name-wrap::after {
	content:"";
        height: 2px; 
	width: 300px;
	background-color: black;
	z-index:1;
	position: absolute;
	top: 50%;
	left: 100%;
}
/* positioning the prev & nav arrows */
.wp-block-kadence-testimonials .kt-blocks-carousel .splide__arrow--prev,
.wp-block-kadence-testimonials .kt-blocks-carousel .splide__arrow--next {
	top: 52px;
}

You can find everything in action on my KadenceWP Demo Website: Responsive Horizontal Timeline v1