WestMidlands | Danial Bashirzadeh | Module-User-Focused-Data: [ Form-Controls ] | WEEK 2

Form-Controls/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>My form exercise</title>
-  <meta name="description" content="">
+  <meta name="description" content="description" content="Order custom T-shirts by size, color, and delivery date.">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
 </head>
@@ -13,15 +13,63 @@
     <h1>Product Pick</h1>
   </header>
   <main>
+    <section>
   <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
+    <fieldset>
+      <legend>Customer Information</legend>
+    <!-- Customer Name -->
+    <div>
+    <label for="name" >Customer Name:</label>
+    <input type="text" id="name" name="name" placeholder="Enter your name" pattern="[A-Za-z\s]" required>
+    </div>
+    <!-- Customer Email -->
+    <div>
+    <label for="email">Email Address:</label>
+    <input type="email" id="email" name="email" placeholder="Enter your Email Address" required>
+  </div>
+  </fieldset>
+  <fieldset>
+    <legend>Order Details</legend>
+    <!-- T-Shirt Color -->
+    <div>
+    <label for="color">T-Shirt Color:</label>
+    <select id="color" name="color" required>
+      <option value="">Choose a color</option>
+      <option value="red">Red</option>
+      <option value="blue">Blue</option>
+      <option value="green">Green</option>
+    </select>
+  </div>
+    <!-- T-Shirt Size -->
+    <div>
+    <label for="size">T-Shirt Size:</label>
+      <select id="size" name="size" required>
+      <option value="">Choose a size</option>
+      <option value="XS">XS</option>
+      <option value="S">S</option>
+      <option value="M">M</option>
+      <option value="L">L</option>
+      <option value="XL">XL</option>
+      <option value="XXL">XXL</option>
+    </select>
+  </div>
+    <!-- Delivery Date -->
+    <div>
+    <label for="date">Preferred Delivery Date:</label>
+    <input type="date" id="date" name="date" required >
+  </div>
+  </fieldset>
+   <!-- Submit Button -->
+  <div>
+    <input type="submit" value="Submit Order">
+  </div>
   </form>
+</section>
 
   </main>
   <footer>
-    <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
+
+    <h2>Danial Bashirzadeh</h2>
   </footer>
 </body>
 

Form-Controls/styles.css

@@ -0,0 +1,81 @@
+body{
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    background-color: #e4e1e1;
+}
+
+header {
+    background: #0056b3;
+    color: white;
+    padding: 20px;
+    text-align: center;
+}
+
+main {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background: white;
+    border-radius: 8px;
+}
+
+fieldset {
+    border: 2px solid #007BFF;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+
+legend {
+    font-weight: bold;
+    color: #0056b3;
+}
+
+label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: bold;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="date"],
+select {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+footer {
+    text-align: center;
+    padding: 10px;
+    background: #007BFF;
+    color: white;
+    position: relative;
+    bottom: 0;
+    width: 100%;
+}
+
+input[type="submit"] {
+    background-color: #2e860b; 
+    color: white; 
+    padding: 10px; 
+    border: none; 
+    border-radius: 5px; 
+    cursor: pointer;
+    font-size: 16px; 
+    width: 40%; 
+  }
+
+  input[type="submit"]:hover {
+    background-color: #24690a; 
+  }
+
+  form > div {
+    display: flex; 
+    justify-content: center; 
+  }