목록Javascript (176)

비전공자 개발일기

Copy to Text

실행 영상 Copy Text Copy Text * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background-color: #bb2629; display: flex; flex-direction: column; align-items: center; justify-content: center; } .container { background-color: #ffffff; padding: 30px; border-radius: 10px; margin: 30px 0; } .container input { font-size: 18px; padding: 10px; bo..
Javascript 2023. 1. 1. 01:59
Testimonial Slider

* { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #bb2649; } .wrapper { background-color: #ffffff; position: absolute; width: 80vw; max-width: 41em; min-height: 25em; border-radius: 0.6em; transform: translate(-50%, -50%); left: 50%; top: 50%; box-shadow: 0 1.8em 3em rgba(1, 17, 39, 0.15); display: flex; } .testimonial-container..
Javascript 2022. 12. 30. 00:34
Find leap year

Start Year: End Year: Get Leap Years * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #bb2649; } .container { background-color: #ffffff; width: 90vw; max-width: 37.5em; position: absolute; padding: 3em 1.8em; transform: translate(-50%, -50%); left: 50%; top: 50%; border-radius: 8px; box-shadow: 0 1em 2em rgba(112, 90, 23, 0.3); } ...
Javascript 2022. 12. 29. 00:10
Product Image Zoom

* { padding: 0; margin: 0; box-sizing: border-box; } .image-container { width: 30%; margin: 5% 0 0 5%; } img { max-width: 100%; } #overlay { display: none; background: url("https://i.postimg.cc/Y0hq1pvS/shoe-img.jpg"); position: absolute; width: 25%; height: 35%; margin-top: -30%; margin-left: 50%; border: 2px solid #555; z-index: 1000; background-repeat: no-repeat; } #mouse-overlay { cursor: zo..
Javascript 2022. 12. 28. 00:27
Decimal - Binary Converter

Decimal Binary Converter Decimal: Binary: * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #667ABA; } .container { background-color: #ffffff; width: 80vmin; max-width: 37.5em; padding: 3em 2.5em; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 0.62em; box-shadow: 0 1.2em 2.5em rgba(0, 21, 4..
Javascript 2022. 12. 27. 00:42
Pixel Art Maker

실제 영상 Grid Width 00 Grid Height 00 Create Grid Clear Grid Erase Paint * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto Mono", monospace; } body { background-color: #f4c531; } .wrapper { background-color: #ffffff; width: 80vmin; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; padding: 40px 20px; border-radius: 8px; } label { display: block; } span..
Javascript 2022. 12. 25. 01:08
Emoji Cursor Trail Effect

realtime on display EMOJI CURSOR TRAIL EFFECT * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: #111; overflow: hidden; } span { position: absolute; pointer-events: none; width: 10px; height: 10px; animation: animate 1s linear infinite; } @keyframes animate { 0% { translate: 0 0; opacity: 0; } 10% { opacity: 1; } 90% { translate: 0 100px; opacity: 1..
Javascript 2022. 12. 24. 00:59
Quiz App new Version

Start 1 of 3 questions 10s Next Demo Score Restart * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #0a69ed; } .start-screen, .score-container { position: absolute; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } button { border: none; outline: none; cursor: ..
Javascript 2022. 12. 23. 00:37
이전 Prev 1 2 3 4 5 ··· 22 Next 다음