Auth Harmony - 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>Auth Harmony - CSS Mobile Friendly Auth</title> <style> body { margin: 0; font-family: 'Arial', sans-serif; background: radial-gradient(circle, #6a11cb, #2575fc); display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } .auth-container { background: #fff; border-radius: 15px; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); padding: 30px; width: 100%; max-width: 400px; animation: fadeIn 1s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .auth-header { text-align: center; font-size: 2rem; margin-bottom: 20px; color: #333; position: relative; } .auth-header::after { content: ""; position: absolute; right: -30px; top: 10px; font-size: 1.5rem; animation: swing 2s infinite; } @keyframes swing { 0% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } 100% { transform: rotate(0deg); } } .auth-input { width: 95%; padding: 10px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; transition: border-color 0.3s; } .auth-input:focus { border-color: #6a11cb; outline: none; } .auth-button { width: 100%; padding: 10px; border: none; border-radius: 5px; background: #6a11cb; color: #fff; font-size: 1rem; cursor: pointer; transition: background 0.3s, transform 0.3s; } .auth-button:hover { background: #2575fc; } .auth-button:active { transform: scale(0.95); } .auth-footer { text-align: center; margin-top: 20px; font-size: 0.9rem; color: #666; } .auth-footer a { color: #6a11cb; text-decoration: none; transition: color 0.3s; } .auth-footer a:hover { color: #2575fc; } .auth-icon { display: inline-block; width: 24px; height: 24px; margin-right: 10px; vertical-align: middle; } </style> </head> <body> <div class="auth-container"> <div class="auth-header"> Auth Harmony <span class="emoji">🎵</span> </div> <form> <input type="email" class="auth-input" placeholder="Email" required> <input type="password" class="auth-input" placeholder="Password" required> <button type="submit" class="auth-button">Login</button> </form> <div class="auth-footer"> <p>Don't have an account? <a href="#">Sign up</a></p> </div> </div> <script> document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); alert('Logged in successfully!'); }); </script> </body> </html>