목록html5 (313)

비전공자 개발일기

Javascript Modal Popup Box

modal project open modal modal content @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); /* =============== Variables =============== */ :root { /* dark shades of primary color*/ --clr-primary-1: hsl(205, 86%, 17%); --clr-primary-2: hsl(205, 77%, 27%); --clr-primary-3: hsl(205, 72%, 37%); --clr-primary-4: hsl(205, 63%, 48%); /* primary/main color */ --..
Javascript 2022. 6. 7. 00:18
GROWING LEON APPLE ICON

.logo { font-size: 8rem; text-shadow: 0 0 100px; animation: animate 2s infinite linear; margin:25% 50%; } @keyframes animate { 0%, 100% { color: lawngreen; } 25% { color: deeppink; } 50% { color: deepskyblue; } 75% { color: white; } }
HTML _CSS 2022. 6. 6. 00:52
To Do List by Pure CSS

My Special To Do List Make awesome CSS Animation Go to Gym Make a iOS Application Swift, React Native, Next.js, Node.js body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #1A1E23; } .todo-list { display: flex; flex-direction: column; padding: 0 75px 10px 30px; background-color: #162740; border: transparent; } .todo-list .todo-list-title { padding..
HTML _CSS 2022. 6. 5. 00:07
Simple Image Comparison Slider

Crowded Quiet Image Comparison Slider /* -------------------------------- Primary style -------------------------------- */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 100%; font-family: "Roboto Slab", sans-serif; color: #445b7c; background-color: #363636; padding: 1rem .5rem; } a { color: #dc717d; text-decoratio..
JQuery 2022. 6. 4. 00:53
Add To Cart Animation

ADD TO CART ADDED .cart-button { position: relative; padding: 10px; width: 200px; height: 60px; border: 0; outline: none; border-radius: 10px; background-color: #1B6EEE; cursor: pointer; color: #FFF; transition: .3s ease-in-out; overflow: hidden; } .cart-button span { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.2em; color: #FFF; } .cart-but..
HTML _CSS 2022. 6. 3. 00:35
Snow Animation

https://www.sassmeister.com/ SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com body { height: 100vh; background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); overflow: hidden; filter: drop-shadow(0 0 10px white); } @function random_range($min, $max) { $rand: random(); $random_range: $min + floor..
HTML _CSS 2022. 6. 2. 01:17
Virtual Keyboard

body { margin: 25px; text-align: center; background: #000; } h1 { color: #26abde; } .virtual-keyboard .row { text-align: center; margin: 0 0 15px; } .virtual-keyboard .row.spacebar input { padding: 10px 150px; } .virtual-keyboard input[type='button'] { padding: 10px 20px; border-radius: 30px; border: 3px solid #202c2b; background: #667ABA; color: #fff; text-transform: uppercase; } .virtual-keybo..
JQuery 2022. 6. 1. 00:02
Create Date Time Day

* { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #EFEFEF; } .container .date { font-size: 24px; font-weight: 500; } .container .date#printTime { color: #E74C3C; } .container .date#printDate { color: #2ECC71; margin: 0 20px; } .container .date#printDay { color: #9B59B6; } let date = ..
Javascript 2022. 5. 31. 01:15
이전 Prev 1 ··· 30 31 32 33 34 35 36 ··· 40 Next 다음