diff --git a/fonts/TOMMY.otf b/fonts/TOMMY.otf new file mode 100644 index 0000000..43564f7 Binary files /dev/null and b/fonts/TOMMY.otf differ diff --git a/fonts/TOMMYRegular.otf b/fonts/TOMMYRegular.otf new file mode 100644 index 0000000..dca598b Binary files /dev/null and b/fonts/TOMMYRegular.otf differ diff --git a/html/contact.html b/html/contact.html new file mode 100644 index 0000000..33f0a6b --- /dev/null +++ b/html/contact.html @@ -0,0 +1,145 @@ + + + + + + Nous Contacter + + + + + + + +
+ + + +
+ +
+ + + +

Nous Contacter :

+
+ +

Indiquez Nous Vos Coordonnées et le motif de votre contact :

+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ + S'agit t'il de votre premier contact avec nous ? + +
+ + +
+ +
+
+ +
+
+ + + + + +

Les Champs Contenant des étoiles* sont obligatoires !

+
+ +
+ +
+

#Go Ride Now
+ #Va Rouler

+
+ + + + + + + + + + + \ No newline at end of file diff --git a/html/images.html b/html/images.html new file mode 100644 index 0000000..b433414 --- /dev/null +++ b/html/images.html @@ -0,0 +1,109 @@ + + + + + + + + + Galerie D'images + + +
+ + + + +
+ + +
+

Les Meilleurs Clichés de Nos Utilisateurs :

+ +
+ + + +
+ + + + + + + + + + + + + + + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/html/inscription.html b/html/inscription.html new file mode 100644 index 0000000..efc8082 --- /dev/null +++ b/html/inscription.html @@ -0,0 +1,111 @@ + + + + + + + + Inscription + + + + +
+ + + + +
+ + + +
+

Inscrivez Vous à Notre NewsLetter !

+
+ +
+ +
+
+ +
+ + +
+ + +
+ + +
+ + +
+
+ +
+ + + +
+ +
+
+ +
+

#Go Ride Now
+ #Va Rouler

+
+ + + + \ No newline at end of file diff --git a/html/traces.html b/html/traces.html new file mode 100644 index 0000000..ee82a5a --- /dev/null +++ b/html/traces.html @@ -0,0 +1,205 @@ + + + + + + + + Actus Sportives + + + +
+ + +
+ +

Découvrez Nos Circuits !

+
+

Les Parcours Les Plus Populaires Du Moment :

+ +
+ +
+ +
+
+ +

Circuit N°754 Lisieux

+

Distance : 35,6 Km ; D+ : 954m ; Difficultée : 2/5

 +
+ +
+ +

Col Lebreau Par Vière

+ +

Type : VTT ; Distance : 29,2 Km ; D+ : 1113m ; Difficultée : 4/5

+ + +
+
+ +

Les Cols Légendaires autour de Bormio

+

Type : Road-Trip ; Distance : 537 Km ; D+ : 14830m Difficultée : 5/5

 +
+ +
+ +

Ronde Des Lacs D'aydat

+ +

Type : VTT ; Distance : 71,08 Km ; D+ : 2029m ; Difficultée : 4/5

+ + +
+
+ +

Côte Fleurie : Deaville & Villers-Sur Mer

+ +

Type : Route ; Distance : 74,85 Km ; D+ : 412m : Difficultée : 1/5

+ +
+ +
+ + +

Trail Au Puy De Pariou

+

Type : Randonnée / Trail ; Distance : 11.95km ; D+ : 356m ; Difficultée : 3/5

+ +
+ +
+ +

Gran Fondo Des Abbayes En Baie De Seine

+ +

Type : Route ; Distance : 200.2 Km ; D+ : 1652m ; Difficultée : 4/5

+ +
+ +
+ + +

VTT en Forêt D'Ecouves

+ +

Type : VTT ; Distance : 30.6 ; D+ : 796m ; Difficultée 2/5

+ + +
+ +
+ +

Compatibilités Appareils & Formats

+ +

Il existe plusieurs types de fichiers GPS ! Nous Vous Conseillons d'utiliser le format gpx qui est + reconnu par tous les appareils, voici pour les marques principales d'appareils leurs compatibilité avec + les différents formats existants. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Marques :.GPX.TCX.FIT.CSV
Garminyesno
Wahoo
Brytonyesnoyesno
Polaryesno
HammerHead
+
+ +
+ +
+
+

#Go Ride Now
+ #Va Rouler

+
+ + + + + + + \ No newline at end of file diff --git a/html/tutos.html b/html/tutos.html new file mode 100644 index 0000000..afba681 --- /dev/null +++ b/html/tutos.html @@ -0,0 +1,106 @@ + + + + + Tutoriels ! + + + + + + + + +
+ + + + +
+ +

Tutoriels !
Apprenez à Créer Un Circuit GPX !

+ +
+ +
+ + +

Créer Un Circuit GPX sur VisuGPX

+ + + +

Créer Un Circuit GPX sur Strava

+ + + + + +
+ +
+

#Go Ride Now
+ #Va Rouler

+
+ + + + + \ No newline at end of file diff --git a/images/Gallery_1.jpg b/images/Gallery_1.jpg new file mode 100644 index 0000000..090d787 Binary files /dev/null and b/images/Gallery_1.jpg differ diff --git a/images/Trace_1.png b/images/Trace_1.png new file mode 100644 index 0000000..1ab7a98 Binary files /dev/null and b/images/Trace_1.png differ diff --git a/images/Trace_2.png b/images/Trace_2.png new file mode 100644 index 0000000..55ee01f Binary files /dev/null and b/images/Trace_2.png differ diff --git a/images/Trace_3.webp b/images/Trace_3.webp new file mode 100644 index 0000000..2572c29 Binary files /dev/null and b/images/Trace_3.webp differ diff --git a/images/Trace_4.webp b/images/Trace_4.webp new file mode 100644 index 0000000..549f99b Binary files /dev/null and b/images/Trace_4.webp differ diff --git a/images/background_road.jpg b/images/background_road.jpg new file mode 100644 index 0000000..e9edfea Binary files /dev/null and b/images/background_road.jpg differ diff --git a/images/baptiste_ride.jpg b/images/baptiste_ride.jpg new file mode 100644 index 0000000..b1a12c0 Binary files /dev/null and b/images/baptiste_ride.jpg differ diff --git a/images/baptiste_ride_2.jpg b/images/baptiste_ride_2.jpg new file mode 100644 index 0000000..04f5257 Binary files /dev/null and b/images/baptiste_ride_2.jpg differ diff --git a/images/baptiste_ride_3.jpg b/images/baptiste_ride_3.jpg new file mode 100644 index 0000000..e103245 Binary files /dev/null and b/images/baptiste_ride_3.jpg differ diff --git a/images/baptiste_ride_4.jpg b/images/baptiste_ride_4.jpg new file mode 100644 index 0000000..59a0f0c Binary files /dev/null and b/images/baptiste_ride_4.jpg differ diff --git a/images/bf_img.webp b/images/bf_img.webp new file mode 100644 index 0000000..f7fdd6d Binary files /dev/null and b/images/bf_img.webp differ diff --git a/images/bg_2.jpg b/images/bg_2.jpg new file mode 100644 index 0000000..a8141bc Binary files /dev/null and b/images/bg_2.jpg differ diff --git a/images/bg_3.jpg b/images/bg_3.jpg new file mode 100644 index 0000000..e9368c1 Binary files /dev/null and b/images/bg_3.jpg differ diff --git a/images/bg_contact.jpg b/images/bg_contact.jpg new file mode 100644 index 0000000..b711b02 Binary files /dev/null and b/images/bg_contact.jpg differ diff --git a/images/boussole.png b/images/boussole.png new file mode 100644 index 0000000..56bff6e Binary files /dev/null and b/images/boussole.png differ diff --git a/images/face.png b/images/face.png new file mode 100644 index 0000000..12d2aec Binary files /dev/null and b/images/face.png differ diff --git a/images/img1.jpg b/images/img1.jpg new file mode 100644 index 0000000..14d8f11 Binary files /dev/null and b/images/img1.jpg differ diff --git a/images/img_4.jpg b/images/img_4.jpg new file mode 100644 index 0000000..5d0c498 Binary files /dev/null and b/images/img_4.jpg differ diff --git a/images/img_5.jpeg b/images/img_5.jpeg new file mode 100644 index 0000000..237c407 Binary files /dev/null and b/images/img_5.jpeg differ diff --git a/images/menu.svg b/images/menu.svg new file mode 100644 index 0000000..081da6e --- /dev/null +++ b/images/menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/night_mountain.jpg b/images/night_mountain.jpg new file mode 100644 index 0000000..f696d8a Binary files /dev/null and b/images/night_mountain.jpg differ diff --git a/images/no.webp b/images/no.webp new file mode 100644 index 0000000..93e58fd Binary files /dev/null and b/images/no.webp differ diff --git a/images/open.png b/images/open.png new file mode 100644 index 0000000..0a566cc Binary files /dev/null and b/images/open.png differ diff --git a/images/road.avif b/images/road.avif new file mode 100644 index 0000000..41c0f43 Binary files /dev/null and b/images/road.avif differ diff --git a/images/trace_3.jpeg b/images/trace_3.jpeg new file mode 100644 index 0000000..7584d92 Binary files /dev/null and b/images/trace_3.jpeg differ diff --git a/images/trace_6.jpg b/images/trace_6.jpg new file mode 100644 index 0000000..89c82e8 Binary files /dev/null and b/images/trace_6.jpg differ diff --git a/images/video.mp4 b/images/video.mp4 new file mode 100644 index 0000000..6f5ff54 Binary files /dev/null and b/images/video.mp4 differ diff --git a/images/video_2.mp4 b/images/video_2.mp4 new file mode 100644 index 0000000..d690bad Binary files /dev/null and b/images/video_2.mp4 differ diff --git a/images/yes.png b/images/yes.png new file mode 100644 index 0000000..1e77883 Binary files /dev/null and b/images/yes.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..22388eb --- /dev/null +++ b/index.html @@ -0,0 +1,181 @@ + + + + + Run & Bike In Mountain + + + + + + + + + +
+ + +
+ + + + + + + +
+

+ Avec Run & Bike In Mountain,
+ Créez Dès Maintenant Des Tracés GPS à L'infini
+ Et Partez Explorer Les Sentiers. +

+ + Tracer Maintenant + + +
+ +
+ +
+

+ Découvrez Des Centaines De Traces,
+ à Travers Les Montagnes et La Campagne,
+ Crées Par La Communautée. +

+
+ + +
+
+

Ronde Des Lacs D'Aydat

 + + image not found :( + + +

Sortie De Baptiste,
+ 71.08km : 5:03:42h
+ 7:42am Dimanche 4 Septembre 2022,
+ Aydat, Puy-de-Dôme +

+
+
+ +

Le Tracé GPS C'est partir En Toute Liberté,
+ Sans Avoir Peur de Se Perdre !

+ + +
+ +
+ +

Sortie à Villers Sur Mer

 + + + image not found :( + + +

Sortie De Baptiste,
+ 74.85km : 2:36:46h
+ 3:45pm Lundi 11 Juillet 2022,
+ Pont-L'Evèque, Calvados +

+ + + + + + +
+
+ +

Que Faites Vous ? N'attendez Plus !
+ Suivez des traces GPX dès Ajourd'hui !

+ + +
+ +
+ +

Gran Fondo : Abbayes En Baie De Seine

 + image not found :( +

Sortie De Baptiste,
+ 200.2km : 6:24:41h
+ 6:45am Samedi 19 Mars 2022,
+ Saint-Gatien, Calvados +

+ +
+ + + + + \ No newline at end of file diff --git a/php/contact.php b/php/contact.php new file mode 100644 index 0000000..69fdd87 --- /dev/null +++ b/php/contact.php @@ -0,0 +1,356 @@ + + + + + + Nous Contacter + + + + + + + +
+ + + +
+ + +
+ + + +

Nous Contacter :

+ + + +Erreur ! Veuillez Remplir Le Champ Prénom Obligatoires
"; + + echo' +
+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ + S\'agit t\'il de votre premier contact avec nous ? + +
+ + +
+ +
+
+ +
+
+ + + + + +

Les Champs Contenant des étoiles* sont obligatoires !

+
+
+ + + ';//fin de l'echo + } + + else if ($mail ==NULL|| $mail ==""){ + echo"

Erreur ! Veuillez Remplir Le Champ mail Obligatoires

"; + + echo' +
+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ + S\'agit t\'il de votre premier contact avec nous ? + +
+ + +
+ +
+
+ +
+
+ + + + + +

Les Champs Contenant des étoiles* sont obligatoires !

+
+
';//fin de l'echo + } + + + else if ($nom ==NULL || $nom==""){ + echo"

Erreur ! Veuillez Remplir Le Champ nom Obligatoires

"; + + echo' + +
+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + S\'agit t-il de votre premier contact ? + +
+ + S\'agit t\'il de votre premier contact avec nous ? + +
+ + +
+ + + +
+
+ +
+
+ + + + + +

Les Champs Contenant des étoiles* sont obligatoires !

+
+ +
+ + + ';//fin de l'echo + } + + else if ($msg==NULL || $msg==""){ + echo"

Erreur ! Veuillez Remplir Le Champ Message Obligatoires

"; + + + echo' +
+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ + S\'agit t\'il de votre premier contact avec nous ? + +
+ + +
+ +
+
+ +
+
+ + + + + +

Les Champs Contenant des étoiles* sont obligatoires !

+
+
';//fin de l'echo + } + else{ + + echo('

Réponse Bien Transmise !
Nous Vous Recontacterons par mail !

'); + + echo("

Récapitulatif :

"); + + echo'

Nom : ',$nom,'
Prénom : ',$prenom,'

'; + if ($raison!=NULL) + { + echo 'Raison : ',$raison; + } + + echo'

Adresse : ',$mail,'
Votre Message : ',$msg,"

"; + + }//fin else +?> + +
+

#Go Ride Now
+ #Va Rouler

+
+ +
+
+ +
+ + +

+ Run & Bike In Mountain @2022 All Rights Reserved.
+ See Here Our Terms And Conditions.
+ Dudonné Baptiste BUT 1 2022-2023.
+ Vous Souhaitez nous Contacter ? C'est ici. +

+ + +
+ +
+ +

Follow Us On :

+ + Facebook + Twitter + intragram + + +
+
+
+ + + + + + + + + + + + diff --git a/php/index.php b/php/index.php new file mode 100644 index 0000000..28c09d8 --- /dev/null +++ b/php/index.php @@ -0,0 +1,97 @@ + + + + + + + + Inscription + + + + + +
+ + + + +
+ +
+ Bienvenue Parmi Nous, '; + echo($titre); + echo($_POST['prenom']); + echo(' !'); + $mail = $_POST['mail']; + echo("

Un Mail De Confirmation D'inscription à été envoyé à l'adresse : $mail

"); + echo("
"); + + + + + ?> + +
+

#Go Ride Now
+ #Va Rouler

+
+ + + + + + + + diff --git a/style/contact.css b/style/contact.css new file mode 100644 index 0000000..ed29cee --- /dev/null +++ b/style/contact.css @@ -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; +} \ No newline at end of file diff --git a/style/images.css b/style/images.css new file mode 100644 index 0000000..0d7751d --- /dev/null +++ b/style/images.css @@ -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; +} \ No newline at end of file diff --git a/style/index.css b/style/index.css new file mode 100644 index 0000000..e11ba1a --- /dev/null +++ b/style/index.css @@ -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;} + + + diff --git a/style/inscription.css b/style/inscription.css new file mode 100644 index 0000000..a333065 --- /dev/null +++ b/style/inscription.css @@ -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; +} + + diff --git a/style/navbar.css b/style/navbar.css new file mode 100644 index 0000000..f28434b --- /dev/null +++ b/style/navbar.css @@ -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; +} +} + diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..c01ab2b --- /dev/null +++ b/style/style.css @@ -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; +} + diff --git a/style/traces.css b/style/traces.css new file mode 100644 index 0000000..e475b43 --- /dev/null +++ b/style/traces.css @@ -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); +} diff --git a/style/tutos.css b/style/tutos.css new file mode 100644 index 0000000..ccd2630 --- /dev/null +++ b/style/tutos.css @@ -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; + } +} \ No newline at end of file