Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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

              
                <body>
	<main>
		<h1>
      Down the Rabbit-Hole
    </h1>
    <p>
      Alice was beginning to get very tired of sitting by her sister on the
      bank, and of having nothing to do: once or twice she had peeped into the
      book her sister was reading, but it had no pictures or conversations in
      it, 'and what is the use of a book,' thought Alice 'without pictures or
      conversations?'
    </p>
    <p>
      So she was considering in her own mind (as well as she could, for the hot
      day made her feel very sleepy and stupid), whether the pleasure of making
      a daisy-chain would be worth the trouble of getting up and picking the
      daisies, when suddenly a White Rabbit with pink eyes ran close by her.
    </p>
    <p>
      There was nothing so <i>very</i> remarkable in that; nor did Alice think it so
      <i>very</i> much out of the way to hear the Rabbit say to itself, 'Oh dear! Oh
      dear! I shall be late!' (when she thought it over afterwards, it occurred
      to her that she ought to have wondered at this, but at the time it all
      seemed quite natural); but when the Rabbit actually <i>took a watch out of
      its waistcoat-pocket</i>, and looked at it, and then hurried on, Alice started
      to her feet, for it flashed across her mind that she had never before seen
      a rabbit with either a waistcoat-pocket, or a watch to take out of it, and
      burning with curiosity, she ran across the field after it, and fortunately
      was just in time to see it pop down a large rabbit-hole under the hedge.
    </p>
    <p>
      In another moment down went Alice after it, never once considering how in
      the world she was to get out again.
    </p>
    <p>
      The rabbit-hole went straight on like a tunnel for some way, and then
      dipped suddenly down, so suddenly that Alice had not a moment to think
      about stopping herself before she found herself falling down a very deep
      well.
    </p>
    <p>
      Either the well was very deep, or she fell very slowly, for she had plenty
      of time as she went down to look about her and to wonder what was going to
      happen next. First, she tried to look down and make out what she was
      coming to, but it was too dark to see anything; then she looked at the
      sides of the well, and noticed that they were filled with cupboards and
      book-shelves; here and there she saw maps and pictures hung upon pegs. She
      took down a jar from one of the shelves as she passed; it was labelled
      'ORANGE MARMALADE', but to her great disappointment it was empty: she did
      not like to drop the jar for fear of killing somebody, so managed to put
      it into one of the cupboards as she fell past it.
    </p>
    <p>
      'Well!' thought Alice to herself, 'after such a fall as this, I shall
      think nothing of tumbling down stairs! How brave they'll all think me at
      home! Why, I wouldn't say anything about it, even if I fell off the top of
      the house!' (Which was very likely true.)
    </p>
    <p>
      Down, down, down. Would the fall <i>never</i> come to an end! 'I wonder how many
      miles I've fallen by this time?' she said aloud. 'I must be getting
      somewhere near the centre of the earth. Let me see: that would be four
      thousand miles down, I think&mdash;' (for, you see, Alice had learnt
      several things of this sort in her lessons in the schoolroom, and though
      this was not a <i>very</i> good opportunity for showing off her knowledge, as
      there was no one to listen to her, still it was good practice to say it
      over) '&mdash;yes, that's about the right distance&mdash;but then I wonder
      what Latitude or Longitude I've got to?' (Alice had no idea what Latitude
      was, or Longitude either, but thought they were nice grand words to say.)
    </p>
    <p>
      Presently she began again. 'I wonder if I shall fall right <i>through</i> the
      earth! How funny it'll seem to come out among the people that walk with
      their heads downward! The Antipathies, I think&mdash;' (she was rather
      glad there <i>was</i> no one listening, this time, as it didn't sound at all the
      right word) '&mdash;but I shall have to ask them what the name of the
      country is, you know. Please, Ma'am, is this New Zealand or Australia?'
      (and she tried to curtsey as she spoke&mdash;fancy <i>curtseying</i> as you're
      falling through the air! Do you think you could manage it?) 'And what an
      ignorant little girl she'll think me for asking! No, it'll never do to
      ask: perhaps I shall see it written up somewhere.'
    </p>
    <p>
      Down, down, down. There was nothing else to do, so Alice soon began
      talking again. 'Dinah'll miss me very much to-night, I should think!'
      (Dinah was the cat.) 'I hope they'll remember her saucer of milk at
      tea-time. Dinah my dear! I wish you were down here with me! There are no
      mice in the air, I'm afraid, but you might catch a bat, and that's very
      like a mouse, you know. But do cats eat bats, I wonder?' And here Alice
      began to get rather sleepy, and went on saying to herself, in a dreamy
      sort of way, 'Do cats eat bats? Do cats eat bats?' and sometimes, 'Do bats
      eat cats?' for, you see, as she couldn't answer either question, it didn't
      much matter which way she put it. She felt that she was dozing off, and
      had just begun to dream that she was walking hand in hand with Dinah, and
      saying to her very earnestly, 'Now, Dinah, tell me the truth: did you ever
      eat a bat?' when suddenly, thump! thump! down she came upon a heap of
      sticks and dry leaves, and the fall was over.
    </p>
    <p>
      Alice was not a bit hurt, and she jumped up on to her feet in a moment:
      she looked up, but it was all dark overhead; before her was another long
      passage, and the White Rabbit was still in sight, hurrying down it. There
      was not a moment to be lost: away went Alice like the wind, and was just
      in time to hear it say, as it turned a corner, 'Oh my ears and whiskers,
      how late it's getting!' She was close behind it when she turned the
      corner, but the Rabbit was no longer to be seen: she found herself in a
      long, low hall, which was lit up by a row of lamps hanging from the roof.
    </p>
    <p>
      There were doors all round the hall, but they were all locked; and when
      Alice had been all the way down one side and up the other, trying every
      door, she walked sadly down the middle, wondering how she was ever to get
      out again.
    </p>
    <p>
      Suddenly she came upon a little three-legged table, all made of solid
      glass; there was nothing on it except a tiny golden key, and Alice's first
      thought was that it might belong to one of the doors of the hall; but,
      alas! either the locks were too large, or the key was too small, but at
      any rate it would not open any of them. However, on the second time round,
      she came upon a low curtain she had not noticed before, and behind it was
      a little door about fifteen inches high: she tried the little golden key
      in the lock, and to her great delight it fitted!
    </p>
    <p>
      Alice opened the door and found that it led into a small passage, not much
      larger than a rat-hole: she knelt down and looked along the passage into
      the loveliest garden you ever saw. How she longed to get out of that dark
      hall, and wander about among those beds of bright flowers and those cool
      fountains, but she could not even get her head through the doorway; 'and
      even if my head would go through,' thought poor Alice, 'it would be of
      very little use without my shoulders. Oh, how I wish I could shut up like
      a telescope! I think I could, if I only knew how to begin.' For, you see,
      so many out-of-the-way things had happened lately, that Alice had begun to
      think that very few things indeed were really impossible.
    </p>
    <p>
      There seemed to be no use in waiting by the little door, so she went back
      to the table, half hoping she might find another key on it, or at any rate
      a book of rules for shutting people up like telescopes: this time she
      found a little bottle on it, ('which certainly was not here before,' said
      Alice,) and round the neck of the bottle was a paper label, with the words
      'DRINK ME' beautifully printed on it in large letters.
    </p>
    <p>
      It was all very well to say 'Drink me,' but the wise little Alice was not
      going to do <i>that</i> in a hurry. 'No, I'll look first,' she said, 'and see
      whether it's marked "<i>poison</i>" or not'; for she had read several nice little
      histories about children who had got burnt, and eaten up by wild beasts
      and other unpleasant things, all because they <i>would</i> not remember the
      simple rules their friends had taught them: such as, that a red-hot poker
      will burn you if you hold it too long; and that if you cut your finger
      <i>very</i> deeply with a knife, it usually bleeds; and she had never forgotten
      that, if you drink much from a bottle marked 'poison,' it is almost
      certain to disagree with you, sooner or later.
    </p>
    <p>
      However, this bottle was <i>not</i> marked 'poison,' so Alice ventured to taste
      it, and finding it very nice, (it had, in fact, a sort of mixed flavour of
      cherry-tart, custard, pine-apple, roast turkey, toffee, and hot buttered
      toast,) she very soon finished it off.
    </p>
		<h2>Orange you glad I didn't say Banana?</h2>
	</main>
	<div class="diagonal-bg">
		<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='100%' y1='0' x2='1' y2='100%' stroke='#FF4B3B' stroke-width='30%'/></svg>
	</div>
	
</body>
              
            
!

CSS

              
                //The Diagonal
.diagonal-bg{
	position: fixed;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100%;

}


//Pen Styles

body{
	background: #c5c0b7;
	color: #222;
	height: 100%;
	font-family: "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
	font-family: 'Playfair Display', serif;
}
h1{
	font-size: 4rem;
	line-height: 1.25;
	text-transform: uppercase;
}
p{
	margin-top: 0;
	margin-bottom: 2em;
}
main{
	width: 70%;
	margin: 5em auto;
	@media(min-width: 400px){
		width: 65%;
	}
	@media(min-width: 600px){
		width: 50%;
	}
	h1{
		text-align: center;
	}
}


              
            
!

JS

              
                $(window).scroll(function() {
  var scroll = $(window).scrollTop();
	$(".diagonal-bg svg line").attr("stroke-width",  ((30 + scroll/10)  + "%"));
	//30 is the starting width
	//alter the amount of growth by changing scroll/x
});


              
            
!
999px

Console