목록html5 (313)

비전공자 개발일기

DOWNLOAD BUTTON COUNTDOWN TIMER

DOWNLOAD FILES Please Wait.... If the download did't start automatically, CLICK here * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } .download-container { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 .5rem; } .dow..
Javascript 2022. 5. 22. 00:28
PHONE NUMBER VAILDATION

Phone Number Validation With Simple Javascript CHECK body { border: 2px solid #007BFF; background-color: #EFEFEF; } .container { margin: 250px 0; } .container h1 { color: #007BFF; } .container .input-group input { border-color: #007BFF; border-width: 3px; border-radius: 25px 0 0 25px !important; } .container .input-group .input-group-btn button { border-radius: 0 25px 25px 0 !important; } $(docu..
JQuery 2022. 5. 21. 00:07
FILP CARD

I'm IRONMAN! I'm IRONMAN! Tony Stark * { text-align: center; } .card { width: 200px; height: 220px; position: relative; background-color: transparent; transition: transform .8s; transform-style: preserve-3d; } .card:hover { transform: rotateY(180deg); cursor: pointer; } .front, .back { width: 100%; height: 100%; background-color: #fff; padding-top: 20px; position: absolute; border-radius: 10px; ..
HTML _CSS 2022. 5. 20. 00:49
Isometric Menu Hover Effects

Home About Services Portfolio Our Team Contact Home About Services Portfolio Our Team Contact @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Oswald', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #434750; } ul { posit..
HTML _CSS 2022. 5. 19. 00:24
Sprite Animation

.scene { width: 230px; height: 200px; background:url('./background.jpg') 0 90% no-repeat; background-size: cover; background-size: 500% 400%; border-radius: 20%; position: relative; overflow: hidden; transition: background-position 15s linear; } .scene:hover { background-position: 150% 90%; } .mario { width: 65px; height: 100px; background: url("./mario_sprite.png") no-repeat; transform: transla..
HTML _CSS 2022. 5. 18. 00:13
Height Converter

Height Converter Cm .container { width: 375px; height: 280px; margin: 65px 0 0 350px; background-color: #000; padding-left: 30px; color: #FFF; } h1 { padding: 25px 0 0 15px; } #cm{ width: 150px; height: 25px; margin: 30px 0 0 15px; } #result_alert { width: 100%; float: left; font-size: 35px; margin-top: 5px; text-align: center; color: #CC3333; } #result_feet, #result_inches { width: 50%; float: ..
Javascript 2022. 5. 17. 00:18
Light AND Dark Mode Toggle

Night/Day Mode Toggle Click on the moon in the upper-right corner to change to night mode Click again on the sun to change back to day mode body { transition: 1.5s; } .night-toggle { width: 33px; height: 33px; position: absolute; right: 20px; top: 20px; } .night-toggle:hover { cursor: pointer; } .moon { background-color: transparent; box-shadow: -6px 1px 0 3px #275E8E; border-left: 3px solid #27..
Javascript 2022. 5. 16. 01:06
Random Color Generator

Welcome to Random Color Generator Click on the HexCode to Copy Generate #967b28 #df9d4f #af704f #97013b #14ae2e * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: linear-gradient(to right, #967b28 0%, #967b28 20%, #df9d4f 20%, #df9d4f 40%, #af704f 40%, #af704f 60%, #97013b 60%, #97013b 80%, #14ae2e 80%, #14ae2e 100%); } #pallete1, #pallete2, #pallete3,#pallete..
Javascript 2022. 5. 15. 01:02
이전 Prev 1 ··· 32 33 34 35 36 37 38 ··· 40 Next 다음