-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (97 loc) · 4.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<title>EseoNova</title>
<link rel="shortcut icon" type="image/x-icon" href="assets/img/logo.png" />
<script src="https://kit.fontawesome.com/22b1f70f6f.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="gradient">
<nav>
<div class="logo">
<a href="index.html"><img src="assets/img/logo.png" alt="Logo"></a>
</div>
<div class="toggle">
<i class="fas fa-bars ouvrir"></i>
<i class="fas fa-times fermer"></i>
</div>
<ul class="menu">
<li><a href="index.html"><p class="menu-hover">Accueil</p></a></li>
<li><a href="planning.html"><p class="menu-hover">Planning</p></a></li>
<li><a href="liste.html"><p class="menu-hover">Liste</p></a></li>
<li><a href="objectifs.html"><p class="menu-hover">Objectifs</p></a></li>
<li><a href="sponsors.html"><p class="menu-hover">Sponsors</p></a></li>
</ul>
</nav>
</header>
<section id="home" class="gradient row">
<img id="logo" class="reveal fade-bottom" src="assets/img/logo.png" alt="Logo">
<!-- <img id="title" src="assets/img/title.png" alt="EseoNova">-->
<h1 id="title" class="reveal fade-right">ESEONOVA</h1>
</section>
<section id="mot" class="width-reduced">
<h1>Le mot du président</h1>
<div class="divider"></div>
<div id="quote" class="row">
<blockquote>
<p>La vie associative de l'ESEO est l'une de ses plus grandes qualités. Il est primordial pour nous de l'améliorer sans cesse, pour permettre aux élèves de profiter et de se professionnaliser au sein des clubs et associations. Nous sommes EseoNova.</p>
</blockquote>
<!-- <div class="profile column">-->
<!-- <img src="assets/img/photos/indiv/bureau_restreint/jules.png" alt="">-->
<!-- <h3>Jules Leroy</h3>-->
<!-- </div>-->
<div class="profile column">
<img class="indiv-photo" src="assets/img/photos/indiv/bureau_restreint/jules.png" alt="">
<h3>Jules Leroy</h3>
</div>
</div>
</section>
<section id="contexte" class="width-reduced">
<h1>Quelques infos</h1>
<div class="divider"></div>
<div id="informations" class="row">
<div class="frame gradient column">
<h3>Étoile</h3>
<div class="row">
<p>Une étoile est un corps céleste plasmatique qui rayonne sa propre lumière par réactions de fusions nucléaires.</p>
<img class="reveal fade-right" src="assets/img/info/star.png" alt="">
</div>
</div>
<div class="frame gradient column">
<h3>Nova</h3>
<div class="row">
<p>Une nova est une étoile qui devient très brutalement extrêmement brillante, pendant seulement quelques jours.</p>
<img class="reveal fade-right" src="assets/img/info/nova.png" alt="">
</div>
</div>
<div class="frame gradient column">
<h3>Supernova</h3>
<div class="row">
<img class="reveal fade-left" src="assets/img/info/supernova.png" alt="">
<p>Une supernova correspond aux phénomènes résultant de l'implosion d'une étoile en fin de vie, tels qu'une gigantesque explosion.</p>
</div>
</div>
<div class="frame gradient column">
<h3>Trou noir</h3>
<div class="row">
<img class="reveal fade-left" src="assets/img/info/black_hole.png" alt="">
<p>Un trou noir est un objet céleste si compact qu'il empêche toute forme de matière ou de rayonnement de s’en échapper.</p>
</div>
</div>
</div>
</section>
<footer class="gradient column">
<div class="row">
<a href="https://www.facebook.com/profile.php?id=100081270961844"><p><i class="social-icon fa-brands fa-facebook"></i></p></a>
<a href="https://instagram.com/eseo.nova?igshid=YmMyMTA2M2Y="><p><i class="social-icon fa-brands fa-instagram"></i></p></a>
<a href="mailto:[email protected]"><p><i class="social-icon fa-solid fa-envelope"></i></p></a>
</div>
<a href="mentions_legales.html"><p>Mentions légales</p></a>
<p>2022 | Tous droits réservés</p>
</footer>
<script src="js/menu.js"></script>
<script src="js/scroll.js"></script>
</body>
</html>