issue OpenClassrooms-Student-Center#5 : corrections et amélioration d…

…u code

starterOnly/index.html

@@ -121,7 +121,7 @@ <h1 class="hero-headline">
               </div>
               <div class="formData">
                 <p class="text-label">
-                  A quel tournoi souhaitez-vous participer cette année ?
+                  À quel tournoi souhaitez-vous participer cette année ?
                 </p>
                 <input
                   class="checkbox-input"
@@ -176,7 +176,8 @@ <h1 class="hero-headline">
                 />
                 <label class="checkbox-label" for="location5">
                   <span class="checkbox-icon"></span>
-                  Boston</label
+                  Boston
+                  </label
                 >
                 <input
                   class="checkbox-input"
@@ -187,7 +188,8 @@ <h1 class="hero-headline">
                 />
                 <label class="checkbox-label" for="location6">
                   <span class="checkbox-icon"></span>
-                  Portland</label
+                  Portland
+                  </label
                 >
                 <br />
                 <span id="location-error" class="error-message-style"></span>

starterOnly/modal.css

@@ -14,7 +14,6 @@ body {
   margin: 0;
   display: flex;
   flex-direction: column;
-  background-image: url("background.png");
   font-family: var(--font-default);
   font-size: 18px;
   max-width: 1300px;
@@ -56,12 +55,14 @@ img {
   background-color: #ff0000;
   color: #ffffff;
   border-radius: 15px;
+  text-decoration: underline;
 }
 
 .topnav a.active {
   background-color: #ff0000;
   color: #ffffff;
   border-radius: 15px;
+  text-decoration: underline;
 }
 
 .topnav .icon {
@@ -78,53 +79,13 @@ img {
   border: rgba(255, 78, 96, 1) solid 2px;
 }
 
-@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;
-  }
-}
-
-@media screen and (max-width: 540px) {
-  .topnav a {
-    display: none;
-  }
-  .topnav a.icon {
-    float: right;
-    display: block;
-    margin-top: -15px;
-  }
-}
-
 main {
-  font-size: 130%;
-  font-weight: bolder;
   color: black;
   padding-top: 0.5vw;
   padding-left: 2vw;
   padding-right: 2vw;
   margin: 1px 20px 15px;
   border-radius: 2rem;
-  text-align: justify;
 }
 
 .modal-btn {
@@ -178,11 +139,11 @@ main {
   height: 100%;
   width: 100%;
   overflow: auto;
-  background-color: rgba(26, 39, 156, 0.4);
+  background-color: #fff;
 }
 
 .content {
-  margin: 5% auto;
+  margin: 6% auto;
   width: 100%;
   max-width: 500px;
   animation-name: modalopen;
@@ -202,10 +163,12 @@ main {
 
 label {
   font-family: var(--font-default);
-  font-size: 17px;
+  font-size: 14px;
   font-weight: normal;
   display: inline-block;
-  margin-bottom: 11px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+
 }
 input {
   padding: 8px;
@@ -238,18 +201,14 @@ input {
 .formData[data-error-visible="true"] .text-control {
   border: 2px solid #e54858;
 }
-/* 
-input[data-error]::after {
-    content: attr(data-error);
-    font-size: 0.4em;
-    color: red;
-} */
+
 .checkbox-label,
 .checkbox2-label {
   position: relative;
-  margin-left: 36px;
+  margin-left: 25px;
   font-size: 12px;
   font-weight: normal;
+  margin-right: 20px;
 }
 .checkbox-label .checkbox-icon,
 .checkbox2-label .checkbox-icon {
@@ -340,70 +299,14 @@ input[data-error]::after {
 .btn-signup {
   background: #fe142f;
   display: block;
-  margin: 0 auto;
+  margin: 20px auto 0;
   border-radius: 7px;
   font-size: 1rem;
   padding: 12px 82px;
   color: #fff;
   cursor: pointer;
   border: 0;
 }
-/* custom select styles */
-.custom-select {
-  position: relative;
-  font-family: Arial;
-  font-size: 1.1rem;
-  font-weight: normal;
-}
-
-.custom-select select {
-  display: none;
-}
-.select-selected {
-  background-color: #fff;
-}
-
-/* Style the arrow inside the select element: */
-.select-selected:after {
-  position: absolute;
-  content: "";
-  top: 10px;
-  right: 13px;
-  width: 11px;
-  height: 11px;
-  border: 3px solid transparent;
-  border-bottom-color: #f00;
-  border-left-color: #f00;
-  transform: rotate(-48deg);
-  border-radius: 5px 0 5px 0;
-}
-
-/* Point the arrow upwards when the select box is open (active): */
-.select-selected.select-arrow-active:after {
-  transform: rotate(135deg);
-  top: 13px;
-}
-
-.select-items div,
-.select-selected {
-  color: #000;
-  padding: 11px 16px;
-  border: 1px solid transparent;
-  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
-  cursor: pointer;
-  border-radius: 8px;
-  height: 48px;
-}
-
-/* Style items (options): */
-.select-items {
-  position: absolute;
-  background-color: #fff;
-  top: 89%;
-  left: 0;
-  right: 0;
-  z-index: 99;
-}
 
 .hidden {
   display: none !important;
@@ -421,10 +324,13 @@ input[data-error]::after {
 .same-as-selected {
   background-color: rgba(0, 0, 0, 0.1);
 }
+
 /* custom select end */
 .text-label {
   font-weight: normal;
-  font-size: 16px;
+  font-size: 14px;
+  padding-top: 8px;
+  text-align: left;
 }
 
 #thankYouMessage {
@@ -501,6 +407,7 @@ input[data-error]::after {
   height: 100%;
   display: block;
   padding: 0;
+  object-fit: cover;
 }
 .copyrights {
   color: #fe142f;
@@ -517,15 +424,67 @@ footer {
   padding-right: 2vw;
   margin: 0 20px;
 }
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 767px) {
+  .header-logo {
+    padding-top: 15px;
+  }
+  .header-logo img {
+    width: 150px;
+  }
+
+  .topnav {
+    display: flex;
+    justify-content: space-between;
+  }
+  .topnav a {
+    display: none;
+  }
+
+  .topnav a .fa-bars {
+    color: red;
+  }
+
+  .topnav a:hover .fa-bars {
+    color: white;
+  }
+
+  .topnav.responsive {
+    position: relative;
+  }
+  .topnav.responsive .icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .topnav a {
+    display: none;
+  }
+
+  .topnav.responsive a {
+    float: none;
+    display: block;
+    text-align: left;
+  }
+
+  .topnav a.icon {
+    float: right;
+    display: block;
+  }
+  .topnav .main-navbar a:first-child {
+    margin-top: 5px;
+  }
+
   .hero-section {
     display: block;
     box-shadow: unset;
   }
+
   .hero-content {
     background: #fff;
     color: #000;
-    padding: 20px;
+    padding: 0;
+    min-width: 100%;
   }
   .hero-content::after {
     content: unset;
@@ -534,12 +493,14 @@ footer {
     display: none;
   }
   .hero-headline {
-    font-size: 4.5rem;
+    font-size: 38px;
     white-space: normal;
+    font-weight: 700;
   }
   .hero-text {
     width: unset;
-    font-size: 1.5rem;
+    font-size: 13px;
+    margin-top: 25px;
   }
   .hero-img img {
     border-radius: 10px;
@@ -554,8 +515,20 @@ footer {
     margin-top: 50px;
     text-align: center;
   }
-}
 
+  .bground {
+    background-color: transparent;
+  }
+
+  .content {
+    margin: 20% auto;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .hero-headline {
+    font-size: 50px;
+  }
+}
 @keyframes modalopen {
   from {
     opacity: 0;