styling added, containers for styling added in html

Author: bartoszkawiak

Form-Controls/index.html

@@ -34,31 +34,46 @@ <h1>Product Pick</h1>
         <!--SIZE 6 options XS,S,M,L,XL,XXL-->
         <p>Choose Size:</p>
 
+        <div id="sizeDiv">
+
+          <div id="xsDiv">
         <label for="xs">XS</label>
           <input type="radio" id="xs" name="size" value="xs" required>
-        
+          </div>
+
+        <div id="sDiv">
         <label for="s">S</label>
           <input type="radio" id="s" name="size" value="s">
+        </div>
 
+        <div id="mDiv">
         <label for="m">M</label>
           <input type="radio" id="m" name="size" value="m">
+        </div>
 
+        <div id="lDiv">
         <label for="l">L</label>
           <input type="radio" id="l" name="size" value="l">
+        </div>
 
+        <div id="xlDiv">
         <label for="xl">XL</label>
           <input type="radio" id="xl" name="size" value="xl">
+        </div>
 
+        <div id="xxlDiv">
         <label for="xxl">XXL</label>
           <input type="radio" id="xxl" name="size" value="xxl">
+        </div>
+        </div>
 
         </fieldset>
 
         <div id="buttonGroup">
           <button type="submit">Submit</button>
           <button type="reset">Reset</button>
         </div>
-        
+
       </form>
     </main>
     <footer>

Form-Controls/styles.css

@@ -1,9 +1,122 @@
 body{
-    font-family: sans-serif, Arial, Helvetica;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: lightsalmon;
+}
+
+h1{
+    justify-self: center;
+    scale: 1.5;
 }
 
 fieldset {
+    background-color: antiquewhite;
+    position: relative;
     display: grid;
     gap: 0.5rem;
+    max-width: 90%;
+    justify-self: center;
+    border: 2px solid ;
+    margin: auto;
+
+}
+
+legend {
+    margin: auto;
+    padding: 1rem;
+    color: red;
+    font-size: larger;
+    text-decoration: underline;
+    text-decoration-color: black;
+    position: relative;
+    top: -10px;
+}
+select{
+    padding: 10px;
+} 
+    
+select:focus{
+    scale: 1.1;
+    background-color: coral;
+    color: white;
+}
+
+input{
+    justify-self: center;
+    padding: 10px;
+}
+
+input:focus{
+    scale: 1.1;
+    background-color: coral;
+    color: white;
+}
+
+input[type="text", "email"]:valid{
+    background-color: coral;
+    
+}
+
+input:focus::placeholder{
+    color: white;
+}
+
+#sizeDiv {
+    display: grid;
+    grid-template-columns: repeat(2,2fr);
+    justify-items: center;
+}
+
+
+/*input[type="radio"] {
+    justify-self: baseline;
+    display: inline-block;
+} */
+
+input[type="radio"]:checked {
+    accent-color: coral;
+}
+
+label:active{
+    color: coral;
+}
+
+label{
+    justify-self: start;
+
+    font-weight: bold;
+}
+
+p{
+    justify-self: center;
+    font-style: italic;
+    font-size: large;
+    margin: auto;
+    padding: 10px;
+}
+
+#buttonGroup{
+    justify-self: center;
+    font-size: larger;
+}
+
+button{
+    border: 3px solid ;
+    border-radius: 10px;
+    font-size: large;
+    background-color: rgba(209, 105, 68, 0.623);
+}
+
+button:hover{
+    color: rgb(114, 41, 15);
+    opacity: 0.9;}
+
+button:active{
+    color: red;
+    scale: 1.2;
 }
 
+footer{
+    opacity: 0.5;
+    font-style: italic;
+    
+}