"Timeline"
Bootstrap 4.1.1 Snippet by anvictor

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <div class="container text-center"> <h1>Processo Seletivo Aberto</h1> <div class="row"> <div class="col-md-12"> <div class="main-timeline"> <a href="#" class="timeline" data-aos="fade-up" > <div class="timeline-icon"><i class="fa fa-user-md"></i></div> <div class="timeline-content"> <h3 class="title">Data 13/01/2019</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" data-aos="fade-up" > <div class="timeline-icon"><i class="fa fa-gavel"></i></div> <div class="timeline-content"> <h3 class="title">Web Developer</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" data-aos="fade-up" > <div class="timeline-icon"><i class="fa fa-medkit"></i></div> <div class="timeline-content"> <h3 class="title">Web Designer</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" data-aos="fade-up" > <div class="timeline-icon"><i class="fa fa-viadeo"></i></div> <div class="timeline-content"> <h3 class="title">Web Developer</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>
//Timeline Demo-1 a{text-decoration:none} h4{text-align:center;margin:30px 0;color:#444} .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:#ec496e;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 #ec496e;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:#ec496e;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:#ec496e;position:absolute;top:50%;right:-100px;transform:translateY(-50%)} .main-timeline .timeline-icon:after{width:70px;height:50px;background:#fff;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 #ec496e;border-top:none;border-right:none;position:absolute;bottom:-13px;left:35px} .main-timeline .timeline-content:after{content:"";width:37px;height:3px;background:#ec496e;position:absolute;top:13px;left:0} .main-timeline .title{font-size:20px;font-weight:600;color:#ec496e;text-transform:uppercase;margin:0 0 5px} .main-timeline .description{display:inline-block;font-size:22px;color:#2CAFFD;line-height:20px;letter-spacing:1px;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:#f9850f} .main-timeline .timeline:nth-child(2n) .timeline-icon{border-color:#f9850f} .main-timeline .timeline:nth-child(2n) .title{color:#f9850f} .main-timeline .timeline:nth-child(2n) .timeline-content:before{border-left-color:#f9850f;border-bottom-color:#f9850f} .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} }

Related: See More


Questions / Comments: