added style.css page and linked to index.html

Author: TaliaKucuk

Form-Controls/index.html

@@ -6,15 +6,19 @@
     <title>My form exercise</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <header>
       <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <div><label for="name">Name:</label>
-        <input type="text" id="name" name="customers_name" required pattern=.*\S.*\S.*></div>
+        <div>
+          <label for="name">Name:</label>
+        <input type="text" id="name" name="customers_name" required pattern=".*\S.*\S.*">
+      </div>
         <!-- 1. What is the customer's name? I must collect this data and 
            it contains at least two non-space characters. -->
            <div><label for="mail">Email:</label>
@@ -48,9 +52,9 @@ <h1>Product Pick</h1>
 </div>
 <!-- 4. What size does the customer want? I must provide the following 6 options:
 XS, S, M, L, XL, XXL-->
-<p class="button">
+<div class="button">
   <button type="submit">Submit</button>
-</p>
+</div>
       </form>
     </main>
     <footer>

Form-Controls/style.css

@@ -0,0 +1,55 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+  }
+  
+  header,
+  footer {
+    text-align: center;
+    padding: 1rem;
+  }
+  
+  main {
+    display: flex;
+    justify-content: center;
+  }
+  
+  form {
+    background-color: white;
+    padding: 2rem;
+    margin-top: 2rem;
+    width: 320px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  form div {
+    margin-bottom: 1rem;
+  }
+  
+  label {
+    display: block;
+    margin-bottom: 0.4rem;
+    font-weight: bold;
+  }
+  
+  input,
+  select,
+  button {
+    width: 100%;
+    padding: 0.6rem;
+    box-sizing: border-box;
+  }
+  
+  button {
+    background-color: black;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  button:hover {
+    background-color: #333;
+  }