Added the switch links for signup and login pages

Anjaliavv51 · Oct 8, 2024 · 8bef6ac · 8bef6ac
1 parent df4a42f
commit 8bef6ac
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/Html-files/login.html b/Html-files/login.html
@@ -89,6 +89,26 @@
                   --ff-poppins: "Poppins", sans-serif;
               }
       </style>
+      <style>
+        /* Styles for the switch link */
+        .switch-link {
+          margin-top: 20px;
+          font-family: var(--ff-poppins);
+          text-align: center;
+          color: hsl(203, 30%, 26%);
+        }
+
+        .switch-link a {
+          color: hsl(0, 100%, 50%);
+          text-decoration: none;
+          font-weight: bold;
+          transition: color 0.3s ease;
+        }
+
+        .switch-link a:hover {
+          color: hsl(203, 30%, 26%);
+        }
+      </style>
 </head>
 <body>
   <div class="circle-container">
@@ -142,6 +162,8 @@ <h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</
         <button type="submit" class="btn-login" style="color: black;font-family:var(--ff-poppins);">Login</button>
         <button id="google-login" style="color: black;font-family:var(--ff-poppins);">Login with google</button>
         <p id="error-message" style="color: red; font-family: var(--ff-poppins);"></p>
+
+        <p class="switch-link">Don’t have an account? <a href="signup.html">Sign Up</a></p>
       </div>
     </div>
 </form>

diff --git a/Html-files/signup.html b/Html-files/signup.html
@@ -169,6 +169,26 @@
 .area .way:nth-child(8):hover ~ .box{transform: rotateX(20deg) rotateY(0deg);}
 .area .way:nth-child(9):hover ~ .box{transform: rotateX(20deg) rotateY(-20deg);}
   </style>
+  <style>
+    /* Styles for the switch link */
+    .switch-link {
+      margin-top: 20px;
+      font-family: var(--ff-poppins);
+      text-align: center;
+      color: hsl(203, 30%, 26%);
+    }
+
+    .switch-link a {
+      color: hsl(0, 100%, 50%);
+      text-decoration: none;
+      font-weight: bold;
+      transition: color 0.3s ease;
+    }
+
+    .switch-link a:hover {
+      color: hsl(203, 30%, 26%);
+    }
+  </style>
 </head>
 <body>
   <div class="circle-container">
@@ -241,6 +261,8 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">SIGN U
             <div class="btnNext"><button type="submit" class="btn-login" style="font-family: var(--ff-philosopher);color: #ddd;">Register</button>
               <button id="google-login" style="font-family: var(--ff-philosopher);color: #ddd;">Signup with Google</button></div>
           </div>
+
+          <p class="switch-link">Already have an account? <a href="login.html">Login</a></p>
         </div>
       </div>
       <script>