From ee8858ca07c8085819869b95686c9ab95a06e826 Mon Sep 17 00:00:00 2001
From: drew_ <developerdrew2@gmail.com>
Date: Thu, 9 Oct 2025 23:16:15 -0400
Subject: [PATCH] Finished Forms

---
 css/authentication-form.css    |  6 ++-
 css/ecommerce-page.css         | 83 +++++++++++++++++++++++++++++++++-
 pages/authentication-form.html | 24 ++++++----
 3 files changed, 100 insertions(+), 13 deletions(-)

diff --git a/css/authentication-form.css b/css/authentication-form.css
index d708435..c2070cf 100644
--- a/css/authentication-form.css
+++ b/css/authentication-form.css
@@ -27,6 +27,9 @@ p {
 form {
   border: 1px solid #a9a9a9;
   padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
 }
 
 .subtext {
@@ -36,7 +39,8 @@ form {
 
 #sign-in,
 #sign-up {
-  width: 100%;
+  display: grid;
+  gap: 30px;
 }
 
 a {
diff --git a/css/ecommerce-page.css b/css/ecommerce-page.css
index 1b2c395..ab125f2 100644
--- a/css/ecommerce-page.css
+++ b/css/ecommerce-page.css
@@ -37,9 +37,16 @@ section {
 }
 
 .header-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
 }
 
 .logo-search {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 40px;
 }
 
 .logo {
@@ -50,6 +57,8 @@ section {
 }
 
 .search-bar {
+  display: flex;
+  flex-direction: row;
   width: 400px;
   background: #1f1f27;
   padding: 10px 20px;
@@ -71,9 +80,17 @@ section {
 }
 
 .options {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  gap: 10px;
 }
 
 .option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
   min-width: 60px;
   text-transform: capitalize;
   cursor: pointer;
@@ -85,6 +102,10 @@ section {
 }
 
 .categories {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 15px;
   background-color: #2b2d36;
   padding-top: 20px;
 }
@@ -111,6 +132,10 @@ section {
 }
 
 .view-options {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 20px;
 }
 
 i.fa-th-list {
@@ -182,6 +207,10 @@ i.fa-th-list {
 /* GRID VIEW STYLES */
 
 .grid.products {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 25px;
+  justify-content: flex-start;
 }
 
 .grid .product {
@@ -198,22 +227,38 @@ i.fa-th-list {
 }
 
 .grid .product-info {
+  display: flex;
+  flex-direction: column;
+  align-items: space-around;
+  gap: 5px;
+  margin: 25px;
   text-align: center;
   padding: 0 20px 30px;
 }
 
 .grid .product-action {
-  padding-top: 30px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 20px;
+  padding-top: 35px;
   border-top: 1px solid #8d8ba5;
 }
 
 /* LINE VIEW STYLES */
 
 .lines.products {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  gap: 20px;
 }
 
 .lines .product {
-  padding: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  padding: 10px;
 }
 
 .lines .product-image-wrapper {
@@ -222,20 +267,42 @@ i.fa-th-list {
 }
 
 .lines .product-data {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
 }
 
 .lines .product-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  margin: 5px;
 }
 
 .lines .product-action {
+  display: flex;
+  flex-direction: row;
+  align-items: space-around;
+  gap: 15px;
+  padding-top: 40px;
 }
 
 /* LINES-ACTION VIEW */
 
 .lines-action.products {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  padding: 15px;
 }
 
 .lines-action .product {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 5px;
 }
 
 .lines-action .product-image-wrapper {
@@ -244,12 +311,24 @@ i.fa-th-list {
 }
 
 .lines-action .product-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .lines-action .product-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  margin: 15px;
 }
 
 .lines-action .product-action {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 10px;
   border-left: 1px solid #8d8ba5;
   padding-left: 30px;
   min-width: 200px;
diff --git a/pages/authentication-form.html b/pages/authentication-form.html
index 4286353..f692c80 100644
--- a/pages/authentication-form.html
+++ b/pages/authentication-form.html
@@ -32,6 +32,7 @@ <h2>Sign in</h2>
           <div class="form-input-control">
             <label for="login-field">Login</label>
             <input
+              name="email"
               type="email"
               id="login-field"
               placeholder="use your email as login"
@@ -41,10 +42,12 @@ <h2>Sign in</h2>
           <div class="form-input-control">
             <label for="password-field">Password</label>
             <input
-              type="password"
+              name="password"
+              type="password" 
               id="password-field"
               placeholder="passwords must match"
               minlength="8"
+              maxlength="20"
               required
             />
           </div>
@@ -116,6 +119,7 @@ <h2>Sign up</h2>
               minlength="12"
               maxlength="12"
               placeholder="ex.: +12336456355"
+              required
             />
           </div>
           <div class="form-input-control">
@@ -124,21 +128,21 @@ <h2>Sign up</h2>
           </div>
           <div class="form-group-horizontal-control">
             <div class="form-input-control">
-              <label for="state">State</label>
-              <select id="state">
+              <label for="State">State</label>
+              <select name="state" id="state">
                 <option value="" disabled selected>Select your state</option>
-                <option value="TX">Texas</option>
-                <option value="IA">Iowa</option>
-                <option value="SD">South Dakota</option>
+                <option value="CA">California</option>
+                <option value="NE">Nebraska</option>
+                <option value="MI">Michigan</option></option>
               </select>
             </div>
             <div class="form-input-control">
               <label for="city">City</label>
-              <select id="city">
+              <select name="city" id="city">
                 <option value="" disabled selected>Select your city</option>
-                <option value="new-york">New York</option>
-                <option value="washington">Washington DC</option>
-                <option value="dallas">Dallas</option>
+                <option value="orlando">Orlando</option>
+                <option value="detroit">Detroit</option>
+                <option value="portland">Portland</option>
               </select>
             </div>
           </div>