cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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.

            
              <button onclick="toggleLang();"><span>Add</span> <code>lang="en"</code></button>
<main id="main">
  <p>
    If a man does not keep pace with his companions, perhaps it is because he hears a different drummer.<br><cite>Henry David Thoreau</cite>
  </p>
  <p>
The Scarecrow and the Tin Woodman stood up in a corner and kept quiet all night, although of course they could not sleep.<br><cite>L. Frank Baum</cite>
  </p>
  <p>
Because he was so small, Stuart was often hard to find around the house.<br><cite>E.B. White</cite>
  </p>
  <p>
He was like a cock who thought the sun had risen to hear him crow.<br><cite>George Eliot</cite>
  </p>
  <p>
No man, in all the procession of famous men, is reason or illumination, or that essence we were looking for; but is an exhibition, in some quarter, of new possibilities.<br><cite>Ralph Waldo Emerson</cite>
  </p>
  <p>
The path to my fixed purpose is laid on iron rails, on which my soul is grooved to run.<br><cite>Herman Melville</cite>
  </p>
</main>

<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens -->
            
          
!
            
              @import url(http://fonts.googleapis.com/css?family=Lato:400,700);

body {
  background-color: #6D695C;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAA3RSTlMmDQBzGIDBAAAAG0lEQVR42uXIIQEAAADCMHj/0NdkQMws0HEeAqvwAUGJthrXAAAAAElFTkSuQmCC);
  font-size: 160%;
  color: #333;
  font-family: Lato, Arial, sans-serif;
  padding: 0;
  margin: 0;
}

main {
  display: block;
  box-sizing: border-box;
  width: 90%;
  margin: 1em auto;
  padding: .5em .25em;
  color: #000;
  background-color: rgba(204,204,204,.9);
  border: .07em solid rgba(0,0,0,.5);
  border-radius: .5em;
  hyphens: auto;
  display: flex;
  flex-wrap: wrap;
  flex-basis: fit-content;
}

main p {
  flex: 1 0 5em;
  margin: 1em;
}

cite {
  color: #666;
  font-size: 75%;
}

cite::before {
  content: "\2014  ";
}

button {
  font-size: 60%;
  position: absolute;
  top: 1em;
  left: 1em;
  border-radius: 1em;
  padding: .5em 1em;
  border: .1em solid #666;
  outline: none;
}

button code {
  font-weight: bold;
}

button:focus {
  border-color: #090;
}

button:active {
  background-color: #000;
  color: #fff;
  outline: none;
}
/*
button {
  border-color: #090;
  background-color: #000;
  color: #fff;
  outline: none;
}
*/
            
          
!
            
              function toggleLang() {
  var m = document.querySelector('main');
  var s = document.querySelector('button span');
  //alert(s.innerText);
  if (m.hasAttribute('lang')) {
    m.removeAttribute('lang');
    s.innerText = 'Add';
  } else {
    m.setAttribute('lang', 'en-us');
    s.innerText = 'Remove';
  }
}
            
          
!
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