From 261c0c7815f5279e36c48f2a909002f94164826e Mon Sep 17 00:00:00 2001
From: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date: Thu, 2 Nov 2023 16:28:30 -0400
Subject: [PATCH] feat: added div for forms

---
 signup_form/css/style.css | 46 ++++++++++++++++++++++++++++++++++++++-
 signup_form/index.html    | 11 +++++++---
 2 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/signup_form/css/style.css b/signup_form/css/style.css
index a326d5a..7c36e8b 100644
--- a/signup_form/css/style.css
+++ b/signup_form/css/style.css
@@ -3,4 +3,48 @@
     display: flex;
     flex-direction: column;
     align-content: center;
-}
\ No newline at end of file
+}
+
+.form-input {
+    margin-bottom: 40px;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    flex-wrap: wrap;
+}
+
+.form-row input[type='text'] {
+    background-color: #FFFFFF;
+    border: 1px solid #D6D9DC;
+    border-radius: 3px;
+    width: 100%;
+    padding: 7px;
+    font-size: 14px;
+  }
+  
+  .form-row label {
+    margin-bottom: 15px;
+  }
+
+
+  @media only screen and (min-width: 700px) {
+    .form {
+        width: 600px;
+    }
+
+    .form-row {
+        flex-direction: row;
+        align-items: flex-start; /* To avoid stretching */
+        margin-bottom: 20px;
+    }
+    .form-row input[type='text'] {
+        width: 250px;
+        height: initial;
+    }
+    .form-row label {
+        text-align: right;
+        width: 120px;
+        margin-top: 7px;
+        padding-right: 20px;
+    }
+  }
\ No newline at end of file
diff --git a/signup_form/index.html b/signup_form/index.html
index 5a9cfad..d3ad332 100644
--- a/signup_form/index.html
+++ b/signup_form/index.html
@@ -17,17 +17,22 @@
         <div class="form">
             <h1 class="call-to-action">Join our mailing list!</h1>
            <form action="" method="post">
-            <fieldset>
-
+            <div class="form-input">
             <label for="name">Name</label>
             <input type="text" name="" id="name" placeholder="Enter your name.">
+            </div>
+            <div class="form-input">
             <label for="email">Email</label>
             <input type="email" name="email" id="email" placeholder="you@example.com">
+            </div>
+            <div class="form-input">
             <label for="password">Password</label>
             <input type="password" name="" id="password">
+            </div>
+            <div class="form-input">
             <label for="password_confirmation">Confirm Password</label>
             <input type="password" name="" id="password_confirmation">
-            </fieldset>
+            </div>
             <button type="submit">Sign Up</button>
            </form> 
         </div>