HTML CSS OTP फॉर्म

2080 MyPortfolio

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

अनुशंसित

16 October 2025

लोडिंग प्रभाव के साथ CSS एनिमेटेड पृष्ठभूमि

31 January 2025

HTML लॉगिन पेज

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 OTP फॉर्म

अनुशंसित

लोडिंग प्रभाव के साथ CSS एनिमेटेड पृष्ठभूमि

शुद्ध CSS कार्ड मूवीज़ 3D

HTML लॉगिन पेज

HTML

CSS

JS

अनुशंसित

लोडिंग प्रभाव के साथ CSS एनिमेटेड पृष्ठभूमि

शुद्ध CSS कार्ड मूवीज़ 3D

HTML लॉगिन पेज

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS