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.
<header>
<span>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/HumanRightsLogo.svg" alt="Human Rights Logo"/>
Human Rights
</span>
<nav>
<button aria-controls="main-nav-list">
<span aria-hidden="true" class="icon-menu">≡</span>
<span aria-hidden="true" class="icon-close">×</span>
Menu
</button>
<ul id="main-nav-list">
<li><a href="#preamble">Preamble</a></li>
<li><a href="#logo">The Human Rights Logo by Predrag Stakić</a></li>
<li><a href="#article1">Article 1</a></li>
<li><a href="#article2">Article 2</a></li>
<li><a href="#article3">Article 3</a></li>
<li><a href="#article4">Article 4</a></li>
<li><a href="#article5">Article 5</a></li>
<li><a href="#article6">Article 6</a></li>
<li><a href="#article7">Article 7</a></li>
<li><a href="#article8">Article 8</a></li>
<li><a href="#article9">Article 9</a></li>
<li><a href="#article10">Article 10</a></li>
<li><a href="#article11">Article 11</a></li>
<li><a href="#article12">Article 12</a></li>
<li><a href="#article13">Article 13</a></li>
<li><a href="#article14">Article 14</a></li>
<li><a href="#article15">Article 15</a></li>
<li><a href="#article16">Article 16</a></li>
<li><a href="#article17">Article 17</a></li>
<li><a href="#article18">Article 18</a></li>
<li><a href="#article19">Article 19</a></li>
<li><a href="#article20">Article 20</a></li>
<li><a href="#article21">Article 21</a></li>
<li><a href="#article22">Article 22</a></li>
<li><a href="#article23">Article 23</a></li>
<li><a href="#article24">Article 24</a></li>
<li><a href="#article25">Article 25</a></li>
<li><a href="#article26">Article 26</a></li>
<li><a href="#article27">Article 27</a></li>
<li><a href="#article28">Article 28</a></li>
<li><a href="#article29">Article 29</a></li>
<li><a href="#article30">Article 30</a></li>
</ul>
</nav>
<a href="">support</a>
</header>
<main>
<h1>The Universal Declaration of Human Rights</h1>
<section id="preamble">
<h2>Preamble</h2>
<p>Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,</p>
<p>Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,</p>
<p>Whereas it is essential, if man is not to be compelled to have recourse, as a last resort, to rebellion against tyranny and oppression, that human rights should be protected by the rule of law,</p>
<p>Whereas it is essential to promote the development of friendly relations between nations,</p>
<p>Whereas the peoples of the United Nations have in the Charter reaffirmed their faith in fundamental human rights, in the dignity and worth of the human person and in the equal rights of men and women and have determined to promote social progress and better standards of life in larger freedom,</p>
<p>Whereas Member States have pledged themselves to achieve, in co-operation with the United Nations, the promotion of universal respect for and observance of human rights and fundamental freedoms,</p>
<p>Whereas a common understanding of these rights and freedoms is of the greatest importance for the full realization of this pledge,</p>
<p><strong>Now, Therefore <em>the General Assembly</em> proclaims <em>this Universal Declaration of Human Rights</em></strong> as a common standard of achievement for all peoples and all nations, to the end that every individual and every organ of society, keeping this Declaration constantly in mind, shall strive by teaching and education to promote respect for these rights and freedoms and by progressive measures, national and international, to secure their universal and effective recognition and observance, both among the peoples of Member States themselves and among the peoples of territories under their jurisdiction.</p>
</section>
<aside id="logo">
<h2>The Human Rights Logo by Predrag Stakić</h2>
<p>The Human Rights Logo combines the silhouette of a hand with that of a bird, and a white thumb grabbing the bird. It is intended as a peaceful contribution towards strengthening human rights and as such is meant to be used across cultural and language borders. The logo is now available to everyone at no cost as an open source product. It is free from rights and can be used worldwide by everyone without paying fees or obtaining licenses.</p>
</aside>
<section id="article1">
<h2>Article 1</h2>
<p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p>
</section>
<section id="article2">
<h2>Article 2</h2>
<p>Everyone is entitled to all the rights and freedoms set forth in this Declaration, without distinction of any kind, such as race, colour, sex, language, religion, political or other opinion, national or social origin, property, birth or other status. Furthermore, no distinction shall be made on the basis of the political, jurisdictional or international status of the country or territory to which a person belongs, whether it be independent, trust, non-self-governing or under any other limitation of sovereignty.</p>
</section>
<section id="article3">
<h2>Article 3</h2>
<p>Everyone has the right to life, liberty and security of person.</p>
</section>
<section id="article4">
<h2>Article 4</h2>
<p>No one shall be held in slavery or servitude; slavery and the slave trade shall be prohibited in all their forms.</p>
</section>
<section id="article5">
<h2>Article 5</h2>
<p>No one shall be subjected to torture or to cruel, inhuman or degrading treatment or punishment.</p>
</section>
<section id="article6">
<h2>Article 6</h2>
<p>Everyone has the right to recognition everywhere as a person before the law.</p>
</section>
<section id="article7">
<h2>Article 7</h2>
<p>All are equal before the law and are entitled without any discrimination to equal protection of the law. All are entitled to equal protection against any discrimination in violation of this Declaration and against any incitement to such discrimination.</p>
</section>
<section id="article8">
<h2>Article 8</h2>
<p>Everyone has the right to an effective remedy by the competent national tribunals for acts violating the fundamental rights granted him by the constitution or by law.</p>
</section>
<section id="article9">
<h2>Article 9</h2>
<p>No one shall be subjected to arbitrary arrest, detention or exile.</p>
</section>
<section id="article10">
<h2>Article 10</h2>
<p>Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him.</p>
</section>
<section id="article11">
<h2>Article 11</h2>
<p>(1) Everyone charged with a penal offence has the right to be presumed innocent until proved guilty according to law in a public trial at which he has had all the guarantees necessary for his defence.</p>
<p>(2) No one shall be held guilty of any penal offence on account of any act or omission which did not constitute a penal offence, under national or international law, at the time when it was committed. Nor shall a heavier penalty be imposed than the one that was applicable at the time the penal offence was committed.</p>
</section>
<section id="article12">
<h2>Article 12</h2>
<p>No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation. Everyone has the right to the protection of the law against such interference or attacks.</p>
</section>
<section id="article13">
<h2>Article 13</h2>
<p>(1) Everyone has the right to freedom of movement and residence within the borders of each state.</p>
<p>(2) Everyone has the right to leave any country, including his own, and to return to his country.</p>
</section>
<section id="article14">
<h2>Article 14</h2>
<p>(1) Everyone has the right to seek and to enjoy in other countries asylum from persecution.</p>
<p>(2) This right may not be invoked in the case of prosecutions genuinely arising from non-political crimes or from acts contrary to the purposes and principles of the United Nations.</p>
</section>
<section id="article15">
<h2>Article 15</h2>
<p>(1) Everyone has the right to a nationality.</p>
<p>(2) No one shall be arbitrarily deprived of his nationality nor denied the right to change his nationality.</p>
</section>
<section id="article16">
<h2>Article 16</h2>
<p>(1) Men and women of full age, without any limitation due to race, nationality or religion, have the right to marry and to found a family. They are entitled to equal rights as to marriage, during marriage and at its dissolution.</p>
<p>(2) Marriage shall be entered into only with the free and full consent of the intending spouses.</p>
<p>(3) The family is the natural and fundamental group unit of society and is entitled to protection by society and the State.</p>
</section>
<section id="article17">
<h2>Article 17</h2>
<p>(1) Everyone has the right to own property alone as well as in association with others.</p>
<p>(2) No one shall be arbitrarily deprived of his property.</p>
</section>
<section id="article18">
<h2>Article 18</h2>
<p>Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance.</p>
</section>
<section id="article19">
<h2>Article 19</h2>
<p>Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive and impart information and ideas through any media and regardless of frontiers.</p>
</section>
<section id="article20">
<h2>Article 20</h2>
<p>(1) Everyone has the right to freedom of peaceful assembly and association.</p>
<p>(2) No one may be compelled to belong to an association.</p>
</section>
<section id="article21">
<h2>Article 21</h2>
<p>(1) Everyone has the right to take part in the government of his country, directly or through freely chosen representatives.</p>
<p>(2) Everyone has the right of equal access to public service in his country.</p>
<p>(3) The will of the people shall be the basis of the authority of government; this will shall be expressed in periodic and genuine elections which shall be by universal and equal suffrage and shall be held by secret vote or by equivalent free voting procedures.</p>
</section>
<section id="article22">
<h2>Article 22</h2>
<p>Everyone, as a member of society, has the right to social security and is entitled to realization, through national effort and international co-operation and in accordance with the organization and resources of each State, of the economic, social and cultural rights indispensable for his dignity and the free development of his personality.</p>
</section>
<section id="article23">
<h2>Article 23</h2>
<p>(1) Everyone has the right to work, to free choice of employment, to just and favourable conditions of work and to protection against unemployment.</p>
<p>(2) Everyone, without any discrimination, has the right to equal pay for equal work.</p>
<p>(3) Everyone who works has the right to just and favourable remuneration ensuring for himself and his family an existence worthy of human dignity, and supplemented, if necessary, by other means of social protection.</p>
<p>(4) Everyone has the right to form and to join trade unions for the protection of his interests.</p>
</section>
<section id="article24">
<h2>Article 24</h2>
<p>Everyone has the right to rest and leisure, including reasonable limitation of working hours and periodic holidays with pay.</p>
</section>
<section id="article25">
<h2>Article 25</h2>
<p>(1) Everyone has the right to a standard of living adequate for the health and well-being of himself and of his family, including food, clothing, housing and medical care and necessary social services, and the right to security in the event of unemployment, sickness, disability, widowhood, old age or other lack of livelihood in circumstances beyond his control.</p>
<p>(2) Motherhood and childhood are entitled to special care and assistance. All children, whether born in or out of wedlock, shall enjoy the same social protection.</p>
</section>
<section id="article26">
<h2>Article 26</h2>
<p>(1) Everyone has the right to education. Education shall be free, at least in the elementary and fundamental stages. Elementary education shall be compulsory. Technical and professional education shall be made generally available and higher education shall be equally accessible to all on the basis of merit.</p>
<p>(2) Education shall be directed to the full development of the human personality and to the strengthening of respect for human rights and fundamental freedoms. It shall promote understanding, tolerance and friendship among all nations, racial or religious groups, and shall further the activities of the United Nations for the maintenance of peace.</p>
<p>(3) Parents have a prior right to choose the kind of education that shall be given to their children.</p>
</section>
<section id="article27">
<h2>Article 27</h2>
<p>(1) Everyone has the right freely to participate in the cultural life of the community, to enjoy the arts and to share in scientific advancement and its benefits.</p>
<p>(2) Everyone has the right to the protection of the moral and material interests resulting from any scientific, literary or artistic production of which he is the author.</p>
</section>
<section id="article28">
<h2>Article 28</h2>
<p>Everyone is entitled to a social and international order in which the rights and freedoms set forth in this Declaration can be fully realized.</p>
</section>
<section id="article29">
<h2>Article 29</h2>
<p>(1) Everyone has duties to the community in which alone the free and full development of his personality is possible.</p>
<p>(2) In the exercise of his rights and freedoms, everyone shall be subject only to such limitations as are determined by law solely for the purpose of securing due recognition and respect for the rights and freedoms of others and of meeting the just requirements of morality, public order and the general welfare in a democratic society.</p>
<p>(3) These rights and freedoms may in no case be exercised contrary to the purposes and principles of the United Nations.</p>
</section>
<section id="article30">
<h2>Article 30</h2>
<p>Nothing in this Declaration may be interpreted as implying for any State, group or person any right to engage in any activity or to perform any act aimed at the destruction of any of the rights and freedoms set forth herein.</p>
</section>
</main>
*, ::before, ::after {
box-sizing: border-box;
}
:focus {
outline: medium solid #07a;
}
:root {
font: 1.2em/1.4 Calibri, sans-serif;
--header-height: 2em;
}
:root.noscroll {
overflow: hidden;
}
:root.noscroll main {
position: relative;
z-index: -1;
}
body {
margin: 0;
}
header {
display: flex;
justify-content: flex-start;
height: var(--header-height);
border-bottom: thin solid silver;
position: sticky;
top: 0;
background: white;
white-space: nowrap;
overflow-x: auto;
}
nav {
order: -1;
}
[aria-controls="main-nav-list"] {
margin: 0.25em;
border: none;
border-right: thin solid silver;
padding: 0 1em;
background: transparent;
font: inherit;
}
[aria-controls="main-nav-list"] .icon-close {
display: none;
}
[aria-controls="main-nav-list"][aria-expanded="true"] .icon-close {
display: inline;
}
[aria-controls="main-nav-list"][aria-expanded="true"] .icon-menu {
display: none;
}
#main-nav-list {
position: fixed;
top: var(--header-height);
left: 0;
bottom: 0;
margin: 0;
overflow: auto;
width: 12em;
max-width: 100%;
padding: 1em;
list-style: none;
background: #f8f8f8f8;
border-right: thin solid silver;
line-height: 1.2;
white-space: normal;
transform: translatex(-100%);
}
#main-nav-list.open {
transform: translatex(0%);
}
@media (prefers-reduced-motion: no-preference) {
#main-nav-list {
transition: 0.2s transform ease-in;
}
#main-nav-list.open {
transition-timing-function: ease-out;
}
}
#main-nav-list[hidden] {
display: block !important; /* transition doesn’t work with `display: none` */
visibility: hidden;
}
#main-nav-list.transitionrun {
visibility: visible;
}
#main-nav-list li {
margin: 0 0 0.6em;
}
#main-nav-list a {
text-decoration: none;
color: currentColor;
}
header img {
height: 1.5em;
vertical-align: middle;
}
header > span {
margin: 0 1em;
flex: 1;
max-width: 26em;
}
header > a {
margin: 0 1em;
color: #07a;
text-underline-offset: 0.25em;
}
h1 {
font-size: 1.5em;
}
main {
padding: 1em;
}
section, aside {
margin: 1.5em 0;
max-width: 36em;
}
aside {
border-left: thick solid #07a;
padding-left: 1em;
font-style: italic;
}
h2, p {
font-size: 1em;
margin: 0;
}
const controlElement = document.querySelector('[aria-controls="main-nav-list"]');
controlElement.associatedElement = document.getElementById(controlElement.getAttribute('aria-controls'));
controlElement.associatedLinks = controlElement.associatedElement.querySelectorAll('a[href]');
controlElement.toggle = (force) => {
const value = (force != undefined) ? !!force : controlElement.getAttribute('aria-expanded') != 'true';
controlElement.setAttribute('aria-expanded', value);
controlElement.associatedElement.classList.toggle('open', value);
document.documentElement.classList.toggle('noscroll', value);
window.setTimeout(() => { controlElement.associatedElement.hidden = !value; }, 20);
return value;
}
controlElement.associatedElement.addEventListener('transitionrun', (event) => {
controlElement.associatedElement.classList.add('transitionrun');
});
controlElement.associatedElement.addEventListener('transitionend', (event) => {
controlElement.associatedElement.classList.remove('transitionrun');
});
controlElement.addEventListener('click', (event) => {
event.stopPropagation(); /* don’t close menu */
controlElement.toggle();
});
controlElement.associatedElement.addEventListener('click', (event) => {
event.stopPropagation(); /* don’t close menu */
if (event.target.nodeName == 'A') {
controlElement.toggle(false);
}
});
controlElement.parentElement.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
controlElement.toggle(false);
controlElement.focus();
}
});
controlElement.associatedLinks[0].addEventListener('keydown', (event) => {
if (event.shiftKey && event.key === 'Tab') {
event.preventDefault();
controlElement.associatedLinks[controlElement.associatedLinks.length - 1].focus();
}
});
controlElement.associatedLinks[controlElement.associatedLinks.length - 1].addEventListener('keydown', (event) => {
if (!event.shiftKey && event.key === 'Tab') {
event.preventDefault();
controlElement.associatedLinks[0].focus();
}
});
document.body.addEventListener('click', (event) => {
controlElement.toggle(false);
});
controlElement.toggle(false);
const headerElement = document.querySelector('header');
window.addEventListener('hashchange', (event) => {
window.scrollBy(0, -headerElement.offsetHeight);
});
Also see: Tab Triggers