CodeYourFuture · Luke-Manyamazi · Oct 16, 2024 · Oct 16, 2024 · Oct 16, 2024 · Oct 16, 2024
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -1,28 +1,93 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>My form exercise</title>
-  <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <header>
-    <h1>Product Pick</h1>
-  </header>
-  <main>
-  <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
-  </form>
-
-  </main>
-  <footer>
-    <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
-  </footer>
-</body>
-
-</html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>My form exercise</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="stylesheet"
+      href="/Wireframe/Module-User-Focused-Data/Form-Controls/styles.css"
+    />
+  </head>
+  <body>
+    <header>
+      <h1>Product Pick</h1>
+    </header>
+    <main>
+      <div class="form_container">
+        <form>
+          <fieldset>
+            <legend>Product Pick Form</legend>
+            <div class="name">
+              <label for="name">Name: </label>
+              <input
+                name="name"
+                type="text"
+                id="name"
+                placeholder="Your name"
+                required
+                pattern=".{2,}"
+              />
+            </div>
+            <br />
+            <div class="email">
+              <label for="email">Email: </label>
+              <input
+                name="email"
+                id="email"
+                type="email"
+                placeholder="Your email"
+                required
+              />
+            </div>
+            <div class="color">
+              <fieldset>
+                <legend>Please select your favorite color:</legend>
+                <input type="radio" id="red" name="color" value="red" />
+                <label for="red">Red</label><br />
+                <input type="radio" id="green" name="color" value="green" />
+                <label for="green">Green</label><br />
+                <input type="radio" id="blue" name="color" value="blue" />
+                <label for="blue">Blue</label><br />
+              </fieldset>
+            </div>
+            <br />
+            <div class="size">
+              <label for="size">Choose a size:</label>
+              <select name="size" id="size" required>
+                <option value="select">Select a size</option>
+                <option value="extra_small">XS</option>
+                <option value="small">S</option>
+                <option value="medium">M</option>
+                <option value="large">L</option>
+                <option value="extra_large">XL</option>
+                <option value="extra_extra_large">XXL</option>
+              </select>
+            </div>
+            <br />
+            <div class="date">
+              <label for="date">Choose a deliver date:</label>
+              <input
+                type="date"
+                id="date"
+                name="delivery_date"
+                min="2024-11-06"
+                max="2024-12-06"
+              />
+            </div>
+          </fieldset>
+        </form>
+        <br /><br /><br />
+        <button class="button" type="submit" value="submit">Submit</button>
+      </div>
+      <br /><br /><br /><br />
+      <div class="footer">
+        <footer>
+          <h2>By Luke Manyamazi</h2>
+        </footer>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
@@ -0,0 +1,108 @@
+body {
+  width: 100%;
+  padding: 1em 1em 2em 3em;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  background-color: #7AC7C7;
+  color: #ebe0e0;
+  font-size: large;
+}
+
+.form_container {
+  width: 700px;
+  height: 610px;
+  padding: 2em;
+  background-color: #1b350e;
+  padding: 1em;
+  color: #ffffff;
+}
+
+input:valid {
+  border: 2px solid green;
+  background-color: #e6ffe6;
+}
+
+input:invalid {
+  border: 2px solid red;
+  background-color: #ffe6e6;
+}
+
+input[type=text],
+input[type=email],
+input[type=date],
+select {
+  width: 50%;
+  padding: 8px 20px;
+  margin: 8px 0;
+  display: block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.color {
+  border: none;
+  line-height: 2em;
+  text-decoration: none;
+}
+
+input[type=radio] {
+  border: none;
+}
+
+select {
+  font-size: medium;
+  row-gap: 1.5rem;
+  width: 200px;
+}
+
+.button {
+  border: none;
+  color: white;
+  padding: 15px 50px;
+  text-align: center;
+  text-align: none;
+  font-weight: bold;
+  font-size: 24px;
+  cursor: pointer;
+  display: inline-block;
+  border-radius: 10px;
+  background-color: rgb(31, 159, 159);
+  width: 300px;
+
+
+}
+
+header,
+footer {
+  background-color: #1b350e;
+  color: #ffffff;
+}
+
+h1,
+h2 {
+  margin: 1em;
+
+}
+
+input,
+select {
+  background-color: #f0f0f0;
+  color: #333333;
+}
+
+.name,
+.email,
+p,
+.size,
+.date {
+  font-weight: bold;
+}
+
+fieldset {
+  padding: 1em;
+}
+
+legend {
+  font-weight: bold;
+  font-size: 24px;
+}