Update all html + css

css/style.css

@@ -7,76 +7,145 @@
 
 body {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    justify-content: space-between;
     align-items: center;
-    position: fixed;
     width: 100%;
     height: 100%;
-    font-size: 10px ;
+    font-size: 0.8em;
-    margin: 0;
-    display: grid;
     place-items: center;
+}
 
+
+footer{
+    color: rgb(180, 167, 167);
+    font-weight: bold;
+    
+}
+
+header{
+    display: block;
+    width: 100vw;
 }
 
 h1 {
-    font-size: 120px;
+    font-size: 7vw;
-    margin-top: -200px;
+    color: #ffffff;
-    color: #4f3c68;
 }
 
-.container{
+h2{
+    display: none;
+}
+
+#logo{
+    display:none;
+}
+
+@media screen and (min-width: 1200px) {
+
+    #logo {
+        display: block;
+        width: 100px;
+        margin: 10px;
+    }
+    h2 {
+        display: block;
+        /*background-color: rgba(255, 255, 255, 0.466);*/
+        color: lightgrey;
+        padding: 10px;
+        border-radius: 8px;
+
+    }
+
+    .container {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
-    width: 100%;
+        text-align: center;
-    margin-top: 200px;
+        max-width: 50%;
+    }
 }
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
 main {
-    font-family: Speedbeast,Trebuchet, sans-serif, calibiri;
+    font-family: Speedbeast, Trebuchet, sans-serif, calibiri;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
+
+
+
+
 #background-image {
     background-image: url('../assets/bg.webp');
+    width: 100vw;
+    height: 100vh;
+    margin: 0px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-clip: content-box;
+
+
 }
 
 #checkbox {
     display: none;
 }
-#checkbox:checked + #formcontainer #form {
+
+#checkbox:checked+#formcontainer #form {
     width: 37.5em;
 }
-#checkbox:checked + #formcontainer #form_toggle {
+
+#checkbox:checked+#formcontainer #form_toggle {
     visibility: hidden;
     opacity: 0;
     transform: scale(0.7);
 }
-#checkbox:checked + #formcontainer #form_input, #checkbox:checked + #formcontainer #form_buttonLabel {
+
+#checkbox:checked+#formcontainer #form_input,
+#checkbox:checked+#formcontainer #form_buttonLabel {
     transition: 0.2s 0.1s;
     visibility: visible;
     opacity: 1;
     transform: scale(1);
 }
 
-#checkbox:not(:checked) + #formcontainer #form_input:required:valid ~ #form_toggle {
+#checkbox:not(:checked)+#formcontainer #form_input:required:valid~#form_toggle {
     pointer-events: none;
     cursor: default;
 }
-#formcontainer, #form, #form_toggle {
+
+#formcontainer,
+#form,
+#form_toggle {
     width: 20em;
     height: 6.25em;
+    max-width: 80vw;
 }
-#formontainer {
+
+#formcontainer {
     position: relative;
     font-weight: 700;
 }
-#form, #form_toggle {
+
+#form,
+#form_toggle {
     position: absolute;
     border-radius: 6.25em;
     background-color: #fff;
     transition: 0.2s;
 }
+
 #form {
     left: 50%;
     transform: translateX(-50%);
@@ -86,6 +155,7 @@ main {
     display: flex;
     justify-content: center;
 }
+
 #form_toggle {
     color: #7e2722;
     top: 0;
@@ -95,47 +165,59 @@ main {
     align-items: center;
     justify-content: center;
 }
+
 #form_toggle::before {
     font-size: 1.75em;
     content: attr(data-title);
 }
-#form_input, #form_button {
+
+#form_input,
+#form_button {
     font: inherit;
     border: 0;
     outline: 0;
     border-radius: 5em;
     box-sizing: border-box;
 }
-#form_input, #form_buttonLabel {
+
+#form_input,
+#form_buttonLabel {
     font-size: 1.75em;
     opacity: 0;
     visibility: hidden;
     transform: scale(0.7);
     transition: 0s;
 }
+
 #form_input {
     color: rgb(31, 24, 134);
     height: 100%;
     width: 100%;
     padding: 0 0.714em;
 }
+
 #form_input::placeholder {
     color: currentColor;
 }
+
 #form_input:required:valid {
     color: #1b5228;
 }
-#form_input:required:valid + .c-form__buttonLabel {
+
+#form_input:required:valid+.c-form__buttonLabel {
     color: #fff;
 }
-#form_input:required:valid + .c-form__buttonLabel::before {
+
+#form_input:required:valid+.c-form__buttonLabel::before {
     pointer-events: initial;
 }
+
 #form_buttonLabel {
     color: #ffaea9;
     height: 100%;
     width: auto;
 }
+
 #form_buttonLabel::before {
     content: '';
     position: absolute;
@@ -144,6 +226,7 @@ main {
     pointer-events: none;
     cursor: pointer;
 }
+
 #form_button {
     color: inherit;
     padding: 0;

index.html

@@ -3,10 +3,15 @@
 
 <head>
     <link rel="stylesheet" href="./css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="UTF-8">
+    <link rel="icon" href="./assets/logo.ico" type="image/x-icon">
 </head>
 
 <body id="background-image">
+    <header>
+        <img id="logo" src="./assets/logo.png" alt="background">
+    </header>
     <main>
         <h1>Grand Tabernacle Auto</h1>
         <div class="container">
@@ -14,8 +19,7 @@
             <input type="checkbox" id="checkbox">
             <div id="formcontainer">
                 <form id="form" action="game.html">
-                    <input id="form_input" placeholder="Pseudo (pas de symbole)" type="text" pattern="[A-Za-z0-9]+"
+                    <input id="form_input" placeholder="Pseudo" type="text" pattern="[\ A-Za-z0-9]{1,20}" required>
-                        required>
                     <label id="form_buttonLabel" for="checkbox">
                         <button id="form_button" type="submit">Go!</button>
                     </label>
@@ -24,12 +28,16 @@
             </div>
         </div>
     </main>
+    <footer>
+        <p>© 2023 - Grand Tabernacle Auto</p>
+    </footer>
 </body>
+
 </html>
 
 <script>
-pseudo = document.getElementById('form_input')
+    pseudo = document.getElementById('form_input')
-window.addEventListener('keyup', (event) => {
+    window.addEventListener('keyup', (event) => {
-    document.cookie = "pseudo="+pseudo.value
+        document.cookie = "pseudo=" + pseudo.value
-})
+    })
 </script>