Timeline style02

<!DOCTYPE html>
<html>
<head>
	<title>Timeline Style 02 | 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 02">
	<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-timeline2">
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="year">2018</span>
                            <div class="inner-content">
                                <h3 class="title">Web Designer</h3>
                                <p class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor.
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="year">2017</span>
                            <div class="inner-content">
                                <h3 class="title">Web Developer</h3>
                                <p class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor.
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="year">2016</span>
                            <div class="inner-content">
                                <h3 class="title">Web Designer</h3>
                                <p class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor.
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="timeline">
                        <a href="#" class="timeline-content">
                            <span class="year">2015</span>
                            <div class="inner-content">
                                <h3 class="title">Web Developer</h3>
                                <p class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor.
                                </p>
                            </div>
                        </a>
                    </div>
                </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-timeline2 {
    overflow: hidden;
    position: relative
}

.main-timeline2:before {
    content: "";
    width: 5px;
    height: 70%;
    background: #333;
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%)
}

.main-timeline2 .timeline-content:before,
.main-timeline2 .timeline:before {
    top: 50%;
    transform: translateY(-50%);
    content: ""
}

.main-timeline2 .timeline {
    width: 50%;
    padding-left: 100px;
    float: right;
    position: relative
}

.main-timeline2 .timeline:before {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid #333;
    position: absolute;
    left: -10px
}

.main-timeline2 .timeline-content {
    display: block;
    padding-left: 150px;
    position: relative
}

.main-timeline2 .timeline-content:before {
    width: 90px;
    height: 10px;
    border-top: 7px dotted #333;
    position: absolute;
    left: -92px
}

.main-timeline2 .year {
    display: inline-block;
    width: 120px;
    height: 120px;
    line-height: 100px;
    border-radius: 50%;
    border: 10px solid #f54957;
    font-size: 30px;
    color: #f54957;
    text-align: center;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .4);
    position: absolute;
    top: 0;
    left: 0
}

.main-timeline2 .year:before {
    content: "";
    border-left: 20px solid #f54957;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    bottom: -13px;
    right: 0;
    transform: rotate(45deg)
}

.main-timeline2 .inner-content {
    padding: 20px 0
}

.main-timeline2 .title {
    font-size: 24px;
    color: #f54957;
    text-transform: uppercase;
    margin: 0 0 5px
}

.main-timeline2 .description {
    font-size: 14px;
    color: #6f6f6f;
    margin: 0 0 5px
}

.main-timeline2 .timeline:nth-child(2n) {
    padding: 0 100px 0 0
}

.main-timeline2 .timeline:nth-child(2n) .timeline-content:before,
.main-timeline2 .timeline:nth-child(2n) .year,
.main-timeline2 .timeline:nth-child(2n):before {
    left: auto;
    right: -10px
}

.main-timeline2 .timeline:nth-child(2n) .timeline-content {
    padding: 0 150px 0 0
}

.main-timeline2 .timeline:nth-child(2n) .timeline-content:before {
    right: -92px
}

.main-timeline2 .timeline:nth-child(2n) .year {
    right: 0
}

.main-timeline2 .timeline:nth-child(2n) .year:before {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 20px solid #f54957;
    transform: rotate(-45deg)
}

.main-timeline2 .timeline:nth-child(2) {
    margin-top: 110px
}

.main-timeline2 .timeline:nth-child(odd) {
    margin: -110px 0 0
}

.main-timeline2 .timeline:nth-child(even) {
    margin-bottom: 80px
}

.main-timeline2 .timeline:first-child,
.main-timeline2 .timeline:last-child:nth-child(even) {
    margin: 0
}

.main-timeline2 .timeline:nth-child(2n) .year {
    border-color: #1ebad0;
    color: #1ebad0
}

.main-timeline2 .timeline:nth-child(2) .year:before {
    border-right-color: #1ebad0
}

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

.main-timeline2 .timeline:nth-child(3n) .year {
    border-color: #7cba01;
    color: #7cba01
}

.main-timeline2 .timeline:nth-child(3) .year:before {
    border-left-color: #7cba01
}

.main-timeline2 .timeline:nth-child(3n) .title {
    color: #7cba01
}

.main-timeline2 .timeline:nth-child(4n) .year {
    border-color: #f8781f;
    color: #f8781f
}

.main-timeline2 .timeline:nth-child(4) .year:before {
    border-right-color: #f8781f
}

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

@media only screen and (max-width:1200px) {
    .main-timeline2 .year {
        top: 50%;
        transform: translateY(-50%)
    }
}

@media only screen and (max-width:990px) {
    .main-timeline2 .timeline {
        padding-left: 75px
    }
    .main-timeline2 .timeline:nth-child(2n) {
        padding: 0 75px 0 0
    }
    .main-timeline2 .timeline-content {
        padding-left: 130px
    }
    .main-timeline2 .timeline:nth-child(2n) .timeline-content {
        padding: 0 130px 0 0
    }
    .main-timeline2 .timeline-content:before {
        width: 68px;
        left: -68px
    }
    .main-timeline2 .timeline:nth-child(2n) .timeline-content:before {
        right: -68px
    }
}

@media only screen and (max-width:767px) {
    .main-timeline2 {
        overflow: visible
    }
    .main-timeline2:before {
        height: 100%;
        top: 0;
        left: 0;
        transform: translateX(0)
    }
    .main-timeline2 .timeline:before,
    .main-timeline2 .timeline:nth-child(2n):before {
        top: 60px;
        left: -9px;
        transform: translateX(0)
    }
    .main-timeline2 .timeline,
    .main-timeline2 .timeline:nth-child(even),
    .main-timeline2 .timeline:nth-child(odd) {
        width: 100%;
        float: none;
        text-align: center;
        padding: 0;
        margin: 0 0 10px
    }
    .main-timeline2 .timeline-content,
    .main-timeline2 .timeline:nth-child(2n) .timeline-content {
        padding: 0
    }
    .main-timeline2 .timeline-content:before,
    .main-timeline2 .timeline:nth-child(2n) .timeline-content:before {
        display: none
    }
    .main-timeline2 .timeline:nth-child(2n) .year,
    .main-timeline2 .year {
        position: relative;
        transform: translateY(0)
    }
    .main-timeline2 .timeline:nth-child(2n) .year:before,
    .main-timeline2 .year:before {
        border: none;
        border-right: 20px solid #f54957;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        top: 50%;
        left: -23px;
        bottom: auto;
        right: auto;
        transform: rotate(0)
    }
    .main-timeline2 .timeline:nth-child(2n) .year:before {
        border-right-color: #1ebad0
    }
    .main-timeline2 .timeline:nth-child(3n) .year:before {
        border-right-color: #7cba01
    }
    .main-timeline2 .timeline:nth-child(4n) .year:before {
        border-right-color: #f8781f
    }
    .main-timeline2 .inner-content {
        padding: 10px
    }
}

                                    
Arrows Defense Game

Arrows Defense Game

Asidebar Menu Style01

Asidebar Menu Style01

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Css Page grid layout

Css Page grid layout

Form Création de compte style animée

Form Création de compte style animée

Pagination with Jquery

Pagination with Jquery

Radio button style

Radio button style

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Titre section avec une bande style01

Titre section avec une bande style01

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Vers le haut

Vers le haut

up down tr in table with js

up down tr in table with js