diff --git a/src/index.html b/src/index.html
index 3348db1c..73b05482 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,7 +11,156 @@
     <link rel="stylesheet" href="./style.css">
   </head>
   <body>
-    <h1>HTML Form</h1>
     <script type="text/javascript" src="./main.js"></script>
+    <form
+      action="https://mate-academy-form-lesson.herokuapp.com/create-application"
+      method="post"
+    >
+      <fieldset class="field">
+        <legend>Personal information</legend>
+        <label class="form">
+          Surname:
+          <input
+            type="text"
+            name="surname"
+            autocomplete="off"
+          >
+        </label>
+
+        <label class="form">
+          Name:
+          <input
+            type="text"
+            name="name"
+            autocomplete="off"
+          >
+        </label>
+
+        <label class="form">
+          How old are you?
+          <input
+            type="number"
+            name="age"
+            value="12"
+            min="1"
+            max="100"
+          >
+        </label>
+
+        <label class="form">
+          Full date of birth:
+          <input type="date" name="date">
+        </label>
+
+        <label class="form">
+          I accept the terms of the agreement
+          <input
+            type="checkbox"
+            name="terms"
+            required
+          >
+        </label>
+      </fieldset>
+
+      <fieldset class="field">
+        <legend>Registration</legend>
+        <label class="form">
+          E-mail:
+          <input
+            type="email"
+            name="email"
+            placeholder="email@example.com"
+          >
+        </label>
+
+        <label class="form">
+          Password
+          <input
+            type="password"
+            name="password"
+            minlength="5"
+            maxlength="10"
+          >
+        </label>
+      </fieldset>
+
+      <fieldset class="field">
+        <legend>An interesting fact about you!</legend>
+        <div class="form">
+          Do you love cats?
+          <label>
+            <input
+              type="radio"
+              name="catLover"
+              value="yes"
+            >
+            Yes
+          </label>
+
+          <label>
+            <input
+              type="radio"
+              name="catLover"
+              value="no"
+            >
+            No
+          </label>
+        </div>
+
+        <label class="form">
+          What is your favorite color?
+          <input type="color" name="color">
+        </label>
+        <label class="form">
+          What time do you go to bed?
+          <input
+            type="time"
+            name="bedtime"
+            step="2"
+          >
+        </label>
+
+        <label class="form">
+          What are your favourite car brands?
+          <select name="carBrans" multiple >
+            <option value="BMW">BMW</option>
+            <option value="Audi">Audi</option>
+            <option value="Lada">Lada</option>
+          </select>
+        </label>
+
+        <label class="form">
+          How do you rate our work?
+          <input
+            type="range"
+            name="rateOurWork"
+            min="0"
+            max="10"
+          >
+        </label>
+      </fieldset>
+
+      <fieldset class="field">
+        <legend>Additional info:</legend>
+        <label class="form">
+          Comments:
+          <textarea
+            name="feedback"
+            rows="2"
+            cols="20"
+         ></textarea>
+        </label>
+
+        <label class="form">
+        Would you recommend us?
+          <select name="recommend" required >
+            <option value="yes" selected >Yes</option>
+            <option value="no">No</option>
+          </select>
+        </label>
+      </fieldset>
+
+      <button type="submit">Submit</button>
+    </form>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
index c4301db2..37e34430 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1 +1,13 @@
-/* styles go here */
+.field {
+  display: block;
+  margin-bottom: 20px;
+}
+
+.form {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.form:last-child {
+  margin-bottom: 0;
+}
