Timeline 6

In this example below you will see how to do a Timeline 6 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by lucascampos, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lucascampos ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Timeline 6</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="scrollBar" style="max-height:600px; position: relative">
    		<div class="ctr-timeline-filter">
    			<ul>
    				<li>
    					<a href="" class="active">Hoje</a>
    				</li>
    				<li>
    					<a href="">Última semana</a>
    				</li>
    				<li>
    					<a href="">Mês atual</a>
    				</li>
    				<li>
    					<a href="">Ano atual</a>
    				</li>
    			</ul>
    		</div>
	        <div class="container-timeline">
	            <div class="ctr-timeline">
	            	<div class="ctr-timeline-date-year">
	            		2017
	            	</div>
	                <div class="ctr-timeline-line">
	                    <div class="ctr-timeline-date" title="Data da movimentação">
	                    	05/<strong>JAN</strong>
	                    </div>
	                    <div class="cl">
	                        <div class="ctr-timeline-icon-info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <h1>Dados da movimentação</h1>
	                                <div class="row">
	                                	<div class="col-md-6">
	                                		<div class="ctr-timeline-content-info-dados" data-description="Tipo">
			                                	Movimentação de pessoas
			                                </div>
	                                	</div>
	                                	<div class="col-md-6">
	                                		<div class="ctr-timeline-content-info-dados" data-description="Funcionalidade">
			                                	Cadastro de cargos
			                                </div>
	                                	</div>
	                                </div>
	                                <h1>Dados do ato</h1>
	                                <div class="row">
	                                	<div class="col-md-6">
	                                		<div class="ctr-timeline-content-info-dados" data-description="Tipo">
			                                	Tipo de ato 01
			                                </div>
	                                	</div>
	                                	<div class="col-md-3">
	                                		<div class="ctr-timeline-content-info-dados" data-description="Data da criação">
			                                	17/02/2017
			                                </div>
	                                	</div>
	                                	<div class="col-md-3">
	                                		<div class="ctr-timeline-content-info-dados" data-description="Data a vigorar">
			                                	10/10/2017
			                                </div>
	                                	</div>
	                                </div>
	                                <div class="row">
	                                	<div class="col-md-6">
	                                		<div class="ctr-timeline-content-info-dados" data-description="Ementa">
			                                	Ementa criada para o ato 01.
			                                </div>
	                                	</div>
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cl resumido">
	                        <div class="ctr-timeline-icon-info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="ctr-timeline-line">
	                    <div class="ctr-timeline-date" title="Data da movimentação">
	                    	06/<strong>JAN</strong>
	                    </div>
	                    <div class="cl resumido">
	                        <div class="ctr-timeline-icon-info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cl resumido">
	                        <div class="ctr-timeline-icon-info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="ctr-timeline-line">
	                    <div class="ctr-timeline-date" title="Data da movimentação">
	                    	07/<strong>JAN</strong>
	                    </div>
	                    <div class="cl resumido">
	                        <div class="ctr-timeline-icon-info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cl resumido">
	                        <div class="ctr-timeline-icon-info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="ctr-timeline-line">
	                    <div class="ctr-timeline-date" title="Data da movimentação">
	                    	08/<strong>JAN</strong>
	                    </div>
	                    <div class="cl resumido">
	                        <div class="ctr-timeline-icon-info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cl resumido">
	                        <div class="ctr-timeline-icon-info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="ctr-timeline-line">
	                    <div class="ctr-timeline-date" title="Data da movimentação">
	                    	09/<strong>JAN</strong>
	                    </div>
	                    <div class="cl resumido">
	                        <div class="ctr-timeline-icon-info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cl resumido">
	                        <div class="ctr-timeline-icon-info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="ctr-timeline-line">
	                    <div class="ctr-timeline-date" title="Data da movimentação">
	                    	10/<strong>JAN</strong>
	                    </div>
	                    <div class="cl resumido">
	                        <div class="ctr-timeline-icon-info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cl resumido">
	                        <div class="ctr-timeline-icon-info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="ctr-timeline-line">
	                    <div class="ctr-timeline-date" title="Data da movimentação">
	                    	11/<strong>JAN</strong>
	                    </div>
	                    <div class="cl resumido">
	                        <div class="ctr-timeline-icon-info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cl resumido">
	                        <div class="ctr-timeline-icon-info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="ctr-timeline-icon-info-description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="ctr-timeline-mark"></div>
	                        <div class="ctr-timeline-content">
	                            <header>
	                                <div class="ctr-timeline-content-header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="ctr-timeline-content-info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/lucascampos/timeline-6-boNBpd */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  font-size: 14px;
}
.row {
  margin-bottom: 10px;
}
.container-timeline {
        width: 900px;
        margin: 0 auto;
      
    }

    .ctr-timeline {
        width: 100%;
        position: relative;
    }

    .ctr-timeline::before {
        width: 2px;
        background-color: rgb(206, 211, 222);
        content: '';
        position: absolute;
        left: 50%;
        margin-left: -2px;
        height: 100%;
        z-index: 0;
    }

    .ctr-timeline-line {
        display: block;
        width: 100%;
        z-index: 1;
    }

    .ctr-timeline-date-year {
    	width: 70px;
	    height: 20px;
	    text-align: center;
	    margin: 0 auto;
	    color: #fff;
	    background-color: #9fa5ab;
	    border-radius: 5px;
	    z-index: 100;
	    position: sticky;
    	top: 0;
    }

    .ctr-timeline-date-day {
    	text-align: center;
	    font-weight: bold;
	    font-size: 20px;
	    color: rgb(159, 165, 171);
    }

    /*.ctr-timeline-line:nth-child(even)>.ctr-timeline-date>.ctr-timeline-date-day, .ctr-timeline-line:nth-child(even)>.ctr-timeline-date>.ctr-timeline-date-month {
    	margin-left: 60px;
    	text-align: left;
    }*/

    .ctr-timeline-date-month {
    	text-align: center;
	    color: rgb(159, 165, 171);
    }

    .ctr-timeline-date {
        width: 70px;
	    height: 20px;
	    text-align: center;
	    margin: 20px auto;
	    /*color: #9fa5ab;
	    background-color: #f0f0f0;*/
	    color: #ffffff;
    	background-color: #ff5f01;
	    border-radius: 5px;
	    z-index: 98;
	    position: sticky;
    	top: 40px;
    }

    .cl {
        width: 100%;
        position: relative;
    }

    .ctr-timeline-content {
        width: 47%;
        background: #fff;
        margin-top: 20px;
        /*   padding: 20px; */
        position: relative;
        -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .3);
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .3);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        border-radius: 5px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .ctr-timeline-content>header {
        position: relative;
        cursor: pointer;
        background-color: #009CDE;
        color: #fff;
        line-height: 20px;
        padding: 15px 15px 5px;
        border-radius: 5px 5px 0px 0px
    }

    .cl>.ctr-timeline-content>header>.ctr-timeline-content-header::before {
        content: attr(data-description);
        font-size: 11px;
        position: absolute;
        top: 5%;
        left: 15px;
        opacity: .7;
    }

    .ctr-timeline-line:nth-child(even)>.cl>.ctr-timeline-content>header>.ctr-timeline-content-header {
    	text-align: right;
    }

    .ctr-timeline-line:nth-child(even)>.cl>.ctr-timeline-content>header>.ctr-timeline-content-header::before {
        right: 15px;
        left: auto;
    }

    .cl>.ctr-timeline-content>header::after {
        content: '\f147';
        font: normal normal normal 14px/1 FontAwesome;
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -7px;
    }

    .ctr-timeline-line:nth-child(even)>.cl>.ctr-timeline-content>header::after {
    	right: auto;
    	left: 10px;
    }

    .ctr-timeline-content>.ctr-timeline-content-info {
        padding: 10px;
    }

    .ctr-timeline-line:nth-child(odd)>.cl>.ctr-timeline-content {
        margin-left: 53%;
    }

    .ctr-timeline-line:nth-child(even)>.cl>.ctr-timeline-content {
        margin-right: 52%;
    }

    .ctr-timeline-line:nth-child(odd)>.cl>.ctr-timeline-content::before {
        left: -1.5%;
        border-left: 0px;
        border-right: 7px solid #009CDE;
    }

    .ctr-timeline-content::before {
        content: '';
        position: absolute;
        left: 100%;
        top: 15px;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 7px solid #009CDE;
    }

    .ctr-timeline-mark {
        content: '';
        position: absolute;
        margin-left: -8px;
        left: 50%;
        top: 15px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #fff;
        -webkit-box-shadow: 0px 0px 0px 2px rgba(0, 155, 222, 1);
        -moz-box-shadow: 0px 0px 0px 2px rgba(0, 155, 222, 1);
        box-shadow: 0px 0px 0px 2px rgba(0, 155, 222, 1);
    }

    /*.ctr-timeline-content-info>.
{
    	margin-left: -11px;
    	margin-right: -11px;
    }*/

    .ctr-timeline-content-info>h1 {
    	font-size: 16px;
    	margin: 0 0 3px;
    	color: #000;
    	font-weight: bold;
    }

    .ctr-timeline-content-info-dados {
    	padding: 12px 0 0;
    	color: #000;
    }

    .ctr-timeline-content-info-dados::before {
    	position: absolute;
    	color: #9fa5ab;
    	top: 0px;
	    left: 15px;
	    font-size: 11px;
    	content: attr(data-description);
    }

    .ctr-timeline-icon-info {
        position: absolute;
        left: 43%;
        top: 1px;
        display: flex;
        width: 40px;
        justify-content: center;
        align-items: center;
        height: 40px;
        background-color: #f0f0f0;
        border-radius: 50%;

        /*position: absolute;
	    left: 43.5%;
	    top: 1px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    width: 40px;
	    border-radius: 50%;
	    height: 40px;
	    -webkit-box-shadow: 0px 0px 0px 2px rgba(247,247,247,1);
	    -moz-box-shadow: 0px 0px 0px 2px rgba(247,247,247,1);
	    box-shadow: 0px 0px 0px 1px rgb(230, 230, 230);
	    background: #fcfcfc;
	    background: -moz-linear-gradient(top, #fcfcfc 0%, #f7f7f7 100%);
	    background: -webkit-linear-gradient(top, #fcfcfc 0%,#f7f7f7 100%);
	    background: linear-gradient(to bottom, #fcfcfc 0%,#f7f7f7 100%);*/
    }

    .ctr-timeline-icon-info>i {
        color: #9fa5ab;
    }

    .ctr-timeline-icon-info-description {
    	position: absolute;
    	top: 15px;
	    left: 50px;
	    color: #9fa5ab;
	    width: 350px;
    }

    .ctr-timeline-icon-info-description::before {
    	position: absolute;
    	top: -10px;
	    left: 0px;
	    color: #9fa5ab;
	    content: attr(data-description);
	    font-size: 11px;
    }

    .ctr-timeline-line:nth-child(odd)>.cl>.ctr-timeline-icon-info>.ctr-timeline-icon-info-description {
    	text-align: right;
    	left: -360px;
    }

    .ctr-timeline-line:nth-child(odd)>.cl>.ctr-timeline-icon-info>.ctr-timeline-icon-info-description::before {
    	right: 0;    	
    }


    /*Ctr Timeline Resume*/

    .resumido>.ctr-timeline-content>header {
        border-radius: 5px;
    }

    .resumido>.ctr-timeline-content {
        padding: 0px;
    }

    .resumido>.ctr-timeline-content>.ctr-timeline-content-info {
        display: none;
    }

    .cl.resumido>.ctr-timeline-content>header::after {
        font: normal normal normal 14px/1 FontAwesome;
        content: '\f196';
    }
    /*Left*/

    .ctr-timeline-line:nth-child(even)>.cl>.ctr-timeline-icon-info {
        left: 52.5%;
    }

    /*Filtro Timeline*/
    .ctr-timeline-filter {
    	position: sticky;
    	top: 0;
    	left: 0;
    }

    .ctr-timeline-filter>ul {
    	padding-left: 0;
    }
    
    .ctr-timeline-filter>ul>li {
    	list-style: none;
    }

    .ctr-timeline-filter>ul>li>a {
    	padding-left: 20px;
    	border-left: solid 4px #9fa5ab;
    	color: #9fa5ab;
    }

    .ctr-timeline-filter>ul>li:nth-child(2)>a {
    	border-left: solid 4px #b3b8bd;
    	color: #b3b8bd;
    }

    .ctr-timeline-filter>ul>li:nth-child(3)>a {
    	border-left: solid 4px #c6c9cd;
    	color: #c6c9cd;
    }

    .ctr-timeline-filter>ul>li:nth-child(4)>a {
    	border-left: solid 4px #d9dbde;
    	color: #d9dbde;
    }

    .ctr-timeline-filter>ul>li>a.active {
    	border-left: solid 4px #009CDE;
    	color: #009CDE;
    }

    .ctr-timeline-filter>ul>li>a:hover {
    	border-left: solid 4px #009CDE;
    	color: #009CDE;
    }

Comments