Timeline 7

In this example below you will see how to do a Timeline 7 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 7</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="cmptimeline--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="cmptimeline">
	            	<div class="cmptimeline__date__year">
	            		2017
	            	</div>
	                <div class="cmptimeline__line">
	                    <div class="cmptimeline__line__date__day" title="Data da movimentação">
	                    	05/<strong>JAN</strong>
	                    </div>
	                    <div class="cmptimeline__line__item">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__content__info">
	                                <h1>Dados da movimentação</h1>
	                                <div class="row">
	                                	<div class="col-md-6">
	                                		<div class="cmptimeline__content__info__dados" data-description="Tipo">
			                                	Movimentação de pessoas
			                                </div>
	                                	</div>
	                                	<div class="col-md-6">
	                                		<div class="cmptimeline__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="cmptimeline__content__info__dados" data-description="Tipo">
			                                	Tipo de ato 01
			                                </div>
	                                	</div>
	                                	<div class="col-md-3">
	                                		<div class="cmptimeline__content__info__dados" data-description="Data da criação">
			                                	17/02/2017
			                                </div>
	                                	</div>
	                                	<div class="col-md-3">
	                                		<div class="cmptimeline__content__info__dados" data-description="Data a vigorar">
			                                	10/10/2017
			                                </div>
	                                	</div>
	                                </div>
	                                <div class="row">
	                                	<div class="col-md-6">
	                                		<div class="cmptimeline__content__info__dados" data-description="Ementa">
			                                	Ementa criada para o ato 01.
			                                </div>
	                                	</div>
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cmptimeline__line__item cmptimeline__line__item--resumido">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__content__info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="cmptimeline__line">
	                    <div class="cmptimeline__line__date__day" title="Data da movimentação">
	                    	06/<strong>JAN</strong>
	                    </div>
	                    <div class="cmptimeline__line__item cmptimeline__line__item--resumido">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__content__info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cmptimeline__line__item cmptimeline__line__item--resumido">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__content__info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="cmptimeline__line">
	                    <div class="cmptimeline__line__date__day" title="Data da movimentação">
	                    	07/<strong>JAN</strong>
	                    </div>
	                    <div class="cmptimeline__line__item cmptimeline__line__item--resumido">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__content__info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cmptimeline__line__item cmptimeline__line__item--resumido">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__content__info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="cmptimeline__line">
	                    <div class="cmptimeline__line__date__day" title="Data da movimentação">
	                    	08/<strong>JAN</strong>
	                    </div>
	                    <div class="cmptimeline__line__item cmptimeline__line__item--resumido">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__content__info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cmptimeline__line__item cmptimeline__line__item--resumido">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__content__info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="cmptimeline__line">
	                    <div class="cmptimeline__line__date__day" title="Data da movimentação">
	                    	09/<strong>JAN</strong>
	                    </div>
	                    <div class="cmptimeline__line__item cmptimeline__line__item--resumido">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__content__info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cmptimeline__line__item cmptimeline__line__item--resumido">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__content__info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="cmptimeline__line">
	                    <div class="cmptimeline__line__date__day" title="Data da movimentação">
	                    	10/<strong>JAN</strong>
	                    </div>
	                    <div class="cmptimeline__line__item cmptimeline__line__item--resumido">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__content__info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cmptimeline__line__item cmptimeline__line__item--resumido">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__content__info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="cmptimeline__line">
	                    <div class="cmptimeline__line__date__day" title="Data da movimentação">
	                    	11/<strong>JAN</strong>
	                    </div>
	                    <div class="cmptimeline__line__item cmptimeline__line__item--resumido">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos da matrícula">
	                            <i class="fa fa-user text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Matrícula">
	                            	<strong>1817</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__content__info">
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                                <br>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="cmptimeline__line__item cmptimeline__line__item--resumido">
	                        <div class="cmptimeline__line__item__icon__info" title="Atos gerais">
	                            <i class="fa fa-file-text-o text-muted"></i>
	                            <div class="cmptimeline__line__item__icon__info__description" data-description="Funcionalidade">
	                            	<strong>Cadastro de cargos</strong>
	                            </div>
	                        </div>
	                        <div class="cmptimeline__line__item__mark"></div>
	                        <div class="cmptimeline__content">
	                            <header>
	                                <div class="cmptimeline__content__header" data-description="Ato">15661654464656</div>
	                            </header>
	                            <div class="cmptimeline__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-7-OxVqGg */
body {
  font-family: 'Arial';
  font-size: 14px;
}
.container--timeline {
  width: 900px;
  margin: 0 auto;
}
.cmptimeline {
  width: 100%;
  position: relative;
}
.cmptimeline::before {
  width: 2px;
  background-color: #ced3de;
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -2px;
  height: 100%;
  z-index: 0;
}
.cmptimeline > .cmptimeline__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;
}
.cmptimeline > .cmptimeline__line {
  display: block;
  width: 100%;
  z-index: 1;
}
.cmptimeline > .cmptimeline__line:nth-child(even) > .cmptimeline__line__item > .cmptimeline__line__item__icon__info {
  left: 52.5%;
}
.cmptimeline > .cmptimeline__line:nth-child(even) > .cmptimeline__line__item > .cmptimeline__content {
  margin-right: 52%;
}
.cmptimeline > .cmptimeline__line:nth-child(even) > .cmptimeline__line__item > .cmptimeline__content > header::after {
  right: auto;
  left: 10px;
}
.cmptimeline > .cmptimeline__line:nth-child(even) > .cmptimeline__line__item > .cmptimeline__content > header > .cmptimeline__content__header {
  text-align: right;
}
.cmptimeline > .cmptimeline__line:nth-child(even) > .cmptimeline__line__item > .cmptimeline__content > header > .cmptimeline__content__header::before {
  right: 15px;
  left: auto;
}
.cmptimeline > .cmptimeline__line:nth-child(odd) > .cmptimeline__line__item > .cmptimeline__content {
  margin-left: 53%;
}
.cmptimeline > .cmptimeline__line:nth-child(odd) > .cmptimeline__line__item > .cmptimeline__content::before {
  left: -1.5%;
  border-left: 0px;
  border-right: 7px solid #009CDE;
}
.cmptimeline > .cmptimeline__line:nth-child(odd) > .cmptimeline__line__item > .cmptimeline__line__item__icon__info > .cmptimeline__line__item__icon__info__description {
  text-align: right;
  left: -360px;
}
.cmptimeline > .cmptimeline__line:nth-child(odd) > .cmptimeline__line__item > .cmptimeline__line__item__icon__info > .cmptimeline__line__item__icon__info__description::before {
  right: 0;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__date__day {
  width: 70px;
  height: 20px;
  text-align: center;
  margin: 20px auto;
  color: #ffffff;
  background-color: #ff5f01;
  border-radius: 5px;
  z-index: 98;
  position: sticky;
  top: 40px;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item {
  width: 100%;
  position: relative;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__line__item__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%;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__line__item__icon__info > i {
  color: #9fa5ab;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__line__item__icon__info > .cmptimeline__line__item__icon__info__description {
  position: absolute;
  top: 15px;
  left: 50px;
  color: #9fa5ab;
  width: 350px;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__line__item__icon__info > .cmptimeline__line__item__icon__info__description::before {
  position: absolute;
  top: -10px;
  left: 0px;
  color: #9fa5ab;
  content: attr(data-description);
  font-size: 11px;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__line__item__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 #009bde;
  -moz-box-shadow: 0px 0px 0px 2px #009bde;
  box-shadow: 0px 0px 0px 2px #009bde;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__content {
  width: 47%;
  background: #fff;
  margin-top: 20px;
  position: relative;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 5px 10px 0px rgba(0, 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;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__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;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__content > header {
  position: relative;
  cursor: pointer;
  background-color: #009CDE;
  color: #fff;
  line-height: 20px;
  padding: 15px 15px 5px;
  border-radius: 5px 5px 0px 0px;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__content > header::after {
  content: '\f147';
  font: normal normal normal 14px/1 FontAwesome;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -7px;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__content > header > .cmptimeline__content__header::before {
  content: attr(data-description);
  font-size: 11px;
  position: absolute;
  top: 5%;
  left: 15px;
  opacity: .7;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__content > .cmptimeline__content__info {
  padding: 10px;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__content > .cmptimeline__content__info > h1 {
  font-size: 16px;
  margin: 0 0 3px;
  color: #000;
  font-weight: bold;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__content > .cmptimeline__content__info .cmptimeline__content__info__dados {
  padding: 12px 0 0;
  color: #000;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item > .cmptimeline__content > .cmptimeline__content__info .cmptimeline__content__info__dados::before {
  position: absolute;
  color: #9fa5ab;
  top: 0px;
  left: 4px;
  font-size: 11px;
  content: attr(data-description);
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item.cmptimeline__line__item--resumido > .cmptimeline__content {
  padding: 0px;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item.cmptimeline__line__item--resumido > .cmptimeline__content > header {
  border-radius: 5px;
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item.cmptimeline__line__item--resumido > .cmptimeline__content > header::after {
  font: normal normal normal 14px/1 FontAwesome;
  content: '\f196';
}
.cmptimeline > .cmptimeline__line > .cmptimeline__line__item.cmptimeline__line__item--resumido > .cmptimeline__content > .cmptimeline__content__info {
  display: none;
}
.cmptimeline--filter {
  position: sticky;
  top: 0;
  left: 0;
}
.cmptimeline--filter > ul {
  padding-left: 0;
}
.cmptimeline--filter > ul > li {
  list-style: none;
}
.cmptimeline--filter > ul > li > a {
  padding-left: 20px;
  border-left: solid 4px #9fa5ab;
  color: #9fa5ab;
}
.cmptimeline--filter > ul > li > a.active {
  border-left: solid 4px #009CDE;
  color: #009CDE;
}
.cmptimeline--filter > ul > li > a:hover {
  border-left: solid 4px #009CDE;
  color: #009CDE;
}
.cmptimeline--filter > ul > li:nth-child(2) > a {
  border-left: solid 4px #b3b8bd;
  color: #b3b8bd;
}
.cmptimeline--filter > ul > li:nth-child(3) > a {
  border-left: solid 4px #c6c9cd;
  color: #c6c9cd;
}
.cmptimeline--filter > ul > li:nth-child(4) > a {
  border-left: solid 4px #d9dbde;
  color: #d9dbde;
}

Comments