목록check (3)

비전공자 개발일기

Animated Gender Selection Page Design

Which one are you? Male Female * { margin: 0; padding: 0; box-sizing: border-box; /* position: relative; */ } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; } .container { display: flex; flex-direction: column; align-items: center; gap: 20px; } .container img { max-width: 150px; } .container h2 { font-size: 2em; font-weight: 500; co..
HTML _CSS 2023. 2. 2. 11:38
Create Email Validation

Email Id Please Enter A Valid Email Id *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; background: linear-gradient( 135deg, #61d954, #2ebf75 ); } .container{ width: 400px; background-color: #ffffff; padding: 50px 30px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; border-radius: 10px; box-shadow: 25px 25px 30px rgba(0,0,0,0...
Javascript 2022. 12. 8. 00:37
Password Strength Checker with color

Password Strength Check * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; } .container { width: 400px; padding: 30px 30px 70px 30px; background-color: #333; display: flex; justify-content: center; flex-direction: column; border: 1px solid #111; gap: 10px; -webkit-..
Javascript 2022. 12. 7. 08:33
이전 Prev 1 Next 다음