Timeline helps you to showcase events happened during a journey. Web-Boots theme offers elegant vertical and horizontal timelines with background color, parallax image background and with video background. Here is the code for Web-Boots theme’s vertical and horizontal timeline elements as you can see in the demo.
Ensure to replace the text, image and video content in the demo code with your own content.
Vertical Timeline with Colors
<section class="timeline1 cid-rkwEl3lUjt" id="timeline1-7">
<div class="container align-center">
<h2 class="wn-section-title pb-3 wn-fonts-style display-2">Vertical Timeline With Colors</h2>
<h3 class="wn-section-subtitle pb-5 wn-fonts-style display-5">Date and events style</h3>
<div class="container timelines-container" wns-timelines="">
<div class="row timeline-element reverse separline">
<div class="timeline-date-panel col-xs-12 col-md-6 align-left">
<div class="time-line-date-content">
<p class="wn-timeline-date wn-fonts-style display-5">
1 january 2018
</p>
</div>
</div>
<span class="iconBackground"></span>
<div class="col-xs-12 col-md-6 align-right">
<div class="timeline-text-content">
<h4 class="wn-timeline-title pb-3 wn-fonts-style display-5">
Multi Homepages
</h4>
<p class="wn-timeline-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
<div class="row timeline-element separline">
<div class="timeline-date-panel col-xs-12 col-md-6 align-right">
<div class="time-line-date-content">
<p class="wn-timeline-date wn-fonts-style display-5">
2 february 2019
</p>
</div>
</div>
<span class="iconBackground"></span>
<div class="col-xs-12 col-md-6 align-left ">
<div class="timeline-text-content">
<h4 class="wn-timeline-title pb-3 wn-fonts-style display-5">
Responsive Design
</h4>
<p class="wn-timeline-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
<div class="row timeline-element reverse separline">
<div class="timeline-date-panel col-xs-12 col-md-6 align-left">
<div class="time-line-date-content">
<p class="wn-timeline-date wn-fonts-style display-5">
3 march 2020
</p>
</div>
</div>
<span class="iconBackground"></span>
<div class="col-xs-12 col-md-6 align-right">
<div class="timeline-text-content">
<h4 class="wn-timeline-title pb-3 wn-fonts-style display-5">
Smart Watch
</h4>
<p class="wn-timeline-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
<div class="row timeline-element separline">
<div class="timeline-date-panel col-xs-12 col-md-6 align-right">
<div class="time-line-date-content">
<p class="wn-timeline-date wn-fonts-style display-5">
4 april 2021
</p>
</div>
</div>
<span class="iconBackground"></span>
<div class="col-xs-12 col-md-6 align-left ">
<div class="timeline-text-content">
<h4 class="wn-timeline-title pb-3 wn-fonts-style display-5">
Design out of the box
</h4>
<p class="wn-timeline-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
<div class="row timeline-element reverse">
<div class="timeline-date-panel col-xs-12 col-md-6 align-left">
<div class="time-line-date-content">
<p class="wn-timeline-date wn-fonts-style display-5">
5 may 2022
</p>
</div>
</div>
<span class="iconBackground"></span>
<div class="col-xs-12 col-md-6 align-right">
<div class="timeline-text-content">
<h4 class="wn-timeline-title pb-3 wn-fonts-style display-5">
Awesome Reports
</h4>
<p class="wn-timeline-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
</div>
</div>
</section>Vertical Timeline With Video Background
<section class="timeline1 cid-rkwGTHVnfW" id="timeline1-d" data-bg-video="https://www.youtube.com/watch?v=36YgDDJ7XSc">
<div class="wn-overlay" style="opacity: 0.4; background-color: rgb(118, 118, 118);">
</div>
<div class="container align-center">
<h2 class="wn-section-title pb-3 wn-fonts-style display-2">Vertical Timeline With Video Background</h2>
<h3 class="wn-section-subtitle pb-5 wn-fonts-style display-5">
Date and events style</h3>
<div class="container timelines-container" wns-timelines="">
<div class="row timeline-element reverse separline">
<div class="timeline-date-panel col-xs-12 col-md-6 align-left">
<div class="time-line-date-content">
<p class="wn-timeline-date wn-fonts-style display-5">
1 january 2018
</p>
</div>
</div>
<span class="iconBackground"></span>
<div class="col-xs-12 col-md-6 align-right">
<div class="timeline-text-content">
<h4 class="wn-timeline-title pb-3 wn-fonts-style display-5">
Multi Homepages
</h4>
<p class="wn-timeline-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
<div class="row timeline-element separline">
<div class="timeline-date-panel col-xs-12 col-md-6 align-right">
<div class="time-line-date-content">
<p class="wn-timeline-date wn-fonts-style display-5">
2 february 2019
</p>
</div>
</div>
<span class="iconBackground"></span>
<div class="col-xs-12 col-md-6 align-left ">
<div class="timeline-text-content">
<h4 class="wn-timeline-title pb-3 wn-fonts-style display-5">
Responsive Design
</h4>
<p class="wn-timeline-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
<div class="row timeline-element reverse">
<div class="timeline-date-panel col-xs-12 col-md-6 align-left">
<div class="time-line-date-content">
<p class="wn-timeline-date wn-fonts-style display-5">
3 march 2020
</p>
</div>
</div>
<span class="iconBackground"></span>
<div class="col-xs-12 col-md-6 align-right">
<div class="timeline-text-content">
<h4 class="wn-timeline-title pb-3 wn-fonts-style display-5">
Smart Watch
</h4>
<p class="wn-timeline-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
</div>
</div>
</section>Vertical Timeline with Background Image
<section class="timeline2 cid-rkwEqOS6QU wn-parallax-background" id="timeline2-8">
<div class="wn-overlay" style="opacity: 0.7; background-color: rgb(118, 118, 118);">
</div>
<div class="container align-center">
<h2 class="wn-section-title pb-3 wn-fonts-style display-2">Vertical Timeline With Image Background</h2>
<h3 class="wn-section-subtitle pb-5 wn-fonts-style display-5">With event blocks</h3>
<div class="container timelines-container" wns-timelines="">
<div class="row timeline-element reverse separline">
<span class="iconsBackground">
<span class="wns-pages wn-iconfont"></span>
</span>
<div class="col-xs-12 col-md-6 align-left">
<div class="timeline-text-content">
<h4 class="wn-timeline-title pb-3 wn-fonts-style display-5">
Multi Homepages
</h4>
<p class="wn-timeline-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
<div class="row timeline-element separline">
<span class="iconsBackground">
<span class="wns-responsive wn-iconfont"></span>
</span>
<div class="col-xs-12 col-md-6 align-left ">
<div class="timeline-text-content">
<h4 class="wn-timeline-title pb-3 wn-fonts-style display-5">
Responsive Design
</h4>
<p class="wn-timeline-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
<div class="row timeline-element reverse">
<span class="iconsBackground">
<span class="wns-watch wn-iconfont"></span>
</span>
<div class="col-xs-12 col-md-6 align-left">
<div class="timeline-text-content">
<h4 class="wn-timeline-title pb-3 wn-fonts-style display-5">
Smart Watch
</h4>
<p class="wn-timeline-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
</div>
</div>
</section>Vertical Timeline with Featured Image
<section class="step3 cid-rkwEzMVy4T" id="step3-b">
<div class="container">
<h2 class="wn-section-title pb-3 wn-fonts-style align-center display-2">Vertical Timeline With Steps & Image</h2>
<h3 class="wn-section-subtitle pb-5 wn-fonts-style align-center display-5">Steps and media style with background color</h3>
<div class="media-container-row">
<div class="media-block" style="width: 49%;">
<div class="wn-figure">
<img src="assets/images/background6.jpg">
</div>
</div>
<div class="step-container">
<div class="card separline pb-4">
<div class="step-element d-flex">
<div class="step-wrapper pr-3">
<div class="step d-flex align-items-center justify-content-center">
1
</div>
</div>
<div class="step-text-content">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Specification
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium.
</p>
</div>
</div>
</div>
<div class="card separline pb-4">
<div class="step-element d-flex">
<div class="step-wrapper pr-3">
<div class="step d-flex align-items-center justify-content-center">
2
</div>
</div>
<div class="step-text-content">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Project Planning</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium.</p>
</div>
</div>
</div>
<div class="card">
<div class="step-element d-flex">
<div class="step-wrapper pr-3">
<div class="step d-flex align-items-center justify-content-center">
3
</div>
</div>
<div class="step-text-content">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Vertical Timeline With Steps
<section class="step1 cid-rkwEykX5Do wn-parallax-background" id="step1-a">
<div class="wn-overlay" style="opacity: 0.8; background-color: rgb(239, 239, 239);">
</div>
<div class="container">
<h2 class="wn-section-title pb-3 wn-fonts-style align-center display-2">Vertical Timeline With Steps</h2>
<h3 class="wn-section-subtitle pb-5 wn-fonts-style align-center display-5">
Simple steps style with parallax background</h3>
<div class="step-container">
<div class="card separline pb-4">
<div class="step-element d-flex">
<div class="step-wrapper pr-3">
<h3 class="step d-flex align-items-center justify-content-center">
1
</h3>
</div>
<div class="step-text-content">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Specification
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
<div class="card separline pb-4">
<div class="step-element d-flex">
<div class="step-wrapper pr-3">
<h3 class="step d-flex align-items-center justify-content-center">
2
</h3>
</div>
<div class="step-text-content">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Project Planning</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
<div class="card separline pb-4">
<div class="step-element d-flex">
<div class="step-wrapper pr-3">
<h3 class="step d-flex align-items-center justify-content-center">
3
</h3>
</div>
<div class="step-text-content">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
<div class="card">
<div class="step-element d-flex">
<div class="step-wrapper pr-3">
<h3 class="step d-flex align-items-center justify-content-center">
4
</h3>
</div>
<div class="step-text-content">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">
Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.
</p>
</div>
</div>
</div>
</div>
</div>
</section>Horizontal Timeline with Steps
<section class="step2 cid-rkwEwdeZ1i" id="step2-9">
<div class="container">
<h2 class="wn-section-title pb-3 wn-fonts-style align-center display-2">Horizontal Timeline With Steps</h2>
<h3 class="wn-section-subtitle pb-5 wn-fonts-style align-center display-5">
Simple steps style with background color</h3>
<div class="step-container row justify-content-center">
<div class="card col-12 pb-4 col-md-4 separline">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
1
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Specification
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.</p>
</div>
</div>
</div>
<div class="card col-12 separline pb-4 col-md-4">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
2
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Project Planning</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.</p>
</div>
</div>
</div>
<div class="card col-md-4 col-12 separline pb-4">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
3
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.</p>
</div>
</div>
</div>
<div class="card col-12 separline pb-4 col-md-4">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
4
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">
Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.
</p>
</div>
</div>
</div>
<div class="card col-12 separline pb-4 col-md-4">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
5
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">
Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.
</p>
</div>
</div>
</div>
<div class="card col-md-4 col-12 separline pb-4">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
6
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">
Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.
</p>
</div>
</div>
</div>
<div class="card col-12 separline col-md-4">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
7
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">
Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.
</p>
</div>
</div>
</div>
<div class="card col-12 separline col-md-4">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
8
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">
Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.
</p>
</div>
</div>
</div>
<div class="card col-md-4 col-12 separline">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
9
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">
Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.
</p>
</div>
</div>
</div>
</div>
</div>
</section>Horizontal Timeline with Steps and Background Image
<section class="step2 cid-rkwKgRROG0 wn-parallax-background" id="step2-e">
<div class="wn-overlay" style="opacity: 0.8; background-color: rgb(135, 154, 159);">
</div>
<div class="container">
<h2 class="wn-section-title pb-3 wn-fonts-style align-center display-2">Horizontal Timeline With Steps</h2>
<h3 class="wn-section-subtitle pb-5 wn-fonts-style align-center display-5">Simple steps style with background image</h3>
<div class="step-container row justify-content-center">
<div class="card col-12 pb-4 col-md-4 separline">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
1
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Specification
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.</p>
</div>
</div>
</div>
<div class="card col-12 separline pb-4 col-md-4">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
2
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Project Planning</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.</p>
</div>
</div>
</div>
<div class="card col-md-4 col-12 separline pb-4">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
3
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.</p>
</div>
</div>
</div>
<div class="card col-12 separline col-md-4">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
4
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">
Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.
</p>
</div>
</div>
</div>
<div class="card col-12 separline col-md-4">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
5
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">
Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.
</p>
</div>
</div>
</div>
<div class="card col-md-4 col-12 separline last-child">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
6
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">
Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.
</p>
</div>
</div>
</div>
</div>
</div>
</section>Horizontal Timeline with Video Background and Steps
<section class="step2 cid-rkwKhqCC8R" data-bg-video="https://www.youtube.com/watch?v=36YgDDJ7XSc" id="step2-f">
<div class="wn-overlay" style="opacity: 0.8; background-color: rgb(239, 239, 239);">
</div>
<div class="container">
<h2 class="wn-section-title pb-3 wn-fonts-style align-center display-2">Horizontal Timeline With Steps
</h2>
<h3 class="wn-section-subtitle pb-5 wn-fonts-style align-center display-5">
Simple steps style with video background</h3>
<div class="step-container row justify-content-center">
<div class="card col-12 col-md-4 separline">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
1
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Specification
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.</p>
</div>
</div>
</div>
<div class="card col-12 separline col-md-4">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
2
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Project Planning</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.</p>
</div>
</div>
</div>
<div class="card col-md-4 col-12 separline last-child">
<div class="step-element">
<div class="step-wrapper pb-3">
<h3 class="step d-flex align-items-center justify-content-center m-auto">
3
</h3>
</div>
<div class="step-text-content align-center">
<h4 class="wn-step-title pb-3 wn-fonts-style display-5">Deployment
</h4>
<p class="wn-step-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula.</p>
</div>
</div>
</div>
</div>
</div>
</section>