HTML Responsive Timeline Grid

Written by @kerixa 30 March 2021

To make your website more beautiful, you can use special styles for different sections. Like the following code which is a special style for timeline. Timelines are usually used when a set of items need to be located in a sequence hierarchically. In this code we have a responsive timeline where each item in it has an icon according to the subject of that item. The whole timeline has a diagonal and striped background and around each timeline a box is located according to the color of its icon.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
.fa {
    font: normal normal normal 34px/1.8 FontAwesome !important;
}
.bg {
    background: repeating-linear-gradient( 45deg, #f0f6ff 0, #f0f6ff 10px, #e9f2ff 10px, #e9f2ff 20px );
}

.main-timeline {
    font-family: verdana;
    position: relative;
}

.main-timeline:after {
    content: "";
    display: block;
    clear: both;
}

.main-timeline .timeline {
    width: 50%;
    margin: 0 0 20px 20px;
    float: right;
}

.main-timeline .timeline-content {
    color: #000;
    background: radial-gradient( rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5), transparent );
    text-align: center;
    min-height: 125px;
    padding: 30px 20px 30px 45px;
    border-radius: 15px;
    border: 2px solid #000;
    display: block;
    position: relative;
}

.main-timeline .timeline-content:hover {
    text-decoration: none;
}

.main-timeline .timeline-icon {
    color: #fff;
    background-color: #ff4f00;
    font-size: 37px;
    line-height: 65px;
    height: 75px;
    width: 75px;
    border: 6px solid #fff;
    border-radius: 50%;
    transform: translateY(-50%);
    position: absolute;
    left: -38px;
    top: 50%;
}

.main-timeline .timeline-icon:before,
.main-timeline .timeline-icon:after {
    content: "";
    background-color: #000;
    height: 7px;
    width: 7px;
    border-radius: 50%;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    top: -12px;
}

.main-timeline .timeline-icon:after {
    top: calc(100% + 6px);
}

.main-timeline .title {
    color: #ff4f00;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 5px;
}

.main-timeline .description {
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0;
}

.main-timeline .timeline:nth-child(even) {
    float: left;
    margin: 0 20px 20px 0;
}

.main-timeline .timeline:nth-child(even) .timeline-content {
    padding: 30px 45px 30px 20px;
}

.main-timeline .timeline:nth-child(even) .timeline-icon {
    right: -39px;
    left: auto;
}

.main-timeline .timeline:nth-child(4n + 2) .timeline-icon {
    background-color: #953fbe;
}

.main-timeline .timeline:nth-child(4n + 2) .title {
    color: #953fbe;
}

.main-timeline .timeline:nth-child(4n + 3) .timeline-icon {
    background-color: #00b29c;
}

.main-timeline .timeline:nth-child(4n + 3) .title {
    color: #00b29c;
}

.main-timeline .timeline:nth-child(4n + 4) .timeline-icon {
    background-color: #02affe;
}

.main-timeline .timeline:nth-child(4n + 4) .title {
    color: #02affe;
}

@media screen and (max-width: 767px) {
.main-timeline .timeline {
    width: 100%;
    padding-top: 40px;
}

.main-timeline .timeline .timeline-content,
.main-timeline .timeline:nth-child(even) .timeline-content {
    padding: 45px 20px 20px;
}

.main-timeline .timeline .timeline-icon,
.main-timeline .timeline:nth-child(even) .timeline-icon {
    font-size: 28px;
    left: 50%;
    top: -39px;
    right: auto;
    transform: translateY(0) translateX(-50%);
}

.main-timeline .timeline .timeline-icon:before,
.main-timeline .timeline .timeline-icon:after {
    top: 50%;
    left: -12px;
    transform: translateY(-50%) translateX(0);
}

.main-timeline .timeline .timeline-icon:after {
    left: calc(100% + 6px);
}
}

@media screen and (max-width: 576px) {
.main-timeline .title {
    font-size: 18px;
}
}
</style>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<div class="bg">
    <div class="container">

        <div class="row py-5">
            <div class="col-md-12">
                <div class="main-timeline">
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <div class="timeline-icon">
                                <i class="fa fa-globe"></i>
                            </div>
                            <h3 class="title">Web Designing</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
                            </p>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <div class="timeline-icon">
                                <i class="fa fa-rocket"></i>
                            </div>
                            <h3 class="title">Web Development</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
                            </p>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <div class="timeline-icon">
                                <i class="fa fa-user"></i>
                            </div>
                            <h3 class="title">Java Script</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
                            </p>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <div class="timeline-icon">
                                <i class="fa fa-briefcase"></i>
                            </div>
                            <h3 class="title">Web Designing</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
                            </p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300