API tools faq
paste
ayiemedia

Signup/Login Page by Ayie

ayiemedia
Sep 9th, 2024
198
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.11 KB | Source Code | 0 0
raw download clone embed print report
  1. This is signup / login page using fasthtml
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Sign Up / Login Page by Ayie</title>
  9.     <link rel="stylesheet" href="fasthtml.css">
  10.     <!-- Link to FASTHTML CSS Framework -->
  11.     <style>
  12.         body {
  13.             font-family: 'Arial', sans-serif;
  14.             background-color: #f4f4f4;
  15.             margin: 0;
  16.             padding: 0;
  17.             display: flex;
  18.             justify-content: center;
  19.             align-items: center;
  20.             height: 100vh;
  21.         }
  22.         .form-container {
  23.             width: 100%;
  24.             max-width: 400px;
  25.             padding: 20px;
  26.             background-color: white;
  27.             border-radius: 8px;
  28.             box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  29.         }
  30.         .form-container h2 {
  31.             margin-bottom: 20px;
  32.             text-align: center;
  33.             color: #333;
  34.         }
  35.         input[type="text"],
  36.         input[type="password"],
  37.         input[type="email"] {
  38.             width: 100%;
  39.             padding: 12px;
  40.             margin: 8px 0;
  41.             box-sizing: border-box;
  42.             border: 1px solid #ccc;
  43.             border-radius: 4px;
  44.         }
  45.         button {
  46.             width: 100%;
  47.             padding: 14px;
  48.             background-color: #007bff;
  49.             color: white;
  50.             border: none;
  51.             border-radius: 4px;
  52.             cursor: pointer;
  53.             font-size: 16px;
  54.         }
  55.         button:hover {
  56.             background-color: #0056b3;
  57.         }
  58.         .switch-link {
  59.             text-align: center;
  60.             margin-top: 10px;
  61.         }
  62.         .switch-link a {
  63.             color: #007bff;
  64.             text-decoration: none;
  65.         }
  66.         .switch-link a:hover {
  67.             text-decoration: underline;
  68.         }
  69.         @media (max-width: 768px) {
  70.             .form-container {
  71.                 width: 90%;
  72.             }
  73.         }
  74.         @media (min-width: 769px) {
  75.             .form-container {
  76.                 max-width: 600px;
  77.             }
  78.             body {
  79.                 background-color: #e9ecef;
  80.             }
  81.             input[type="text"],
  82.             input[type="password"],
  83.             input[type="email"] {
  84.                 padding: 16px;
  85.             }
  86.             button {
  87.                 padding: 18px;
  88.                 font-size: 18px;
  89.             }
  90.             .switch-link {
  91.                 font-size: 16px;
  92.             }
  93.         }
  94.     </style>
  95. </head>
  96. <body>
  97.     <div class="form-container" id="sign-up-form">
  98.         <h2>Sign Up</h2>
  99.         <form action="/signup" method="post">
  100.             <input type="text" name="fullname" placeholder="Full Name" required>
  101.             <input type="email" name="email" placeholder="Email Address" required>
  102.             <input type="password" name="password" placeholder="Password" required>
  103.             <button type="submit">Sign Up</button>
  104.         </form>
  105.         <div class="switch-link">
  106.             Already have an account? <a href="#" onclick="showLogin()">Log in</a>
  107.         </div>
  108.     </div>
  109.  
  110.     <div class="form-container" id="login-form" style="display:none;">
  111.         <h2>Log In</h2>
  112.         <form action="/login" method="post">
  113.             <input type="email" name="email" placeholder="Email Address" required>
  114.             <input type="password" name="password" placeholder="Password" required>
  115.             <button type="submit">Log In</button>
  116.         </form>
  117.         <div class="switch-link">
  118.             Don't have an account? <a href="#" onclick="showSignUp()">Sign up</a>
  119.         </div>
  120.     </div>
  121.     <script>
  122.         function showLogin() {
  123.             document.getElementById('sign-up-form').style.display = 'none';
  124.             document.getElementById('login-form').style.display = 'block';
  125.         }
  126.  
  127.         function showSignUp() {
  128.             document.getElementById('login-form').style.display = 'none';
  129.             document.getElementById('sign-up-form').style.display = 'block';
  130.         }
  131.     </script>
  132. </body>
  133. </html>
  134.  
Tags: html JavaScript CSS
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!