@ -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>
|
After Width: | Height: | Size: 2.1 MiB |
After Width: | Height: | Size: 213 KiB |
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 417 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 1.0 MiB |
After Width: | Height: | Size: 498 KiB |
After Width: | Height: | Size: 460 KiB |
After Width: | Height: | Size: 256 KiB |
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 47 KiB |
After Width: | Height: | Size: 338 KiB |
After Width: | Height: | Size: 1.1 MiB |
After Width: | Height: | Size: 1018 KiB |
After Width: | Height: | Size: 56 KiB |
After Width: | Height: | Size: 39 KiB |
After Width: | Height: | Size: 546 KiB |
After Width: | Height: | Size: 313 KiB |
After Width: | Height: | Size: 1.3 MiB |
After Width: | Height: | Size: 208 B |
After Width: | Height: | Size: 2.2 MiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 5.7 KiB |
After Width: | Height: | Size: 415 KiB |
After Width: | Height: | Size: 1.1 MiB |
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;
|
||||
}
|
||||
}
|