CodeYourFuture
diff --git a/‎Form-Controls/index.html‎
Lines changed: 6 additions & 7 deletions b/‎Form-Controls/index.html‎
Lines changed: 6 additions & 7 deletions
diff --git a/‎Form-Controls/styles.css‎
Lines changed: 33 additions & 16 deletions b/‎Form-Controls/styles.css‎
Lines changed: 33 additions & 16 deletions
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta charset="utf-8" >
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
     <title>My form exercise</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="T-shirt order form, pick your product." >
+    <meta name="viewport" content="width=device-width, initial-scale=1" >
     <link rel="stylesheet" href="/styles.css">
   </head>
   <body>
@@ -23,9 +23,9 @@ <h1>Product Pick</h1>
             <label for="email">Email Address</label>
               <input type="email" name="email" id="email" required placeholder="myemail@email.com">
         <!--Color 3 options with select NO multiselect-->
-            <label for="colorOptions">Choose Color</label>
+            <label for="colorOptions">Color</label>
               <select id="colorOptions" name="color" required>
-                <option hidden></option>
+                <option hidden>Choose here</option>
                 <option value="grey" >Grey</option>
                 <option value="black" >Black</option>
                 <option value="white" >White</option>
@@ -77,7 +77,6 @@ <h1>Product Pick</h1>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
       <p>By Bartosz Kawiak</p>
     </footer>
   </body>
 
@@ -5,15 +5,17 @@ body{
 
 h1{
     justify-self: center;
-    scale: 1.5;
+    font-size: clamp(1rem, 10vw, 3rem);
+    justify-content: center;
 }
 
 fieldset {
     background-color: antiquewhite;
     position: relative;
     display: grid;
     gap: 0.5rem;
-    max-width: 90%;
+    max-width: 500px;
+    height: auto;
     justify-self: center;
     border: 2px solid ;
     margin: auto;
@@ -23,7 +25,7 @@ fieldset {
 legend {
     margin: auto;
     padding: 1rem;
-    color: red;
+    color: rgb(87, 0, 0);
     font-size: larger;
     text-decoration: underline;
     text-decoration-color: black;
@@ -32,10 +34,15 @@ legend {
 }
 select{
     padding: 10px;
+    max-width: 100%;
+    box-sizing: border-box;
 } 
+option{
+    max-width: 100%;
+}
 
 select:focus{
-    scale: 1.1;
+   /* scale: 1.1; */
     background-color: coral;
     color: white;
 }
@@ -46,14 +53,14 @@ input{
 }
 
 input:focus{
-    scale: 1.1;
+   /* scale: 1.1; */
     background-color: coral;
     color: white;
 }
 
-input[type="text", "email"]:valid{
-    background-color: coral;
-    
+input[type="text"]:valid,
+input[type="email"]:valid{
+    background-color: coral;   
 }
 
 input:focus::placeholder{
@@ -66,12 +73,6 @@ input:focus::placeholder{
     justify-items: center;
 }
 
-
-/*input[type="radio"] {
-    justify-self: baseline;
-    display: inline-block;
-} */
-
 input[type="radio"]:checked {
     accent-color: coral;
 }
@@ -97,6 +98,7 @@ p{
 #buttonGroup{
     justify-self: center;
     font-size: larger;
+    max-width: 500px;
 }
 
 button{
@@ -116,7 +118,22 @@ button:active{
 }
 
 footer{
-    opacity: 0.5;
+    opacity: 0.8;
     font-style: italic;
-    
+    scale: 0.8;
+    justify-content: center;
+    text-align: center;
+}
+
+@media (max-width: 600px) {
+    #sizeDiv {
+        grid-template-columns: repeat(1, 1fr);
+    }
+    #buttonGroup{
+        justify-self: center;
+        display: grid;
+        width: 100%;
+        justify-content: center; 
+        
+    }
 }