JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class="container">
<div class="row timeline">
<div class="timeline-bar"></div>
<div class="col-sm-6 timeline-left">
<div class="timeline-container">
<div class="timeline-circle"><i class="fa fa-code" aria-hidden="true"></i></div>
<div class="timeline-arrow"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad suscipit deserunt fuga aut corporis officia! Vitae molestias, eligendi cum velit necessitatibus dolorem, repellat inventore perferendis, nostrum reiciendis doloremque quisquam.</p>
</div>
</div>
<div class="col-sm-6 col-sm-offset-6 timeline-right">
<div class="timeline-container">
<div class="timeline-circle"><i class="fa fa-code" aria-hidden="true"></i></div>
<div class="timeline-arrow"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, accusamus perspiciatis quo repellat tempora corporis fuga, delectus facere nisi enim in iusto inventore veritatis optio debitis deleniti commodi asperiores. Consequatur.</p>
</div>
</div>
</div>
<div class="row timeline">
<div class="timeline-bar"></div>
<div class="col-sm-6 timeline-left">
<div class="timeline-container">
<div class="timeline-circle"><i class="fa fa-code" aria-hidden="true"></i></div>
<div class="timeline-arrow"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad suscipit deserunt fuga aut corporis officia! Vitae molestias, eligendi cum velit necessitatibus dolorem, repellat inventore perferendis, nostrum reiciendis doloremque quisquam.</p>
</div>
</div>
<div class="col-sm-6 col-sm-offset-6 timeline-right">
<div class="timeline-container">
<div class="timeline-circle"><i class="fa fa-code" aria-hidden="true"></i></div>
<div class="timeline-arrow"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, accusamus perspiciatis quo repellat tempora corporis fuga, delectus facere nisi enim in iusto inventore veritatis optio debitis deleniti commodi asperiores. Consequatur.</p>
</div>
</div>
</div>
</div>
$bg_cl: #C5E1A5
$txt_col: #689F38
$bgl_c: #DCEDC8
body
background: $bgl_c
.timeline
color: $txt_col
min-height: 80vh
margin: 20px 0
.timeline-container
position: relative
background: $bg_cl
padding: 1em
margin: 50px 30px 0 30px
text-align: justify
.timeline-bar
position: absolute
left: 49.6%
height: 100%
border-right: 5px solid $txt_col
margin-bottom: 20px
.timeline-arrow
position: absolute
left: 100%
top: 50%
&:after, &:before
left: 100%
border: solid transparent
content: " "
height: 0
width: 0
position: absolute
pointer-event: none
&:after
border-color: rgba(255, 255, 255, 0)
border-left-color: $bg_cl
border-width: 12px
margin-top: -12px
&:before
border-color: rgba(0, 0, 0, 0)
border-left-color: $bg_cl
border-width: 13px
margin-top: -13px
.timeline-right .timeline-arrow
left: 0
&:after
border-color: rgba(255, 255, 255, 0)
border-right-color: $bg_cl
margin-left: -20px
&:before
border-color: rgba(255, 255, 255, 0)
border-right-color: $bg_cl
margin-left: -26px
.timeline-circle
position: absolute
right: -66px
top: 39%
.fa-code
padding: 0.5em
border: 1px solid $txt_col
border-radius: 50%
background: $txt_col
color: #fff
font-size: 1.5em
font-weight: 700
.timeline-right .timeline-container .timeline-circle
left: -69px
Also see: Tab Triggers