CodeYourFuture · AlexJora · Jun 7, 2022 · Jun 9, 2022 · Jun 9, 2022
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -7,21 +7,68 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+
 </head>
 <body>
   <header>
     <h1>Product Pick</h1>
   </header>
   <main>
-  <form>
+  <form >
     <!-- write your html here-->
     <!-- try writing out the requirements first-->
+    <label for="fname">First name:</label><br>
+    <input type="text" id="fname" name="first-name" placeholder="Enter your first name" minlength="2" maxlength="15" pattern= "[a-zA-Z'-'\s]*" required><br><br>
+    <label for="lname">Last name:</label><br>
+    <input type="text" id="lname" name="last-name" placeholder="Enter your last name"  minlength="2" maxlength="15" pattern= "[a-zA-Z'-'\s]*" required><br><br>
+    <label for="email">Email:</label><br>
+    <input type="email" id="email" name="email" placeholder="Enter a valid email address" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required autocomplete="off">
+
+    <fieldset>
+     <legend>Choose a Colour:</legend>
+
+     <input type="radio" class="red" id="red" name="color" value="red">
+     <label for="red">Red</label><br>
+
+     <input type="radio" class="green" id="green" name="color" value="green">
+     <label for="green">Green</label><br>
+
+     <input type="radio" class="blue" id="blue" name="color" value="blue">
+     <label for="blue">Blue</label><br><br>
+    </fieldset>
+
+
+    <label for="size">Choose a Size:</label>
+     <select 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>
+
+    <p>Choose a Delivery Date in next 4 weeks:</p>
+    <label for="date">Enter a date:</label>
+    <input type="date" id="date" value="date" name="delivery" max="2022-07-10" required><br><br><br>
+
+    <input type="submit" id="" name="" value="SUBMIT" required>
+    <input type="reset" id="" name="" value="RESET">
+
+
+
+
+
+
+
   </form>
 
   </main>
   <footer>
     <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
+    <h2>By Catalina-Alexandra Jora</h2>
+
   </footer>
 </body>
 

diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
@@ -0,0 +1,115 @@
+
+
+html {
+    background-color: #DEE2F7;
+    font-size: 1rem;
+}
+
+fieldset{
+    border: 0;
+
+}
+
+body {
+    font-family: "Heebo", sans-serif;
+    margin:auto;
+    color: #fff;
+    width: 50%;
+}
+h1 {
+    color: #000;
+    margin-left: 3rem;
+    font-weight: 900;
+
+}
+form {
+    background-color: #332036;
+    padding: 2rem;
+    border-radius: 1rem;
+    margin: 20px;
+}
+label, legend, p {
+    font-weight: 500;
+    margin-left: 1rem;
+
+}
+fieldset {
+    margin-bottom: 1rem;
+    border: 0;
+}
+input[type=text],input[type=email] {
+    width: 50%;
+    padding: 10px 20px;
+    margin: 15px 0;
+    box-sizing: border-box;
+    background-color: #9AE5E6;
+    border-radius: 15px;
+
+}
+
+::placeholder {
+    font-size: 0.8rem;
+    color: #000;
+}
+::-webkit-input-placeholder {
+    font-size: 0.8rem;
+    color: #000;
+}
+input[type=radio] {
+    width: 1rem;
+    height: 1rem;
+    margin-bottom: 1rem;
+
+}
+.red {
+    accent-color: red;  
+}
+.green {
+    accent-color: green;  
+}
+.blue {
+    accent-color: blue;  
+}
+
+p {
+    margin-top: 7rem;
+}
+select {
+    font-size: 0.8rem;
+}
+input[type=date] {
+    width: 40%;
+    font-size: 1rem;
+    padding: 12px 20px;
+    box-sizing: border-box;
+    background-color: #9AE5E6;
+    border-radius: 10px;
+
+}
+input[type=submit] {
+    width: 30%;
+
+}
+input[type=submit], input[type=reset] {
+    background-color: #F46197;
+    border: none;
+    color: #000;
+    font-size: 1rem;
+    font-weight: 600;
+    padding: 10px 20px;
+    text-decoration: none;
+    margin: 2px 6px;
+    cursor: pointer
+    border: 10px solid #F46197;
+    border-radius: 10px;
+
+
+
+}
+ input:focus {
+     background-color: #DEBFBA;
+ }
+
+h2 {
+    color: #000;
+}