diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..ab8c3a097 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,4 +1,4 @@
-
+
@@ -6,6 +6,7 @@
My form exercise
+
@@ -13,15 +14,63 @@ Product Pick
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
new file mode 100644
index 000000000..a3ecf1c3d
--- /dev/null
+++ b/Form-Controls/style.css
@@ -0,0 +1,79 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f2f2f2;
+ margin: 0;
+}
+
+header {
+ background-color: #333;
+ color: white;
+ text-align: center;
+ padding: 20px;
+}
+
+header h1 {
+ margin: 0;
+}
+
+main {
+ max-width: 600px;
+ margin: 30px auto;
+ padding: 0 20px;
+}
+
+fieldset {
+ background-color: white;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 20px;
+}
+
+legend {
+ font-weight: bold;
+ padding: 0 20px;
+}
+
+fieldset p {
+ margin-bottom: 15px;
+}
+
+input[type="text"],
+input[type="email"] {
+ display: block;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 10px;
+ margin-top: 6px;
+ border: 1px solid #bbb;
+ border-radius: 5px;
+}
+
+select {
+ display: block;
+ margin-top: 6px;
+ padding: 10px;
+ border: 1px solid #bbb;
+ border-radius: 5px;
+}
+
+input[type="submit"] {
+ background-color: #bbb;
+ color: black;
+ font-weight: bold;
+ padding: 10px 20px;
+ border-radius: 5px;
+}
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="radio"]:focus,
+input[type="submit"]:focus,
+select:focus {
+ outline: 3px solid black;
+}
+
+footer {
+ font-weight: bold;
+ padding: 10px 20px;
+ margin-top: 6px;
+}