API tools faq
paste
ayiemedia

Sign Up / Login Page by Ayie-2

ayiemedia
Sep 9th, 2024
369
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Sign Up / Login Page by Ayie</title>
  7.     <style>
  8.         /* Reset basic styling */
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.  
  15.         body {
  16.             font-family: 'Arial', sans-serif;
  17.             display: flex;
  18.             justify-content: center;
  19.             align-items: center;
  20.             height: 100vh;
  21.             background-color: #f0f0f0;
  22.         }
  23.  
  24.         .container {
  25.             background-color: #fff;
  26.             padding: 40px;
  27.             border-radius: 10px;
  28.             box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  29.             width: 100%;
  30.             max-width: 400px;
  31.             text-align: center;
  32.         }
  33.  
  34.         h2 {
  35.             margin-bottom: 20px;
  36.             color: #333;
  37.         }
  38.  
  39.         input[type="text"],
  40.         input[type="email"],
  41.         input[type="password"] {
  42.             width: 100%;
  43.             padding: 12px;
  44.             margin: 10px 0;
  45.             border: 1px solid #ccc;
  46.             border-radius: 5px;
  47.         }
  48.  
  49.         button {
  50.             width: 100%;
  51.             padding: 12px;
  52.             background-color: #007bff;
  53.             color: white;
  54.             border: none;
  55.             border-radius: 5px;
  56.             font-size: 16px;
  57.             cursor: pointer;
  58.             margin-top: 10px;
  59.         }
  60.  
  61.         button:hover {
  62.             background-color: #0056b3;
  63.         }
  64.  
  65.         .toggle-link {
  66.             margin-top: 20px;
  67.             font-size: 14px;
  68.         }
  69.  
  70.         .toggle-link a {
  71.             color: #007bff;
  72.             text-decoration: none;
  73.         }
  74.  
  75.         .toggle-link a:hover {
  76.             text-decoration: underline;
  77.         }
  78.  
  79.         /* Responsive Design */
  80.         @media (max-width: 768px) {
  81.             .container {
  82.                 width: 90%;
  83.             }
  84.         }
  85.     </style>
  86. </head>
  87. <body>
  88.     <div class="container" id="sign-up-form">
  89.         <h2>Sign Up</h2>
  90.         <form id="signupForm">
  91.             <input type="text" name="fullname" placeholder="Full Name" required>
  92.             <input type="email" name="email" placeholder="Email" required>
  93.             <input type="password" name="password" placeholder="Password" required>
  94.             <button type="submit">Sign Up</button>
  95.         </form>
  96.         <div class="toggle-link">
  97.             Already have an account? <a href="#" onclick="showLogin()">Log in</a>
  98.         </div>
  99.     </div>
  100.     <div class="container" id="login-form" style="display:none;">
  101.         <h2>Login</h2>
  102.         <form id="loginForm">
  103.             <input type="email" name="email" placeholder="Email" required>
  104.             <input type="password" name="password" placeholder="Password" required>
  105.             <button type="submit">Log In</button>
  106.         </form>
  107.         <div class="toggle-link">
  108.             Don't have an account? <a href="#" onclick="showSignUp()">Sign up</a>
  109.         </div>
  110.     </div>
  111.     <script>
  112.         // Toggle between Sign-Up and Login forms
  113.         function showLogin() {
  114.             document.getElementById('sign-up-form').style.display = 'none';
  115.             document.getElementById('login-form').style.display = 'block';
  116.         }
  117.  
  118.         function showSignUp() {
  119.             document.getElementById('login-form').style.display = 'none';
  120.             document.getElementById('sign-up-form').style.display = 'block';
  121.         }
  122.  
  123.         // Handle Sign-Up form submission
  124.         document.getElementById('signupForm').addEventListener('submit', function(event) {
  125.             event.preventDefault();
  126.             alert('Sign Up form submitted!');
  127.             // Add your form processing logic here
  128.         });
  129.  
  130.         // Handle Login form submission
  131.         document.getElementById('loginForm').addEventListener('submit', function(event) {
  132.             event.preventDefault();
  133.             alert('Login form submitted!');
  134.            
  135.       });
  136.     </script>
  137. </body>
  138. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!