HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="wrapper">
<h2>
THE TELL-TALE HEART.
</h2>
<p>
TRUE!—nervous—very, very dreadfully nervous I had been and am;
but why will you say that I am mad? The disease had sharpened my senses—not
destroyed—not dulled them. Above all was the sense of hearing acute.
I heard all things in the heaven and in the earth. I heard many things in
hell. How, then, am I mad? Hearken! and observe how healthily—how
calmly I can tell you the whole story.
</p>
<p>
<span class="heart-container"><span class="heart"></span></span>It is impossible to say how first the idea entered my brain; but once
conceived, it haunted me day and night. Object there was none. Passion
there was none. I loved the old man. He had never wronged me. He had never
given me insult. For his gold I had no desire. I think it was his eye!
yes, it was this! He had the eye of a vulture—a pale blue eye, with
a film over it. Whenever it fell upon me, my blood ran cold; and so by
degrees—very gradually—I made up my mind to take the life of
the old man, and thus rid myself of the eye forever.
</p>
<p>
Now this is the point. You fancy me mad. Madmen know nothing. But you
should have seen me. You should have seen how wisely I proceeded—with
what caution—with what foresight—with what dissimulation I
went to work! I was never kinder to the old man than during the whole week
before I killed him. And every night, about midnight, I turned the latch
of his door and opened it—oh so gently! And then, when I had made an
opening sufficient for my head, I put in a dark lantern, all closed,
closed, that no light shone out, and then I thrust in my head. Oh, you
would have laughed to see how cunningly I thrust it in! I moved it slowly—very,
very slowly, so that I might not disturb the old man’s sleep. It took me
an hour to place my whole head within the opening so far that I could see
him as he lay upon his bed. Ha! would a madman have been so wise as this?
And then, when my head was well in the room, I undid the lantern
cautiously—oh, so cautiously—cautiously (for the hinges
creaked)—I undid it just so much that a single thin ray fell upon
the vulture eye. And this I did for seven long nights—every night
just at midnight—but I found the eye always closed; and so it was
impossible to do the work; for it was not the old man who vexed me, but
his Evil Eye. And every morning, when the day broke, I went boldly into
the chamber, and spoke courageously to him, calling him by name in a
hearty tone, and inquiring how he has passed the night. So you see he
would have been a very profound old man, indeed, to suspect that every
night, just at twelve, I looked in upon him while he slept.
</p>
<p>
Upon the eighth night I was more than usually cautious in opening the
door. A watch’s minute hand moves more quickly than did mine. Never before
that night had I felt the extent of my own powers—of my sagacity. I
could scarcely contain my feelings of triumph. To think that there I was,
opening the door, little by little, and he not even to dream of my secret
deeds or thoughts. I fairly chuckled at the idea; and perhaps he heard me;
for he moved on the bed suddenly, as if startled. Now you may think that I
drew back—but no. His room was as black as pitch with the thick
darkness, (for the shutters were close fastened, through fear of robbers,)
and so I knew that he could not see the opening of the door, and I kept
pushing it on steadily, steadily.
</p>
<p>
I had my head in, and was about to open the lantern, when my thumb slipped
upon the tin fastening, and the old man sprang up in bed, crying out—“Who’s
there?”
</p>
<p>
I kept quite still and said nothing. For a whole hour I did not move a
muscle, and in the meantime I did not hear him lie down. He was still
sitting up in the bed listening;—just as I have done, night after
night, hearkening to the death watches in the wall.
</p>
<p>
Presently I heard a slight groan, and I knew it was the groan of mortal
terror. It was not a groan of pain or of grief—oh, no!—it was
the low stifled sound that arises from the bottom of the soul when
overcharged with awe. I knew the sound well. Many a night, just at
midnight, when all the world slept, it has welled up from my own bosom,
deepening, with its dreadful echo, the terrors that distracted me. I say I
knew it well. I knew what the old man felt, and pitied him, although I
chuckled at heart. I knew that he had been lying awake ever since the
first slight noise, when he had turned in the bed. His fears had been ever
since growing upon him. He had been trying to fancy them causeless, but
could not. He had been saying to himself—“It is nothing but the wind
in the chimney—it is only a mouse crossing the floor,” or “It is
merely a cricket which has made a single chirp.” Yes, he had been trying
to comfort himself with these suppositions: but he had found all in vain.
All in vain; because Death, in approaching him had stalked with his black
shadow before him, and enveloped the victim. And it was the mournful
influence of the unperceived shadow that caused him to feel—although
he neither saw nor heard—to feel the presence of my head within the
room.
</p>
<p>
When I had waited a long time, very patiently, without hearing him lie
down, I resolved to open a little—a very, very little crevice in the
lantern. So I opened it—you cannot imagine how stealthily,
stealthily—until, at length a simple dim ray, like the thread of the
spider, shot from out the crevice and fell full upon the vulture eye.
</p>
<p>
It was open—wide, wide open—and I grew furious as I gazed upon
it. I saw it with perfect distinctness—all a dull blue, with a
hideous veil over it that chilled the very marrow in my bones; but I could
see nothing else of the old man’s face or person: for I had directed the
ray as if by instinct, precisely upon the damned spot.
</p>
<p>
And have I not told you that what you mistake for madness is but
over-acuteness of the sense?—now, I say, there came to my ears a
low, dull, quick sound, such as a watch makes when enveloped in cotton. I
knew that sound well, too. It was the beating of the old man’s heart. It
increased my fury, as the beating of a drum stimulates the soldier into
courage.
</p>
<p>
But even yet I refrained and kept still. I scarcely breathed. I held the
lantern motionless. I tried how steadily I could maintain the ray upon the
eve. Meantime the hellish tattoo of the heart increased. It grew quicker
and quicker, and louder and louder every instant. The old man’s terror
must have been extreme! It grew louder, I say, louder every moment!—do
you mark me well I have told you that I am nervous: so I am. And now at
the dead hour of the night, amid the dreadful silence of that old house,
so strange a noise as this excited me to uncontrollable terror. Yet, for
some minutes longer I refrained and stood still. But the beating grew
louder, louder! I thought the heart must burst. And now a new anxiety
seized me—the sound would be heard by a neighbour! The old man’s
hour had come! With a loud yell, I threw open the lantern and leaped into
the room. He shrieked once—once only. In an instant I dragged him to
the floor, and pulled the heavy bed over him. I then smiled gaily, to find
the deed so far done. But, for many minutes, the heart beat on with a
muffled sound. This, however, did not vex me; it would not be heard
through the wall. At length it ceased. The old man was dead. I removed the
bed and examined the corpse. Yes, he was stone, stone dead. I placed my
hand upon the heart and held it there many minutes. There was no
pulsation. He was stone dead. His eye would trouble me no more.
</p>
<p>
If still you think me mad, you will think so no longer when I describe the
wise precautions I took for the concealment of the body. The night waned,
and I worked hastily, but in silence. First of all I dismembered the
corpse. I cut off the head and the arms and the legs.
</p>
<p>
I then took up three planks from the flooring of the chamber, and
deposited all between the scantlings. I then replaced the boards so
cleverly, so cunningly, that no human eye—not even his—could
have detected any thing wrong. There was nothing to wash out—no
stain of any kind—no blood-spot whatever. I had been too wary for
that. A tub had caught all—ha! ha!
</p>
<p>
When I had made an end of these labors, it was four o’clock—still
dark as midnight. As the bell sounded the hour, there came a knocking at
the street door. I went down to open it with a light heart,—for what
had I now to fear? There entered three men, who introduced themselves,
with perfect suavity, as officers of the police. A shriek had been heard
by a neighbour during the night; suspicion of foul play had been aroused;
information had been lodged at the police office, and they (the officers)
had been deputed to search the premises.
</p>
<p>
I smiled,—for what had I to fear? I bade the gentlemen welcome. The
shriek, I said, was my own in a dream. The old man, I mentioned, was
absent in the country. I took my visitors all over the house. I bade them
search—search well. I led them, at length, to his chamber. I showed
them his treasures, secure, undisturbed. In the enthusiasm of my
confidence, I brought chairs into the room, and desired them here to rest
from their fatigues, while I myself, in the wild audacity of my perfect
triumph, placed my own seat upon the very spot beneath which reposed the
corpse of the victim.
</p>
<p>
The officers were satisfied. My manner had convinced them. I was
singularly at ease. They sat, and while I answered cheerily, they chatted
of familiar things. But, ere long, I felt myself getting pale and wished
them gone. My head ached, and I fancied a ringing in my ears: but still
they sat and still chatted. The ringing became more distinct:—It
continued and became more distinct: I talked more freely to get rid of the
feeling: but it continued and gained definiteness—until, at length,
I found that the noise was not within my ears.
</p>
<p>
No doubt I now grew <i>very</i> pale;—but I talked more fluently,
and with a heightened voice. Yet the sound increased—and what could
I do? It was a low, dull, quick sound—much such a sound as a watch
makes when enveloped in cotton. I gasped for breath—and yet the
officers heard it not. I talked more quickly—more vehemently; but
the noise steadily increased. I arose and argued about trifles, in a high
key and with violent gesticulations; but the noise steadily increased. Why
would they not be gone? I paced the floor to and fro with heavy strides,
as if excited to fury by the observations of the men—but the noise
steadily increased. Oh God! what could I do? I foamed—I raved—I
swore! I swung the chair upon which I had been sitting, and grated it upon
the boards, but the noise arose over all and continually increased. It
grew louder—louder—louder! And still the men chatted
pleasantly, and smiled. Was it possible they heard not? Almighty God!—no,
no! They heard!—they suspected!—they knew!—they were
making a mockery of my horror!-this I thought, and this I think. But
anything was better than this agony! Anything was more tolerable than this
derision! I could bear those hypocritical smiles no longer! I felt that I
must scream or die! and now—again!—hark! louder! louder!
louder! louder!
</p>
<p>
“Villains!” I shrieked, “dissemble no more! I admit the deed!—tear
up the planks! here, here!—It is the beating of his hideous heart!”
</p>
</div>
.wrapper {
width: 100%;
max-width: 30em;
margin:auto;
font-size: 1.25em;
line-height: 1.3;
}
.heart {
display: block;
width: 50px;
height: 50px;
background: darkred;
transform: rotate(45deg);
position: relative;
top: 75px;
left: 25px;
}
.heart:before {
content: " ";
width: 50px;
height: 50px;
background: darkred;
display: block;
border-radius: 50%;
margin-top: 50%;
position: absolute;
top: -25px;
left: -25px;
}
.heart:after {
content: " ";
width: 50px;
height: 50px;
background: darkred;
display: block;
border-radius: 50%;
position: absolute;
top: -25px;
left: 0;
}
.heart-container {
display: block;
width: 200px;
height: 200px;
float: left;
shape-outside: polygon(10px 93px, 51px 136px, 96px 87px, 92px 75px, 76px 57px, 16.58% 28.36%, 5.66% 32.82%);
animation-name: heartbeat;
animation-duration: 2s;
animation-timing-function:ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
shape-margin: 0.25em;
}
@keyframes heartbeat {
from {
shape-margin: 0.25em;
}
to {
shape-margin: 1em;
}
}
Also see: Tab Triggers