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.
<p>
<h1>Header One</h1>
<h2>Header Two</h2>
<h3>Header Three</h3>
<h4>Header Four</h4>
<a class="small-round-button">Rounded Edges</a>
<a class="medium-round-button">Rounded Edges</a>
<a class="big-round-button">Rounded Edges</a>
</div>
<div class="flat-container">
</div>
<div class="row">
<a class="small-button">Small Square Button</a>
<a class="medium-button">Medium Square Button</a>
<a class="big-button">Big Square Button</a>
</div>
<div class="row">
<input class="flat-textbox" size="45" value="Flat Textbox"name="textfield" type="text">
<br>
<br><ul>
<li><a class="menu" href="#">Menu</a></li>
<li><a class="menu" href="#">Menu</a></li>
<li><a class="menu" href="#">Home</a></li>
<li><a class="menu" href="#">Home</a></li>
</ul>
@import compass
/*flat.css*/
body
background-color: #2c3e50
.row
margin: 5px 0
padding: 5px
.flat-container
position: absolute
left: 500px
top: 30px
max-width: 260px
text-align: center
margin: 0 auto
padding: 0 40px
padding: 0 1.5rem
background-color: #34495e
overflow: hidden
margin: 5px auto
width: 80%
/*Round buttons*/
.small-round-button
display: inline-block
text-align: center
border-radius: 6px
font-family: "Lato", sans-serif
cursor: pointer
margin: 0 7px
padding: 5px 8px
font-size: 12px
background: #4479BA
-webkit-transition-duration: 0.2s
-moz-transition-duration: 0.2s
transition-duration: 0.2s
.small-round-button:hover, .small-round-button:focus
background: #e74c3c
text-decoration: none
.medium-round-button
display: inline-block
text-align: center
border-radius: 6px
font-family: "Lato", sans-serif
cursor: pointer
margin: 0 0px
padding: 5px 8px
font-size: 14px
background: #4479BA
-webkit-transition-duration: 0.2s
-moz-transition-duration: 0.2s
transition-duration: 0.2s
.medium-round-button:hover, .medium-round-button:focus
background: #e74c3c
text-decoration: none
.big-round-button
text-align: center
padding: 5px 8px
font-size: 19px
display: inline-block
text-align: center
border-radius: 6px
font-family: "Lato", sans-serif
cursor: pointer
background: #4479BA
-webkit-transition-duration: 0.2s
-moz-transition-duration: 0.2s
transition-duration: 0.2s
.big-round-button:hover, .big-round-button:focus
background: #e74c3c
text-decoration: none
/*Regular buttons*/
.small-button
display: inline-block
text-align: center
font-family: "Lato", sans-serif
cursor: pointer
margin: 0 7px
padding: 5px 8px
font-size: 12px
background: #4479BA
-webkit-transition-duration: 0.2s
-moz-transition-duration: 0.2s
transition-duration: 0.2s
.small-button:hover, .small-button:focus
background: #e74c3c
text-decoration: none
.medium-button
display: inline-block
text-align: center
font-family: "Lato", sans-serif
cursor: pointer
margin: 0 0px
padding: 5px 8px
font-size: 14px
background: #4479BA
-webkit-transition-duration: 0.2s
-moz-transition-duration: 0.2s
transition-duration: 0.2s
.medium-button:hover, .medium-button:focus
background: #e74c3c
text-decoration: none
.big-button
text-align: center
padding: 5px 8px
font-size: 19px
display: inline-block
text-align: center
font-family: "Lato", sans-serif
cursor: pointer
background: #4479BA
-webkit-transition-duration: 0.2s
-moz-transition-duration: 0.2s
transition-duration: 0.2s
.big-button:hover, .big-button:focus
background: #e74c3c
text-decoration: none
.flat-textbox
border: 0px solid #dbdbdb
font-family: "Lato", sans-serif
padding: 0.4vw
-webkit-border-radius: 1px
-moz-border-radius: 1px
-webkit-transition-duration: 0.3s
-moz-transition-duration: 0.3s
transition-duration: 0.3s
color: #bdc3c7
.flat-textbox:hover, .flat-textbox:focus
color: black
background-color: #27ae60
h1, h2, h3, h4
font-size: 8.0dw
color: #f1c40f
font-family: "Lato", sans-serif
-webkit-transition-duration: 0.3s
-moz-transition-duration: 0.3s
transition-duration: 0.3s
h1:hover
color: #e67e22
h2:hover
color: #e67e22
h3:hover
color: #e67e22
h4:hover
color: #e67e22
ul
list-style-type: none
margin: 0
padding: 0
overflow: hidden
display: block
width: 60px
li
background-color: #4479BA
-webkit-transition-duration: 0.3s
-moz-transition-duration: 0.3s
transition-duration: 0.3s
text-align: center
font-family: "Lato", sans-serif
li:hover
background-color: #e74c3c
.menu
white-space: pre-wrap /* css-3 */
white-space: -moz-pre-wrap /* Mozilla, since 1999 */
white-space: -pre-wrap /* Opera 4-6 */
white-space: -o-pre-wrap /* Opera 7 */
word-wrap: break-word
color: black
text-decoration: none
Also see: Tab Triggers