mate-academy · kbekher · Apr 25, 2023 · Apr 25, 2023 · Apr 25, 2023 · Apr 25, 2023
diff --git 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://kbekher.github.io/layout_html-form/)
+- [TEST REPORT LINK](https://kbekher.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)
 ___
@@ -40,7 +40,7 @@ Create HTML page with form. On form submit send form data to `https://mate-acade
 - Age should be at least `1` and at max `100` with a default value of `12`
 - The email field should have placeholder value: `email@example.com`.
 - Text fields should have `autocomplete="off"`.
-- `Submit` button should have a `type="submit"` 
+- `Submit` button should have a `type="submit"`
 - Vertical distance between inputs should be `10px`
 - Vertical distance between groups should be `20px`
 - Any other styles should be browser default

diff --git a/src/index.html b/src/index.html
@@ -11,7 +11,149 @@
     <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">
+      <fieldset class="fieldset">
+        <legend>Personal information</legend>
+
+        <label class="form-field">
+          Surname:
+          <input
+            type="text"
+            name="surname"
+            autocomplete="off"
+          >
+        </label>
+
+        <label class="form-field">
+          Name:
+          <input
+            type="text"
+            name="name"
+            autocomplete="off"
+          >
+        </label>
+
+        <label class="form-field">
+          How old are You?
+          <input
+            type="number"
+            name="age"
+            value="12"
+            min="1"
+            max="100"
+          >
+        </label>
+
+        <label class="form-field">
+          Full date of birth:
+          <input type="date" name="dateOfBirth">
+        </label>
+
+        <label class="form-field">
+          I accept the term of the agreement
+          <input type="checkbox" name="term">
+        </label>
+      </fieldset>
+
+      <fieldset class="fieldset">
+        <legend>Registration</legend>
+
+        <label class="form-field">
+          E-mail:
+          <input
+            type="email"
+            name="email"
+            placeholder="email@example.com"
+            required
+          >
+        </label>
+
+        <label class="form-field">
+          Password:
+          <input
+            type="password"
+            name="password"
+            minlength="7"
+            maxlength="32"
+            required
+          >
+        </label>
+      </fieldset>
+
+      <fieldset class="fieldset">
+        <legend>An interesting fact about you!</legend>
+
+        <div class="form-field">
+          Do you love cats?
+          <label>
+            <input
+              type="radio"
+              name="loveCats"
+              value="yes"
+            >
+            Yes
+          </label>
+          <label>
+            <input
+              type="radio"
+              name="loveCats"
+              value="no"
+            >
+            No
+          </label>
+        </div>
+
+        <label class="form-field">
+          What is your favorite color?
+          <input type="color" name="favColor">
+        </label>
+
+        <label class="form-field">
+          What time do you go to bed?
+          <input type="time" name="bedTime">
+        </label>
+
+        <label class="form-field">
+          What are your favorite brand of cars?
+          <select name="favCarBrand" multiple>
+            <option value="BMW">BMW</option>
+            <option value="Audi">Audi</option>
+            <option value="Lada">Lada</option>
+          </select>
+        </label>
+
+        <label class="form-field">
+          How do you rate our work?
+          <input
+            type="range"
+            name="workRate"
+            min="0"
+            max="50"
+          >
+        </label>
+      </fieldset>
+
+      <fieldset class="fieldset">
+        <legend>Additional info:</legend>
+
+        <label class="form-field">Comments:
+          <textarea
+            name="comment"
+            cols="20"
+            rows="2"
+         ></textarea>
+        </label>
+
+        <label class="form-field">
+          Would you recommend us?
+          <select name="recommendation">
+            <option value="yes" checked>yes</option>
+            <option value="no">no</option>
+          </select>
+        </label>
+      </fieldset>
+      <button type="submit">Submit</button>
+    </form>
     <script type="text/javascript" src="./main.js"></script>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1 +1,11 @@
-/* styles go here */
+.fieldset:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+.form-field {
+  display: block;
+}
+
+.form-field:not(:last-child) {
+  margin-bottom: 10px;
+}