London 10 - Elena Barker - HTML/CSS - Challenges

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5502
+}

Form-Controls/index.html

@@ -13,15 +13,60 @@
     <h1>Product Pick</h1>
   </header>
   <main>
-  <form>
+  <fieldset>
     <!-- write your html here-->
     <!-- try writing out the requirements first-->
-  </form>
+    <legend><b>Choose your best T-shirt</b></legend>
+    <label for="firstname">First name: </label>
+    <input type="text" id="firstname">
+    <br>
+    <br>
+
+    <label for="lastname">Last name: </label>
+    <input type="text" id="lastname">
+    <br>
+    <br>
+
+
+    <label for="email">Email: </label>
+    <input type="email" id="email">
+    <br>
+    <br>
+
+    <label for="colour">Colour: </label>
+    <select type="colour" id="colour" name="colour">
+      <option value="yellow">Yellow</option>
+      <option value="blue">Blue</option>
+      <option value="green">Green</option>
+    </select>
+    <br>
+    <br>
+
+    <label for="size">Size: </label>
+    <select type="size" id="size" name="size">
+      <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>
+    <br>
+    <br>
+
+    <label for="deliverydate">Delivery Date: </label>
+    <input type="date" value="date" id="date" max="2023-06-09" required>
+    <br>
+    <br>
+
+    <input type="submit" value="Submit" id="button">
+
+  </fieldset>
 
   </main>
   <footer>
     <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
+    <h2>By Elena Barker</h2>
   </footer>
 </body>
 

Form-Controls/styles.css

@@ -0,0 +1,46 @@
+body {
+    height: 100vh;
+    width: 500px;
+    background-image: url('/Form-Controls/T-shirts.webp');
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+
+
+}
+
+fieldset {
+    background-color: #E3F2C1;
+    border: 2px solid;
+    width: 500px;
+    height: 400px;
+    padding: 10px 10px;
+    margin-left: 100px;
+
+}
+
+legend {
+    font-size: larger;
+    font-weight: 400;
+}
+
+input {
+    margin: 5px;
+}
+
+#button {
+    font-size: larger;
+    padding: 10px;
+    background-color: bisque;
+    border: 2px solid burlywood;
+    border-radius: 8px;
+    transition-duration: 0.4s;
+
+}
+
+#button:hover {
+    background-color: white;
+
+}