Timeline
Timeline a display of a list of events in chronological order.
Timeline #1
-
Consult
This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.
-
Plan
Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.
-
Develop
Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.
-
Release
Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.
HTML:
<!-- Timeline Section -->
<div class="container">
<ul class="u-timeline">
<li class="u-timeline__item">
<div class="u-timeline__content">
<div class="media">
<span class="u-icon u-icon--primary u-icon--sm u-timeline__icon rounded-circle mr-3">
<span class="u-icon__inner">1</span>
</span>
<div class="media-body">
<h4 class="h5">Consult</h4>
<p>This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>
</div>
</div>
</div>
<div class="u-timeline__info">
<img class="w-sm-50 w-lg-75 mx-lg-auto" src="../assets/svg/components/planning-illustration.svg" alt="Image Description">
</div>
<div class="u-timeline__spacer"></div>
</li>
<li class="u-timeline__item">
<div class="u-timeline__content">
<div class="media">
<span class="u-icon u-icon--primary u-icon--sm u-timeline__icon rounded-circle mr-3">
<span class="u-icon__inner">2</span>
</span>
<div class="media-body">
<h4 class="h5">Plan</h4>
<p>Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.</p>
</div>
</div>
</div>
<div class="u-timeline__info">
<img class="w-sm-50 w-lg-75 mx-lg-auto" src="../assets/svg/components/creation-process-illustration.svg" alt="Image Description">
</div>
<div class="u-timeline__spacer"></div>
</li>
<li class="u-timeline__item">
<div class="u-timeline__content">
<div class="media">
<span class="u-icon u-icon--primary u-icon--sm u-timeline__icon rounded-circle mr-3">
<span class="u-icon__inner">3</span>
</span>
<div class="media-body">
<h4 class="h5">Develop</h4>
<p>Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.</p>
</div>
</div>
</div>
<div class="u-timeline__info">
<img class="w-sm-50 w-lg-75 mx-lg-auto" src="../assets/svg/components/co-working-illustration.svg" alt="Image Description">
</div>
<div class="u-timeline__spacer"></div>
</li>
<li class="u-timeline__item">
<div class="u-timeline__content">
<div class="media">
<span class="u-icon u-icon--primary u-icon--sm u-timeline__icon rounded-circle mr-3">
<span class="u-icon__inner">4</span>
</span>
<div class="media-body">
<h4 class="h5">Release</h4>
<p>Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.</p>
</div>
</div>
</div>
<div class="u-timeline__info">
<img class="w-sm-50 w-lg-75 mx-lg-auto" src="../assets/svg/components/news-illustration.svg" alt="Image Description">
</div>
<div class="u-timeline__spacer"></div>
</li>
</ul>
</div>
<!-- End Timeline Section -->