📌 OTP PIN Input Field Design Using HTML & CSS (part 1)

Опубликовано: 01 Январь 1970
на канале: Savvy Programmer

484

🌟 Please leave a LIKE 😍 and SUBSCRIBE for more AMAZING content! 🌟

OTP PIN Input Field Design Using HTML CSS,
In this video, you will learn how to create OTP/PIN on a webpage using HTML, and CSS. Recommended for beginners learning HTML, CSS, and web designing.

📝 CREATOR: Ma Ýes

PRODUCED BY: BEAT_26
✅ music credit
   • No copyright  Nepali music ||Suntalim...

📌 Efficient OTP PIN Entry: Seamless Navigation to Next Input Field (Part 2) -    • 📌 Efficient OTP PIN Entry: Seamless N...

▶️ PLAYLIST:
Udemy clone:    • Udemy Clone (Project Setup) part 1 us...

⌚ Timestamps:
00:01 - Demo
00:51 - HTML
00:56 - CSS start
01:29 - otp-fields
02:02 - Input CSS
03:08 - Result

🔎 Related Queries...
OTP input field html css
OTP input field html css codepen
OTP input field html css w3schools
otp-input field html css react
otp input field html css angularjs
6 digit otp html
otp input using javascript
vue-otp input codepen

🏷️ Tags:
#webdevelopment
#html
#css
#css3
#webdesign

SOURCE CODE (CSS):
body {
margin: 0;
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #282a36;
height: 100vh;
color: #fff;
}

h1 {
letter-spacing: 4px;
}

.otp-field {
display: flex;
grid-area: 5px;
}

.otp-field input {
width: 24px;
font-size: 32px;
padding: 10px;
text-align: center;
border-radius: 5px;
margin: 2px;
border: 2px solid #55525c;
background: #21232d;
font-weight: bold;
color: #fff;
outline: none;
transition: all 0.1s;
}

.otp-field input:focus {
border: 2px solid #a527ff;
box-shadow: 0 0 2px 2px #a527ff6a;
}

.space {
margin-right: 2rem !important;
}

Смотрите видео 📌 OTP PIN Input Field Design Using HTML & CSS (part 1) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Savvy Programmer 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 48 раз и оно понравилось людям.

22,00