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.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="container">
<span class="line-1">the</span>
<span class="line-2">Vintage</span>
<span class="line-3">typography experiment</span>
<span class="line-5"><a href="https://github.com/codrops/Arctext">Archtext.js</a><a href="https://codepen.io/zambo/pen/jKEDp/">Codepen.io</a></span>
<span class="line-6">2014</span>
</div>
@import compass
@import url(https://fonts.googleapis.com/css?family=PT+Sans:700|Pacifico|Changa+One)
body
background: #ffffff url(https://subtlepatterns.com/patterns/groovepaper.png) repeat
color: #000000
.container
font-family: 'Pacifico', cursive
font-weight: 400
position: relative
margin: 80px auto
width: 600px
font-size: 30px
text-align: center
+opacity(0.8)
span
display: block
.line-1
position: relative
&:before, &:after
content: "\f005"
font-family: FontAwesome
position: relative
font-style: normal
font-weight: normal
text-decoration: inherit
font-size: 16px
margin: -0 30px
top: -5px
.line-2
font-family: 'Changa One', sans-serif
font-weight: 400
text-transform: uppercase
font-size: 90px
letter-spacing: 15px
margin: 0 0
.line-3
font-family: 'PT Sans', sans-serif
font-weight: 700
font-size: 16px
text-transform: uppercase
margin: 70px 0 0
position: relative
letter-spacing: 6px
&:before, &:after
content: " "
position: absolute
width: 50px
height: 5px
border-top: 1px solid #222222
border-bottom: 1px solid #222222
&:before
margin: 7px 0 0 -60px
&:after
margin: 7px 0 0 10px
.line-4
width: 100%
position: relative
font-size: 18px
margin: 50px 0 0
//@include transform(rotate(-8deg))
.line-5
margin: 20px 0 50px
position: relative
text-align: center
margin: 50px auto
display: block
font-size: 20px
a
text-decoration: none
display: inline-block
text-align: left
color: #222
&:nth-child(1)
text-align: right
&:after
content: "\f005 "
font-family: FontAwesome
font-style: normal
font-weight: normal
text-decoration: inherit
position: relative
font-size: 30px
text-align: center
width: 90%
top: 4px
margin: 0
padding: 0 20px
.line-6
font-family: 'PT Sans', sans-serif
font-size: 16px
letter-spacing: 5px
&:before, &:after
content: "\f068"
font-family: FontAwesome
font-style: normal
font-weight: normal
text-decoration: inherit
position: relative
font-size: 16px
margin: 0 10px
top: 2px
/* This demo Uses Acrtext.js
// https://github.com/codrops/Arctext/
// Inspiration from: https://blog.spoongraphics.co.uk/freebies/6-free-customizable-retrovintage-logos-emblems
*/
$(document).ready(function() {
$(".line-2").arctext({radius: 700});
});
Also see: Tab Triggers