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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Le blog trotter</title>
    </head>

    <body>
      <div id="topsection">
          <header>
            <h1>Le blog trotter</h1>
            <p>Je parcours la planète... et vous la fais découvrir !</p>
          </header>

          <nav>
            <ul id="menu">
              <li><a href="#">Accueil</a></li>
              <li><a href="#">Archives</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>

      </div>

      <h1>La Chine</h1>
      <p>On peut aujourd’hui aller de Paris à Pékin en 10h d’avion. Si la Chine semble de moins en moins lointaine, son pouvoir d’attraction et son mystère demeurent. Depuis son ouverture économique commencée en 1992, la voilà devenue enfin accessible aux voyageurs et aux routards. Pour aller en Chine, un simple visa suffit.</p>

<p>Pas facile de découvrir en 3 semaines un pays vaste comme 17 fois la France. Au nord et à Pékin, la Grande Muraille, la Cité interdite, le palais d’Été, les musées et les temples. Au centre du pays, l’Armée enterrée de Xi’an. Non loin de la mer, Shanghai, ville symbole du nouveau capitalisme chinois. Enfin, c’est une autre Chine, raffinée, secrète et poétique, qui se cache dans les jardins de Suzhou ou sur les berges de la rivière Li, dans le Sud, près de Guilin ou encore le long des rizières et plantations de thé du Yunnan. Source : <a href="https://www.routard.com/guide/code_dest/chine.htm">Le Routard</a></p>
      
      <h1>L'Espagne</h1>
      <p>Diversité des paysages, des cultures, des langues (castillan, catalan, basque), des terroirs et des villes. L’Espagne s’offre à tous les goûts : laissons de côté les plages envahies l’été et la Costa del Sol bétonnée par les complexes hôteliers. Aventurons-nous plutôt dans l’intérieur du pays, superbe et naturel, prodigue en paysages saisissants, en monuments splendides, en modes de vie passionnants…</p>
      
      <p>Pour cela, il suffit parfois de s’éloigner d’une dizaine de kilomètres des foules. Découvrir Salamanque, la petite Rome espagnole, ou Tolède la belle médiévale perchée sur son promontoire. Parcourir le rude plateau de Castille, de Ségovie à Léon, à la découverte de magnifiques cathédrales et d’extraordinaires musées. Goûter à la spécificité de l’âme catalane et à ses trésors artistiques, de Dalí à Gaudí en passant par Tapiès et Miró. Prendre le chemin de Saint-Jacques-de-Compostelle pour admirer les beautés de la rurale Galice, aussi verdoyante que la terre des Basques, à laquelle ils sont tant attachés. Ou, enfin, un soir de fête à Séville, Madrid ou Barcelone, succomber à cet éclatant bonheur de vivre qui est la marque du pays tout entier. Car les nuits y sont souvent plus intenses que les jours. Source : <a href="https://www.routard.com/guide/code_dest/espagne.htm">Le Routard</a></p>
      <footer>
        <p>Copyright Le Blog Trotter</p>
      </footer>
        
    </body>
</html>

              
            
!

CSS

              
                /* Feuille de style */

#topsection {
  display:flex;
}

ul {
  list-style-type: none;
}

p {
  width: 80%;
  text-align: justify;
  margin-left:auto;
  margin-right:auto;
}

              
            
!

JS

              
                
              
            
!
999px

Console