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

              
                <header>
	<a id="skip-link" href="#main-content">skip navigation</a>
	<nav>
		<ul>
			<li><a href="">Mercury</a></li>
			<li><a href="">Venus</a></li>
			<li><a href="">Earth</a></li>
			<li><a href="">Mars</a></li>
			<li><a href="">Jupiter</a></li>
			<li><a href="">Saturn</a></li>
			<li><a href="">Uranus</a></li>
			<li><a href="">Neptune</a></li>
		</ul>
	</nav>
</header>
<main id="main-content">
	<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>

	<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>
</main>
              
            
!

CSS

              
                body
{
	margin: 0;
}

header
{
	position: relative;
	height: 100vh;
	z-index: 0;
	font-family: Calibri, Verdana, sans-serif;
}

header::before,
header::after
{
	content: '';
	background-color: hsl(20, 20%, 30%);	
}

header::before
{
	position: fixed;
	width: 100%;
	z-index: -1;
}

header::after
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background-image: url(https://forum.selfhtml.org/images/e3acfebc-51fe-4a57-a2ad-b276f3c8ad55.jpg);
	background-size: cover;	
}

nav
{
	position: fixed;
}

nav ul
{
	margin: 0 0;
	padding: 0.5em 0;
	list-style: none;
}

nav li
{
	display: inline-block;
}

nav a,
#skip-link
{
	display: block;
	outline: none;
	margin: 0 1em;
	padding: 0.5em 0 0.25em ;
	border-bottom: 0.125em solid transparent;
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 0 0 2px black;
}

nav a:focus,
nav a:hover
{
	border-color: currentColor;
}

#skip-link
{
	position: fixed;
	left: 0;
	top: 0;
	background: black;
	color: white;
	text-decoration: inherit;
	transform: translateY(-100%);
	z-index: 1;
}

#skip-link:focus
{
	transform: translateY(0);
}

main
{
	padding: 1em;
	max-width: 42em;
	font: 1em/1.3 Cambria, Georgia, serif;
}

h1
{
	font-size: 1.4em;
}

h2
{
	font-size: 1em;
}
              
            
!

JS

              
                window.addEventListener('load', updateHeaderNavHeight);
window.addEventListener('resize', updateHeaderNavHeight);

var headerNavElement = document.querySelector('body > header > nav');
var headerNavStyleElement = document.createElement('style');
document.head.appendChild(headerNavStyleElement);

function updateHeaderNavHeight()
{
	var h = headerNavElement.offsetHeight;
	
	headerNavStyleElement.innerText = 'header::before { height:' + h + 'px }'
		+ 'header { margin-bottom:' + (-h) + 'px }'
		+ '#main-content { padding-top:' + h + 'px }';
}

              
            
!
999px

Console