I am a beginner in frontend development and I am currently using sass. I have created a custom timeline, but I need assistance in properly aligning the location with the year and timeline marker. Additionally, I would like to position the image description to the right side of the image.
Here is the link to my jsfiddle:
https://jsfiddle.net/g99Lmsaz/
Below is my sass code:
$purple: #AF80ED;
$gray: #f2f2f2;
$white: #ffffff;
$timeline-gray: #dddddd;
.event {
background: $purple;
display: table;
width: 100%;
margin: 0 auto;
}
.event-2 {
background: $gray;
display: table;
width: 100%;
}
time {
/*float: left;
position: absolute;
top: 40%;*/
display: table-cell;
width: auto;
text-align: center;
vertical-align: middle;
width: 25%;
}
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
/*left: 10%;
margin: 0 auto;*/
padding: 10px 0 10px 0;
background: $timeline-gray;
.content {
position: relative;
left: 20px;
max-width: 700px;
top: calc(100% / 2 - 10px);
img{
border-radius: 50%;
height: 20px;
width: 20px;
}
}
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 15px;
height: 15px;
border: 4px solid $timeline-gray;
border-radius: 50%;
background: $white;
top: calc(100% / 2 - 10px);
}
The HTML code:
<section class="timeline">
<ul>
<div class='event'>
<time>1934</time>
<li>
<div class='content'>
<p>
Paris
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg/240px-Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg" >
<p>
Eiffel Tower
</p>
</div>
</li>
</div>
<div class='event-2'>
<time>1934</time>
<li>
<div class='content'>
<p>
asdsadsadsadsad
</p>
</div>
</li>
</div>
</ul>
</section>