diff --git a/index.html b/index.html index ff7d8be2ec..7fb226fa2f 100644 --- a/index.html +++ b/index.html @@ -5,110 +5,115 @@ Reservation - + + + +
-
- - Accueil - Détails de l'évènement - À propos - Contact - Évènements passés - - - -
+ logo +
+
+ + Détails de l'évènement + À propos + Contact + Évènements passés + + + +
-

- Marathon national
+ Marathon national
de jeux vidéos

- Vous aimez jouer ? Notre prochain évènement gaming est ouvert - aux réservations... Places limitées ! + Vous aimez jouer ? Notre prochain évènement gaming est ouvert aux + réservations... Places limitées !

- +
img
- +
-
-
-
+ +
+

+ />
-
-
+
+

+ />
-
-
+
+

+ />
-
-
+
+

+ />
-
-
- +
+
+
-

A quel tournoi souhaitez-vous participer cette année ?

-
+

+ A quel tournoi souhaitez-vous participer cette année ? +

+
>
-
+
J'ai lu et accepté les conditions d'utilisation. -
+
-
+
Merci pour votre inscription
diff --git a/modal.css b/modal.css index 75b0c96eae..7572ecc1b9 100644 --- a/modal.css +++ b/modal.css @@ -3,6 +3,7 @@ --font-slab: var(--font-default); --modal-duration: 0.8s; --validation-error-color: #ff4e60; + --color-primary: #ff0000; } * { @@ -48,53 +49,30 @@ img { display: block; color: #000000; text-align: center; - padding: 12px 12px; + padding: 8.5px 12px; margin: 5px; text-decoration: none; - font-size: 20px; - font-family: Roboto, sans-serif; + font-size: 18px; } .topnav a:hover { - background-color: #ff0000; + background-color: var(--color-primary); color: #ffffff; - border-radius: 15px; + border-radius: 8px; } .topnav a.active { - background-color: #ff0000; + background-color: var(--color-primary); color: #ffffff; - border-radius: 15px; + border-radius: 8px; } -.topnav .icon { - display: none; +.topnav a.active span { + border-bottom: 1px solid white; } -@media screen and (max-width: 768px) { - .topnav a { - display: none; - } - .topnav a.icon { - float: right; - display: block; - } -} - -@media screen and (max-width: 768px) { - .topnav.responsive { - position: relative; - } - .topnav.responsive .icon { - position: absolute; - right: 0; - top: 0; - } - .topnav.responsive a { - float: none; - display: block; - text-align: left; - } +.topnav .icon { + display: none; } @media screen and (max-width: 540px) { @@ -104,7 +82,6 @@ img { .topnav a.icon { float: right; display: block; - margin-top: -15px; } } @@ -144,6 +121,13 @@ main { /* Modal form */ +form { + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 100%; +} + .button { background: #fe142f; margin-top: 0.5em; @@ -191,13 +175,14 @@ main { .modal-body { padding: 15px 8%; - margin: 15px auto; + /* margin: 15px auto; */ height: 100%; + overflow-y: auto; } label { font-family: var(--font-default); - font-size: 17px; + font-size: 14px; font-weight: normal; display: inline-block; margin-bottom: 11px; @@ -262,6 +247,7 @@ input[data-error]::after { margin-left: 36px; font-size: 12px; font-weight: normal; + font-family: "Roboto"; } .checkbox-label .checkbox-icon, .checkbox2-label .checkbox-icon { @@ -328,7 +314,7 @@ input[data-error]::after { height: 32px; opacity: 1; cursor: pointer; - transform: scale(0.7); + transform: scale(0.65); } .close:before, .close:after { @@ -352,6 +338,7 @@ input[data-error]::after { margin: 0 auto; border-radius: 7px; font-size: 1rem; + font-family: var(--font-default); padding: 12px 82px; color: #fff; cursor: pointer; @@ -426,10 +413,10 @@ input[data-error]::after { /* custom select end */ .text-label { font-weight: normal; - font-size: 16px; + font-size: 14px; } .hero-section { - min-height: 93vh; + max-height: 647px; border-radius: 10px; display: grid; grid-template-columns: repeat(12, 1fr); @@ -444,7 +431,7 @@ input[data-error]::after { color: #fff; position: relative; text-align: left; - min-width: 424px; + /* min-width: 424px; */ } .hero-content::after { content: ""; @@ -474,7 +461,7 @@ input[data-error]::after { outline: none; text-transform: capitalize; font-size: 1.3rem; - padding: 15px 23px; + padding: 15px 46px; margin: 0; margin-top: 59px; } @@ -486,11 +473,13 @@ input[data-error]::after { height: 100%; display: block; padding: 0; + object-fit: cover; } .copyrights { color: #fe142f; padding: 0; - font-size: 1rem; + font-size: 15px; + font-family: "Roboto"; margin: 60px 0 30px; font-weight: bolder; } @@ -502,7 +491,71 @@ footer { padding-right: 2vw; margin: 0 20px; } -@media screen and (max-width: 800px) { + +@media screen and (max-width: 1015px) { + .topnav { + margin: 33px 30px 19px 30px; + } + + .topnav a { + display: none; + } + + .topnav a.active, + .topnav a:hover { + border-radius: 0; + } + + .topnav a.icon, + .topnav.responsive a.icon { + float: right; + display: block; + font-size: 18px; + padding: 0 5px; + color: #ff001b; + margin: 0; + } + + .topnav.responsive a.icon { + position: absolute; + right: 0; + top: 0; + } + + .topnav a.icon:hover { + color: white; + } + + .topnav.responsive a { + float: none; + display: block; + text-align: left; + margin: 0; + font-size: 0.81rem; + } + + .topnav.responsive { + position: relative; + overflow: visible; + } + .topnav.responsive .main-navbar { + position: absolute; + right: 0; + z-index: 2; + background-color: white; + } + + .topnav.responsive .main-navbar a:first-of-type { + margin-top: 30px; + } + + .header-logo { + width: 103px; + } + .header-logo img { + width: 100%; + padding: 0; + } .hero-section { display: block; box-shadow: unset; @@ -510,7 +563,7 @@ footer { .hero-content { background: #fff; color: #000; - padding: 20px; + padding: 0; } .hero-content::after { content: unset; @@ -519,25 +572,51 @@ footer { display: none; } .hero-headline { - font-size: 4.5rem; + font-size: 2.5rem; white-space: normal; + font-weight: 600; } - .hero-text { + p.hero-text { width: unset; - font-size: 1.5rem; + font-size: 0.81rem; + margin-top: 23px; + font-weight: 500; } .hero-img img { border-radius: 10px; - margin-top: 40px; + margin-top: 39px; + height: 329px; } .hero-section > .btn-signup { display: block; - margin: 32px auto 10px; - padding: 12px 35px; + margin: 30px auto 3px; + padding: 7.5px 35px; + font-size: 14px; } .copyrights { - margin-top: 50px; + margin-top: 0; text-align: center; + font-size: 10px; + } +} + +@media screen and (max-width: 1119px) { + .hero-text { + margin-top: 30px; + } + .hero-content .btn-signup { + margin-top: 30px; + padding: 7.5px 35px; + } +} + +@media screen and (max-width: 500px) { + .bground { + background-color: transparent; + } + .bground .content { + margin-top: 85px; + height: auto; } } @@ -550,3 +629,29 @@ footer { opacity: 1; } } + +/*Scrollbar style*/ + +/* FF only */ +@supports (-moz-appearance: none) { + .modal-body { + scrollbar-width: thin; + } +} + +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: #888; + border-radius: 6px; +} + +::-webkit-scrollbar-thumb:hover { + background: #555; +}