London 9 Lovelace- Oleksii Chepurnyi -HTML-CSS-Challenges/Form-Controls

.vscode/settings.json

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

Form-Controls/index.html

@@ -14,14 +14,52 @@ <h1>Product Pick</h1>
   </header>
   <main>
   <form>
+    <div class="section">
+    <div class="name">
+      <label for="name">Enter your Name* (2 to 8 characters):</label>
+
+      <input type="text" id="name" name="name" required minlength="2" maxlength="8" size="10" />
+    </div>
+    <div class="email">
+      <label for="email">Enter your e-mail*</label>
+      <input type="email" id="email" name="email" required size="30" />
+    </div>
+    <div class="select-color">
+      <label for="color">Choose your T-shirt color*</label>
+      <select name="color" id="color" required>
+        <option value="red">Red</option>
+       <option value="green">Green</option>
+        <option value="blue">Blue</option>
+      </select>
+    </div>
+
+    <div class="select-size">
+      <label for="size">Choose your T-shirt size*</label>
+      <select name="size" 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>
+      <label for="delivery-date">Choose delivery date*</label>
+
+      <input type="date" id="delivery-date" name="delivery-date" value="2022-11-10" min="2022-11-10" max="2022-12-01"
+        step="1" required />
+    </div>
+    <p><button>Submit</button></p>
+    </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 Oleksii Chepurnyi</h2>
   </footer>
 </body>
 

Form-Controls/styles.css

@@ -0,0 +1,41 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');
+body {
+    text-align: center;
+    font-family: "Roboto", sans-serif;
+    font-size: 1.2rem;
+}
+
+label {
+    display: block;
+    padding-top: 1em;
+    margin-top: 1em;
+
+}
+
+input {
+    width: 12em;
+    height: 1.4em;
+}
+
+select {
+    width: 12em;
+    height: 1.4em;
+}
+
+button {
+    font: 1em sans-serif;
+    background-color:rgb(66, 211, 53);
+    border: none;
+    border-radius: 5px;
+    color: rgb(12, 11, 11);
+    padding: 16px 32px;
+    margin: 1em;
+    cursor: pointer;
+}
+.section {
+    text-align: center;
+    background-color: antiquewhite;
+}
+h1, footer{
+    background-color: rgb(245, 241, 237);
+}