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.
<h1>MEDITATIONS</h1>
<h2>By Marcus Aurelius</h2>
<!-- this is a blockquote, used as it is intended for once -->
<blockquote class="quoth">
<!-- and below, you will place your quote. please use paragraphs properly - it looks rather odd without them. the filler quote is from Marcus Aurelius's *Meditations*, as you can see... -->
<p>Consider how quickly all things are dissolved and resolved: the bodies and substances themselves, into the matter and substance of the world: and their memories into the general age and time of the world. Consider the nature of all worldly sensible things; of those especially, which either ensnare by pleasure, or for their irksomeness are dreadful, or for their outward lustre and show are in great esteem and request, how vile and contemptible, how base and corruptible, how destitute of all true life and being they are.</p>
<p>It is the part of a man endowed with a good understanding faculty, to consider what they themselves are in very deed, from whose bare conceits and voices, honour and credit do proceed: as also what it is to die, and how if a man shall consider this by itself alone, to die, and separate from it in his mind all those things which with it usually represent themselves unto us, he can conceive of it no otherwise, than as of a work of nature, and he that fears any work of nature, is a very child. Now death, it is not only a work of nature, but also conducing to nature.</p>
<!-- the following tag denotes the source of the quote in smaller text. you can actually make the text larger or smaller in the css, but it's necessary to leave the <small> tag in place for formatting reasons, dears -->
<small>Marcus Aurelius <a href="https://www.gutenberg.org/cache/epub/2680/pg2680-images.html">Meditations, Book Two IX-XI.</a></small>
</blockquote><!-- Below, my dears, we have some filler text taken from the introduction to the J. Boulton and David Widger edition of Marcus Aurelius's *Meditations* as proof of concept, to show what this looks like with some text -->
<h2>Introduction</h2>
<p>MARCUS AURELIUS ANTONINUS was born on April 26, A.D. 121. His real name was M. Annius Verus, and he was sprung of a noble family which claimed descent from Numa, second King of Rome. Thus the most religious of emperors came of the blood of the most pious of early kings. His father, Annius Verus, had held high office in Rome, and his grandfather, of the same name, had been thrice Consul. Both his parents died young, but Marcus held them in loving remembrance. On his father's death Marcus was adopted by his grandfather, the consular Annius Verus, and there was deep love between these two. On the very first page of his book Marcus gratefully declares how of his grandfather he had learned to be gentle and meek, and to refrain from all anger and passion. The Emperor Hadrian divined the fine character of the lad, whom he used to call not Verus but Verissimus, more Truthful than his own name. He advanced Marcus to equestrian rank when six years of age, and at the age of eight made him a member of the ancient Salian priesthood. The boy's aunt, Annia Galeria Faustina, was married to Antoninus Pius, afterwards emperor. Hence it came about that Antoninus, having no son, adopted Marcus, changing his name to that which he is known by, and betrothed him to his daughter Faustina. His education was conducted with all care. The ablest teachers were engaged for him, and he was trained in the strict doctrine of the Stoic philosophy, which was his great delight. He was taught to dress plainly and to live simply, to avoid all softness and luxury. His body was trained to hardihood by wrestling, hunting, and outdoor games; and though his constitution was weak, he showed great personal courage to encounter the fiercest boars. At the same time he was kept from the extravagancies of his day. The great excitement in Rome was the strife of the Factions, as they were called, in the circus. The racing drivers used to adopt one of four colours—red, blue, white, or green—and their partisans showed an eagerness in supporting them which nothing could surpass. Riot and corruption went in the train of the racing chariots; and from all these things Marcus held severely aloof.</p>
<p>In 140 Marcus was raised to the consulship, and in 145 his betrothal was consummated by marriage. Two years later Faustina brought him a daughter; and soon after the tribunate and other imperial honours were conferred upon him.</p>
<p>Antoninus Pius died in 161, and Marcus assumed the imperial state. He at once associated with himself L. Ceionius Commodus, whom Antoninus had adopted as a younger son at the same time with Marcus, giving him the name of Lucius Aurelius Verus. Henceforth the two are colleagues in the empire, the junior being trained as it were to succeed. No sooner was Marcus settled upon the throne than wars broke out on all sides. In the east, Vologeses III. of Parthia began a long-meditated revolt by destroying a whole Roman Legion and invading Syria (162). Verus was sent off in hot haste to quell this rising; and he fulfilled his trust by plunging into drunkenness and debauchery, while the war was left to his officers. Soon after Marcus had to face a more serious danger at home in the coalition of several powerful tribes on the northern frontier. Chief among those were the Marcomanni or Marchmen, the Quadi (mentioned in this book), the Sarmatians, the Catti, the Jazyges. In Rome itself there was pestilence and starvation, the one brought from the east by Verus's legions, the other caused by floods which had destroyed vast quantities of grain. After all had been done possible to allay famine and to supply pressing needs—Marcus being forced even to sell the imperial jewels to find money—both emperors set forth to a struggle which was to continue more or less during the rest of Marcus's reign. During these wars, in 169, Verus died. We have no means of following the campaigns in detail; but thus much is certain, that in the end the Romans succeeded in crushing the barbarian tribes, and effecting a settlement which made the empire more secure. Marcus was himself commander-in-chief, and victory was due no less to his own ability than to his wisdom in choice of lieutenants, shown conspicuously in the case of Pertinax. There were several important battles fought in these campaigns; and one of them has become celebrated for the legend of the Thundering Legion. In a battle against the Quadi in 174, the day seemed to be going in favour of the foe, when on a sudden arose a great storm of thunder and rain the lightning struck the barbarians with terror, and they turned to rout. In later days this storm was said to have been sent in answer to the prayers of a legion which contained many Christians, and the name Thundering Legion should be given to it on this account. The title of Thundering Legion is known at an earlier date, so this part of the story at least cannot be true; but the aid of the storm is acknowledged by one of the scenes carved on Antonine's Column at Rome, which commemorates these wars.</p>
<p>The settlement made after these troubles might have been more satisfactory but for an unexpected rising in the east. Avidius Cassius, an able captain who had won renown in the Parthian wars, was at this time chief governor of the eastern provinces. By whatever means induced, he had conceived the project of proclaiming himself emperor as soon as Marcus, who was then in feeble health, should die; and a report having been conveyed to him that Marcus was dead, Cassius did as he had planned. Marcus, on hearing the news, immediately patched up a peace and returned home to meet this new peril. The emperors great grief was that he must needs engage in the horrors of civil strife. He praised the qualities of Cassius, and expressed a heartfelt wish that Cassius might not be driven to do himself a hurt before he should have the opportunity to grant a free pardon. But before he could come to the east news had come to Cassius that the emperor still lived; his followers fell away from him, and he was assassinated. Marcus now went to the east, and while there the murderers brought the head of Cassius to him; but the emperor indignantly refused their gift, nor would he admit the men to his presence.</p>
<p>On this journey his wife, Faustina, died. At his return the emperor celebrated a triumph (176). Immediately afterwards he repaired to Germany, and took up once more the burden of war. His operations were followed by complete success; but the troubles of late years had been too much for his constitution, at no time robust, and on March 17, 180, he died in Pannonia.</p>
<p>The good emperor was not spared domestic troubles. Faustina had borne him several children, of whom he was passionately fond. Their innocent faces may still be seen in many a sculpture gallery, recalling with odd effect the dreamy countenance of their father. But they died one by one, and when Marcus came to his own end only one of his sons still lived—the weak and worthless Commodus. On his father's death Commodus, who succeeded him, undid the work of many campaigns by a hasty and unwise peace; and his reign of twelve years proved him to be a ferocious and bloodthirsty tyrant. Scandal has made free with the name of Faustina herself, who is accused not only of unfaithfulness, but of intriguing with Cassius and egging him on to his fatal rebellion, it must be admitted that these charges rest on no sure evidence; and the emperor, at all events, loved her dearly, nor ever felt the slightest qualm of suspicion.</p>
<p>As a soldier we have seen that Marcus was both capable and successful; as an administrator he was prudent and conscientious. Although steeped in the teachings of philosophy, he did not attempt to remodel the world on any preconceived plan. He trod the path beaten by his predecessors, seeking only to do his duty as well as he could, and to keep out corruption. He did some unwise things, it is true. To create a compeer in empire, as he did with Verus, was a dangerous innovation which could only succeed if one of the two effaced himself; and under Diocletian this very precedent caused the Roman Empire to split into halves. He erred in his civil administration by too much centralising. But the strong point of his reign was the administration of justice. Marcus sought by-laws to protect the weak, to make the lot of the slaves less hard, to stand in place of father to the fatherless. Charitable foundations were endowed for rearing and educating poor children. The provinces were protected against oppression, and public help was given to cities or districts which might be visited by calamity. The great blot on his name, and one hard indeed to explain, is his treatment of the Christians. In his reign Justin at Rome became a martyr to his faith, and Polycarp at Smyrna, and we know of many outbreaks of fanaticism in the provinces which caused the death of the faithful. It is no excuse to plead that he knew nothing about the atrocities done in his name: it was his duty to know, and if he did not he would have been the first to confess that he had failed in his duty. But from his own tone in speaking of the Christians it is clear he knew them only from calumny; and we hear of no measures taken even to secure that they should have a fair hearing. In this respect Trajan was better than he.</p>
<p>To a thoughtful mind such a religion as that of Rome would give small satisfaction. Its legends were often childish or impossible; its teaching had little to do with morality. The Roman religion was in fact of the nature of a bargain: men paid certain sacrifices and rites, and the gods granted their favour, irrespective of right or wrong. In this case all devout souls were thrown back upon philosophy, as they had been, though to a less extent, in Greece. There were under the early empire two rival schools which practically divided the field between them, Stoicism and Epicureanism. The ideal set before each was nominally much the same. The Stoics aspired to ἁπάθεια, the repression of all emotion, and the Epicureans to ἀταραξία, freedom from all disturbance; yet in the upshot the one has become a synonym of stubborn endurance, the other for unbridled licence. With Epicureanism we have nothing to do now; but it will be worth while to sketch the history and tenets of the Stoic sect.</p>
<p>Zeno, the founder of Stoicism, was born in Cyprus at some date unknown, but his life may be said roughly to be between the years 350 and 250 B.C. Cyprus has been from time immemorial a meeting-place of the East and West, and although we cannot grant any importance to a possible strain of Phœnician blood in him (for the Phoenicians were no philosophers), yet it is quite likely that through Asia Minor he may have come in touch with the Far East. He studied under the cynic Crates, but he did not neglect other philosophical systems. After many years' study he opened his own school in a colonnade in Athens called the Painted Porch, or Stoa, which gave the Stoics their name. Next to Zeno, the School of the Porch owes most to Chrysippus (280—207 b.c.), who organised Stoicism into a system.</p>
/* simple body formatting, meant to be replaced by your own when you use this code */
body {
font-family: palatino;
line-height: 1.2;
background-color: #f0e8bb;
color: #7f6439;
font-size: 1.2em;
text-align: justify;
margin: 2em;
}
h1,
h2,
h3 {
text-align: center;
margin: 0.5em;
}
/* heart of the matter - styling the blockquote itself. the below affects the appearance of everything within the box containing the quote */
blockquote.quoth {
border-radius: 1em;
padding-top: 0.5em;
background-color: #e1d2a6;
width: 80%; /* here, the width has been set to 80% of the available space. if you, perchance, would like a (slightly) smaller or larger quote, change this, of course - the quote will remain centered on the page. it is possible to float it to the left or right by adding a different width, alongside float:<left/right> in the CSS.*/
margin: 0.5em auto; /* if you're floating the quote to the left or right, change this to margin:0.5em; you may also want to play with the margin-right and margin-left value to align it with the side of the page better depending on where it is floated */
position: relative;
}
/* this creates the curled quotation mark in the corner of the box; i've found this works best if it stays with the (websafe) font trebuchet ms, and it is sized properly for that. */
blockquote.quoth::before {
content: "“";
font-family: trebuchet ms;
position: absolute;
opacity: 0.2; /* as you could probably tell, the quotation mark itself isn't entirely opaque. */
font-size: 20em;
top: -0.2em;
left: 0em;
}
/* presumably a long quote *will* have paragraphs, so you'd better provide some formatting for them! */
blockquote.quoth p {
margin: 1em;
}
/* the below *small* tag actually styles the bottom bar of the quote which displays the source of the words... */
blockquote.quoth small {
display: block;
background: #c2a77c;
padding: 0.4em 0;
width: 100%;
border-radius: 0 0 1em 1em;
color: #f0e8bb;
margin: 0 auto 0 0;
text-align: center;
}
/* since the colors and such used in your large blockquotes are no doubt unique, you might want to change the link colors within them, too, including those in that *small* tag we're using as the citation, just in case it clashes with your theme */
blockquote.quoth small a,
blockquote.quoth a {
color: #f0e8bb;
text-decoration: underline solid;
transition: ease 1s all;
}
blockquote.quoth a {
color: #ad6b00;
}
blockquote.quoth a:hover {
color: #ad6b00;
background-color: #f0e8bb;
}
Also see: Tab Triggers