diff --git a/pagecontacte.html b/pagecontacte.html new file mode 100644 index 0000000..55c3288 --- /dev/null +++ b/pagecontacte.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset="UTF-8"> + <title>Page de contact</title> + <link rel="icon" type="image/png" href="logo-ozcom.png"> +<link rel="stylesheet" href="stylespgct.css"> +<div class="burger-menu-container"> + <div class="burger-menu-button"> + <div class="burger-menu-icon"></div> + </div> + <div class="burger-menu"> + <nav> + <ul> + <li><link rel="icon" type="image/png" href="logo-ozcom.png"></li> + <li><a href="pageweb.html">Accueil</a></li> + <li><a href="Apropos">À propos</a></li> + <li><a href="notrehistoire.html">Histoire</a></li> + <li><a href="pagecontacte.html">Contact</a></li> + <li><a href="pagefaq.html">FAQ</a></li> + </ul> +</nav> + </div> + </div> + </head> +<body> + <h1>Formulaire de contact</h1> + <form action="ozcom@ladressemail.com" method="post"> + <label for="nom">Nom :</label> + <input type="text" id="nom" name="nom"><br> + <label for="email">Email :</label> + <input type="email" id="email" name="email"><br> + <label for="sujet">Sujet :</label> + <input type="text" id="sujet" name="sujet"><br> + <label for="message">Message :</label> + <textarea id="message" name="message"></textarea><br> + <input type="submit" value="Envoyer"> + </form> +</body> +</html> \ No newline at end of file diff --git a/pagefaq.css b/pagefaq.css new file mode 100644 index 0000000..85cf1db --- /dev/null +++ b/pagefaq.css @@ -0,0 +1,117 @@ +body{display: block; + flex-wrap: wrap; + align-items: center; + justify-content: center; + text-align: center; + margin: 0; +} +} +@media (min-width: 800px) { + body {/* styles pour les écrans de largeur supérieure à 800px */ + font-size: 18px; + } +} +@media (max-width: 600px) { + body {/* styles pour les écrans de largeur inférieure à 600px */ + font-size: 14px; + } +} + +.burger-menu-button { + cursor: pointer; +} + +.burger-menu { + display: none; /* cacher le menu burger par défaut */ +} + + +.burger-menu-button:hover .burger-menu { + display: block; /* Afficher le menu burger lorsque l'utilisateur clique sur le bouton */ +} +nav { + background-color: #f00202; /* Couleur de fond du menu */ + display: flex; /* Afficher les éléments du menu côte à côte */ + justify-content: space-between; /* Aligner les éléments du menu sur les deux côtés de la nav */ +} + +nav ul { + list-style: none; /* Enlever les puces des éléments de la liste */ + margin: 5px; /* Enlever les marges */ + padding: 5px; /* Enlever les espacements */ + display: flex; /* Afficher les éléments de la liste côte à côte */ + +} + +nav li { + margin: 10px 10px; /* Ajouter une marge à gauche et à droite de chaque élément */ + +} + +nav a { + color: #fefefe; /* Couleur de text pour les liens */ + text-decoration: none; /* Enlever la surbrillance des liens */ + padding: 25px 100px; /* Ajouter un espacement intérieur aux liens */ + transition: background-color 0.2s ease-in; /* Ajouter une transition pour la couleur de fond */ +} + +nav a:hover { /* Appliquer les styles à utiliser lorsque l'utilisateur survole un lien */ + background-color: #a30303; /* Couleur de fond lorsque l'utilisateur survole un lien */ +} + +.faq-section { + width: 100%; + margin: 20px 0; +} + +.faq-question { + font-size: 1.2em; + font-weight: 600; + margin-bottom: 10px; +} + +.faq-answer { + display: none; + color: #444; + font-size: 1em; + text-overflow: clip; + white-space: normal; + overflow: visible; +} + +.faq-section input[type=checkbox]:checked ~ .faq-answer { + display: block; +} +footer { + background-color: #333; + color: #fefefe; + padding: 20px; + text-align: center; + display: flex; + justify-content: space-between; + bottom: 0; + +} +footer > * { + margin: 0 10px; /* ajoute un espacement de 10px entre les éléments */ +} +.circle { + border-radius: 12%; /* met en forme le div en cercle */ + width: 50px; /* largeur du cercle */ + height: 50px; /* hauteur du cercle */ + overflow: hidden; /* masque tout débordement */ + text-align: center; /* centre l'image horizontalement */ + line-height: 75px; /* centre l'image verticalement */ + display: flex; + justify-content: center; +} + +.circle img { + max-width: 100%;/* redimensionne l'image pour qu'elle s'adapte au conteneur */ +} +a[href*="Mentions_légales"] { + display: inline-block; + text-align: center; + color: #fefefe; +} + diff --git a/pagefaq.html b/pagefaq.html new file mode 100644 index 0000000..59b4f13 --- /dev/null +++ b/pagefaq.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset="UTF-8"> + <title>Page FAQ</title> + <link rel="icon" type="image/png" href="logo-ozcom.png"> + <link rel="stylesheet" type="text/css" href="pagefaq.css"> +<div class="burger-menu-container"> + <div class="burger-menu-button"> + <div class="burger-menu-icon"></div> + </div> + <div class="burger-menu"> + <nav> + <ul> + <li><link rel="icon" type="image/png" href="logo-ozcom.png"></li> + <li><a href="pageweb.html">Accueil</a></li> + <li><a href="Apropos">À propos</a></li> + <li><a href="notrehistoire.html">Histoire</a></li> + <li><a href="pagecontacte.html">Contact</a></li> + <li><a href="pagefaq.html">FAQ</a></li> + </ul> +</nav> + </div> + </div> + </head> + <body> + <h1>Page FAQ</h1> + <main> + <section class="faq-section"> + <input type="checkbox" id="question1"> + <label for="question1" class="faq-question">Ya t'il des piwis pour les plus jeunes ? </label> + <p class="faq-answer">Non, nous avons une limite d'âge car cela reste un sport dangereux </p> + </section> + <section class="faq-section"> + <input type="checkbox" id="question2"> + <label for="question2" class="faq-question">Peut on louer sur plusieurs jours ? </label> + <p class="faq-answer">Nous avons effectivement plusieurs formules qui permettent ce genre de location. </p> + </section> + <section class="faq-section"> + <input type="checkbox" id="question3"> + <label for="question3" class="faq-question"> Es ce que le terrain peut changer ? </label> + <p class="faq-answer">Sur demande de client la piste peut effectivement changer une fois tout les deux ans. </p> + </section> + <section class="faq-section"> + <input type="checkbox" id="question4"> + <label for="question4" class="faq-question"> On peut manger sur place ? </label> + <p class="faq-answer">Des tables sont mis à disposition, mais nous ne faisons pas de restauration. Nous avons cependant un bar pour vous rafraîchir la mémoire après une chute </p> + </section> + <section class="faq-section"> + <input type="checkbox" id="question5"> + <label for="question5" class="faq-question">Y'a t'il une caution si jamais on abîme le véhicule ? </label> + <p class="faq-answer">Bien sur que oui, une fois loué le véhicule est sous votre responsabilité. C'est pas le resto du cœur ici. </p> + </section> + </main> + <footer> + <div class="circle"> + <a href="https://www.tiktok.com/"><img src="tiktok-logo.png" alt="tiktok"></a> + </div> + <div class="circle"> + <a href="https://twitter.com/"><img src="twitter-logo.png" alt="Twitter"></a> + </div> + <div class="circle"> + <a href="https://www.instagram.com/"><img src="instagram-logo.png" alt="Instagram"></a> + </div> + <div class="circle"> + <a href="https://www.youtube.com/"><img src="youtube-logo.png" alt="YouTube"></a> + </div> + <a href="https://fr.wikipedia.org/wiki/Mentions_l%C3%A9gales"> Mention l'égale</a> + </footer> +</body> +</html> diff --git a/script.js b/script.js new file mode 100644 index 0000000..7de2aaf --- /dev/null +++ b/script.js @@ -0,0 +1,14 @@ +var content = document.getElementById("content"); +var newText = document.getElementById("new-text"); + +window.addEventListener("scroll", function() { + var scrollTop = window.pageYOffset || document.documentElement.scrollTop; + if (scrollTop > 0) { + requestAnimationFrame(function() { + var opacity = Math.min(1, scrollTop / 500); + content.style.backgroundColor = "rgba(255, 255, 255, " + opacity + ")"; + newText.style.opacity = opacity; + content.style.top = -scrollTop + "px"; + }); + } +}); diff --git a/scriptbtnhdp.js b/scriptbtnhdp.js new file mode 100644 index 0000000..4129c78 --- /dev/null +++ b/scriptbtnhdp.js @@ -0,0 +1,14 @@ +window.onscroll = function() {scrollFunction()}; + +function scrollFunction() { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + document.getElementById("topBtn").style.display = "block"; + } else { + document.getElementById("topBtn").style.display = "none"; + } +} +function topFunction() { + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; +} +