add new icons, change width responsiveness to 1160px, configure form accessibility

Author: allwelldotdev

img/date.svg

@@ -26,11 +26,11 @@
             <div class="grid-container">
               <div class="grid-item grid-item-1">
                 <label for="first-name">First Name</label>
-                <input type="text" required />
+                <input type="text" id="first-name" required />
               </div>
               <div class="grid-item grid-item-2">
                 <label for="last-name">Last Name</label>
-                <input type="text" required />
+                <input type="text" id="last-name" required />
               </div>
               <div class="grid-item grid-item-3">
                 <label for="gender">Gender</label>
@@ -44,15 +44,23 @@
               </div>
               <div class="grid-item grid-item-4">
                 <label for="dob">Date of Birth</label>
-                <input type="date" required />
+                <input type="date" id="dob" required />
               </div>
               <div class="grid-item grid-item-5">
                 <label for="weight">Weight (KG)</label>
-                <input type="number" placeholder="Enter weight here" />
+                <input
+                  type="number"
+                  id="weight"
+                  placeholder="Enter weight here"
+                />
               </div>
               <div class="grid-item grid-item-6">
                 <label for="height">Height (CM)</label>
-                <input type="number" placeholder="Enter height here" />
+                <input
+                  type="number"
+                  id="height"
+                  placeholder="Enter height here"
+                />
               </div>
               <div class="grid-item grid-item-7">
                 <label for="activity-level">Activity Level</label>
@@ -66,7 +74,7 @@
               </div>
               <div class="grid-item grid-item-8">
                 <label for="password">Password</label>
-                <input type="password" required />
+                <input type="password" id="password" required />
               </div>
             </div>
             <div class="btn"><button>Register</button></div>

img/dropdown.svg

@@ -196,7 +196,7 @@ input[type=number]::-webkit-outer-spin-button,
 input[type=number]::-webkit-inner-spin-button {
   /* appearance: none; */
   -webkit-appearance: none;
-  moz-appearance: none;
+  -moz-appearance: none;
   margin: 0;
 }
 
@@ -221,7 +221,7 @@ input[type="password"] {
   flex-wrap: wrap;
 } */
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 1160px) {
   .row {
     flex-direction: column;
     justify-content: center;