"time line"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mehmetgulerxyz/pen/xPgyYZ" /> <style class="cp-pen-styles">/* Google Fonts */ @import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,700'); /* _variables.css */ /* _mixins.css */ /* _global.css */ * { box-sizing: border-box; } body { font-family: 'Ubuntu', sans-serif; background-color: #f0f0f0; } img { max-width: 100%; height: auto; } /* _wrapper.css */ .wrapper { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin-left: auto; margin-right: auto; } /* _page-section.css */ .page-section { padding: 50px 0; } @media (min-width: 800px){ .page-section{ padding: 100px 0; } } .page-section--gray { background-color: #f0f0f0; } /* _section-title.css */ .section-title { text-align: center; font-size: 32px; font-weight: 300; margin: 0 0 60px 0; } @media (min-width: 800px){ .section-title{ font-size: 55px; } } .section-title--gray { color: #9D9DA6; } /* _sprite.css */ .icon { background-image: url('http://mehmetguler.xyz/codepen/responsive-timeline/sprite-fbf7a24a.svg'); display: inline-block; } .no-svg .icon { background-image: url('http://mehmetguler.xyz/codepen/responsive-timeline/sprite-fbf7a24a.png'); } .icon--content-logo { width: 74px; height: 69px; background-position: 0 0; } .icon--css3 { width: 24px; height: 27px; background-position: 92.5% 39.130434782608695%; } .icon--html5 { width: 25px; height: 27px; background-position: 0 100%; } .icon--javascript { width: 25px; height: 27px; background-position: 31.645569620253166% 100%; } .icon--sketch { width: 30px; height: 27px; background-position: 100% 0; } /* _timeline.css */ .timeline { position: relative; padding: 100px 0; } .timeline::before { content: ""; position: absolute; top: 0; left: 10%; width: 4px; height: 100%; background-color: #DFDFDF; } @media (min-width: 800px){ .timeline::before{ left: 50%; margin-left: -2px; } } .timeline__item { margin-bottom: 100px; position: relative; } .timeline__item::after{ content: ""; clear: both; display: table; } .timeline__item:nth-child(2n) .timeline__item__content { float: right; } @media (min-width: 800px){ .timeline__item:nth-child(2n) .timeline__item__content::before{ left: -20px; border-right: 20px solid #fff; border-left: 0; } } .timeline__item:last-child { margin-bottom: 0; } .timeline__item__date { background-color: #DFDFDF; font-weight: 300; width: 140px; position: absolute; padding: 10px; top: -18px; left: 10%; margin-left: -33px; transition: all .3s ease-out; text-align: center; color: #adadad; border-radius: 6px; font-size: 14px; z-index: 1; } @media (min-width: 800px){ .timeline__item__date{ top: 30px; left: 50%; margin-left: -70px; } } .timeline__item__date strong { font-weight: 700; } .timeline__item__content { width: 80%; background: #fff; border-radius: 6px; float: right; transition: all .3s ease-out; padding: 30px 30px 25px 30px; position: relative; } @media (min-width: 800px){ .timeline__item__content{ width: 36%; float: inherit; } } @media (min-width: 1200px){ .timeline__item__content{ width: 40%; float: inherit; } } @media (min-width: 800px){ .timeline__item__content::before{ content: ""; position: absolute; top: 30px; right: -20px; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #fff; } } .timeline__item__content__logo { text-align: center; margin-bottom: 25px; } .timeline__item__content__title { margin: 0; padding: 0; margin-bottom: 5px; font-size: 20px; color: #464545; } @media (min-width: 800px){ .timeline__item__content__title{ font-size: 24px; } } .timeline__item__content__description { margin: 0; padding: 0; font-size: 16px; line-height: 24px; font-weight: 300; color: #A7A7A6; } @media (min-width: 800px){ .timeline__item__content__description{ font-size: 19px; line-height: 28px; } } .timeline__item__content__techs { margin-top: 15px; text-align: right; }</style></head><body> <div class="page-section page-section--gray"> <div class="wrapper"> <h2 class="section-title section-title--gray">My Works</h2> <div class="timeline"> <div class="timeline__item"> <div class="timeline__item__date">January <strong>2017</strong></div> <div class="timeline__item__content"> <div class="timeline__item__content__logo"> <span class="icon icon--content-logo"></span> </div> <h3 class="timeline__item__content__title"> Lorem Ipsum </h3> <p class="timeline__item__content__description"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <div class="timeline__item__content__techs"> <span class="icon icon--html5"></span> <span class="icon icon--css3"></span> <span class="icon icon--javascript"></span> </div> </div> </div> <div class="timeline__item"> <div class="timeline__item__date">February <strong>2017</strong></div> <div class="timeline__item__content"> <div class="timeline__item__content__logo"> <span class="icon icon--content-logo"></span> </div> <h3 class="timeline__item__content__title"> Lorem Ipsum </h3> <p class="timeline__item__content__description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </p> <div class="timeline__item__content__techs"> <span class="icon icon--sketch"></span> <span class="icon icon--css3"></span> </div> </div> </div> <div class="timeline__item"> <div class="timeline__item__date">March <strong>2017</strong></div> <div class="timeline__item__content"> <div class="timeline__item__content__logo"> <span class="icon icon--content-logo"></span> </div> <h3 class="timeline__item__content__title"> Lorem Ipsum </h3> <p class="timeline__item__content__description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </p> <div class="timeline__item__content__techs"> <span class="icon icon--sketch"></span> </div> </div> </div> <div class="timeline__item"> <div class="timeline__item__date">April <strong>2017</strong></div> <div class="timeline__item__content"> <div class="timeline__item__content__logo"> <span class="icon icon--content-logo"></span> </div> <h3 class="timeline__item__content__title"> Lorem Ipsum </h3> <p class="timeline__item__content__description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </p> <div class="timeline__item__content__techs"> <span class="icon icon--javascript"></span> </div> </div> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script> </body></html>

Related: See More

Datepicker
Form - Line
Bootstrap4 Card with Line-Tabs
Bootstrap Line Tabs by KeenThemes

Questions / Comments: