"css-timelines"
Bootstrap 4.1.1 Snippet by nitesh575malviya

<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 ----------> <div class="container"> <div class="row my-5"> <div class="col-lg-6"> <div class="card shadow"> <div class="card-body"> <div class="rightbox"> <div class="tml-container"> <ul class="tml"> <li class="tml-item" ng-repeat="itembx"> <div class="timestamp"> 3rd May 2020<br> 7:00 PM </div> <div class="item-title">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div> </li> <li class="tml-item" ng-repeat="itembx"> <div class="timestamp"> 19th May 2020<br> 3:00 PM </div> <div class="item-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's </div> </li> <li class="tml-item" ng-repeat="itembx"> <div class="timestamp"> 17st June 2020<br> 7:00 PM </div> <div class="item-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> </li> </ul> </div> </div> </div> </div> </div> </div> </div>
.leftbox { top: -5%; left: 5%; position: absolute; width: 15%; height: 110%; background-color: #50d890; box-shadow: 3px 3px 15px rgba(119, 119, 119, 0.5); } nav { margin: 2.6em auto; } nav a { list-style: none; padding: 35px; color: #232931; font-size: 1.1em; display: block; transition: all 0.5s ease-in-out; } .rightbox { height: 100%; } .tml-container ul.tml { margin: 2.5em 0; padding: 0; display: inline-block; } .tml-container ul.tml li { list-style: none; margin: auto; margin-left: 2em; min-height: 50px; border-left: 1px dashed #a16f6f; padding: 0 0 50px 30px; position: relative; } .tml-container ul.tml li:last-child { border-left: 0; } .tml-container ul.tml li::before { position: absolute; left: -15px; top: -5px; content: " "; border: 8px solid #49b97e; border-radius: 500%; background: #00ff78; height: 30px; width: 30px; transition: all 500ms ease-in-out; } .tml-container ul.tml li:hover::before { border-color: #232931; transition: all 1000ms ease-in-out; } ul.tml li .timestamp { color: #212121; position: relative; font-size: 12px; } .item-title { color: #3954b7; word-wrap: break-word; } .container-3 { width: 5em; vertical-align: right; white-space: nowrap; position: absolute; } .container-3 input#search { width: 150px; height: 30px; background: #fbfbfb; border: none; font-size: 10pt; color: #262626; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0.9em 0 0 28.5em; box-shadow: 3px 3px 15px rgba(119, 119, 119, 0.5); } .container-3 .icon { margin: 1.3em 3em 0 31.5em; position: absolute; width: 150px; height: 30px; z-index: 1; color: #4f5b66; } input::placeholder { padding: 5em 5em 1em 1em; color: #50d890; }

Related: See More


Questions / Comments: