From 2a36c16f182ac9763a38216d3eb9e714ed233921 Mon Sep 17 00:00:00 2001
From: PaulinaWywrot <wywrot.paula@gmail.com>
Date: Sat, 6 May 2023 12:32:01 +0100
Subject: [PATCH] complete form

---
 .vscode/settings.json    |  3 +++
 Form-Controls/index.html | 42 ++++++++++++++++++++++++++++++++++++----
 Form-Controls/styles.css | 13 +++++++++++++
 3 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6b665aaa
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4344b144..ea09dbba 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -13,15 +13,49 @@
     <h1>Product Pick</h1>
   </header>
   <main>
-  <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
+<form>
+    <div class="name">
+      <label for="name">Full Name</label>
+      <input type="text" name="name" id="name" placeholder="Full name" pattern="[A-Za-z\s]+"
+        required>
+    </div>
+    <div class="email">
+      <label for="email">Email</label>
+      <input type="email" name="email" id="email" placeholder="Email address" required>
+    </div>
+  </fieldset>
+  <fieldset class="colour">
+    <legend> Colour</legend>
+    <label for="colour">Select the colour</label>
+    <select id="colour" name="colour" required>
+      <option value="green">Green</option>
+      <option value="black">Black</option>
+      <option value="red">Red</option>
+    </select>
+  </fieldset>
+  <fieldset class="size">
+    <legend>Size</legend>
+  <label for="size">Select the size</label>
+  <select id="size" name="size" required>
+    <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>
+  </fieldset>
+  <fieldset class="date">
+    <legend>Delivery Date</legend>
+    <label for="date">Pick any date within the next four weeks</label>
+    <input type="date" name="date" id="date" min="2023-05-06" max="2022-06-03" required>
+  </fieldset>
   </form>
 
   </main>
   <footer>
     <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
+    <h2>By Paulina Wywrot</h2>
   </footer>
 </body>
 
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index e69de29b..0143a3e7 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -0,0 +1,13 @@
+:root {
+    --blue: #d2f8fd;
+    --light-blue: #0995a8;
+  
+}
+#name:focus,
+#email:focus,
+#date:focus,
+#colour:focus,
+#size:focus {
+    background-color: var(--blue);
+    color: var(--light-blue);
+}
\ No newline at end of file