Change and Add Form UI Design

7-bank-project/solution/index.html

@@ -24,7 +24,7 @@
           <h2 class="text-center">Login</h2>
           <form id="loginForm" action="javascript:login()">
             <label for="username">Username</label>
-            <input id="username" name="user" type="text" maxlength="20" required>
+            <input id="username" class="form-control" name="user" type="text" maxlength="20" required>
             <div id="loginError" class="error" role="alert"></div>
             <button>Login</button>
           </form>
@@ -32,13 +32,13 @@
           <h2 class="text-center">Register</h2>
           <form id="registerForm" action="javascript:register()">
             <label for="user">Username (required)</label>
-            <input id="user" name="user" type="text" maxlength="20" required>
+            <input id="user" class="form-control" name="user" type="text" maxlength="20" required>
             <label for="currency">Currency (required)</label>
-            <input id="currency" name="currency" type="text" maxlength="5" value="$" required>
+            <input id="currency" class="form-control" name="currency" type="text" maxlength="5" value="$" required>
             <label for="description">Description</label>
-            <input id="description" name="description" type="text" maxlength="100">
+            <input id="description" class="form-control" name="description" type="text" maxlength="100">
             <label for="balance">Current balance</label>
-            <input id="balance" name="balance" type="number" value="0">
+            <input id="balance" class="form-control" name="balance" type="number" value="0">
             <div id="registerError" class="error" role="alert"></div>
             <button>Register</button>
           </form>

7-bank-project/solution/styles.css

@@ -143,7 +143,11 @@ button:focus {
 }
 
 .login-content {
-  background-color: var(--background);
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 15px;
+  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
+  backdrop-filter: blur(10px);
+  color: var(--primary); 
   padding: var(--space-sm);
 }
 
@@ -158,7 +162,7 @@ button:focus {
 .login-separator > span {
   position: relative;
   top: -0.5em;
-  background-color: var(--background);
+  color: black;
   padding: var(--space-sm);
 }
 
@@ -349,3 +353,10 @@ button:focus {
     align-self: center;
   }
 }
+.form-control {
+  border: none;
+  background: transparent;
+  border-bottom: 1px solid black;
+                  color: black; 
+
+           }