<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 ----------> <!-- Font Awesome --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet"> <div class="timeline"> <div class="tl-container left"> <div class="date">15 Dec</div> <i class="icon fa fa-home"></i> <div class="content"> <h2>Lorem ipsum dolor sit amet</h2> <p> Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium. </p> </div> </div> <div class="tl-container right"> <div class="date">22 Oct</div> <i class="icon fa fa-gift"></i> <div class="content"> <h2>Lorem ipsum dolor sit amet</h2> <p> Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium. </p> </div> </div> <div class="tl-container left"> <div class="date">10 Jul</div> <i class="icon fa fa-user"></i> <div class="content"> <h2>Lorem ipsum dolor sit amet</h2> <p> Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium. </p> </div> </div> <div class="tl-container right"> <div class="date">18 May</div> <i class="icon fa fa-running"></i> <div class="content"> <h2>Lorem ipsum dolor sit amet</h2> <p> Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium. </p> </div> </div> <div class="tl-container left"> <div class="date">10 Feb</div> <i class="icon fa fa-cog"></i> <div class="content"> <h2>Lorem ipsum dolor sit amet</h2> <p> Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium. </p> </div> </div> <div class="tl-container right"> <div class="date">01 Jan</div> <i class="icon fa fa-certificate"></i> <div class="content"> <h2>Lorem ipsum dolor sit amet</h2> <p> Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit semper pretium. </p> </div> </div> </div>

/**********************************/ /***** Timeline by HTML Codex *****/ /**********************************/ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #ffffff; } .timeline { position: relative; width: 100%; max-width: 1140px; margin: 0 auto; padding: 15px 0; } .timeline::after { content: ''; position: absolute; width: 2px; background: #006E51; top: 0; bottom: 0; left: 50%; margin-left: -1px; } .tl-container { padding: 15px 30px; position: relative; background: inherit; width: 50%; } .tl-container.left { left: 0; } .tl-container.right { left: 50%; } .tl-container::after { content: ''; position: absolute; width: 16px; height: 16px; top: calc(50% - 8px); right: -8px; background: #ffffff; border: 2px solid #006E51; border-radius: 16px; z-index: 1; } .tl-container.right::after { left: -8px; } .tl-container::before { content: ''; position: absolute; width: 50px; height: 2px; top: calc(50% - 1px); right: 8px; background: #006E51; z-index: 1; } .tl-container.right::before { left: 8px; } .tl-container .date { position: absolute; display: inline-block; top: calc(50% - 8px); text-align: center; font-size: 14px; font-weight: bold; color: #006E51; text-transform: uppercase; letter-spacing: 1px; z-index: 1; } .tl-container.left .date { right: -75px; } .tl-container.right .date { left: -75px; } .tl-container .icon { position: absolute; display: inline-block; width: 40px; height: 40px; padding: 9px 0; top: calc(50% - 20px); background: #F6D155; border: 2px solid #006E51; border-radius: 40px; text-align: center; font-size: 18px; color: #006E51; z-index: 1; } .tl-container.left .icon { right: 56px; } .tl-container.right .icon { left: 56px; } .tl-container .content { padding: 30px 90px 30px 30px; background: #F6D155; position: relative; border-radius: 0 500px 500px 0; } .tl-container.right .content { padding: 30px 30px 30px 90px; border-radius: 500px 0 0 500px; } .tl-container .content h2 { margin: 0 0 10px 0; font-size: 18px; font-weight: normal; color: #006E51; } .tl-container .content p { margin: 0; font-size: 16px; line-height: 22px; color: #000000; } @media (max-width: 767.98px) { .timeline::after { left: 90px; } .tl-container { width: 100%; padding-left: 120px; padding-right: 30px; } .tl-container.right { left: 0%; } .tl-container.left::after, .tl-container.right::after { left: 82px; } .tl-container.left::before, .tl-container.right::before { left: 100px; border-color: transparent #006E51 transparent transparent; } .tl-container.left .date, .tl-container.right .date { right: auto; left: 15px; } .tl-container.left .icon, .tl-container.right .icon { right: auto; left: 146px; } .tl-container.left .content, .tl-container.right .content { padding: 30px 30px 30px 90px; border-radius: 500px 0 0 500px; } }