Pen Settings

HTML

CSS

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

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

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.

HTML

              
                
	<header>
		<h1 id="title">Henri Michaux</h1>
		<h2>L'homme sans visage</h2>
	</header>

	<article id="img-art">
	    <div id="img-div">
	    	<img id="image" src="https://karoo.me/wp-content/uploads/2019/04/michaux.jpg">
	    	<figcaption id="img-caption">Henri Michaux</figcaption>
	    </div>
	</article>    
		
	</section>
	
	<article id="main">
		<section id="tribute-info">
			<p class="text-1">L'une des phrases les plus connue de Henri Michaux, disant à la fois son désir d'infini,.
    	de renaissance océanique et son refus de tout lien ou enfermement, est:</p>

    	<blockquote cite="https://fr.wikipedia.org/wiki/Henri_Michaux" id="quote">« Un jour j'arracherai l'ancre qui tient mon navire loin des mers. »</blockquote>


			<p class="text-2">Le texte "Quelques renseignements sur cinquante-neuf années d'existence",
    	écrit par Henri Michaux lui-même, fût son seul geste auto-biographique réalisé au cours de sa vie.
    	Il n'existe que très peu de ressources sur cet artiste car, 
    	il a pris le grand soin de ne laisser presque aucune trâce de son existence,
    	tel la sèche, animal tant aimé de Michaux, répend une projection d'encre lorsque cette dernière est attaquée ou menacée.</p>

    	
		</section>
	</article>
	<article id="art-bio">
        <h2 class="bio-title">"Quelques renseignements sur cinquante-neuf années d'existence".</h2>
		<section class="bio">
			<pre>
       
<b>1899, 24/5, Namur.</b>

    	Naissance dans une famille bourgeoise. Père ardennais.
        Mère wallonne.
        Un des grands-parents, qu'il n'a pas connu, d'origine allemande.
        Un frère, son aîné de trois ans. Lointaine ascendance espagnole.

<b>1900 à 1906, Bruxelles.</b>

        Indifférence.
        Inappétence.
        Resistance.
            	
        Inintéressé.
                
        Il boude la vie, les jeux, les divertissements et la variation.
        Le manger lui répugne.
        Les odeurs, le contact.
        Sa moelle ne fait pas de sang.
        Son sang n'est pas fou d'oxygène.
            	
        Anémie
        Rêves, sans images sans mots, immobile.
        Il rêve à la permanance, à une perpetuité sans changement.
            Sa façon d'exister en marge, sa nature de gréviste fait peur ou exaspère.
            On l'envoi à la campagne.

<b>Putte-Grasheide,</b> hameau situé dans la Campine
    <b>1906 à 1910</b>

        Cinq ans en pension
        Pensonniat dur, pauvre, froid.
        Etude en Flamand.
        Ses condisciples sont fils et filles de petits paysans.
            
        Secret.
        Retranché.
        Honteux de ce qui l'entoure, de tout ce qui l'entoure, de tout ce qui depuis sa venue au monde l'a entouré, 
        honteux de lui-même, de n'être que ce qu'il est, 
        mépris aussi pour lui­ même et pour tout ce qu'il connaît jusqu'à présent.
        Il continue à avoir le dégoût des aliments, les fourre enveloppés de papier dans ses poches et une fois dehors les enterre.                
            
<b>1911 à 1914, Bruxelles</b>

        Retour à Bruxelles. Sauvé ! Il préfère donc une réalité à une autre. 
        Les préférences commencent.
        Attention, tôt ou tard, l'appartenance au monde se fera.
        Il a douze ans.
        Combats de fourmis dans le jardin.
        Découverte du dictionnaire, des mots qui n'appartiennent pas encore à des phrases, 
        pas encore à des phraseurs, des mots et en quantité, 
        et dont on pourra se servir soi-même à sa façon. 
        Etudes chez les jesuites. 
        Avec l'aide de son père, il s'intéresse au latin, belle langue, qui sépare des autres, le transplante: son premier départ.
        Aussi le premier effort continu qui lui plaise.
        Musique, un peu.
            	
<b>1914 à 1918, Bruxelles.</b>

        Cinq ans d'occupation allemande.
        Première composition française. Un choc pour lui. Tout ce qu'il trouve en son imagination ! 
        Un choc même pour le professeur qui le pousse vers la littérature. 
        Mais il se débarrasse de la tentation d'écrire, qui pourrait le détourner de l'essentiel. 
        Quel essentiel ? 
        Le secret qu'il a depuis sa première enfance soupçonné d'exister quelque part et dont visiblement ceux de son 
        entourage ne sont pas au courant.
        Lectures en tous sens. Lectures de recherche pour découvrir les siens, épars dans le monde, ses vrais parents, 
        pas tout à fait parents non plus cependant, pour découvrir ceux qui peut-être « savent » (Hello, Ruysbroek, Tolstoï, Dostoïevski). 
        Lectures des Vie des saints, des plus surprenants, des plus éloignés de l'homme moyen.
        Lectures aussi des excentriques, des extravagants, ou des "Jeunes Belgique" à la langue bizarre qu'il voudrait plus bizarre encore.
        Après son baccalauréat, l'université étatnt fermée à cause de l'Occupation, deux années de lectures, de bricolage intellectuel.
                
<b>1919.</b>

        Prépare le P.C.B.
        Ne se présente pas à l'examen. Abandonne la médecine.
                
<b>1920, Boulogne-sur-Mer</b>

        Embarque comme matelot, sur un cinq-mâts schooner.
                
<b>Rotterdam</b>

        Deuxième embarquement. 
        Sur Le Victorieux, un dix mille tonnes, d'une belle ligne, que les Allemands viennent de livrer à la France.
        On est quatorze dans un petit poste d'équipage, à l'avant. 
        Camaraderie étonnante, inattendue, fortifiante. Brême, Savannah, Norfolk, Newport-News, Rio de Janeiro, Buenos Aires.
        Au retour à Rio, l'équipage qui se plaint d'être mal nourri refuse de continuer et en bloc se fait porter malade.
        Par solidarité, il quitte avec eux le beau navire... manquant aussi de la sorte le naufrage
        qui aura lieu vingt jours plus tard au sud de New York.
                
<b>1921, Marseille.</b>

        Le désarmement mondial des bateaux (ex­ transports de troupes et de vivres) est à son maximum. 
        Impossible de trouver un engagement. La grande fenêtre se referme. Il doit se détourner de la mer.
        Retour à la ville et aux gens détestés.
        Dégoût.
        Désespoir.
        Métiers et emplois divers, médiocres et médiocrement exercés.
        Sommet de la courbe du "raté".
                
<b>1922, Bruxelles</b>

        Lecture de Mafdoror. Sursaut... qui bientôt déclenche en lui le besoin, longtemps oublié, d'écrire.
        Premières pages. Franz Hellens puis Paulhan y voient quelque chose, d'autres n'y voient rien. 
        Toujours réticent. Il n'aimerait pas « devoir » écrire.
        Ca l'empêche de rêver. Ca le fait sortir. Il préfère rester lové.
        Belgique définitivement quittée.
                
<b>1924, Paris</b>

        Il écrit, mais toujours partagé.
        N'arrive pas à trouver un pseudonyme qui l'englobe, lui, ses tendances et ses virtualités. 
        Il continue à signer de son nom vulgaire, qu'il déteste, dont il a honte, pareil à une étiquette 
        qui porterait la mention « qualité inférieure ». 
        Peut-être le garde-t-il par fidélité au mécontentement et à l'insatisfaction. 
        Il ne produira donc jamais dans la fierté, mais traînant toujours ce boulet qui se placera à la fin de chaque œuvre, 
        le préservant ainsi du sentiment même réduit de triomphe et d'accomplissement.
                
<b>1925</b>

        Klee puis Ernst, Chirico... Extrême surprise. 
        Jusque-là, il haïssait la peinture et le fait même de peindre, « comme s'il n'y avait pas encore assez de réalité, 
        de cette abominable réalité, pensait-il. Encore vouloir la répéter, y revenir ! »
        Emplois divers. Quelques temps dans une maison d'édition, au service de la fabrication.
                
<b>1927, Quito.</b>
        Voyage d'un an en Équateur, avec et chez Gangotena, poète habité par le génie et le malheur. 
        Il meurt jeune et après lui ses poèmes, la plupart inédits, embrasés dans un incendie d'avion, disparaissent à jamais.
                
<b>1928</b>

        Paris.
                
<b>1929</b>

        Mort de son père. Dix jours plus tard, mort de sa mère.
        Voyages en Turquie, Italie, Afrique du Nord...
        Il voyage contre.
        Pour expulser de lui sa patrie, ses attaches de toutes sortes et ce qui s'est en lui et 
        malgré lui attaché de culture grecque ou romaine ou germanique ou d'habitudes belges.
        Voyages d'expatriation.
        Le refus pourtant commence à céder un peu au désir d'assimilation.
        Il aura beaucoup à apprendre, à apprendre à s'ouvrir. Ce sera long.
                
<b>1930-1931, en Asie</b>

        Enfin <i>son</i> voyage
        Les Indes, le premier peuple qui, en bloc, paraisse répondre à l'essentiel, 
        qui dans l'essentiel cherche l'assouvissement, enfin un peuple qui mérite d'être distingué des autres. 
        L'Indonésie, la Chine, pays sur lesquels il écrit trop vite,
        dans l'excitation et la surprise émerveillée d'être touché à ce point, 
        pays qu'il lui faudra méditer et ruminer ensuite pendant des années.
                
<b>1932.</b>

        Lisbonne - Paris.
        Montevideo, Buenos Aires.
                
<b>1935</b>

        Commence à dessiner autrement que de loin en loin. Première exposition (Galerie Pierre à Paris).
                
<b>1938-1939, Meudon</b>

        S'occupe de la revue Hermès.
                
<b>1939.</b>

        Brésil (Mineas Gerais et Etat de Rio).
                
<b>1940, Janvier.</b>

        Retour à Paris. En juillet, l'exode.
        Saint-Antonin. Ensuite le Lavandou.
                
<b>1941-1942.</b>

        Le Lavandou avec celle qui sera bientôt sa femme.
                
<b>1943.</b>

        Retour à Paris. Occupation allemande (la seconde).
            	
<b>1944.</b>

        Mort de son frère.
                
<b>1945</b>

        Affaiblie par les restrictions allimentaires, sa femme contracte la tuberculose.
        Ensemble à Cambo. Amélioration
                
<b>1947.</b>

        Presque la guérison. Voyages, de convalescence et d'oubli des maux en Egypte.
                
<b>Février 1948</b>

        Mort de sa femme des suites d'atroces brûlures.
                
<b>1951-1952-1953</b>

        Il écrit de moins en moins, il peint davantage.
                
<b>1955</b>

         Naturalisé français.
        Première expérience de la mescaline.
        Expositions aux Etats-Unis, à Rome, à Londres.
        Se casse le coude droit. Ostéoporose. Main inutilisable. Découverte de l'homme gauche.
        Guérison
        Malgré tant d'efforts en tous sens, toute sa vie durant pour se modifier, ses os, 
        sans s'occuper de lui, suivent aveuglément leur évolution familiale, raciale, nordique...
    </pre>

		</section>	
	</article>
	<footer>
		<h3 class="ext-link">Si le temps vous le permet, <a href="https://fr.wikipedia.org/wiki/Henri_Michaux" id="tribute-link" target="_blank">
    ce lien offre de plus amples informations</a> sur ce mysterieux artiste.</h3>	
	</footer>
              
            
!

CSS

              
                body {
	background:linear-gradient(#415659,#374345);
	margin: 20px 30px;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

header {
	background:#E9E0D2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height:auto;
	width: 100%;
	margin: 10px 0 30px 0;
	padding: 0 0 30px 0;
	border-radius: 8px;
	box-shadow: 5px 5px 10px #232c2e;

}

#title {
	display: flex;
	color: #2B2B2C;
	font-family: Yeseva One, cursive;
	font-weight: 400;
	font-size: 5rem;
	margin: 10px 0 0 0;
	text-align: center;
	
}

h2 {
	background:#E9E0D2;
	color: #2B2B2C;
	display: flex;
	font-family: Nunito, sans-serif;
	font-weight: 400;
	margin: 0 0 10px 0;
	text-align: center;

}

article {
	background:#E9E0D2;
	height: 35px;
	width: 100%;
	border-radius: 8px;
	box-shadow: 5px 5px 10px #232c2e;
    

 }
#img-art{
	background:#ECECE7;
	height: auto;
	width: 82.5%;
	margin: 30px 0 30px 0;
	padding: 20px 0 20px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	box-shadow: 5px 5px 10px #232c2e;

}



#img-div{
	background:#F3F3F3;
	display: flex;
	flex-wrap: wrap;
	height: auto;
	margin: 30px 30px;
	padding: 40px;
	width: 50%;
	align-self: center;
	border-radius: 4px;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	
}

@media (max-width:720px){
  #img-div{
    margin:0;
    padding:0;
    width:70%;
  }
}

#image {

	min-width: 50%; max-width: 75%; 
	height: auto;
	margin: 0 auto 0 auto;
	padding: 0;
	align-self: center;
    display: flex;
}

#img-caption {
	width: 100%;
	text-align: center;
    font-family: Nunito, sans-serif;
    color: #2B2B2C;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.5;
	padding: 10px 0 0 0;
	margin:0;
}




#main{ 
	background:#ECECE7;
	height: auto;
	width: 82.5%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 30px 0 30px 0;
	padding:40px 0 40px 0;
	border-radius: 8px;
	box-shadow: 5px 5px 10px #232c2e;	


}

#tribute-info {
	background:#F3F3F3;
	height: auto;
	width: 65%;
	display: flex;
	flex-wrap: wrap;
	align-self: center;
	margin: 0px;
	padding: 30px 50px;
	border-radius: 4px;
	text-align: center;
	justify-content: center;
	
}

.text-1 {
	margin:0 0 30px 0;
	font-family: Nunito, sans-serif;
	line-height: 2;
	font-weight: 200;
	font-size: 1.5rem;
}

.text-2 {
	margin: 50px 0 20px 0;
	font-family: Nunito, sans-serif;
	line-height: 2;
	font-weight: 200;
	font-size: 1.5rem;
}

#quote {
	text-align: center;
	font-size: 2rem;
	font-family: Nunito, sans-serif;
	font-weight: 400;
	margin: 0;

    
}
#art-bio {
	background:#ECECE7;
	height: auto;
	max-width: 80%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin:30px 0;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 5px 5px 10px #232c2e;
}

.bio-title {
	background:#E9E0D2;
	display: flex;
	width: 50%;
	height: auto;
	margin: 0;
	padding: 20px;
	justify-content: center;
	font-family: Yeseva One, cursive;
	text-align: center;
	font-weight: 400;
	font-size: 1.5rem;
	border-radius: 5px;
}

pre {
	background:#F3F3F3;
	display: block;
	flex-wrap: wrap;
	height: auto;
	max-width: 100%;
	margin: 20px 0;
	padding: 20px;
	align-self: center;
	border-radius: 4px;
	white-space: pre-wrap;

	text-align: left;
	font-family: Nunito, sans-serif;
	font-weight: 200;
}


footer {
	background:#E9E0D2;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: auto;
	width: 80%;
	margin:0;
	border-radius: 8px;
	box-shadow: 5px 5px 10px #232c2e;
	font-family: Nunito, sans-serif;
	font-weight: 200;
}

.ext-link {
	background:#F3F3F3;
	max-width: 100%;
	height: auto;
	margin: 20px 20px;
	padding: 20px;
	text-align: center;
	border-radius: 5px;
}

a:hover {
	color: #9C359F;
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
  header {
	height:auto;
	width: 100%;
	margin:0;
  padding:0;
}
  #title {
    font-size: 25px;
  }
}


              
            
!

JS

              
                
              
            
!
999px

Console