|
|
| Line 1: |
Line 1: |
| <style>
| | <div class="timeline-step"> |
| .timeline-steps {
| | <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="Milestone<!--{$date}-->" data-original-title="<!--{$date}-->"> |
| display: flex;
| | <div class="inner-circle"></div><a href="<!--{$link}-->"> |
| justify-content: center;
| | <p class="h6 mt-3 mb-1"><!--{$date}--></p> |
| flex-wrap: wrap
| | <p class="h6 text-muted mb-0 mb-lg-0"><!--{$title}--></p></a> |
| }
| | </div> |
| | |
| .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>
| |
| | |
| <div class="container">
| |
| <div class="row">
| |
| <div class="col">
| |
| <div class="timeline-steps aos-init aos-animate" data-aos="fade-up">
| |
| <!--{foreach from=$milestone key=key item=item}-->
| |
| <div class="timeline-step"> | |
| <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" | |
| title="" data-content="Milestone<!--{$item.date}-->"
| |
| data-original-title="<!--{$item.date}-->">
| |
| <div class="inner-circle"></div><a href="<!--{$ item.link}-->"> | |
| <p class="h6 mt-3 mb-1"><!--{$ item.date}--></p> | |
| <p class="h6 text-muted mb-0 mb-lg-0"><!--{$ item.title}--></p></a ></div> | |
| </div>
| |
| <!--{/foreach}-->
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div> | | </div> |
