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.
<main lang="de">
<h1>Allgemeine Erklärung der Menschenrechte</h1>
<section id="article1">
<h2>Artikel 1</h2>
<p>Alle Menschen sind frei und gleich an Würde und Rechten geboren. Sie sind mit Vernunft und Gewissen begabt und sollen einander im Geiste der Brüderlichkeit begegnen.</p>
</section>
<section id="article2">
<h2>Artikel 2</h2>
<p>Jeder hat Anspruch auf alle in dieser Erklärung verkündeten Rechte und Freiheiten, ohne irgendeinen Unterschied, etwa nach Rasse, Hautfarbe, Geschlecht, Sprache, Religion, politischer oder sonstiger Anschauung, nationaler oder sozialer Herkunft, Vermögen, Geburt oder sonstigem Stand.</p>
<p>Des weiteren darf kein Unterschied gemacht werden auf Grund der politischen, rechtlichen oder internationalen Stellung des Landes oder Gebietes, dem eine Person angehört, gleichgültig ob dieses unabhängig ist, unter Treuhandschaft steht, keine Selbstregierung besitzt oder sonst in seiner Souveränität eingeschränkt ist.</p>
</section>
<section id="article3">
<h2>Artikel 3</h2>
<p>Jeder hat das Recht auf Leben, Freiheit und Sicherheit der Person.</p>
</section>
<section id="article4">
<h2>Artikel 4</h2>
<p>Niemand darf in Sklaverei oder Leibeigenschaft gehalten werden; Sklaverei und Sklavenhandel in allen ihren Formen sind verboten.</p>
</section>
<section id="article5">
<h2>Artikel 5</h2>
<p>Niemand darf der Folter oder grausamer, unmenschlicher oder erniedrigender Behandlung oder Strafe unterworfen werden.</p>
</section>
<section id="article6">
<h2>Artikel 6</h2>
<p>Jeder hat das Recht, überall als rechtsfähig anerkannt zu werden.</p>
</section>
<section id="article7">
<h2>Artikel 7</h2>
<p>Alle Menschen sind vor dem Gesetz gleich und haben ohne Unterschied Anspruch auf gleichen Schutz durch das Gesetz. Alle haben Anspruch auf gleichen Schutz gegen jede Diskriminierung, die gegen diese Erklärung verstößt, und gegen jede Aufhetzung zu einer derartigen Diskriminierung.</p>
</section>
<section id="article8">
<h2>Artikel 8</h2>
<p>Jeder hat Anspruch auf einen wirksamen Rechtsbehelf bei den zuständigen innerstaatlichen Gerichten gegen Handlungen, durch die seine ihm nach der Verfassung oder nach dem Gesetz zustehenen Grundrechte verletzt werden.</p>
</section>
<section id="article9">
<h2>Artikel 9</h2>
<p>Niemand darf willkürlich festgenommen, in Haft gehalten oder des Landes verwiesen werden.</p>
</section>
<section id="article10">
<h2>Artikel 10</h2>
<p>Jeder hat bei der Feststellung seiner Rechte und Pflichten sowie bei einer gegen ihn erhobenen strafrechtlichen Beschuldigung in voller Gleichheit Anspruch auf ein gerechtes und öffentliches Verfahren vor einem unabhängigen und unparteiischen Gericht.</p>
</section>
<section id="article11">
<h2>Artikel 11</h2>
<p>Jeder, der wegen einer strafbaren Handlung beschuldigt wird, hat das Recht, als unschuldig zu gelten, solange seine Schuld nicht in einem öffentlichen Verfahren, in dem er alle für seine Verteidigung notwendigen Garantien gehabt hat, gemäß dem Gesetz nachgewiesen ist.</p>
<p>Niemand darf wegen einer Handlung oder Unterlassung verurteilt werden, die zur Zeit ihrer Begehung nach innerstaatlichem oder internationalem Recht nicht strafbar war. Ebenso darf keine schwerere Strafe als die zum Zeitpunkt der Begehung der strafbaren Handlung angedrohte Strafe verhängt werden.</p>
</section>
<section id="article12">
<h2>Artikel 12</h2>
<p>Niemand darf willkürlichen Eingriffen in sein Privatleben, seine Familie, seine Wohnung und seinen Schriftverkehr oder Beeinträchtigungen seiner Ehre und seines Rufes ausgesetzt werden. Jeder hat Anspruch auf rechtlichen Schutz gegen solche Eingriffe oder Beeinträchtigungen.</p>
</section>
<section id="article13">
<h2>Artikel 13</h2>
<p>Jeder hat das Recht, sich innerhalb eines Staates frei zu bewegen und seinen Aufenthaltsort frei zu wählen.</p>
<p>Jeder hat das Recht, jedes Land, einschließlich seines eigenen, zu verlassen und in sein Land zurückzukehren.</p>
</section>
<section id="article14">
<h2>Artikel 14</h2>
<p>Jeder hat das Recht, in anderen Ländern vor Verfolgung Asyl zu suchen und zu genießen.</p>
<p>Dieses Recht kann nicht in Anspruch genommen werden im Falle einer Strafverfolgung, die tatsächlich auf Grund von Verbrechen nichtpolitischer Art oder auf Grund von Handlungen erfolgt, die gegen die Ziele und Grundsätze der Vereinten Nationen verstoßen.</p>
</section>
<section id="article15">
<h2>Artikel 15</h2>
<p>Jeder hat das Recht auf eine Staatsangehörigkeit.</p>
<p>Niemandem darf seine Staatsangehörigkeit willkürlich entzogen noch das Recht versagt werden, seine Staatsanghörigkeit zu wechseln.</p>
</section>
<section id="article16">
<h2>Artikel 16</h2>
<p>Heiratsfähige Frauen und Männer haben ohne Beschränkung auf Grund der Rasse, der Staatsangehörigkeit oder der Religion das Recht zu heiraten und eine Familie zu gründen. Sie haben bei der Eheschließung, während der Ehe und bei deren Auflösung gleiche Rechte.</p>
<p>Eine Ehe darf nur bei freier und uneingeschränkter Willenseinigung der künftigen Ehegatten geschlossen werden.</p>
<p>Die Familie ist die natürliche Grundeinheit der Gesellschaft und hat Anspruch auf Schutz durch Gesellschaft und Staat.</p>
</section>
<section id="article17">
<h2>Artikel 17</h2>
<p>Jeder hat das Recht, sowohl allein als auch in Gemeinschaft mit anderen Eigentum innezuhaben.</p>
<p>Niemand darf willkürlich seines Eigentums beraubt werden.</p>
</section>
<section id="article18">
<h2>Artikel 18</h2>
<p>Jeder hat das Recht auf Gedanken-, Gewissens- und Religionsfreiheit; dieses Recht schließt die Freiheit ein, seine Religion oder Überzeugung zu wechseln, sowie die Freiheit, seine Religion oder Weltanschauung allein oder in Gemeinschaft mit anderen, öffentlich oder privat durch Lehre, Ausübung, Gottesdienst und Kulthandlungen zu bekennen.</p>
</section>
<section id="article19">
<h2>Artikel 19</h2>
<p>Jeder hat das Recht auf Meinungsfreiheit und freie Meinungsäußerung; dieses Recht schließt die Freiheit ein, Meinungen ungehindert anzuhängen sowie über Medien jeder Art und ohne Rücksicht auf Grenzen Informationen und Gedankengut zu suchen, zu empfangen und zu verbreiten.</p>
</section>
<section id="article20">
<h2>Artikel 20</h2>
<p>Alle Menschen haben das Recht, sich friedlich zu versammeln und zu Vereinigungen zusammenzuschließen.</p>
<p>Niemand darf gezwungen werden, einer Vereinigung anzugehören.</p>
</section>
<section id="article21">
<h2>Artikel 21</h2>
<p>Jeder hat das Recht, an der Gestaltung der öffentlichen Angelegenheiten seines Landes unmittelbar oder durch frei gewählte Vertreter mitzuwirken.</p>
<p>Jeder hat das Recht auf gleichen Zugang zu öffentlichen Ämtern in seinem Lande.</p>
<p>Der Wille des Volkes bildet die Grundlage für die Autorität der öffentlichen Gewalt; dieser Wille muß durch regelmäßige, unverfälschte, allgemeine und gleiche Wahlen mit geheimer Stimmabgabe oder in einem gleichwertigen freien Wahlverfahren zum Ausdruck kommen.</p>
</section>
<section id="article22">
<h2>Artikel 22</h2>
<p>Jeder hat als Mitglied der Gesellschaft das Recht auf soziale Sicherheit und Anspruch darauf, durch innerstaatliche Maßnahmen und internationale Zusammenarbeit sowie unter Berücksichtigung der Organisation und der Mittel jedes Staates in den Genuß der wirtschaftlichen, sozialen und kulturellen Rechte zu gelangen, die für seine Würde und die freie Entwicklung seiner Persönlichkeit unentbehrlich sind.</p>
</section>
<section id="article23">
<h2>Artikel 23</h2>
<p>Jeder hat das Recht auf Arbeit, auf freie Berufswahl, auf gerechte und befriedigende Arbeitsbedingungen sowie auf Schutz vor Arbeitslosigkeit.</p>
<p>Jeder, ohne Unterschied, hat das Recht auf gleichen Lohn für gleiche Arbeit.</p>
<p>Jeder, der arbeitet, hat das Recht auf gerechte und befriedigende Entlohnung, die ihm und seiner Familie eine der menschlichen Würde entsprechende Existenz sichert, gegebenenfalls ergänzt durch andere soziale Schutzmaßnahmen.</p>
<p>Jeder hat das Recht, zum Schutz seiner Interessen Gewerkschaften zu bilden und solchen beizutreten.</p>
</section>
<section id="article24">
<h2>Artikel 24</h2>
<p>Jeder hat das Recht auf Erholung und Freizeit und insbesondere auf eine vernünftige Begrenzung der Arbeitszeit und regelmäßigen bezahlten Urlaub.</p>
</section>
<section id="article25">
<h2>Artikel 25</h2>
<p>Jeder hat das Recht auf einen Lebensstandard, der seine und seiner Familie Gesundheit und Wohl gewährleistet, einschließlich Nahrung, Kleidung, Wohnung, ärztliche Versorgung und notwendige soziale Leistungen gewährleistet sowie das Recht auf Sicherheit im Falle von Arbeitslosigkeit, Krankheit, Invalidität oder Verwitwung, im Alter sowie bei anderweitigem Verlust seiner Unterhaltsmittel durch unverschuldete Umstände.</p>
<p>Mütter und Kinder haben Anspruch auf besondere Fürsorge und Unterstützung. Alle Kinder, eheliche wie außereheliche, genießen den gleichen sozialen Schutz.</p>
</section>
<section id="article26">
<h2>Artikel 26</h2>
<p>Jeder hat das Recht auf Bildung. Die Bildung ist unentgeltlich, zum mindesten der Grundschulunterricht und die grundlegende Bildung. Der Grundschulunterricht ist obligatorisch. Fach- und Berufsschulunterricht müssen allgemein verfügbar gemacht werden, und der Hochschulunterricht muß allen gleichermaßen entsprechend ihren Fähigkeiten offenstehen.</p>
<p>Die Bildung muß auf die volle Entfaltung der menschlichen Persönlichkeit und auf die Stärkung der Achtung vor den Menschenrechten und Grundfreiheiten gerichtet sein. Sie muß zu Verständnis, Toleranz und Freundschaft zwischen allen Nationen und allen rassischen oder religiösen Gruppen beitragen und der Tätigkeit der Vereinten Nationen für die Wahrung des Friedens förderlich sein.</p>
<p>Die Eltern haben ein vorrangiges Recht, die Art der Bildung zu wählen, die ihren Kindern zuteil werden soll.</p>
</section>
<section id="article27">
<h2>Artikel 27</h2>
<p>Jeder hat das Recht, am kulturellen Leben der Gemeinschaft frei teilzunehmen, sich an den Künsten zu erfreuen und am wissenschaftlichen Fortschritt und dessen Errungenschaften teilzuhaben.</p>
<p>Jeder hat das Recht auf Schutz der geistigen und materiellen Interessen, die ihm als Urheber von Werken der Wissenschaft, Literatur oder Kunst erwachsen.</p>
</section>
<section id="article28">
<h2>Artikel 28</h2>
<p>Jeder hat Anspruch auf eine soziale und internationale Ordnung, in der die in dieser Erklärung verkündeten Rechte und Freiheiten voll verwirklicht werden können.</p>
</section>
<section id="article29">
<h2>Artikel 29</h2>
<p>Jeder hat Pflichten gegenüber der Gemeinschaft, in der allein die freie und volle Entfaltung seiner Persönlichkeit möglich ist.</p>
<p>Jeder ist bei der Ausübung seiner Rechte und Freiheiten nur den Beschränkungen unterworfen, die das Gesetz ausschließlich zu dem Zweck vorsieht, die Anerkennung und Achtung der Rechte und Freiheiten anderer zu sichern und den gerechten Anforderungen der Moral, der öffentlichen Ordnung und des allgemeinen Wohles in einer demokratischen Gesellschaft zu genügen.</p>
<p>Diese Rechte und Freiheiten dürfen in keinem Fall im Widerspruch zu den Zielen und Grundsätzen der Vereinten Nationen ausgeübt werden.</p>
</section>
<section id="article30">
<h2>Artikel 30</h2>
<p>Keine Bestimmung dieser Erklärung darf dahin ausgelegt werden, daß sie für einen Staat, eine Gruppe oder eine Person irgendein Recht begründet, eine Tätigkeit auszuüben oder eine Handlung zu begehen, welche die Beseitigung der in dieser Erklärung verkündeten Rechte und Freiheiten zum Ziel hat.</p></span>
</section>
</main>
<aside lang="de">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/HumanRightsLogo.svg/200px-HumanRightsLogo.svg.png" width="200" height="208" alt="Logo für Menschenrechte"/>
<p>Das Ziel der inter­nationalen Initiative „Ein Logo für Menschen­rechte“ war die Schaffung eines inter­national anerkannten Logos zur Unter­stützung der globalen Menschen­rechts­bewegung. Das Gewinner­logo stammt von Predrag Stakić aus Serbien.</p>
</aside>
<footer>
<p>Die Allgemeine Erklärung der Menschenrechte ist eine rechtlich nicht bindende Resolution der Generalversammlung der Vereinten Nationen zu den Menschenrechten. Sie wurde am 10. Dezember 1948 im Palais de Chaillot in Paris verkündet.</p>
<p>Der 10. Dezember als Tag der Verkündung wird seit 1948 als Tag der Menschenrechte begangen.</p>
</footer>
*, ::before, ::after, ::marker {
box-sizing: border-box;
}
html {
color-scheme: light dark;
font: 1.2em/1.3 Calibri, sans-serif;
font-variant-numeric: lining-nums;
}
body {
margin: 0;
}
main, aside, h1, footer {
padding: 1rem 2rem;
}
h1 {
margin: 0;
font-size: 1.5em;
line-height: 1.1em;
position: fixed;
inset: auto 0 0 0;
background: steelblue;
color: light-dark(white, black);
transform-origin: bottom;
transition: scale 0.2s;
}
h1.hidden {
scale: 1 0;
}
h2 {
margin: 0;
font-size: 1em;
}
section {
max-width: 70ch;
counter-reset: paragraph;
&:not(:first-of-type) {
margin-top: 1lh;
}
&:not(:last-of-type) {
margin-bottom: 1lh;
}
}
p {
margin: 0;
counter-increment: paragraph;
}
section:not(#article2) p:not(:only-of-type)::before {
content: counter(paragraph) ". ";
}
aside {
display: grid;
@media (width >= 60ch) { grid-template-columns: auto 1fr }
gap: 1em 1.5em;
background: color-mix(
in srgb,
light-dark(lightsteelblue, steelblue),
light-dark(white, black)
);
p {
max-width: 58ch;
}
img {
height: 4lh;
width: auto;
}
}
footer p {
max-width: 70ch;
}
const h1Element = document.querySelector('h1');
const asideElement = document.querySelector('aside');
const footerElement = document.querySelector('footer');
const observedElements = [footerElement, asideElement]
.filter(entry => entry); // remove null entries
const observer = new IntersectionObserver((entries) => {
// hide h1Element when one of the observed elements is intersecting
let isH1Hidden = false;
entries.forEach(entry => {
if (entry.isIntersecting) {
isH1Hidden = true;
}
});
h1Element.classList.toggle('hidden', isH1Hidden);
});
observedElements.forEach(observedElement => {
observer.observe(observedElement);
});
Also see: Tab Triggers