├── ampm ├── index.html ├── index.js └── styles.css ├── avocado ├── index.html └── styles.css ├── blink ├── index.html └── styles.css ├── book ├── index.html └── styles.css ├── bounce ├── index.html └── styles.css ├── burger ├── index.html └── styles.css ├── card ├── Black.jpg ├── index.html └── styles.css ├── carousel ├── firstImage.jpg ├── index.html ├── index.js ├── secondImage.jpg ├── styles.css └── thirdImage.jpg ├── cat ├── index.html ├── index.js ├── rsz_cursor.png └── styles.css ├── clock ├── index.html ├── index.js └── styles.css ├── coffee ├── index.html └── styles.css ├── coolLoader ├── index.html └── styles.css ├── counter ├── index.html ├── index.js └── styles.css ├── cuteSwitch ├── index.html ├── index.js └── styles.css ├── fancybutton ├── index.html └── styles.css ├── fancylogin ├── index.html ├── index.js └── styles.css ├── fingers ├── index.html └── styles.css ├── followingEyes ├── index.html ├── index.js └── styles.css ├── hamburger ├── index.html └── styles.css ├── heartbeat ├── index.html └── styles.css ├── hero ├── egypt.jpg ├── index.html └── styles.css ├── lightSwitch ├── index.html ├── index.js └── styles.css ├── loadbars ├── index.html └── styles.css ├── loading ├── index.html └── styles.css ├── loadingsquare ├── index.html └── styles.css ├── login ├── index.html └── styles.css ├── memory ├── bootstrap.png ├── cardBack.png ├── github.png ├── index.html ├── index.js ├── javascript.png ├── jquery.png ├── nodejs.png ├── react.png ├── sass.png ├── styles.css └── vscode.png ├── monday ├── index.html └── styles.css ├── navbar ├── index.html └── styles.css ├── navigation ├── index.html ├── index.js └── styles.css ├── push ├── index.html └── styles.css ├── rating ├── index.html ├── index.js └── styles.css ├── share ├── index.html ├── index.js └── styles.css ├── spinner ├── index.html └── styles.css ├── square ├── index.html └── styles.css ├── stopwatch ├── index.html ├── main.js ├── stopwatch.js └── styles.css ├── switch ├── index.html └── styles.css └── todo ├── background.jpg ├── index.html ├── index.js └── styles.css /ampm/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Light Switch 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
AM
14 | 15 |
PM
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /ampm/index.js: -------------------------------------------------------------------------------- 1 | const switchBtn = document.querySelector(".switchBtn"); 2 | const container = document.querySelector(".container"); 3 | const am = document.querySelector(".am"); 4 | const pm = document.querySelector(".pm"); 5 | 6 | switchBtn.addEventListener("click", () => container.classList.toggle("on")); 7 | 8 | am.addEventListener("click", () => { 9 | if(switchBtn.checked) { 10 | switchBtn.checked = false; 11 | container.classList.toggle("on"); 12 | } else { 13 | return; 14 | } 15 | }) 16 | 17 | pm.addEventListener("click", () => { 18 | if(switchBtn.checked) { 19 | return; 20 | } else { 21 | switchBtn.checked = true; 22 | container.classList.toggle("on"); 23 | } 24 | }) -------------------------------------------------------------------------------- /ampm/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #1d304e; 9 | display: flex; 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .container { 17 | position: relative; 18 | top: 50px; 19 | display: flex; 20 | width: 400px; 21 | height: 500px; 22 | justify-content: space-between; 23 | align-items: center; 24 | } 25 | 26 | .am, .pm { 27 | font-size: 50px; 28 | font-family: 'Work Sans', sans-serif; 29 | cursor: pointer; 30 | } 31 | 32 | .am { 33 | color: #eef0f2; 34 | } 35 | 36 | .pm { 37 | color: #6f98ce; 38 | } 39 | 40 | .container.on .am { 41 | color: #6f98ce; 42 | } 43 | 44 | .container.on .pm { 45 | color: #eef0f2; 46 | } 47 | 48 | input { 49 | position: relative; 50 | width: 200px; 51 | height: 100px; 52 | background-color: #83d8fe; 53 | border-radius: 60px; 54 | box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); 55 | -webkit-appearance: none; 56 | outline: none; 57 | cursor: pointer; 58 | transition: all 0.4s ease-in-out; 59 | } 60 | 61 | input:checked { 62 | background-color: #739cd4; 63 | } 64 | 65 | input::before { 66 | content: ""; 67 | position: absolute; 68 | width: 100px; 69 | height: 100px; 70 | border-radius: 50%; 71 | top: 0; 72 | left: 0; 73 | background-color: #ffce96; 74 | transform: scale(0.9); 75 | box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); 76 | z-index: 1; 77 | transition: all 0.4s ease-in-out; 78 | animation: day 0.4s ease; 79 | } 80 | 81 | .container.on input::before { 82 | animation: night 0.4s ease; 83 | } 84 | 85 | input:checked::before { 86 | left: 100px; 87 | background-color: #fee3b4; 88 | box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.5); 89 | } 90 | 91 | .clouds { 92 | position: absolute; 93 | width: 90px; 94 | height: 8px; 95 | background-color: #e1f7ff; 96 | border-radius: 50%; 97 | transition: all 0.4s ease; 98 | cursor: pointer; 99 | } 100 | 101 | #firstCloud { 102 | top: 43%; 103 | left: 40%; 104 | } 105 | 106 | #secondCloud { 107 | top: 48%; 108 | left: 35%; 109 | z-index: 2; 110 | transition: all 0.4s ease; 111 | } 112 | 113 | #thirdCloud { 114 | top: 53%; 115 | left: 45%; 116 | transition: all 0.25s ease; 117 | } 118 | 119 | #firstCloud::after, #secondCloud::after, #thirdCloud::after { 120 | content: ""; 121 | width: 5px; 122 | height: 5px; 123 | border-radius: 50%; 124 | background-color: #dce7f6; 125 | position: absolute; 126 | top: 20px; 127 | left: 40px; 128 | transition: all 0.3s ease; 129 | opacity: 0; 130 | } 131 | 132 | #secondCloud::after { 133 | width: 8px; 134 | height: 8px; 135 | top: 5px; 136 | left: 35px; 137 | } 138 | 139 | #thirdCloud::after { 140 | width: 6px; 141 | height: 6px; 142 | left: -40px; 143 | top: 10px; 144 | } 145 | 146 | .container.on .clouds { 147 | width: 7px; 148 | height: 7px; 149 | background-color: #dce7f6; 150 | } 151 | 152 | .container.on #secondCloud { 153 | width: 10px; 154 | height: 10px; 155 | left: 125px; 156 | } 157 | 158 | .container.on #thirdCloud { 159 | width: 8px; 160 | height: 8px; 161 | } 162 | 163 | .container.on #firstCloud::after, .container.on #secondCloud::after, .container.on #thirdCloud::after { 164 | opacity: 1; 165 | } 166 | 167 | .crater { 168 | width: 20px; 169 | height: 20px; 170 | border-radius: 50%; 171 | background-color: #e9cda5; 172 | position: absolute; 173 | right: 125px; 174 | top: 225px; 175 | z-index: 3; 176 | cursor: pointer; 177 | opacity: 0; 178 | } 179 | 180 | .crater::after, .crater::before { 181 | content: ""; 182 | position: absolute; 183 | background-color: #e9cda5; 184 | border-radius: 50%; 185 | width: 10px; 186 | height: 10px; 187 | top: 15px; 188 | right: 40px; 189 | } 190 | 191 | .crater::before { 192 | width: 15px; 193 | height: 15px; 194 | top: 35px; 195 | right: 15px; 196 | } 197 | 198 | .container.on .crater { 199 | opacity: 1; 200 | animation: moon 0.5s ease; 201 | } 202 | 203 | @keyframes night { 204 | 0% { 205 | left: 0px; 206 | } 207 | 45% { 208 | left: -5px; 209 | } 210 | 80% { 211 | left: 105px; 212 | } 213 | 100% { 214 | left: 100px; 215 | } 216 | } 217 | 218 | @keyframes day { 219 | 0% { 220 | left: 100px; 221 | } 222 | 45% { 223 | left: 105px; 224 | } 225 | 80% { 226 | left: -5px; 227 | } 228 | 100% { 229 | left: 0px; 230 | } 231 | } 232 | 233 | @keyframes moon { 234 | 0% { 235 | opacity: 0; 236 | } 237 | 40% { 238 | opacity: 0; 239 | } 240 | 100% { 241 | opacity: 1; 242 | } 243 | } -------------------------------------------------------------------------------- /avocado/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tea Time 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | -------------------------------------------------------------------------------- /avocado/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #dae8aa; 10 | display: flex; 11 | } 12 | 13 | .container { 14 | margin: auto; 15 | display: flex; 16 | height: 400px; 17 | width: 400px; 18 | } 19 | 20 | .avocado { 21 | margin: auto; 22 | display: flex; 23 | flex-direction: column; 24 | justify-content: center; 25 | align-items: center; 26 | width: 80%; 27 | height: 90%; 28 | transform-origin: bottom; 29 | animation: anim 1.7s ease infinite; 30 | } 31 | 32 | .avoHead { 33 | width: 150px; 34 | height: 150px; 35 | background-color: #8fb545; 36 | border-radius: 50%; 37 | position: relative; 38 | top: 90px; 39 | border: 5px solid #4d4d4b; 40 | } 41 | 42 | .avoHead::after { 43 | content: ""; 44 | width: 130px; 45 | height: 130px; 46 | background-color: #e1e285; 47 | position: absolute; 48 | border-radius: 50%; 49 | top: 50%; 50 | left: 50%; 51 | transform: translate(-50%, -50%); 52 | } 53 | 54 | .avoBody { 55 | width: 200px; 56 | height: 200px; 57 | background-color: #8fb545; 58 | border-radius: 50%; 59 | border: 5px solid #4d4d4b; 60 | } 61 | 62 | .avoBody::after { 63 | content: ""; 64 | width: 180px; 65 | height: 180px; 66 | background-color: #e1e285; 67 | position: absolute; 68 | border-radius: 50%; 69 | top: 50%; 70 | left: 50%; 71 | transform: translate(-50%, -8%); 72 | } 73 | 74 | .rightEye, .leftEye { 75 | width: 20px; 76 | height: 20px; 77 | border-radius: 50%; 78 | background-color: #e1e285; 79 | border: 5px solid #4d4d4b; 80 | border-left: none; 81 | border-bottom: none; 82 | position: absolute; 83 | top: 35%; 84 | left: 25%; 85 | transform: rotate(-45deg); 86 | z-index: 1; 87 | } 88 | 89 | .leftEye { 90 | top: 35%; 91 | left: 60%; 92 | } 93 | 94 | .mouth { 95 | width: 40px; 96 | height: 20px; 97 | border: 3px solid #4d4d4b; 98 | border-radius: 0 0 50px 50px; 99 | background-color: #fff; 100 | z-index: 1; 101 | position: relative; 102 | top: 53%; 103 | left: 50%; 104 | transform: translate(-50%, 0%); 105 | } 106 | 107 | .leftSpeckles, .rightSpeckles, .leftSpeckles::after, .leftSpeckles::before, .rightSpeckles::after, .rightSpeckles::before { 108 | z-index: 1; 109 | width: 5px; 110 | height: 5px; 111 | background-color: #8fb545; 112 | border-radius: 50%; 113 | position: absolute; 114 | top: 50%; 115 | left: 15%; 116 | } 117 | 118 | .leftSpeckles::after { 119 | content: ""; 120 | top: 5px; 121 | left: 7px; 122 | } 123 | 124 | .leftSpeckles::before { 125 | content: ""; 126 | top: -3px; 127 | left: 7px; 128 | } 129 | 130 | .rightSpeckles { 131 | left: 82%; 132 | } 133 | 134 | .rightSpeckles::after { 135 | content: ""; 136 | top: 5px; 137 | left: -7px; 138 | } 139 | 140 | .rightSpeckles::before { 141 | content: ""; 142 | top: -3px; 143 | left: -7px; 144 | } 145 | 146 | .seed, .seedBorder { 147 | width: 90px; 148 | height: 90px; 149 | background-color: #b85625; 150 | position: relative; 151 | z-index: 1; 152 | border-radius: 50%; 153 | border: 5px solid #4d4d4b; 154 | top: 53%; 155 | left: 50%; 156 | transform: translate(-50%, -50%); 157 | } 158 | 159 | .seedBorder { 160 | width: 70px; 161 | height: 70px; 162 | border: 5px solid #b85625; 163 | border-right: 5px solid #d99d81; 164 | top: 5%; 165 | animation: light 1.7s ease infinite; 166 | } 167 | 168 | .shadow { 169 | width: 100px; 170 | height: 10px; 171 | background-color: #bbc892; 172 | position: relative; 173 | border-radius: 50%; 174 | bottom: 127px; 175 | right: 38%; 176 | top: 94%; 177 | z-index: -2; 178 | animation: shad 1.7s ease infinite; 179 | } 180 | 181 | @keyframes anim { 182 | 0% { 183 | transform: rotate(10deg); 184 | } 185 | 50%{ 186 | transform: rotate(-10deg); 187 | } 188 | 100%{ 189 | transform: rotate(10deg); 190 | } 191 | } 192 | 193 | @keyframes shad { 194 | 0%{ 195 | transform: translate(-30px, -4px); 196 | } 197 | 50%{ 198 | transform: translate(-70px, -4px); 199 | } 200 | 100%{ 201 | transform: translate(-30px, -4px); 202 | } 203 | } 204 | 205 | @keyframes light { 206 | 0%{ 207 | transform: translate(-50%, -50%) rotate(-30deg); 208 | } 209 | 50%{ 210 | transform: translate(-50%, -50%) rotate(10deg); 211 | } 212 | 100%{ 213 | transform: translate(-50%, -50%) rotate(-30deg); 214 | } 215 | } -------------------------------------------------------------------------------- /blink/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Blinking Eye 6 | 7 | 8 | 9 |
10 |
11 | 12 |
13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /blink/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #30475e; 9 | } 10 | 11 | .eye { 12 | width: 100px; 13 | height: 100px; 14 | background-color: white; 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | transform: translate(-50%, -50%) rotate(45deg); 19 | border: 1px solid black; 20 | border-radius: 75% 0; 21 | overflow: hidden; 22 | } 23 | 24 | .pupil { 25 | width: 50px; 26 | height: 50px; 27 | background-color: black; 28 | border-radius: 50%; 29 | border: 15px solid #589167; 30 | position: absolute; 31 | top: 50%; 32 | left: 50%; 33 | transform: translate(-50%, -50%); 34 | } 35 | 36 | .eyelid { 37 | width: 150px; 38 | height: 80px; 39 | position: absolute; 40 | top: 50%; 41 | left: 50%; 42 | transform: translate(-50%, -50%) rotate(-45deg); 43 | z-index: 1; 44 | } 45 | 46 | .eyelid span { 47 | width: 100%; 48 | height: 15%; 49 | display: block; 50 | background-color: #f2a365; 51 | border-bottom: 2px solid black; 52 | border-radius: 0 0 60% 60%; 53 | animation: blink 2s ease infinite; 54 | } 55 | 56 | @keyframes blink { 57 | 0% { 58 | height: 15%; 59 | } 60 | 30% { 61 | height: 15%; 62 | } 63 | 40% { 64 | height: 100%; 65 | } 66 | 50% { 67 | height: 15%; 68 | } 69 | 60% { 70 | height: 15%; 71 | } 72 | 70% { 73 | height: 100%; 74 | } 75 | 80% { 76 | height: 15%; 77 | } 78 | 100% { 79 | height: 15%; 80 | } 81 | } -------------------------------------------------------------------------------- /book/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Book Loader 7 | 8 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |

Loading book

25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /book/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #084177; 10 | display: flex; 11 | } 12 | 13 | .container { 14 | margin: auto; 15 | width: 200px; 16 | height: 200px; 17 | display: flex; 18 | align-items: center; 19 | } 20 | 21 | .title { 22 | color: white; 23 | font-family: 'Dancing Script', cursive; 24 | font-size: 40px; 25 | } 26 | 27 | .title::after { 28 | content: ""; 29 | position: absolute; 30 | animation: loadingTitle 2s infinite; 31 | } 32 | 33 | .book { 34 | width: 150px; 35 | height: 110px; 36 | position: relative; 37 | perspective: 350px; 38 | margin: auto; 39 | } 40 | 41 | .pages { 42 | display: block; 43 | width: 75px; 44 | height: 110px; 45 | border: 5px solid white; 46 | border-left: 5px solid white; 47 | position: absolute; 48 | overflow: hidden; 49 | background: #084177; 50 | transform-style: preserve-3d; 51 | transform-origin: left center; 52 | animation: loading 3s cubic-bezier(0, .39, 1, .68) 2s infinite; 53 | } 54 | 55 | .pages:nth-child(2) { 56 | animation-delay: 1.9s; 57 | } 58 | 59 | .pages:nth-child(3) { 60 | animation-delay: 1.8s; 61 | } 62 | 63 | .pages:nth-child(4) { 64 | animation-delay: 1.7s; 65 | } 66 | 67 | .pages:nth-child(5) { 68 | animation-delay: 1.6s; 69 | } 70 | 71 | .pages:nth-child(6) { 72 | animation-delay: 1.5s; 73 | } 74 | 75 | .pages:nth-child(7) { 76 | animation-delay: 1.4s; 77 | } 78 | 79 | .pages:nth-child(8) { 80 | animation-delay: 1.3s; 81 | } 82 | 83 | @keyframes loading { 84 | 0% { 85 | transform: rotateY(0deg); 86 | } 87 | 5% { 88 | background: #083763; 89 | } 90 | 10% { 91 | background-color: #084177; 92 | transform: rotateY(-180deg); 93 | } 94 | 20% { 95 | background-color: #084177; 96 | transform: rotateY(-180deg); 97 | } 98 | 50% { 99 | background-color: #084177; 100 | transform: rotateY(-180deg); 101 | } 102 | 55% { 103 | background: #083763; 104 | } 105 | 60% { 106 | transform: rotateY(0deg); 107 | } 108 | 70% { 109 | transform: rotateY(0deg); 110 | background-color: #084177; 111 | } 112 | 100% { 113 | transform: rotateY(0deg); 114 | } 115 | } 116 | 117 | @keyframes loadingTitle { 118 | 0% { 119 | content: ""; 120 | } 121 | 33% { 122 | content: "."; 123 | } 124 | 66% { 125 | content: ".."; 126 | } 127 | 100% { 128 | content: "..."; 129 | } 130 | } -------------------------------------------------------------------------------- /bounce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing Animation 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /bounce/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 300px; 3 | height: 300px; 4 | position: relative; 5 | top: 5px; 6 | left: 100px; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: flex-end; 10 | align-items: center; 11 | background-color: #222831; 12 | } 13 | 14 | .circle { 15 | width: 100px; 16 | height: 100px; 17 | background-color: #00adb5; 18 | border-radius: 50%; 19 | animation-name: bouncing; 20 | animation-duration: 2s; 21 | animation-timing-function: 22 | cubic-bezier(0.280, 0.840, 0.420, 1); 23 | animation-iteration-count: infinite; 24 | } 25 | 26 | @keyframes bouncing { 27 | 0% { 28 | transform: scale(1, 1) translateY(0); 29 | } 30 | 10% { 31 | transform: scale(1.1, 0.9) translateY(0); 32 | } 33 | 30% { 34 | transform: scale(.9, 1.1) translateY(-100px); 35 | } 36 | 48% { 37 | transform: scale(1.05, .95) translateY(0); 38 | } 39 | 55% { 40 | transform: scale(0.95, 1.05) translateY(-15px); 41 | } 42 | 64% { 43 | transform: scale(1, 1) translateY(0); 44 | } 45 | 100% { 46 | transform: scale(1, 1) translateY(0); 47 | } 48 | } -------------------------------------------------------------------------------- /burger/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Burger Loader 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /burger/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #274f35; 9 | height: 100vh; 10 | display: flex; 11 | } 12 | 13 | .container { 14 | margin: auto; 15 | display: flex; 16 | flex-direction: column; 17 | align-items: center; 18 | justify-content: flex-end; 19 | width: 200px; 20 | height: 200px; 21 | } 22 | 23 | .saladTomatoContainer { 24 | display: flex; 25 | width: 90px; 26 | height: 5px; 27 | } 28 | 29 | .bottomBun { 30 | width: 100px; 31 | height: 25px; 32 | border: 5px solid black; 33 | border-radius: 3px 3px 20px 20px; 34 | background-color: #f2ca97; 35 | position: relative; 36 | bottom: 500px; 37 | animation: loader1 2s infinite linear; 38 | } 39 | 40 | .salad { 41 | width: 40%; 42 | height: 100%; 43 | border: 5px solid black; 44 | border-bottom: none; 45 | border-top: none; 46 | background-color: #6aa32b; 47 | position: relative; 48 | bottom: 500px; 49 | animation: loader2 2s infinite linear; 50 | } 51 | 52 | .tomato { 53 | width: 60%; 54 | height: 100%; 55 | background-color: #e22949; 56 | border: 5px solid black; 57 | border-bottom: none; 58 | border-top: none; 59 | position: relative; 60 | bottom: 500px; 61 | animation: loader3 2s infinite linear; 62 | } 63 | 64 | .meat { 65 | width: 100px; 66 | height: 25px; 67 | border: 5px solid black; 68 | background-color: #7a5335; 69 | border-radius: 5px; 70 | position: relative; 71 | bottom: 500px; 72 | animation: loader4 2s infinite linear; 73 | } 74 | 75 | .cheese { 76 | width: 90px; 77 | height: 5px; 78 | border: 5px solid black; 79 | border-bottom: none; 80 | border-top: none; 81 | background-color: #f8e71d; 82 | position: relative; 83 | bottom: 500px; 84 | animation: loader5 2s infinite linear; 85 | } 86 | 87 | .cheeseDrop { 88 | background-color: #f8e71d; 89 | width: 15px; 90 | height: 15px; 91 | border: 5px solid black; 92 | border-left: none; 93 | border-top: none; 94 | position: absolute; 95 | border-radius: 20% 20% 40% 20%; 96 | transform: rotate(45deg); 97 | right: 20%; 98 | top: 1px; 99 | z-index: 1; 100 | animation: drop 2s infinite linear; 101 | } 102 | 103 | .topBun { 104 | width: 100px; 105 | height: 40px; 106 | border: 5px solid black; 107 | border-radius: 50% 50% 5% 5%; 108 | background-color: #f2ca97; 109 | position: relative; 110 | z-index: 2; 111 | bottom: 500px; 112 | animation: loader6 2s infinite linear; 113 | } 114 | 115 | .sesame1, .sesame2, .sesame3, .sesame4, .sesame5, .sesame6 { 116 | width: 7px; 117 | height: 3px; 118 | background-color: #cea97a; 119 | border-radius: 50%; 120 | position: absolute; 121 | top: 45%; 122 | left: 20%; 123 | } 124 | 125 | .sesame2 { 126 | top: 70%; 127 | left: 35%; 128 | } 129 | 130 | .sesame3 { 131 | top: 35%; 132 | left: 35%; 133 | } 134 | 135 | .sesame4 { 136 | top: 40%; 137 | left: 60%; 138 | } 139 | 140 | .sesame5 { 141 | top: 60%; 142 | left: 75%; 143 | } 144 | 145 | .sesame6 { 146 | top: 55%; 147 | left: 50%; 148 | } 149 | 150 | @keyframes loader1 { 151 | 0% { 152 | bottom: 500px; 153 | transform: rotate(10deg); 154 | } 155 | 40% { 156 | transform: rotate(10deg); 157 | } 158 | 45% { 159 | bottom: 0; 160 | transform: rotate(0deg); 161 | } 162 | 67% { 163 | height: 25px; 164 | } 165 | 68% { 166 | height: 20px; 167 | } 168 | 70% { 169 | height: 25px; 170 | } 171 | 100% { 172 | bottom: 0; 173 | } 174 | } 175 | 176 | @keyframes loader2 { 177 | 0% { 178 | bottom: 500px; 179 | } 180 | 10% { 181 | bottom: 500px; 182 | } 183 | 60% { 184 | bottom: 0; 185 | } 186 | 100% { 187 | bottom: 0; 188 | } 189 | } 190 | 191 | @keyframes loader3 { 192 | 0% { 193 | bottom: 500px; 194 | } 195 | 15% { 196 | bottom: 500px; 197 | } 198 | 65% { 199 | bottom: 0; 200 | } 201 | 100% { 202 | bottom: 0; 203 | } 204 | } 205 | 206 | @keyframes loader4 { 207 | 0% { 208 | bottom: 500px; 209 | } 210 | 20% { 211 | bottom: 500px; 212 | } 213 | 68% { 214 | bottom: 0; 215 | } 216 | 100% { 217 | bottom: 0; 218 | } 219 | } 220 | 221 | @keyframes loader5 { 222 | 0% { 223 | bottom: 500px; 224 | } 225 | 25% { 226 | bottom: 500px; 227 | } 228 | 70% { 229 | bottom: 0; 230 | } 231 | 100% { 232 | bottom: 0; 233 | } 234 | } 235 | 236 | @keyframes loader6 { 237 | 0% { 238 | bottom: 500px; 239 | } 240 | 30% { 241 | bottom: 500px; 242 | } 243 | 72% { 244 | bottom: 0; 245 | } 246 | 100% { 247 | bottom: 0; 248 | } 249 | } 250 | 251 | @keyframes drop { 252 | 0% { 253 | opacity: 0; 254 | transform: rotate(45deg) scale(0); 255 | } 256 | 70% { 257 | opacity: 0; 258 | transform: rotate(45deg) scale(0); 259 | top: -5px; 260 | } 261 | 85% { 262 | opacity: 1; 263 | transform: rotate(45deg) scale(1); 264 | top: 1px; 265 | } 266 | 100% { 267 | opacity: 1; 268 | transform: rotate(45deg) scale(1); 269 | top: 1px; 270 | } 271 | } -------------------------------------------------------------------------------- /card/Black.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/card/Black.jpg -------------------------------------------------------------------------------- /card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Product Card 7 | 8 | 10 | 11 | 12 | 13 |
14 |
15 |

TOM FORD

16 |

Black Tie

17 | black tie 19 |

$89.99

20 |
21 | 22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /card/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #f0a500; 10 | font-family: 'Poppins', sans-serif; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .container { 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: center; 20 | align-items: center; 21 | } 22 | 23 | .card { 24 | width: 250px; 25 | height: 400px; 26 | background-color: #f5f5f5; 27 | border-radius: 25px; 28 | box-shadow: 0px 25px 36px 12px rgba(0, 0, 0, 0.51); 29 | padding-bottom: 10px; 30 | display: flex; 31 | flex-direction: column; 32 | justify-content: space-evenly; 33 | align-items: center; 34 | transition: all 0.2s ease; 35 | } 36 | 37 | .container:hover .card { 38 | transform: scale(1.1); 39 | filter: brightness(50%); 40 | } 41 | 42 | .productType { 43 | color: grey; 44 | transform: translateY(-10px); 45 | } 46 | 47 | .price { 48 | font-size: 24px; 49 | color: #cf7500; 50 | } 51 | 52 | .cartBtn, .wishlistBtn { 53 | width: 150px; 54 | height: 50px; 55 | background-color: #cf7500; 56 | color: white; 57 | border: none; 58 | border-radius: 15px; 59 | overflow: hidden; 60 | outline: none; 61 | font-weight: bold; 62 | position: absolute; 63 | opacity: 0; 64 | cursor: pointer; 65 | bottom: 55%; 66 | transition: all 0.2s ease; 67 | } 68 | 69 | .wishlistBtn { 70 | background-color: #f5f5f5; 71 | color: black; 72 | bottom: 35%; 73 | } 74 | 75 | .container:hover .cartBtn, .container:hover .wishlistBtn { 76 | opacity: 1; 77 | display: inline; 78 | } 79 | 80 | .cartBtn:active, .wishlistBtn:active { 81 | transform: scale(0.90); 82 | } -------------------------------------------------------------------------------- /carousel/firstImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/carousel/firstImage.jpg -------------------------------------------------------------------------------- /carousel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Javascript Carousel 6 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /carousel/index.js: -------------------------------------------------------------------------------- 1 | const carouselSlide = document.querySelector(".carousel-slide"); 2 | const carouselImages = document.querySelectorAll(".carousel-slide img"); 3 | const prevBtn = document.querySelector("#prevBtn"); 4 | const nextBtn = document.querySelector("#nextBtn"); 5 | let counter = 1; 6 | const size = carouselImages[0].clientWidth; 7 | 8 | carouselSlide.style.transform = "translateX(" + (-size * counter) + "px)"; 9 | 10 | function next() { 11 | if (counter >= carouselImages.length - 1) return; 12 | carouselSlide.style.transition = "transform 0.7s ease-in-out" 13 | counter++; 14 | carouselSlide.style.transform = "translateX(" + (-size * counter) + "px)"; 15 | } 16 | 17 | nextBtn.addEventListener("click", next); 18 | 19 | prevBtn.addEventListener("click", () => { 20 | if (counter <= 0) return; 21 | carouselSlide.style.transition = "transform 0.7s ease-in-out" 22 | counter--; 23 | carouselSlide.style.transform = "translateX(" + (-size * counter) + "px)"; 24 | }) 25 | 26 | carouselSlide.addEventListener('transitionend', () => { 27 | if (carouselImages[counter].id === "lastClone") { 28 | carouselSlide.style.transition = "none"; 29 | counter = carouselImages.length - 2; 30 | carouselSlide.style.transform = "translateX(" + (-size * counter) + "px)"; 31 | } 32 | if (carouselImages[counter].id === "firstClone") { 33 | carouselSlide.style.transition = "none"; 34 | counter = carouselImages.length - counter; 35 | carouselSlide.style.transform = "translateX(" + (-size * counter) + "px)"; 36 | } 37 | }) 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /carousel/secondImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/carousel/secondImage.jpg -------------------------------------------------------------------------------- /carousel/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .carousel-container { 8 | width: 500px; 9 | margin: auto; 10 | overflow: hidden; 11 | padding: 10px 0 5px 0; 12 | position: relative; 13 | } 14 | 15 | .carousel-slide { 16 | display: flex; 17 | width: 100%; 18 | height: 500px; 19 | } 20 | 21 | #prevBtn, #nextBtn { 22 | position: absolute; 23 | z-index: 1; 24 | top: 49%; 25 | font-size: 30px; 26 | cursor: pointer; 27 | transition: all 0.3s ease-in-out; 28 | } 29 | 30 | #prevBtn { 31 | left: 3%; 32 | } 33 | 34 | #nextBtn { 35 | right: 3%; 36 | } 37 | 38 | #prevBtn:hover, #nextBtn:hover { 39 | color: #588da8; 40 | } 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /carousel/thirdImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/carousel/thirdImage.jpg -------------------------------------------------------------------------------- /cat/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Watching Cat 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /cat/index.js: -------------------------------------------------------------------------------- 1 | const eyes = document.querySelectorAll(".pupil") 2 | document.onmousemove = function() { 3 | var x = event.clientX * 100 / window.innerWidth + "%" 4 | var y = event.clientY * 100 / window.innerHeight + "%" 5 | eyes.forEach(eye => { 6 | eye.style.left = x; 7 | eye.style.top = y; 8 | eye.style.transform = "translate(-"+x+", -"+y+")" 9 | }) 10 | } -------------------------------------------------------------------------------- /cat/rsz_cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/cat/rsz_cursor.png -------------------------------------------------------------------------------- /cat/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: white; 10 | display: flex; 11 | cursor: url(rsz_cursor.png), auto; 12 | } 13 | 14 | .container { 15 | margin: auto; 16 | width: 240px; 17 | height: 300px; 18 | position: relative; 19 | } 20 | 21 | .catBody { 22 | width: 180px; 23 | height: 150px; 24 | background-color: black; 25 | border-radius: 60px 0 50px 0; 26 | position: absolute; 27 | bottom: 0; 28 | right: 0; 29 | } 30 | 31 | .catHead { 32 | width: 130px; 33 | height: 130px; 34 | background-color: black; 35 | position: absolute; 36 | right: 0; 37 | top: 70px; 38 | z-index: 1; 39 | border-radius: 60px 60px 0 0; 40 | } 41 | 42 | .catTail { 43 | width: 200px; 44 | height: 200px; 45 | border-radius: 50%; 46 | background-color: white; 47 | border: 40px solid white; 48 | border-left: 40px solid black; 49 | position: absolute; 50 | bottom: -9px; 51 | left: 2px; 52 | transform: rotate(-20deg); 53 | z-index: -1; 54 | } 55 | 56 | .catTailEnd { 57 | width: 40px; 58 | height: 40px; 59 | border-radius: 50%; 60 | background-color: black; 61 | position: absolute; 62 | left: -15px; 63 | bottom: 98px; 64 | } 65 | 66 | .leftEye, .rightEye { 67 | width: 40px; 68 | height: 40px; 69 | border-radius: 50%; 70 | background-color: yellow; 71 | position: absolute; 72 | top: 30%; 73 | left: 12%; 74 | } 75 | 76 | .rightEye { 77 | left: 58%; 78 | } 79 | 80 | .pupil { 81 | width: 65%; 82 | height: 65%; 83 | background-color: black; 84 | border-radius: 50%; 85 | position: absolute; 86 | top: 50%; 87 | left: 50%; 88 | transform: translate(-50%, -50%); 89 | } 90 | 91 | .ears { 92 | width: 0; 93 | height: 0; 94 | border-top: 50px solid transparent; 95 | border-left: 100px solid black; 96 | border-bottom: 50px solid transparent; 97 | position: relative; 98 | bottom: 20px; 99 | } 100 | 101 | .ears::after { 102 | content: ""; 103 | width: 0; 104 | height: 0; 105 | border-top: 50px solid transparent; 106 | border-right: 100px solid black; 107 | border-bottom: 50px solid transparent; 108 | position: absolute; 109 | bottom: -50px; 110 | right: -30px; 111 | } 112 | 113 | .nose { 114 | width: 0; 115 | height: 0; 116 | border-left: 6px solid transparent; 117 | border-right: 6px solid transparent; 118 | border-top: 6px solid #3f3f44; 119 | position: absolute; 120 | bottom: 42%; 121 | right: 45%; 122 | z-index: 1; 123 | } 124 | 125 | .mouth1, .mouth2 { 126 | width: 15px; 127 | height: 15px; 128 | background-color: black; 129 | border: 3px solid black; 130 | border-bottom: 3px solid #3f3f44; 131 | border-radius: 50%; 132 | transform: rotate(-45deg); 133 | position: absolute; 134 | bottom: 35%; 135 | right: 48.5%; 136 | } 137 | 138 | .mouth2 { 139 | transform: rotate(45deg); 140 | right: 39.2%; 141 | } -------------------------------------------------------------------------------- /clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fancy Clock 6 | 7 | 9 | 10 | 11 |
12 |
13 |

00

Hours

14 |

00

Minutes

15 |

00

Seconds

16 |
17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /clock/index.js: -------------------------------------------------------------------------------- 1 | function clock() { 2 | const hours = document.querySelector(".hours") 3 | const minutes = document.querySelector(".minutes") 4 | const seconds = document.querySelector(".seconds") 5 | 6 | hours.innerHTML = new Date().getHours(); 7 | minutes.innerHTML = new Date().getMinutes(); 8 | seconds.innerHTML = new Date().getSeconds(); 9 | 10 | if (minutes.innerHTML.toString().length == 1) { 11 | minutes.innerHTML = "0" + minutes.innerHTML; 12 | } 13 | 14 | if (seconds.innerHTML.toString().length == 1) { 15 | seconds.innerHTML = "0" + seconds.innerHTML; 16 | } 17 | 18 | if (hours.innerHTML.toString().length == 1) { 19 | hours.innerHTML = "0" + hours.innerHTML; 20 | } 21 | } 22 | 23 | const interval = setInterval(clock, 1000) 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /clock/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Lobster', cursive; 9 | height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background-color: #ffcc00; 14 | } 15 | 16 | .clock { 17 | display: flex; 18 | } 19 | 20 | .clock div { 21 | position: relative; 22 | margin: 0 5px; 23 | width: 200px; 24 | height: 240px; 25 | } 26 | 27 | .clock div p { 28 | position: relative; 29 | display: flex; 30 | width: 200px; 31 | height: 160px; 32 | justify-content: center; 33 | align-items: center; 34 | background-color: #f2ed6f; 35 | z-index: 1; 36 | font-size: 80px; 37 | border: none; 38 | box-shadow: 0px 34px 45px 0px rgba(0,0,0,0.56); 39 | } 40 | 41 | .clock div p:first-child { 42 | border-radius: 20px 20px 0 0; 43 | } 44 | 45 | .clock div p:last-child { 46 | font-size: 30px; 47 | height: 80px; 48 | background-color: #f4e04d; 49 | border-radius: 0 0 20px 20px; 50 | } 51 | 52 | .clock div:last-child p { 53 | background-color: #512b58; 54 | color: white; 55 | } 56 | 57 | .clock div:last-child p:last-child { 58 | background-color: #2c003e; 59 | color: white; 60 | } -------------------------------------------------------------------------------- /coffee/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coffee 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /coffee/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #d63447; 10 | display: flex; 11 | } 12 | 13 | .container { 14 | margin: auto; 15 | width: 250px; 16 | height: 350px; 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: flex-end; 20 | align-items: center; 21 | position: relative; 22 | } 23 | 24 | .coaster { 25 | width: 100%; 26 | height: 6%; 27 | background-color: #7c3c21; 28 | border-radius: 10px; 29 | position: relative; 30 | } 31 | 32 | .coaster::after { 33 | content: ""; 34 | width: 50%; 35 | height: 100%; 36 | background-color: #63301a; 37 | position: absolute; 38 | right: 0; 39 | border-radius: 0 10px 10px 0; 40 | } 41 | 42 | .halfCup { 43 | height: 30%; 44 | width: 30%; 45 | background-color: white; 46 | position: absolute; 47 | bottom: 21px; 48 | left: 50px; 49 | border-radius: 15px 0 0 0; 50 | } 51 | 52 | .halfCup::after { 53 | content: ""; 54 | width: 0; 55 | height: 0; 56 | border-bottom: 100px solid #d63447; 57 | border-right: 20px solid transparent; 58 | } 59 | 60 | .cup { 61 | width: 60%; 62 | height: 30%; 63 | background-color: #f9f9f9; 64 | border-radius: 15px 15px 0 0; 65 | position: relative; 66 | 67 | } 68 | 69 | .cup::before { 70 | content: ""; 71 | width: 0; 72 | height: 0; 73 | border-bottom: 100px solid #d63447; 74 | border-left: 20px solid transparent; 75 | position: absolute; 76 | right: -3px; 77 | bottom: 0; 78 | } 79 | 80 | .handle { 81 | height: 60px; 82 | width: 40px; 83 | border-radius: 0 50% 50% 0; 84 | background-color: #d63447; 85 | border: 10px solid #f9f9f9; 86 | position: absolute; 87 | right: 26px; 88 | bottom: 40px; 89 | transform: rotate(10deg); 90 | } 91 | 92 | .steamContainer { 93 | width: 80%; 94 | height: 50%; 95 | display: flex; 96 | flex-direction: column; 97 | justify-content: space-evenly; 98 | } 99 | 100 | .steam1, .steam2, .steam3, .steam4, .steam5 { 101 | width: 20%; 102 | height: 5%; 103 | background-color: #eadca6; 104 | border-radius: 10px; 105 | animation: steamFloating 1.5s infinite linear; 106 | } 107 | 108 | .steam1 { 109 | align-self: center; 110 | animation-delay: 1.3s; 111 | } 112 | 113 | .steam2 { 114 | width: 30%; 115 | height: 100%; 116 | animation-delay: 1s; 117 | position: relative; 118 | right: 50px; 119 | } 120 | 121 | .steam3 { 122 | width: 50%; 123 | height: 100%; 124 | animation-delay: 0.8s; 125 | position: relative; 126 | left: 40px; 127 | } 128 | 129 | .steam4 { 130 | width: 70%; 131 | align-self: center; 132 | animation-delay: 0.5s; 133 | } 134 | 135 | .steam5 { 136 | width: 35%; 137 | height: 100%; 138 | animation-delay: 0.2s; 139 | position: relative; 140 | right: 20px; 141 | } 142 | 143 | .steams { 144 | width: 200px; 145 | height: 5%; 146 | display: flex; 147 | justify-content: center; 148 | } 149 | 150 | .bubble2, .bubble3, .bubble5 { 151 | width: 10px; 152 | height: 10px; 153 | border-radius: 50%; 154 | background-color: #e2c275; 155 | animation: bubbleFloating 1.5s infinite ease-in; 156 | position: relative; 157 | } 158 | 159 | .bubble3 { 160 | top: 15px; 161 | right: 130px; 162 | animation-delay: 0.7s; 163 | } 164 | 165 | .bubble5 { 166 | top: 5px; 167 | animation-delay: 0.4s; 168 | } 169 | 170 | @keyframes steamFloating { 171 | 0% { 172 | transform: scaleX(1); 173 | } 174 | 50% { 175 | transform: scaleX(0.8); 176 | } 177 | 100% { 178 | transform: scaleX(1); 179 | } 180 | } 181 | 182 | @keyframes bubbleFloating { 183 | 0% { 184 | transform: scale(1) 185 | } 186 | 50% { 187 | transform: scale(0); 188 | } 189 | 100% { 190 | transform: scale(1); 191 | } 192 | } -------------------------------------------------------------------------------- /coolLoader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cool Loader 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /coolLoader/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | body { 8 | background-color: #21bf73; 9 | height: 100vh; 10 | display: flex; 11 | } 12 | 13 | .container { 14 | width: 280px; 15 | height: 280px; 16 | position: relative; 17 | margin: auto; 18 | } 19 | 20 | .element1, .element2, .element3 { 21 | width: 280px; 22 | height: 100px; 23 | border: 10px solid #fefffe; 24 | border-radius: 50px; 25 | position: absolute; 26 | animation: loading1 2s infinite; 27 | box-shadow: inset 0px 0px 7px 0px rgba(65, 65, 65, 0.5), 0px 0px 7px 0px rgba(0,0,0,0.5); 28 | } 29 | 30 | .element2, .element3 { 31 | animation: loading2 2s infinite; 32 | } 33 | 34 | .element3 { 35 | animation: loading3 2s infinite; 36 | } 37 | 38 | @keyframes loading1 { 39 | 0% { 40 | height: 100px; 41 | width: 280px; 42 | top: 0; 43 | left: 0; 44 | } 45 | 25% { 46 | height: 100px; 47 | width: 100px; 48 | top: 0; 49 | left: 180px; 50 | } 51 | 50% { 52 | height: 100px; 53 | width: 100px; 54 | top: 0; 55 | left: 180px; 56 | } 57 | 75% { 58 | height: 280px; 59 | width: 100px; 60 | top: 0; 61 | left: 180px; 62 | } 63 | 100% { 64 | height: 100px; 65 | width: 100px; 66 | top: 180px; 67 | left: 180px; 68 | } 69 | } 70 | 71 | @keyframes loading2 { 72 | 0% { 73 | height: 100px; 74 | width: 100px; 75 | top: 180px; 76 | left: 0; 77 | } 78 | 25% { 79 | height: 280px; 80 | width: 100px; 81 | top: 0; 82 | left: 0; 83 | } 84 | 50% { 85 | height: 100px; 86 | width: 100px; 87 | top: 0; 88 | left: 0; 89 | } 90 | 75% { 91 | height: 100px; 92 | width: 100px; 93 | top: 0; 94 | left: 0; 95 | } 96 | 100% { 97 | height: 100px; 98 | width: 280px; 99 | top: 0; 100 | left: 0; 101 | } 102 | } 103 | 104 | @keyframes loading3 { 105 | 0% { 106 | height: 100px; 107 | width: 100px; 108 | top: 180px; 109 | left: 180px; 110 | } 111 | 25% { 112 | height: 100px; 113 | width: 100px; 114 | top: 180px; 115 | left: 180px; 116 | } 117 | 50% { 118 | height: 100px; 119 | width: 280px; 120 | top: 180px; 121 | left: 0px; 122 | } 123 | 75% { 124 | height: 100px; 125 | width: 100px; 126 | top: 180px; 127 | left: 0; 128 | } 129 | 100% { 130 | height: 100px; 131 | width: 100px; 132 | top: 180px; 133 | left: 0; 134 | } 135 | } -------------------------------------------------------------------------------- /counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Count Button 6 | 7 | 8 | 9 |
10 | 11 |

0

12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /counter/index.js: -------------------------------------------------------------------------------- 1 | var counter = 0; 2 | const decrement = document.querySelector(".remove") 3 | const increment = document.querySelector(".add") 4 | var result = document.querySelector(".result") 5 | 6 | increment.addEventListener("click", add) 7 | decrement.addEventListener("click", remove) 8 | 9 | function add() { 10 | result.innerHTML++ 11 | } 12 | 13 | function remove() { 14 | result.innerHTML-- 15 | } -------------------------------------------------------------------------------- /counter/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #dbdbdb; 9 | } 10 | 11 | .container { 12 | width: 300px; 13 | height: 300px; 14 | position: absolute; 15 | top: 50%; 16 | left: 50%; 17 | transform: translate(-50%, -50%); 18 | display: flex; 19 | justify-content: space-evenly; 20 | align-items: center; 21 | } 22 | 23 | .add, .remove { 24 | box-shadow: 0px 12px 30px 0px #004d05; 25 | background-color:#007944; 26 | border: none; 27 | border-radius: 30px; 28 | display: inline-block; 29 | cursor: pointer; 30 | color: white; 31 | font-family:Arial; 32 | font-size:20px; 33 | font-weight:bold; 34 | padding:20px 20px; 35 | text-decoration:none; 36 | outline: none; 37 | transition: all 0.2s; 38 | } 39 | 40 | .add:active, .remove:active { 41 | transform: translateY(5px); 42 | } 43 | 44 | .remove { 45 | box-shadow: 0px 12px 30px 0px #ad0000; 46 | background-color: #c81912; 47 | } 48 | 49 | .result { 50 | width: 30px; 51 | text-align: center; 52 | } -------------------------------------------------------------------------------- /cuteSwitch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Switch 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /cuteSwitch/index.js: -------------------------------------------------------------------------------- 1 | const mouth = document.querySelector(".mouth") 2 | const leftEye = document.querySelector(".eye1") 3 | const rightEye = document.querySelector(".eye2") 4 | const switchBtn = document.querySelector(".switchBtn") 5 | const tongue = document.querySelector(".tongue") 6 | const allElements = [mouth, leftEye, rightEye, switchBtn, tongue] 7 | 8 | switchBtn.addEventListener("click", happyFace) 9 | 10 | function happyFace() { 11 | allElements.forEach(element => {element.classList.toggle("happy")}) 12 | } -------------------------------------------------------------------------------- /cuteSwitch/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #f7f7f7; 9 | display: flex; 10 | height: 100vh; 11 | } 12 | 13 | .container { 14 | margin: auto; 15 | position: relative; 16 | } 17 | 18 | input { 19 | position: relative; 20 | width: 200px; 21 | height: 100px; 22 | background-color: #dddddd; 23 | border-radius: 60px; 24 | box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); 25 | -webkit-appearance: none; 26 | outline: none; 27 | transition: all 0.5s ease-in-out; 28 | } 29 | 30 | input:checked { 31 | background-color: #ffacb7; 32 | } 33 | 34 | input::before { 35 | content: ""; 36 | position: absolute; 37 | width: 100px; 38 | height: 100px; 39 | border-radius: 50%; 40 | top: 0; 41 | left: 0; 42 | background-color: #fff; 43 | transform: scale(0.9); 44 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 45 | transition: 0.5s; 46 | } 47 | 48 | input:checked::before { 49 | left: 100px; 50 | } 51 | 52 | .mouth { 53 | width: 15px; 54 | height: 10px; 55 | border-radius: 10px 10px 0 0; 56 | background-color: black; 57 | position: absolute; 58 | top: 55px; 59 | left: 41px; 60 | transition: all 0.5s ease; 61 | } 62 | 63 | .mouth.happy { 64 | left: 143px; 65 | border-radius: 0 0 10px 10px; 66 | } 67 | 68 | .eye1, .eye2 { 69 | width: 8px; 70 | height: 2px; 71 | background-color: black; 72 | position: absolute; 73 | top: 45px; 74 | left: 25px; 75 | border-radius: 3px; 76 | transition: all 0.5s ease; 77 | transform: rotate(20deg); 78 | } 79 | 80 | .eye1::after, .eye2::after { 81 | content: ""; 82 | width: 8px; 83 | height: 2px; 84 | background-color: black; 85 | position: absolute; 86 | top: 2px; 87 | left: 1px; 88 | border-radius: 3px; 89 | transition: all 0.5s ease; 90 | transform: rotate(-40deg); 91 | } 92 | 93 | .eye2 { 94 | left: 66px; 95 | transform: rotate(-20deg); 96 | } 97 | 98 | .eye2::after { 99 | transform: rotate(40deg); 100 | left: -1px; 101 | } 102 | 103 | .eye1.happy, .eye2.happy { 104 | width: 7px; 105 | height: 7px; 106 | border-radius: 50%; 107 | left: 125px; 108 | } 109 | 110 | .eye2.happy { 111 | left: 170px; 112 | } 113 | 114 | .eye1.happy::after, .eye2.happy::after { 115 | opacity: 0; 116 | } 117 | 118 | .tongue { 119 | height: 4px; 120 | width: 9px; 121 | border-radius: 100%; 122 | background-color: #ffacb7; 123 | position: absolute; 124 | top: 5px; 125 | left: 3px; 126 | opacity: 0; 127 | transition: all 0.4s ease; 128 | } 129 | 130 | .tongue.happy { 131 | opacity: 1; 132 | } -------------------------------------------------------------------------------- /fancybutton/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fancy Button 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /fancybutton/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: black; 9 | } 10 | 11 | .btn { 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | transform: translate(-50%, -50%); 16 | background: none; 17 | color: white; 18 | width: 200px; 19 | height: 70px; 20 | border: 2px solid #0f4c81; 21 | font-size: 20px; 22 | border-radius: 5px; 23 | transition: 0.6s; 24 | overflow: hidden; 25 | outline: none; 26 | cursor: pointer; 27 | } 28 | 29 | .btn::before { 30 | content: ""; 31 | position: absolute; 32 | display: block; 33 | left: 0; 34 | top: 0; 35 | width: 60px; 36 | height: 100%; 37 | background: rgba(255, 255, 255, 0.5); 38 | opacity: 0.5; 39 | filter: blur(30px); 40 | transform: translateX(-130px) skewX(-15deg); 41 | } 42 | 43 | .btn::after { 44 | content: ""; 45 | position: absolute; 46 | display: block; 47 | left: 30px; 48 | top: 0; 49 | width:30px; 50 | height: 100%; 51 | background: rgba(255, 255, 255, 0.2); 52 | opacity: 0; 53 | filter: blur(30px); 54 | transform: translate(-100px) scaleX(-15deg); 55 | } 56 | 57 | .btn:hover { 58 | background-color: #0f4c81; 59 | } 60 | 61 | .btn:hover::before, .btn:hover::after { 62 | transform: translateX(300px) skewX(-15deg); 63 | opacity: 0.6; 64 | transition: 0.65s; 65 | } 66 | 67 | .btn:hover::after { 68 | opacity: 1; 69 | } -------------------------------------------------------------------------------- /fancylogin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Login Form 6 | 7 | 9 | 10 | 11 |
12 |
13 |
14 | 15 |
16 |
17 |

Login

18 | 19 | 21 | 22 | 24 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /fancylogin/index.js: -------------------------------------------------------------------------------- 1 | const emailField = document.querySelector("#email") 2 | const passField = document.querySelector("#pass") 3 | const mouth = document.querySelector(".mouth") 4 | const leftEye = document.querySelector("#left") 5 | const rightEye = document.querySelector("#right") 6 | const buttonLogin = document.querySelector(".btn") 7 | 8 | emailField.addEventListener("focus", happy) 9 | passField.addEventListener("focus", hide) 10 | buttonLogin.addEventListener("focus", go) 11 | 12 | function happy() { 13 | mouth.style.animation = "first 0.4s forwards" 14 | } 15 | 16 | function hide() { 17 | leftEye.style.animation = "second 0.4s forwards" 18 | rightEye.style.animation = "second 0.4s forwards" 19 | } 20 | 21 | function go() { 22 | leftEye.style.animation = "last 0.4s forwards" 23 | rightEye.style.animation = "last 0.4s forwards" 24 | mouth.style.animation = "lastLast 0.4s forwards" 25 | } 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /fancylogin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | height: 100vh; 8 | font-family: 'Poppins', sans-serif; 9 | background-image: linear-gradient(to top right, #00dbdf, #dc06e4); 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | .form { 16 | width: 300px; 17 | height: 400px; 18 | position: relative; 19 | background-color: #fff; 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: flex-start; 23 | border-radius: 15px; 24 | padding: 0 15px 0 15px; 25 | box-shadow: 0px 25px 36px 12px rgba(0, 0, 0, 0.51); 26 | } 27 | .form input { 28 | width: 100%; 29 | height: 50px; 30 | padding-top: 20px; 31 | color: #363636; 32 | border: none; 33 | background-color: #fff; 34 | border-bottom: 2px solid #9b9b9b; 35 | outline: none; 36 | } 37 | 38 | .form label { 39 | transform: translateY(-50px); 40 | pointer-events: none; 41 | } 42 | .contentEmail, .contentPass { 43 | position: absolute; 44 | top: 25px; 45 | color: #9b9b9b; 46 | transition: all 0.3s ease; 47 | } 48 | 49 | .form input:focus+.labelEmail .contentEmail, 50 | .form input:valid+.labelEmail .contentEmail { 51 | transform: translateY(-100%); 52 | font-size: 14px; 53 | color: #333; 54 | } 55 | 56 | .form input:focus+.labelPass .contentPass, 57 | .form input:valid+.labelPass .contentPass { 58 | transform: translateY(-100%); 59 | font-size: 14px; 60 | color: #333; 61 | } 62 | 63 | button { 64 | background-image: linear-gradient(to bottom right, #04d6dd, #f606ff); 65 | color: white; 66 | width: 150px; 67 | height: 40px; 68 | border: none; 69 | border-radius: 15px; 70 | display: flex; 71 | align-self: center; 72 | margin-top: 30px; 73 | justify-content: center; 74 | font-size: 16px; 75 | text-align: center; 76 | outline: none; 77 | cursor: pointer; 78 | transition: all 0.3s ease; 79 | } 80 | 81 | button:hover { 82 | transform: translateY(7px); 83 | } 84 | 85 | h1 { 86 | align-self: center; 87 | color: #333333; 88 | margin-bottom: 30px; 89 | } 90 | 91 | .faceContainer { 92 | width: 100px; 93 | height: 100px; 94 | border: none; 95 | border-radius: 50%; 96 | background-color: #fcbf1e; 97 | position: relative; 98 | top: 0%; 99 | left: 50%; 100 | transform: translate(-50%, -50%); 101 | } 102 | 103 | .eye { 104 | width: 10px; 105 | height: 10px; 106 | background-color: black; 107 | border: none; 108 | border-radius: 50%; 109 | position: absolute; 110 | top: 50%; 111 | left: 15%; 112 | } 113 | .eye:nth-child(2) { 114 | left: 75%; 115 | } 116 | .mouth { 117 | width: 25px; 118 | height: 30px; 119 | border-bottom: 3px solid black; 120 | border-radius: 0%; 121 | position: absolute; 122 | top: 45%; 123 | left: 37%; 124 | } 125 | 126 | @keyframes first { 127 | 0% { 128 | border-radius: 0%; 129 | } 100% { 130 | border-radius: 30%; 131 | } 132 | } 133 | @keyframes second { 134 | 0% { 135 | height: 10px; 136 | width: 10px; 137 | border-radius: 50%; 138 | } 100% { 139 | height: 2px; 140 | width: 10px; 141 | border-radius: 25%; 142 | } 143 | } 144 | @keyframes last { 145 | 0% { 146 | height: 2px; 147 | width: 10px; 148 | border-radius: 25%; 149 | } 100% { 150 | height: 10px; 151 | width: 10px; 152 | border-radius: 50%; 153 | } 154 | } 155 | @keyframes lastLast { 156 | 0% { 157 | border-radius: 30%; 158 | border-bottom: 3px solid black; 159 | } 100% { 160 | border-radius: 30%; 161 | border-bottom: 13px solid black; 162 | } 163 | } -------------------------------------------------------------------------------- /fingers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hand Animation 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /fingers/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #ff6f5e; 9 | } 10 | 11 | .container { 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | transform: translate(-50%, -50%); 16 | width: 400px; 17 | height: 300px; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | } 22 | 23 | .fingers { 24 | background-color: #f6d186; 25 | width: 45px; 26 | margin-right: 5px; 27 | border-radius: 15px 15px 20px 20px; 28 | position: relative; 29 | animation: tap 1.5s ease-out infinite; 30 | } 31 | 32 | .fingers:nth-child(1) { 33 | height: 130px; 34 | top: 5px; 35 | } 36 | 37 | .fingers:nth-child(2) { 38 | height: 150px; 39 | animation-delay: 0.1s; 40 | } 41 | 42 | .fingers:nth-child(3) { 43 | height: 170px; 44 | bottom: 5px; 45 | animation-delay: 0.2s; 46 | } 47 | 48 | .fingers:nth-child(4) { 49 | height: 150px; 50 | animation-delay: 0.3s; 51 | } 52 | 53 | #last { 54 | width: 60px; 55 | height: 45px; 56 | position: relative; 57 | top: 10px; 58 | background-color: #f6d186; 59 | border-radius: 0px 15px 40px 0px; 60 | animation: thumb 1.5s ease-in infinite; 61 | animation-delay: 0.4s; 62 | } 63 | 64 | .nails { 65 | width: 30px; 66 | height: 30px; 67 | border-radius: 50px 50px 15px 15px; 68 | background-color: #fcf7bb; 69 | position: absolute; 70 | bottom: 10px; 71 | left: 50%; 72 | transform: translateX(-50%); 73 | } 74 | 75 | .fingers::after, .fingers::before { 76 | content: ""; 77 | position: absolute; 78 | width: 30px; 79 | height: 5px; 80 | background-color: #e6a157; 81 | border-radius: 5px; 82 | top: 10px; 83 | left: 50%; 84 | transform: translateX(-50%); 85 | 86 | } 87 | 88 | .fingers::before { 89 | top: 20px; 90 | } 91 | 92 | @keyframes tap { 93 | 0% { 94 | transform: scaleY(1) translateY(0px); 95 | } 96 | 20% { 97 | transform: scaleY(0.8) translateY(-30px); 98 | } 99 | 30% { 100 | transform: scaleY(0.8) translateY(-30px); 101 | } 102 | 40% { 103 | transform: scaleY(1) translateY(0px); 104 | } 105 | 100% { 106 | transform: scaleY(1) translateY(0px); 107 | } 108 | } 109 | @keyframes thumb { 110 | 0% { 111 | transform: scaleY(1) translateY(0); 112 | } 113 | 20% { 114 | transform: scaleY(0.9) translateY(-20px); 115 | } 116 | 30% { 117 | transform: scaleY(0.9) translateY(-20px); 118 | } 119 | 40% { 120 | transform: scaleY(1) translateY(0); 121 | } 122 | 100% { 123 | transform: scaleY(1) translateY(0); 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /followingEyes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Following Eyes 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /followingEyes/index.js: -------------------------------------------------------------------------------- 1 | const eyes = document.querySelectorAll(".pupil") 2 | document.onmousemove = function() { 3 | var x = event.clientX * 100 / window.innerWidth + "%" 4 | var y = event.clientY * 100 / window.innerHeight + "%" 5 | eyes.forEach(eye => { 6 | eye.style.left = x; 7 | eye.style.top = y; 8 | eye.style.transform = "translate(-"+x+", -"+y+")" 9 | }) 10 | } -------------------------------------------------------------------------------- /followingEyes/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #ffc83f; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .container { 16 | width: 200px; 17 | height: 120px; 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | justify-content: space-between; 22 | } 23 | 24 | .eyesContainer { 25 | width: 180px; 26 | height: 40px; 27 | display: flex; 28 | justify-content: space-between; 29 | align-items: center; 30 | } 31 | 32 | .eyes { 33 | width: 50px; 34 | height: 50px; 35 | background-color: #fff; 36 | border-radius: 50%; 37 | overflow: hidden; 38 | animation: blink 1.5s infinite; 39 | } 40 | 41 | .light { 42 | width: 10px; 43 | height: 10px; 44 | background-color: #fff; 45 | border-radius: 50%; 46 | position: absolute; 47 | top: 50%; 48 | left: 50%; 49 | transform: translateY(-100%); 50 | } 51 | 52 | .pupil { 53 | width: 30px; 54 | height: 30px; 55 | background-color: #000; 56 | border-radius: 50%; 57 | position: relative; 58 | } 59 | 60 | .mouth { 61 | background-color: #000; 62 | width: 90px; 63 | height: 60px; 64 | border-radius: 10px 10px 50px 50px; 65 | display: flex; 66 | flex-direction: column; 67 | align-items: center; 68 | overflow: hidden; 69 | position: relative; 70 | } 71 | 72 | .teeth { 73 | width: 50px; 74 | height: 30px; 75 | display: flex; 76 | justify-content: space-evenly; 77 | align-items: center; 78 | } 79 | 80 | .tooth1, .tooth2 { 81 | width: 20px; 82 | height: 20px; 83 | background-color: #fff; 84 | border-radius: 5px 5px 20px 20px; 85 | } 86 | 87 | .tongue { 88 | width: 60px; 89 | height: 30px; 90 | background-color: #ff5a00; 91 | border-radius: 50%; 92 | position: absolute; 93 | bottom: -15px; 94 | left: 10px; 95 | } 96 | 97 | @keyframes blink { 98 | 0% { 99 | height: 50px; 100 | } 101 | 35% { 102 | height: 50px; 103 | } 104 | 45% { 105 | height: 0px; 106 | } 107 | 55% { 108 | height: 50px; 109 | } 110 | 100% { 111 | height: 50px; 112 | } 113 | } 114 | 115 | -------------------------------------------------------------------------------- /hamburger/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hambuger menu effect 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /hamburger/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | position: absolute; 3 | left: 50vw; 4 | top: 50vh; 5 | width: 30px; 6 | height: 30px; 7 | border: 3px solid black; 8 | border-radius: 5px; 9 | display: grid; 10 | justify-content: center; 11 | align-items: center; 12 | cursor: pointer; 13 | } 14 | 15 | 16 | 17 | #pile1, 18 | #pile2, 19 | #pile3 { 20 | width: 24px; 21 | height: 6px; 22 | background-color: black; 23 | border-radius: 2px; 24 | } 25 | 26 | #pile1 { 27 | transition: opacity 0.2s linear; 28 | } 29 | 30 | .container:hover #pile1 { 31 | opacity: 0%; 32 | } 33 | 34 | #pile2 { 35 | transition: all 0.2s linear; 36 | } 37 | 38 | .container:hover #pile2 { 39 | transform: rotate(45deg); 40 | } 41 | 42 | #pile3 { 43 | transition: all 0.2s linear; 44 | } 45 | 46 | .container:hover #pile3 { 47 | transform: translateY(-10px) rotate(-45deg); 48 | } 49 | -------------------------------------------------------------------------------- /heartbeat/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Heartbeat Animation 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /heartbeat/styles.css: -------------------------------------------------------------------------------- 1 | .heart { 2 | width: 100px; 3 | height: 100px; 4 | background-color: red; 5 | position: relative; 6 | top: 150px; 7 | left: 150px; 8 | transform: rotate(-45deg); 9 | animation-name: beat; 10 | animation-duration: 1s; 11 | animation-iteration-count: infinite; 12 | } 13 | 14 | 15 | .heart::before, 16 | .heart::after { 17 | content: ""; 18 | background-color: red; 19 | border-radius: 50%; 20 | height: 100px; 21 | position: absolute; 22 | width: 100px; 23 | bottom: 50%; 24 | animation-name: beat; 25 | animation-duration: 1s; 26 | animation-iteration-count: infinite; 27 | } 28 | .heart::after { 29 | top: 0; 30 | left: 50%; 31 | } 32 | 33 | @keyframes beat { 34 | 0% { 35 | width: 50px; 36 | height: 50px; 37 | } 38 | 40% { 39 | width: 50px; 40 | height: 50px; 41 | } 42 | 50% { 43 | width: 60px; 44 | height: 60px; 45 | } 46 | 60% { 47 | width: 50px; 48 | height: 50px; 49 | } 50 | 70% { 51 | width: 60px; 52 | height: 60px; 53 | } 54 | 80% { 55 | width: 50px; 56 | height: 50px; 57 | } 58 | 100% { 59 | width: 50px; 60 | height: 50px; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /hero/egypt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/hero/egypt.jpg -------------------------------------------------------------------------------- /hero/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hero 5 | 6 | 7 | 8 | 9 |
10 |
11 |

12 | Discover Egypt 13 |

14 |

15 | We offer the best trips here! 16 |

17 | 20 |
21 |
22 | 23 | -------------------------------------------------------------------------------- /hero/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .hero { 6 | position: relative; 7 | width: 100vw; 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | } 13 | .hero::before { 14 | content: ""; 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 100%; 19 | height: 100%; 20 | background: url(egypt.jpg); 21 | background-repeat: no-repeat; 22 | background-size: cover; 23 | background-position: center center; 24 | filter: brightness(60%); 25 | } 26 | 27 | .hero-content { 28 | position: relative; 29 | font-family: "Monserrat", sans-serif; 30 | color: white; 31 | text-align: center; 32 | margin: 10px; 33 | } 34 | .hero-title { 35 | font-size: 48px; 36 | font-weight: 600; 37 | margin-bottom: 0; 38 | } 39 | .hero-subtitle { 40 | font-size: 32px; 41 | font-weight: 200; 42 | margin-top: 16px; 43 | } 44 | 45 | .hero-button { 46 | background-color: #7c0404; 47 | color: white; 48 | border: 1px solid #c42a2a; 49 | margin-top: 80px; 50 | padding: 15px 30px; 51 | font-family: "Monserrat", sans-serif; 52 | font-size: 18px; 53 | font-weight: 200; 54 | cursor: pointer; 55 | transition: all 0.1s linear; 56 | } 57 | .hero-button:hover { 58 | background-color: #eb2626; 59 | border: 1px solid #df6c6c; 60 | } -------------------------------------------------------------------------------- /lightSwitch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Light Switch 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /lightSwitch/index.js: -------------------------------------------------------------------------------- 1 | const switchBtn = document.querySelector(".switchBtn"); 2 | const container = document.querySelector(".container"); 3 | const threadEnd = document.querySelector(".threadEnd"); 4 | 5 | switchBtn.addEventListener("click", () => container.classList.toggle("on")); 6 | 7 | threadEnd.addEventListener("click", () => { 8 | if(switchBtn.checked) { 9 | switchBtn.checked = false; 10 | container.classList.toggle("on"); 11 | } else { 12 | switchBtn.checked = true; 13 | container.classList.toggle("on"); 14 | } 15 | }) -------------------------------------------------------------------------------- /lightSwitch/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #1b2031; 9 | display: flex; 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .container { 17 | position: relative; 18 | top: 50px; 19 | } 20 | 21 | input { 22 | position: relative; 23 | width: 200px; 24 | height: 100px; 25 | background-color: #3d3459; 26 | border-radius: 60px; 27 | box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); 28 | -webkit-appearance: none; 29 | outline: none; 30 | cursor: pointer; 31 | transition: all 0.5s ease-in-out; 32 | } 33 | 34 | input::before { 35 | content: ""; 36 | position: absolute; 37 | width: 100px; 38 | height: 100px; 39 | border-radius: 50%; 40 | top: 0; 41 | left: 0; 42 | background-color: #817d96; 43 | transform: scale(0.9); 44 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 45 | transition: 0.5s; 46 | } 47 | 48 | input:checked::before { 49 | left: 100px; 50 | background-color: #fff; 51 | box-shadow: 0 0 60px 30px #699ba9, 0 0 100px 60px #303f52; 52 | } 53 | 54 | .thread { 55 | position: relative; 56 | width: 5px; 57 | height: 100px; 58 | background-color: #323941; 59 | left: 35px; 60 | bottom: 60px; 61 | z-index: -1; 62 | animation: off 0.5s ease; 63 | } 64 | 65 | .threadShadow { 66 | position: absolute; 67 | width: 50%; 68 | height: 100%; 69 | background-color: #39414a; 70 | right: 0; 71 | opacity: 0; 72 | transition: all 0.4s ease; 73 | } 74 | 75 | .threadEnd { 76 | position: relative; 77 | width: 25px; 78 | height: 40px; 79 | background-color: #3a309b; 80 | bottom: 65px; 81 | left: 25px; 82 | border-radius: 20px 20px 10px 10px; 83 | overflow: hidden; 84 | cursor: pointer; 85 | transition: all 0.4s ease; 86 | animation: off 0.5s ease; 87 | } 88 | 89 | .threadEndShadow { 90 | width: 0; 91 | height: 0; 92 | border-top: 30px solid #8378ff; 93 | border-left: 25px solid transparent; 94 | opacity: 0; 95 | transition: all 0.4s ease; 96 | } 97 | 98 | .container.on .threadEndShadow, .container.on .threadShadow{ 99 | opacity: 1; 100 | } 101 | 102 | .container.on .threadEnd, .container.on .thread { 103 | animation: on 0.8s ease; 104 | } 105 | 106 | .container.on .threadEnd { 107 | background-color: #695dff; 108 | } 109 | 110 | @keyframes on { 111 | 0% { 112 | transform: translateY(0px); 113 | } 114 | 25% { 115 | transform: translateY(20px); 116 | } 117 | 50% { 118 | transform: translateY(-10px); 119 | } 120 | 65% { 121 | transform: translateY(0px); 122 | } 123 | 80% { 124 | transform: translateY(-5px); 125 | } 126 | 95% { 127 | transform: translateY(0px); 128 | } 129 | 100% { 130 | transform: translateY(0px); 131 | } 132 | } 133 | 134 | @keyframes off { 135 | 0% { 136 | transform: translateY(0px); 137 | } 138 | 50% { 139 | transform: translateY(20px); 140 | } 141 | 100% { 142 | transform: translateY(0px); 143 | } 144 | } 145 | 146 | -------------------------------------------------------------------------------- /loadbars/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Button Effect 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /loadbars/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background-color: #c02739; 5 | } 6 | 7 | .loading { 8 | position: absolute; 9 | height: 50px; 10 | top: 50%; 11 | left: 50%; 12 | display: flex; 13 | align-items: center; 14 | transform: translate(-50%, -50%) 15 | } 16 | 17 | .bars { 18 | height: 50px; 19 | width: 7px; 20 | margin: 0 4px; 21 | border-radius: 10px; 22 | background-color: white; 23 | animation: loading 0.8s infinite; 24 | } 25 | 26 | .bars:nth-child(2) { 27 | animation-delay: 0.1s; 28 | } 29 | .bars:nth-child(3) { 30 | animation-delay: 0.2s; 31 | } 32 | .bars:nth-child(4) { 33 | animation-delay: 0.3s; 34 | } 35 | .bars:nth-child(5) { 36 | animation-delay: 0.4s; 37 | } 38 | .bars:nth-child(6) { 39 | animation-delay: 0.5s; 40 | } 41 | .bars:nth-child(7) { 42 | animation-delay: 0.6s; 43 | } 44 | .bars:nth-child(8) { 45 | animation-delay: 0.7s; 46 | } 47 | @keyframes loading { 48 | 0% { 49 | height: 0; 50 | } 51 | 50% { 52 | height: 50px; 53 | } 54 | 100%{ 55 | height: 0; 56 | } 57 | } -------------------------------------------------------------------------------- /loading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Loading Animation 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /loading/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | background-color: #21242d; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | } 8 | 9 | .loading div { 10 | width: 25px; 11 | height: 25px; 12 | margin: 0 5px; 13 | background-color: #73cd9e; 14 | border-radius: 50%; 15 | display: inline-block; 16 | animation-name: dots; 17 | animation-duration: 1.5s; 18 | animation-iteration-count: infinite; 19 | animation-timing-function: ease-in-out; 20 | } 21 | 22 | .loading div:nth-child(2) { 23 | animation-delay: 0.2s; 24 | } 25 | 26 | .loading div:nth-child(3) { 27 | animation-delay: 0.4s; 28 | } 29 | 30 | @keyframes dots { 31 | 30% { 32 | transform: translateY(20px); 33 | } 34 | 50% { 35 | transform: translateY(0px); 36 | } 37 | } -------------------------------------------------------------------------------- /loadingsquare/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Loading Squares 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /loadingsquare/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | background-color: #1b262c; 6 | } 7 | 8 | .container { 9 | width: 300px; 10 | height: 300px; 11 | position: absolute; 12 | top: 70%; 13 | left: 50%; 14 | transform: translate(-50%, -50%); 15 | } 16 | 17 | .container div { 18 | width: 100px; 19 | height: 100px; 20 | border-radius: 10px; 21 | position: absolute; 22 | animation: moving 2s linear infinite; 23 | } 24 | 25 | .container div:nth-child(1) { 26 | background-color: #c81912; 27 | } 28 | 29 | .container div:nth-child(2) { 30 | background-color: #ffa41b; 31 | animation-delay: 0.667s; 32 | } 33 | 34 | .container div:nth-child(3) { 35 | background-color: #216353; 36 | animation-delay: 1.33s; 37 | } 38 | 39 | @keyframes moving { 40 | 0% { 41 | top: 0%; 42 | left: 0%; 43 | } 44 | 12.5% { 45 | top: 0%; 46 | left: 50%; 47 | } 48 | 25% { 49 | top: 0%; 50 | left: 50%; 51 | } 52 | 37.5% { 53 | top: 50%; 54 | left: 50%; 55 | } 56 | 50% { 57 | top: 50%; 58 | left: 50%; 59 | } 60 | 62.5% { 61 | top: 50%; 62 | left: 0%; 63 | } 64 | 75% { 65 | top: 50%; 66 | left: 0%; 67 | } 68 | 87.5% { 69 | top: 0%; 70 | left: 0%; 71 | } 72 | 100% { 73 | top: 0%; 74 | left: 0%; 75 | } 76 | } -------------------------------------------------------------------------------- /login/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Login Form 7 | 8 | 9 | 10 | 11 |
12 |

Login

13 | 14 | 16 | 17 | 19 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /login/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | font-family: sans-serif; 10 | background-color: #0c9463; 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .form { 18 | width: 300px; 19 | height: 400px; 20 | position: relative; 21 | background-color: #363636; 22 | display: flex; 23 | flex-direction: column; 24 | justify-content: center; 25 | border-radius: 15px; 26 | padding: 0 15px 0 15px; 27 | box-shadow: 0px 25px 36px 12px rgba(0, 0, 0, 0.51); 28 | } 29 | 30 | .form input { 31 | width: 100%; 32 | height: 50px; 33 | padding-top: 20px; 34 | color: white; 35 | border: none; 36 | background-color: #363636; 37 | border-bottom: 2px solid white; 38 | outline: none; 39 | } 40 | 41 | .form label { 42 | transform: translateY(-50px); 43 | pointer-events: none; 44 | } 45 | 46 | .contentEmail, .contentPass { 47 | position: absolute; 48 | top: 25px; 49 | color: white; 50 | transition: all 0.3s ease; 51 | } 52 | 53 | .form input:focus+.labelEmail .contentEmail, 54 | .form input:valid+.labelEmail .contentEmail { 55 | transform: translateY(-100%); 56 | font-size: 14px; 57 | color: #0c9463; 58 | } 59 | 60 | .form input:focus+.labelPass .contentPass, 61 | .form input:valid+.labelPass .contentPass { 62 | transform: translateY(-100%); 63 | font-size: 14px; 64 | color: #0c9463; 65 | } 66 | 67 | button { 68 | background-color: #0c9463; 69 | color: white; 70 | width: 150px; 71 | height: 40px; 72 | border: none; 73 | border-radius: 15px; 74 | display: flex; 75 | align-self: center; 76 | margin-top: 30px; 77 | justify-content: center; 78 | font-size: 16px; 79 | text-align: center; 80 | outline: none; 81 | cursor: pointer; 82 | transition: all 0.3s ease; 83 | } 84 | button:hover { 85 | transform: translateY(10px); 86 | } 87 | h1 { 88 | align-self: center; 89 | color: white; 90 | margin-bottom: 30px; 91 | } -------------------------------------------------------------------------------- /memory/bootstrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/memory/bootstrap.png -------------------------------------------------------------------------------- /memory/cardBack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/memory/cardBack.png -------------------------------------------------------------------------------- /memory/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/memory/github.png -------------------------------------------------------------------------------- /memory/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Memory Card Game 6 | 7 | 8 | 9 |
10 |
11 | github 12 | myLogo 13 |
14 |
15 | github 16 | myLogo 17 |
18 |
19 | bootstrap 20 | myLogo 21 |
22 |
23 | bootstrap 24 | myLogo 25 |
26 |
27 | javascript 28 | myLogo 29 |
30 |
31 | javascript 32 | myLogo 33 |
34 |
35 | jquery 36 | myLogo 37 |
38 |
39 | jquery 40 | myLogo 41 |
42 |
43 | nodejs 44 | myLogo 45 |
46 |
47 | nodejs 48 | myLogo 49 |
50 |
51 | react 52 | myLogo 53 |
54 |
55 | react 56 | myLogo 57 |
58 |
59 | sass 60 | myLogo 61 |
62 |
63 | sass 64 | myLogo 65 |
66 |
67 | vscode 68 | myLogo 69 |
70 |
71 | vscode 72 | myLogo 73 |
74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /memory/index.js: -------------------------------------------------------------------------------- 1 | const cards = document.querySelectorAll(".memoryCard"); 2 | var isFlipped = false; 3 | var firstCard, secondCard; 4 | var lock = false; 5 | 6 | cards.forEach(card => card.addEventListener("click", flip)); 7 | 8 | function flip() { 9 | if (lock) return; 10 | if (this === firstCard) return; 11 | this.classList.add("flip"); 12 | if (!isFlipped) { 13 | isFlipped = true; 14 | firstCard = this; 15 | return; 16 | } 17 | secondCard = this; 18 | check(); 19 | } 20 | 21 | function check() { 22 | var isMatch = firstCard.dataset.image === secondCard.dataset.image; 23 | isMatch ? succes() : fail(); 24 | } 25 | 26 | function succes() { 27 | firstCard.removeEventListener("click", flip); 28 | secondCard.removeEventListener("click", flip); 29 | reset(); 30 | } 31 | 32 | function fail() { 33 | lock = true; 34 | setTimeout(() => { 35 | firstCard.classList.remove("flip"); 36 | secondCard.classList.remove("flip"); 37 | reset(); 38 | }, 1000); 39 | } 40 | 41 | function reset() { 42 | [isFlipped, lock] = [false, false]; 43 | [firstCard, secondCard] = [null, null]; 44 | } 45 | 46 | (function suffle() { 47 | cards.forEach(card => { 48 | var position = Math.floor(Math.random() * 16); 49 | card.style.order = position; 50 | }); 51 | })(); -------------------------------------------------------------------------------- /memory/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/memory/javascript.png -------------------------------------------------------------------------------- /memory/jquery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/memory/jquery.png -------------------------------------------------------------------------------- /memory/nodejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/memory/nodejs.png -------------------------------------------------------------------------------- /memory/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/memory/react.png -------------------------------------------------------------------------------- /memory/sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/memory/sass.png -------------------------------------------------------------------------------- /memory/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #ff3434; 10 | display: flex; 11 | } 12 | 13 | .gameContainer { 14 | width: 600px; 15 | height: 600px; 16 | margin: auto; 17 | display: flex; 18 | flex-wrap: wrap; 19 | perspective: 1000px; 20 | } 21 | 22 | .memoryCard { 23 | width: 23%; 24 | height: 23%; 25 | margin: 5px; 26 | position: relative; 27 | transform-style: preserve-3d; 28 | transition: transform 0.3s; 29 | cursor: pointer; 30 | } 31 | 32 | .memoryCard:active { 33 | transform: scale(0.95); 34 | transition: transform 0.2s ease-in-out; 35 | } 36 | 37 | .memoryCard.flip { 38 | transform: rotateY(180deg); 39 | cursor: pointer; 40 | } 41 | 42 | .front, .back { 43 | background-color: #ff5252; 44 | width: 100%; 45 | height: 100%; 46 | padding: 10px; 47 | border-radius: 10px; 48 | position: absolute; 49 | backface-visibility: hidden; 50 | } 51 | 52 | .front { 53 | transform: rotateY(180deg); 54 | } -------------------------------------------------------------------------------- /memory/vscode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/memory/vscode.png -------------------------------------------------------------------------------- /monday/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lazy Monday 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /monday/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #ffd31d; 9 | height: 100vh; 10 | display: flex; 11 | } 12 | 13 | .container { 14 | margin: auto; 15 | width: 300px; 16 | height: 300px; 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: space-evenly; 20 | align-items: center; 21 | position: relative; 22 | } 23 | 24 | .headChar { 25 | width: 50px; 26 | height: 50px; 27 | background-color: white; 28 | border-radius: 50%; 29 | position: relative; 30 | left: 35px; 31 | top: 20px; 32 | animation: headChange 1s infinite 1.6s ease-in; 33 | } 34 | 35 | .bodyChar { 36 | width: 40px; 37 | height: 100px; 38 | background-color: white; 39 | border-radius: 60px 10px 0 0; 40 | animation: bodyChange 1s infinite 1.6s ease-in; 41 | } 42 | 43 | .firstLeg, .secondLeg { 44 | width: 35px; 45 | height: 10px; 46 | background-color: white; 47 | border-radius: 20px 50px 50px 20px; 48 | position: relative; 49 | top: 55px; 50 | left: 20px; 51 | animation: walk 2s infinite linear; 52 | } 53 | 54 | .secondLeg { 55 | top: 25px; 56 | animation-delay: 1s; 57 | } 58 | 59 | .shadowChar { 60 | width: 100px; 61 | height: 10px; 62 | background-color: rgba(197, 82, 82, 0.2); 63 | border-radius: 50%; 64 | animation: shadowChange 1s infinite 1.6s linear; 65 | } 66 | 67 | @keyframes headChange { 68 | 0% { 69 | transform: translateY(0px); 70 | } 71 | 50% { 72 | transform: translateY(7px); 73 | } 74 | 100% { 75 | transform: translateY(0px); 76 | } 77 | } 78 | 79 | @keyframes bodyChange { 80 | 0% { 81 | transform: translateY(0px); 82 | } 83 | 50% { 84 | transform: translateY(3px); 85 | } 86 | 100% { 87 | transform: translateY(0px); 88 | } 89 | } 90 | 91 | @keyframes walk { 92 | 0% { 93 | transform: translateX(0px) rotate(0deg); 94 | } 95 | 20% { 96 | transform: translateX(-20px) rotate(0deg); 97 | } 98 | 40% { 99 | transform: translate(-40px, 0px) rotate(0deg); 100 | } 101 | 60% { 102 | transform: translate(-30px, -10px) rotate(35deg); 103 | } 104 | 90% { 105 | transform: translate(10px, -7px) rotate(-35deg); 106 | } 107 | 100% { 108 | transform: translateX(0px); 109 | } 110 | } 111 | 112 | @keyframes shadowChange { 113 | 0% { 114 | width: 100px; 115 | } 116 | 50% { 117 | width: 110px; 118 | } 119 | 100% { 120 | width: 100px; 121 | } 122 | } -------------------------------------------------------------------------------- /navbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dropdown Navbar 6 | 7 | 9 | 10 | 11 | 55 | 56 | -------------------------------------------------------------------------------- /navbar/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | outline: none; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | body { 9 | display: flex; 10 | flex-direction: column; 11 | align-self: center; 12 | } 13 | #navBar { 14 | background-color: #212121; 15 | border-bottom: 1px solid #212121; 16 | } 17 | #navBar ul { 18 | display: flex; 19 | justify-content: center; 20 | } 21 | li.menuElements { 22 | background-color: #212121; 23 | } 24 | #navBar ul li a { 25 | color: white; 26 | text-decoration: none; 27 | width: 100%; 28 | } 29 | #navBar ul li a:first-of-type { 30 | text-align: center; 31 | } 32 | 33 | /* The dropmenu */ 34 | #navBar ul li ul { 35 | flex-direction: column; 36 | } 37 | #navBar ul li ul li a { 38 | padding-left: 10px; 39 | width: 100%; 40 | text-align: left !important; 41 | } 42 | #navBar ul li ul li { 43 | display: none; 44 | background-color: #212121; 45 | z-index: 1; 46 | opacity: 0; 47 | align-items: flex-start; 48 | justify-content: center; 49 | font-size: 14px; 50 | padding: 20px 0 20px 0; 51 | } 52 | #navBar ul li:hover ul li { 53 | display: flex; 54 | animation: load 0.3s forwards; 55 | } 56 | @keyframes load { 57 | 0% { 58 | transform: translateY(40px) scale(1.3); 59 | } 60 | 100% { 61 | opacity: 1; 62 | transform: translateY(0px) scale(1); 63 | } 64 | } 65 | 66 | #navBar ul li ul li:first-child { 67 | animation-delay: 0s; 68 | } 69 | #navBar ul li ul li:nth-child(2) { 70 | animation-delay: 0.05s; 71 | } 72 | #navBar ul li ul li:nth-child(3) { 73 | animation-delay: 0.1s; 74 | } 75 | #navBar ul li ul li:last-child { 76 | animation-delay: 0.15s; 77 | } 78 | #navBar ul li { 79 | list-style-type: none; 80 | width: 200px; 81 | height: 35px; 82 | padding-top: 5px; 83 | display: flex; 84 | justify-content: flex-start; 85 | align-items: center; 86 | flex-direction: column; 87 | position: relative; 88 | } 89 | 90 | /* The line effect for the items from second navigation bar */ 91 | 92 | #navBar ul .menuElements::before { 93 | content: ""; 94 | display: block; 95 | height: 4px; 96 | background-color: white; 97 | position: absolute; 98 | top: 0; 99 | left: 0; 100 | width: 0%; 101 | transition: all 0.3s ease-in-out; 102 | } 103 | #navBar ul .menuElements:hover::before { 104 | width: 100%; 105 | } 106 | .submenu li::before { 107 | content: ""; 108 | display: block; 109 | height: 2px; 110 | background-color: white; 111 | position: absolute; 112 | bottom: 0; 113 | left: 0; 114 | width: 0%; 115 | transition: all 0.3s ease-in-out; 116 | } 117 | .submenu li:hover::before { 118 | width: 100%; 119 | } -------------------------------------------------------------------------------- /navigation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Animated Navigation Bar 6 | 7 | 9 | 10 | 11 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /navigation/index.js: -------------------------------------------------------------------------------- 1 | const hamburger = document.querySelector(".hamburger"); 2 | const navLinks = document.querySelector(".navLinks"); 3 | const links = document.querySelectorAll(".navLinks li"); 4 | const bars = document.querySelectorAll(".bar") 5 | 6 | hamburger.addEventListener("click", () => { 7 | navLinks.classList.toggle("show"); 8 | links.forEach(link => { 9 | link.classList.toggle("hide"); 10 | }); 11 | bars.forEach(bars => { 12 | bars.classList.toggle("change") 13 | }) 14 | }); 15 | -------------------------------------------------------------------------------- /navigation/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Poppins', sans-serif; 9 | } 10 | 11 | nav { 12 | height: 10vh; 13 | background: #c81912; 14 | position: relative; 15 | } 16 | 17 | .navLinks { 18 | display: flex; 19 | list-style: none; 20 | justify-content: space-around; 21 | align-items: center; 22 | margin-left: auto; 23 | position: fixed; 24 | background: #c81912; 25 | height: 100vh; 26 | width: 100%; 27 | flex-direction: column; 28 | clip-path: circle(0px at 90% -10%); 29 | transition: all 0.5s ease-out; 30 | pointer-events: none; 31 | } 32 | 33 | .navLinks li a { 34 | color: white; 35 | text-decoration: none; 36 | font-size: 30px; 37 | } 38 | 39 | .bar { 40 | width: 30px; 41 | height: 5px; 42 | background: white; 43 | margin: 5px; 44 | border-radius: 3px; 45 | transition: all 0.4s linear; 46 | } 47 | 48 | .hamburger { 49 | position: absolute; 50 | cursor: pointer; 51 | right: 5%; 52 | top: 50%; 53 | transform: translate(-5%, -50%); 54 | z-index: 2; 55 | } 56 | 57 | .navLinks.show { 58 | clip-path: circle(1000px at 90% -10%); 59 | pointer-events: all; 60 | } 61 | 62 | .navLinks li { 63 | opacity: 0; 64 | } 65 | 66 | .navLinks li:nth-child(1) { 67 | transition: all 0.5s ease 0.2s; 68 | } 69 | 70 | .navLinks li:nth-child(2) { 71 | transition: all 0.5s ease 0.4s; 72 | } 73 | 74 | .navLinks li:nth-child(3) { 75 | transition: all 0.5s ease 0.6s; 76 | } 77 | 78 | li.hide { 79 | opacity: 1; 80 | } 81 | 82 | div.change:nth-child(1){ 83 | opacity: 0%; 84 | } 85 | 86 | div.change:nth-child(2) { 87 | transform: rotate(45deg); 88 | } 89 | 90 | div.change:nth-child(3) { 91 | transform: translateY(-10px) rotate(-45deg); 92 | } -------------------------------------------------------------------------------- /push/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Push me 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /push/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | width: 300px; 9 | height: 300px; 10 | position: absolute; 11 | top: 50%; 12 | left: 50%; 13 | transform: translate(-50%, -50%); 14 | background-color: #e8d4b4; 15 | } 16 | 17 | .circle { 18 | border-radius: 50%; 19 | width: 100px; 20 | height: 50px; 21 | background-color: #ff2626; 22 | position: relative; 23 | top: 50%; 24 | left: 50%; 25 | transform: translate(-50%, -30%); 26 | z-index: 3; 27 | transition: all 0.2s ease-in-out; 28 | } 29 | 30 | .firstElement { 31 | box-sizing: border-box; 32 | border-radius: 15px 15px 50% 50%; 33 | background-color: #c21d1d; 34 | width: 100px; 35 | height: 50px; 36 | position: absolute; 37 | top: 50%; 38 | left: 50%; 39 | transform: translate(-50%); 40 | z-index: 1; 41 | } 42 | 43 | .secondElement { 44 | box-sizing: border-box; 45 | border-radius: 50%; 46 | background-color: #dbdbdb; 47 | width: 120px; 48 | height: 60px; 49 | position: absolute; 50 | top: 50%; 51 | left: 50%; 52 | transform: translate(-50%); 53 | } 54 | 55 | .thirdElement { 56 | box-sizing: border-box; 57 | border-radius: 50%; 58 | background-color: #5b5656; 59 | width: 120px; 60 | height: 60px; 61 | position: absolute; 62 | top: 50%; 63 | left: 50%; 64 | transform: translate(-50%, 10%); 65 | z-index: -1; 66 | } 67 | 68 | .circle:active { 69 | transform: translate(-50%, -21%) 70 | } -------------------------------------------------------------------------------- /rating/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rating Animation 6 | 7 | 9 | 11 | 12 | 13 |
14 |

RATE MY APP

15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /rating/index.js: -------------------------------------------------------------------------------- 1 | const mouth = document.querySelector(".mouth") 2 | const stars = document.querySelectorAll("label") 3 | 4 | for(var i=0; i 2 | 3 | 4 | 5 | 6 | Share button 7 | 8 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 |
18 |
19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /share/index.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector(".container") 2 | const bar1 = document.querySelector(".bar1") 3 | const bar2 = document.querySelector(".bar2") 4 | const facebook = document.querySelector(".facebook") 5 | const instagram = document.querySelector(".instagram") 6 | const linkedin = document.querySelector(".linkedin") 7 | const logos = document.querySelectorAll("i") 8 | const allElements = [button, bar1, bar2, facebook, instagram, linkedin, logos[0], logos[1], logos[2]] 9 | 10 | button.addEventListener("click", expand) 11 | 12 | function expand() { 13 | allElements.forEach(element => element.classList.toggle("exp")) 14 | } -------------------------------------------------------------------------------- /share/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: linear-gradient(to right, #abbaab, #ffffff); 3 | height: 100vh; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | } 8 | 9 | .container { 10 | width: 130px; 11 | height: 130px; 12 | border-radius: 50%; 13 | background: linear-gradient(to right, #fdc830, #f37335); 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | cursor: pointer; 18 | transition: all 0.3s ease-in-out; 19 | } 20 | 21 | .bar1, .bar2{ 22 | width: 50px; 23 | height: 7px; 24 | background-color: white; 25 | transform: translate(-5px, 10px) rotate(25deg); 26 | transition: all 0.3s ease-in-out; 27 | border-radius: 10px; 28 | } 29 | 30 | .bar2 { 31 | transform: translate(-5px, -7px) rotate(-25deg); 32 | position: absolute; 33 | } 34 | 35 | .container div { 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | } 40 | 41 | .container div i { 42 | font-size: 0; 43 | opacity: 0; 44 | transition: all 0.3s ease-in-out; 45 | } 46 | 47 | .facebook, .instagram, .linkedin { 48 | width: 20px; 49 | height: 20px; 50 | background-color: white; 51 | border-radius: 50%; 52 | position: absolute; 53 | transition: all 0.3s ease-in-out; 54 | transform: translate(15px, -18px); 55 | } 56 | 57 | .instagram { 58 | transform: translateX(-20px); 59 | } 60 | 61 | .linkedin { 62 | transform: translate(15px, 18px); 63 | } 64 | 65 | .facebook.exp, .instagram.exp, .linkedin.exp { 66 | transform: translate(80px, -80px); 67 | width: 100px; 68 | height: 100px; 69 | box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); 70 | } 71 | 72 | .facebook.exp:hover { 73 | background-color: #4167b2; 74 | } 75 | 76 | .facebook.exp:hover i, .instagram.exp:hover i, .linkedin.exp:hover i { 77 | color: white; 78 | } 79 | 80 | .instagram.exp { 81 | transform: translateX(-100px); 82 | } 83 | 84 | .instagram.exp:hover { 85 | background-color: #d40064 86 | } 87 | 88 | .linkedin.exp { 89 | transform: translate(80px, 80px); 90 | } 91 | 92 | .linkedin.exp:hover { 93 | background-color: #0274b3; 94 | } 95 | 96 | .bar1.exp, .bar2.exp { 97 | transform: rotate(45deg); 98 | width: 30px; 99 | height: 5px; 100 | } 101 | 102 | .bar2.exp { 103 | transform: rotate(-45deg); 104 | } 105 | 106 | .container.exp { 107 | width: 60px; 108 | height: 60px; 109 | } 110 | 111 | .container div i.exp { 112 | opacity: 1; 113 | font-size: 60px; 114 | } -------------------------------------------------------------------------------- /spinner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Loading Spinner 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /spinner/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #fe346e; 9 | } 10 | 11 | .spinner:before { 12 | content: ""; 13 | position: absolute; 14 | top: 50%; 15 | left: 50%; 16 | margin-top: -50px; 17 | margin-left: -50px; 18 | border-top: 3px solid #ffd4de; 19 | border-right: 3px solid transparent; 20 | border-radius: 50%; 21 | width: 100px; 22 | height: 100px; 23 | animation: spin 1s linear infinite; 24 | } 25 | 26 | @keyframes spin { 27 | to { 28 | transform: rotate(360deg); 29 | } 30 | } -------------------------------------------------------------------------------- /square/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rotating Square 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /square/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | width: 400px; 9 | height: 400px; 10 | background-color: #ffa41b; 11 | position: absolute; 12 | top: 50%; 13 | left: 50%; 14 | transform: translate(-50%, -50%); 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | .square { 21 | width: 50px; 22 | height: 50px; 23 | border: 3px solid white; 24 | animation: rotating 2.3s infinite; 25 | background: linear-gradient(to right, white 50%, #ffa41b 50%); 26 | background-size: 200% 100%; 27 | background-position: right bottom; 28 | transform: rotate(-90deg); 29 | } 30 | 31 | @keyframes rotating { 32 | 0% { 33 | background-position: right bottom; 34 | } 35 | 30% { 36 | background-position: left bottom; 37 | transform: rotate(-90deg); 38 | } 39 | 50% { 40 | background-position: left bottom; 41 | transform: rotate(90deg); 42 | } 43 | 80% { 44 | background-position: right bottom; 45 | transform: rotate(90deg); 46 | } 47 | 100% { 48 | transform: rotate(270deg); 49 | background-position: right bottom; 50 | } 51 | } -------------------------------------------------------------------------------- /stopwatch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Stopwatch | Designed by webcodemode 7 | 8 | 9 | 10 | 11 | 12 |
13 |

14 | 00 : 15 | 00 . 16 | 000 17 |

18 |
    19 |
    20 |
    21 | 22 | 23 | 24 |
    25 |

    A WEBCODEMODE CONCEPT

    26 |
    27 |
    28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /stopwatch/main.js: -------------------------------------------------------------------------------- 1 | var timer = document.querySelector('.timer'); 2 | var toggleBtn = document.querySelector('.toggle'); 3 | var resetBtn = document.querySelector('.reset'); 4 | var lapBtn = document.querySelector('.lap'); 5 | var lapContainer = document.querySelector('.lapContainer') 6 | 7 | var watch = new Stopwatch(timer); 8 | 9 | function start() { 10 | toggleBtn.textContent = 'Stop'; 11 | toggleBtn.classList.toggle("on"); 12 | watch.start(); 13 | } 14 | 15 | function stop() { 16 | toggleBtn.textContent = 'Start'; 17 | toggleBtn.classList.toggle("on") 18 | watch.stop(); 19 | } 20 | 21 | function stopWhenOn() { 22 | toggleBtn.textContent = 'Start'; 23 | toggleBtn.classList.toggle("on") 24 | watch.stop(); 25 | watch.reset(); 26 | } 27 | 28 | toggleBtn.addEventListener('click', function () { 29 | watch.isOn ? stop() : start(); 30 | }); 31 | 32 | resetBtn.addEventListener('click', function () { 33 | watch.isOn ? stopWhenOn() : watch.reset(); 34 | // stop(); 35 | }); 36 | 37 | lapBtn.addEventListener('click', function () { 38 | watch.isOn ? watch.lapOn() : watch.lapOff(); 39 | }) -------------------------------------------------------------------------------- /stopwatch/stopwatch.js: -------------------------------------------------------------------------------- 1 | function Stopwatch(elem) { 2 | var time = 0; 3 | var offset; 4 | var interval; 5 | 6 | function lapOn() { 7 | var lapTime = lapContainer.appendChild(document.createElement("li")) 8 | lapTime.innerHTML = elem.textContent; 9 | lapTime.classList = 'lapItem' 10 | } 11 | 12 | function lapOff() { 13 | return; 14 | } 15 | 16 | function update() { 17 | if (this.isOn) { 18 | time += delta(); 19 | } 20 | elem.textContent = timeFormatter(time); 21 | } 22 | 23 | function delta() { 24 | var now = Date.now(); 25 | var timePassed = now - offset; 26 | 27 | offset = now; 28 | 29 | return timePassed; 30 | } 31 | 32 | function timeFormatter(time) { 33 | time = new Date(time); 34 | 35 | var minutes = time.getMinutes().toString(); 36 | var seconds = time.getSeconds().toString(); 37 | var milliseconds = time.getMilliseconds().toString(); 38 | 39 | if (minutes.length < 2) { 40 | minutes = '0' + minutes; 41 | } 42 | 43 | if (seconds.length < 2) { 44 | seconds = '0' + seconds; 45 | } 46 | 47 | while (milliseconds.length < 3) { 48 | milliseconds = '0' + milliseconds; 49 | } 50 | 51 | var result = minutes + ' : ' + seconds + ' . ' + milliseconds; 52 | 53 | return result; 54 | } 55 | 56 | this.start = function () { 57 | interval = setInterval(update.bind(this), 1); 58 | offset = Date.now(); 59 | this.isOn = true; 60 | }; 61 | 62 | this.stop = function () { 63 | clearInterval(interval); 64 | interval = null; 65 | this.isOn = false; 66 | }; 67 | 68 | this.reset = function () { 69 | time = 0; 70 | lapContainer.innerHTML = ''; 71 | interval = null; 72 | this.isOn = false; 73 | update(); 74 | }; 75 | 76 | this.lapOn = function () { 77 | lapOn(); 78 | } 79 | 80 | this.lapOff = function () { 81 | lapOff(); 82 | } 83 | 84 | this.isOn = false; 85 | } -------------------------------------------------------------------------------- /stopwatch/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Lato', sans-serif; 6 | } 7 | 8 | body { 9 | height: 100vh; 10 | background: linear-gradient(to right, #d38312, #a83279); 11 | display: flex; 12 | } 13 | 14 | .container { 15 | margin: auto; 16 | width: 500px; 17 | height: 500px; 18 | display: flex; 19 | flex-direction: column; 20 | justify-content: space-between; 21 | align-items: center; 22 | position: relative; 23 | } 24 | 25 | .timer { 26 | font-size: 76px; 27 | font-weight: lighter; 28 | color: #fff; 29 | width: 410px; 30 | margin-left: 20px; 31 | } 32 | 33 | .bottomPart { 34 | width: 100%; 35 | height: 150px; 36 | display: flex; 37 | flex-direction: column; 38 | justify-content: space-between; 39 | align-items: center; 40 | } 41 | 42 | .copyright { 43 | align-self: flex-start; 44 | color: #fff; 45 | } 46 | 47 | .btns { 48 | width: 300px; 49 | height: 100px; 50 | display: flex; 51 | justify-content: space-between; 52 | align-items: center; 53 | } 54 | 55 | .btns button { 56 | width: 80px; 57 | height: 80px; 58 | background-color: transparent; 59 | color: #fff; 60 | border: none; 61 | border-radius: 50%; 62 | text-transform: uppercase; 63 | font-weight: bold; 64 | cursor: pointer; 65 | outline: none; 66 | box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.5); 67 | } 68 | 69 | .btns .toggle { 70 | transition: all 0.3s ease; 71 | background-color: #508052; 72 | z-index: 1; 73 | } 74 | 75 | .btns .toggle:active, .btns .reset:active, .btns .lap:active { 76 | transform: scale(0.9); 77 | } 78 | 79 | .btns .toggle.on { 80 | background-color: #d92027; 81 | } 82 | 83 | .btns .reset, .btns .lap { 84 | transition: all 0.3s ease; 85 | } 86 | 87 | .lapContainer { 88 | width: 200px; 89 | height: 200px; 90 | color: #fff; 91 | padding-left: 30px; 92 | overflow: auto; 93 | display: flex; 94 | flex-direction: column; 95 | align-items: center; 96 | } 97 | 98 | .lapItem { 99 | width: 120px; 100 | height: 30px; 101 | font-size: 18px; 102 | border-bottom: 1px solid #fff; 103 | margin-bottom: 5px; 104 | } 105 | 106 | ::-webkit-scrollbar { 107 | width: 15px; 108 | 109 | } 110 | 111 | ::-webkit-scrollbar-track { 112 | background: #f1f1f1; 113 | border-radius: 10px; 114 | } 115 | 116 | ::-webkit-scrollbar-thumb { 117 | background: #ff9234; 118 | border-radius: 10px; 119 | } 120 | 121 | ::-webkit-scrollbar-thumb:hover { 122 | background: #ff7600; 123 | } -------------------------------------------------------------------------------- /switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Switch 6 | 7 | 8 | 9 | 10 | 11 |
    12 | 13 |
    14 | 15 | 16 | -------------------------------------------------------------------------------- /switch/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | background-color: #e3e3e3; 5 | } 6 | 7 | .container { 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | } 12 | 13 | input { 14 | position: relative; 15 | width: 200px; 16 | height: 100px; 17 | background-color: #dcedc2; 18 | border-radius: 60px; 19 | box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); 20 | -webkit-appearance: none; 21 | -moz-apearance:none; 22 | outline: none; 23 | transition: 0.5s; 24 | } 25 | 26 | input:checked { 27 | background-color: #086972; 28 | } 29 | 30 | input::before { 31 | content: ""; 32 | position: absolute; 33 | width: 100px; 34 | height: 100px; 35 | border-radius: 60px; 36 | top: 0; 37 | left: 0; 38 | background-color: #fff; 39 | transform: scale(1.1); 40 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 41 | transition: 0.5s; 42 | } 43 | 44 | input:checked::before { 45 | left: 100px; 46 | } -------------------------------------------------------------------------------- /todo/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcodemode/instagramPosts/06e75a6a937bddb145104c999d13a5140cc10121/todo/background.jpg -------------------------------------------------------------------------------- /todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | To Do App 8 | 9 | 11 | 13 | 14 | 15 | 16 |
    17 |
    18 |

    TO DO APP

    19 |
    20 |
    21 | 22 | 23 |
    24 |
    25 |
    26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /todo/index.js: -------------------------------------------------------------------------------- 1 | const addBtn = document.querySelector(".add") 2 | const taskField = document.querySelector(".taskInput") 3 | const list = document.querySelector(".list") 4 | 5 | addBtn.addEventListener("click", addTask) 6 | 7 | function addTask() { 8 | if (taskField.value.length === 0) { 9 | return; 10 | } else { 11 | const taskContainer = list.appendChild(document.createElement("div")) 12 | const task = taskContainer.appendChild(document.createElement("p")) 13 | const doneBtn = taskContainer.appendChild(document.createElement("i")) 14 | const deleteBtn = taskContainer.appendChild(document.createElement("i")) 15 | deleteBtn.className = "fas fa-trash-alt" 16 | doneBtn.className = "fas fa-check" 17 | taskContainer.className = "taskContainer" 18 | task.className = "task" 19 | task.innerHTML = taskField.value.charAt(0).toUpperCase() + taskField.value.slice(1) 20 | taskField.value = "" 21 | deleteBtn.addEventListener("click", deleteTask) 22 | doneBtn.addEventListener("click", checkTask) 23 | function checkTask(e) { 24 | e.target.previousSibling.style.textDecoration = "line-through" 25 | } 26 | function deleteTask(e) { 27 | e.target.parentElement.remove() 28 | } 29 | } 30 | } 31 | 32 | 33 | -------------------------------------------------------------------------------- /todo/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #03ba9e; 9 | height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | font-family: 'Poppins', sans-serif; 14 | } 15 | 16 | .container { 17 | width: 250px; 18 | height: 400px; 19 | background-color: white; 20 | border: none; 21 | border-radius: 20px; 22 | box-shadow: 0px 30px 55px 2px rgba(0,0,0,0.46); 23 | display: flex; 24 | flex-direction: column; 25 | overflow: hidden; 26 | cursor: default; 27 | } 28 | 29 | .title { 30 | width: 100%; 31 | height: 25%; 32 | background: url(background.jpg); 33 | color: white; 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | } 38 | 39 | .addSection { 40 | width: 100%; 41 | height: 15%; 42 | display: flex; 43 | border-bottom: 1px solid #dbdbdb; 44 | } 45 | 46 | .taskInput { 47 | margin: 10px 0 10px 10px; 48 | padding: 10px; 49 | width: 180px; 50 | height: 40px; 51 | border-radius: 15px 0 0 15px; 52 | border: 1px solid #dbdbdb; 53 | border-right: none; 54 | outline: none; 55 | } 56 | 57 | .add { 58 | width: 60px; 59 | height: 40px; 60 | margin: 10px 10px 10px 0; 61 | background-color: #f7b71d; 62 | color: white; 63 | border: none; 64 | border-radius: 0 15px 15px 0; 65 | outline: none; 66 | font-weight: bold; 67 | cursor: pointer; 68 | transition: all 0.2s ease-in-out; 69 | } 70 | 71 | .add:hover { 72 | background-color: #ffa600; 73 | } 74 | 75 | .list { 76 | width: 100%; 77 | height: 60%; 78 | padding: 0 10px 10px 10px; 79 | overflow: auto; 80 | } 81 | 82 | /* DOM Elements */ 83 | 84 | .taskContainer { 85 | border-bottom: 1px solid #dbdbdb; 86 | padding: 5px 0 5px 0; 87 | display: flex; 88 | justify-content: space-between; 89 | align-items: center; 90 | } 91 | .task { 92 | width: 170px; 93 | } 94 | i.fas.fa-check, i.fas.fa-trash-alt { 95 | opacity: 0; 96 | cursor: pointer; 97 | transition: all 0.1s ease-in-out; 98 | } 99 | i.fas.fa-check:hover { 100 | color: #0c9463; 101 | } 102 | i.fas.fa-trash-alt:hover { 103 | color: #ff0000; 104 | } 105 | i.fas.fa-check:active { 106 | transform: translateY(3px); 107 | } 108 | i.fas.fa-trash-alt:active { 109 | transform: translateY(3px); 110 | } 111 | .taskContainer:hover i.fas.fa-check, .taskContainer:hover i.fas.fa-trash-alt { 112 | opacity: 1; 113 | } --------------------------------------------------------------------------------