| Line 71: | Line 71: | ||
title="" data-content="Milestone<!--{$item.date}-->" | title="" data-content="Milestone<!--{$item.date}-->" | ||
data-original-title="<!--{$item.date}-->"> | data-original-title="<!--{$item.date}-->"> | ||
| − | <div class="inner-circle"></div> | + | <div class="inner-circle"></div><a href="<!--{$item.link}-->"> |
<p class="h6 mt-3 mb-1"><!--{$item.date}--></p> | <p class="h6 mt-3 mb-1"><!--{$item.date}--></p> | ||
| − | <p class="h6 text-muted mb-0 mb-lg-0"><!--{$item.title}--></p></div> | + | <p class="h6 text-muted mb-0 mb-lg-0"><!--{$item.title}--></p></a></div> |
</div> | </div> | ||
<!--{/foreach}--> | <!--{/foreach}--> | ||
Revision as of 14:11, 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>
<a href="">
</a>