목록Javascript (176)

비전공자 개발일기

Glitchy Loading Indicator

LOADING... @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400); html, body { height: 100%; } body { background: radial-gradient(#222922, #000500); font-family: 'Source Code Pro', monospace; font-weight: 400; overflow: hidden; padding: 30px 0 0 30px; text-align: center; } .word { bottom: 0; color: #fff; font-size: 2.5em; height: 2.5em; left: 0; line-height: 2.5em; margin: aut..
Javascript 2023. 2. 26. 01:32
To Do List

to do list Add Insert a new task @import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Lato:ital,wght@0,300;0,400;1,300;1,400&display=swap"); * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; user-select: none; } html, body { width: 100%; height: 100%; } a { text-decoration: none; color: inherit; } body { displa..
Javascript 2023. 2. 25. 22:28
Counter APP

Counter APP 0 decrement reset increment * { margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 16px; color: #333; width: 400px; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; background-color: #ABDCF0; } h1 { text-transform: uppercase; } .counter-preview { font-size: 8rem; font-weight: 700; color: #333; } bu..
Javascript 2023. 2. 17. 00:12
Music Player Widget

@font-face { font-family: "icomoon"; src: url("https://raw.githubusercontent.com/abxlfazl/music-player-widget/main/src/assets/icomoon/fonts/icomoon.eot?u8ckod"); src: url("https://raw.githubusercontent.com/abxlfazl/music-player-widget/main/src/assets/icomoon/fonts/icomoon.eot?u8ckod#iefix") format("embedded-opentype"), url("https://raw.githubusercontent.com/abxlfazl/music-player-widget/main/src/..
Javascript 2023. 2. 3. 00:17
Nested Border Radius

Parent Radius: Parent Padding: @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); * { box-sizing: border-box; margin: 0; } body { min-height: 100vh; padding: 1rem; background: #789; display: flex; align-items: center; justify-content: center; font-family: "Poppins", sans-serif; } .container { display: flex; flex-direction: column; align-items: center; } .parent, .child..
Javascript 2023. 1. 21. 00:06
Budget App

Budget Value cannot be empty or negative Set Budget Expenses Values cannot be empty Check Amount Total Budget 0 Expenses 0 Balance 0 Expense List * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #F7F9FD; } .wrapper { width: 90%; font-size: 16px; max-width: 43.75em; margin: 1em auto; } .container { width: 100%; } .sub-container { wi..
Javascript 2023. 1. 18. 00:16
Box Shadow Generator

Horizontal Shadow: Vertical Shadow: Blur Radius: Spread Radius: Shadow Color: Shadow Color Opacity: Inset Shadow: Copy * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #0075ff; } .container { background-color: #ffffff; padding: 30px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; width: 80vmin; border-ra..
Javascript 2023. 1. 16. 01:25
Search Bar With Autocomplete

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ background: #BB2429; padding: 0 20px; } ::selection{ color: #fff; background: #BB2426; } .wrapper{ max-width: 450px; margin: 150px auto; } .wrapper .search-input{ background: #fff; width: 100%; bor..
Javascript 2023. 1. 4. 20:55
이전 Prev 1 2 3 4 ··· 22 Next 다음