-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbody.html
104 lines (91 loc) · 5.37 KB
/
body.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
</head>
<body class="overflow-x-hidden">
<main>
<!-- PAGE 1 -->
<section class="md:min-h-screen" style="background-color: #70faff">
<!-- bandeau-->
<div class="bandeau">
<img src="images/bandeau.png" class="marquee" alt="bandeau avec les images pour les 3 'clickbaits'">
</div>
<div class="grid grid-cols-6 md:grid-cols-12 md:h-96 mt-10 md:mt-48 mx-auto max-w-screen-xl">
<div class="col-span-6 md:col-span-5 text-center justify-center flex align-center flex-col text-3xl py-28 px-6">
<p class="mb-5">Oups, on dirait que vous ne vous attendiez pas à arriver ici.</p>
<p>Si vous avez l'intention de voter, pourquoi ne pas prendre 2 minutes pour vérifier que vous êtes bien inscrit·e sur les listes électorales
?</p>
</div>
<div class="hidden md:col-span-2 md:flex">
<img style="transform: scale(1, -1) rotate(17deg); width: 100%; object-fit: contain; padding: 6px 10px 80px 10px;"
src="images/arrow.png" alt="flèche">
</div>
<div class="col-span-6 md:col-span-5 flex flex-col justify-evenly">
<div>
<a class="yek-social__link"
target="_blank"
href="https://service-public.fr/particuliers/vosdroits/services-en-ligne-et-formulaires/ISE">
<span class="text-xl md:text-2xl md:p-2 yek-social__button yek-social__button--button_1 button_1">
Vérifier que je suis inscrit·e sur les listes électorales
</span>
</a>
</div>
<div class="flex justify-end items-center mal-inscrit-e">
<p class="text-xl">mal-inscrit·e ?</p>
<img style="object-fit: contain; width: 150px; height: 130px;" src="images/arrow_down.png"
alt="flèche">
</div>
<div>
<a class="yek-social__link"
target="_blank"
href="https://www.inscriptionelectorale.service-public.fr">
<span class="yek-social__button yek-social__button--button_2 button_2">
M'inscrire sur les listes électorales
</span>
</a>
</div>
</div>
</div>
<div class="text-center h-80 flex flex-col justify-center">
<h1 id="timeout" class="text-5xl"></h1>
<p id="timeout-desc" class="italic mt-2"></p>
</div>
</section>
<!-- PAGE 2 -->
<section style="background-color: #70faff" class="md:min-h-screen">
<h2 class="text-center text-6xl pt-40" style="color: white;">Le saviez-vous ?</h2>
<div class="grid grid-cols-6 md:grid-cols-12 mt-10 md:mt-40 mx-auto max-w-screen-xl">
<div class="col-span-6 flex justify-center">
<img src="images/simpson.webp" alt="Homer simpson ne rentre pas dans la cabine">
</div>
<div class="mr-4 ml-4 col-span-6 flex flex-col items-left">
<div class="my-8">
<h3 class="text-2xl mb-4">En <span class="font-bold">2012</span>, il y a eu</h3>
<p class="text-4xl"><span class="font-bold">6,5 millions</span> mal-inscrits</p>
<p class="text-4xl"><span class="font-bold">3 millions</span> de non-inscrits</p>
</div>
<div class="my-8">
<h3 class="text-2xl mb-4">En <span class="font-bold">2017</span>, il y a eu</h3>
<p class="text-4xl"><span class="font-bold">7,6 millions</span> mal-inscrits</p>
<p class="text-4xl"><span class="font-bold">5.2 millions</span> de non-inscrits</p>
</div>
</div>
</div>
</section>
<!-- PAGE 2 -->
<section class="md:h-half-screen">
<h2 class="text-center text-4xl pt-40">
Sources
</h2>
<div class="flex flex-col items-center my-8">
<a class="link" href="https://fr.wikipedia.org/wiki/%C3%89lection_pr%C3%A9sidentielle_fran%C3%A7aise_de_2017" target="_blank" >wikipedia</a>
<a class="link" href="https://www.francetvinfo.fr/replay-radio/le-vrai-du-faux/sept-millions-de-non-inscrits-ou-mal-inscrits-sur-les-listes-electorales_1800307.html" target="_blank" >francetvinfo.fr (1)</a>
<a class="link" href="https://www.francetvinfo.fr/replay-radio/le-vrai-du-faux/y-a-t-il-10-millions-de-francais-non-inscrits-ou-mal-inscrits-sur-les-listes-electorales-comme-l-affirme-la-deputee-mathilde-panot_4659465.html" target="_blank" >francetvinfo.fr (2)</a>
<a class="link" href="https://www.lagazettedescommunes.com/786260/listes-electorales-qui-sont-les-non-et-mal-inscrits/" target="_blank" >lagazettedescommunes.com</a>
<a class="link" href="https://www.france24.com/fr/france/20211211-pr%C3%A9sidentielle-2022-la-mal-inscription-sur-les-listes-%C3%A9lectorales-un-mal-fran%C3%A7ais" target="_blank" >france24.com</a>
</div>
</section>
</main>
<footer class="md:h-16 text-center">
<p>Réalisé pendant la <a class="link" target="_blank" href="https://nuitcodecitoyen.org" >nuit du code citoyen</a> 2021</p>
</footer>
<script src="script.js"></script>
</body>
</html>