feat: day 8

solygambas · solygambas · commit 05f48488345e · 2025-06-17T12:34:20.000+02:00
diff --git a/008-form wave animation/index.html b/008-form wave animation/index.html
@@ -8,17 +8,23 @@
   </head>
   <body>
     <div class="container">
-      <h1>Please Login</h1>
+      <!-- Change the Main Title -->
+      <h1>Welcome Back</h1>
       <form>
         <div class="form-control">
           <input type="text" required />
           <label>Email</label>
         </div>
+        <!-- Add a New Input Field -->
+        <div class="form-control">
+          <input type="text" required />
+          <label>Username</label>
+        </div>
         <div class="form-control">
           <input type="password" required />
           <label>Password</label>
         </div>
-        <button class="btn">Login</button>
+        <button class="btn">Sign In</button>
         <p class="text">Don't have an account? <a href="#">Register</a></p>
       </form>
     </div>
diff --git a/008-form wave animation/script.js b/008-form wave animation/script.js
@@ -5,7 +5,8 @@ labels.forEach((label) => {
     .split("")
     .map(
       (letter, idx) =>
-        `<span style="transition-delay:${idx * 50}ms">${letter}</span>`
+        // Adjust Wave Animation Speed
+        `<span style="transition-delay:${idx * 25}ms">${letter}</span>`
     )
     .join("");
 });
diff --git a/008-form wave animation/style.css b/008-form wave animation/style.css
@@ -30,14 +30,15 @@ body {
 
 .container a {
   text-decoration: none;
-  color: lightblue;
+  color: #59a96a;
 }
 
 .btn {
   cursor: pointer;
   display: inline-block;
   width: 100%;
-  background: lightblue;
+  /* Modify Button Appearance */
+  background: #59a96a;
   padding: 15px;
   font-family: inherit;
   font-size: 16px;
@@ -77,7 +78,7 @@ body {
 .form-control input:focus,
 .form-control input:valid {
   outline: 0;
-  border-bottom-color: lightblue;
+  border-bottom-color: #13293d;
 }
 
 .form-control label {
@@ -96,6 +97,7 @@ body {
 
 .form-control input:focus + label span,
 .form-control input:valid + label span {
-  color: lightblue;
+  /* Change Label Color on Focus */
+  color: #59a96a;
   transform: translateY(-30px);
 }
