Minty Fresh 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>Minty Fresh 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, #43e97b, #38f9d7); display: flex; justify-content: center; align-items: center; perspective: 1000px; background-attachment: fixed; } .form-container { width: 400px; height: 500px; position: relative; transform-style: preserve-3d; transition: transform 1s; } .form-container.flipped { transform: rotateY(180deg); } .form-container .front, .form-container .back { position: absolute; width: 100%; height: 100%; background: linear-gradient(45deg, #43e97b, #38f9d7); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); backface-visibility: hidden; padding: 40px; text-align: center; color: white; } .form-container .back { transform: rotateY(180deg); } .form-container .flip-btn { position: absolute; top: 20px; right: 20px; background: #ff6f61; color: #fff; border: none; padding: 10px; border-radius: 5px; cursor: pointer; } .form-container .flip-btn:hover { background: #ff3f3f; } .form-container .input-group { margin-bottom: 20px; position: relative; } .form-container .input-group input { width: 85%; height: 50px; padding-left: 5%; border: none; border-radius: 25px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: 0.3s; } .form-container .input-group input:focus { outline: none; transform: scale(1.05); } .form-container .btn { background: #ff6f61; color: #fff; border: none; padding: 15px 30px; border-radius: 30px; cursor: pointer; transition: 0.3s; display: inline-block; font-size: 1em; } .form-container .btn:hover { background: #ff3f3f; } </style> </head> <body> <div class="form-container"> <div class="front"> <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> <button type="submit" class="btn">Sign Up</button> </form> <button class="flip-btn" onclick="flipCard()">Flip</button> </div> <div class="back"> <h2>Login</h2> <form> <div class="input-group"> <input type="text" placeholder="Username" required> </div> <div class="input-group"> <input type="password" placeholder="Password" required> </div> <button type="submit" class="btn">Login</button> </form> <button class="flip-btn" onclick="flipCard()">Back</button> </div> </div> <script> function flipCard() { document.querySelector('.form-container').classList.toggle('flipped'); } </script> </body> </html>