ajout fichiers et répertoires site

master
Baptiste DUDONNE 3 years ago
parent f245b92827
commit 74a22a758d

Binary file not shown.

Binary file not shown.

@ -0,0 +1,145 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nous Contacter</title>
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/navbar.css">
<link rel="stylesheet" href="../style/contact.css">
<link rel="icon" href="../images/boussole.png">
</head>
<body>
<header>
<nav>
<ul class="navbar" id="navbar">
<li><a href="../index.html">Accueil</a></li>
<li><a href="traces.html">Nos Parcours</a></li>
<li><a href="images.html">Galerie</a></li>
<li><a href="tutos.html">Tutoriels</a></li>
<li><a href="https://www.visugpx.com/editgpx/">Tracer !</a></li>
<li><a id="actual" href="#">Contact</a></li>
<a class="close" href="#"><img src="../images/open.png" id="close"></a>
</ul>
<a class="open" href="#navbar"><img src="../images/open.png" id="open"></a>
<a href="../index.html"><img src="../images/boussole.png" id="boussole"></a>
</nav>
<nav class="navbar2">
<a href="../index.html"><img src="../images/boussole.png" alt="Img Not Found :("></a>
<a href="traces.html">Nos Parcours</a>
<a href="images.html">Galerie</a>
<a href="tutos.html">Tutoriels</a>
<a href="https://www.visugpx.com/editgpx/" target="blank_">Tracer!</a>
<a id="actual" href="#">Contact</a>
</nav>
</header>
<div class="title_contact">
<h1>Nous Contacter :</h1>
</div>
<h2>Indiquez Nous Vos Coordonnées et le motif de votre contact :</h2>
<div class="form_contact">
<form action="../php/contact.php" method="post">
<label for="name">Nom* :</label>
<input type="text" name="name" id="name" required><br>
<label for="prenom">Prénom* : </label>
<input type="text" name="prenom" id="prenom" required><br>
<label for="tel">Téléphone :</label>
<input type="tel" name="tel" id="tel"><br>
<label for="mail">Adresse Mail* :</label>
<input type="email" name="mail" id="mail"><br>
<label for="reason">Raison Du Contact : </label>
<select name="reason" size="1">
<option>Besoin D'aide
<option>Devenir Certifié
<option>Autre
</select><br>
<label for="horaire">Jour et Horaire :</label>
<input name="horaire" id="horaire" type="datetime-local"><br>
<div>
<legend>S'agit t'il de votre premier contact avec nous ?</legend>
<div>
<input type="radio" id="OuiFirst" name="OuiFirst" value="OuiFirst">
<label for="OuiFirst">Oui</label>
</div>
</div>
<br>
<label for="msg">Message* :</label><br>
<textarea id="msg" name="msg" placeholder="Ecrivez La Raison de Votre Contact." rows="5" cols="33" required>
</textarea><br>
<input type="reset" value="Effacer"/>
<input type="submit" value="Envoyer"/>
<p>Les Champs Contenant des étoiles* sont obligatoires !</p>
</form>
</div>
<div class="bf_footer">
<h3>#Go Ride Now<br>
#Va Rouler</h3>
</div>
<footer>
<div class="content_4">
<section class="bottom_left">
<a href="../index.html"><img src="../images/boussole.png"></a>
<p>
Run & Bike In Mountain @2022 All Rights Reserved.<br>
See Here Our <a href="#">Terms And Conditions.</a><br>
Dudonné Baptiste BUT 1 2022-2023.<br>
Vous Souhaitez nous Contacter ? C'est <a href="contact.html">ici.</a>
</p>
</section>
<section class="bottom_right">
<p>Follow Us On :</p>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">intragram</a>
</section>
</div>
</footer>
</body>
</html>

@ -0,0 +1,109 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/images.css">
<link rel="stylesheet" href="../style/navbar.css">
<link rel="icon" href="../images/boussole.png">
<title>Galerie D'images</title>
</head>
<body>
<header>
<nav>
<ul class="navbar" id="navbar">
<li><a href="../index.html">Accueil</a></li>
<li><a href="traces.html">Nos Parcours</a></li>
<li><a id='actual' href="#">Galerie</a></li>
<li><a href="tutos.html">Tutoriels</a></li>
<li><a href="https://www.visugpx.com/editgpx/">Tracer !</a></li>
<li><a href="contact.html">Contact</a></li>
<a class="close" href="#"><img src="../images/open.png" id="close"></a>
</ul>
<a class="open" href="#navbar"><img src="../images/open.png" id="open"></a>
<a href="../index.html"><img src="../images/boussole.png" id="boussole"></a>
</nav>
<nav class="navbar2">
<a href="../index.html"><img src="../images/boussole.png" alt="Img Not Found :("></a>
<a href="traces.html">Nos Parcours</a>
<a id="actual" href="#">Galerie</a>
<a href="tutos.html">Tutoriels</a>
<a href="https://www.visugpx.com/editgpx/" target="blank_">Tracer!</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<div class="before_images">
<h2>Les Meilleurs Clichés de Nos Utilisateurs : </h2>
</div>
<div class="container_images">
<a class=" a_images"href="../images/img1.jpg"><img src="../images/img1.jpg" alt=""></a>
<a class=" a_images"href="../images/Gallery_1.jpg"><img src="../images/Gallery_1.jpg" alt=""></a>
<a class=" a_images"href="../images/bg_2.jpg"><img src="../images/bg_2.jpg" alt=""></a>
<a class=" a_images"href="../images/baptiste_ride.jpg"><img src="../images/baptiste_ride.jpg" alt=""></a>
<a class=" a_images"href="../images/img_4.jpg"><img src="../images/img_4.jpg" alt=""></a>
<a class=" a_images"href="../images/img_5.jpeg"><img src="../images/img_5.jpeg" alt=""></a>
</div>
<footer>
<div class="content_4">
<section class="bottom_left">
<a href="../index.html"><img src="../images/boussole.png"></a>
<p>
Run & Bike In Mountain @2022 All Rights Reserved.<br>
See Here Our <a href="#">Terms And Conditions.</a><br>
Dudonné Baptiste BUT 1 2022-2023.<br>
Vous Souhaitez nous Contacter ? C'est <a href="contact.html">ici.</a>
</p>
</section>
<section class="bottom_right">
<p>Follow Us On :</p>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">intragram</a>
</section>
</div>
</footer>
</body>
</html>

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/inscription.css">
<link rel="stylesheet" href="../style/navbar.css">
<title>Inscription</title>
<link rel="icon" href="../images/boussole.png">
</head>
<body>
<header>
<nav>
<ul class="navbar" id="navbar">
<li><a href="../index.html">Accueil</a></li>
<li><a href="traces.html">Nos Parcours</a></li>
<li><a href="images.html">Galerie</a></li>
<li><a href="tutos.html">Tutoriels</a></li>
<li><a href="https://www.visugpx.com/editgpx/">Tracer !</a></li>
<li><a id="actual" href="#">S'inscrire</a></li>
<a class="close" href="#"><img src="../images/open.png" id="close"></a>
</ul>
<a class="open" href="#navbar"><img src="../images/open.png" id="open"></a>
<a href="../index.html"><img src="../images/boussole.png" id="boussole"></a>
</nav>
<nav class="navbar2">
<a href="../index.html"><img src="../images/boussole.png" alt="Img Not Found :("></a>
<a href="traces.html">Nos Parcours</a>
<a href="images.html">Galerie</a>
<a href="tutos.html">Tutoriels</a>
<a href="https://www.visugpx.com/editgpx/" target="blank_">Tracer!</a>
<a id=actual href="inscription.html">S'inscrire !</a>
</nav>
</header>
<div class="Text_1">
<h1>Inscrivez Vous à Notre NewsLetter !</h1>
</div>
<div class="form">
<form action="../php/index.php" method="post">
<section class="form_left">
<label for="nom">Nom : *<br></label>
<input type="text" id="nom" required><br>
<label for="prenom" title="prenom">prenom : *<br></label>
<input type="text" name="prenom"id="prenom"required><br>
<label for="adress">Adresse : *<br></label>
<input type="text" name="adress" id="adress" required><br>
<label for="phone">Téléphone : *<br></label>
<input type="tel" name="phone" id="phone"required><br>
<label for="email">Courriel : *<br></label>
<input type="email" name="mail" id="email"required name><br>
</section>
<section class="form_right">
<label for="commentaires"></label>
<input id="reset" type="reset">
<input id="submit" type="submit">
</section>
</form>
</div>
<div class="bf_footer">
<h3>#Go Ride Now<br>
#Va Rouler</h3>
</div>
<footer>
<div class="content_4">
<section class="bottom_left">
<a href="../index.html"><img src="../images/boussole.png"></a>
<p>
Run & Bike In Mountain @2022 All Rights Reserved.<br>
See Here Our <a href="#">Terms And Conditions.</a><br>
Dudonné Baptiste BUT 1 2022-2023.<br>
Vous Souhaitez nous Contacter ? C'est <a href="contact.html">ici.</a>
</p>
</section>
<section class="bottom_right">
<p>Follow Us On :</p>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">intragram</a>
</section>
</div>
</footer>
</body>
</html>

@ -0,0 +1,205 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/traces.css">
<link rel="stylesheet" href="../style/navbar.css">
<title>Actus Sportives</title>
<link rel="icon" href="../images/boussole.png">
</head>
<body>
<header>
<nav>
<ul class="navbar" id="navbar">
<li><a href="../index.html">Accueil</a></li>
<li><a id="actual" href="#">Nos Parcours</a></li>
<li><a href="images.html">Galerie</a></li>
<li><a href="tutos.html">Tutoriels</a></li>
<li> <a href="https://www.visugpx.com/editgpx/">Tracer !</a></li>
<li><a href="contact.html">Contact</a></li>
<a class="close" href="#"><img src="../images/open.png" id="close"></a>
</ul>
<a class="open" href="#navbar"><img src="../images/open.png" id="open"></a>
<a href="../index.html"><img src="../images/boussole.png" id="boussole"></a>
</nav>
<nav class="navbar2">
<a href="../index.html"><img src="../images/boussole.png" alt="Img Not Found :("></a>
<a id="actual" href="traces.html">Nos Parcours</a>
<a href="images.html">Galerie</a>
<a href="tutos.html">Tutoriels</a>
<a href="https://www.visugpx.com/editgpx/" target="blank_">Tracer!</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<h1 id="titre_p2"> Découvrez Nos Circuits !</h1>
<div class="before_container">
<h3>Les Parcours Les Plus Populaires Du Moment : </h3>
</div>
<div class="container_parcours">
<div class="parcours">
<section class="sect1" >
<a href="https://www.komoot.fr/smarttour/8289741?tour_origin=smart_tour_search" target="_blank"><h3> Circuit N°754 Lisieux</h3>
<p>Distance : 35,6 Km ; D+ : 954m ; Difficultée : 2/5</p></a>
</section>
<section class="sect2">
<a href="https://www.komoot.fr/highlight/283150" target="_blank"><h3> Col Lebreau Par Vière</h3>
<p>Type : VTT ; Distance : 29,2 Km ; D+ : 1113m ; Difficultée : 4/5</p>
</a>
</section>
<section class="sect3" >
<a href="https://www.komoot.fr/collection/689/de-la-sueur-et-un-sentiment-de-fierte-gravir-les-cols-legendaires-autour-de-bormio" target="_blank">
<h3>Les Cols Légendaires autour de Bormio</h3>
<p>Type : Road-Trip ; Distance : 537 Km ; D+ : 14830m Difficultée : 5/5</p></a>
</section>
<section class="sect4">
<a href="https://www.openrunner.com/route-details/15470696" target="_blank">
<h3> Ronde Des Lacs D'aydat</h3>
<p>Type : VTT ; Distance : 71,08 Km ; D+ : 2029m ; Difficultée : 4/5</p>
</a>
</section>
<section class="sect5">
<a href="https://www.strava.com/activities/7451967179?share_sig=%5BC%407f0f0f31665426003&utm_medium=social&utm_source=android_share" target="_blank">
<h3>Côte Fleurie : Deaville & Villers-Sur Mer</h3>
<p>Type : Route ; Distance : 74,85 Km ; D+ : 412m : Difficultée : 1/5</p>
</a>
</section>
<section class="sect6">
<a href="https://www.strava.com/activities/7829305113" target="_blank">
<h3>Trail Au Puy De Pariou</h3>
<p>Type : Randonnée / Trail ; Distance : 11.95km ; D+ : 356m ; Difficultée : 3/5</p>
</a>
</section>
<section class="sect7">
<a href="https://strava.app.link/n5IrDyP6qub" target="_blank">
<h3> Gran Fondo Des Abbayes En Baie De Seine</h3>
<p>Type : Route ; Distance : 200.2 Km ; D+ : 1652m ; Difficultée : 4/5</p>
</a>
</section>
<section class="sect8">
<a href="https://www.alltrails.com/fr/randonnee/france/orne--2/foret-d-ecouves-a-velo" target="_blank">
<h3>VTT en Forêt D'Ecouves</h3>
<p>Type : VTT ; Distance : 30.6 ; D+ : 796m ; Difficultée 2/5</p>
</a>
</section>
<div class="after_section">
<h1>Compatibilités Appareils & Formats</h1>
<p>Il existe plusieurs types de fichiers GPS ! Nous Vous Conseillons d'utiliser le format <b>gpx</b> qui est
reconnu par tous les appareils, voici pour les marques principales d'appareils leurs compatibilité avec
les différents formats existants.
</p>
<table>
<tr>
<th>Marques :</th>
<th>.GPX</th>
<th>.TCX</th>
<th>.FIT</th>
<th>.CSV</th>
</tr>
<tr>
<td>Garmin</td>
<td colspan="3"><img src="../images/yes.png" alt="yes"></td>
<td><img src="../images/no.webp" alt="no"></td>
</tr>
<tr>
<td>Wahoo</td>
<td colspan="2"><img src="../images/yes.png"></td>
<td colspan="2"><img src="../images/no.webp"></td>
</tr>
<tr>
<td>Bryton</td>
<td><img src="../images/yes.png" alt="yes"></td>
<td><img src="../images/no.webp" alt="no"></td>
<td><img src="../images/yes.png" alt="yes"></td>
<td><img src="../images/no.webp" alt="no"></td>
</tr>
<tr>
<td>Polar</td>
<td rowspan="2"><img src="../images/yes.png" alt="yes"></td>
<td colspan="3" rowspan="2"><img src="../images/no.webp" alt="no"></td>
</tr>
<tr>
<td>HammerHead</td>
</tr>
</table>
</div>
</div>
</div>
<div class="bf_footer">
<h3>#Go Ride Now<br>
#Va Rouler</h3>
</div>
<footer>
<div class="content_4">
<section class="bottom_left">
<a href="../index.html"><img src="../images/boussole.png"></a>
<p>
Run & Bike In Mountain @2022 All Rights Reserved.<br>
See Here Our <a href="#">Terms And Conditions.</a><br>
Dudonné Baptiste BUT 1 2022-2023.<br>
Vous Souhaitez nous Contacter ? C'est <a href="contact.html">ici.</a>
</p>
</section>
<section class="bottom_right">
<p>Follow Us On :</p>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">intragram</a>
</section>
</div>
</footer>
</body>
</html>

@ -0,0 +1,106 @@
<!DOCTYPE html>
<html>
<head>
<title>Tutoriels !</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/navbar.css">
<link rel="stylesheet" href="../style/tutos.css">
<link rel="icon" href="../images/boussole.png">
</head>
<body>
<header>
<nav>
<ul class="navbar" id="navbar">
<li><a href="../index.html">Accueil</a></li>
<li><a href="traces.html">Nos Parcours</a></li>
<li><a href="images.html">Galerie</a></li>
<li><a id='actual' href="#">Tutoriels</a></li>
<li><a href="https://www.visugpx.com/editgpx/">Tracer !</a></li>
<li><a href="contact.html">Contact</a></li>
<a class="close" href="#"><img src="../images/open.png" id="close"></a>
</ul>
<a class="open" href="#navbar"><img src="../images/open.png" id="open"></a>
<a href="../index.html"><img src="../images/boussole.png" id="boussole"></a>
</nav>
<nav class="navbar2">
<a href="../index.html"><img src="../images/boussole.png" alt="Img Not Found :("></a>
<a href="traces.html">Nos Parcours</a>
<a href="images.html">Galerie</a>
<a href="#" id="actual">Tutoriels</a>
<a href="https://www.visugpx.com/editgpx/" target="blank_">Tracer!</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<div class="Title_div"><h1>Tutoriels !<br>Apprenez à Créer Un Circuit GPX !</h1>
</div>
<div class="content_vid">
<h1>Créer Un Circuit GPX sur VisuGPX</h1>
<video id="vid" controls width="800px" height="500px">
<source src="../images/video.mp4" type="video/mp4">
</video>
<h1>Créer Un Circuit GPX sur Strava</h1>
<video id="vid" controls width="800px" height="500px">
<source src="../images/video_2.mp4" type="video/mp4">
</video>
</div>
<div class="bf_footer">
<h3>#Go Ride Now<br>
#Va Rouler</h3>
</div>
<footer>
<div class="content_4">
<section class="bottom_left">
<a href="../index.html"><img src="../images/boussole.png"></a>
<p>
Run & Bike In Mountain @2022 All Rights Reserved.<br>
See Here Our <a href="#">Terms And Conditions.</a><br>
Dudonné Baptiste BUT 1 2022-2023.<br>
Vous Souhaitez nous Contacter ? C'est <a href="contact.html">ici.</a>
</p>
</section>
<section class="bottom_right">
<p>Follow Us On :</p>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">intragram</a>
</section>
</div>
</footer>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 213 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 417 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 498 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 460 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1018 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 546 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 313 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>

After

Width:  |  Height:  |  Size: 208 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 415 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

@ -0,0 +1,181 @@
<!DOCTYPE html>
<html>
<head>
<title>Run & Bike In Mountain</title>
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/navbar.css">
<link rel="stylesheet" href="style/index.css">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="images/boussole.png">
</head>
<body>
<header>
<nav>
<ul class="navbar" id="navbar">
<li><a id="actual" href="#">Accueil</a></li>
<li><a href="/html/traces.html">Nos Parcours</a></li>
<li><a href="html/images.html">Galerie</a></li>
<li><a href="html/tutos.html">Tutoriels</a></li>
<li><a href="https://www.visugpx.com/editgpx/" target="blank_">Tracer !</a></li>
<li><a href="html/contact.html">Contact</a></li>
<a class="close" href="#"><img src="images/open.png" id="close"></a>
</ul>
<a class="open" href="#navbar"><img src="images/open.png" id="open"></a>
<a href="../index.html"><img src="../images/boussole.png" id="boussole"></a>
</nav>
<nav class="navbar2">
<a id="actual" href="#"><img src="images/boussole.png" alt="Img Not Found :(">Accueil</a>
<a href="html/traces.html">Nos Parcours</a>
<a href="html/images.html">Galerie</a>
<a href="html/tutos.html">Tutoriels</a>
<a href="https://www.visugpx.com/editgpx/" target="blank_">Tracer !</a>
<a href="html/contact.html">Contact</a>
</nav>
</header>
<div class="content_1">
<p id="text_1">
<u>Avec Run & Bike In Mountain</u>,<br>
Créez Dès Maintenant Des Tracés GPS à L'infini<br>
Et Partez Explorer Les Sentiers.
</p>
<a href="https://www.visugpx.com/editgpx/">Tracer Maintenant </a>
</div>
<div class="content_2">
<section>
<p>
Découvrez Des Centaines De Traces,<br>
à Travers Les Montagnes et La Campagne,<br>
Crées Par La Communautée.
</p>
</section>
<aside >
<h4>Derniers Ajouts :</h4>
<a href="https://www.strava.com/activities/7451967179?share_sig=%5BC%407f0f0f31665426003&utm_medium=social&utm_source=android_share">Cote Fleurie : Deauville & Villers</a><br>
<a href="https://www.openrunner.com/route-details/15470696">Ronde Des Lacs D'Aydat</a><br>
<a href="https://www.alltrails.com/fr/randonnee/france/orne--2/foret-d-ecouves-a-velo">VTT En Forêt D'écouves</a><br>
<a href="https://www.strava.com/activities/7829305113">Trail Au Puy Du Pariou</a><br>
</aside>
</div>
<div class="content_3">
<a class="link_activitie" href="https://www.strava.com/activities/7752750074?share_sig=%5BC%404e0f29a1665421519&utm_medium=social&utm_source=android_share" target="_blank"><h1>Ronde Des Lacs D'Aydat</h1></a>
<a href="https://www.strava.com/athletes/37529010" target="_blank"><img id="pp" src="images/face.png" alt="image not found :("></a>
<!-- targer="blank" pour que le lien s'ouvre dans un nouvel onglet. -->
<b>
<p>Sortie De Baptiste,<br>
71.08km : 5:03:42h<br>
7:42am Dimanche 4 Septembre 2022,<br>
Aydat, Puy-de-Dôme</b>
</p>
</div>
<div class="content_entre">
<p>Le Tracé GPS C'est partir En Toute Liberté,<br>
Sans Avoir Peur de Se Perdre !</p>
</div>
<div class="content_entre_deux">
<a class="link_activitie" href="https://strava.app.link/1WLiBEnc1tb" target="_blank"><h1>Sortie à Villers Sur Mer</h1></a>
<a href="https://www.strava.com/athletes/37529010" target="_blank"><img id="pp" src="images/face.png" alt="image not found :("></a>
<!-- targer="blank" pour que le lien s'ouvre dans un nouvel onglet. -->
<p><b>Sortie De Baptiste,<br>
74.85km : 2:36:46h<br>
3:45pm Lundi 11 Juillet 2022,<br>
Pont-L'Evèque, Calvados</b>
</p>
</div>
<div class="content_entre">
<p>Que Faites Vous ? N'attendez Plus !<br>
Suivez des traces GPX dès Ajourd'hui !</p>
</div>
<div class="last_content">
<a class="link_activitie" href="https://www.strava.com/activities/6848074257?share_sig=[C%401f4be741665868778&" target="_blank"><h1>Gran Fondo : Abbayes En Baie De Seine</h1> </a>
<a href="https://www.strava.com/athletes/37529010" target="_blank"><img id="pp" src="images/face.png" alt="image not found :("></a>
<p><b>Sortie De Baptiste,<br>
200.2km : 6:24:41h<br>
6:45am Samedi 19 Mars 2022,<br>
Saint-Gatien, Calvados</b></b>
</p>
</div>
<footer>
<div class="content_4">
<section class="bottom_left">
<a href="#"><img src="images/boussole.png"></a>
<p>
Run & Bike In Mountain @2022 All Rights Reserved.<br>
See Here Our <a href="#">Terms And Conditions.</a><br>
Dudonné Baptiste BUT 1 2022-2023.<br>
Vous Souhaitez nous Contacter ? C'est <a href="../html/contact.html">ici.</a>
</p>
</section>
<section class="bottom_right">
<p>Follow Us On :</p>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">intragram</a>
</section>
</div>
</footer>
</body>
</html>

@ -0,0 +1,356 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nous Contacter</title>
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/navbar.css">
<link rel="stylesheet" href="../style/contact.css">
<link rel="icon" href="../images/boussole.png">
</head>
<body>
<header>
<nav>
<ul class="navbar" id="navbar">
<li><a href="../index.html">Accueil</a></li>
<li><a href="traces.html">Nos Parcours</a></li>
<li><a href="images.html">Galerie</a></li>
<li><a href="tutos.html">Tutoriels</a></li>
<li><a href="https://www.visugpx.com/editgpx/">Tracer !</a></li>
<li><a id="actual" href="../html/contact.html">Contact</a></li>
<a class="close" href="#"><img src="../images/open.png" id="close"></a>
</ul>
<a class="open" href="#navbar"><img src="../images/open.png" id="open"></a>
<a href="../index.html"><img src="../images/boussole.png" id="boussole"></a>
</nav>
<nav class="navbar2">
<a href="../index.html"><img src="../images/boussole.png" alt="Img Not Found :("></a>
<a href="traces.html">Nos Parcours</a>
<a href="images.html">Galerie</a>
<a href="tutos.html">Tutoriels</a>
<a href="https://www.visugpx.com/editgpx/" target="blank_">Tracer!</a>
<a id="actual" href="../html/contact.html">Contact</a>
</nav>
</header>
<div class="title_contact">
<h1>Nous Contacter :</h1>
<?php
$nom=$_POST['name'];
$prenom=$_POST['prenom'];
$mail=$_POST['mail'];
$msg=$_POST['msg'];
$raison=$POST['reason'];
if ($prenom ==NULL || $prenom ==""){
echo"<h1>Erreur ! Veuillez Remplir Le Champ <b>Prénom<b> Obligatoires</h1></div>";
echo'
<div class="form_contact">
<form action="../php/contact.php" method="post">
<label for="name">Nom* :</label>
<input type="text" name="name" id="name" required><br>
<label for="prenom">Prénom* : </label>
<input type="text" name="prenom" id="prenom" required><br>
<label for="tel">Téléphone :</label>
<input type="tel" name="tel" id="tel"><br>
<label for="mail">Adresse Mail* :</label>
<input type="email" name="mail" id="mail"><br>
<label for="reason">Raison Du Contact : </label>
<select name="reason" size="1">
<option>Besoin D\'aide
<option>Devenir Certifié
<option>Autre
</select><br>
<label for="horaire">Jour et Horaire :</label>
<input name="horaire" id="horaire" type="datetime-local"><br>
<div>
<legend>S\'agit t\'il de votre premier contact avec nous ?</legend>
<div>
<input type="radio" id="OuiFirst" name="OuiFirst" value="OuiFirst">
<label for="OuiFirst">Oui</label>
</div>
</div>
<br>
<label for="msg">Message* :</label><br>
<textarea id="msg" name="msg" placeholder="Ecrivez La Raison de Votre Contact." rows="5" cols="33" required>
</textarea><br>
<input type="reset" value="Effacer"/>
<input type="submit" value="Envoyer"/>
<p>Les Champs Contenant des étoiles* sont obligatoires !</p>
</form>
</div>
';//fin de l'echo
}
else if ($mail ==NULL|| $mail ==""){
echo"<h1>Erreur ! Veuillez Remplir Le Champ <b>mail<b> Obligatoires</h1></div>";
echo'
<div class="form_contact">
<form action="../php/contact.php" method="post">
<label for="name">Nom* :</label>
<input type="text" name="name" id="name" required><br>
<label for="prenom">Prénom* : </label>
<input type="text" name="prenom" id="prenom" required><br>
<label for="tel">Téléphone :</label>
<input type="tel" name="tel" id="tel"><br>
<label for="mail">Adresse Mail* :</label>
<input type="email" name="mail" id="mail"><br>
<label for="reason">Raison Du Contact : </label>
<select name="reason" size="1">
<option>Besoin D\'aide
<option>Devenir Certifié
<option>Autre
</select><br>
<label for="horaire">Jour et Horaire :</label>
<input name="horaire" id="horaire" type="datetime-local"><br>
<div>
<legend>S\'agit t\'il de votre premier contact avec nous ?</legend>
<div>
<input type="radio" id="OuiFirst" name="OuiFirst" value="OuiFirst">
<label for="OuiFirst">Oui</label>
</div>
</div>
<br>
<label for="msg">Message* :</label><br>
<textarea id="msg" name="msg" placeholder="Ecrivez La Raison de Votre Contact." rows="5" cols="33" required>
</textarea><br>
<input type="reset" value="Effacer"/>
<input type="submit" value="Envoyer"/>
<p>Les Champs Contenant des étoiles* sont obligatoires !</p>
</form>
</div>';//fin de l'echo
}
else if ($nom ==NULL || $nom==""){
echo"<h1>Erreur ! Veuillez Remplir Le Champ <b>nom<b> Obligatoires</h1></div>";
echo'
<div class="form_contact">
<div class="form_contact">
<form action="../php/contact.php" method="post">
<label for="name">Nom* :</label>
<input type="text" name="name" id="name" required><br>
<label for="prenom">Prénom* : </label>
<input type="text" name="prenom" id="prenom" required><br>
<label for="tel">Téléphone :</label>
<input type="tel" name="tel" id="tel"><br>
<label for="mail">Adresse Mail* :</label>
<input type="email" name="mail" id="mail"><br>
<label for="reason">Raison Du Contact : </label>
<select name="reason" size="1">
<option>Besoin D\'aide
<option>Devenir Certifié
<option>Autre
</select><br>
<label for="horaire">Jour et Horaire :</label>
<input name="horaire" id="horaire" type="datetime-local"><br>
<legend>S\'agit t-il de votre premier contact ?</legend>
<div>
<legend>S\'agit t\'il de votre premier contact avec nous ?</legend>
<div>
<input type="radio" id="OuiFirst" name="OuiFirst" value="OuiFirst">
<label for="OuiFirst">Oui</label>
</div>
</div>
<br>
<label for="message">Message* :</label><br>
<textarea id="message" name="message " rows="5" cols="33" required>
</textarea><br>
<input type="reset" value="Effacer"/>
<input type="submit" value="Envoyer"/>
<p>Les Champs Contenant des étoiles* sont obligatoires !</p>
</form>
</div>
';//fin de l'echo
}
else if ($msg==NULL || $msg==""){
echo"<h1>Erreur ! Veuillez Remplir Le Champ <b>Message<b> Obligatoires</h1></div>";
echo'
<div class="form_contact">
<form action="../php/contact.php" method="post">
<label for="name">Nom* :</label>
<input type="text" name="name" id="name" required><br>
<label for="prenom">Prénom* : </label>
<input type="text" name="prenom" id="prenom" required><br>
<label for="tel">Téléphone :</label>
<input type="tel" name="tel" id="tel"><br>
<label for="mail">Adresse Mail* :</label>
<input type="email" name="mail" id="mail"><br>
<label for="reason">Raison Du Contact : </label>
<select name="reason" size="1">
<option>Besoin D\'aide
<option>Devenir Certifié
<option>Autre
</select><br>
<label for="horaire">Jour et Horaire :</label>
<input name="horaire" id="horaire" type="datetime-local"><br>
<div>
<legend>S\'agit t\'il de votre premier contact avec nous ?</legend>
<div>
<input type="radio" id="OuiFirst" name="OuiFirst" value="OuiFirst">
<label for="OuiFirst">Oui</label>
</div>
</div>
<br>
<label for="msg">Message* :</label><br>
<textarea id="msg" name="msg" placeholder="Ecrivez La Raison de Votre Contact." rows="5" cols="33" required>
</textarea><br>
<input type="reset" value="Effacer"/>
<input type="submit" value="Envoyer"/>
<p>Les Champs Contenant des étoiles* sont obligatoires !</p>
</form>
</div>';//fin de l'echo
}
else{
echo('</div><h2 id="rep">Réponse Bien Transmise !<br>Nous Vous Recontacterons par mail !</h2>');
echo("<div class=\"reponse\"><h3>Récapitulatif :</h3>");
echo'<p> Nom : ',$nom,'<br>Prénom : ',$prenom,'</p>';
if ($raison!=NULL)
{
echo 'Raison : ',$raison;
}
echo'<p>Adresse : ',$mail,'<br>Votre Message : ',$msg,"</p></div>";
}//fin else
?>
<div class="bf_footer">
<h3>#Go Ride Now<br>
#Va Rouler</h3>
</div>
<footer>
<div class="content_4">
<section class="bottom_left">
<a href="../index.html"><img src="../images/boussole.png"></a>
<p>
Run & Bike In Mountain @2022 All Rights Reserved.<br>
See Here Our <a href="#">Terms And Conditions.</a><br>
Dudonné Baptiste BUT 1 2022-2023.<br>
Vous Souhaitez nous Contacter ? C'est <a href="../html/contact.html">ici.</a>
</p>
</section>
<section class="bottom_right">
<p>Follow Us On :</p>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">intragram</a>
</section>
</div>
</footer>
</body>
</html>

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../style/navbar.css">
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/inscription.css">
<title>Inscription</title>
<link rel="icon" href="../images/boussole.png">
</head>
<body>
<header>
<nav>
<ul class="navbar" id="navbar">
<li><a href="../index.html">Accueil</a></li>
<li><a href="traces.html">Nos Parcours</a></li>
<li><a href="images.html">Galerie</a></li>
<li><a href="tutos.html">Tutoriels</a></li>
<li><a href="https://www.visugpx.com/editgpx/">Tracer !</a></li>
<li><a id="actual" href="#">S'inscrire</a></li>
<a class="close" href="#"><img src="../images/open.png" id="close"></a>
</ul>
<a class="open" href="#navbar"><img src="../images/open.png" id="open"></a>
<a href="../index.html"><img src="../images/boussole.png" id="boussole"></a>
</nav>
<nav class="navbar2">
<a href="../index.html"><img src="../images/boussole.png" alt="Img Not Found :("></a>
<a href="traces.html">Nos Parcours</a>
<a href="images.html">Galerie</a>
<a href="tutos.html">Tutoriels</a>
<a href="https://www.visugpx.com/editgpx/" target="blank_">Tracer!</a>
<a id=actual href="inscription.html">S'inscrire !</a>
</nav>
</header>
<div class="response">
<?php
$titre = '<h3>Bienvenue Parmi Nous, ';
echo($titre);
echo($_POST['prenom']);
echo(' !</h3>');
$mail = $_POST['mail'];
echo("<p>Un Mail De Confirmation D'inscription à été envoyé à l'adresse : <i>$mail</i></p>");
echo("</div>");
?>
<div class="bf_footer">
<h3>#Go Ride Now<br>
#Va Rouler</h3>
</div>
<footer>
<div class="content_4">
<section class="bottom_left">
<a href="../index.html"><img src="../images/boussole.png"></a>
<p>
Run & Bike In Mountain @2022 All Rights Reserved.<br>
See Here Our <a href="#">Terms And Conditions.</a><br>
Dudonné Baptiste BUT 1 2022-2023.
</p>
</section>
<section class="bottom_right">
<p>Follow Us On :</p>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">intragram</a>
</section>
</div>
</footer>
</body>
</html>

@ -0,0 +1,116 @@
.title_contact{
width: 100%;
border-bottom: 10px solid coral;
background-image: url(../images/bg_contact.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.title_contact h1{
padding-top: 150px;
text-align: center;
font-family: Tommy;
padding-bottom: 150px;
color: black;
}
h2{
width: auto;
margin-top: 25px;
font-family: Tommy_Regular;
text-align: center;
}
.form_contact{
margin-top: 25px;
display: flex;
justify-content: center;
margin-bottom: 50px;
}
.form_contact form{
border: 4px solid coral;
border-radius: 5px;
padding: 20px;
}
.form_contact label,input,select, textarea, legend{
font-size: 18px;
justify-content: center;
align-items: center;
font-family: Tommy_Regular;
margin-bottom: 15px;
}
.form_contact option{
font-size: 15px;
}
.form_contact input{
border-radius: 5px ;
}
.form_contact textarea {
margin-top: 15px;
margin-bottom: 2px;
}
.form_contact #OuiFirst{
margin-left: 20px;
}
.form_contact p{
font-family: Tommy_Regular;
text-decoration: underline;
}
@media screen and (max-width:1000px){
.form_contact form{
width: 90%;
text-align: center;
}
}
#rep{
margin-top:50px ;
text-align: center;
font-family: Tommy_Regular;
margin-bottom: 25px;
font-size: 25px;
}
.reponse p,h3{
text-align: center;
font-family: Tommy_Regular;
}
.reponse{
margin-bottom: 50px;
}

@ -0,0 +1,68 @@
.before_images{
background-image: url(../images/bf_img.webp);
width: 100%;
height: 350px;
border-bottom: 10px solid coral;
}
.before_images >h2{
text-align: center;
color: #ffff;
font-family: Tommy;
padding-top: 130px;
}
.container_images{
display: block;
width: 100%;
border-top: 2px solid coral;
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin-bottom: 20px;
padding-bottom: 40px;
border-bottom: 10px solid coral ;
}
.a_images img{
justify-content: center;
width: 800px;
height: 500px;
margin-top: 40px;
margin-left: 50px;
margin-right: 50px;
border-radius: 10px;
}
/*
@media screen and(max-width:1800px) {
.a_images img{
width: 1200px;
height: 750px;
}
}
*/
.a_images :hover{
filter: brightness(0.8);
}
#vid{
justify-content: center;
width: 800px;
height: 500px;
text-align: center;
}

@ -0,0 +1,286 @@
.content_1{
background-image: url(../images/img1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
width: 100%;
height: 550px;
}
#text_1 {
font-family: Tommy;
padding-top: 100px;
text-align: center;
color: white;
font-size: 30px;
}
.content_1 a{
font-family: Tommy;
color: white;
width: auto;
display: flex;
text-decoration: none;
margin-top: 80px;
margin-left: 25%;
margin-right: 25%;
padding-top: 25px;
padding-bottom: 25px;
border-radius: 10px;
justify-content: center;
background-color: coral;
}
.content_1 a:hover{
color: #000000;
box-shadow: 10px 10px 30px rgba(33,33,33,.2);
}
.content_2{
display: flex;
flex-flow: row wrap;
width: 100%;
background-color: #ffffff;
border-bottom: 10px solid coral;
justify-content: center;
align-items: center;
}
.content_2 section{
width: 1500px;
}
.content_2 section>p{
padding-top: 150px;
padding-bottom: 150px;
text-align: center;
font-family: Tommy_Regular;
color: rgb(19, 18, 18);
font-size: 30px;
}
.content_2 aside{
width: 300px;
height: 200px;
margin-top: 20px;
border-radius: 10px;
border:5px solid coral;
background-color: rgb(96, 96, 105);
text-align: center;
right: 0px;
margin-bottom: 30px;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
align-items: center;
}
.content_2 aside>h4{
margin-top: 10px;
margin-bottom: 10px;
font-size: 20px;
font-family: Tommy_Regular;
padding-bottom: 5px;
border-bottom: 1px solid rgb(20, 20, 20);
}
.content_2 aside>a{
align-items: center;
font-family: Tommy_Regular;
text-decoration: none;
color: black;
text-decoration:underline;
}
.content_2 aside a:hover{
color: #ffffff;
text-decoration: underline;
}
@media screen and(max-width:1000px){
.content_2 aside{
width: 700px;
background-color: rgb(96, 96, 105);
text-align: center;
right: 0px;
}
.content_2 section{
width: 700px;
}
.content_2 section>p{
font-size: 30px;
}
}
.content_3{
background-image: url(../images/baptiste_ride.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 500px;
}
.content_3 a{
text-decoration: none;
}
.link_activitie a,h1{
font-family: Tommy;
text-align: center;
padding: 50px;
color: #ffffff;
text-align: center;
text-decoration: none;
}
.link_activitie h1:hover{
text-decoration: underline;
}
#pp{
width: 80px;
height: 80px;
border-radius: 40px;
margin: 20px;
border: 5px solid white;
}
.content_3 a > img:hover{
box-shadow: 2px 2px 30px rgba(33,33,33,.2);
}
.content_3 p{
display: flex;
flex-flow: column wrap;
color: #ffffff;
margin: 20px;
font-family: Tommy_Regular;
}
.content_entre{
border-top: 10px solid coral;
border-bottom: 10px solid coral;
width: 100%;
background-color: #ffffff;
}
.content_entre p{
font-family: Tommy_Regular;
padding-top: 150px;
padding-bottom: 150px;
text-align: center;
margin: 40px;
color: rgb(19, 18, 18);
font-size: 30px;
}
.content_entre_deux{
background-image: url(../images/baptiste_ride_2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 500px;
}
.content_entre_deux a{
text-decoration: none;
}
.content_entre_deux a > img:hover{
box-shadow: 2px 2px 30px rgba(33,33,33,.2);
}
.content_entre_deux p{
display: flex;
flex-flow: column wrap;
color: #ffffff;
margin: 20px;
font-family: Tommy_Regular;}
.last_content{
background-image: url(../images/baptiste_ride_3.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 500px;
}
.last_content a> img:hover{
box-shadow: 2px 2px 30px rgba(33,33,33,.2);
}
.last_content a{
text-decoration: none;
}
.last_content p{
display: flex;
flex-flow: column wrap;
color: #ffffff;
margin: 20px;
font-family: Tommy_Regular;}

@ -0,0 +1,118 @@
.Text_1{
width: 100%;
text-align: center;
background-image: url(../images/road.avif);
background-size: cover;
background-repeat: no-repeat;
background-position: top;
}
.Text_1 h1{
padding-top: 100px;
padding-bottom: 100px;
font-family: Tommy;
font-size: 30px;
border-bottom: 10px solid coral;
}
.form{
display: flex;
margin: 10%;
margin-top: 5%;
justify-content: center;
width: 80%;
background-color: rgb(92, 80, 80);
border-radius: 10px;
border-bottom: 10px solid coral;
border-top: 10px solid coral;
flex-flow: wrap;
}
.form_left {
width: 200px;
background-color: rgb(34, 37, 36);
margin-top: 25px;
margin-bottom: 25px;
margin: 25px;
border-radius: 5px;
}
.form_left label{
color: #ffff;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 2%;
display: flex;
}
.form_left input{
justify-content: center;
margin-top: 20px;
margin-bottom: 10px;
width: 180px;
margin-left: 2px;
margin-right: 2px ;
initial-value: "nom";
}
.form_left
.form_right{
width: 200px;
}
.response{
width: 80%;
margin-left:10% ;
margin-right:10% ;
min-height: 300px;
margin-top: 100px;
margin-bottom: 40px;
background-color: rgb(114, 119, 114);
border-radius: 10px;
border-top: 10px solid coral;
border-bottom: 10px solid coral;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
.response h3{
font-family: Tommy_Regular;
}
.response p{
display: block;
text-align: center;
margin: 10px;
font-family: Tommy_Regular;
}

@ -0,0 +1,200 @@
@media screen and (min-width:1001px){
.navbar2{
position: sticky;
/*background-color: rgb(88, 80, 80);*/
/*background-color: #e4dcdc; */
background-color:white;
top: 0;
width: 100%;
height: 2%;
display: flex;
justify-content: center;
border-bottom: 1px sold #3b3737;
box-shadow: 0 10px 50px rgba(92, 82, 82, 0.9);
z-index: 5000;
}
.navbar2 img{
display: flex;
width: 30px;
height: 30px;
}
.navbar2 a{
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
font-family: Tommy_Regular;
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 20px;
border-radius: 5px;
background-color: coral;
margin:5px;
padding: 5px;
}
.navbar2 img:hover{
border-radius: 15px;
background-color: #ffffff;
}
.navbar2 a:hover{
color: #ffffff;
text-decoration: underline ;
box-shadow: 20px 20px 30px rgba(33,33,33,.2);
}
#actual{
font-family: Tommy_Regular;
color: #000000;
border-bottom: 2px solid black;
}
}
.navbar{
display: none;
}
#open,#close{
display: none;
}
#boussole{
display: none;
}
@media screen and (max-width:1000px){
.navbar2{
display: none;
}
#boussole{
display: flex;
position: absolute;
right: 70px;
top: 20px;
padding: 5px;
background-color: white;
border-radius: 5px;
border: 1px solid coral;
width: 40px;
height: 40px;
}
#open{
display: block;
width: 40px;
height: 40px;
background-color: white;
padding: 5px;
border-radius: 5px;
border: 1px solid coral;
}
#close {
display: block;
width: 40px;
height: 40px;
transform: rotate(180deg);
padding: 5px;
border-radius: 5px;
border: 1px solid coral;
}
.open,.close{
border: none;
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
width: 36px;
height: 36px;
}
.navbar{
display: block;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 600px;
overflow: hidden;
background: rgb(255, 255, 255);
display: flex;
flex-flow:column nowrap ;
justify-content: space-evenly;
align-items: center;
transform: translateY(-100%);
transition: transform 0.2s ease;
border-bottom: 2px solid coral;
}
#actual{
color: coral;
}
.navbar:target{
transform: translateY(0);
}
li a{
display: block;
font-family: 'Open Sans',sans-serif;
font-weight: bold;
font-size: 1.2rem;
text-decoration: none;
border-bottom: 1px solid black;
padding-bottom: 0.5rem;
color: rgb(0, 0, 0);
}
li a:hover, li a:focus{
border-bottom: 1px solid coral;
}
.li a:visited{
color: white;
}
}

@ -0,0 +1,118 @@
*{
margin: 0;
padding: 0;
/* box-sizing: border-box;*/
}
body{background-color: rgb(255, 255, 255);}
@font-face {
font-family: Tommy;
src: url(../fonts/TOMMY.otf);
}
@font-face {
font-family: Tommy_Regular;
src: url(../fonts/TOMMYRegular.otf);
}
.content_4{
background-color: #ffffff;
width: 100%;
height: 170px;}
.bottom_left{
background-color: #ffffff;
width: 50%;
display: block;
float: left;
}
.bottom_left img{
margin: 20px;
margin-left: 30%;
margin-top: 45px;
float: left;
width: 30px;
height: 30px;
border-radius: 25px;
}
.bottom_left p{
text-align: center;
margin: 20px;
margin-top: 40px;
font-size: 12px;
text-justify: inter-word;
font-family: Tommy_Regular;
}
.bottom_right{
background-color: #ffffff;
width: 50%;
display: block;
float: right;
}
.bottom_right p{
margin: 20px;
margin-top: 40px;
margin-bottom: 10px;
text-align: center;
font-size: 12px;
text-decoration: underline;
font-family: Tommy_Regular;
}
.bottom_right a{
display: flex;
flex-flow: column wrap;
margin: 5px;
text-align: center;
font-size: 12px;
text-decoration: underline;
font-family: Tommy_Regular;
}
/* avant footer de page utilisé sur parcours et s'inscrire !*/
.bf_footer{
background-image: url(../images/bg_3.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
border-top: 10px solid coral;
border-bottom: 1px solid rgb(255, 255, 255);
}
.bf_footer h3{
text-align: center;
margin-top: 200px;
margin-bottom: 200px;
font-family: Tommy;
color: #ffffff;
font-size: 25px;
}

@ -0,0 +1,431 @@
#titre_p2{
text-align: center;
color: #000000;
font-family: Tommy_Regular;
font-size: 35px;
padding: 150px;
}
.before_container{
background-image: url(../images/bg_2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
width: 100%;
border-top: 10px solid coral;
border-bottom: 10px solid coral;
}
.before_container h3{
text-align: center;
font-size: 25px;
font-family: Tommy_Regular;
overflow-wrap: break-word;
color: #ffffff;
padding-top: 250px;
padding-bottom: 250px;
}
.container_parcours{
width: 100%;
display: flex;
flex-flow: row column-reverse;
}
.parcours{
width: 100%;
margin-top: 40px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin-bottom: 40px;
}
.parcours > section{
width: 550px;
margin: 2%;
border-radius: 10px;
height: auto;
display: flex;
flex-flow: column wrap;
justify-content: center;
text-align: center;
justify-items: center;
background-color: #000000;
border: 2px solid grey;
}
@media screen and (max-width:1200px){
.parcours > section{
width: 800px;
}
}
section > img{
margin-top: 15px;
margin-bottom: 15px;
width: 100%;
height: 70%;
}
section >h3{
font-family: Tommy_Regular;
color: #ffffff;
}
.parcours > h3{
font-family:Tommy_Regular;
color: #000000;
}
section > p{
font-family:Tommy_Regular;
}
.parcours section:hover{
box-shadow: 8px 5px rgba(33,33,33,.2);
filter: brightness(0.9);
z-index: 1;
}
section > a{
text-decoration: none;
font-family: Tommy_Regular;
color: #000000;
}
section > a:visited{
color: #000000;
}
.sect1{
text-decoration: none;
background-image:url(../images/Trace_1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 500px;
}
.sect1 h3{
color: #000000;
margin-top:0px;
padding: 25px;
background-color: coral;
border-radius:10px 10px 0 0;
margin-bottom: 400px;
}
.sect1 p{
margin-bottom:0px;
padding: 25px;
background-color: coral;
border-radius:0 0 10px 10px;
}
.sect2{
background-image:url(../images/Trace_2.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 500px;
}
.sect2 h3{
color: #000000;
margin-top:0px;
padding: 25px;
background-color: coral;
border-radius:10px 10px 0 0;
margin-bottom: 400px;
}
.sect2 p{
margin-bottom:0px;
padding: 25px;
background-color: coral;
border-radius:0 0 10px 10px;
}
/*
.sect2 a{
text-decoration: none;
}
.sect2 a:visited{
color: #000000;
}
*/
.sect3 {
background-image:url(../images/trace_3.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 500px;
}
.sect3 h3{
color: #000000;
margin-top:0px;
padding: 25px;
background-color: coral;
border-radius:10px 10px 0 0;
margin-bottom: 400px;
}
.sect3 p{
margin-bottom:0px;
padding: 25px;
background-color: coral;
border-radius:0 0 10px 10px;
}
.sect4 {
background-image:url(../images/baptiste_ride.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 500px;
}
.sect4 h3{
color: #000000;
margin-top:0px;
padding: 25px;
background-color: coral;
border-radius:10px 10px 0 0;
margin-bottom: 400px;
}
.sect4 p{
margin-bottom:0px;
padding: 25px;
background-color: coral;
border-radius:0 0 10px 10px;
}
.sect5 {
background-image:url(../images/baptiste_ride_2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 500px;
}
.sect5 h3{
color: #000000;
margin-top:0px;
padding: 25px;
background-color: coral;
border-radius:10px 10px 0 0;
margin-bottom: 400px;
}
.sect5 p{
margin-bottom:0px;
padding: 25px;
background-color: coral;
border-radius:0 0 10px 10px;
}
.sect6 {
background-image:url(../images/baptiste_ride_4.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 500px;
}
.sect6 h3{
color: #000000;
margin-top:0px;
padding: 25px;
background-color: coral;
border-radius:10px 10px 0 0;
margin-bottom: 400px;
}
.sect6 p{
margin-bottom:0px;
padding: 15px;
background-color: coral;
border-radius:0 0 10px 10px;
}
.sect7 {
background-image:url(../images/baptiste_ride_3.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
width: 100%;
height: 500px;
}
.sect7 h3{
color: #000000;
margin-top:0px;
padding: 25px;
background-color: coral;
border-radius:10px 10px 0 0;
margin-bottom: 400px;
}
.sect7 p{
margin-bottom:0px;
padding: 25px;
background-color: coral;
border-radius:0 0 10px 10px;
}
.sect8 {
background-image:url(../images/trace_6.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center ;
width: 100%;
height: 500px;
}
.sect8 h3{
color: #000000;
margin-top:0px;
padding: 25px;
background-color: coral;
border-radius:10px 10px 0 0;
margin-bottom: 400px;
}
.sect8 p{
margin-bottom:0px;
padding: 25px;
background-color: coral;
border-radius:0 0 10px 10px;
}
.after_section{
border-top: 10px solid coral;
width: 100%;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: center;
}
.after_section h1{
font-family: Tommy_Regular;
margin-top: 40px;
margin-bottom:40px;
border-bottom : 2px solid coral;
text-align: center;
}
.after_section p{
font-family: Tommy_Regular;
text-align: center;
font-size: 25px;
margin-bottom:40px;
border-bottom : 2px solid coral;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 40px;
}
.after_section table{
margin-bottom: 40px;
}
.after_section table,th,tr,td{
border:1px solid black;
width: 500px;
text-align: center;
font-size: 20px;
font-family: Tommy_Regular;
border-collapse: collapse;
}
.after_section th{
background-color: coral;
}
.after_section img{
width: 15px;
height: 15px;
}
.after_section tr{
background-color: rgb(172, 165, 165);
}

@ -0,0 +1,75 @@
.Title_div{
background-image: url(../images/background_road.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
text-align: center;
}
.Title_div h1{
padding-top: 150px;
padding-bottom: 150px;
font-size: 30px;
font-family: Tommy;
border-bottom: 10px solid coral;
color: white;
}
.content_vid{
padding-bottom: 50px;
width: 100%;
display: flex;
flex-flow:column nowrap ;
justify-content: center;
align-items: center;
}
.a_images :hover{
filter: brightness(0.8);
}
.content_vid h1{
padding-top :50px ;
font-family: Tommy_Regular;
text-decoration: underline;
margin-bottom: 50px;
border-bottom:10px solid coral ;
text-align: center;
}
video{
width: 800px;
height: 500px;
}
@media screen and (max-width:1000px)
{
video{
width: 600px;
height: 450;
}
}
@media screen and (max-width:700px)
{
video{
width: 400px;
height: 300;
}
}
Loading…
Cancel
Save