Vertical Timeline in CSS and HTML Only no javascript

Vertical Timeline in CSS and HTML Only no javascript Demo

View Demo Full Screen View Demo New Tab

Vertical Timeline in CSS and HTML Only no javascript Code

HTML

<div class="container">
        <h1>Timeline with HTML and CSS</h1>
        <div class="timeline">
            <ul>
                <li>
                    <div class="content">
                        <h3>Lorem Ipsum is simply</h3>
                        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    </div>
                    <div class="point"></div>
                    <div class="date">
                        <h4>January 2019</h4>
                    </div>
                </li>
                <li>
                    <div class="content">
                        <h3>Lorem Ipsum is simply</h3>
                        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    </div>
                    <div class="point"></div>
                    <div class="date">
                        <h4>January 2019</h4>
                    </div>
                </li>
                <li>
                    <div class="content">
                        <h3>Lorem Ipsum is simply</h3>
                        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    </div>
                    <div class="point"></div>
                    <div class="date">
                        <h4>January 2019</h4>
                    </div>
                </li>
                <li>
                    <div class="content">
                        <h3>Lorem Ipsum is simply</h3>
                        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    </div>
                    <div class="point"></div>
                    <div class="date">
                        <h4>January 2019</h4>
                    </div>
                </li>
                <li>
                    <div class="content">
                        <h3>Lorem Ipsum is simply</h3>
                        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    </div>
                    <div class="point"></div>
                    <div class="date">
                        <h4>January 2019</h4>
                    </div>
                </li>
                <li>
                    <div class="content">
                        <h3>Lorem Ipsum is simply</h3>
                        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                    </div>
                    <div class="point"></div>
                    <div class="date">
                        <h4>January 2019</h4>
                    </div>
                </li>
            </ul>
        </div>
    </div>

CSS

.container {
    padding: 20px 0;
}

.container h1 {
    text-align: center;
}

.timeline {
    position: relative;
    margin: 0 auto;
    width: 90%;
    
}

.timeline ul li {
    margin-bottom: 50px;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.point {
    min-width: 20px;
    height: 20px;
    background-color: #be9fe1;
    border-radius: 100%;
    z-index: 2;
    border: 3px #333333 solid;
    position: relative;
    left: 1px;
}

@media (max-width: 800px) {
    .point {
        min-width: 15px;
        height: 15px;
    }

    html, body {
        font-size: 15px;
    }

}

@media (max-width: 650px) {
    html, body {
        font-size: 14px;
    }
    
    .point {
        min-width: 12px;
        height: 12px;
    }

}

@media (max-width: 450px) {
    html, body {
        font-size: 10px;
    }

    p {
        padding: 10px !important;
    }
}

.timeline ul li .content {
    width: 50%;
    padding: 0 20px;
}

.timeline ul li:nth-child(odd) .content {
    padding-left: 0;
}

.timeline ul li:nth-child(odd) .date {
    padding-right: 0;
}

.timeline ul li:nth-child(even) .content {
    padding-right: 0;
}

.timeline ul li:nth-child(even) .date {
    padding-left: 0;
}

.timeline ul li .date {
    width: 50%;
    padding: 0 20px;
    font-weight: normal;
}

.timeline ul li .date h4 {
    background-color: #e1ccec;
    width: 100px;
    text-align: center;
    padding: 5px 10px;
    border-radius: 10px;
}

.timeline ul li .content h3 {
    padding: 10px 20px;
    background-color: #be9fe1;
    margin-bottom: 0;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.timeline ul li .content p {
    padding: 10px 20px;
    background-color: #e1d9ec;
    margin-top: 0;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.timeline ul li:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline ul li:nth-child(even) .date h4 {
    float: right
}

.timeline::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 3px;
    left: 50%;
    background-color: #333333;
}
.timeline ul li .content p {
    padding: 20px 20px;
    background-color: #e1d9ec;
    margin-top: 0;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #222;
}
.timeline ul li .date h4 {
    background-color: #e1ccec;
    width: 100px;
    text-align: center;
    padding: 5px 10px;
    border-radius: 10px;
    color: #111;
}