update forgotPassword.html

apu52 · Nov 5, 2024 · 2d0b1cc · 2d0b1cc
1 parent a1f94fa
commit 2d0b1cc
Showing 1 changed file with 59 additions and 8 deletions.
diff --git a/forgotPassword.html b/forgotPassword.html
@@ -9,7 +9,7 @@
     <link rel="icon" type="image/x-icon" href="log/favicon.ico">
     <link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
     <script src="https://kit.fontawesome.com/f2e55912f8.js" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="./login/login.css">
+
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <style>
         @import url("https://fonts.googleapis.com/css2?family=Poppins");
@@ -37,23 +37,57 @@
             justify-content: center;
             align-items: center;
             height: 100vh;
+            background: url("login/Aboe.gif") no-repeat center center fixed;
             background-color: rgba(255, 255, 255, 0.8);
-            background: url("login/Aboe.gif");
             border-radius: 25px;
             box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
             padding: 20px;
+            animation: fadeIn 1s ease-in-out;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: scale(0.9);
+            }
+
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
         }
 
         .container {
-            background-color: transparent;
+            background-color: rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(10px);
             display: flex;
             justify-content: center;
             align-items: center;
-            padding: 20px;
+            padding: 50px;
             border-radius: 10px;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         }
 
+        form {
+            background-color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            padding: 0 50px;
+            height: 100%;
+            text-align: center;
+        }
+
+        input {
+            background-color: #eee;
+            border-radius: 10px;
+            border: none;
+            padding: 12px 15px;
+            margin: 8px 0;
+            width: 100%;
+        }
+
         .form-container {
             display: flex;
             flex-direction: column;
@@ -90,11 +124,10 @@
         .button-container {
             display: flex;
             justify-content: space-between 100px;
-            margin-top: 20px;
+            margin-top: 30px;
             width: 100%;
         }
 
-        .back-button,
         .home-button {
             padding: 10px 20px;
             border-radius: 50%;
@@ -108,6 +141,20 @@
             align-items: center;
         }
 
+        .back-button {
+            padding: 10px 20px;
+            border-radius: 50%;
+            font-size: 16px;
+            border: none;
+            cursor: pointer;
+            background-color: #4bb6b7;
+            color: white;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            margin-right: 100px;
+        }
+
         .back-button i,
         .home-button i {
             margin-right: 8px;
@@ -117,6 +164,10 @@
         .home-button:hover {
             background-color: #4bb6b7;
         }
+
+        a {
+            text-decoration: none;
+        }
     </style>
 </head>
 
@@ -130,12 +181,12 @@ <h1>Forgot Password</h1>
                     <button type="submit">Send Recovery Link</button>
                 </form>
                 <div class="button-container">
-                    <a href="newLogin.html">
+                    <a href="newLogin.html" class="no-underline">
                         <button type="button" class="back-button">
                             <i class="lni lni-arrow-left"></i> Back to Login
                         </button>
                     </a>
-                    <a href="index.html">
+                    <a href="index.html" class="no-underline">
                         <button type="button" class="home-button">
                             <i class="lni lni-home"></i> Home
                         </button>