Timeline
Animated Timeline Preview link
<div class="card">
<div class="card-header">
<h4>Animated Timeline</h4>
<p class="f-m-light mt-1">
Use <code> animated-timeline</code> class to your animated timeline.</p>
</div>
<div class="card-body overflow-hidden">
<div class="animated-timeline">
<div class="timeline-block">
<div class="each-year">
<div class="title">2024</div>
<div class="timeline-event">
<div class="timeline-desc">
<h5 class="pb-1 f-w-600">Project Paris:</h5><span>The goal of this january initiative was to enhance the online theme experience for customers.</span>
</div>
</div>
<div class="timeline-event">
<div class="timeline-desc">
<h5 class="pb-1 f-w-600">Development:</h5><span>Marked the beginning of the development phase.</span>
</div>
</div>
<div class="timeline-event">
<div class="timeline-desc">
<h5 class="pb-1 f-w-600">Lunch Theme:</h5><span>Official launch and ongoing quality control checks.</span>
</div>
</div>
</div>
</div>
<div class="timeline-block">
<div class="each-year">
<div class="title">2023</div>
<div class="timeline-event">
<div class="timeline-desc">
<h5 class="pb-1 f-w-600">Viho Goal:</h5><span>Project viho was introduced in may with the goal of improving tools for internal communication.</span>
</div>
</div>
<div class="timeline-event">
<div class="timeline-desc">
<h5 class="pb-1 f-w-600">Planning:</h5><span>Creating a team and planning the project.</span>
</div>
</div>
<div class="timeline-event">
<div class="timeline-desc">
<h5 class="pb-1 f-w-600">Training:</h5><span>Training sessions and rollout to all workers.</span>
</div>
</div>
</div>
</div>
<div class="timeline-block">
<div class="each-year">
<div class="title">2022</div>
<div class="timeline-event">
<div class="timeline-desc">
<h5 class="pb-1 f-w-600">Goal:</h5><span>The goal of project tivo , which was introduced in January, is to improve consumer interaction through a mobile app.</span>
</div>
</div>
<div class="timeline-event">
<div class="timeline-desc">
<h5 class="pb-1 f-w-600">Project Lunch:</h5><span>Market study and project launch in January.</span>
</div>
</div>
<div class="timeline-event">
<div class="timeline-desc">
<h5 class="pb-1 f-w-600">Official App:</h5><span>Marketing campaign and official app launch.</span>
</div>
</div>
</div>
</div>
<div class="timeline-block">
<div class="each-year">
<div class="title">2021</div>
<div class="timeline-event">
<div class="timeline-desc">
<h5 class="pb-1 f-w-600">Project Zeta:</h5><span>Dedicated to improving cybersecurity, it was launched in August.</span>
</div>
</div>
<div class="timeline-event">
<div class="timeline-desc">
<h5 class="pb-1 f-w-600">Vulnerability Analysis:</h5><span>Vulnerability analysis and security audit and the application of improved security protocols.</span>
</div>
</div>
<div class="timeline-event">
<div class="timeline-desc">
<h5 class="pb-1 f-w-600">Program:</h5><span>Programmes for employees and ongoing observation.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
To use timeline you have to add the following script js files
<!-- Timeline js-->
<script src="../assets/js/timeline/custom-timeline.js" ></script>Half Rounded Timeline Preview link
<div class="card">
<div class="card-header">
<h4>Half Rounded Timeline</h4>
<p class="f-m-light mt-1">
Use <code> rounded-timeline</code> class to your rounded timeline.</p>
</div>
<div class="card-body rounded-timeline">
<div class="timeline">
<div class="container left">
<div class="date">15 Dec</div><i class="icon fa fa-home"></i>
<div class="content">
<div class="timeline-wrapper">
<div class="badge bg-danger">app-ideas</div>
</div>
<h4 class="mb-2">Established new the app-ideas repository.</h4>
<p class="mb-0 f-light">
developers who are just beginning their learning process. those who often concentrate on developing programmes with a user interface.</p>
</div>
</div>
<div class="container right">
<div class="date">22 Oct</div><i class="icon fa fa-code-fork"></i>
<div class="content">
<div class="timeline-wrapper">
<div class="badge bg-warning">Blog</div>
</div>
<h4 class="mb-2">Implemented the program for weekly code challenges.</h4>
<p class="mb-0 f-light">
You can improve your understanding of programming and problem-solving techniques by taking on challenges.</p>
</div>
</div>
<div class="container left">
<div class="date">10 Jul</div><i class="icon fa fa-tencent-weibo"></i>
<div class="content">
<div class="timeline-wrapper">
<div class="badge bg-primary">Designer</div>
</div>
<h4 class="mb-2">Research about most recent design trends.</h4>
<p class="mb-0 f-light">
With our extensive analysis of the most recent design trends, discover the cutting edge of web aesthetics.</p>
</div>
</div>
<div class="container right">
<div class="date">18 May</div><i class="icon fa fa-modx"></i>
<div class="content">
<div class="timeline-wrapper">
<div class="badge bg-success">Latest</div>
</div>
<h4 class="mb-2">Freelance UX designer</h4>
<p class="mb-0 f-light">
Our professionals improve the usability and engagement of your website by creating user-friendly interfaces and user-centered designs, resulting in an unmatched online experience. </p>
</div>
</div>
<div class="container left">
<div class="date">10 Feb</div><i class="icon fa fa-file-audio-o"></i>
<div class="content">
<div class="timeline-wrapper">
<div class="badge bg-primary">Audio testing</div>
</div>
<h4 class="mb-2">Musical trends and predictability</h4>
<p class="mb-1 f-light">
So, the next time you listen to music, you might or might not consider how it's actively altering your mood.</p>
<audio controls="">
<source src="../assets/audio/horse.ogg" type="audio/ogg">
</audio>
</div>
</div>
<div class="container right">
<div class="date">01 Jan</div><i class="icon fa fa-group"></i>
<div class="content">
<div class="timeline-wrapper">
<div class="badge bg-success">Meet-up</div>
</div>
<h4 class="mb-2">Web-designer's meet-up</h4>
<p class="mb-0 f-light">
Find nearby web designers to network with! A Web Design Meetup is a place where you can discuss tools. </p>
</div>
</div>
</div>
</div>
</div>