123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <p>
	<a href="https://codepen.io/gunnarbittersmann/pen/qXqEgX" target="_blank">with fallback to inline-block</a>
</p>
<main>
	<header>
		<h1>Universal Declaration of Human Rights</h1>
		<img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/HumanRightsLogo.svg" alt="Human Rights logo"/>
	</header>
	
	<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>
            
          
!
            
              *, ::before, ::after { box-sizing: border-box }

main
{
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
	color: black;
	font: 1em/1.3 Cambria, serif;
	margin-top: 2em;
}

main > section
{
	padding: 1rem;
	background: hsl(220, 80%, 90%);
}

h1, h2
{
	margin: 0 0 1.3rem;
	line-height: 1em;
}

p
{
	margin: 1.3em 0 0;
}

main > header
{
	display: flex;
	grid-column: 1 / -1;
}

main > header > h1
{
	flex: 0 1 100%;
}

main > header > img
{
	flex: 0 1 2em;
	height: 3em;
	margin-left: 0.5em;
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console