diff --git a/assets/images/800x800-couverture.png b/assets/images/800x800-couverture.png new file mode 100644 index 0000000..7916815 Binary files /dev/null and b/assets/images/800x800-couverture.png differ diff --git a/assets/pdf/Permis_cyberprudence_CAMELEON.pdf b/assets/pdf/Permis_cyberprudence_CAMELEON.pdf new file mode 100644 index 0000000..fad01ec Binary files /dev/null and b/assets/pdf/Permis_cyberprudence_CAMELEON.pdf differ diff --git a/assets/sass/main.scss b/assets/sass/main.scss index a1e22e8..3094918 100644 --- a/assets/sass/main.scss +++ b/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; diff --git a/layouts/index.html b/layouts/index.html index e1aa2c1..126cbb8 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -9,5 +9,46 @@ {{ end }} +
+
+

PASSE TON PERMIS DE
- CYBERPRUDENCE -

+
+
+ {{ partial "symbole" (dict "symbole" "internet") }} +

+ 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. +

+

+ 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. +

+ {{ partial "symbole" (dict "symbole" "smartphone") }} +
+
+
+

+ 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. +

+

+ Passe ton permis de cyberprudence en répondant à ce quiz. Sauras-tu + reconnaître et éviter les situations à risques ? +

+

+ Découvre ton résultat à la fin ! +

+
+ Passe ton permis en ligne + {{ with resources.GetMatch "pdf/Permis_cyberprudence_CAMELEON.pdf" }} + Télécharge la brochure PDF + {{ end }} +
+
+
+
{{ end }} \ No newline at end of file diff --git a/layouts/partials/couverture.html b/layouts/partials/couverture.html index 8c53f96..117a40c 100644 --- a/layouts/partials/couverture.html +++ b/layouts/partials/couverture.html @@ -3,7 +3,9 @@

Permis de cyberprudence

Pour être plus en sécurité sur Internet
\ No newline at end of file diff --git a/layouts/partials/internet.svg b/layouts/partials/internet.svg new file mode 100644 index 0000000..94ed761 --- /dev/null +++ b/layouts/partials/internet.svg @@ -0,0 +1,3 @@ + + + diff --git a/layouts/partials/smartphone.svg b/layouts/partials/smartphone.svg new file mode 100644 index 0000000..aec1115 --- /dev/null +++ b/layouts/partials/smartphone.svg @@ -0,0 +1,3 @@ + + +