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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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 class="">Maria Montessori</h1>
      <blockquote class="blockquote bqCustom">
        <p>
          L'enfant est le seul guide qui nous permette de savoir ce que l'éducation doit être.
        </p>
        <footer>
          Maria Montessori dans <cite title="l'éducation et la paix">l'éducation et la paix</cite>
        </footer>
      </blockquote>
      <p>
        <img class="img-thumbnail" src="https://loutandoujig.files.wordpress.com/2015/01/esukudu-maria-montessori-journc3a9e-de-la-paix-c3a9tablir-la-paix-durablement-travail-c3a9ducation-politique-guerre.png" alt="Photo de Maria Montessori" />
      </p>
    </header>
    <div class="wrapper">
      <article>
        <h2>Chronologie</h2>
        <ul>
          <li><strong>1870</strong> - naissance à Chiaravalle, petit ville située dans la province d'Ancône, en Italie</li>
          <li><strong>1897</strong> - elle est la première femme à obtenir le diplôme de médecine en Italie.</li>
          <li><strong>1907</strong> - ouverture de la première <abbr title="Maison des enfants" >Casa dei Bambini</abbr></li>
          <li><strong>1909</strong> - création d'un cours pour former des éducateurs pour les enfants de 3 à 6 ans</li>
          <li><strong>1913</strong> - ces cours deviennent internationaux</li>
          <li><strong>1914</strong> - Maria Montessori s'exile aux Etats-Unis où de nombreuses écoles ont déjà vu le jour</li>
          <li><strong>1929</strong> - création de l'<abbr title="Association Montessori Internationale">AMI</abbr> dont les objectifs sont de préserver, propager et promouvoir les principes pédagogiques et pratiques qu'elle a formulés pour le plein développement de l'être humain</li>
          <li><strong>De 1939 à 1945</strong> - elle fuit de nouveau la guerre et s'installe en Inde, à Madras. Elle y crée de nombreuses écoles et rencontre Nehru, Tagore et Gandhi, dont elle devient l'amie</li>
          <li><strong>Entre 1949 et 1951</strong> - elle est nominée trois fois pour le Prix Nobel de la paix, ovationnée à l'Unesco et décorée de la Légion d'honneur.</li>
          <li><strong>1952</strong> - Maria Montessori meurt le 6 mai à l'âge de 81 ans, elle est enterrée à Noordwijk aan Zee au Pays-Bas
        </ul>
      </article>
    </div>
    <!-- /wrapper -->
    <footer>
      <p>Vous souhaitez en savoir plus sur Maria Montessori et ses principes d'éducation : <a href="https://fr.wikipedia.org/wiki/Maria_Montessori" target="_blank">Wikipédia</a>.</p>
      <p>Ecrit et codé par <a href="https://www.freecodecamp.com/cedruyne" target="_blank">Cédric de Bruyne</a>.</p>
    </footer>


              
            
!

CSS

              
                /* Layout */

* {
  /* pour maîtriser width et flex-basis */
  box-sizing: border-box; 
}

html { 
  /* correction bug IE de min-height non appliqué à body */
  display: flex;
  flex-direction: column;
}

body {
  display: flex; /* créé un contexte flex pour ses enfants */
  flex-direction: column; /* affichage vertical */
  min-height: 100vh; /*  toute la hauteur du viewport */
  background-color: #2e2e2e;
  color: #eee;
  font-family: "El Messiri", sans-serif;
  align-items: center;
}

header {
  display: flex;
  flex-direction: column;
  width: 65%;
  align-items: center;
}

h1 {
  color: #558b2f;
  font-family: Cinzel, sans-serif;
}

.bqCustom {
  color: #3e2723;
  background-color: #eee;
  padding: 15px;
  border-radius: 6px
}

.wrapper {
  margin: 15px;
  background-color: #eee;
  color: #3e2723;
  border-radius: 6px;
  width: 65%;
  padding: 10px;
}

ul {
  list-style-type: none;
}

footer {
  margin: 15px;
  background-color: #eee;
  color: #3e2723;
  border-radius: 6px;
  width: 65%;
  padding: 10px;
  text-align: center;
}

              
            
!

JS

              
                
              
            
!
999px

Console