목록Countdown (3)

비전공자 개발일기

Countdown Timer

Countdown to my birthday days Hours Minutes Seconds 🥳 🎉 🎂 /* general styling */ :root { --smaller: .75; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; margin: 0; } body { align-items: center; background-color: #ffd54f; display: flex; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;..
Javascript 2022. 8. 25. 00:32
Simple Countdown

Click 👇 to start/pause the timer @property --n { syntax: ""; inherits: true; initial-value: 0; } @property --t { syntax: ""; inherits: true; initial-value: #000; } @property --r { syntax: ""; inherits: true; initial-value: #000; } @property --b { syntax: ""; inherits: true; initial-value: #000; } @property --l { syntax: ""; inherits: true; initial-value: #000; } .d { width: 77px; /* size */ disp..
HTML _CSS 2022. 8. 10. 00:27
Javascript - Animated Countdown

3 2 1 0 Get Ready GO! Replay @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; height: 100vh; overflow: hidden; margin: 0; } h4 { font-size: 20px; margin: 5px; text-transform: uppercase; } .counter { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: ce..
Javascript 2021. 10. 10. 00:52
이전 Prev 1 Next 다음