HTML for Timeline
Preview at bottom of page.
<div class="timeline-item">
<div class="timeline-container">
<div class="timeline-content">
<h2><a href="https://nike.com/">Nike Website</a></h2>
<p>January 1, 1938</p>
<a href="https://nike.com/">
<div class="timeline-button">
<div class="flex-col">
<p>More</p>
</div>
<div class="flex-col">
<p class="timeline-icon-wrap"><img src="/wp-content/uploads/2020/09/arrow-right.png" class="arrow-icon" alt="Arrow Icon" /></p>
</div>
</div></a>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-container">
<div class="timeline-content">
<h2><a href="https://nike.com/">Nike Website</a></h2>
<p>January 1, 1938</p>
<a href="https://nike.com/">
<div class="timeline-button">
<div class="flex-col">
<p>More</p>
</div>
<div class="flex-col">
<p class="timeline-icon-wrap"><img src="/wp-content/uploads/2020/09/arrow-right.png" class="arrow-icon" alt="Arrow Icon" /></p>
</div>
</div></a>
</div>
</div>
</div>
CSS for Timeline
.timeline-item {
position: relative;
margin: 0 auto;
}
.timeline-item a{
text-decoration:none !important;
}
.timeline-item h2{
font-weight: 700 !important;
font-style: normal;
font-size: 18px;
padding-bottom: 3px !important;
}
.timeline-item::after {
content: '';
position: absolute;
width: 2px;
background-color: #cdcecf;
top: 15px;
bottom: -20px;
margin-left: -4px;
}
.timeline-item:last-child:after{
width: 0px !important;
}
.timeline-container{
padding: 10px 20px;
position: relative;
width: 100%;
}
.timeline-container::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
right: -12px;
background-color: #905740;
border: 4px solid #905740;
top: 12px;
z-index: 1;
left: -16px;
}
.timeline-content {
padding: 5px 30px;
position: relative;
}
.timeline-date{
color:#905740 !important;
font-style:italic !important;
}
.timeline-button{
background: #111111;
align-items:center;
padding: 8px 18px 8px 12px;
display: flex;
max-width: 125px;
transition: 0.3s;
margin-top:15px;
}
.timeline-button:hover{
background: #000000;
}
.timeline-button p{
padding-bottom: 0 !important;
font-weight: 500 !important;
font-style: normal !important;
font-size: 16px;
color: #ffffff;
}
.timeline-button:hover .arrow-icon, .timeline-button:focus .arrow-icon, .timeline-button:active .arrow-icon {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
.timeline-icon-wrap{
text-align:right;
}
/* Moves Arrow Forward */
.arrow-icon{
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.flex-row{
display: flex;
}
.flex-col{
flex: 1;
}