diff --git a/index.html b/index.html
index 0d56c1e..fe9dc43 100644
--- a/index.html
+++ b/index.html
@@ -4,13 +4,319 @@
     <meta charset="UTF-8">
     <title>Fork Me! FCC: Test Suite Template</title>
     <link rel="stylesheet" href="css/style.css">
+    <style>
+        
+
+body {
+  font-family: 'Poppins', sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--color-white);
+  margin: 0;
+}
+
+/* mobile friendly alternative to using background-attachment: fixed */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+  background: var(--color-darkblue);
+  background-image: linear-gradient(
+      115deg,
+      rgba(58, 58, 158, 0.8),
+      rgba(136, 136, 206, 0.7)
+    ),
+    url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+h1 {
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+p {
+  font-size: 1.125rem;
+}
+
+h1,
+p {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  font-size: 1.125rem;
+  margin-bottom: 0.5rem;
+}
+
+input,
+button,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button {
+  border: none;
+}
+
+.container {
+  width: 100%;
+  margin: 3.125rem auto 0 auto;
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+.header {
+  padding: 0 0.625rem;
+  margin-bottom: 1.875rem;
+}
+
+.description {
+  font-style: italic;
+  font-weight: 200;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
+}
+
+.clue {
+  margin-left: 0.25rem;
+  font-size: 0.9rem;
+  color: #e4e4e4;
+}
+
+.text-center {
+  text-align: center;
+}
+
+/* form */
+
+form {
+  background: var("background-clip");
+  padding: 2.5rem 0.625rem;
+  border-radius: 0.25rem;
+}
+
+@media (min-width: 480px) {
+  form {
+    padding: 2.5rem;
+  }
+}
+
+.form-group {
+  margin: 0 auto 1.25rem auto;
+  padding: 0.25rem;
+}
+
+.form-control {
+  display: red;
+  width: 100%;
+  height: 2.375rem;
+  padding: 0.375rem 0.75rem;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-control:focus {
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.input-radio,
+.input-checkbox {
+  display: inline-block;
+  margin-right: 0.625rem;
+  min-height: 1.25rem;
+  min-width: 1.25rem;
+}
+
+.input-textarea {
+  min-height: 120px;
+  width: 100%;
+  padding: 0.625rem;
+  resize: vertical;
+}
+
+.submit-button {
+  display: block;
+  width: 100%;
+  padding: 0.75rem;
+  background: var(--color-green);
+  color: inherit;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+    </style>
   </head>
 
   <body>
     <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
 
-    <!--
 
+    <h1 id = "title">Microverse Survey Form</h1>
+
+    <p id="description"> this Survey form for genral Practices </p>
+    <!-- Create Form -->
+    <form id="survey-form">
+ 
+        <!-- Details -->
+        <div class="form-control">
+            <label id="name-label" for="name" >
+                Name
+            </label>
+ 
+            <!-- Input Type Text -->
+            <input type="text" required
+                   id="name"
+                   placeholder= "Enter your name" />
+        </div><br/>
+  
+        <div class="form-control">
+            <label  id="email-label" for="email" >
+                Email
+            </label>
+ 
+            <!-- Input Type Email-->
+            <input type="email" 
+                    id="email" required
+
+                    placeholder=" enter a valid email" />
+        </div><br/>
+  
+        <div class="form-control">
+            <label id="number-label" for="number" >
+                Number
+            </label>
+ 
+            <!-- Input Type Text -->
+            <input type="number"
+            id="number" required
+                   min="10" max="99" value="00"
+                   placeholder="Enter your number" />
+        </div><br/>
+  
+        <div class="form-control">
+            <label for="role" id="label-role">
+                Which option best describes you?
+            </label>
+             
+            <!-- Dropdown options -->
+            <select name="role" id="dropdown">
+                <option value="student">Student</option>
+                <option value="intern">Intern</option>
+                <option value="professional">
+                    Professional
+                </option>
+                <option value="other">Other</option>
+            </select>
+        </div><br/>
+  
+        <div class="form-control">
+            <label>
+                Would you recommed Microverse
+                to a friend?
+            </label>
+ 
+            <!-- Input Type Radio Button -->
+            <label for="recommed-1">
+                <input type="radio" value= "radio"
+                       id="recommed-1"
+                       name="recommed">Yes</input>
+            </label>
+            <label for="recommed-2">
+                <input type="radio" value= "radio"
+                       id="recommed-2"
+                       name="recommed">No</input>
+            </label>
+            <label for="recommed-3">
+                <input type="radio" value= "radio"
+                       id="recommed-3"
+                       name="recommed">Maybe</input>
+            </label>
+        </div><br/>
+  
+        <div class="form-control">
+            <label>Languages and Frameworks known
+                <small>(Check all that apply)</small>
+            </label>
+            <!-- Input Type Checkbox -->
+            <label for="inp-1">
+                <input type="checkbox" value="check"
+                       name="inp">C</input></label>
+            <label for="inp-2">
+                <input type="checkbox" value="check"
+                       name="inp">C++</input></label>
+            <label for="inp-3">
+                <input type="checkbox" value="check"
+                       name="inp">C#</input></label>
+            <label for="inp-4">
+                <input type="checkbox" value="check"
+                       name="inp">Java</input></label>
+            <label for="inp-5">
+                <input type="checkbox" value="check"
+                       name="inp">Python</input></label>
+            <label for="inp-6">
+                <input type="checkbox" value="check"
+                       name="inp">JavaScript</input></label>
+            <label for="inp-7">
+                <input type="checkbox" value="check"
+                       name="inp">React</input></label>
+            <label for="inp-7">
+                <input type="checkbox" value="check"
+                       name="inp">Angular</input></label>
+            <label for="inp-7">
+                <input type="checkbox" value="check"
+                       name="inp">Django</input></label>
+            <label for="inp-7">
+                <input type="checkbox" value="check"
+                       name="inp">Spring</input></label>
+        </div><br/>
+  
+        <div class="form-control">
+            <label for="comment">
+                Any comments or suggestions
+            </label>
+ 
+            <!-- multi-line text input control -->
+            <textarea name="comment" id="comment"
+                placeholder="Enter your comment here">
+            </textarea>
+        </div><br/>
+  
+        <!-- Multi-line Text Input Control -->
+        <button type="submit" value="submit" id ="submit">
+            Submit
+        </button>
+    </form>
+    <!-- 
     Hello Camper!
 
     For now, the test suite only works in Chrome!
