Practice/Examples5 Wavy Text Animation L o a d i n g . . . 출처 : Youtube > Online Tutorials 채널 *{ margin: 0; padding: 0; font-family: consolas; } .body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; } .wavy{ position: relative; -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0,0,0,0.2)); } .wavy span{ position: relative; display: inline-block; color: #fff; font-siz.. 2020. 3. 22. Images Slide(HTML + CSS) 출처 : Youtube > DarkCode 채널 .content-area{ margin: 0; padding: 0; background: #34495e; height: 680px; } .slidershow{ width: 700px; height: 400px; overflow: hidden; } .middle{ position: absolute; top: 31%; left: 41%; transform: translate(-50%, -50%); } .navigation{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar{ width: 50px; height: 10px; border: 2p.. 2020. 3. 19. Login Form(HTML+CSS) Login 출처 : Youtube > DarkCode 채널 #contentBody { margin: 0; padding: 0; font-family: sans-serif; background: #34495e; height: 500px; } .box{ width: 300px; padding: 40px; position: absolute; top: 35%; left: 40%; transform: translate(-50%, -50%); background: #191919; text-align: center; } .box h1{ color: white; text-transform: uppercase; font-weight: 500; } .box input[type="text"], .box input[type=.. 2020. 3. 18. Calculator(CSS+Script) c / * 7 8 9 - 4 5 6 + 3 2 1 0 00 . = 출처 : Youtube > Online Tutorials 채널 * { margin: 0px; padding: 0px; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #091921; } .calculator{ position: relative; display: grid; } .calculator .value{ grid-column: span 4; height: 100px; text-align: right.. 2020. 3. 17. Clock(CSS+Script) 출처 : Youtube > Online Tutorials 채널 * { margin: 0; padding: 0; box-sizing: border-box; } .clock-display { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #091921; } .clock { width: 350px; height: 350px; display: flex; justify-content: center; align-items: center; background: url('https://k.kakaocdn.net/dn/bmbaGK/btqCGRfo808/dAlVtVwx5KjNGJBuHktRX0/img.pn.. 2020. 3. 15. 이전 1 다음
