Widget:Timeline

Revision as of 13:50, 12 July 2023

<style>

   .timeline-steps {
       display: flex;
       justify-content: center;
       flex-wrap: wrap
   }

   .timeline-steps .timeline-step {
       align-items: center;
       display: flex;
       flex-direction: column;
       position: relative;
       margin: 1rem
   }

   @media (min-width:768px) {
       .timeline-steps .timeline-step:not(:last-child):after {
           content: "";
           display: block;
           border-top: .25rem dotted #3b82f6;
           width: 3.46rem;
           position: absolute;
           left: 7.5rem;
           top: .3125rem
       }
       .timeline-steps .timeline-step:not(:first-child):before {
           content: "";
           display: block;
           border-top: .25rem dotted #3b82f6;
           width: 3.8125rem;
           position: absolute;
           right: 7.5rem;
           top: .3125rem
       }
   }

   .timeline-steps .timeline-content {
       width: 10rem;
       text-align: center
   }

   .timeline-steps .timeline-content .inner-circle {
       border-radius: 1.5rem;
       height: 1rem;
       width: 1rem;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background-color: #3b82f6
   }

   .timeline-steps .timeline-content .inner-circle:before {
       content: "";
       background-color: #3b82f6;
       display: inline-block;
       height: 3rem;
       width: 3rem;
       min-width: 3rem;
       border-radius: 6.25rem;
       opacity: .5
   }

</style>

@@ Line 63: / Line 63: @@
 <div class="container">
-    <div class="row text-center justify-content-center mb-5">
-        <div class="col-xl-6 col-lg-8"><h2 class="font-weight-bold">A Company Evolution</h2>
-            <p class="text-muted">We’re very proud of the path we’ve taken. Explore the history that made us the company
-                we are today.</p></div>
-    </div>
      <div class="row">
          <div class="col">