WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML CSS OTP Form
1060
MyPortfolio
Open In Editor
Publish Your Code
Recommended
13 November 2024
3D CSS Photo Frame Effect to Images
3 April 2024
Website Template HTML & CSS
7 November 2024
CSS Aurora
HTML
Copy
OTP Verification
Enter OTP
Please enter the 6-digit OTP sent to your email.
Verify
CSS
Copy
* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; } /* Body Styling */ body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f4f8; } /* Container Styling */ .otp-container { background: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; width: 400px; } /* Heading Styling */ .otp-container h2 { color: #333; font-size: 1.5rem; margin-bottom: 1rem; } /* OTP Input Styling */ .otp-input { display: flex; justify-content: space-between; gap: 8px; margin: 1rem 0; } .otp-input input[type="text"] { width: 40px; height: 50px; font-size: 1.5rem; text-align: center; border: 2px solid #ddd; border-radius: 6px; transition: border-color 0.3s; } .otp-input input[type="text"]:focus { border-color: #007bff; outline: none; } /* Submit Button Styling */ .submit-btn { background-color: #007bff; color: #ffffff; font-size: 1rem; padding: 0.7rem 1.5rem; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .submit-btn:hover { background-color: #0056b3; } /* Instruction Text */ .instruction { color: #666; font-size: 0.9rem; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */