Whether you're out of inspiration or trying to recreate a website like Twitter, this article will help you reproduce a profile highly inspired by those offered by Twitter.
You can find the entire tutorial on our Instagram account.
Step 1
Let's start by creating the HTML structure of our timeline.
<div class="timeline">
<div class="timeline-object complete">
<div class="timeline-status"></div>
<div class="timeline-content">
<h3>Start of Training</h3>
<span>19.06.2020</span>
</div>
</div>
<div class="timeline-object complete">
<div class="timeline-status"></div>
<div class="timeline-content">
<h3>Final Project</h3>
<span>05.07.2020</span>
</div>
</div>
<div class="timeline-object">
<div class="timeline-status"></div>
<div class="timeline-content">
<h3>Diploma Awarding</h3>
<span>17.09.2020</span>
</div>
</div>
</div>Each timeline element has its own timeline-object.
Step 2
Let's avoid padding issues.
* {
box-sizing: border-box;
}This little trick allows us to specify that all elements on the site (*) should include their padding in their size.
Step 3
Now let's style each timeline object.
.timeline-object {
display: flex;
align-items: center;
margin-top: 50px;
position: relative;
}Nothing very special to add: we use flexbox to center the elements together.
Step 4
Now let's tackle the display of objects when they are completed.
.timeline-object.complete::after {
content: '';
display: block;
position: absolute;
width: 4px;
height: 100px;
background-color: #1DBF73;
left: 23px;
top: 50px;
transform: translateX(-50%);
}
Step 5
Let's handle the status of the elements.
.timeline-status {
height: 46px;
width: 46px;
border-radius: 50%;
background-color: #1DBF73;
}Each element will be represented by a small circular icon.
Step 6
Now we need to handle the status of the incomplete elements.
.timeline-object:not(.complete) .timeline-status {
background: #ffffff;
border: 4px solid #C5C5C5;
}Incomplete elements are now represented by a circle with gray borders.
Step 7
Now let's style the content of each object: the title and the span tag.
.timeline-content {
margin-left: 15px;
}
.timeline-content h3 {
color: #1DBF73;
background: #CFF6CF;
padding: 5px 10px;
border-radius: 5px;
margin-bottom: 10px;
}
.timeline-content span {
color: #103B27;
font-size: .9em;
font-weight: bold;
}
Step 8
Now we just need to handle the case of an incomplete title to finish our timeline.
.timeline-object:not(.complete) .timeline-content h3 {
color: #8A8A8A;
background: #E1E1DF;
}Incomplete elements finally have a gray title.