Create OTP Verification Form
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OTP Verification Form</title>
<style>
.form {
display: flex;
align-items: center;
flex-direction: column;
width: 300px;
background-color: white;
border-radius: 10px;
padding: 20px;
box-shadow:0.5px 1px 10px 0px;
}
.title {
font-size: 20px;
font-weight: bold;
color: black
}
.message {
color: darkgray;
font-size: 14px;
margin-top: 4px;
text-align: center
}
.inputs {
margin-top: 10px
}
.inputs input {
width: 32px;
height: 32px;
text-align: center;
border: 2px solid blue;
margin: 0 10px;
}
.inputs input:focus {
border-bottom: 1px solid red;
border-top: 1px solid green;
outline: none;
}
.action {
margin-top: 34px;
padding: 12px 16px;
border-radius: 8px;
border:none;
background-color: royalblue;
color: white;
align-self: end;
}</style>
</head>
<body>
<div align="center"style="margin:200px;">
<form class="form">
<div class="title">OTP</div>
<div class="title">Verification Code</div>
<p class="message">We have sent a verification code to your mobile number</p> <div class="inputs">
<input id="input1" type="text" maxlength="1">
<input id="input2" type="text" maxlength="1">
<input id="input3" type="text" maxlength="1">
<input id="input4" type="text" maxlength="1"> </div>
<button class="action">Verify Me</button> </form>
</div>
</body>
</html>
.png)
No comments:
Post a Comment
*******Please Comment, Like and Share******
दोस्तों पूरी पोस्ट पढने के लिए धन्यवाद, आशा करता हूँ आप को यह पोस्ट पसंद आई होगी और भी अधिक जानकारी के लिए या मुझसे जुड़ने के लिए आप मुझे मेरे फेसबुक पेज information & technology computer institutions और इन्स्टाग्राम ID:- satyam_hardoi को फॉलो कर सकते है,
मेरा youtube चैनल itci computer hardoi सर्च करे और पाए कंप्यूटर से सम्बंधित सभी विडियो और हाँ प्लीज नई अपडेट पाने के लिए चैनल को सब्सक्राइब जरुर करें, धन्यवाद | आपका $ सत्यम सर् $