Accueil : bouton 'passe ton permis'

assets/sass/main.scss

@@ -45,6 +45,69 @@ body {
   }
 }
 
+.passe-ton-permis {
+  .conteneur-titre {
+    max-width: $petite-largeur;
+    padding-top: 2rem;
+    width: 100%;
+  }
+
+  .conteneur-intro {
+    max-width: $petite-largeur;
+    margin: 5rem 0;
+
+    .symbole {
+      &.internet {
+        justify-content: flex-start;
+        margin-left: 1rem;
+      }
+      &.smartphone {
+        justify-content: flex-end;
+        margin-right: 4rem;
+      }
+      svg {
+        width: 3rem;
+        height: 3rem;
+
+        path {
+          fill: $bleu;
+        }
+      }
+    }
+  }
+
+  .conteneur-envoie {
+    max-width: $petite-largeur;
+    padding: 1rem 0 4rem;
+    div {
+      padding: 2rem 0;
+    }
+
+    .actions {
+      display: flex;
+      justify-content: space-between;
+      gap: 1rem;
+      margin: 0 3rem;
+      padding-bottom: 0rem;
+
+      a {
+        background-color: $bleu;
+        padding: 1rem 1.5rem;
+        border-radius: 2rem;
+        text-decoration: none;
+      }
+    }
+  }
+  h2 {
+    font-weight: normal;
+    text-align: center;
+    padding: 1rem 0;
+  }
+  p {
+    padding: 0 4rem;
+  }
+}
+
 section {
   display: flex;
   flex-direction: column;

layouts/index.html

@@ -9,5 +9,46 @@
         </div>
       {{ end }}
     </section>
+    <section class="passe-ton-permis">
+      <div class="bg-bleu conteneur-titre">
+        <h2 class="bg-jaune"><strong>PASSE TON PERMIS DE</strong><br>- CYBERPRUDENCE -</h2>
+      </div>
+      <div class="bg-blanc conteneur-intro">
+        {{ partial "symbole" (dict "symbole" "internet") }} 
+        <p>
+          Internet c’est super pour s’informer et se connecter aux autres.
+          Regarder des vidéos et jouer en réseau font partie des activités
+          préférées des enfants et des adolescents.
+        </p>
+        <p>
+          Mais il arrive que des gens essaient de piéger les jeunes derrière leur
+          écran pour les isoler, les agresser et leur faire du mal. Ils peuvent
+          mentir sur leur identité en utilisant des applications ou des réseaux
+          sociaux pour entrer en contact avec eux.
+        </p>
+        {{ partial "symbole" (dict "symbole" "smartphone") }} 
+      </div>
+      <div class="bg-bleu conteneur-envoie">
+        <div class="bg-jaune">
+          <p>
+            Dans la vraie vie comme sur Internet, il y a des règles de sécurité à
+            connaître pour se protéger des dangers qui existent.
+          </p>
+          <p>
+            Passe ton permis de cyberprudence en répondant à ce quiz. Sauras-tu
+            reconnaître et éviter les situations à risques ?
+          </p>
+          <p>
+            Découvre ton résultat à la fin !
+          </p>
+          <div class="actions">
+            <a href="cartes">Passe ton permis en ligne</a>
+            {{ with resources.GetMatch "pdf/Permis_cyberprudence_CAMELEON.pdf" }}
+              <a href="{{ .RelPermalink }}">Télécharge la brochure PDF</a>
+            {{ end }}
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 {{ end }}

layouts/partials/couverture.html

@@ -3,7 +3,9 @@ <h1>Permis de cyberprudence</h1>
     <div class="sous-titre">Pour être plus en sécurité sur Internet</div>
     <div class="image logo">
         {{ with resources.GetMatch "images/800x-logo-blanc.png" }}
-        <img src="{{ .RelPermalink }}">
+        <a href="www.cameleon-association.org">
+            <img src="{{ .RelPermalink }}" alt="logo associatioin Caméléon">
+        </a>
         {{ end }}
     </div>
 </section>