London10-Anna_Hrychaniuk-HTML/CSS-Week2

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,14 +14,46 @@ <h1>Product Pick</h1>
   </header>
   <main>
   <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
+    <h3>Enter order details below</h3>
+    <div id="customerName">
+      <label for="name">Your name</label>
+      <input name="name" type="text" id="name" pattern="\w{2,16}" required />
+    </div>
+    <div id="emailSection">
+      <label for="email">Email</label>
+      <input name="email" type="email" id="email" required/>
+    </div>
+    <div id="color">
+      <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="blue" value="blue" />
+        <label for="blue">blue</label>
+        <input name="color" type="radio" id="yellow" value="yellow" />
+        <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>
+        <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="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>
   </form>
 
   </main>
   <footer>
-    <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
+    <h2>By Anna</h2>
   </footer>
 </body>
 

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;
+}