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


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


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.


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.

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.


                <!-- Verification -->
<script src=""></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="" 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="" target="_blank">Wikipedia</a> and <a id="tribute-link" href="" 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 {