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
    }
}

                                    
Timeline style07

Timeline style07

Timeline style03

Timeline style03

Responsive image grid

Responsive image grid

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Planète animée style01

Planète animée style01

Page 404 exemple 01

Page 404 exemple 01

Loading Style snake

Loading Style snake

Input range slider HTML style05

Input range slider HTML style05

Input range slider HTML style03

Input range slider HTML style03

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Arrows Defense Game

Arrows Defense Game

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery