Style form and input layout

Author: helenclx

m3-we-are-the-champions/index.html

@@ -24,11 +24,13 @@ <h1 class="main__title">We are the Champions</h1>
             <label for="message-input" class="sr-only">Enter Your Endorsement:</label>
             <textarea type="text" rows="4" name="message" id="message-input" class="form__message" placeholder="Write your endorsement here" required></textarea>
 
-            <label for="from-input" class="sr-only">From:</label>
-            <input type="text" name="from" id="from-input" class="form__name" placeholder="From" required>
+            <div class="form__names">
+                <label for="from-input" class="sr-only">From:</label>
+                <input type="text" name="from" id="from-input" class="form__name" placeholder="From" required>
 
-            <label for="to-input" class="sr-only">To:</label>
-            <input type="text" name="to" id="to-input" class="form__name" placeholder="To" required>
+                <label for="to-input" class="sr-only">To:</label>
+                <input type="text" name="to" id="to-input" class="form__name" placeholder="To" required>
+            </div>
 
             <button type="submit" class="form__btn">Publish</button>
         </form>

m3-we-are-the-champions/styles.css

@@ -140,25 +140,53 @@ h1, h2 {
 }
 
 /* Form section */
+.form,
+.form__names {
+    display: grid;
+    gap: 0.7rem;
+}
+
 .form__message,
 .form__name {
     background-color: var(--clr-input-bg);
     color: var(--clr-white);
     border-radius: var(--border-radius);
     border: none;
+    padding: 0.7rem 1rem;
+    width: 100%;
 }
 
 .form__message::placeholder,
 .form__name::placeholder {
     color: var(--clr-placeholder);
 }
 
+.form__message:focus,
+.form__name:focus {
+    outline: 0.15em solid var(--clr-white);
+}
+
+.form__names {
+    grid-template-columns: 1fr 1fr;
+}
+
+.form__name {
+    text-align: center;
+}
+
 .form__btn {
     font-family: var(--ff-title), Arial, Helvetica, sans-serif;
     font-weight: 700;
     background-color: var(--clr-btn-bg);
     border: none;
     border-radius: var(--border-radius);
+    padding: 0.8rem;
+    font-size: 1.3rem;
+}
+
+.form__btn:focus {
+    outline: 0.2em solid var(--clr-btn-bg);
+    outline-offset: 0.15em;
 }
 
 /* Endorsements section */