Timeline with images in center

Can someone please help me?!

I'm trying to code a PSD file to HTML and CSS, but I'm struggling with one of the sections. Here's an image of what I want to do:

Click Here

The problem is I don't know how to put the image in the timeline line. I tried to add the image in the ::after psuedo, but I don't think this is the right way of doing that.

This is my HTML Code :

<section class="about">
    <div class="wrapper">
        <h3>About Us</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
    <div class="container left">
            <div class="content">
                <h5>JULY 2010<br> Our Humble Beginnings</h5>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
            </div>
        </div>

        <div class="container right">
            <div class="content">
                <h5>January 2011<br> Facing Startups Battles</h5>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
            </div>
        </div>
    </div>
</section>

This is my CSS code:

    .about .wrapper{
        padding: 80px 10%;
        text-align: center;
        position: relative;
    }

    .about .wrapper::after{
        content: '';
        position: absolute;
        top: 200px;
        bottom: 0;
        width: 6px;
        background: red;
    }

    .about h5{
        line-height: 1.5;
        font-size: 1em;
        padding-bottom: .5em;
    }

    .about .container{
        position: relative;
        width: 50%;
        top: 60px;
        margin: 0 0 60px 0;
    }

    .about .container::after{
        content: 'How Can I Add an Image Here in this circle?';
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        top: 20px;
        right: -104px;
        background-color: blue; /* Just because there is no image */
        background-image: url(assets/img/about-1.png);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 2;
    }

    .left{
        text-align: right;
    }

    .right{
        text-align: right;
    }

    .content{
        padding: 30px 0px 80px 0px;
    }

    .left .content{
    padding-right: 140px;
    }
    .right .content{
      padding-left: 140px
    }
    .right{
    text-align: left;
  left: 50%;


    }

.right:after {
    left: -104px;
    }

I think this is called a timeline, there is a lot of tutorials talking about how to do something like this, but I don't know how to make the images in the timeline line. Can you please help me do this?

Thanks

Solution

To build this, you could use css grid layout (guide: https://css-tricks.com/snippets/css/complete-guide-grid/)

Treat each of the content+image as a row in the layout. And each row as a container for a grid.

You can visually break every row down to 3 columns. One column for left-side content, the second one for the image and the third one for right-side content.

Example css grid for a layout like this:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 10em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "content-left image content-right";
  text-align: center;
}

.content-left { grid-area: content-left; background: lightblue; }

.image { grid-area: image; background: lightgreen; }

.content-right { grid-area: content-right; background: lightblue; }

<div class="grid-container">
  <div class="content-left">Left content</div>
  <div class="image">Image</div>
  <div class="content-right">Right content</div>
</div>

(grid generated with: https://grid.layoutit.com/)

To alternate between content on the left and on the right, you can use css even/odd selectors (How can I style even and odd elements?) to set which grid area is used for the element.

Example:

I've built an example of a timeline layout for this answer which you can find at https://codepen.io/hendrysadrak/pen/VwLEraz