HTML CSS OTP फॉर्म

1426 MyPortfolio

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

14 March 2025

मूल्य निर्धारण इंटरैक्शन (HTML, CSS और JS)

13 November 2024

शुद्ध CSS का उपयोग करके छवियों पर फ्रेम प्रभाव

26 February 2025

HTML CSS डेवलपर लैंडिंग पेज

HTML

CSS

* {
            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;
        }

अनुशंसित

मूल्य निर्धारण इंटरैक्शन (HTML, CSS और JS)

शुद्ध CSS का उपयोग करके छवियों पर फ्रेम प्रभाव

HTML CSS डेवलपर लैंडिंग पेज

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS