목록html5 (313)

비전공자 개발일기

Circular Progress Bar

85% 90% 70% * { margin: 0; padding: 0; box-sizing: border-box; font-family: consolas; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #CFD1E1; } .container { display: flex; justify-content: center; align-items: center; gap: 80px 100px; flex-wrap: wrap; } .container .box { position: relative; width: 240px; height: 250px; display: flex; ju..
HTML _CSS 2022. 10. 17. 11:18
Netflix Landing Screen

Sign In See what's next Watch anywhere. Cancel Anytime Watch Free For 30 Days Cancel at any time Watch anywhere Pick your price If you decide Netflix isn't for you - no problem. No commitment. Cancel online anytime. Watch Free For 30 Days Watch TV shows and movies anytime, anywhere — personalized for you. Watch Free For 30 Days Watch on your TV Smart TVs, PlayStation, Xbox, Chromecast, Apple TV,..
Javascript 2022. 10. 17. 01:21
Floating Menu

*{ margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; } body{ background:#311b92; position:relative; } .share{ display:block; width:60px; height:60px; background:#ff9100; position:absolute; top:300px; left:50%; z-index:999; text-align:center; overflow:hidden; line-height:65px; font-size:1.5em; color:#fff; -moz-box-shadow: 0px 3px 9px rgba(0,0,0,.5); -webkit-box-shadow: 0p..
JQuery 2022. 10. 15. 00:25
Multi-step Growing BTN

♥ /* Try clicking it quickly and slowly. Try long and short button presses. :^) */ /* Remove a::before from line 55 to remove text. */ *, *::before, *::after { box-sizing: border-box; font-family: "Poppins", sans-serif; } body, html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 0; ..
HTML _CSS 2022. 10. 14. 00:38
Password Strength Checker

JavaScript Password Strength Validation Example Password: Show Password
HTML _CSS 2022. 10. 13. 00:45
Eye Follow Mouse Cursor

body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #dab785; } .container { position: relative; cursor: pointer; } .iris { position: absolute; width: 70px; height: 70px; border: 5px solid #333; background-color: #0077b6; border-radius:50%; left:40px; top:30px; } .iris:before { content:""; position: absolute; background-color: #333; border-radius:5..
HTML _CSS 2022. 10. 12. 00:53
2048 GAME

2048 new game Paused reset continue end 2048 Score: pause Control left up down right You can also use Arrow keys! *{ margin:0; padding:0; box-sizing:border-box; } p{ border-radius:10px; padding:5px; border:2px solid white; background:lightgray; color:black; font-size:18px; text-align: center; } button{ font-family: 'Sniglet', cursive; } body { background: linear-gradient(45deg, rgba(189,245,152,..
Javascript 2022. 10. 11. 00:55
Cat Game

^ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Arial, Helvetica, sans-serif; } .container { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; gap: 2rem; } .wrapper { height: 300px; width: 300px; pos..
Javascript 2022. 10. 10. 01:12
이전 Prev 1 ··· 14 15 16 17 18 19 20 ··· 40 Next 다음