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.
.lm-tabel
.lm-item.lm-item-2
.lm-item-top
span.lm-item-title.lm-underline START
.lm-item-price
i.icon-dollar
|0.995
.lm-item-body
.lm-item-desc
strong CUSTOM AIR
p Air, air, air
ul.lm-item-list
li #1 24/8 support
i.icon-cancel
li #2 10 cookies
i.icon-ok
li #3 2 candy
i.icon-ok
li #4 air form
i.icon-cancel
li #5 air filter
i.icon-cancel
li #6 air analytik
i.icon-cancel
.lm-item-link
a(href="#")
svg(width='152', height='52',xmlns='http://www.w3.org/2000/svg')
defs
lineargradient#lm-gr-2(x1='0', y1='0', x2='100%', y2='100%')
stop(offset='0%', stop-color='#7E052D')
stop(offset='100%', stop-color='#F6266B')
rect(x='1', y='1', width='150', height='50', rx='25', fill='#fff', stroke='url(#lm-gr-2)', stroke-width='1')
text(x='23%', y='65%', fill='url("#lm-gr-2")') CHOOSE
.lm-item-bottom
.lm-item.lm-item-1
.lm-item-top
span.lm-item-title.lm-underline BUSINESS
.lm-item-price
i.icon-dollar
|2.997
.lm-item-body
.lm-item-desc
strong CUSTOM AIR
p Air, air, air
ul.lm-item-list
li #1 24/8 support
i.icon-ok
li #2 10 cookies
i.icon-ok
li #3 2 candy
i.icon-ok
li #4 air form
i.icon-ok
li #5 air filter
i.icon-cancel
li #6 air analytik
i.icon-cancel
.lm-item-link
a(href="#")
svg(width='152', height='52',xmlns='http://www.w3.org/2000/svg')
defs
lineargradient#lm-gr-1(x1='0', y1='0', x2='100%', y2='100%')
stop(offset='0%', stop-color='#241326')
stop(offset='100%', stop-color='#85468C')
rect(x='1', y='1', width='150', height='50', rx='25', fill='#fff', stroke='url(#lm-gr-1)', stroke-width='1')
text(x='23%', y='65%', fill='url("#lm-gr-1")') CHOOSE
.lm-item-bottom
span.lm-underline!='Choose now '
| and we meet tomorrow!
.lm-item.lm-item-3
.lm-item-top
span.lm-item-title.lm-underline PREMIUM
.lm-item-price
i.icon-dollar
|5.005
.lm-item-body
.lm-item-desc
strong CUSTOM AIR
p Air, air, air
ul.lm-item-list
li #1 24/8 support
i.icon-ok
li #2 10 cookies
i.icon-ok
li #3 2 candy
i.icon-ok
li #4 air form
i.icon-ok
li #5 air filter
i.icon-ok
li #6 air analytik
i.icon-ok
.lm-item-link
a(href="#")
svg(width='152', height='52',xmlns='http://www.w3.org/2000/svg')
defs
lineargradient#lm-gr(x1='0', y1='0', x2='100%', y2='100%')
stop(offset='0%', stop-color='#1A466F')
stop(offset='100%', stop-color='#4D93D5')
rect(x='1', y='1', width='150', height='50', rx='25', fill='#fff', stroke='url(#lm-gr)', stroke-width='1')
text(x='23%', y='65%', fill='url("#lm-gr")') CHOOSE
.lm-item-bottom
body
background url('http://pp.vk.me/c623124/v623124915/42806/oQsNfigr9tM.jpg')
background-size cover
BR = 7px
.lm-underline
position relative
&:after
position absolute
content ' '
right 5%
left 5%
bottom 0
height 1px
background-image linear-gradient(90deg,transparent,#fff,transparent)
.lm-tabel
font-family 'Open Sans'
max-width 1000px
width 100%
padding-top 10px
margin 0 auto
clearfix()
L = 30
.lm-item-1
.lm-item-bottom
.lm-item-top
background-color lighten(#241326,5)
background-image linear-gradient(-45deg,lighten(#241326,L),#241326)
.lm-item-2
.lm-item-bottom
.lm-item-top
background-color lighten(#cb0948,5)
background-image linear-gradient(-45deg,lighten(#7E052D,L),#7E052D)
.lm-item-3
.lm-item-bottom
.lm-item-top
background-color lighten(#235f95,5)
background-image linear-gradient(-45deg,lighten(#1A466F,L),#1A466F)
.lm-item
transform scale(.9)
vertical-align top
width 33%
float left
display inline-block
position relative
transition transform .3s ease-out, filter .3s
&:hover
transform scale(1)
&:not(:hover).blur
filter blur(3px)
&:after
&:before
z-index -1
content ' '
position absolute
left 10px
top 80%
bottom 18px
right 10px
transform-origin bottom center
box-shadow 0px 25px 10px -8px rgba(#000, .4)
&:after
transform rotate(6deg) translate3d(15px,0,0)
&:before
transform rotate(-6deg) translate3d(-15px,0,0)
&-top
padding-top 20px
text-transform uppercase
border-top-left-radius BR
border-top-right-radius BR
text-align center
&-title
color lighten(#9b8e98,30)
font 100 30px/70px 'Open Sans'
&-price
background rgba(white,.05)
margin-top 20px
font-size 40px
line-height 50px
color white
i
font-size 15px
&-body
padding 15px
background #fff
&-desc
text-align center
margin-bottom 15px
text-transform uppercase
strong
color #868686
font 400 16px 'Open Sans'
p
color #b4b4b4
margin 0
&-list
margin 0
padding 0
list-style none
li
&:nth-child(2n+1)
background-color #fbfbfb
color #b4b4b4
border-bottom 1px dotted rgba(#000,.1)
margin-bottom 5px
.icon-cancel
.icon-ok
float right
.icon-ok
color #75bc9a
.icon-cancel
color #BF7375
&-link
text-align center
margin-top 15px
a
text-decoration none
display inline-block
height 54px
&:hover
transition transform .3s
transform translate3d(0,-3px,0)
&:active
transition transform .1s
transform translate3d(0,0,0)
text
font-size: 21px;
font-weight: 700
user-select none
&-bottom
text-align center
border-bottom-left-radius BR
border-bottom-right-radius BR
padding 15px
color rgba(#fff,.5)
font-weight 100
min-height 20px
span
color white
font-weight 400
margin-right 3px
transform skewX(-10deg)
display inline-block
@font-face
font-family 'fontello'
src url('data:application/font-woff;base64,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') format('woff')
font-weight normal
font-style normal
[class^="icon-"]:before, [class*=" icon-"]:before
font-family "fontello"
font-style normal
font-weight normal
speak none
display inline-block
text-decoration inherit
width 1em
margin-right .2em
text-align center
font-variant normal
text-transform none
line-height 1em
margin-left .2em
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
.icon-dollar
&:before
content '\e806'
.icon-cancel
&:before
content '\e807'
.icon-ok
&:before
content '\e808'
$(document).ready ()->
arrItems = $('.lm-item')
arrItems.hover( ->
arrItems.addClass('blur')
,->
arrItems.removeClass('blur')
)
Also see: Tab Triggers