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.

              <!-- Verification -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<main id="main">
<h1 id="title">Malek Bennabi</h1>

<div id="img-div">
		<!-- The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.
		The img element should be centered within its parent element.
      <img id="image" src="https://4.bp.blogspot.com/-IsGsGrn6qVk/W22Arz2VXWI/AAAAAAAABWE/J9vGBX2RjmYTzaIyjDcf3hR9T-9HW0IAQCLcBGAs/s1600/malek_bennabi_0-758x506-758x506.jpg" alt="Picture of Malek Bennabi">
      <figcaption id="img-caption">Picture of Malek Bennabi: A prominent Algerian thinker, best known for his work on human society, particularly Muslim society with a focus on the reasons behind the fall of Muslim civilization.</figcaption>

  <div id="tribute-info">
    <h2>Who is Malek Bennabi?</h2>
    <strong>Malek Bennabi</strong> (1905 – 1973), was an Algerian writer and philosopher, who wrote about human society, particularly Muslim society with a focus on the reasons behind the fall of Muslim civilization.
    <h2>His Life</h2>
    Malek Bennabi was born in Constantine from a poor family in a conservative Algerian community. Studied in public school in Algeria and graduated on 1925. Left for Paris afterwards but did not succeed to work and came back home. He worked as a clerk in the justice court on 1927 in which he started to understand the status of his country.
For the aim of studying in France, he joined a school of wireless connections to become an assistant engineer. Engineering was not his primary choice, but at that time scholarships to France was reserved for technical studies not for intellectual fields. However, he indulged in his technical studies as well as his intellectual life in France and married a French girl. During this period he started publishing his views concerning the question of resurrection from an Islamic point of view.
He moved to Cairo after the announcement of the armed Algerian revolution on 1954 where he was met with reverence. In Cairo he continued his intellectual production until the independence of Algeria on 1962, when he returned back home. Upon his return he was appointed as a minister for high education until his resign on 1967 after which he devoted himself for continuing his intellectual project.

 <h2>Bibliography (Partial List)</h2>
      <li>Les conditions de la renaissance </li>
      <li>Vocation de l'islam</li>
      <li>Le problème des idées dans le monde musulman</li>
      <li>Le phénomène coranique</li>
      <li>La lutte idéologique</li>
      <li>Islam et Démocratie</li>
      <li>S.O.S Algérie</li>
      <li>Idée d'un commenwealth islamique</li>
      <li>Naissance d'une société</li>
      <li>Perspectives Algérienne</li>
      <li>Mémoires d'un témoin du siècle, tome1 et tome2</li>
      <li>Le rôle du musulman dans le dernier tiers du 20ème siècle</li>
      <li>l'Orientalisme et la Democratie dans l'islam</li>
      <li>Le Musulman dans le Monde de l'Economie</li>

For more information, you can read more about him on <a id="tribute-link" href="https://en.wikipedia.org/wiki/Malek_Bennabi" target="_blank">Wikipedia</a> and <a id="tribute-link" href="http://www.arabphilosophers.com/English/philosophers/modern/modern-names/eMalek_Ben_nabi.htm" target="_blank">Arab Philosphers</a>
              body {
	background-color: #dedede;
main {
	width: 95%;
	background-color: #fff;
	padding: 20px;

h2 {
	color: #29a729;

#title {
	font-family: sans-serif;
	color: #fff;
	margin-bottom: 0;
	background-color: #d40000;
	border-bottom-left-radius: 31px;
    border-top-right-radius: 31px;
    text-align:  center;

#img-div {
	max-width: 820px;
	margin: auto;

#image {
	margin-bottom: 10px;
	border: 2px solid #07080e;
	display: block;
	max-width: 100%;

#img-caption {
	background-color: #1d1e22;
	margin: 15px 0 0 0;
	color: #fff;
	padding: 15px;

#title {
	margin: 0 220px 0 220px;

#tribute-info {
	max-width: 720px;
	border: 1px solid gray;
	padding: 10px;
	margin-bottom:  5px;
	margin: auto;

#tribute-link {
	text-align: right;

ul {
	list-style-type: square;

@media (max-width: 715px) {
	#tribute-info, #tribute-link, #title {
🕑 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.