Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

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.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header>
  <h1>Rapunzel 2</h1>
</header>
<article>
  <p>The sorceress's anger abated somewhat, and she said, "If things are as you say, I will allow you to take as much rapunzel as you want. But under one condition: You must give me the child that your wife will bring to the world. It will do well, and I will take care of it like a mother."</p>
  <p>In his fear the man agreed to everything.</p>
  <img src="http://www.webcreatorbox.com/sample/images/rose.jpg" alt="" />
  <p>When the woman gave birth, the sorceress appeared, named the little girl Rapunzel, and took her away. Rapunzel became the most beautiful child under the sun. When she was twelve years old, the fairy locked her in a tower that stood in a forest and that had neither a door nor a stairway, but only a tiny little window at the very top.</p>
  <p>When the sorceress wanted to enter, she stood below and called out:</p>
  <p>Rapunzel, Rapunzel,
Let down your hair to me.</p>
  <img src="http://www.webcreatorbox.com/sample/images/garden.jpg" alt="" />
  <p>Rapunzel had splendid long hair, as fine as spun gold. When she heard the sorceress's voice, she untied her braids, wound them around a window hook, let her hair fall twenty yards to the ground, and the sorceress climbed up it.</p>
  <p>A few years later it happened that a king's son was riding through the forest. As he approached the tower he heard a song so beautiful that he stopped to listen. It was Rapunzel, who was passing the time by singing with her sweet voice. The prince wanted to climb up to her, and looked for a door in the tower, but none was to be found.</p>
  <p>He rode home, but the song had so touched his heart that he returned to the forest every day and listened to it. One time, as he was thus standing behind a tree, he saw the sorceress approach, and heard her say:</p>
  <p>Rapunzel, Rapunzel,
Let down your hair.</p>
  <p>Then Rapunzel let down her strands of hair, and the sorceress climbed up them to her.</p>
  <p>"If that is the ladder into the tower, then sometime I will try my luck."</p>
  <p>And the next day, just as it was beginning to get dark, he went to the tower and called out:</p>
  <p>Rapunzel, Rapunzel,
Let down your hair.</p>
  <p>The hair fell down, and the prince climbed up.</p>
  <p>At first Rapunzel was terribly frightened when a man such as she had never seen before came in to her. However, the prince began talking to her in a very friendly manner, telling her that his heart had been so touched by her singing that he could have no peace until he had seen her in person. Then Rapunzel lost her fear, and when he asked her if she would take him as her husband, she thought, "He would rather have me than would old Frau Gothel." She said yes and placed her hand into his.</p>
  <p>She said, "I would go with you gladly, but I do not know how to get down. Every time that you come, bring a strand of silk, from which I will weave a ladder. When it is finished I will climb down, and you can take me away on your horse." They arranged that he would come to her every evening, for the old woman came by day.</p>
  <p>The sorceress did not notice what was happening until one day Rapunzel said to her, "Frau Gothel, tell me why it is that you are more difficult to pull up than is the young prince, who will be arriving any moment now?"</p>
  <p>"You godless child," cried the sorceress. "What am I hearing from you? I thought I had removed you from the whole world, but you have deceived me nonetheless."</p>
  <p>In her anger she grabbed Rapunzel's beautiful hair, wrapped it a few times around her left hand, grasped a pair of scissors with her right hand, and snip snap, cut it off. And she was so unmerciful that she took Rapunzel into a wilderness where she suffered greatly.</p>
  <p>On the evening of the same day that she sent Rapunzel away, the fairy tied the cut-off hair to the hook at the top of the tower, and when the prince called out:</p>
  <p>Rapunzel, Rapunzel,
Let down your hair.</p>
  <p>she let down the hair.</p>
  <p>The prince climbed up, but above, instead of his beloved Rapunzel, he found the sorceress, who peered at him with poisonous and evil looks.</p>
  <p>"Aha!" she cried scornfully. "You have come for your Mistress Darling, but that beautiful bird is no longer sitting in her nest, nor is she singing any more. The cat got her, and will scratch your eyes out as well. You have lost Rapunzel. You will never see her again."</p>
  <p>The prince was overcome with grief, and in his despair he threw himself from the tower. He escaped with his life, but the thorns into which he fell poked out his eyes. Blind, he wandered about in the forest, eating nothing but grass and roots, and doing nothing but weeping and wailing over the loss of his beloved wife. Thus he wandered about miserably for some years, finally happening into the wilderness where Rapunzel lived miserably with the twins that she had given birth to.</p>
  <p>He heard a voice and thought it was familiar. He advanced toward it, and as he approached, Rapunzel recognized him, and crying, threw her arms around his neck. Two of her tears fell into his eyes, and they became clear once again, and he could see as well as before. He led her into his kingdom, where he was received with joy, and for a long time they lived happily and satisfied.</p>
</article>
              
            
!

CSS

              
                /* GENERAL STYLING */
body {
  font: 18px/1.5 georgia, serif;
}
article {
  width: 600px;
  margin: 120px auto 0;
}
h1 {
  text-align: center;
  font-weight: normal;
}

/* BLUR EFFECT */
header {
  padding: 5px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(255,255,255,.9);
}

@supports (-webkit-backdrop-filter: blur(5px)) {
  header {
    -webkit-backdrop-filter: blur(5px);
    background: rgba(255,255,255,.5);
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console