Unique Sign Up Form - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Unique Sign-Up Form</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap'); body, html { margin: 0; padding: 0; height: 100%; font-family: 'Poppins', sans-serif; background: linear-gradient(45deg, #FFDEE9, #B5FFFC); display: flex; justify-content: center; align-items: center; background-attachment: fixed; } .signup-form { background: #fff; border-radius: 15px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); padding: 30px; width: 350px; text-align: center; position: relative; overflow: hidden; } .signup-form::before { content: ''; position: absolute; width: 300%; height: 300%; top: -110%; left: -110%; background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(255,255,255,0)); animation: rotateBackground 15s linear infinite; } @keyframes rotateBackground { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .signup-form h2 { font-size: 2em; margin-bottom: 20px; position: relative; } .signup-form .input-group { margin-bottom: 15px; position: relative; } .signup-form .input-group input { width: 80%; height: 45px; padding-left: 5%; border: none; border-radius: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: 0.3s; } .signup-form .input-group input:focus { outline: none; transform: scale(1.05); } .signup-form .btn { background: #FF6F61; color: #fff; border: none; padding: 15px 30px; border-radius: 30px; cursor: pointer; transition: 0.3s; display: inline-block; font-size: 1em; } .signup-form .btn:hover { background: #FF3F3F; } </style> </head> <body> <div class="signup-form"> <h2>Sign Up</h2> <form> <div class="input-group"> <input type="text" placeholder="Username" required> </div> <div class="input-group"> <input type="email" placeholder="Email" required> </div> <div class="input-group"> <input type="password" placeholder="Password" required> </div> <div class="input-group"> <input type="password" placeholder="Confirm Password" required> </div> <button type="submit" class="btn">Sign Up</button> </form> </div> </body> </html>