From bce2a578e69934b260005bad0008f00342a793da Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 13:14:19 +0200
Subject: [PATCH 01/25] adding 4 main divs

---
 src/index.html | 8 ++++++++
 1 file changed, 8 insertions(+)
diff --git a/src/index.html b/src/index.html
index 3348db1c..509f00ce 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,6 +12,14 @@
   </head>
   <body>
     <h1>HTML Form</h1>
+    <form action="https://mate-academy-form-lesson.herokuapp.com/create-application"
+    method="post" name="test-form">
+      <div class="personal-information">Personal information</div>
+      <div class="registration">Registration</div>
+      <div class="hobbies">An interesting fact about you!</div>
+      <div class="info">Additional info:</div>
+
+    </form>
     <script type="text/javascript" src="./main.js"></script>
   </body>
 </html>

From 72b6e9478c2852d6f29b7e0a421e02ee37495aee Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 14:20:33 +0200
Subject: [PATCH 02/25] first div expansion

---
 src/index.html | 44 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/index.html b/src/index.html
index 509f00ce..fe0f4e4b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,20 +1,53 @@
 <!doctype html>
 <html lang="en">
+
   <head>
     <meta charset="UTF-8">
-    <meta
-      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    >
+    <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>HTML Form</title>
     <link rel="stylesheet" href="./style.css">
   </head>
+
   <body>
     <h1>HTML Form</h1>
     <form action="https://mate-academy-form-lesson.herokuapp.com/create-application"
     method="post" name="test-form">
-      <div class="personal-information">Personal information</div>
+      <div class="personal-information">Personal information
+        <div>Surname:
+          <label for="Surname">
+            <input type="text">
+          </label>
+        </div>
+
+        <div>Name:
+          <label for="Name">
+            <input type="text">
+          </label>
+        </div>
+
+        <div>How old are You?
+          <label for="Age">
+            <input type="age">
+          </label>
+        </div>
+
+        <div>Full date of birth:
+          <label for="Date">
+            <input type="date">
+          </label>
+        </div>
+
+        <div>
+          <label for="Agreement">
+            <input type="checkbox"
+            name="Agreement"
+            id="Agreement">
+          </label>
+        </div>
+      </div>
+
       <div class="registration">Registration</div>
       <div class="hobbies">An interesting fact about you!</div>
       <div class="info">Additional info:</div>
@@ -22,4 +55,5 @@ <h1>HTML Form</h1>
     </form>
     <script type="text/javascript" src="./main.js"></script>
   </body>
+
 </html>

From 79332537f2cad6bc1a95048b47cb208eb174d4c5 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 14:39:07 +0200
Subject: [PATCH 03/25] first div styles

---
 src/index.html | 42 ++++++++++++++++++++++++++----------------
 src/style.css  |  7 +++++++
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/index.html b/src/index.html
index fe0f4e4b..e0dc514a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,39 +11,49 @@
   </head>
 
   <body>
+
     <h1>HTML Form</h1>
+
     <form action="https://mate-academy-form-lesson.herokuapp.com/create-application"
-    method="post" name="test-form">
+    method="post" name="personal-information">
+
       <div class="personal-information">Personal information
-        <div>Surname:
-          <label for="Surname">
-            <input type="text">
+        <div class="input surname">
+          <label for="Surname">Surname:
+            <input type="text"
+            id="Surname">
           </label>
         </div>
 
-        <div>Name:
-          <label for="Name">
-            <input type="text">
+        <div class="input name">
+          <label for="Name">Name:
+            <input type="text"
+            id="Name">
           </label>
         </div>
 
-        <div>How old are You?
-          <label for="Age">
-            <input type="age">
+        <div class="input age">
+          <label for="Age">How old are You?
+            <input type="age"
+            id="Age"
+            maxlength="2"
+            value="12">
           </label>
         </div>
 
-        <div>Full date of birth:
-          <label for="Date">
-            <input type="date">
+        <div class="input date">
+          <label for="Date">Full date of birth:
+            <input type="date"
+            id="Date">
           </label>
         </div>
 
-        <div>
-          <label for="Agreement">
+        <div class="input agreement">
+          <label for="Agreement">I accept the term of agreement:
             <input type="checkbox"
             name="Agreement"
-            id="Agreement">
+            id="Agreement"
+            required>
           </label>
         </div>
       </div>
diff --git a/src/style.css b/src/style.css
index c4301db2..a5507f39 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1 +1,8 @@
 /* styles go here */
+.personal-information {
+  border: 2px solid black;
+}
+
+.input {
+  margin: 5px;
+}

From 77de9aec5bc0d47f8d789ec188eceaebbea483c3 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 15:04:17 +0200
Subject: [PATCH 04/25] second div content and styles

---
 src/index.html | 60 ++++++++++++++++++++++++++++++++++++--------------
 src/style.css  |  3 ++-
 2 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/src/index.html b/src/index.html
index e0dc514a..e9d338bb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,50 +17,76 @@ <h1>HTML Form</h1>
     <form action="https://mate-academy-form-lesson.herokuapp.com/create-application"
     method="post" name="personal-information">
 
-      <div class="personal-information">Personal information
+      <div class="field personal-information">Personal information
         <div class="input surname">
-          <label for="Surname">Surname:
+          <label for="surname">Surname:
             <input type="text"
-            id="Surname">
+            id="surname"
+            name="surname">
           </label>
         </div>
 
         <div class="input name">
-          <label for="Name">Name:
+          <label for="name">Name:
             <input type="text"
-            id="Name">
+            id="name"
+            name="name">
           </label>
         </div>
 
         <div class="input age">
-          <label for="Age">How old are You?
-            <input type="age"
-            id="Age"
+          <label for="age">How old are You?
+            <input type="number"
+            id="age"
             maxlength="2"
-            value="12">
+            value="12"
+            name="age">
           </label>
         </div>
 
         <div class="input date">
-          <label for="Date">Full date of birth:
+          <label for="date">Full date of birth:
             <input type="date"
-            id="Date">
+            id="date"
+            name="date">
           </label>
         </div>
 
         <div class="input agreement">
-          <label for="Agreement">I accept the term of agreement:
+          <label for="agreement">I accept the term of agreement:
             <input type="checkbox"
-            name="Agreement"
-            id="Agreement"
+            name="agreement"
+            id="agreement"
             required>
           </label>
         </div>
       </div>
 
-      <div class="registration">Registration</div>
-      <div class="hobbies">An interesting fact about you!</div>
-      <div class="info">Additional info:</div>
+      <div class="field registration">Registration
+
+        <div class="input email">
+          <label for="email">E-mail:
+            <input type="email"
+            name="email"
+            id="email"
+            placeholder="email@example.com">
+          </label>
+        </div>
+
+        <div class="input password">
+          <label for="password">Password:
+            <input type="password"
+            name="password"
+            id="password">
+          </label>
+        </div>
+
+      </div>
+
+      <div class="field hobbies">An interesting fact about you!
+
+      </div>
+      <div class="field info">Additional info:</div>
 
     </form>
     <script type="text/javascript" src="./main.js"></script>
diff --git a/src/style.css b/src/style.css
index a5507f39..db78bc06 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,6 +1,7 @@
 /* styles go here */
-.personal-information {
+.field {
   border: 2px solid black;
+  margin: 10px;
 }
 
 .input {

From 91b4740f24d4ed4a0fbef3cea8774f71949218df Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 15:20:16 +0200
Subject: [PATCH 05/25] third div content and styles

---
 src/index.html | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/src/index.html b/src/index.html
index e9d338bb..80118dec 100644
--- a/src/index.html
+++ b/src/index.html
@@ -85,7 +85,53 @@ <h1>HTML Form</h1>
 
       <div class="field hobbies">An interesting fact about you!
 
+        <div class="input cats">
+          <label for="cats">Do you love cats?
+            <input type="radio"
+            name="cats"
+            id="cats yes">Yes
+            <input type="radio"
+            name="cats"
+            id="cats no">No
+          </label>
+        </div>
+
+        <div class="input color">
+          <label for="color">What is your favorite color?
+            <input type="color"
+            name="color"
+            id="color">
+          </label>
+        </div>
+
+        <div class="input sleep">
+          <label for="sleep">What time do you go to bed?
+            <input type="time"
+            name="sleep"
+            id="sleep">
+          </label>
+        </div>
+
+        <div class="input cars">
+          <label for="cars">What are your favourite brand of cars?
+            <select name="cars" id="cars">
+              <option value="bmw">BMW</option>
+              <option value="audi">Audi</option>
+              <option value="lada">Lada</option>
+            </select>
+          </label>
+        </div>
+
+        <div class="input rating">
+          <label for="rating">How do you rate our work?
+            <input type="range"
+            name="rating"
+            id="rating">
+          </label>
+        </div>
+
       </div>
+
       <div class="field info">Additional info:</div>
 
     </form>

From b9210f1169e09f407e9b83c18aaba88af466a414 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 15:43:22 +0200
Subject: [PATCH 06/25] final div content and styles

---
 src/index.html | 83 ++++++++++++++++++++++++++++++++++++++++----------
 src/style.css  |  4 +--
 2 files changed, 69 insertions(+), 18 deletions(-)

diff --git a/src/index.html b/src/index.html
index 80118dec..61df0f1f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,7 +20,9 @@ <h1>HTML Form</h1>
       <div class="field personal-information">Personal information
         <div class="input surname">
           <label for="surname">Surname:
-            <input type="text"
+            <input
+            type="text"
+            autocomplete="off"
             id="surname"
             name="surname">
           </label>
@@ -28,7 +30,9 @@ <h1>HTML Form</h1>
 
         <div class="input name">
           <label for="name">Name:
-            <input type="text"
+            <input
+            type="text"
+            autocomplete="off"
             id="name"
             name="name">
           </label>
@@ -36,9 +40,12 @@ <h1>HTML Form</h1>
 
         <div class="input age">
           <label for="age">How old are You?
-            <input type="number"
+            <input
+            type="number"
             id="age"
-            maxlength="2"
+            maxlength="3"
+            min="1"
+            max="100"
             value="12"
             name="age">
           </label>
@@ -46,7 +53,8 @@ <h1>HTML Form</h1>
 
         <div class="input date">
           <label for="date">Full date of birth:
-            <input type="date"
+            <input
+            type="date"
             id="date"
             name="date">
           </label>
@@ -54,7 +62,8 @@ <h1>HTML Form</h1>
 
         <div class="input agreement">
           <label for="agreement">I accept the term of agreement:
-            <input type="checkbox"
+            <input
+            type="checkbox"
             name="agreement"
             id="agreement"
             required>
@@ -66,7 +75,8 @@ <h1>HTML Form</h1>
 
         <div class="input email">
           <label for="email">E-mail:
-            <input type="email"
+            <input
+            type="email"
             name="email"
             id="email"
             placeholder="email@example.com">
@@ -75,9 +85,11 @@ <h1>HTML Form</h1>
 
         <div class="input password">
           <label for="password">Password:
-            <input type="password"
+            <input
+            type="password"
             name="password"
-            id="password">
+            id="password"
+            minlength="6">
           </label>
         </div>
 
@@ -87,10 +99,13 @@ <h1>HTML Form</h1>
 
         <div class="input cats">
           <label for="cats">Do you love cats?
-            <input type="radio"
+            <input
+            type="radio"
             name="cats"
             id="cats yes">Yes
-            <input type="radio"
+
+            <input
+            type="radio"
             name="cats"
             id="cats no">No
           </label>
@@ -98,7 +113,8 @@ <h1>HTML Form</h1>
 
         <div class="input color">
           <label for="color">What is your favorite color?
-            <input type="color"
+            <input
+            type="color"
             name="color"
             id="color">
           </label>
@@ -106,7 +122,8 @@ <h1>HTML Form</h1>
 
         <div class="input sleep">
           <label for="sleep">What time do you go to bed?
-            <input type="time"
+            <input
+            type="time"
             name="sleep"
             id="sleep">
           </label>
@@ -114,7 +131,10 @@ <h1>HTML Form</h1>
 
         <div class="input cars">
           <label for="cars">What are your favourite brand of cars?
-            <select name="cars" id="cars">
+            <select
+            name="cars"
+            id="cars"
+            multiple>
               <option value="bmw">BMW</option>
               <option value="audi">Audi</option>
               <option value="lada">Lada</option>
@@ -124,7 +144,8 @@ <h1>HTML Form</h1>
 
         <div class="input rating">
           <label for="rating">How do you rate our work?
-            <input type="range"
+            <input
+            type="range"
             name="rating"
             id="rating">
           </label>
@@ -132,7 +153,37 @@ <h1>HTML Form</h1>
 
       </div>
 
-      <div class="field info">Additional info:</div>
+      <div class="field info">Additional info:
+
+        <div class="input comments">
+          <label for="comments">Comments:
+            <textarea
+            name="comments"
+            autocomplete="off"
+            id="comments"
+            cols="20"
+            rows="2"
+           ></textarea>
+          </label>
+        </div>
+
+        <div class="input recomendation">
+          <label for="recomendation">Would you recomend us?
+            <select
+            name="recomendation"
+            id="recomendation">
+              <option value="yes">Yes</option>
+              <option value="no">No</option>
+            </select>
+          </label>
+        </div>
+      </div>
+
+      <div class="input submit">
+        <input
+        type="submit"
+        value="Submit">
+      </div>
 
     </form>
     <script type="text/javascript" src="./main.js"></script>
diff --git a/src/style.css b/src/style.css
index db78bc06..9f4204b7 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,9 +1,9 @@
 /* styles go here */
 .field {
   border: 2px solid black;
-  margin: 10px;
+  margin: 20px;
 }
 
 .input {
-  margin: 5px;
+  margin: 10px;
 }

From 7a7375264193bb09a858a40a90a39f29f9d16f7c Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 16:59:05 +0200
Subject: [PATCH 07/25] eslint changes

---
 src/index.html | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/index.html b/src/index.html
index 61df0f1f..062379f6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,7 +4,8 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport"
-    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    >
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>HTML Form</title>
     <link rel="stylesheet" href="./style.css">
@@ -180,9 +181,13 @@ <h1>HTML Form</h1>
       </div>
 
       <div class="input submit">
-        <input
-        type="submit"
-        value="Submit">
+        <label for="submit">
+          <input
+          id="submit"
+          type="submit"
+          value="Submit">
+        </label>
+
       </div>
 
     </form>

From cfca28280be475874929580535c858184f5f1429 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 17:01:51 +0200
Subject: [PATCH 08/25] eslint changes

---
 src/index.html | 39 ++++++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/index.html b/src/index.html
index 062379f6..5e71ed8d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,7 +25,8 @@ <h1>HTML Form</h1>
             type="text"
             autocomplete="off"
             id="surname"
-            name="surname">
+            name="surname"
+            >
           </label>
         </div>
 
@@ -35,7 +36,8 @@ <h1>HTML Form</h1>
             type="text"
             autocomplete="off"
             id="name"
-            name="name">
+            name="name"
+            >
           </label>
         </div>
 
@@ -48,7 +50,8 @@ <h1>HTML Form</h1>
             min="1"
             max="100"
             value="12"
-            name="age">
+            name="age"
+            >
           </label>
         </div>
 
@@ -57,7 +60,8 @@ <h1>HTML Form</h1>
             <input
             type="date"
             id="date"
-            name="date">
+            name="date"
+            >
           </label>
         </div>
 
@@ -67,7 +71,8 @@ <h1>HTML Form</h1>
             type="checkbox"
             name="agreement"
             id="agreement"
-            required>
+            required
+            >
           </label>
         </div>
       </div>
@@ -80,7 +85,8 @@ <h1>HTML Form</h1>
             type="email"
             name="email"
             id="email"
-            placeholder="email@example.com">
+            placeholder="email@example.com"
+            >
           </label>
         </div>
 
@@ -90,7 +96,8 @@ <h1>HTML Form</h1>
             type="password"
             name="password"
             id="password"
-            minlength="6">
+            minlength="6"
+            >
           </label>
         </div>
 
@@ -103,12 +110,14 @@ <h1>HTML Form</h1>
             <input
             type="radio"
             name="cats"
-            id="cats yes">Yes
+            id="cats yes"
+            >Yes
 
             <input
             type="radio"
             name="cats"
-            id="cats no">No
+            id="cats no"
+            >No
           </label>
         </div>
 
@@ -117,7 +126,8 @@ <h1>HTML Form</h1>
             <input
             type="color"
             name="color"
-            id="color">
+            id="color"
+            >
           </label>
         </div>
 
@@ -126,7 +136,8 @@ <h1>HTML Form</h1>
             <input
             type="time"
             name="sleep"
-            id="sleep">
+            id="sleep"
+            >
           </label>
         </div>
 
@@ -148,7 +159,8 @@ <h1>HTML Form</h1>
             <input
             type="range"
             name="rating"
-            id="rating">
+            id="rating"
+            >
           </label>
         </div>
 
@@ -185,7 +197,8 @@ <h1>HTML Form</h1>
           <input
           id="submit"
           type="submit"
-          value="Submit">
+          value="Submit"
+          >
         </label>
 
       </div>

From 408adf7aa6744f8196b4cd4a0394d25e42dd2895 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 17:25:54 +0200
Subject: [PATCH 09/25] eslint changes

---
 src/index.html | 25 +++++++++++++------------
 src/style.css  |  9 ++++++++-
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/index.html b/src/index.html
index 5e71ed8d..dda28943 100644
--- a/src/index.html
+++ b/src/index.html
@@ -18,7 +18,8 @@ <h1>HTML Form</h1>
     <form action="https://mate-academy-form-lesson.herokuapp.com/create-application"
     method="post" name="personal-information">
 
-      <div class="field personal-information">Personal information
+      <fieldset class="personal-information">
+        <p>Personal information</p>
         <div class="input surname">
           <label for="surname">Surname:
             <input
@@ -46,7 +47,6 @@ <h1>HTML Form</h1>
             <input
             type="number"
             id="age"
-            maxlength="3"
             min="1"
             max="100"
             value="12"
@@ -75,10 +75,10 @@ <h1>HTML Form</h1>
             >
           </label>
         </div>
-      </div>
-
-      <div class="field registration">Registration
+      </fieldset>
 
+      <fieldset class="registration">
+        <p>Registration</p>
         <div class="input email">
           <label for="email">E-mail:
             <input
@@ -97,14 +97,15 @@ <h1>HTML Form</h1>
             name="password"
             id="password"
             minlength="6"
+            maxlength="15"
             >
           </label>
         </div>
 
-      </div>
-
-      <div class="field hobbies">An interesting fact about you!
+      </fieldset>
 
+      <fieldset class="hobby">
+        <p>An interesting fact about you!</p>
         <div class="input cats">
           <label for="cats">Do you love cats?
             <input
@@ -164,10 +165,10 @@ <h1>HTML Form</h1>
           </label>
         </div>
 
-      </div>
-
-      <div class="field info">Additional info:
+      </fieldset>
 
+      <fieldset class="info">
+        <p>Additional info:</p>
         <div class="input comments">
           <label for="comments">Comments:
             <textarea
@@ -190,7 +191,7 @@ <h1>HTML Form</h1>
             </select>
           </label>
         </div>
-      </div>
+      </fieldset>
 
       <div class="input submit">
         <label for="submit">
diff --git a/src/style.css b/src/style.css
index 9f4204b7..785d12a8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,5 +1,5 @@
 /* styles go here */
-.field {
+fieldset {
   border: 2px solid black;
   margin: 20px;
 }
@@ -7,3 +7,10 @@
 .input {
   margin: 10px;
 }
+
+/* fieldset p {
+  margin-top: -0.8em;
+  margin-left: 10px;
+  background-color: white;
+  width: 150px;
+} */

From a43e73783d72112a904be066b4fbee843937fb8a Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 17:29:20 +0200
Subject: [PATCH 10/25] eslint changes

---
 src/style.css | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/style.css b/src/style.css
index 785d12a8..7251e99b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,6 +1,6 @@
 /* styles go here */
 fieldset {
-  border: 2px solid black;
+  border: 1px solid black;
   margin: 20px;
 }
 
@@ -8,9 +8,30 @@ fieldset {
   margin: 10px;
 }
 
-/* fieldset p {
+.personal-information p {
   margin-top: -0.8em;
   margin-left: 10px;
   background-color: white;
   width: 150px;
-} */
+}
+
+.registration p {
+  margin-top: -0.8em;
+  margin-left: 10px;
+  background-color: white;
+  width: 80px;
+}
+
+.hobby p {
+  margin-top: -0.8em;
+  margin-left: 10px;
+  background-color: white;
+  width: 200px;
+}
+
+.info p {
+  margin-top: -0.8em;
+  margin-left: 10px;
+  background-color: white;
+  width: 110px;
+}

From 16b34b630713cf43ac3c307dcd370a706c923262 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 17:30:31 +0200
Subject: [PATCH 11/25] eslint changes

---
 src/index.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/index.html b/src/index.html
index dda28943..613d1310 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,8 +13,6 @@
 
   <body>
 
-    <h1>HTML Form</h1>
-
     <form action="https://mate-academy-form-lesson.herokuapp.com/create-application"
     method="post" name="personal-information">
 

From 40e893eb76d8a9d71beee6a508ce5ee3be30a479 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 17:32:55 +0200
Subject: [PATCH 12/25] eslint changes

---
 src/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/style.css b/src/style.css
index 7251e99b..61339314 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,11 +1,11 @@
 /* styles go here */
 fieldset {
   border: 1px solid black;
-  margin: 20px;
+  margin: 10px;
 }
 
 .input {
-  margin: 10px;
+  margin: 5px;
 }
 
 .personal-information p {

From 0e3acb95d38edd456a980aaf084f4c39b3d672bb Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 17:36:09 +0200
Subject: [PATCH 13/25] eslint changes

---
 src/style.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/style.css b/src/style.css
index 61339314..bea0bcea 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,11 +1,13 @@
 /* styles go here */
 fieldset {
   border: 1px solid black;
-  margin: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 .input {
-  margin: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 .personal-information p {

From 637eab50ec09ca3cba19368533b8d950cfb96049 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 17:38:25 +0200
Subject: [PATCH 14/25] eslint changes

---
 src/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/style.css b/src/style.css
index bea0bcea..3116c93d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -6,8 +6,8 @@ fieldset {
 }
 
 .input {
-  margin-top: 5px;
-  margin-bottom: 5px;
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 .personal-information p {

From d1de9e39ea1497234dba09ae56b7c3e3ade25da3 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 17:48:29 +0200
Subject: [PATCH 15/25] eslint changes

---
 src/style.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/style.css b/src/style.css
index 3116c93d..a8622f1a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,13 +1,11 @@
 /* styles go here */
 fieldset {
   border: 1px solid black;
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: 20px;
 }
 
 .input {
   margin-top: 10px;
-  margin-bottom: 10px;
 }
 
 .personal-information p {

From 0a5b8a36db30b94a7264752f2847b8d01ca8bcee Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 17:50:56 +0200
Subject: [PATCH 16/25] eslint changes

---
 src/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/style.css b/src/style.css
index a8622f1a..8bb0dc64 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,11 +1,11 @@
 /* styles go here */
 fieldset {
   border: 1px solid black;
-  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 .input {
-  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 .personal-information p {

From 7a92db183921043b55f3fac36175651f1a0503a7 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 17:57:17 +0200
Subject: [PATCH 17/25] eslint changes

---
 src/style.css | 28 ----------------------------
 1 file changed, 28 deletions(-)

diff --git a/src/style.css b/src/style.css
index 8bb0dc64..600b0d18 100644
--- a/src/style.css
+++ b/src/style.css
@@ -7,31 +7,3 @@ fieldset {
 .input {
   margin-bottom: 10px;
 }
-
-.personal-information p {
-  margin-top: -0.8em;
-  margin-left: 10px;
-  background-color: white;
-  width: 150px;
-}
-
-.registration p {
-  margin-top: -0.8em;
-  margin-left: 10px;
-  background-color: white;
-  width: 80px;
-}
-
-.hobby p {
-  margin-top: -0.8em;
-  margin-left: 10px;
-  background-color: white;
-  width: 200px;
-}
-
-.info p {
-  margin-top: -0.8em;
-  margin-left: 10px;
-  background-color: white;
-  width: 110px;
-}

From c416e678b36e27ddbbe01338d4a82c0d70a00d65 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 18:19:49 +0200
Subject: [PATCH 18/25] eslint changes

---
 src/style.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/style.css b/src/style.css
index 600b0d18..6519b941 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,9 +1,8 @@
 /* styles go here */
 fieldset {
-  border: 1px solid black;
   margin-bottom: 20px;
 }
 
-.input {
+input {
   margin-bottom: 10px;
 }

From 75fc60d18888427acc239405a8c23c4e0d63643b Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 18:44:28 +0200
Subject: [PATCH 19/25] changes

---
 src/index.html | 16 ++++++++--------
 src/style.css  | 12 ++++++++----
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/index.html b/src/index.html
index 613d1310..b3ab4d41 100644
--- a/src/index.html
+++ b/src/index.html
@@ -16,8 +16,8 @@
     <form action="https://mate-academy-form-lesson.herokuapp.com/create-application"
     method="post" name="personal-information">
 
-      <fieldset class="personal-information">
-        <p>Personal information</p>
+      <fieldset class="form-field personal-information">
+        <legend>Personal information</legend>
         <div class="input surname">
           <label for="surname">Surname:
             <input
@@ -75,8 +75,8 @@
         </div>
       </fieldset>
 
-      <fieldset class="registration">
-        <p>Registration</p>
+      <fieldset class="form-field registration">
+        <legend>Registration</legend>
         <div class="input email">
           <label for="email">E-mail:
             <input
@@ -102,8 +102,8 @@
 
       </fieldset>
 
-      <fieldset class="hobby">
-        <p>An interesting fact about you!</p>
+      <fieldset class="form-field hobby">
+        <legend>An interesting fact about you!</legend>
         <div class="input cats">
           <label for="cats">Do you love cats?
             <input
@@ -165,8 +165,8 @@
 
       </fieldset>
 
-      <fieldset class="info">
-        <p>Additional info:</p>
+      <fieldset class="form-field info">
+        <legend>Additional info:</legend>
         <div class="input comments">
           <label for="comments">Comments:
             <textarea
diff --git a/src/style.css b/src/style.css
index 6519b941..25641387 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,8 +1,12 @@
 /* styles go here */
-fieldset {
-  margin-bottom: 20px;
+.input {
+  margin-bottom: 10px;
 }
 
-input {
-  margin-bottom: 10px;
+.input:last-child {
+  margin-bottom: 0;
+}
+
+.form-field {
+  margin-bottom: 20px;
 }

From 13976063890e8527077953d8e4d7d29d1069df7c Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Mon, 5 Jun 2023 18:47:02 +0200
Subject: [PATCH 20/25] changes

---
 src/index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index b3ab4d41..6cde3fc3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -141,7 +141,7 @@
         </div>
 
         <div class="input cars">
-          <label for="cars">What are your favourite brand of cars?
+          <label for="cars">What are your favorite brand of cars?
             <select
             name="cars"
             id="cars"
@@ -159,6 +159,7 @@
             type="range"
             name="rating"
             id="rating"
+            value="0"
             >
           </label>
         </div>

From 3fd8c2d41475b48b3b7ced3fb5f5a20e2edab59d Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Tue, 6 Jun 2023 17:54:08 +0200
Subject: [PATCH 21/25] Apply requested changes

---
 readme.md      |   4 +-
 src/index.html | 143 ++++++++++++++++++++++++++++++-------------------
 src/style.css  |   6 +--
 3 files changed, 94 insertions(+), 59 deletions(-)

diff --git a/readme.md b/readme.md
index ed4805f1..dcd29bb6 100644
--- a/readme.md
+++ b/readme.md
@@ -1,7 +1,7 @@
 # HTML form
 Replace `<your_account>` with your Github username and copy the links to Pull Request description:
-- [DEMO LINK](https://<your_account>.github.io/layout_html-form/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_html-form/report/html_report/)
+- [DEMO LINK](https://arturgorniak.github.io/layout_html-form/)
+- [TEST REPORT LINK](https://arturgorniak.github.io/layout_html-form/report/html_report/)
 
 > Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/#how-to-solve-the-layout-tasks-on-github)
 ___
diff --git a/src/index.html b/src/index.html
index 6cde3fc3..9c4eba56 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,46 +2,60 @@
 <html lang="en">
 
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    <meta
+    charset="UTF-8"
+    >
+    <meta
+    name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0,
+    maximum-scale=1.0, minimum-scale=1.0"
+    >
+    <meta
+    http-equiv="X-UA-Compatible"
+    content="ie=edge"
     >
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>HTML Form</title>
     <link rel="stylesheet" href="./style.css">
   </head>
 
   <body>
-
-    <form action="https://mate-academy-form-lesson.herokuapp.com/create-application"
-    method="post" name="personal-information">
-
-      <fieldset class="form-field personal-information">
+    <form
+    action="https://mate-academy-form-lesson.herokuapp.com/create-application"
+    method="post"
+    name="personalInformation"
+    >
+      <fieldset class="form-field">
         <legend>Personal information</legend>
-        <div class="input surname">
-          <label for="surname">Surname:
+        <div class="form-field">
+          <label for="surname">
+            Surname:
+
             <input
             type="text"
             autocomplete="off"
             id="surname"
             name="surname"
             >
+
           </label>
         </div>
+        <div class="form-field">
+          <label for="name">
+            Name:
 
-        <div class="input name">
-          <label for="name">Name:
             <input
             type="text"
             autocomplete="off"
             id="name"
             name="name"
             >
+
           </label>
         </div>
+        <div class="form-field">
+          <label for="age">
+            How old are You?
 
-        <div class="input age">
-          <label for="age">How old are You?
             <input
             type="number"
             id="age"
@@ -50,46 +64,54 @@
             value="12"
             name="age"
             >
+
           </label>
         </div>
+        <div class="form-field">
+          <label for="date">
+            Full date of birth:
 
-        <div class="input date">
-          <label for="date">Full date of birth:
             <input
             type="date"
             id="date"
             name="date"
             >
+
           </label>
         </div>
+        <div class="form-field">
+          <label for="agreement">
+            I accept the term of agreement:
 
-        <div class="input agreement">
-          <label for="agreement">I accept the term of agreement:
             <input
             type="checkbox"
             name="agreement"
             id="agreement"
             required
             >
+
           </label>
         </div>
       </fieldset>
-
-      <fieldset class="form-field registration">
+      <fieldset class="form-field">
         <legend>Registration</legend>
-        <div class="input email">
-          <label for="email">E-mail:
+        <div class="form-field">
+          <label for="email">
+            E-mail:
+
             <input
             type="email"
             name="email"
             id="email"
             placeholder="email@example.com"
             >
+
           </label>
         </div>
+        <div class="form-field">
+          <label for="password">
+            Password:
 
-        <div class="input password">
-          <label for="password">Password:
             <input
             type="password"
             name="password"
@@ -97,51 +119,60 @@
             minlength="6"
             maxlength="15"
             >
+
           </label>
         </div>
-
       </fieldset>
-
-      <fieldset class="form-field hobby">
+      <fieldset class="form-field">
         <legend>An interesting fact about you!</legend>
-        <div class="input cats">
-          <label for="cats">Do you love cats?
+        <div class="form-field">
+          <label for="cats">
+            Do you love cats?
+
             <input
             type="radio"
             name="cats"
-            id="cats yes"
-            >Yes
+            id="catsYes"
+            >
+            Yes
 
             <input
             type="radio"
             name="cats"
-            id="cats no"
-            >No
+            id="catsNo"
+            >
+            No
+
           </label>
         </div>
+        <div class="form-field">
+          <label for="color">
+            What is your favorite color?
 
-        <div class="input color">
-          <label for="color">What is your favorite color?
             <input
             type="color"
             name="color"
             id="color"
             >
+
           </label>
         </div>
+        <div class="form-field">
+          <label for="sleep">
+            What time do you go to bed?
 
-        <div class="input sleep">
-          <label for="sleep">What time do you go to bed?
             <input
             type="time"
             name="sleep"
             id="sleep"
             >
+
           </label>
         </div>
+        <div class="form-field">
+          <label for="cars">
+            What are your favorite brand of cars?
 
-        <div class="input cars">
-          <label for="cars">What are your favorite brand of cars?
             <select
             name="cars"
             id="cars"
@@ -150,26 +181,29 @@
               <option value="audi">Audi</option>
               <option value="lada">Lada</option>
             </select>
+
           </label>
         </div>
+        <div class="form-field">
+          <label for="rating">
+            How do you rate our work?
 
-        <div class="input rating">
-          <label for="rating">How do you rate our work?
             <input
             type="range"
             name="rating"
             id="rating"
             value="0"
             >
+
           </label>
         </div>
-
       </fieldset>
-
-      <fieldset class="form-field info">
+      <fieldset class="form-field">
         <legend>Additional info:</legend>
-        <div class="input comments">
-          <label for="comments">Comments:
+        <div class="form-field">
+          <label for="comments">
+            Comments:
+
             <textarea
             name="comments"
             autocomplete="off"
@@ -177,34 +211,35 @@
             cols="20"
             rows="2"
            ></textarea>
+
           </label>
         </div>
+        <div class="form-field">
+          <label for="recomendation">
+            Would you recomend us?
 
-        <div class="input recomendation">
-          <label for="recomendation">Would you recomend us?
             <select
             name="recomendation"
             id="recomendation">
               <option value="yes">Yes</option>
               <option value="no">No</option>
             </select>
+
           </label>
         </div>
       </fieldset>
-
-      <div class="input submit">
+      <div class="form-field">
         <label for="submit">
+
           <input
           id="submit"
           type="submit"
           value="Submit"
           >
-        </label>
 
+        </label>
       </div>
-
     </form>
     <script type="text/javascript" src="./main.js"></script>
   </body>
-
 </html>
diff --git a/src/style.css b/src/style.css
index 25641387..f24b0f7c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,12 +1,12 @@
 /* styles go here */
-.input {
+.form-field {
   margin-bottom: 10px;
 }
 
-.input:last-child {
+.form-field:last-child {
   margin-bottom: 0;
 }
 
-.form-field {
+.form-fieldset {
   margin-bottom: 20px;
 }

From 9963a71815bb9a5332273a3f237687cf91323565 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Tue, 6 Jun 2023 17:59:04 +0200
Subject: [PATCH 22/25] problem fix

---
 src/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index 9c4eba56..f46ee508 100644
--- a/src/index.html
+++ b/src/index.html
@@ -81,7 +81,7 @@
         </div>
         <div class="form-field">
           <label for="agreement">
-            I accept the term of agreement:
+            I accept the term of the agreement:
 
             <input
             type="checkbox"

From aab4e1cd2b026c461a50c6e3a10e3e75bdc0ff71 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Tue, 6 Jun 2023 18:01:55 +0200
Subject: [PATCH 23/25] some more fix

---
 src/index.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/index.html b/src/index.html
index f46ee508..5d68a5db 100644
--- a/src/index.html
+++ b/src/index.html
@@ -24,7 +24,7 @@
     method="post"
     name="personalInformation"
     >
-      <fieldset class="form-field">
+      <fieldset class="form-fieldset">
         <legend>Personal information</legend>
         <div class="form-field">
           <label for="surname">
@@ -81,7 +81,7 @@
         </div>
         <div class="form-field">
           <label for="agreement">
-            I accept the term of the agreement:
+            I accept the term of the agreement
 
             <input
             type="checkbox"
@@ -93,7 +93,7 @@
           </label>
         </div>
       </fieldset>
-      <fieldset class="form-field">
+      <fieldset class="form-fieldset">
         <legend>Registration</legend>
         <div class="form-field">
           <label for="email">
@@ -123,7 +123,7 @@
           </label>
         </div>
       </fieldset>
-      <fieldset class="form-field">
+      <fieldset class="form-fieldset">
         <legend>An interesting fact about you!</legend>
         <div class="form-field">
           <label for="cats">
@@ -198,7 +198,7 @@
           </label>
         </div>
       </fieldset>
-      <fieldset class="form-field">
+      <fieldset class="form-fieldset">
         <legend>Additional info:</legend>
         <div class="form-field">
           <label for="comments">

From 6d58a9c096f35eab7cba3b469e2b8cde958cb7c5 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Fri, 9 Jun 2023 16:40:24 +0200
Subject: [PATCH 24/25] final changes

---
 src/index.html | 136 ++++++++++++++++++++++++-------------------------
 1 file changed, 68 insertions(+), 68 deletions(-)

diff --git a/src/index.html b/src/index.html
index 5d68a5db..e1449ed0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,16 +3,16 @@
 
   <head>
     <meta
-    charset="UTF-8"
+      charset="UTF-8"
     >
     <meta
-    name="viewport"
-    content="width=device-width, user-scalable=no, initial-scale=1.0,
-    maximum-scale=1.0, minimum-scale=1.0"
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0,
+      maximum-scale=1.0, minimum-scale=1.0"
     >
     <meta
-    http-equiv="X-UA-Compatible"
-    content="ie=edge"
+      http-equiv="X-UA-Compatible"
+      content="ie=edge"
     >
     <title>HTML Form</title>
     <link rel="stylesheet" href="./style.css">
@@ -20,9 +20,9 @@
 
   <body>
     <form
-    action="https://mate-academy-form-lesson.herokuapp.com/create-application"
-    method="post"
-    name="personalInformation"
+      action="https://mate-academy-form-lesson.herokuapp.com/create-application"
+      method="post"
+      name="personalInformation"
     >
       <fieldset class="form-fieldset">
         <legend>Personal information</legend>
@@ -31,10 +31,10 @@
             Surname:
 
             <input
-            type="text"
-            autocomplete="off"
-            id="surname"
-            name="surname"
+              type="text"
+              autocomplete="off"
+              id="surname"
+              name="surname"
             >
 
           </label>
@@ -44,10 +44,10 @@
             Name:
 
             <input
-            type="text"
-            autocomplete="off"
-            id="name"
-            name="name"
+              type="text"
+              autocomplete="off"
+              id="name"
+              name="name"
             >
 
           </label>
@@ -57,12 +57,12 @@
             How old are You?
 
             <input
-            type="number"
-            id="age"
-            min="1"
-            max="100"
-            value="12"
-            name="age"
+              type="number"
+              id="age"
+              min="1"
+              max="100"
+              value="12"
+              name="age"
             >
 
           </label>
@@ -72,9 +72,9 @@
             Full date of birth:
 
             <input
-            type="date"
-            id="date"
-            name="date"
+              type="date"
+              id="date"
+              name="date"
             >
 
           </label>
@@ -84,10 +84,10 @@
             I accept the term of the agreement
 
             <input
-            type="checkbox"
-            name="agreement"
-            id="agreement"
-            required
+              type="checkbox"
+              name="agreement"
+              id="agreement"
+              required
             >
 
           </label>
@@ -100,10 +100,10 @@
             E-mail:
 
             <input
-            type="email"
-            name="email"
-            id="email"
-            placeholder="email@example.com"
+              type="email"
+              name="email"
+              id="email"
+              placeholder="email@example.com"
             >
 
           </label>
@@ -113,11 +113,11 @@
             Password:
 
             <input
-            type="password"
-            name="password"
-            id="password"
-            minlength="6"
-            maxlength="15"
+              type="password"
+              name="password"
+              id="password"
+              minlength="6"
+              maxlength="15"
             >
 
           </label>
@@ -130,16 +130,16 @@
             Do you love cats?
 
             <input
-            type="radio"
-            name="cats"
-            id="catsYes"
+              type="radio"
+              name="cats"
+              id="catsYes"
             >
             Yes
 
             <input
-            type="radio"
-            name="cats"
-            id="catsNo"
+              type="radio"
+              name="cats"
+              id="catsNo"
             >
             No
 
@@ -150,9 +150,9 @@
             What is your favorite color?
 
             <input
-            type="color"
-            name="color"
-            id="color"
+              type="color"
+              name="color"
+              id="color"
             >
 
           </label>
@@ -162,9 +162,9 @@
             What time do you go to bed?
 
             <input
-            type="time"
-            name="sleep"
-            id="sleep"
+              type="time"
+              name="sleep"
+              id="sleep"
             >
 
           </label>
@@ -174,9 +174,9 @@
             What are your favorite brand of cars?
 
             <select
-            name="cars"
-            id="cars"
-            multiple>
+              name="cars"
+              id="cars"
+              multiple>
               <option value="bmw">BMW</option>
               <option value="audi">Audi</option>
               <option value="lada">Lada</option>
@@ -189,10 +189,10 @@
             How do you rate our work?
 
             <input
-            type="range"
-            name="rating"
-            id="rating"
-            value="0"
+              type="range"
+              name="rating"
+              id="rating"
+              value="0"
             >
 
           </label>
@@ -205,11 +205,11 @@
             Comments:
 
             <textarea
-            name="comments"
-            autocomplete="off"
-            id="comments"
-            cols="20"
-            rows="2"
+              name="comments"
+              autocomplete="off"
+              id="comments"
+              cols="20"
+              rows="2"
            ></textarea>
 
           </label>
@@ -219,8 +219,8 @@
             Would you recomend us?
 
             <select
-            name="recomendation"
-            id="recomendation">
+              name="recomendation"
+              id="recomendation">
               <option value="yes">Yes</option>
               <option value="no">No</option>
             </select>
@@ -232,9 +232,9 @@
         <label for="submit">
 
           <input
-          id="submit"
-          type="submit"
-          value="Submit"
+            id="submit"
+            type="submit"
+            value="Submit"
           >
 
         </label>

From 162df8f4da93b2a8f9016717b70a500ba6989294 Mon Sep 17 00:00:00 2001
From: Artur Gorniak <arturgurniak@gmail.com>
Date: Fri, 23 Jun 2023 17:01:29 +0200
Subject: [PATCH 25/25] final changes

---
 src/index.html | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/index.html b/src/index.html
index e1449ed0..a73e640e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,18 +2,13 @@
 <html lang="en">
 
   <head>
-    <meta
-      charset="UTF-8"
-    >
+    <meta charset="UTF-8">
     <meta
       name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0,
-      maximum-scale=1.0, minimum-scale=1.0"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
     >
     <meta
-      http-equiv="X-UA-Compatible"
-      content="ie=edge"
-    >
+      http-equiv="X-UA-Compatible" content="ie=edge">
     <title>HTML Form</title>
     <link rel="stylesheet" href="./style.css">
   </head>
@@ -126,20 +121,23 @@
       <fieldset class="form-fieldset">
         <legend>An interesting fact about you!</legend>
         <div class="form-field">
-          <label for="cats">
             Do you love cats?
+          <label for="cats-yes">
 
             <input
               type="radio"
-              name="cats"
-              id="catsYes"
+              name="cats-yes"
+              id="cats-yes"
             >
             Yes
 
+          </label>
+
+          <label for="cats-no">
             <input
               type="radio"
-              name="cats"
-              id="catsNo"
+              name="cats-no"
+              id="cats-no"
             >
             No
 
@@ -176,7 +174,8 @@
             <select
               name="cars"
               id="cars"
-              multiple>
+              multiple
+            >
               <option value="bmw">BMW</option>
               <option value="audi">Audi</option>
               <option value="lada">Lada</option>
@@ -236,7 +235,6 @@
             type="submit"
             value="Submit"
           >
-
         </label>
       </div>
     </form>
