From 7be05c6616ff7c4add505a33242eaafb38d14101 Mon Sep 17 00:00:00 2001
From: AnnaFYZ <113105718+AnnaFYZ@users.noreply.github.com>
Date: Wed, 22 Feb 2023 22:36:54 +0000
Subject: [PATCH 1/2] html written

---
 Form-Controls/index.html | 44 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4344b144..249a3299 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -14,14 +14,54 @@ <h1>Product Pick</h1>
   </header>
   <main>
   <form>
+    Enter order details below
+    <div id="customerName">
+      <label for="name">Your name</label>
+      <input name="name" type="text" id="name" required />
+    </div>
+    <div id="email">
+      <label for="email">Email</label>
+      <input name="email" type="email" id="email" required/>
+    </div>
+    <div id="color">
+      Choose the colour
+      <div class="green">
+        <label for="green">green</label>
+        <input name="color" type="radio" id="green" value="green" />
+      </div>
+      <div class="blue">
+        <label for="blue">blue</label>
+        <input name="color" type="radio" id="blue" value="blue" />
+      </div>
+      <div class="yellow">
+        <label for="yellow">yellow</label>
+        <input name="color" type="radio" id="yellow" value="yellow" />
+      </div>
+      </div>
+    <div id="size">
+      <label for="size">Select your size</label>
+      <select id="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> 
+    </div>
+    <div id="date">
+      <label for="date">When would you like your t-shirt to be delivered?</label>
+      <input name="date" type="date" id="date" min="2023-03-01" max="2023-03-28" required/>
+    </div>
+
+
     <!-- write your html here-->
     <!-- try writing out the requirements first-->
   </form>
 
   </main>
   <footer>
-    <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
+    <h2>By Anna</h2>
   </footer>
 </body>
 

From 1a3c67a165dd24c69e460eff5a0120a17c962621 Mon Sep 17 00:00:00 2001
From: AnnaFYZ <113105718+AnnaFYZ@users.noreply.github.com>
Date: Thu, 23 Feb 2023 21:01:16 +0000
Subject: [PATCH 2/2] css

---
 Form-Controls/index.html | 34 +++++++-----------
 Form-Controls/styles.css | 77 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 90 insertions(+), 21 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 249a3299..1eeb9232 100644
--- a/Form-Controls/index.html
+++ b/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="T-shirt order form">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
 </head>
@@ -14,31 +14,27 @@ <h1>Product Pick</h1>
   </header>
   <main>
   <form>
-    Enter order details below
+    <h3>Enter order details below</h3>
     <div id="customerName">
       <label for="name">Your name</label>
-      <input name="name" type="text" id="name" required />
+      <input name="name" type="text" id="name" pattern="\w{2,16}" required />
     </div>
-    <div id="email">
+    <div id="emailSection">
       <label for="email">Email</label>
       <input name="email" type="email" id="email" required/>
     </div>
     <div id="color">
-      Choose the colour
-      <div class="green">
+      <h4>Choose the colour</h4>
+      <div class="colors">
+        <input name="color" type="radio" id="green" value="green" required/>
         <label for="green">green</label>
-        <input name="color" type="radio" id="green" value="green" />
-      </div>
-      <div class="blue">
-        <label for="blue">blue</label>
         <input name="color" type="radio" id="blue" value="blue" />
-      </div>
-      <div class="yellow">
-        <label for="yellow">yellow</label>
+        <label for="blue">blue</label>
         <input name="color" type="radio" id="yellow" value="yellow" />
-      </div>
-      </div>
-    <div id="size">
+        <label for="yellow">yellow</label>
+      </div> 
+    </div>
+    <div id="sizeSection">
       <label for="size">Select your size</label>
       <select id="size" required>
         <option value="xs">XS</option>
@@ -49,14 +45,10 @@ <h1>Product Pick</h1>
         <option value="xxl">XXL</option>
       </select> 
     </div>
-    <div id="date">
+    <div id="dateSection">
       <label for="date">When would you like your t-shirt to be delivered?</label>
       <input name="date" type="date" id="date" min="2023-03-01" max="2023-03-28" required/>
     </div>
-
-
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
   </form>
 
   </main>
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index e69de29b..dac35880 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -0,0 +1,77 @@
+header {
+    text-align: center;
+}
+
+footer {
+    font-style: italic;
+    position: fixed;
+    bottom: 0;
+    left: 4rem;
+   
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    font-size: 24px;
+}
+
+h3 {
+    text-align: center;
+}
+
+div {
+    padding: 10px;
+}
+
+input, label {
+    display: inline-block;
+}
+
+label {
+    width: 200px;
+}
+
+#color {
+    display: flex;
+    flex-direction: column;
+}
+
+h4 {
+    font-weight: 200;
+    margin-bottom: 0;
+    margin-top: 0;
+    min-width: fit-content;
+}
+
+.colors {
+    display: inline-flex;
+}
+
+.colors label {
+    margin-left: 5px;
+}
+
+select {
+    width: 170px;
+    font-size: 16px;
+}
+
+#dateSection {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+}
+
+#dateSection label {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+#date {
+    width: 40%;
+    align-self: end;
+    font-size: 16px;
+    margin-right: 4rem;
+}
\ No newline at end of file