cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <p class="dropcapbig">Lorem ipsum dolor sit amet, <a>cQonsejcqtetur</a> adipisicing elit. Dolorem sint a <strong>impedit</strong> aperiam ipsum saepe eius voluptate non <mark>fugiat</mark> ex quia dolor quis <em>mollitia</em> suscipit exercitationem aliquam voluptatem porro facilis! 2/4</p>
<h1>Heading<br>line 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <del>Dolorem</del> <ins class="over">I like trains!</ins> a impedit aperiam ipsum saepe eius voluptate non fugiat ex quia dolor quis mollitia suscipit exercitationem aliquam voluptatem porro facilis! <ins>Lorem ipsum dolor sit amet</ins></p>

<form class="p">
    <div>
        <input id="option-one" type="checkbox" value="">
        <label>Here's option one.</label>
    </div>

    <div>
        <input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
        <label>You can choose this one..</label>
    </div>

    <div>
        <input id="option-three" type="radio" name="optionsRadios" value="option2">
        <label>..Or this one!</label>
    </div>
    <div>
        <label style="display:inline-block;width:5.3em">Name:</label> <input type="text" />
    </div>
    <div>
        <label style="display:inline-block;width:5.3em">Password:</label> <input type="password" />
    </div>
    <div>
        <input type="submit" style="width:5.7em;margin-right:.3rem"/> <small><a>I forgot my password</a></small>
    </div>
</form>

<p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni laborum assumenda minima <input type="text" placeholder="Inline Input"> hic alias sapiente reprehenderit atque vel dolorum at eius sunt possimus laboriosam <button>Inline Button</button> officia blanditiis expedita tenetur laudantium dignissimos?</p>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>  

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam officiis quam voluptatum ex vero repellendus perspiciatis natus porro quo reprehenderit laborum aliquid sunt asperiores officia inventore sed et voluptas. Architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione eos distinctio suscipit dolor autem cumque mollitia voluptas fugit dolore animi similique hic sunt saepe id ut accusamus deserunt voluptates inventore?</p>

<h2>Level 2 heading<br>line 2</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium sed sint blanditiis dignissimos aperiam accusantium quia nemo et autem nisi at excepturi non dolorem incidunt commodi iste officia consequatur cupiditate.</p>

<code>var foo=0;
for(;foo&lt;40;foo++)
  doStuff();
</code>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium sed sint blanditiis dignissimos aperiam accusantium quia nemo et autem nisi at excepturi non dolorem incidunt commodi iste officia consequatur cupiditate.</p>

<h3>Level 3 heading</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium sed sint blanditiis <img src="http://pack.maloweb.com/shot.png">dignissimos aperiam accusantium quia nemo et autem nisi at excepturi non dolorem incidunt commodi iste officia consequatur cupiditate. <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque velit rerum officia neque consectetur eum quo ducimus asperiores laborum quam sequi iure nisi sit, doloremque quas blanditiis et aliquam aliquid.</small></p>

<h4>Level 4 heading</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium sed sint blanditiis dignissimos aperiam accusantium quia nemo et autem nisi at excepturi non dolorem incidunt commodi iste officia consequatur cupiditate.</p>

<table>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Foo<br>Foo</td>
    <td>Bar</td>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
</table>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium sed sint blanditiis dignissimos aperiam accusantium quia nemo et autem nisi at excepturi non dolorem incidunt commodi iste officia consequatur cupiditate.</p>
            
          
!
            
              @import "nib"

varLineHeight=1.375em
phi=1.618
varMargin=varLineHeight*phi

@import url(https://fonts.googleapis.com/css?family=Cutive+Mono);
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic');
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');

@import url('http://maloweb.com/otama/stylesheet.css');


*{
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  font-feature-settings:"kern", "liga", "dlig" ,"frac";
}
html{
  background:linear-gradient(to top,#fff 0% ,#fff 90%,#def 100%) 0 .5em ;
  padding:varMargin*phi;
  font-size:16px;
  line-height:varLineHeight;
  background-size:100% varLineHeight;
  color:rgba(0,0,0,.9)
}
/*big screens
html{
  font-size:20px;
  line-height:1.4em;
  background-size:100% 1.4em;
}
*/

body{
  margin:0;
  font-family: "Libre Baskerville", Baskerville, "baskerville_fs", Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", serif;
  /*
  hinted fonts (only for small text on windows)
  font-family: Georgia;
  font-family:Verdana;
  */
  /*font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;*/
  //font-family:sans-serif;
  column-width:21em;
  column-gap:varMargin
}

small,strong,i,b,ins{line-height:1}

p,ul,ol,code,.p{padding:0;margin:0;margin-bottom:varLineHeight}
p:last-child,ul:last-child,ol:last-child,code:last-child,.p:last-child{margin:0}

p{hyphens: auto;text-align:justify}

ul,ol{padding-left:1.1em}

/*headings (you should never use > 4 levels of headings)*/

h1,h2,h3,h4{margin:0;position:relative;color:rgba(#000,0.85)}

h1{font-size:3em;line-height:varLineHeight*(2/3);top:-.02em;
  margin-bottom:(varLineHeight/3);}
h2{font-size:2em;line-height:varLineHeight;top:.16em;
  margin-bottom:(varLineHeight/2)}
h3{font-size:1.5em;  top:-.12em; margin-bottom:(varLineHeight/1.5)}
h4{font-size:1.25em; top:-.1em;margin-bottom:(varLineHeight/1.25)}

a{
  color:#0177a1;
  text-decoration:underline;
  text-decoration-skip: ink;
  //background:linear-gradient(to top,#fff 0% ,#fff 93.75%,#0186a1 93.75%,#0186a1 100%)  0 1em;
  //text-shadow:-1px 1px 0 #fff,1px 1px 0 #fff,-1px 0 0 #fff,1px 0 0 #fff, 0 -1px #fff
}
mark{
  background:rgba(255,220,0,.5);
}

code{
  font-family: "Cutive Mono", monospace;
  font-size:1em;
  /*font-family: Monaco, monospace;*/
  white-space:pre;
  max-width:100%;
  display:block;
  position:relative;
  top:.1em
}
ins{
  font-family:'Indie Flower';
  text-decoration:none
  color:rgba(#118,0.9)
}
ins.over{
  display:inline-block
  position:absolute
  font-size:.875em
  transform:translate(-100%,-.35em)
}

img
  display:block
  height:varLineHeight*8
  margin:varLineHeight auto

.dropcap:first-letter{
  font-weight:bold;
  float:left;
  font-size:3.4em;
  margin-top:.24em;
  margin-right:.15em
}
.dropcapbig:first-letter{
  font-weight:bold;
  float:left;
  font-size:5em;
  margin-top:.33em;
  margin-right:.08em;
  color:rgba(#000,0.85)
}
.left{
  text-align:left
}
.center{
  text-align:center
}
.right{
  text-align:right
}

::selection{background:rgba(2,163,194,.15)}



form{
  line-height:varLineHeight*(3/2)
  position:relative;
  bottom:.333em
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="color"],
select,
textarea {
    padding: 0 .6em;
    height:varLineHeight*1.5;
    margin:varLineHeight*-0.25 0;
    line-height:varLineHeight*1.5;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: .3em;;
    vertical-align: middle;
    font-size:.875em;
    font-family:"Cutive Mono", monospace;
}

label+input[type]{
  margin-left:0
}

/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
/* May be able to remove this tweak as color inputs become more standardized across browsers. */
input[type="color"] {
    padding: 0.2em 0.5em;
}

input[type="radio"],
input[type="checkbox"] {
    position:relative;
    bottom:.1em
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: #129FEA;
}

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: thin solid #129FEA;
    outline: 1px auto #129FEA;
}

input[type="text"][disabled],
input[type="password"][disabled],
input[type="email"][disabled],
input[type="url"][disabled],
input[type="date"][disabled],
input[type="month"][disabled],
input[type="time"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="week"][disabled],
input[type="number"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="color"][disabled],
select[disabled],
textarea[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}

input[readonly],
select[readonly],
textarea[readonly] {
    background-color: #eee; /* menu hover bg color */
    color: #777; /* menu text color */
    border-color: #ccc;
}

input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
    color: #b94a48;
    border-color: #e9322d;
}
input[type="file"]:focus:invalid:focus,
input[type="radio"]:focus:invalid:focus,
input[type="checkbox"]:focus:invalid:focus {
    outline-color: #e9322d;
}
select {
    /* Normalizes the height; padding is not sufficient. */
    height: 2.25em;
    border: 1px solid #ccc;
    background-color: white;
}
select[multiple] {
    height: auto;
}
fieldset {
    margin: 0;
    padding: 0.35em 0 0.75em;
    border: 0;
}
legend {
    display: block;
    width: 100%;
    padding: 0.3em 0;
    margin-bottom: 0.3em;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
}

.button,button,input[type=submit] {
    /* Structure */
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}

/* Firefox: Get rid of the inner focus border */
.button::-moz-focus-inner,button::-moz-focus-inner,input[type=submit]::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/*csslint outline-none:false*/

.button,button,input[type=submit] {
    font-size:.875em;
    font-family:inherit;
    padding: 0 .6em;
    height:varLineHeight*1.5;
    margin:varLineHeight*-0.25 0;
    line-height:varLineHeight*1.5;
    color: #fff;
    border: 1px solid #666;
    background-color: #777;
    text-decoration: none;
    border-radius: .3em;
    text-shadow: 0 -.1em 0 #666,0 .1em 0 #888;
}

.button:hover,button:hover,input[type=submit]:hover,
.button:focus,button:focus,input[type=submit]:focus {
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.button:focus,button:focus,input[type=submit]:focus {
    outline: 0;
}

.button:active,button:active,input[type=submit]:active {
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
    border-color: #000\9;
}

table{
  border:none;
  border-spacing: 0;
  margin-bottom:varLineHeight*1.5;
  box-shadow:0 0 0 1px #aaa;
  margin-top:varLineHeight*1.5;
}
td,th{
  padding:0;
  border:none;
  font-size:1em;
  padding:(varLineHeight/2) 1.2em;
  box-shadow:1px 0 0 #aaa,1px 1px 0 #aaa,0 1px 0 #aaa
}

.dropcapbig:first-letter,h1,h2,h3,h4{
  font-family:otama,'Abril Fatface'
}
.dropcapbig:first-letter{
  margin-top:.29em
  margin-bottom:.1em
  font-size:5.4em
}
h1{font-size:3.3em;line-height:varLineHeight*(2/3.3);top:0em;
  margin-bottom:(varLineHeight/3.3);}
h2{font-size:2.2em;line-height:varLineHeight*(2/2.2);top:.17em;
  margin-bottom:(varLineHeight/2.2)}
h3{font-size:1.65em;  top:-.1em; margin-bottom:(varLineHeight/1.65)}
h4{font-size:1.325em; top:-.06em;margin-bottom:(varLineHeight/1.325)}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console