Timeline style01

<!DOCTYPE html>
<html>
<head>
	<title>Timeline Style 01 | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Timeline Style 01">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet">
</head>
<body>
<main>
    <div class="container">
        <h3 class="card-title">Timeline CSS</h3>
        <div class="row">
            <div class="col-md-12">
                <div class="main-timeline">
                    <a href="#" class="timeline">
                        <div class="timeline-icon"><i class="fa fa-globe"></i></div>
                        <div class="timeline-content">
                            <h3 class="title">2018</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
                            </p>
                        </div>
                    </a>
                    <a href="#" class="timeline">
                        <div class="timeline-icon"><i class="fa fa-rocket"></i></div>
                        <div class="timeline-content">
                            <h3 class="title">2015</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
                            </p>
                        </div>
                    </a>
                    <a href="#" class="timeline">
                        <div class="timeline-icon"><i class="fa fa-briefcase"></i></div>
                        <div class="timeline-content">
                            <h3 class="title">2012</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
                            </p>
                        </div>
                    </a>
                    <a href="#" class="timeline">
                        <div class="timeline-icon"><i class="fa fa-mobile"></i></div>
                        <div class="timeline-content">
                            <h3 class="title">2009</h3>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
                            </p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> 
</body>
</html>
body {
    margin-top: 20px;
    background-color: #f0f6ff;
}

a {
    text-decoration: none
}

.main-timeline {
    position: relative
}

.main-timeline:before {
    content: "";
    width: 5px;
    height: 100%;
    border-radius: 20px;
    margin: 0 auto;
    background: #242922;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.main-timeline .timeline {
    display: inline-block;
    margin-bottom: 50px;
    position: relative
}

.main-timeline .timeline:before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: #D81159;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%)
}

.main-timeline .timeline-icon {
    display: inline-block;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 3px solid #D81159;
    padding: 13px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translateY(-50%)
}

.main-timeline .timeline-icon i {
    display: block;
    border-radius: 50%;
    background: #D81159;
    font-size: 64px;
    color: #fff;
    line-height: 100px;
    z-index: 1;
    position: relative
}

.main-timeline .timeline-icon:after,
.main-timeline .timeline-icon:before {
    content: "";
    width: 100px;
    height: 4px;
    background: #D81159;
    position: absolute;
    top: 50%;
    right: -100px;
    transform: translateY(-50%)
}

.main-timeline .timeline-icon:after {
    width: 70px;
    height: 50px;
    background: #f0f6ff;
    top: 89px;
    right: -30px
}

.main-timeline .timeline-content {
    width: 50%;
    padding: 0 50px;
    margin: 52px 0 0;
    float: right;
    position: relative
}

.main-timeline .timeline-content:before {
    content: "";
    width: 70%;
    height: 100%;
    border: 3px solid #D81159;
    border-top: none;
    border-right: none;
    position: absolute;
    bottom: -13px;
    left: 35px
}

.main-timeline .timeline-content:after {
    content: "";
    width: 37px;
    height: 3px;
    background: #D81159;
    position: absolute;
    top: 13px;
    left: 0
}

.main-timeline .title {
    font-size: 20px;
    color: #D81159;
    text-transform: uppercase;
    margin: 0 0 5px
}

.main-timeline .description {
    display: inline-block;
    color: #404040;
    line-height: 20px;
    margin: 0
}

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

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

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

.main-timeline .timeline:nth-child(even) .timeline-content {
    float: left
}

.main-timeline .timeline:nth-child(even) .timeline-content:before {
    left: auto;
    right: 35px;
    transform: rotateY(180deg)
}

.main-timeline .timeline:nth-child(even) .timeline-content:after {
    left: auto;
    right: 0
}

.main-timeline .timeline:nth-child(2n) .timeline-content:after,
.main-timeline .timeline:nth-child(2n) .timeline-icon i,
.main-timeline .timeline:nth-child(2n) .timeline-icon:before,
.main-timeline .timeline:nth-child(2n):before {
    background: #F68657
}

.main-timeline .timeline:nth-child(2n) .timeline-icon {
    border-color: #F68657
}

.main-timeline .timeline:nth-child(2n) .title {
    color: #F68657
}

.main-timeline .timeline:nth-child(2n) .timeline-content:before {
    border-left-color: #F68657;
    border-bottom-color: #F68657
}

.main-timeline .timeline:nth-child(3n) .timeline-content:after,
.main-timeline .timeline:nth-child(3n) .timeline-icon i,
.main-timeline .timeline:nth-child(3n) .timeline-icon:before,
.main-timeline .timeline:nth-child(3n):before {
    background: #8fb800
}

.main-timeline .timeline:nth-child(3n) .timeline-icon {
    border-color: #8fb800
}

.main-timeline .timeline:nth-child(3n) .title {
    color: #8fb800
}

.main-timeline .timeline:nth-child(3n) .timeline-content:before {
    border-left-color: #8fb800;
    border-bottom-color: #8fb800
}

.main-timeline .timeline:nth-child(4n) .timeline-content:after,
.main-timeline .timeline:nth-child(4n) .timeline-icon i,
.main-timeline .timeline:nth-child(4n) .timeline-icon:before,
.main-timeline .timeline:nth-child(4n):before {
    background: #2fcea5
}

.main-timeline .timeline:nth-child(4n) .timeline-icon {
    border-color: #2fcea5
}

.main-timeline .timeline:nth-child(4n) .title {
    color: #2fcea5
}

.main-timeline .timeline:nth-child(4n) .timeline-content:before {
    border-left-color: #2fcea5;
    border-bottom-color: #2fcea5
}

@media only screen and (max-width:1200px) {
    .main-timeline .timeline-icon:before {
        width: 50px;
        right: -50px
    }
    .main-timeline .timeline:nth-child(even) .timeline-icon:before {
        right: auto;
        left: -50px
    }
    .main-timeline .timeline-content {
        margin-top: 75px
    }
}

@media only screen and (max-width:990px) {
    .main-timeline .timeline {
        margin: 0 0 10px
    }
    .main-timeline .timeline-icon {
        left: 25%
    }
    .main-timeline .timeline:nth-child(even) .timeline-icon {
        right: 25%
    }
    .main-timeline .timeline-content {
        margin-top: 115px
    }
}

@media only screen and (max-width:767px) {
    .main-timeline {
        padding-top: 50px
    }
    .main-timeline:before {
        left: 80px;
        right: 0;
        margin: 0
    }
    .main-timeline .timeline {
        margin-bottom: 70px
    }
    .main-timeline .timeline:before {
        top: 0;
        left: 83px;
        right: 0;
        margin: 0
    }
    .main-timeline .timeline-icon {
        width: 60px;
        height: 60px;
        line-height: 40px;
        padding: 5px;
        top: 0;
        left: 0
    }
    .main-timeline .timeline:nth-child(even) .timeline-icon {
        left: 0;
        right: auto
    }
    .main-timeline .timeline-icon:before,
    .main-timeline .timeline:nth-child(even) .timeline-icon:before {
        width: 25px;
        left: auto;
        right: -25px
    }
    .main-timeline .timeline-icon:after,
    .main-timeline .timeline:nth-child(even) .timeline-icon:after {
        width: 25px;
        height: 30px;
        top: 44px;
        left: auto;
        right: -5px
    }
    .main-timeline .timeline-icon i {
        font-size: 30px;
        line-height: 45px
    }
    .main-timeline .timeline-content,
    .main-timeline .timeline:nth-child(even) .timeline-content {
        width: 100%;
        margin-top: -15px;
        padding-left: 130px;
        padding-right: 5px
    }
    .main-timeline .timeline:nth-child(even) .timeline-content {
        float: right
    }
    .main-timeline .timeline-content:before,
    .main-timeline .timeline:nth-child(even) .timeline-content:before {
        width: 50%;
        left: 120px
    }
    .main-timeline .timeline:nth-child(even) .timeline-content:before {
        right: auto;
        transform: rotateY(0)
    }
    .main-timeline .timeline-content:after,
    .main-timeline .timeline:nth-child(even) .timeline-content:after {
        left: 85px
    }
}

@media only screen and (max-width:479px) {
    .main-timeline .timeline-content,
    .main-timeline .timeline:nth-child(2n) .timeline-content {
        padding-left: 110px
    }
    .main-timeline .timeline-content:before,
    .main-timeline .timeline:nth-child(2n) .timeline-content:before {
        left: 99px
    }
    .main-timeline .timeline-content:after,
    .main-timeline .timeline:nth-child(2n) .timeline-content:after {
        left: 65px
    }
}

                                    
Background div gradient

Background div gradient

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Google Style Login

Google Style Login

Image hover 06

Image hover 06

Image hover effects style

Image hover effects style

Input range slider HTML style03

Input range slider HTML style03

Planète animée style01

Planète animée style01

SwiperJS style01

SwiperJS style01

Table bootstrap with Datatable

Table bootstrap with Datatable

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

login page green one

login page green one