QAZIMAAZARSHAD · athalyeathu · Oct 14, 2025 · Oct 14, 2025
diff --git a/404.html b/404.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>404 - Page Not Found</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f9fafb;
+      color: #333;
+      text-align: center;
+      padding: 60px;
+    }
+    h1 { font-size: 80px; color: #e63946; }
+    h2 { font-size: 30px; margin-bottom: 20px; }
+    a {
+      display: inline-block;
+      margin-top: 20px;
+      padding: 12px 25px;
+      background-color: #007bff;
+      color: #fff;
+      text-decoration: none;
+      border-radius: 8px;
+    }
+    a:hover { background-color: #0056b3; }
+  </style>
+</head>
+<body>
+  <h1>404</h1>
+  <h2>Oops! Page not found 😢</h2>
+  <p>The page you're looking for doesn't exist or has been moved.</p>
+  <a href="index.html">Go Back Home</a>
+</body>
+</html>
diff --git a/login.html b/login.html
@@ -4,42 +4,62 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Apni-Dukaan</title>
-  <link rel="stylesheet" type="text/css" href="./static/login.css">
-  <script src="./static/login.js"></script>
-  <link rel="icon" href="./Images/favicon.ico" type="image/x-icon">     
-  </head>    
+  <title>Login | Apni Dukaan</title>
+
+  <!-- Styles -->
+  <link rel="stylesheet" href="./static/login.css">
+  <link rel="icon" href="./Images/favicon.ico" type="image/x-icon">
+  <script src="./static/login.js" defer></script>
+
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
+</head>
 <body>
+
   <div class="login_form">
     <div class="details">
       <div class="welcome">Apni Dukaan</div>
-      <form>
+      <form onsubmit="return login()">
         <div class="wrap">
-          <label>Email</label>
-          <input type="text" class="input" id="email">
-          </div>
-        <div class="wrap">
-          <label>Password</label>
-          <input type="password" class="input" data-type="password" id="pwd1">
-          </div>
+          <label for="email">Email</label>
+          <input type="text" class="input" id="email" placeholder="Enter your email" required>
+        </div>
+
         <div class="wrap">
-          <a href="forgotPassword.html" title="Forgot Password" id="link-reset">Forgot Password?</a>
-          </div>
-        <button class="button" value="Login" onclick="return login()"><h1 class="sign">Sign in!</h1></button>
+          <label for="pwd1">Password</label>
+          <input type="password" class="input" id="pwd1" placeholder="Enter your password" required>
+        </div>
+
+        <div class="wrap forgot">
+          <a href="forgotPassword.html" id="link-reset">Forgot Password?</a>
+        </div>
+
+        <button class="button" type="submit">
+          <span class="sign">Sign in!</span>
+        </button>
       </form>
     </div>
-    <a href = "./index.html" ><img class="fox" src="Images\Logo\ApniDukan.png" /> </a>
+
+    <div class="logo-section">
+      <a href="./index.html">
+        <img class="fox" src="Images/Logo/ApniDukan.png" alt="Apni Dukaan Logo">
+      </a>
+    </div>
+
     <div class="details-two">
-     <h1 class="back">Welcome back!</h1>
-      <p class="log">Log in and use the opportunities offered by our portal.</p>
-      <h2 class="acc">You don't have an account?</h2>
-      <button class="signup" value="Signup" onclick="signup()"><h3>SignUp!</h3></button></button>    </div>
-
+      <h1 class="back">Welcome Back!</h1>
+      <p class="log">Log in and explore amazing deals at your Apni Dukaan.</p>
+      <h2 class="acc">Don’t have an account?</h2>
+      <button class="signup" type="button" onclick="signup()">
+        <h3>Sign Up!</h3>
+      </button>
+    </div>
   </div>
 
   <script src="./static/script.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
-
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+    crossorigin="anonymous"></script>
+
 </body>
-</html>
+</html>
diff --git a/static/login.css b/static/login.css
@@ -1,9 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
-* {
-  margin: 0;
-  box-sizing: border-box;
-  font-family: "Roboto", sans-serif;
-}
+
 :root {
   --colour-one: #5398c6;
   --colour-two: #ffffff;
@@ -16,13 +12,20 @@
   --colour-nine: #ffffff;
 }
 
+* {
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Roboto", sans-serif;
+}
+
 body {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background: var(--colour-one);
 }
+
 .login_form {
   position: relative;
   border-bottom: 3px solid var(--colour-four);
@@ -33,19 +36,22 @@ body {
   box-shadow: 10px 10px 6px 2px #315b76;
   overflow: hidden;
 }
+
 .details {
   position: relative;
   background: var(--colour-two);
-  height: 400px;
+  height: 100%;
   width: 350px;
 }
+
 .welcome {
   position: absolute;
   color: var(--colour-six);
   left: 40%;
   top: 30%;
   font-weight: 700;
 }
+
 .wrap:nth-child(1) {
   position: absolute;
   top: 35%;
@@ -66,17 +72,20 @@ body {
   font-size: 15px;
   margin: 12px;
 }
+
 .input {
   border: 1px solid var(--colour-three);
   padding: 5px 20px;
   margin: 5px;
   border-radius: 5px;
   background: none;
 }
+
 label {
   color: var(--colour-eight);
   display: block;
 }
+
 .button {
   background: var(--colour-six);
   position: absolute;
@@ -88,38 +97,44 @@ label {
   border-radius: 10px;
   border: none;
 }
+
 .button .sign {
   color: #fff;
   font-size: 15px;
   cursor: pointer;
 }
+
 .fox {
   position: absolute;
   top: 25%;
   left: 55%;
   height: 18%;
 }
+
 .back {
   position: absolute;
   top: 44%;
   left: 56%;
   font-size: 20px;
   color: var(--colour-nine);
 }
+
 .log {
   position: absolute;
   top: 52%;
   left: 56%;
   font-size: 14px;
   color: var(--colour-nine);
 }
+
 .acc {
   position: absolute;
   top: 66%;
   left: 56%;
   font-size: 15px;
   color: var(--colour-nine);
 }
+
 .signup {
   position: absolute;
   top: 72%;
@@ -130,8 +145,45 @@ label {
   border: none;
   cursor: pointer;
 }
+
 h3 {
   font-size: 14px;
   color: var(--colour-five);
   padding: 5px;
 }
+
+/* Optional Responsive Enhancements */
+@media (max-width: 768px) {
+  .login_form {
+    flex-direction: column;
+    width: 90%;
+    height: auto;
+  }
+
+  .details {
+    width: 100%;
+    height: auto;
+    padding: 2rem;
+  }
+
+  .wrap,
+  .button,
+  .fox,
+  .back,
+  .log,
+  .acc,
+  .signup {
+    position: static;
+    margin: 1rem auto;
+    text-align: center;
+  }
+
+  .button,
+  .signup {
+    width: 60%;
+  }
+
+  .fox {
+    height: 80px;
+  }
+}