목록HTML _CSS (226)

비전공자 개발일기

Starbucks Landing Page

Home Menu What's New Contact It's not just Coffee It's Starbucks Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, alias ex eligendi quaerat itaque facere sint aliquid, unde, aut temporibus libero amet minus ipsam maxime laborum officia magni rerum vel ratione fugiat adipisci veritatis. Learn More * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } section { widt..
HTML _CSS 2023. 1. 2. 08:36
Happy New Year 2023

Happy New Year 20223 * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #222; } h2 { font-size: 4em; font-weight: 700; color: #404040; letter-spacing: .05em; text-align: center; } h2::before { content: ''; position: absolute; top: 33px; height: 4px; width: calc(100% - 13..
HTML _CSS 2022. 12. 31. 00:33
X-mas Background

움직이는 눈, 산타 * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { background: linear-gradient(#A2000A, #CF0000); display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { width: 100%; height: 100vh; overflow: hidden; } .container::before { content: ''; position: absolute; bottom: 0; width: 100%; height: 200px; background-image: url('t..
HTML _CSS 2022. 12. 26. 00:48
Number Fill Animation

2,000,000,000 :root { --color-green-200: #197302; --color-green-600: #36FE04; } body { background: #000; display: grid; height: 100vh; min-height: 100dvh; place-items: center; } .number { color: #f09; font-size: 10vw; font-weight: bold; background-image: linear-gradient(var(--color-green-600), var(--color-green-600)), linear-gradient(var(--color-green-200), var(--color-green-200)); -webkit-backg..
HTML _CSS 2022. 12. 22. 00:47
Noisy Grainy Icons

result * { padding: 0; margin: 0; box-sizing: border-box; } body { min-height: 100vh; display: grid; place-items: center; background: #111; } section { width: 80vw; padding: 1.75rem 1.25rem; display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; font-size: 60pt; color: #0000; background: repeating-radial-gradient(blue 0 0.001%, red 0 0.0001%) 50% 0/2500px 2500px,..
HTML _CSS 2022. 12. 21. 00:04
Credit Card2

1234 5678 9012 3456 Tony Stark 10/19 06/21 :root { font-size: 24px; } body { background: #1488cc; /* fallback for old browsers */ background: linear-gradient(to left, #283593, #1976d2); height: 100vh; font-family: "Josefin Sans", sans-serif; } /* Background circles start */ .circle { position: absolute; border-radius: 50%; background: radial-gradient(#006db3, #29b6f6); } .circles { position: abs..
HTML _CSS 2022. 12. 19. 07:41
Elastic Line Animation

실제 동작 영상 * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #111; } .elastic { width: 400px; height: 400px; display: flex; justify-content: center; align-items: flex-end; } .elastic::before { content: ''; position: absolute; bottom: 62.5px; left: 5px; width: 15px; height..
HTML _CSS 2022. 12. 18. 00:53
Create Hover Effect

Home About Services Work Team Contact * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; background-color: #FFF; } ul li{ list-style: none; text-align: center; } ul li a { color: #333; text-decoration: none; font-size: 2em; font-weight: 300; padding: 5px 20px; display: i..
HTML _CSS 2022. 12. 12. 00:50
이전 Prev 1 ··· 4 5 6 7 8 9 10 ··· 29 Next 다음