Merge pull request #116 from devxMani/devxMani

I have added some hover effects to the login page giving a transition effects…
GarimaSingh0109 · Oct 2, 2024 · ea8e1c2 · ea8e1c2
2 parents 0e17fe3 + 137e046
commit ea8e1c2
Showing 1 changed file with 83 additions and 28 deletions.
diff --git a/login.html b/login.html
@@ -4,83 +4,139 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login - LinkedIn Resume Builder</title>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
     <style>
-
-        :root{
-          --purple: #aca7eb;
+        :root {
+            --purple: #7c7ae6;
+            --purple-light: #aca7eb;
+            --purple-dark: #5654a2;
         }
+
         body {
             font-family: 'Roboto', sans-serif;
             background-color: #f0f4f8;
+            background-image: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
             margin: 0;
             padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
         }
-
+        
         .container {
             background-color: white;
             padding: 40px;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
             max-width: 400px;
-            width: 100%;
+            width: 90%;
             text-align: center;
+            transition: all 0.3s ease;
         }
-
+
+        .container:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
+        }
+
         h2 {
-            color: #333;
-            margin-bottom: 20px;
+            color: var(--purple-dark);
+            margin-bottom: 30px;
+            font-weight: 700;
+            font-size: 28px;
         }
-
+        
         input[type="email"],
         input[type="password"] {
+
+            width: 100%;
+            padding: 15px;
+            margin: 15px 0;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: border-color 0.3s ease;
+        }
+
+        input[type="email"]:focus,
+        input[type="password"]:focus {
+            border-color: var(--purple);
+            outline: none;
+
             width: 25em;
             padding: 12px;
             margin: 10px 0;
             border: 1px solid #ccc;
             border-radius: 4px;
-        }
 
+        }
+
         button {
             width: 12em;
             padding: 15px;
-            background-color: #aca7eb;
+            background-color: var(--purple);
             color: white;
             border: none;
-            border-radius: 4px;
+            border-radius: 8px;
             font-size: 18px;
+            font-weight: 500;
             cursor: pointer;
+            transition: all 0.3s ease;
+            margin-top: 20px;
+            position: relative;
+            overflow: hidden;
         }
-
+
+        button:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(
+                120deg,
+                transparent,
+                rgba(255, 255, 255, 0.3),
+                transparent
+            );
+            transition: all 0.6s;
+        }
+
+        button:hover:before {
+            left: 100%;
+        }
+
         button:hover {
-            background-color: var(--purple);
+            background-color: var(--purple-dark);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(172, 167, 235, 0.4);
         }
-
+        
         .footer {
-            margin-top: 20px;
+            margin-top: 30px;
         }
-
+        
         .footer p {
             color: #666;
-            font-size: 14px;
+            font-size: 16px;
         }
-
+        
         .footer a {
-            color: #aca7eb;
+            color: var(--purple);
             text-decoration: none;
+            font-weight: 500;
+            transition: color 0.3s ease;
         }
-
+        
         .footer a:hover {
+            color: var(--purple-dark);
             text-decoration: underline;
         }
     </style>
 </head>
 <body>
-
     <div class="container">
         <h2>Log In to Your Account</h2>
         <form action="#" method="POST">
@@ -95,7 +151,7 @@ <h2>Log In to Your Account</h2>
     <script>
         document.getElementById('loginForm').addEventListener('submit', function(event) {
             event.preventDefault(); // Prevent the default form submission
-
+            
             var formData = new FormData(this);
 
             fetch('login-process.php', {
@@ -113,6 +169,5 @@ <h2>Log In to Your Account</h2>
             .catch(error => console.error('Error:', error));
         });
     </script>
-
 </body>
-</html>
+</html>