CSS Timeline / Story

Posted on : 27th February 2023 | Author : @ByDev24

						    <div class="timeline-container">
        <div class="timeline-block">
            <span class="timeline-num">1</span>
            <div class="timeline-header">
                <img src="https://code.bydev24.com/uploads/code-snippts/b6039832f27ad88c2431f9e4f4a41b25.png">
                Today
            </div>
            <div class="timeline-content">
                <div>
                    <h4>Jhon Smith</h4>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>
        </div>
        <div class="timeline-block">
            <span class="timeline-num">2</span>
            <div class="timeline-header">
                <img src="https://code.bydev24.com/uploads/code-snippts/b6039832f27ad88c2431f9e4f4a41b25.png">
                Yesterday
            </div>
            <div class="timeline-content">
                <div>
                    <h4>Jhon Smith</h4>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>
        </div>
        <div class="timeline-block">
            <span class="timeline-num">3</span>
            <div class="timeline-header">
                <img src="https://code.bydev24.com/uploads/code-snippts/b6039832f27ad88c2431f9e4f4a41b25.png">
                Feb 24, 2023
            </div>
            <div class="timeline-content">
                <div>
                    <h4>Jhon Smith</h4>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>
        </div>
        <div class="timeline-block">
            <span class="timeline-num">4</span>
            <div class="timeline-header">
                <img src="https://code.bydev24.com/uploads/code-snippts/b6039832f27ad88c2431f9e4f4a41b25.png">
                Feb 23, 2023
            </div>
            <div class="timeline-content">
                <div>
                    <h4>Jhon Smith</h4>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>
        </div>
        <div class="timeline-seprator"></div>
    </div>

						body{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    margin:15px;
}
.timeline-block {
    width: 250px;
    position: relative;
}

.timeline-block .timeline-header {
    text-align: center;
    background: #57b1e1;
    color: #fff;
    padding: 4px 0;
    font-size: 13px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 7px;
}

.timeline-block .timeline-header:after {
    content: "";
    position: absolute;
    top: 0;
    right: -29px;
    border: 15px solid transparent;
    border-left-color: #57b1e1;
    height: 1px;
}
.timeline-block .timeline-header:before {
    content: "";
    border: 7px solid transparent;
    border-top-color: #4c97bf;
    border-right-color: #4c97bf;
    position: absolute;
    left: 0;
    bottom: -12px;
}
.timeline-content {
    padding: 0 10px;
}

.timeline-content div {
    background: #ffffff;
    width: 100%;
    padding: 20px;
}

.timeline-content div h4 {
    margin: 0;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 7px;
    color: #57b1e1;
}
.timeline-content div p {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 0;
}
.timeline-block:nth-child(even) {
    text-align: right;
    margin-left: auto;
}

.timeline-block:nth-child(even) .timeline-header:after {
    left: -28px;
    right: auto;
    border-right-color: #bd58ff;
    border-left-color: transparent;
}

.timeline-block:nth-child(even) .timeline-header:before {
    left: auto;
    right: 0;
    border-left-color: #aa51e4;
    border-right-color: transparent;
    border-top-color: #aa51e4;
}
.timeline-container {
    width: 600px;
    margin: 0 auto;
    background: #eeeeee;
    padding: 20px 10px;
    position: relative;
}
.timeline-block:nth-child(even) .timeline-header {
    background: #bd58ff;
}
.timeline-seprator {
    background: #57b1e1;
    width: 4px;
    height: calc(100% - 20px);
    position: absolute;
    top: 10px;
    left: calc(50% - 2px);
}
.timeline-block:nth-child(even) .timeline-content h4 {
    color: #bd58ff;
}
span.timeline-num {
    position: absolute;
    width: 35px;
    height: 35px;
    background: #fff;
    border: 3px solid #57b1e1;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    right: -57px;
    z-index: 10;
    color: #57b1e1;
    font-weight: 700;
}
.timeline-block:nth-child(even) span.timeline-num {
    left: -58px;
    right: auto;
    border-color: #bd58ff;
    color: #bd58ff;
}
.timeline-block .timeline-header img {
    width: 22px;
}