<!DOCTYPE html>
<html lang="fr">
<head>

  <!-- Les bases d'une page HTML
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Charte de promo : DWWM - La Poste 2021</title>
  <meta name="description" content="Notre Charte de Promo">
  <meta name="author" content="Promo Simplon La Poste">

  <!-- Métadonnées spécifique Mobiles
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Liaisons des Polices
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

  <!-- Liaisons des fichiers CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/skeleton.css">
  <link rel="stylesheet" href="./css/style.css">

  <!-- Liaisons du fichier JS si vous faites le bonus
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <script src="./script/script.js" defer></script>

  <!-- Liaison du Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="shortcut icon" type="image/ico" href="./images/favicon.png">

</head>

<body>
  <header class="header">
    <div class="container">
      <h4>
        Promo DWWM - La Poste 2021
      </h4>
    </div>
  </header>


  <!-- Structure principale de la page
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <main class="container">

    <div class="row">
      <div class="eight columns">
        <h4>Ceci est notre charte de promo</h4>
        <p>Ces règles nous unissent et ont été <strong>inventées</strong> et sont <strong>officieuses</strong> ! <br>Les voici, prenez plaisir à les parcourir !</p>
      </div>
      <div class="four columns">
        <button>Charte de la promo</button>
      </div>
    </div>

    <div class="blocs">
      <div class="bloc">
      <h5 class="titre">Engagement collectif <span class="etendre">(Cliquez pour étendre)</span></h5> 
        <ol>
          <li>La solidarité est le maître mot de la formation ! </li>
          <li>Je participe activement à la vie du groupe ! </li>
          <li>J'aide mes camarades dans le besoin ! </li>
          <li>La transparence est une des valeurs fondamentales du groupe ! </li>
        </ol>

    </div>

    <div class="bloc">
    <h5 class="titre">Engagement individuel <span class="etendre">(Cliquez pour étendre)</span></h5>
        <ol>
          <li>Je m'autoforme continuellement pour ne pas rester en retraît ! </li>
          <li>J'interviens pendant les sessions et j'essaye de ne pas rester en retrait ! </li>
          <li>Je me couche tôt, je me lêve tôt, et j'ai le sourire toute la journée ! </li>
          <li>Je m'accorde des petites pauses pour m'oxygéner !</li>
          <li>Je dis bonjour tous les matins et je dis Au revoir tous les soirs ! </li>
        </ol>
    </div>


    <div class="bloc">
    <h5 class="titre">Règles diverses <span class="etendre">(Cliquez pour étendre)</span></h5>
        <ol>
          <li>J'ouvre la fênêtre le matin et je ferme la fenêtre le soir ! </li>
          <li> Je mange du code au moins 1 fois par jour ! </li>
          <li>Je fais un footing avec Blandine 1 fois par semaine ! </li>
        </ol>
    </div>

    <div class="bloc">
      <h5 class="titre">Fun <span class="etendre">(Cliquez pour étendre)</span></h5>
          <ol>
            <li>Je supporte le stade Rennais car c'est le meilleur club au monde ! </li>
            <li>Je paye ma tournée pour mon anniversaire ! </li>
            <li>Je m'abonne à Simplon sur Twitter ! </li>
          </ol>
      </div>
    </div>

    <br/>
    
    <div>
      Grâce à ce règlement on obtient le code suivant : 
      <pre><code style="overflow: auto;">
        var compétencesDePromo = [];
        var humeurPromo = 'Au top'; 
        if('règles comprises' == true && 'règles appliquées' == true) {
          compétencesDePromo.push(new Compétence()); 
        } else {
          humeurPromo = 'Pas top';
        }
      </code></pre>
    </div>

  </main>
  
  <!-- Fin du document (fermeture des balises)
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>