-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (135 loc) · 7.13 KB
/
index.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<head>
<!-- language utf8 pour indiquer l'encodage -->
<meta charset="UTF-8">
<!-- pour l'adapter plus ou moins bien sur telephone -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WYHP3QWHKB"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WYHP3QWHKB');
</script>
<!-- importation de la bibliotheque j query qui est requise pour faire marcher le js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- <script src="main.js"></script> -->
<script src="https://kit.fontawesome.com/87544e3da3.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rochester&display=swap" rel="stylesheet">
<link rel="icon" href="image/logo/favicon.png" id="favicon" />
<title>Coming Soon</title>
</head>
<body>
<!-- Début menu déroulant -->
<div class="titre">
<img class="logo" src="image/logo/favicon.png" style="height:30px;width:auto;" />
<span class="key4schoolNavbar">
<p style="font-family: 'Roboto', sans-serif;">
Key
</p>
<p style="font-family: 'M PLUS Rounded 1c', sans-serif;">
4
</p>
<p style="font-family: 'Rochester', cursive;">
School
</p>
</span>
</div>
<br />
<p class="soon">
Coming Soon...
</p>
<div class="description">
<div class="text">
<p class="txt_presentation">
<span class="titre_paragraphe">Un forum d'entraide entre les élèves à travers toute la France.</span><br />
Sur le réseau, vous retrouverez des questions de certains élèves qui, comme vous peut-être,
ont besoin d'aide dans un domaine ou un autre.
L'objectif est de les aider du mieux que vous pouvez, afin de lutter contre l'isolement des lycéens en difficulté scolaire,
mais aussi de faire profiter les autres lycéens de vos facilités dans certaines matières.
</p>
<img src="image/Entraide.gif" alt="img illustration" class="img_descriptionR">
</div>
<br />
<div class="txt_reseau scroll">
<p>
Pour nous suivre sur nos réseaux :
</p>
</div>
<div class="contact scroll">
<a href="https://www.instagram.com/key4school/" target="_blank"><i style="font-size:1.5em;" class="fab fa-instagram"></i></a>
<a href="https://www.facebook.com/Key4School" target="_blank"><i style="font-size:1.5em;" class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/key4school/" target="_blank"><i style="font-size:1.5em;" class="fab fa-twitter"></i></a>
<a href="mailto:key4school@gmail.com" target="_blank"><i style="font-size:1.5em;" class="far fa-envelope"></i></a>
</div>
<!-- <br />
<form id="subscribe" onsubmit="return false;">
<div class="field has-addons div_input" style="margin:auto;">
<div class="control has-icons-left input_email ">
<input class="input color_input taille_input" type="email" placeholder="Etre avertit lors du lancement">
<span class="icon is-small is-left taille_input">
<i class="fas fa-envelope"></i>
</span>
</div>
<div class="control">
<button type="submit" class="button color_input taille_input"><i class="fas fa-check" style="color:green;"></i></button>
</div>
</div>
</form>
<br /><br /> -->
<div class="text">
<img src="image\everywhere.gif" alt="img illustration" class="img_descriptionL_ordi">
<p class="txt_presentation">
<span class="titre_paragraphe">Le premier réseau social conçu et créé entièrement par des lycéens.</span><br />
Nous sommes 3 lycéens et nous travaillons sur ce projet depuis bientôt un an,
dans l'espoir de voir ce réseau social satisfaire vos besoins et vos envies.
Nous avons conçu ce réseau ainsi que ses différentes fonctionnalités et les avons rendues fonctionnelles
pour qu'il réponde à vos attentes de lycéens, qui sont proches des nôtres en tant qu'élèves.
</p>
<img src="image\everywhere.gif" alt="img illustration" class="img_descriptionL_tel">
</div>
<br />
<div class="text">
<p class="txt_presentation">
<span class="titre_paragraphe">Un système de messages privés pour contacter n'importe quel élève.</span><br />
Cette messagerie permet de contacter l'élève de son choix.
Il est possible de créer des groupes de classe par exemple.
Le créateur de chaque groupe de conversation aura la possibilité de rendre le chat modéré, avec certaines expressions ou mots bannis.
Il est également possible de signaler un message, pour éviter tout risque de harcèlement.
</p>
<img src="image\Une_messagerie_instantanée.gif" alt="img illustration" class="img_descriptionR">
</div>
<br />
<div class="text">
<img src="image\LeaderBoard.gif" alt="img illustration" class="img_descriptionL_ordi">
<p class="txt_presentation">
<span class="titre_paragraphe">Un système d'XP pour comparer votre investissement au sein de Key4School</span><br />
Key4School dispose d'un système d'XP afin d'inciter les utilisateurs à aider les personnes en difficulté.
L'utilisateur pourra gagner des XP de plusieurs façon : en postant des demandes d'aide, en répondant à d'autre demande d'aide, ...
Mais ce dernier pourra aussi en perdre en cas de non-respect des règles de Key4School
Ce système d'XP pourra permettre de débloquer, des thèmes, et d'autre récompense.
</p>
<img src="image\LeaderBoard.gif" alt="img illustration" class="img_descriptionL_tel">
</div>
<br />
<div class="text">
<p class="txt_presentation">
<span class="titre_paragraphe">Des thèmes disponible pour les gouts de chaque utilisateurs</span><br />
Notre site dispose d'un thème clair et sombre qui peut etre fixé sur le thème par default de l'appareil.
De plus, Key4School dispose de thème basé sur des palettes de couleur qui se débloqueront à partir d'un certain nombre d'XP.
Ces palettes de couleur s'adapteront automatiquement au thème (clair ou sombre) par default de l'utilisateur.
La dernière palette débloquée sera entièrement personalisable par l'utilisateur.
</p>
<img src="image\blackliighttheme.gif" alt="img illustration" class="img_descriptionR">
</div>
<br />
</div>
</body>