I am currently working on building a timeline and incorporating images into it. I came across a solution on W3 that I'm trying to implement, but I'm facing some challenges. I've been experimenting with the code but I feel like there are parts of it that I still don't fully understand. It would be really helpful if someone could break down each line of code and explain its purpose. My main issue right now is figuring out how to add images next to the text-containers (either on the left or right side).
* {
box-sizing: border-box;
}
body {
background-color: #474e5d;
font-family: Helvetica, sans-serif;
}
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.left {
left: 0;
}
.right {
left: 50%;
}
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.right::after {
left: -16px;
}
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}<div class="timeline">
<div class="container left">
<div class="content">
<h2>2017</h2>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2016</h2>
<p>Lorem ipsum..</p>
</div>
</div>
</div>