add colour styles

Author: Temceo

Form-Controls/index.html

@@ -25,11 +25,11 @@ <h1>Product Pick</h1>
         <div class="form-group">
         <!-- Add input for email - required and validate -->
           <label for="email">Email</label>
-          <input type="email" id="email" required>
+          <input type="email" id="email" placeholder="joe@me.com" required>
         </div>
         <div class="form-group">
           <!-- Drop down list of 3 colours (green, blue, red) - required -->
-          <label for="colour">Choose a colour:</label>
+          <label for="colour">Choose colour</label>
           <select name="colour" id="colour" required>
             <option value="" disabled selected>Select a colour</option>
             <option value="red">Red</option>
@@ -40,7 +40,7 @@ <h1>Product Pick</h1>
 
        <div class="form-group">
          <!-- Drop down list of 6 sizes (XS, S, M, L, XL, XXL) - required -->
-          <label for="size">Choose a size:</label>
+          <label for="size">Choose size</label>
           <select name="size" id="size" required>
             <option value="" disabled selected>Select a size</option>
             <option value="xs">XS</option>

Form-Controls/style.css

@@ -3,32 +3,62 @@
   margin: 0;
 }
 
+:root {
+  /* font colours */
+  --clr-font-base: #DCE1DE;
+  /* background colours */
+  --clr-bg-base: #216869;
+  --clr-bg-accent1: #3B8C88; /* 20% lighter */
+  --clr-bg-accent2: #55AFAF; /* 40% lighter */
+  --clr-bg-accent3: #70D2D2; /* 60% lighter */
+  --clr-bg-dark1: #1A5354; /* 40% darker */
+}
+
 input,
 button,
-select,
-textarea {
+select {
   font: inherit;
 }
 
-input {
+label {
+  text-transform: uppercase;
+  color: var(--clr-font-base);
+  font-weight: 500;
+}
+
+input, select {
   width: 100%;
-  /* height: 3rem; */
+  height: 2rem;
+  background-color: var(--clr-bg-accent2);
 }
 
 form button {
+  text-transform: uppercase;
+  background-color: var(--clr-bg-accent2);
+  color: var(--clr-font-base);
+  font-weight: 500;
   margin-top: 1rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 5px;
   grid-column: 1 / -1;
   justify-self: center;
   width: 100%;
+
   @media(width > 550px) {
     width: 50%;
   }
 }
 
+form button:hover {
+  background-color: var(--clr-bg-accent3);
+}
+
 form {
   display: grid;
+  min-width: 350px;
   gap: 1rem;
-  border: 2px solid green;
+  background-color: var(--clr-bg-base);
   padding: 2rem;
   border-radius: 10px;
 
@@ -49,8 +79,8 @@ form {
 
 body {
   font-family: "Poppins", sans-serif;
-  /* font-weight: 00; */
   font-style: normal;
+  background-color: var(--clr-bg-accent3);
 }
 
 main, header, footer {