diff --git a/style.css b/style.css new file mode 100644 index 0000000..67569cb --- /dev/null +++ b/style.css @@ -0,0 +1,116 @@ +/* Conteneur principal pour éviter les styles flex globaux */ +.main-container { + width: 100%; + max-width: 900px; + margin: 0 auto; + padding: 20px; +} + +/* Bouton retour aligné à droite */ +.btn-retour { + float: right; + margin: 10px; /* Aligne le contenu à droite */ + margin-bottom: 20px; +} + +.btn-retour a img { + display: inline-block; /* Assure que l'image reste au format bouton */ +} +body { + font-family: Georgia, "Times New Roman", Times, serif; + font-size: 11pt; + background-color: #f4f4f4; + color: #333; + background-image: url(../quest-rando/images/ciel-overlay2.jpg); + background-attachment: fixed; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +h1 { + color: #090090; +} +h2 { + color: #090090; +} +h3 { + color: #090090; +} + +form { + background: #fff; + padding: 2% 3%; + margin-bottom: 20px; + box-shadow: 0 2px 4px grey; + border-radius: 5px; + max-width: 800px; + width: 100%; +} + +input[type="text"], +textarea { + font-size: 11pt; + width: 100%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 4px; +} + +button { + background: #3498db; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background: #2980b9; +} + +.annonce { + background: #fff; + padding: 10px; + margin-bottom: 10px; + box-shadow: 0 2px 4px grey; + border-radius: 5px; + max-width: 900px; + width: 100%; +} + +.annonce small { + color: #888; +} +/* Bouton haut page */ +/* Effet fluide */ + +/* Style du bouton */ +#scrollToTop { + position: fixed; + bottom: 20px; + right: 150px; /*Position*/ + padding: 10px 15px; + font-size: 16px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + opacity: 0; + visibility: hidden; + transition: + opacity 0.3s, + visibility 0.3s; +} + +/* Afficher le bouton lorsqu'on est en bas de page */ +#scrollToTop.show { + opacity: 1; + visibility: visible; +}