-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
200 lines (184 loc) · 11.4 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!--
_____ _ _
| __ \ (_) | | _
| |__) | _ __ ___ _ ___ | |_ (_)
| ___/ | '__| / _ \ | | / _ \ | __|
| | | | | (_) | | | | __/ | |_ _
|_| |_| \___/ | | \___| \__| (_)
_/ |
|__/
_____ ______ __ ___ _____
/ ____| /\ | ____| /_ | / _ \ | ____|
| (___ / \ | |__ | | | | | | | |__
\___ \ / /\ \ | __| | | | | | | |___ \
____) | / ____ \ | |____ | | _ | |_| | ___) |
|_____/ /_/ \_\ |______| |_| (_) \___/ |____/
-->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<!-- Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Site web de Sète Circuit Tour regroupant tous les parcours disponibles, page accueil">
<meta name="keywords" content="Sète circuit tour, circuit vélo, parcours débutant, parcours intermédiaire, parcours confirmé">
<!-- -->
<title>Sète-Circuit-Tour / Accueil</title>
<!-- Link -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/navigation.css">
<link rel="stylesheet" href="css/section-1.css">
<link rel="stylesheet" href="css/section-2.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/media_queries.css">
<!-- favicon -->
<link rel="icon" href="images/favicon.png">
<!-- -->
<!-- Script-->
<script defer src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<script defer rel="script" src="js/js.js"></script>
<script defer src="https://kit.fontawesome.com/3f0f2f697a.js" crossorigin="anonymous"></script>
<!-- -->
</head>
<body>
<!--Menu of Navigation -->
<nav class="navbar">
<a class="nav-logo" href="index.html"><img class="logo" src="images/logo.png" alt="Logo du site"></a>
<ul class="nav-link">
<li id="selected" class="link"><a href="index.html">Accueil</a></li>
<li class="link"><a href="nos-circuits.html">Nos Circuits</a></li>
<li class="link"><a href="devenir-guide.html">Devenir guide</a></li>
<li class="link"><a href="a-propos.html">A propos</a></li>
<li class="link"><a href="contact.html">Contact</a></li>
</ul>
<i onclick='responsiveMenu()' class="fas fa-bars"></i>
</nav>
<nav class="responsive-navbar">
<ul class="responsive-nav-link">
<li class="responsive-link"><a href="index.html">Accueil</a></li>
<li class="responsive-link"><a href="nos-circuits.html">Nos Circuits</a></li>
<li class="responsive-link"><a href="devenir-guide.html">Devenir guide</a></li>
<li class="responsive-link"><a href="a-propos.html">A propos</a></li>
<li class="responsive-link"><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- -->
<!--Header -->
<header class="header">
<h1 class="header-title">Découvrez Sète à vélo, tout en ayant du <span class="fun">fun</span></h1>
</header>
<!-- -->
<!-- Image de fond : https://www.wallpaperflare.com/barrier-sete-beach-nature-sea-fence-wood-material-wallpaper-etzhr/download/1920x1080
détails de la license : https://www.wallpaperflare.com/terms-of-use -->
<p class="author-background"><a href="https://www.wallpaperflare.com/barrier-sete-beach-nature-sea-fence-wood-material-wallpaper-etzhr/download/1920x1080">Auteur : Wallpaper Flare</a></p>
<!--Section_1 -->
<section class="section-1">
<div class="content">
<h2 class="section-1-title">Introduction</h2>
<p class="section-1-paragraph">
La ville de Sète compte plus de 43 000 habitants et un ensoleillement qui dépasse les 2600 heures par an,
ce qui permet d’exploiter pleinement la durabilité des activités d’extérieur sur toute l’année.
De plus, aussi appelée “Venise du Languedoc”, Sète est une ville côtière, ce qui augmente aussi le nombre d’activités possibles.
Pour passer au concret, nous avons créé 3 circuits pour 3 catégories de niveaux différents :</p>
<p class="section-1-paragraph"><i class="fas fa-map-marker-alt"></i> Un circuit adapté aux débutants et aux enfants pour commencer doucement une activité physique dès maintenant ;</p>
<p class="section-1-paragraph"><i class="fas fa-map-marker-alt"></i> Un circuit de niveau intermédiaire pour les personnes qui veulent reprendre une activité sportive pour développer leur condition physique ;</p>
<p class="section-1-paragraph"><i class="fas fa-map-marker-alt"></i> Un circuit confirmé pour les sportifs qui recherchent un peu d'adrénaline.</p>
<p class="section-1-paragraph">Le tout en visitant la ville de Sète avec diverses activités choisies par nos soins, dans le but de vous détendre, de vous amuser et de passer un bon moment entre amis ou en famille.</p>
</div>
</section>
<!-- -->
<!--Section_2 -->
<section class="section-2">
<h2 class="section-2-title">Voici nos circuits :</h2>
<div class="content">
<div class="way-easy">
<div class="image">
<!-- lien image : https://pixnio.com/fr/objets/signes/piste-cyclable-signe-arbre-peint-tronc-darbre
droit concernant l'image: Creative Commons CC 0 (https://pixnio.com/creative-commons-license)
concernant Creative Commons : https://creativecommons.org/publicdomain/zero/1.0/deed.fr -->
<img class="way-image" alt="image facultative, représentant le difficulté du niveau" src="images/way-easy.jpg">
</div>
<h3 class="level">Parcours débutant</h3>
<span class="border"></span>
<ul>
<li class="level-infos"><data value=20>Distance : <span>20 km</span></data></li>
<li class="level-infos"><data value=70>Durée moyenne : <span>1:10 heures</span></data></li>
<li class="level-infos"><data value=18>Vitesse moyenne : <span>18 km/h</span></data></li>
</ul>
<p class="lieu">Marseillan plage</p>
<a class="button-link" href="nos-circuits.html#debutant">C'est parti</a>
</div>
<div class="way-medium">
<div class="image">
<!-- lien image : https://pixnio.com/fr/objets/signes/piste-cyclable-signe-arbre-peint-tronc-darbre
droit concernant l'image: Creative Commons CC 0 (https://pixnio.com/creative-commons-license)
concernant Creative Commons : https://creativecommons.org/publicdomain/zero/1.0/deed.fr -->
<img class="way-image" alt="image facultative, représentant le difficulté du niveau" src="images/way-medium.jpg">
</div>
<h3 class="level">Parcours intermédiaire</h3>
<span class="border"></span>
<ul>
<li class="level-infos"><data value=32>Distance : <span>32 km</span></data></li>
<li class="level-infos"><data value=120>Durée moyenne : <span>2 heures</span></data></li>
<li class="level-infos"><data value=16>Vitesse moyenne : <span>16 km/h</span></data></li>
</ul>
<p class="lieu">Ville d'Agde</p>
<a class="button-link" href="nos-circuits.html#intermediaire">C'est parti</a>
</div>
<div class="way-hard">
<div class="image">
<!-- lien image : https://pixnio.com/fr/objets/signes/piste-cyclable-signe-arbre-peint-tronc-darbre
droit concernant l'image: Creative Commons CC 0 (https://pixnio.com/creative-commons-license)
concernant Creative Commons : https://creativecommons.org/publicdomain/zero/1.0/deed.fr -->
<img class="way-image" alt="image facultative, représentant le difficulté du niveau" src="images/way-hard.jpg">
</div>
<h3 class="level">Parcours confirmé</h3>
<span class="border"></span>
<ul>
<li class="level-infos"><data value=55>Distance : <span>55 km</span></data></li>
<li class="level-infos"><data value=220>Durée moyenne : <span>3:40 heures</span></data></li>
<li class="level-infos"><data value=15>Vitesse moyenne : <span>15 km/h</span></data></li>
</ul>
<p class="lieu">Etang de Thau</p>
<a class="button-link" href="nos-circuits.html#confirme">C'est parti</a>
</div>
</div>
</section>
<!-- -->
<!--Footer -->
<footer class="footer">
<div class="footer-left">
<h2><span class="coloration">Sète </span>Circuit Tour</h2>
<p>Organisateur de parcours découverte pour tous les niveaux <strong>depuis 2021</strong>.</p>
<h3><i class="far fa-copyright"></i>Uwu();2021</h3>
</div>
<div class="footer-center">
<h2>Les différents liens :</h2>
<ul>
<li><a href="index.html" title="Se rendre à la page accueil">- Accueil</a></li>
<li><a href="nos-circuits.html" title="Se rendre à la page nos circuit">- Nos Circuits</a>
<ul>
<li><a href="nos-circuits.html#debutant" title="Se rendre à la page parcours débutant">- Parcours débutant</a></li>
<li><a href="nos-circuits.html#intermediaire" title="Se rendre à la page parcours intermédiaire">- Parcours intermédiaire</a></li>
<li><a href="nos-circuits.html#confirme" title="Se rendre à la page parcours confirmé">- Parcours confirmé</a></li>
</ul>
</li>
<li><a href="devenir-guide.html" title="Se rendre à la page devenir-guide">- Devenir Guide</a></li>
<li><a href="a-propos.html" title="Se rendre à la page a propos">- A propos</a></li>
<li><a href="contact.html" title="Se rendre à la page contact">- Contact</a></li>
</ul>
</div>
<div class="footer-right">
<h2>Contact :</h2>
<ul>
<li><i class="fab fa-instagram"></i><a href="https://www.instagram.com/sete.circuit.tour/" target="_blank"> : @sete.circuit.tour</a></li>
<li><i class="fab fa-twitter"></i><a href="https://twitter.com/SeteCircuitTour" target="_blank"> : @SeteCircuitTour</a></li>
<li><i class="far fa-envelope"></i><a href="mailto:sete-circuit-tour@gmail.com" target="_blank"> : sete-circuit-tour@gmail.com</a></li>
<li><i class="fab fa-facebook-square"></i><a href="https://www.facebook.com/people/Sete-Cicuit-Tour/100073462332838/" target="_blank"> : Sete Circuit Tour</a></li>
</ul>
</div>
</footer>
<!-- -->
</body>
</html>