├── 3D Animated Sphere ├── index.html ├── script.js └── style.css ├── 3D-Text-Animation ├── index.html └── style.css ├── 3dFlipCardAnimation ├── index.html └── style.css ├── Animated-Buttons ├── button_style.css └── index.html ├── Bicycle Using HTML5 and CSS3 ├── index.html └── style.css ├── Birds Flyby animation ├── birds.css └── index.html ├── Box rotating ├── image │ ├── img 1 (1).jpg │ ├── img 1 (2).jpg │ ├── img 1 (3).jpg │ ├── img 1 (4).jpg │ └── topimg.png ├── index.html └── style.css ├── CSS-Loaders ├── index.html └── loader.css ├── CSSTextReveal └── index.html ├── Carousel of pictures ├── index.html ├── script.js └── style.css ├── Contributing.md ├── DNA_using_CSS ├── dna.html ├── script.js └── style.css ├── Fom ├── app.js ├── index.html ├── style.css └── svg │ ├── character.svg │ ├── elastic.svg │ └── tick-mark.svg ├── GlowingSocialMediaIcons ├── index.html └── style.css ├── Indian Flag ├── index.html ├── indian flag.png ├── readme.md └── style.css ├── LICENSE.md ├── LoginFormAnimation ├── index.html └── style.css ├── NewYork-city-animation ├── images │ ├── boat.png │ ├── cloud.png │ ├── newyork.png │ ├── plane.png │ └── thumbnail.png ├── index.html └── style.css ├── QuizApp ├── index.html ├── quiz.css └── quiz.js ├── README.md ├── Ring wave animation ├── index.html └── style.css ├── Tab-Component ├── index.html └── style.css ├── Text Water Effect ├── index.html └── style.css ├── Typing effects ├── index.html └── styles.css ├── Wires pull SVG loader ├── index.html ├── script.js └── style.css ├── changing emoji rating ├── index.html └── style.css ├── click_counter ├── counter.css ├── counter.html └── counter.js ├── css-loaders-tutorial-starter-files ├── README.md ├── index.html └── styles.css ├── happy-toggle ├── happy.css └── index.html ├── hover_color_animation ├── index.html ├── script.js └── style.css ├── image hover ├── index.html └── style.css ├── playlist-carousel-css-only ├── index.html ├── script.js └── style.css ├── sticker animation ├── index.html └── style.css └── terminal-text-effect └── index.html /3D Animated Sphere/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /3D Animated Sphere/script.js: -------------------------------------------------------------------------------- 1 | 2 | //Sphere Animation 3 | const Texts = [ 4 | 'HTML', 5 | 'CSS', 6 | 'JAVASCRIPT', 7 | 'BOOTSTRAP', 8 | 'REACT', 9 | 'ANGULAR', 10 | 'PYTHON', 11 | 'SASS', 12 | 'GIT', 13 | 'SQL', 14 | 'JQUERY', 15 | 'JAVA', 16 | ] 17 | 18 | var tagCloud = TagCloud('.Sphere', Texts, { 19 | // Sphere radius in px 20 | radius: 240, 21 | 22 | // animation speed 23 | // slow, normal, fast 24 | maxSpeed: 'normal', 25 | initSpeed: 'fast', 26 | 27 | // Rolling direction [0 (top) , 90 (left), 135 (right-bottom)] 28 | direction: 135, 29 | 30 | // interaction with mouse or not [Default true (decelerate to rolling init speed, and keep rolling with mouse).] 31 | keep: true, 32 | }); 33 | // console.log(document.querySelector('.Sphere')); 34 | // Giving color to each text in sphere 35 | // var color = '#67DDF2'; 36 | // document.querySelector('.Sphere').style.color = color; 37 | 38 | // Giving random colors to the text in sphere 39 | var randomColor = Math.floor(Math.random()*16777215).toString(16); 40 | 41 | document.querySelector('.Sphere').style.color = '#'+randomColor; 42 | 43 | //colour of the text will change every time you refresh -------------------------------------------------------------------------------- /3D Animated Sphere/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #000; 3 | } 4 | 5 | /* Applying CSS to sphere */ 6 | .tagcloud { 7 | display: inline-block; 8 | top: 100px; 9 | left: 32%; 10 | font-weight: bold; 11 | letter-spacing: 1px; 12 | font-family: 'Bebas Neue', cursive; 13 | font-size: 20px; 14 | } 15 | 16 | /* Change color of each text in sphere on hover */ 17 | .tagcloud--item:hover { 18 | color: #FFF ; 19 | } 20 | .Sphere{ 21 | color: lightblue; 22 | } -------------------------------------------------------------------------------- /3D-Text-Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 3D-Text-Animation 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 | -------------------------------------------------------------------------------- /3D-Text-Animation/style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import url("//fonts.googleapis.com/css?family=Pacifico&text=Pure"); 3 | @import url("//fonts.googleapis.com/css?family=Roboto:700&text=css"); 4 | @import url("//fonts.googleapis.com/css?family=Kaushan+Script&text=!"); 5 | body { 6 | min-height: 450px; 7 | height: 100vh; 8 | margin: 0; 9 | background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000); 10 | } 11 | 12 | .stage { 13 | height: 300px; 14 | /* width: 500px; */ 15 | margin: auto; 16 | position: absolute; 17 | top: 0; 18 | right: 0; 19 | bottom: 0; 20 | left: 0; 21 | perspective: 9999px; 22 | transform-style: preserve-3d; 23 | } 24 | 25 | .layer { 26 | width: 100%; 27 | height: 100%; 28 | position: absolute; 29 | transform-style: preserve-3d; 30 | animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s; 31 | animation-fill-mode: forwards; 32 | transform: rotateY(40deg) rotateX(33deg) translateZ(0); 33 | } 34 | 35 | .layer:after { 36 | font: 150px/0.65 "Pacifico", "Kaushan Script", Futura, "Roboto", "Trebuchet MS", Helvetica, sans-serif; 37 | content:"🙋‍♀️Hello!👋"; 38 | white-space: pre; 39 | text-align: center; 40 | height: 100%; 41 | width: 100%; 42 | position: absolute; 43 | top: 50px; 44 | color: whitesmoke; 45 | letter-spacing: -2px; 46 | text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13); 47 | } 48 | 49 | .layer:nth-child(1):after { 50 | transform: translateZ(0px); 51 | } 52 | 53 | .layer:nth-child(2):after { 54 | transform: translateZ(-1.5px); 55 | } 56 | 57 | .layer:nth-child(3):after { 58 | transform: translateZ(-3px); 59 | } 60 | 61 | .layer:nth-child(4):after { 62 | transform: translateZ(-4.5px); 63 | } 64 | 65 | .layer:nth-child(5):after { 66 | transform: translateZ(-6px); 67 | } 68 | 69 | .layer:nth-child(6):after { 70 | transform: translateZ(-7.5px); 71 | } 72 | 73 | .layer:nth-child(7):after { 74 | transform: translateZ(-9px); 75 | } 76 | 77 | .layer:nth-child(8):after { 78 | transform: translateZ(-10.5px); 79 | } 80 | 81 | .layer:nth-child(9):after { 82 | transform: translateZ(-12px); 83 | } 84 | 85 | .layer:nth-child(10):after { 86 | transform: translateZ(-13.5px); 87 | } 88 | 89 | .layer:nth-child(11):after { 90 | transform: translateZ(-15px); 91 | } 92 | 93 | .layer:nth-child(12):after { 94 | transform: translateZ(-16.5px); 95 | } 96 | 97 | .layer:nth-child(13):after { 98 | transform: translateZ(-18px); 99 | } 100 | 101 | .layer:nth-child(14):after { 102 | transform: translateZ(-19.5px); 103 | } 104 | 105 | .layer:nth-child(15):after { 106 | transform: translateZ(-21px); 107 | } 108 | 109 | .layer:nth-child(16):after { 110 | transform: translateZ(-22.5px); 111 | } 112 | 113 | .layer:nth-child(17):after { 114 | transform: translateZ(-24px); 115 | } 116 | 117 | .layer:nth-child(18):after { 118 | transform: translateZ(-25.5px); 119 | } 120 | 121 | .layer:nth-child(19):after { 122 | transform: translateZ(-27px); 123 | } 124 | 125 | .layer:nth-child(20):after { 126 | transform: translateZ(-28.5px); 127 | } 128 | 129 | .layer:nth-child(n+10):after { 130 | -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25); 131 | } 132 | 133 | .layer:nth-child(n+11):after { 134 | -webkit-text-stroke: 15px dodgerblue; 135 | text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b; 136 | } 137 | 138 | .layer:nth-child(n+12):after { 139 | -webkit-text-stroke: 15px #0077ea; 140 | } 141 | 142 | .layer:last-child:after { 143 | -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1); 144 | } 145 | 146 | .layer:first-child:after { 147 | color: #fff; 148 | text-shadow: none; 149 | } 150 | 151 | @keyframes ಠ_ಠ { 152 | 100% { 153 | transform: rotateY(-40deg) rotateX(-43deg); 154 | } 155 | } -------------------------------------------------------------------------------- /3dFlipCardAnimation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
Facebook
16 |
17 |
18 |
19 |
Twitter
20 |
21 |
22 |
23 |
LinkedIn
24 |
25 |
26 |
27 |
Github
28 |
29 |
30 |
31 |
Instagram
32 |
33 |
34 | 35 | -------------------------------------------------------------------------------- /3dFlipCardAnimation/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-image: linear-gradient(to right,#d2430f 19%,#37623f 42%,#00d4ff 100%); 3 | } 4 | 5 | .container { 6 | display: flex; 7 | width: 100%; 8 | height: 100vh; 9 | justify-content: center; 10 | align-items: center; 11 | perspective: 1000px; 12 | } 13 | 14 | .card { 15 | position: relative; 16 | width: 8rem; 17 | height: 8rem; 18 | margin: 0.5rem; 19 | text-align: center; 20 | line-height: 8rem; 21 | color: #ecf0f1; 22 | border-radius: 0.8rem; 23 | transform-style: preserve-3d; 24 | } 25 | 26 | .face { 27 | display: block; 28 | position: absolute; 29 | top: 0; 30 | left: 0; 31 | width: 100%; 32 | height: 100%; 33 | border-radius: 0.8rem; 34 | background-size: cover; 35 | background-position: center center; 36 | backface-visibility: hidden; 37 | transition: transform 0.5s ease-in-out; 38 | } 39 | 40 | .face--front { 41 | background: #2c3e50; 42 | font-size: 3rem; 43 | } 44 | 45 | .face--back { 46 | background: #2c3e50; 47 | font-size: 1.5rem; 48 | transform: rotateY(180deg); 49 | } 50 | 51 | .card:hover .face--front { 52 | transform: rotateY(-180deg); 53 | } 54 | 55 | .card:hover .face--back { 56 | transform: rotateY(0deg); 57 | } -------------------------------------------------------------------------------- /Animated-Buttons/button_style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: hsl(0, 1%, 28%); 3 | } 4 | h1 { 5 | position: relative; 6 | text-align: center; 7 | color: #fdf7f7; 8 | font-size: 50px; 9 | font-family: "Cormorant Garamond", serif; 10 | } 11 | 12 | .frame { 13 | width: 60%; 14 | margin:40px auto; 15 | text-align: center; 16 | } 17 | button { 18 | margin: 30px; 19 | } 20 | .custom-btn { 21 | width: 130px; 22 | height: 50px; 23 | color: #fff; 24 | border-radius: 6px; 25 | padding: 10px 25px; 26 | font-family: 'Lato', sans-serif; 27 | font-weight: 600; 28 | background: transparent; 29 | cursor: pointer; 30 | transition: all 0.3s ease; 31 | position: relative; 32 | display: inline-block; 33 | box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 34 | 7px 7px 20px 0px rgba(0,0,0,.1), 35 | 4px 4px 5px 0px rgba(0,0,0,.1); 36 | outline: none; 37 | } 38 | 39 | /* 1 */ 40 | .btn-1 { 41 | background: rgb(6,14,131); 42 | background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%); 43 | border: none; 44 | } 45 | .btn-1:hover { 46 | background: rgb(0,3,255); 47 | background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%); 48 | } 49 | 50 | /* 2 */ 51 | .btn-2 { 52 | background: rgb(96,9,240); 53 | background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%); 54 | border: none; 55 | 56 | } 57 | .btn-2:before { 58 | height: 0%; 59 | width: 2px; 60 | } 61 | .btn-2:hover { 62 | box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), 63 | -4px -4px 6px 0 rgba(116, 125, 136, .5), 64 | inset -4px -4px 6px 0 rgba(255,255,255,.2), 65 | inset 4px 4px 6px 0 rgba(0, 0, 0, .4); 66 | } 67 | 68 | 69 | /* 3 */ 70 | .btn-3 { 71 | background: rgb(0,172,238); 72 | background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); 73 | width: 130px; 74 | height: 50px; 75 | line-height: 50px; 76 | padding:0; 77 | border: none; 78 | 79 | } 80 | .btn-3 span { 81 | position: relative; 82 | display: block; 83 | width: 100%; 84 | height: 100%; 85 | } 86 | .btn-3:before, 87 | .btn-3:after { 88 | position: absolute; 89 | content: ""; 90 | right: 0; 91 | top: 0; 92 | background: rgba(2,126,251,1); 93 | transition: all 0.3s ease; 94 | } 95 | .btn-3:before { 96 | height: 0%; 97 | width: 2px; 98 | } 99 | .btn-3:after { 100 | width: 0%; 101 | height: 2px; 102 | } 103 | .btn-3:hover{ 104 | background: transparent; 105 | box-shadow: none; 106 | } 107 | .btn-3:hover:before { 108 | height: 100%; 109 | } 110 | .btn-3:hover:after { 111 | width: 100%; 112 | } 113 | .btn-3 span:hover{ 114 | color: rgba(2,126,251,1); 115 | } 116 | .btn-3 span:before, 117 | .btn-3 span:after { 118 | position: absolute; 119 | content: ""; 120 | left: 0; 121 | bottom: 0; 122 | background: rgba(2,126,251,1); 123 | transition: all 0.3s ease; 124 | } 125 | .btn-3 span:before { 126 | width: 2px; 127 | height: 0%; 128 | } 129 | .btn-3 span:after { 130 | width: 0%; 131 | height: 2px; 132 | } 133 | .btn-3 span:hover:before { 134 | height: 100%; 135 | } 136 | .btn-3 span:hover:after { 137 | width: 100%; 138 | } 139 | 140 | /* 4 */ 141 | .btn-4 { 142 | background-color: #4dccc6; 143 | background-image: linear-gradient(315deg, #3fc9c2 0%, #86e2dc 74%); 144 | line-height: 50px; 145 | padding: 0; 146 | border: none; 147 | } 148 | .btn-4:hover{ 149 | background-color: #89d8d3; 150 | background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%); 151 | } 152 | .btn-4 span { 153 | position: relative; 154 | display: block; 155 | width: 100%; 156 | height: 100%; 157 | } 158 | .btn-4:before, 159 | .btn-4:after { 160 | position: absolute; 161 | content: ""; 162 | right: 0; 163 | top: 0; 164 | box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9), 165 | -4px -4px 6px 0 rgba(116, 125, 136, .2), 166 | inset -4px -4px 6px 0 rgba(255,255,255,.9), 167 | inset 4px 4px 6px 0 rgba(116, 125, 136, .3); 168 | transition: all 0.3s ease; 169 | } 170 | .btn-4:before { 171 | height: 0%; 172 | width: .1px; 173 | } 174 | .btn-4:after { 175 | width: 0%; 176 | height: .1px; 177 | } 178 | .btn-4:hover:before { 179 | height: 100%; 180 | } 181 | .btn-4:hover:after { 182 | width: 100%; 183 | } 184 | .btn-4 span:before, 185 | .btn-4 span:after { 186 | position: absolute; 187 | content: ""; 188 | left: 0; 189 | bottom: 0; 190 | box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9), 191 | -4px -4px 6px 0 #fafbfdfa, 192 | inset -4px -4px 6px 0 rgba(255,255,255,.9), 193 | inset 4px 4px 6px 0 rgb(246, 247, 248); 194 | transition: all 0.3s ease; 195 | } 196 | .btn-4 span:before { 197 | width: .1px; 198 | height: 0%; 199 | } 200 | .btn-4 span:after { 201 | width: 0%; 202 | height: .1px; 203 | } 204 | .btn-4 span:hover:before { 205 | height: 100%; 206 | } 207 | .btn-4 span:hover:after { 208 | width: 100%; 209 | } 210 | 211 | /* 5 */ 212 | .btn-5 { 213 | width: 130px; 214 | height: 50px; 215 | line-height: 42px; 216 | padding: 0; 217 | border: none; 218 | background: rgb(255,27,0); 219 | background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%); 220 | } 221 | .btn-5:hover { 222 | color: #f0094a; 223 | background: transparent; 224 | box-shadow:none; 225 | } 226 | .btn-5:before, 227 | .btn-5:after{ 228 | content:''; 229 | position:absolute; 230 | top:0; 231 | right:0; 232 | height:2px; 233 | width:0; 234 | background: #f0094a; 235 | box-shadow: 236 | -1px -1px 5px 0px #fff, 237 | 7px 7px 20px 0px #0003, 238 | 4px 4px 5px 0px #0002; 239 | transition:400ms ease all; 240 | } 241 | .btn-5:after{ 242 | right:inherit; 243 | top:inherit; 244 | left:0; 245 | bottom:0; 246 | } 247 | .btn-5:hover:before, 248 | .btn-5:hover:after{ 249 | width:100%; 250 | transition:800ms ease all; 251 | } 252 | 253 | 254 | /* 6 */ 255 | .btn-6 { 256 | background: rgb(247,150,192); 257 | background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%); 258 | line-height: 50px; 259 | padding: 0; 260 | border: none; 261 | } 262 | .btn-6 span { 263 | position: relative; 264 | display: block; 265 | width: 100%; 266 | height: 100%; 267 | } 268 | .btn-6:before, 269 | .btn-6:after { 270 | position: absolute; 271 | content: ""; 272 | height: 0%; 273 | width: 1px; 274 | box-shadow: 275 | -1px -1px 20px 0px rgb(227, 166, 223), 276 | -4px -4px 5px 0px rgb(197, 137, 195), 277 | 7px 7px 20px 0px rgba(0,0,0,.4), 278 | 4px 4px 5px 0px rgba(0,0,0,.3); 279 | } 280 | .btn-6:before { 281 | right: 0; 282 | top: 0; 283 | transition: all 500ms ease; 284 | } 285 | .btn-6:after { 286 | left: 0; 287 | bottom: 0; 288 | transition: all 500ms ease; 289 | } 290 | .btn-6:hover{ 291 | background: transparent; 292 | color: #76aef1; 293 | box-shadow: none; 294 | } 295 | .btn-6:hover:before { 296 | transition: all 500ms ease; 297 | height: 100%; 298 | } 299 | .btn-6:hover:after { 300 | transition: all 500ms ease; 301 | height: 100%; 302 | } 303 | .btn-6 span:before, 304 | .btn-6 span:after { 305 | position: absolute; 306 | content: ""; 307 | box-shadow: 308 | -1px -1px 20px 0px rgba(255,255,255,1), 309 | -4px -4px 5px 0px rgba(255,255,255,1), 310 | 7px 7px 20px 0px rgba(0,0,0,.4), 311 | 4px 4px 5px 0px rgba(0,0,0,.3); 312 | } 313 | .btn-6 span:before { 314 | left: 0; 315 | top: 0; 316 | width: 0%; 317 | height: .5px; 318 | transition: all 500ms ease; 319 | } 320 | .btn-6 span:after { 321 | right: 0; 322 | bottom: 0; 323 | width: 0%; 324 | height: .5px; 325 | transition: all 500ms ease; 326 | } 327 | .btn-6 span:hover:before { 328 | width: 100%; 329 | } 330 | .btn-6 span:hover:after { 331 | width: 100%; 332 | } 333 | 334 | /* 7 */ 335 | .btn-7 { 336 | background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%); 337 | line-height: 47px; 338 | padding: 0; 339 | border: none; 340 | } 341 | .btn-7 span { 342 | position: relative; 343 | display: block; 344 | width: 100%; 345 | height: 100%; 346 | } 347 | .btn-7:before, 348 | .btn-7:after { 349 | position: absolute; 350 | content: ""; 351 | right: 0; 352 | bottom: 0; 353 | background: rgba(251,75,2,1); 354 | box-shadow: 355 | -7px -7px 20px 0px rgba(255,255,255,.9), 356 | -4px -4px 5px 0px rgba(255,255,255,.9), 357 | 7px 7px 20px 0px rgba(0,0,0,.2), 358 | 4px 4px 5px 0px rgba(0,0,0,.3); 359 | transition: all 0.3s ease; 360 | } 361 | .btn-7:before{ 362 | height: 0%; 363 | width: 2px; 364 | } 365 | .btn-7:after { 366 | width: 0%; 367 | height: 2px; 368 | } 369 | .btn-7:hover{ 370 | color: rgba(251,75,2,1); 371 | background: transparent; 372 | } 373 | .btn-7:hover:before { 374 | height: 100%; 375 | } 376 | .btn-7:hover:after { 377 | width: 100%; 378 | } 379 | .btn-7 span:before, 380 | .btn-7 span:after { 381 | position: absolute; 382 | content: ""; 383 | left: 0; 384 | top: 0; 385 | background: rgba(251,75,2,1); 386 | box-shadow: 387 | -7px -7px 20px 0px rgba(255,255,255,.9), 388 | -4px -4px 5px 0px rgba(255,255,255,.9), 389 | 7px 7px 20px 0px rgba(0,0,0,.2), 390 | 4px 4px 5px 0px rgba(0,0,0,.3); 391 | transition: all 0.3s ease; 392 | } 393 | .btn-7 span:before { 394 | width: 2px; 395 | height: 0%; 396 | } 397 | .btn-7 span:after { 398 | height: 2px; 399 | width: 0%; 400 | } 401 | .btn-7 span:hover:before { 402 | height: 100%; 403 | } 404 | .btn-7 span:hover:after { 405 | width: 100%; 406 | } 407 | 408 | /* 8 */ 409 | .btn-8 { 410 | background-color: #fcecfb; 411 | background-image: linear-gradient(315deg, #811eaf 0%, #c797eb 74%); 412 | line-height: 47px; 413 | padding: 0; 414 | border: none; 415 | } 416 | .btn-8 span { 417 | position: relative; 418 | display: block; 419 | width: 100%; 420 | height: 100%; 421 | } 422 | .btn-8:before, 423 | .btn-8:after { 424 | position: absolute; 425 | content: ""; 426 | right: 0; 427 | bottom: 0; 428 | background: #c797eb; 429 | /*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), 430 | -4px -4px 6px 0 rgba(116, 125, 136, .2), 431 | inset -4px -4px 6px 0 rgba(255,255,255,.5), 432 | inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/ 433 | transition: all 0.3s ease; 434 | } 435 | .btn-8:before{ 436 | height: 0%; 437 | width: 2px; 438 | } 439 | .btn-8:after { 440 | width: 0%; 441 | height: 2px; 442 | } 443 | .btn-8:hover:before { 444 | height: 100%; 445 | } 446 | .btn-8:hover:after { 447 | width: 100%; 448 | } 449 | .btn-8:hover{ 450 | background: transparent; 451 | } 452 | .btn-8 span:hover{ 453 | color: #c797eb; 454 | } 455 | .btn-8 span:before, 456 | .btn-8 span:after { 457 | position: absolute; 458 | content: ""; 459 | left: 0; 460 | top: 0; 461 | background: #c797eb; 462 | transition: all 0.3s ease; 463 | } 464 | .btn-8 span:before { 465 | width: 2px; 466 | height: 0%; 467 | } 468 | .btn-8 span:after { 469 | height: 2px; 470 | width: 0%; 471 | } 472 | .btn-8 span:hover:before { 473 | height: 100%; 474 | } 475 | .btn-8 span:hover:after { 476 | width: 100%; 477 | } 478 | 479 | 480 | /* 9 */ 481 | .btn-9 { 482 | border: none; 483 | transition: all 0.3s ease; 484 | overflow: hidden; 485 | } 486 | .btn-9:after { 487 | position: absolute; 488 | content: " "; 489 | z-index: -1; 490 | top: 0; 491 | left: 0; 492 | width: 100%; 493 | height: 100%; 494 | background-color: #1fd1f9; 495 | background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%); 496 | transition: all 0.3s ease; 497 | } 498 | .btn-9:hover { 499 | background: transparent; 500 | box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), 501 | -4px -4px 6px 0 rgba(116, 125, 136, .2), 502 | inset -4px -4px 6px 0 rgba(255,255,255,.5), 503 | inset 4px 4px 6px 0 rgba(116, 125, 136, .3); 504 | color: #fff; 505 | } 506 | .btn-9:hover:after { 507 | -webkit-transform: scale(2) rotate(180deg); 508 | transform: scale(2) rotate(180deg); 509 | box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), 510 | -4px -4px 6px 0 rgba(116, 125, 136, .2), 511 | inset -4px -4px 6px 0 rgba(255,255,255,.5), 512 | inset 4px 4px 6px 0 rgba(116, 125, 136, .3); 513 | } 514 | 515 | /* 10 */ 516 | .btn-10 { 517 | background: rgb(22,9,240); 518 | background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%); 519 | color: #fff; 520 | border: none; 521 | transition: all 0.3s ease; 522 | overflow: hidden; 523 | } 524 | .btn-10:after { 525 | position: absolute; 526 | content: " "; 527 | top: 0; 528 | left: 0; 529 | z-index: -1; 530 | width: 100%; 531 | height: 100%; 532 | transition: all 0.3s ease; 533 | -webkit-transform: scale(.1); 534 | transform: scale(.1); 535 | } 536 | .btn-10:hover { 537 | color: #fff; 538 | border: none; 539 | background: transparent; 540 | } 541 | .btn-10:hover:after { 542 | background: rgb(0,3,255); 543 | background: linear-gradient(0deg, rgba(2,126,251,1) 0%, rgba(0,3,255,1)100%); 544 | -webkit-transform: scale(1); 545 | transform: scale(1); 546 | } 547 | 548 | /* 11 */ 549 | .btn-11 { 550 | border: none; 551 | background: rgb(251,33,117); 552 | background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%); 553 | color: #fff; 554 | overflow: hidden; 555 | } 556 | .btn-11:hover { 557 | text-decoration: none; 558 | color: #fff; 559 | } 560 | .btn-11:before { 561 | position: absolute; 562 | content: ''; 563 | display: inline-block; 564 | top: -180px; 565 | left: 0; 566 | width: 30px; 567 | height: 100%; 568 | background-color: #fff; 569 | animation: shiny-btn1 3s ease-in-out infinite; 570 | } 571 | .btn-11:hover{ 572 | opacity: .7; 573 | } 574 | .btn-11:active{ 575 | box-shadow: 4px 4px 6px 0 rgba(255,255,255,.3), 576 | -4px -4px 6px 0 rgba(116, 125, 136, .2), 577 | inset -4px -4px 6px 0 rgba(255,255,255,.2), 578 | inset 4px 4px 6px 0 rgba(0, 0, 0, .2); 579 | } 580 | 581 | 582 | @keyframes shiny-btn1 { 583 | 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 584 | 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 585 | 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 586 | 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } 587 | } 588 | 589 | 590 | /* 12 */ 591 | .btn-12{ 592 | position: relative; 593 | right: 20px; 594 | bottom: 20px; 595 | border:none; 596 | box-shadow: none; 597 | width: 130px; 598 | height: 50px; 599 | line-height: 50px; 600 | -webkit-perspective: 230px; 601 | perspective: 230px; 602 | } 603 | .btn-12 span { 604 | background: rgb(0,172,238); 605 | background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); 606 | display: block; 607 | position: absolute; 608 | width: 130px; 609 | height: 50px; 610 | box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 611 | 7px 7px 20px 0px rgba(0,0,0,.1), 612 | 4px 4px 5px 0px rgba(0,0,0,.1); 613 | border-radius: 5px; 614 | margin:0 ; 615 | text-align: center; 616 | -webkit-box-sizing: border-box; 617 | -moz-box-sizing: border-box; 618 | box-sizing: border-box; 619 | -webkit-transition: all .3s; 620 | transition: all .3s; 621 | } 622 | .btn-12 span:nth-child(1) { 623 | box-shadow: 624 | -7px -7px 20px 0px #fff9, 625 | -4px -4px 5px 0px #fff9, 626 | 7px 7px 20px 0px #0002, 627 | 4px 4px 5px 0px #0001; 628 | -webkit-transform: rotateX(90deg); 629 | -moz-transform: rotateX(90deg); 630 | transform: rotateX(90deg); 631 | -webkit-transform-origin: 50% 50% -20px; 632 | -moz-transform-origin: 50% 50% -20px; 633 | transform-origin: 50% 50% -20px; 634 | } 635 | .btn-12 span:nth-child(2) { 636 | -webkit-transform: rotateX(0deg); 637 | -moz-transform: rotateX(0deg); 638 | transform: rotateX(0deg); 639 | -webkit-transform-origin: 50% 50% -20px; 640 | -moz-transform-origin: 50% 50% -20px; 641 | transform-origin: 50% 50% -20px; 642 | } 643 | .btn-12:hover span:nth-child(1) { 644 | box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 645 | 7px 7px 20px 0px rgba(0,0,0,.1), 646 | 4px 4px 5px 0px rgba(0,0,0,.1); 647 | -webkit-transform: rotateX(0deg); 648 | -moz-transform: rotateX(0deg); 649 | transform: rotateX(0deg); 650 | } 651 | .btn-12:hover span:nth-child(2) { 652 | box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 653 | 7px 7px 20px 0px rgba(0,0,0,.1), 654 | 4px 4px 5px 0px rgba(0,0,0,.1); 655 | color: transparent; 656 | -webkit-transform: rotateX(-90deg); 657 | -moz-transform: rotateX(-90deg); 658 | transform: rotateX(-90deg); 659 | } 660 | 661 | /* 13 */ 662 | .btn-13 { 663 | background: rgb(255,151,0); 664 | border: none; 665 | z-index: 1; 666 | } 667 | .btn-13:after { 668 | position: absolute; 669 | content: ""; 670 | width: 100%; 671 | height: 0; 672 | top: 0; 673 | left: 0; 674 | z-index: -1; 675 | border-radius: 5px; 676 | background-color: #eaf818; 677 | background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%); 678 | box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5); 679 | transition: all 0.3s ease; 680 | 681 | } 682 | .btn-13:hover { 683 | color: #000; 684 | } 685 | .btn-13:hover:after { 686 | top: auto; 687 | bottom: 0; 688 | height: 100%; 689 | } 690 | .btn-13:active { 691 | top: 2px; 692 | } 693 | 694 | 695 | 696 | 697 | -------------------------------------------------------------------------------- /Animated-Buttons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animated_Buttons 9 | 10 | 11 |

Animated Buttons

12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /Bicycle Using HTML5 and CSS3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bicycle Using HTML5 and CSS3 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | 30 | -------------------------------------------------------------------------------- /Bicycle Using HTML5 and CSS3/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-size: 62.5%; 9 | } 10 | 11 | body { 12 | width: 100%; 13 | height: 100vh; 14 | display: grid; 15 | place-items: center; 16 | } 17 | 18 | .bicycle { 19 | width: 85rem; 20 | height: 60rem; 21 | position: relative; 22 | } 23 | 24 | @keyframes bicycleAnim { 25 | 0% { 26 | transform: rotateZ(0); 27 | } 28 | 29 | 100% { 30 | transform: rotateZ(-360deg); 31 | } 32 | } 33 | 34 | .bicycle div { 35 | position: absolute; 36 | } 37 | 38 | .wheel { 39 | width: 30rem; 40 | aspect-ratio: 1; 41 | background-color: #000; 42 | border-radius: 50%; 43 | bottom: 0; 44 | border: 0.5rem dashed #000; 45 | background-clip: content-box; 46 | display: grid; 47 | place-items: center; 48 | animation: bicycleAnim 5s infinite linear; 49 | } 50 | 51 | .wheel::after { 52 | content: ""; 53 | width: 24rem; 54 | aspect-ratio: 1; 55 | position: absolute; 56 | border-radius: 50%; 57 | border: 9.5rem solid #ddd; 58 | box-sizing: border-box; 59 | } 60 | 61 | .back-wheel { 62 | right: 0; 63 | } 64 | 65 | .front-fork { 66 | width: 3rem; 67 | height: 17rem; 68 | background-color: #000; 69 | bottom: 15rem; 70 | left: 16.5rem; 71 | transform: rotateZ(20deg); 72 | transform-origin: left bottom; 73 | } 74 | 75 | .front-fork::before { 76 | content: ""; 77 | width: 2rem; 78 | height: 5rem; 79 | background-color: #000; 80 | position: absolute; 81 | bottom: 0; 82 | left: 0.5rem; 83 | transform: rotateZ(30deg) translateX(-1rem); 84 | } 85 | 86 | .tube { 87 | width: 2rem; 88 | height: 12rem; 89 | background-color: #000; 90 | left: 0.5rem; 91 | top: -12rem; 92 | } 93 | 94 | .tube::before { 95 | content: ""; 96 | width: 3rem; 97 | height: 3rem; 98 | background-color: #000; 99 | position: absolute; 100 | left: -0.5rem; 101 | top: 0.5rem; 102 | } 103 | 104 | .handlebars { 105 | width: 8rem; 106 | height: 2rem; 107 | background-color: #000; 108 | top: 18rem; 109 | left: 19rem; 110 | transform: rotateZ(15deg); 111 | perspective: 50rem; 112 | } 113 | 114 | .handlebars::before { 115 | content: ""; 116 | width: 4rem; 117 | aspect-ratio: 1; 118 | background-color: #000; 119 | position: absolute; 120 | top: -1rem; 121 | left: -1rem; 122 | border-radius: 50%; 123 | } 124 | 125 | .handlebars::after { 126 | content: ""; 127 | width: 30rem; 128 | height: 2rem; 129 | background-color: #000; 130 | position: absolute; 131 | left: -15.5rem; 132 | transform: rotateY(-70deg); 133 | border-radius: 2rem; 134 | } 135 | 136 | .crossbar { 137 | width: 27rem; 138 | height: 3.5rem; 139 | background-color: #000; 140 | top: 22rem; 141 | left: 26rem; 142 | transform: rotateZ(20deg); 143 | transform-origin: left top; 144 | border-radius: 0 50% 50% 0; 145 | } 146 | 147 | .frame-1 { 148 | width: 32rem; 149 | height: 3.5rem; 150 | background-color: #000; 151 | top: 25rem; 152 | left: 26rem; 153 | transform: rotateZ(45deg); 154 | transform-origin: left top; 155 | border-radius: 0 50% 50% 0; 156 | } 157 | 158 | .frame-2 { 159 | width: 25rem; 160 | height: 2rem; 161 | background-color: #000; 162 | top: 44rem; 163 | left: 45rem; 164 | z-index: 10; 165 | } 166 | 167 | .seat-tube { 168 | width: 3rem; 169 | height: 18.5rem; 170 | background-color: #000; 171 | top: 30rem; 172 | left: 47rem; 173 | transform: rotateZ(15deg); 174 | } 175 | 176 | .seat-tube::before { 177 | content: ""; 178 | width: 2rem; 179 | height: 11rem; 180 | position: absolute; 181 | background-color: #000; 182 | top: -11rem; 183 | left: 0.5rem; 184 | } 185 | 186 | .seat-tube::after { 187 | content: ""; 188 | width: 2.5rem; 189 | height: 1.5rem; 190 | position: absolute; 191 | background-color: #000; 192 | top: -3rem; 193 | left: 0.25rem; 194 | } 195 | 196 | .seat { 197 | width: 12rem; 198 | height: 3rem; 199 | background-color: #000; 200 | top: -12rem; 201 | left: -6rem; 202 | transform: rotateZ(-12deg); 203 | border-radius: 20% 1rem 1rem 80%; 204 | } 205 | 206 | .back-fork { 207 | width: 2rem; 208 | height: 25rem; 209 | background-color: #000; 210 | left: 60rem; 211 | top: 26rem; 212 | transform: rotateZ(-55deg); 213 | z-index: 10; 214 | } 215 | 216 | .crank { 217 | width: 10rem; 218 | height: 10rem; 219 | background-color: #000; 220 | border-radius: 50%; 221 | top: 40rem; 222 | left: 40rem; 223 | border: 0.3rem dashed #000; 224 | background-clip: content-box; 225 | animation: bicycleAnim 10s infinite linear; 226 | } 227 | 228 | .pedals { 229 | width: 1.5rem; 230 | height: 17rem; 231 | background-color: #000; 232 | top: 37rem; 233 | left: 44rem; 234 | transform: rotateZ(-12deg); 235 | border-radius: 0.5rem; 236 | animation: bicycleAnim 10s infinite linear; 237 | } 238 | 239 | .pedals::before, 240 | .pedals::after { 241 | content: ""; 242 | width: 5rem; 243 | height: 1.7rem; 244 | background-color: #000; 245 | position: absolute; 246 | left: -1.8rem; 247 | border-radius: 0.3rem; 248 | animation: bicycleAnim 10s infinite linear reverse; 249 | } 250 | 251 | .pedals::before { 252 | top: 0.2rem; 253 | } 254 | 255 | .pedals::after { 256 | bottom: 0.2rem; 257 | } 258 | 259 | .chain { 260 | width: 31.5rem; 261 | height: 8.5rem; 262 | border: 0.5rem solid #000; 263 | top: 41rem; 264 | left: 40.5rem; 265 | border-radius: 5rem 50% 50% 5rem; 266 | z-index: 10; 267 | } -------------------------------------------------------------------------------- /Birds Flyby animation/birds.css: -------------------------------------------------------------------------------- 1 | import url("https://fonts.googleapis.com/css?family=Arima+Madurai:300"); 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; 6 | } 7 | 8 | h1 { 9 | font-family: "Arima Madurai", cursive; 10 | color: black; 11 | font-size: 4rem; 12 | letter-spacing: -3px; 13 | text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); 14 | position: relative; 15 | z-index: 3; 16 | } 17 | 18 | .container { 19 | z-index: 1; 20 | position: relative; 21 | overflow: hidden; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | min-height: 35rem; 26 | background-image: linear-gradient(to bottom, rgba(255, 168, 76, 0.6) 0%, rgba(255, 123, 13, 0.6) 100%), url("https://images.unsplash.com/photo-1446824505046-e43605ffb17f"); 27 | background-blend-mode: soft-light; 28 | background-size: cover; 29 | background-position: center center; 30 | padding: 2rem; 31 | } 32 | 33 | .bird { 34 | background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg); 35 | background-size: auto 100%; 36 | width: 88px; 37 | height: 125px; 38 | will-change: background-position; 39 | -webkit-animation-name: fly-cycle; 40 | animation-name: fly-cycle; 41 | -webkit-animation-timing-function: steps(10); 42 | animation-timing-function: steps(10); 43 | -webkit-animation-iteration-count: infinite; 44 | animation-iteration-count: infinite; 45 | } 46 | .bird--one { 47 | -webkit-animation-duration: 1s; 48 | animation-duration: 1s; 49 | -webkit-animation-delay: -0.5s; 50 | animation-delay: -0.5s; 51 | } 52 | .bird--two { 53 | -webkit-animation-duration: 0.9s; 54 | animation-duration: 0.9s; 55 | -webkit-animation-delay: -0.75s; 56 | animation-delay: -0.75s; 57 | } 58 | .bird--three { 59 | -webkit-animation-duration: 1.25s; 60 | animation-duration: 1.25s; 61 | -webkit-animation-delay: -0.25s; 62 | animation-delay: -0.25s; 63 | } 64 | .bird--four { 65 | -webkit-animation-duration: 1.1s; 66 | animation-duration: 1.1s; 67 | -webkit-animation-delay: -0.5s; 68 | animation-delay: -0.5s; 69 | } 70 | 71 | .bird-container { 72 | position: absolute; 73 | top: 20%; 74 | left: -10%; 75 | transform: scale(0) translateX(-10vw); 76 | will-change: transform; 77 | -webkit-animation-name: fly-right-one; 78 | animation-name: fly-right-one; 79 | -webkit-animation-timing-function: linear; 80 | animation-timing-function: linear; 81 | -webkit-animation-iteration-count: infinite; 82 | animation-iteration-count: infinite; 83 | } 84 | .bird-container--one { 85 | -webkit-animation-duration: 15s; 86 | animation-duration: 15s; 87 | -webkit-animation-delay: 0; 88 | animation-delay: 0; 89 | } 90 | .bird-container--two { 91 | -webkit-animation-duration: 16s; 92 | animation-duration: 16s; 93 | -webkit-animation-delay: 1s; 94 | animation-delay: 1s; 95 | } 96 | .bird-container--three { 97 | -webkit-animation-duration: 14.6s; 98 | animation-duration: 14.6s; 99 | -webkit-animation-delay: 9.5s; 100 | animation-delay: 9.5s; 101 | } 102 | .bird-container--four { 103 | -webkit-animation-duration: 16s; 104 | animation-duration: 16s; 105 | -webkit-animation-delay: 10.25s; 106 | animation-delay: 10.25s; 107 | } 108 | 109 | @-webkit-keyframes fly-cycle { 110 | 100% { 111 | background-position: -900px 0; 112 | } 113 | } 114 | 115 | @keyframes fly-cycle { 116 | 100% { 117 | background-position: -900px 0; 118 | } 119 | } 120 | @-webkit-keyframes fly-right-one { 121 | 0% { 122 | transform: scale(0.3) translateX(-10vw); 123 | } 124 | 10% { 125 | transform: translateY(2vh) translateX(10vw) scale(0.4); 126 | } 127 | 20% { 128 | transform: translateY(0vh) translateX(30vw) scale(0.5); 129 | } 130 | 30% { 131 | transform: translateY(4vh) translateX(50vw) scale(0.6); 132 | } 133 | 40% { 134 | transform: translateY(2vh) translateX(70vw) scale(0.6); 135 | } 136 | 50% { 137 | transform: translateY(0vh) translateX(90vw) scale(0.6); 138 | } 139 | 60% { 140 | transform: translateY(0vh) translateX(110vw) scale(0.6); 141 | } 142 | 100% { 143 | transform: translateY(0vh) translateX(110vw) scale(0.6); 144 | } 145 | } 146 | @keyframes fly-right-one { 147 | 0% { 148 | transform: scale(0.3) translateX(-10vw); 149 | } 150 | 10% { 151 | transform: translateY(2vh) translateX(10vw) scale(0.4); 152 | } 153 | 20% { 154 | transform: translateY(0vh) translateX(30vw) scale(0.5); 155 | } 156 | 30% { 157 | transform: translateY(4vh) translateX(50vw) scale(0.6); 158 | } 159 | 40% { 160 | transform: translateY(2vh) translateX(70vw) scale(0.6); 161 | } 162 | 50% { 163 | transform: translateY(0vh) translateX(90vw) scale(0.6); 164 | } 165 | 60% { 166 | transform: translateY(0vh) translateX(110vw) scale(0.6); 167 | } 168 | 100% { 169 | transform: translateY(0vh) translateX(110vw) scale(0.6); 170 | } 171 | } 172 | @-webkit-keyframes fly-right-two { 173 | 0% { 174 | transform: translateY(-2vh) translateX(-10vw) scale(0.5); 175 | } 176 | 10% { 177 | transform: translateY(0vh) translateX(10vw) scale(0.4); 178 | } 179 | 20% { 180 | transform: translateY(-4vh) translateX(30vw) scale(0.6); 181 | } 182 | 30% { 183 | transform: translateY(1vh) translateX(50vw) scale(0.45); 184 | } 185 | 40% { 186 | transform: translateY(-2.5vh) translateX(70vw) scale(0.5); 187 | } 188 | 50% { 189 | transform: translateY(0vh) translateX(90vw) scale(0.45); 190 | } 191 | 51% { 192 | transform: translateY(0vh) translateX(110vw) scale(0.45); 193 | } 194 | 100% { 195 | transform: translateY(0vh) translateX(110vw) scale(0.45); 196 | } 197 | } 198 | @keyframes fly-right-two { 199 | 0% { 200 | transform: translateY(-2vh) translateX(-10vw) scale(0.5); 201 | } 202 | 10% { 203 | transform: translateY(0vh) translateX(10vw) scale(0.4); 204 | } 205 | 20% { 206 | transform: translateY(-4vh) translateX(30vw) scale(0.6); 207 | } 208 | 30% { 209 | transform: translateY(1vh) translateX(50vw) scale(0.45); 210 | } 211 | 40% { 212 | transform: translateY(-2.5vh) translateX(70vw) scale(0.5); 213 | } 214 | 50% { 215 | transform: translateY(0vh) translateX(90vw) scale(0.45); 216 | } 217 | 51% { 218 | transform: translateY(0vh) translateX(110vw) scale(0.45); 219 | } 220 | 100% { 221 | transform: translateY(0vh) translateX(110vw) scale(0.45); 222 | } 223 | } -------------------------------------------------------------------------------- /Birds Flyby animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - Animated - SVG Birds 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |

SVG Animated Birds

15 | 16 |
17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 |
25 |
26 |
27 | 28 |
29 |
30 |
31 | 32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Box rotating/image/img 1 (1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ismeet010/Magic-Of-CSS/4242fe3671e6ec39b09254533e7fd7d80e41ae55/Box rotating/image/img 1 (1).jpg -------------------------------------------------------------------------------- /Box rotating/image/img 1 (2).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ismeet010/Magic-Of-CSS/4242fe3671e6ec39b09254533e7fd7d80e41ae55/Box rotating/image/img 1 (2).jpg -------------------------------------------------------------------------------- /Box rotating/image/img 1 (3).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ismeet010/Magic-Of-CSS/4242fe3671e6ec39b09254533e7fd7d80e41ae55/Box rotating/image/img 1 (3).jpg -------------------------------------------------------------------------------- /Box rotating/image/img 1 (4).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ismeet010/Magic-Of-CSS/4242fe3671e6ec39b09254533e7fd7d80e41ae55/Box rotating/image/img 1 (4).jpg -------------------------------------------------------------------------------- /Box rotating/image/topimg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ismeet010/Magic-Of-CSS/4242fe3671e6ec39b09254533e7fd7d80e41ae55/Box rotating/image/topimg.png -------------------------------------------------------------------------------- /Box rotating/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | 18 | 19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /Box rotating/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0%; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | min-height: 100vh; 11 | background-color: #050505; 12 | } 13 | .cube{ 14 | position: relative; 15 | width: 300px; 16 | height: 300px; 17 | transform-style: preserve-3d; 18 | transform: rotateX(-30deg); 19 | animation: animate 10s linear infinite; 20 | } 21 | @keyframes animate{ 22 | 0%{ 23 | transform: rotateX(-30deg) rotateY(0deg); 24 | } 25 | 100%{ 26 | transform: rotateX(-30deg) rotateY(360deg); 27 | } 28 | } 29 | .cube div{ 30 | position: absolute; 31 | top: 0; 32 | left: 0; 33 | width: 100%; 34 | height: 100%; 35 | transform-style: preserve-3d; 36 | } 37 | .cube div span{ 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | width: 100%; 42 | height: 100%; 43 | background: linear-gradient(#151515,#00ec00); 44 | transform: rotateY(calc(90deg * var(--i))) translateZ(150px); 45 | } 46 | .top{ 47 | position: absolute; 48 | top: 0; 49 | left: 0; 50 | width: 300px; 51 | height: 300px; 52 | background:#222; 53 | transform: rotateX(90deg) translateZ(150px); 54 | } 55 | .top::before{ 56 | content: ''; 57 | position: absolute; 58 | top: 0; 59 | left: 0; 60 | width: 300px; 61 | height: 300px; 62 | background: #0f0; 63 | transform: translateZ(-380px); 64 | filter: blur(20px); 65 | box-shadow: 0 0 120px rgba(0, 255, 0, 0.2), 66 | 0 0 200px rgba(0, 255, 0, 0.4), 67 | 0 0 300px rgba(0, 255, 0, 0.6), 68 | 0 0 400px rgba(0, 255, 0, 0.8), 69 | 0 0 500px rgba(0, 255, 0, 1); 70 | } 71 | .image01{ 72 | height: 100%; 73 | width: 100%; 74 | } 75 | -------------------------------------------------------------------------------- /CSS-Loaders/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS-Loaders 9 | 10 | 11 |

AniMateD - CSS - LOaDers

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 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /CSS-Loaders/loader.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | height: 100%; 5 | background-color: #030121; 6 | overflow-y: hidden; 7 | } 8 | * { 9 | box-sizing: border-box; 10 | } 11 | 12 | h1 { 13 | position: relative; 14 | text-align: center; 15 | color: #fdf7f7; 16 | font-size: 50px; 17 | font-family: serif; 18 | } 19 | .content { 20 | max-width: 600px; 21 | margin: auto; 22 | padding: 5px; 23 | height: 100%; 24 | display: flex; 25 | justify-content: center; 26 | flex-wrap: wrap; 27 | align-content: flex-start; 28 | } 29 | .content .column { 30 | width: calc(33.33% - 10px); 31 | height: 170px; 32 | background-color: #02043a; 33 | margin: 5px; 34 | border: 1px solid rgba(255, 255, 255, 0.1); 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | } 39 | 40 | .container { 41 | width: 30px; 42 | height: 30px; 43 | position: relative; 44 | } 45 | /* 1 */ 46 | .container.animation-1 { 47 | transform: rotate(45deg); 48 | } 49 | .container.animation-6 { 50 | -webkit-animation: rotation 1s infinite; 51 | animation: rotation 1s infinite; 52 | } 53 | .container.animation-6 .shape { 54 | width: 12px; 55 | height: 12px; 56 | border-radius: 2px; 57 | } 58 | .container .shape { 59 | position: absolute; 60 | width: 10px; 61 | height: 10px; 62 | border-radius: 1px; 63 | } 64 | .container .shape.shape1 { 65 | left: 0; 66 | background-color: blue; 67 | } 68 | .container .shape.shape2 { 69 | right: 0; 70 | background-color: #07ff07; 71 | } 72 | .container .shape.shape3 { 73 | bottom: 0; 74 | background-color: yellow; 75 | } 76 | .container .shape.shape4 { 77 | bottom: 0; 78 | right: 0; 79 | background-color: red; 80 | } 81 | @-webkit-keyframes rotation { 82 | from { 83 | transform: rotate(0deg); 84 | } 85 | to { 86 | transform: rotate(360deg); 87 | } 88 | } 89 | 90 | @keyframes rotation { 91 | from { 92 | transform: rotate(0deg); 93 | } 94 | to { 95 | transform: rotate(360deg); 96 | } 97 | } 98 | .animation-1 .shape1 { 99 | -webkit-animation: animation1shape1 0.5s ease 0s infinite alternate; 100 | animation: animation1shape1 0.5s ease 0s infinite alternate; 101 | } 102 | 103 | @-webkit-keyframes animation1shape1 { 104 | from { 105 | transform: translate(0, 0); 106 | } 107 | to { 108 | transform: translate(16px, 16px); 109 | } 110 | } 111 | 112 | @keyframes animation1shape1 { 113 | from { 114 | transform: translate(0, 0); 115 | } 116 | to { 117 | transform: translate(16px, 16px); 118 | } 119 | } 120 | .animation-1 .shape2 { 121 | -webkit-animation: animation1shape2 0.5s ease 0s infinite alternate; 122 | animation: animation1shape2 0.5s ease 0s infinite alternate; 123 | } 124 | 125 | @-webkit-keyframes animation1shape2 { 126 | from { 127 | transform: translate(0, 0); 128 | } 129 | to { 130 | transform: translate(-16px, 16px); 131 | } 132 | } 133 | 134 | @keyframes animation1shape2 { 135 | from { 136 | transform: translate(0, 0); 137 | } 138 | to { 139 | transform: translate(-16px, 16px); 140 | } 141 | } 142 | .animation-1 .shape3 { 143 | -webkit-animation: animation1shape3 0.5s ease 0s infinite alternate; 144 | animation: animation1shape3 0.5s ease 0s infinite alternate; 145 | } 146 | 147 | @-webkit-keyframes animation1shape3 { 148 | from { 149 | transform: translate(0, 0); 150 | } 151 | to { 152 | transform: translate(16px, -16px); 153 | } 154 | } 155 | 156 | @keyframes animation1shape3 { 157 | from { 158 | transform: translate(0, 0); 159 | } 160 | to { 161 | transform: translate(16px, -16px); 162 | } 163 | } 164 | .animation-1 .shape4 { 165 | -webkit-animation: animation1shape4 0.5s ease 0s infinite alternate; 166 | animation: animation1shape4 0.5s ease 0s infinite alternate; 167 | } 168 | 169 | @-webkit-keyframes animation1shape4 { 170 | from { 171 | transform: translate(0, 0); 172 | } 173 | to { 174 | transform: translate(-16px, -16px); 175 | } 176 | } 177 | 178 | @keyframes animation1shape4 { 179 | from { 180 | transform: translate(0, 0); 181 | } 182 | to { 183 | transform: translate(-16px, -16px); 184 | } 185 | } 186 | 187 | /* 2 */ 188 | 189 | .container.animation-2 { 190 | width: 48px; 191 | height: 48px; 192 | border: 5px solid #fff; 193 | border-bottom-color: #ff00a9; 194 | border-radius: 50%; 195 | display: inline-block; 196 | 197 | animation: rotation 1.5s linear infinite; 198 | } 199 | 200 | /* 3 */ 201 | 202 | .container.animation-3 { 203 | width: 48px; 204 | height: 48px; 205 | display: inline-block; 206 | position: relative; 207 | color: #fff; 208 | -webkit-animation: rotation 1s linear infinite; 209 | animation: rotation 1s linear infinite; 210 | } 211 | .container.animation-3:after, 212 | .container.animation-3:before { 213 | content: ""; 214 | position: absolute; 215 | width: 24px; 216 | height: 24px; 217 | top: 50%; 218 | left: 50%; 219 | transform: scale(0.5) translate(0, 0); 220 | background-color: #23a6f6; 221 | border-radius: 50%; 222 | -webkit-animation: animloader3 1s infinite ease-in-out; 223 | animation: animloader3 1s infinite ease-in-out; 224 | } 225 | .container.animation-3:before { 226 | background-color: yellow; 227 | transform: scale(0.5) translate(-48px, -48px); 228 | } 229 | @-webkit-keyframes animloader3 { 230 | 50% { 231 | transform: scale(1) translate(-50%, -50%); 232 | } 233 | } 234 | @keyframes animloader3 { 235 | 50% { 236 | transform: scale(1) translate(-50%, -50%); 237 | } 238 | } 239 | 240 | /* 4 */ 241 | 242 | .container.animation-4 { 243 | width: 48px; 244 | height: 48px; 245 | border-radius: 50%; 246 | display: inline-block; 247 | border-top: 4px solid red; 248 | border-right: 4px solid transparent; 249 | -webkit-animation: rotation 1s linear infinite; 250 | animation: rotation 1s linear infinite; 251 | } 252 | .container.animation-4:after { 253 | content: ""; 254 | position: absolute; 255 | left: 0; 256 | top: 0; 257 | width: 48px; 258 | height: 48px; 259 | border-radius: 50%; 260 | border-left: 4px solid yellow; 261 | border-bottom: 4px solid transparent; 262 | animation: rotation 0.5s linear infinite reverse; 263 | } 264 | 265 | /* 5 */ 266 | .container.animation-5 { 267 | position: absolute; 268 | top: 391px; 269 | left: 739px; 270 | width: 60px; 271 | height: 13px; 272 | padding: 2px; 273 | border-radius: 15px; 274 | background-color: #f3f3f3; 275 | } 276 | .slide { 277 | position: relative; 278 | left: -2px; 279 | top: -0.5px; 280 | width: 18px; 281 | height: 10px; 282 | border-radius: 15px; 283 | background-color: deeppink; 284 | animation: slide 1.2s infinite; 285 | } 286 | @keyframes slide { 287 | 50% { 288 | left: 40px; 289 | } 290 | } 291 | 292 | /* 6 */ 293 | 294 | .animation-6 .shape1 { 295 | -webkit-animation: animation6shape1 2s linear 0s infinite normal; 296 | animation: animation6shape1 2s linear 0s infinite normal; 297 | } 298 | 299 | @-webkit-keyframes animation6shape1 { 300 | 0% { 301 | transform: translate(0, 0); 302 | } 303 | 25% { 304 | transform: translate(0, 18px); 305 | } 306 | 50% { 307 | transform: translate(18px, 18px); 308 | } 309 | 75% { 310 | transform: translate(18px, 0); 311 | } 312 | } 313 | 314 | @keyframes animation6shape1 { 315 | 0% { 316 | transform: translate(0, 0); 317 | } 318 | 25% { 319 | transform: translate(0, 18px); 320 | } 321 | 50% { 322 | transform: translate(18px, 18px); 323 | } 324 | 75% { 325 | transform: translate(18px, 0); 326 | } 327 | } 328 | .animation-6 .shape2 { 329 | -webkit-animation: animation6shape2 2s linear 0s infinite normal; 330 | animation: animation6shape2 2s linear 0s infinite normal; 331 | } 332 | 333 | @-webkit-keyframes animation6shape2 { 334 | 0% { 335 | transform: translate(0, 0); 336 | } 337 | 25% { 338 | transform: translate(-18px, 0); 339 | } 340 | 50% { 341 | transform: translate(-18px, 18px); 342 | } 343 | 75% { 344 | transform: translate(0, 18px); 345 | } 346 | } 347 | 348 | @keyframes animation6shape2 { 349 | 0% { 350 | transform: translate(0, 0); 351 | } 352 | 25% { 353 | transform: translate(-18px, 0); 354 | } 355 | 50% { 356 | transform: translate(-18px, 18px); 357 | } 358 | 75% { 359 | transform: translate(0, 18px); 360 | } 361 | } 362 | .animation-6 .shape3 { 363 | -webkit-animation: animation6shape3 2s linear 0s infinite normal; 364 | animation: animation6shape3 2s linear 0s infinite normal; 365 | } 366 | 367 | @-webkit-keyframes animation6shape3 { 368 | 0% { 369 | transform: translate(0, 0); 370 | } 371 | 25% { 372 | transform: translate(18px, 0); 373 | } 374 | 50% { 375 | transform: translate(18px, -18px); 376 | } 377 | 75% { 378 | transform: translate(0, -18px); 379 | } 380 | } 381 | 382 | @keyframes animation6shape3 { 383 | 0% { 384 | transform: translate(0, 0); 385 | } 386 | 25% { 387 | transform: translate(18px, 0); 388 | } 389 | 50% { 390 | transform: translate(18px, -18px); 391 | } 392 | 75% { 393 | transform: translate(0, -18px); 394 | } 395 | } 396 | .animation-6 .shape4 { 397 | -webkit-animation: animation6shape4 2s linear 0s infinite normal; 398 | animation: animation6shape4 2s linear 0s infinite normal; 399 | } 400 | 401 | @-webkit-keyframes animation6shape4 { 402 | 0% { 403 | transform: translate(0, 0); 404 | } 405 | 25% { 406 | transform: translate(0, -18px); 407 | } 408 | 50% { 409 | transform: translate(-18px, -18px); 410 | } 411 | 75% { 412 | transform: translate(-18px, 0); 413 | } 414 | } 415 | 416 | @keyframes animation6shape4 { 417 | 0% { 418 | transform: translate(0, 0); 419 | } 420 | 25% { 421 | transform: translate(0, -18px); 422 | } 423 | 50% { 424 | transform: translate(-18px, -18px); 425 | } 426 | 75% { 427 | transform: translate(-18px, 0); 428 | } 429 | } 430 | 431 | /* 7 */ 432 | .circle { 433 | display: inline-block; 434 | margin: 2.4rem; 435 | outline: 0 none; 436 | border-radius: 100%; 437 | font-size: 1.2rem; 438 | width: 1em; 439 | height: 1em; 440 | animation: circle 1.5s infinite ease; 441 | } 442 | .container.animation-7 { 443 | position: relative; 444 | width: 6rem; 445 | height: 6rem; 446 | } 447 | 448 | .container.animation-7 { 449 | width: 12px; 450 | height: 12px; 451 | border-radius: 50%; 452 | display: inline-block; 453 | position: relative; 454 | color: #5fff06; 455 | -webkit-animation: animloader42 1s linear infinite alternate; 456 | animation: animloader42 1s linear infinite alternate; 457 | } 458 | @-webkit-keyframes animloader42 { 459 | 0% { 460 | box-shadow: -38px -6px, -14px 6px, 14px -6px; 461 | } 462 | 33% { 463 | box-shadow: -38px 6px, -14px -6px, 14px 6px; 464 | } 465 | 66% { 466 | box-shadow: -38px -6px, -14px 6px, 14px -6px; 467 | } 468 | 100% { 469 | box-shadow: -38px 6px, -14px -6px, 14px 6px; 470 | } 471 | } 472 | @keyframes animloader42 { 473 | 0% { 474 | box-shadow: -38px -6px, -14px 6px, 14px -6px; 475 | } 476 | 33% { 477 | box-shadow: -38px 6px, -14px -6px, 14px 6px; 478 | } 479 | 66% { 480 | box-shadow: -38px -6px, -14px 6px, 14px -6px; 481 | } 482 | 100% { 483 | box-shadow: -38px 6px, -14px -6px, 14px 6px; 484 | } 485 | } 486 | 487 | /* 8 */ 488 | 489 | #ld4 { 490 | position: relative; 491 | display: flex; 492 | width: 25%; 493 | justify-content: space-between; 494 | } 495 | #ld4 div { 496 | height: 15px; 497 | width: 15px; 498 | border-radius: 50%; 499 | background: #d91e36; 500 | } 501 | #ld4 div:nth-child(1) { 502 | animation: ld4 3s linear infinite 0s; 503 | } 504 | #ld4 div:nth-child(2) { 505 | animation: ld4 3s linear infinite 0.15s; 506 | } 507 | #ld4 div:nth-child(3) { 508 | animation: ld4 3s linear infinite 0.3s; 509 | } 510 | #ld4 div:nth-child(4) { 511 | animation: ld4 3s linear infinite 0.45s; 512 | } 513 | 514 | @keyframes ld4 { 515 | 0% { 516 | opacity: 0; 517 | transform: scale(0.3); 518 | background: #59cd90; 519 | } 520 | 25% { 521 | opacity: 1; 522 | transform: scale(1.8); 523 | background: #0072bb; 524 | } 525 | 50% { 526 | opacity: 0; 527 | transform: scale(0.3); 528 | background: #fe4a49; 529 | } 530 | 75% { 531 | opacity: 1; 532 | transform: scale(1.8); 533 | background: #fed766; 534 | } 535 | 100% { 536 | opacity: 0; 537 | } 538 | } 539 | 540 | /* 9 */ 541 | 542 | .container.animation-9 { 543 | display: flex; 544 | align-items: center; 545 | justify-content: center; 546 | margin: auto; 547 | width: 100px; 548 | height: 100px; 549 | } 550 | .bar { 551 | display: inline-block; 552 | width: 5px; 553 | height: 50px; 554 | border-radius: 5px; 555 | margin: 2px; 556 | animation: animation-9 1s ease-in-out infinite; 557 | background-color: #00cdc0; 558 | } 559 | .bar:nth-child(1) { 560 | animation-delay: 0; 561 | } 562 | .bar:nth-child(2) { 563 | animation-delay: 0.1s; 564 | } 565 | .bar:nth-child(3) { 566 | animation-delay: 0.2s; 567 | } 568 | .bar:nth-child(4) { 569 | animation-delay: 0.3s; 570 | } 571 | @keyframes animation-9 { 572 | 0% { 573 | transform: scale(1); 574 | } 575 | 20% { 576 | transform: scale(1, 2); 577 | } 578 | 40% { 579 | transform: scale(1); 580 | } 581 | } 582 | -------------------------------------------------------------------------------- /CSSTextReveal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Text reveal effect 5 | 42 | 43 | 44 |

Text reveal effect using CSS variables, the ::after pseudo-element and a simple CSS animation

45 |

Go check the index.html file for the code!

46 | 47 | 48 | -------------------------------------------------------------------------------- /Carousel of pictures/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Question 2 9 | 10 | 11 | 12 | 13 |
14 | Default picture 15 |

Image Name and Description

16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Carousel of pictures/script.js: -------------------------------------------------------------------------------- 1 | img = document.querySelector('img'); 2 | arr = ['https://i.pinimg.com/originals/d6/64/a4/d664a4e1a33c09e90e73ce32d49c6ac0.jpg', 'https://www.pixelstalk.net/wp-content/uploads/2016/07/Cute-Baby-Animal-Photos-768x432.jpg', 'https://www.pixelstalk.net/wp-content/uploads/2016/07/Free-Download-Cute-Baby-Animal-Image-768x576.jpg', 'https://www.pixelstalk.net/wp-content/uploads/2016/07/Free-Download-Cute-Baby-Animal-Picture-768x432.jpg', 'https://www.pixelstalk.net/wp-content/uploads/2016/07/Cute-Baby-Animal-Photo-768x480.jpg'] 3 | btnnext = document.querySelector('#next'); 4 | btnadd = document.querySelector('#add'); 5 | 6 | var i = 0 7 | img.setAttribute('src', arr[i]); 8 | 9 | btnnext.addEventListener('click', () => { 10 | img.setAttribute('src', arr[(i + 1) % arr.length]) 11 | i++; 12 | }) 13 | -------------------------------------------------------------------------------- /Carousel of pictures/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | /* border: 2px solid black; */ 3 | margin: 20px; 4 | box-sizing: border-box; 5 | background-color: rgb(151, 241, 33); 6 | border: 5px solid black; 7 | } 8 | 9 | body { 10 | background-color: white; 11 | } 12 | 13 | #next { 14 | margin: 5px 20px; 15 | color: lightpink; 16 | background-color: blue; 17 | border-radius: 5px; 18 | } 19 | 20 | .container { 21 | margin: 0px; 22 | display: inline-block; 23 | text-align: center; 24 | } -------------------------------------------------------------------------------- /Contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | This documentation contains a set of guidelines to help you during the contribution process. 4 | 5 | # Rules for Contribution 6 | 1. Issues will be assigned on **First Come First Service Basis**. 7 | 2. You can create a new `issue`. 8 | 3. Maintainer will add `hactoberfest` lable, if the issue created by you is relevant. 9 | 4. Don't `Spam` the `PR` otherwise `spam` label can be added to your `PR`. 10 | 5. After creating a `PR` link the issue also. 11 | 12 | 13 | # Submitting Contributions👩‍💻👨‍💻 14 | Below you will find the process and workflow used to review and merge your changes. 15 | 16 | ## Step 1 : Find an issue 17 | - Take a look at the Existing issues or create your **own** issues! 18 | - Wait for the issue to be assigned to you after which you can start working on it. 19 | 20 | ## Step 2 : Fork the Project 21 | - Fork this Repository. This will create a Local Copy of this Repository on your Github Profile. Keep a reference to the original project in `upstream` remote. 22 | ``` 23 | $ git clone https://github.com//Magic-Of-CSS 24 | $ cd Magic-Of-CSS 25 | $ git remote add upstream https://github.com/ismeet010/Magic-Of-CSS 26 | ``` 27 | 28 | - If you have already forked the project, update your copy before working. 29 | ``` 30 | $ git remote update 31 | $ git checkout 32 | $ git rebase upstream/ 33 | ``` 34 | ## Step 3 : Branch 35 | ``` 36 | # To create a new branch with name branch_name and switch to that branch 37 | $ git checkout -b 38 | ``` 39 | ## Step 4 : Work on the issue assigned 40 | - **Create a new folder** and work on the issue assigned to you 41 | - After you've made changes or made your contribution to the project add changes to the branch you've just created by: 42 | ``` 43 | # To add all new files to branch branch_name 44 | $ git add . 45 | ``` 46 | ## Step 5 : Commit 47 | 48 | - To commit give a descriptive message for the convenience of reveiwer by: 49 | ``` 50 | # This message get associated with all files you have changed 51 | $ git commit -m "message" 52 | ``` 53 | 54 | ## Step 6 : Work Remotely 55 | - Now you are ready to your work to the remote repository. 56 | - When your work is ready and complies with the project conventions, upload your changes to your fork: 57 | 58 | ``` 59 | # To push your work to your remote repository 60 | $ git push -u origin 61 | ``` 62 | 63 | ## Step 7 : Pull Request 64 | - Go to your repository in browser. Click on `contribute` and click `open pull request`. 65 | - Write an appropriate comment and click `create pull request`. 66 | - Your Pull Request has been submitted and will be reviewed by the owner and merged.🥳 67 | 68 | --- 69 | ### Few things to keep in mind while creating a pull request (PR): 70 | - Add relevant title that clearly specifies what you have done in your commit. 71 | - Mention the **issue number in your PR.** 72 | - Give a brief description about the changes. 73 | 74 | ## Need more help?🤔 75 | You can refer to the following articles on basics of Git and Github in case you are stuck: 76 | - [Forking a Repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) 77 | - [Cloning a Repo](https://help.github.com/en/desktop/contributing-to-projects/creating-an-issue-or-pull-request) 78 | - [How to create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github) 79 | - [Getting started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6) 80 | - [Learn GitHub from Scratch](https://lab.github.com/githubtraining/introduction-to-github) 81 | 82 | ## Tip from us😇 83 | **No contribution is too small💪.** Any contributions you make are **greatly appreciated.** 84 | -------------------------------------------------------------------------------- /DNA_using_CSS/dna.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DNA 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
Created by Nitesh Kumar
17 | 18 | 19 | -------------------------------------------------------------------------------- /DNA_using_CSS/script.js: -------------------------------------------------------------------------------- 1 | var cnv; 2 | 3 | 4 | function setup(){ 5 | frameRate(60); 6 | if (displayWidth > displayHeight) { 7 | cnv = createCanvas(500, 500, P2D); 8 | } else { 9 | cnv = createCanvas(displayWidth*0.95,displayWidth*0.95, P2D); 10 | } 11 | cnv.parent("cnv"); 12 | 13 | num = 20; 14 | a = 0; 15 | scl = 1; 16 | speed = PI/60; 17 | 18 | stroke(255); 19 | } 20 | 21 | 22 | function draw(){ 23 | background(0,100); 24 | 25 | for (var i=1; i { 14 | const input = container.querySelector(".input"); 15 | const line = container.querySelector(".elastic-line"); 16 | const placeholder = container.querySelector(".placeholder"); 17 | 18 | input.addEventListener("focus", () => { 19 | //Check to see if there is any text in the input 20 | if (!input.value) { 21 | tl.fromTo( 22 | line, 23 | { attr: { d: start } }, 24 | { attr: { d: end }, ease: "Power2.easeOut", duration: 0.75 } 25 | ); 26 | tl.to(line, { attr: { d: start }, ease: "elastic.out(3,0.5)" }, "<50%"); 27 | //Placeholder Shift 28 | tl.to( 29 | placeholder, 30 | { 31 | top: -15, 32 | left: 0, 33 | scale: 0.7, 34 | duration: 0.5, 35 | ease: "Power2.easeOut", 36 | }, 37 | "<15%" 38 | ); 39 | } 40 | }); 41 | }); 42 | 43 | //Revert back if it's not focused 44 | form.addEventListener("click", () => { 45 | containers.forEach((container) => { 46 | const input = container.querySelector(".input"); 47 | const line = container.querySelector(".elastic-line"); 48 | const placeholder = container.querySelector(".placeholder"); 49 | 50 | if (document.activeElement !== input) { 51 | if (!input.value) { 52 | gsap.to(placeholder, { 53 | top: 0, 54 | left: 0, 55 | scale: 1, 56 | duration: 0.5, 57 | ease: "Power2.easeOut", 58 | }); 59 | } 60 | } 61 | //We will do our validation 62 | //Name Validation 63 | input.addEventListener("input", (e) => { 64 | if (e.target.type === "text") { 65 | let inputText = e.target.value; 66 | if (inputText.length > 2) { 67 | colorize("#6391E8", line, placeholder); 68 | } else { 69 | colorize("#FE8C99", line, placeholder); 70 | } 71 | } 72 | //Validate Email 73 | if (e.target.type === "email") { 74 | let valid = validateEmail(e.target.value); 75 | if (valid) { 76 | colorize("#6391E8", line, placeholder); 77 | } else { 78 | colorize("#FE8C99", line, placeholder); 79 | } 80 | } 81 | //Validate Phone 82 | if (e.target.type === "tel") { 83 | let valid = validatePhone(e.target.value); 84 | if (valid) { 85 | colorize("#6391E8", line, placeholder); 86 | } else { 87 | colorize("#FE8C99", line, placeholder); 88 | } 89 | } 90 | }); 91 | }); 92 | }); 93 | 94 | // checking email validation 95 | 96 | function validateEmail(email) { 97 | let re = /\S+@\S+\.\S+/; 98 | return re.test(email); 99 | } 100 | function validatePhone(phone) { 101 | let re = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im; 102 | return re.test(phone); 103 | } 104 | 105 | //COLORIZE FUNCTION 106 | function colorize(color, line, placeholder) { 107 | gsap.to(line, { stroke: color, duration: 0.75 }); 108 | gsap.to(placeholder, { color: color, duration: 0.75 }); 109 | } 110 | 111 | //Checkbox animation fill 112 | const checkbox = document.querySelector(".checkbox"); 113 | const tl2 = gsap.timeline({ 114 | defaults: { duration: 0.5, ease: "Power2.easeOut" }, 115 | }); 116 | const tickMarkPath = document.querySelector(".tick-mark path"); 117 | const pathLength = tickMarkPath.getTotalLength(); 118 | 119 | gsap.set(tickMarkPath, { 120 | strokeDashoffset: pathLength, 121 | strokeDasharray: pathLength, 122 | }); 123 | 124 | checkbox.addEventListener("click", () => { 125 | if (checkbox.checked) { 126 | tl2.to(".checkbox-fill", { top: "0%" }); 127 | tl2.fromTo( 128 | tickMarkPath, 129 | { strokeDashoffset: pathLength }, 130 | { strokeDashoffset: 0 }, 131 | "<50%" 132 | ); 133 | tl2.to(".checkbox-label", { color: "#6391e8" }, "<"); 134 | } else { 135 | tl2.to(".checkbox-fill", { top: "100%" }); 136 | tl2.fromTo( 137 | tickMarkPath, 138 | { strokeDashoffset: 0 }, 139 | { strokeDashoffset: pathLength }, 140 | "<50%" 141 | ); 142 | tl2.to(".checkbox-label", { color: "#c5c5c5" }, "<"); 143 | } 144 | }); 145 | 146 | //Animating Character 147 | gsap.set("#eye", { transformOrigin: "center" }); 148 | gsap.fromTo( 149 | "#eye", 150 | { scaleY: 1 }, 151 | { 152 | scaleY: 0.3, 153 | repeat: -1, 154 | yoyo: true, 155 | repeatDelay: 0.5, 156 | ease: "Power2.easeOut", 157 | } 158 | ); 159 | gsap.fromTo( 160 | "#eyebrow", 161 | { y: 0 }, 162 | { y: -1, repeat: -1, yoyo: true, repeatDelay: 0.5, ease: "Power2.easeOut" } 163 | ); 164 | 165 | //Submit button 166 | const button = document.querySelector("button"); 167 | const tl3 = gsap.timeline({ 168 | defaults: { duration: 0.75, ease: "Power2.easeOut" }, 169 | }); 170 | 171 | button.addEventListener("click", (e) => { 172 | e.preventDefault(); 173 | tl3.to(".contact-right, .contact-left", { 174 | y: 30, 175 | opacity: 0, 176 | pointerEvents: "none", 177 | }); 178 | tl3.to("form", { scale: 0.8 }, "<"); 179 | tl3.fromTo(".submitted", { opacity: 0, y: 30 }, { opacity: 1, y: 0 }); 180 | //Hand wave 181 | gsap.set("#hand", { transformOrigin: "left" }); 182 | gsap.fromTo( 183 | "#hand", 184 | { rotation: 0, y: 0 }, 185 | { rotation: -10, y: 2, ease: "elastic(3,0.3)", duration: 2, delay: 1 } 186 | ); 187 | }); 188 | -------------------------------------------------------------------------------- /Fom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Form animation 9 | 10 | 11 | 12 |
13 | 14 |
15 |

Contact Us

16 |

Let's stay in touch.
For more information,
sign up.

17 | 18 |
19 | 20 |
21 |
22 |

Your Name

23 | 24 | 25 | 26 | 27 |
28 |
29 |

Your Email

30 | 31 | 32 | 33 | 34 |
35 |
36 |

Phone Number

37 | 38 | 39 | 40 | 41 |
42 |
43 |
44 | 45 |
46 | 47 | 55 | 56 | 57 |
58 | 59 |
60 | 61 |
62 | 70 | 71 | 76 | 81 | 86 | 91 | 96 | 101 | 106 | 111 | 116 | 121 | 126 | 131 | 136 | 141 | 146 | 151 | 152 | 157 | 162 | 169 | 176 | 183 | 190 | 195 | 196 | 201 | 206 | 211 | 216 | 221 | 226 | 231 | 236 | 241 | 246 | 251 | 258 | 264 | 269 | 274 | 279 | 284 | 289 | 294 | 299 | 304 | 309 | 310 | 311 | 319 | 320 | 321 | 322 | 323 | 324 |
325 |

Thanks for submitting.
You'll hear from us soon 👏

326 |
327 |
328 | 329 | 330 | 331 | -------------------------------------------------------------------------------- /Fom/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | font-family: "Poppins", sans-serif; 13 | background: linear-gradient(90deg, #6190e8, #a7bfe8); 14 | } 15 | 16 | form { 17 | min-height: 40vh; 18 | width: 40vw; 19 | background: white; 20 | color: #777474; 21 | border-radius: 2rem; 22 | padding: 3rem 5rem; 23 | display: flex; 24 | position: relative; 25 | } 26 | 27 | .title { 28 | color: #6391e8; 29 | } 30 | .contact-right, 31 | .contact-left { 32 | flex: 1; 33 | } 34 | .contact-right { 35 | display: flex; 36 | flex-direction: column; 37 | justify-content: space-between; 38 | } 39 | .input { 40 | width: 100%; 41 | height: 100%; 42 | position: absolute; 43 | top: 0; 44 | border: none; 45 | outline: none; 46 | color: #777474; 47 | font-size: 0.7rem; 48 | } 49 | .input-container { 50 | position: relative; 51 | } 52 | .placeholder { 53 | position: relative; 54 | z-index: 1; 55 | pointer-events: none; 56 | padding: 0.3rem 0rem; 57 | font-size: 0.6rem; 58 | opacity: 0.6; 59 | transform-origin: left; 60 | } 61 | .line-svg { 62 | position: absolute; 63 | left: 0; 64 | bottom: 0; 65 | overflow: visible; 66 | opacity: 0.8; 67 | } 68 | 69 | .checkbox-label { 70 | font-size: 0.7rem; 71 | } 72 | .promo-container { 73 | position: relative; 74 | display: flex; 75 | } 76 | .checkbox { 77 | opacity: 0; 78 | cursor: pointer; 79 | z-index: 3; 80 | } 81 | .checkbox-label { 82 | padding-left: 0.5rem; 83 | } 84 | .checkbox-container { 85 | position: relative; 86 | height: 1rem; 87 | width: 1rem; 88 | border-radius: 3px; 89 | overflow: hidden; 90 | } 91 | .checkmark, 92 | .checkbox { 93 | position: absolute; 94 | bottom: 0; 95 | left: 0; 96 | width: 100%; 97 | height: 100%; 98 | border: 2px solid #c5c5c5; 99 | } 100 | .checkbox-fill { 101 | position: absolute; 102 | background: #6190e8; 103 | width: 100%; 104 | height: 100%; 105 | top: 100%; 106 | } 107 | 108 | .tick-mark { 109 | position: absolute; 110 | top: 50%; 111 | left: 50%; 112 | transform: translate(-50%, -50%) scale(0.6); 113 | z-index: 2; 114 | } 115 | 116 | button { 117 | font-family: "Poppins" sans-serif; 118 | font-weight: 500; 119 | font-size: 0.6rem; 120 | background: #6190e8; 121 | color: white; 122 | border-radius: 0.2rem; 123 | border-style: none; 124 | padding: 0.5rem 2.5rem; 125 | cursor: pointer; 126 | margin-top: 1rem; 127 | align-self: flex-start; 128 | } 129 | 130 | #character { 131 | position: absolute; 132 | transform: scale(0.6) translate(0%, 30%); 133 | bottom: 0; 134 | left: 0; 135 | transform-origin: bottom; 136 | } 137 | 138 | .submitted { 139 | position: absolute; 140 | left: 50%; 141 | top: 50%; 142 | color: #777474; 143 | font-size: 1rem; 144 | pointer-events: none; 145 | text-align: center; 146 | transform: translate(-50%, -50%); 147 | opacity: 0; 148 | } 149 | 150 | @media screen and (max-width: 812px) { 151 | form { 152 | width: 90vw; 153 | min-height: 80vh; 154 | flex-direction: column; 155 | padding: 8rem 3rem; 156 | } 157 | .line-svg { 158 | width: 100%; 159 | } 160 | #character { 161 | transform: scale(0.4) translate(0%, 30%); 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /Fom/svg/character.svg: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 91 | 96 | 101 | 108 | 115 | 122 | 129 | 134 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 175 | 180 | 185 | 190 | 197 | 203 | 208 | 213 | 218 | 223 | 228 | 233 | 238 | 243 | 248 | 249 | 250 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | -------------------------------------------------------------------------------- /Fom/svg/elastic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Fom/svg/tick-mark.svg: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /GlowingSocialMediaIcons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Glowing icons 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /GlowingSocialMediaIcons/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body { 6 | height: 100vh; 7 | width: 100vw; 8 | background: #18191f; 9 | } 10 | .container { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | height: 100vh; 15 | width: 100vw; 16 | } 17 | #apple, 18 | #twitter, 19 | #github, 20 | #facebook { 21 | font-size: 8em; 22 | background-color: #18191f; 23 | color: #fff; 24 | box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080, 25 | 2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080, 26 | inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080, 27 | inset 2px 2px 10px #00000080; 28 | border-radius: 29px; 29 | padding: 11px 19px; 30 | margin: 0 40px; 31 | animation: animate 3s linear infinite; 32 | text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff, 33 | 0 0 200px #0072ff; 34 | } 35 | #twitter { 36 | animation-delay: 0.3s; 37 | } 38 | #facebook { 39 | animation-delay: 0.7s; 40 | } 41 | #github { 42 | animation-delay: 0.1s; 43 | } 44 | 45 | @keyframes animate { 46 | from { 47 | filter: hue-rotate(0deg); 48 | } 49 | to { 50 | filter: hue-rotate(360deg); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /Indian Flag/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Indian Flag 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 | -------------------------------------------------------------------------------- /Indian Flag/indian flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ismeet010/Magic-Of-CSS/4242fe3671e6ec39b09254533e7fd7d80e41ae55/Indian Flag/indian flag.png -------------------------------------------------------------------------------- /Indian Flag/readme.md: -------------------------------------------------------------------------------- 1 |

Indian Flag

2 | 3 | ### By [Deepak Kumar](https://github.com/dazzlerkumar) 4 | 5 | Result:
6 | 7 | 8 | 9 | 10 |
Thank You
11 | -------------------------------------------------------------------------------- /Indian Flag/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | width: 100vw; 3 | height: 100vh; 4 | margin: 0; 5 | display: grid; 6 | place-items: center; 7 | } 8 | #bg { 9 | width: 95vw; 10 | height: 90vh; 11 | padding: 2rem; 12 | display: grid; 13 | place-items: center; 14 | background-color: lavenderblush; 15 | } 16 | #flag { 17 | width: 400px; 18 | height: 300px; 19 | display: grid; 20 | grid-template-rows: 1fr 1fr 1fr; 21 | position: relative; 22 | } 23 | 24 | #flag > span:nth-child(1) { 25 | background-color: #ff9933; 26 | } 27 | #flag > span:nth-child(2) { 28 | background-color: #fff; 29 | } 30 | #flag > span:nth-child(3) { 31 | background-color: #138808; 32 | } 33 | #chakra { 34 | position: absolute; 35 | place-self: center; 36 | background-color: #000080; 37 | height: 6rem; 38 | width: 6rem; 39 | border-radius: 50%; 40 | display: grid; 41 | } 42 | #inner { 43 | position: absolute; 44 | place-self: center; 45 | z-index: 3; 46 | background-color: #fff; 47 | width: 5rem; 48 | height: 5rem; 49 | border-radius: 50%; 50 | display: grid; 51 | animation: trans 1s linear infinite; 52 | } 53 | @-webkit-keyframes trans{ 54 | 0%, 100%{ 55 | transform:rotate(0deg); 56 | } 57 | 25%{ 58 | transform:rotate(45deg); 59 | } 60 | 50%{ 61 | transform:rotate(135deg); 62 | } 63 | 75%{ 64 | transform:rotate(90deg); 65 | } 66 | 67 | 68 | 69 | } 70 | .spike { 71 | position: absolute; 72 | width: 3px; 73 | height: 5rem; 74 | background-color: #000080; 75 | } 76 | .spike:nth-child(1) { 77 | transform: rotate(255deg); 78 | place-self: center; 79 | } 80 | .spike:nth-child(2) { 81 | transform: rotate(90deg); 82 | place-self: center; 83 | } 84 | .spike:nth-child(3) { 85 | transform: rotate(105deg); 86 | place-self: center; 87 | } 88 | .spike:nth-child(4) { 89 | transform: rotate(120deg); 90 | place-self: center; 91 | } 92 | .spike:nth-child(5) { 93 | transform: rotate(135deg); 94 | place-self: center; 95 | } 96 | .spike:nth-child(6) { 97 | transform: rotate(150deg); 98 | place-self: center; 99 | } 100 | .spike:nth-child(7) { 101 | transform: rotate(165deg); 102 | place-self: center; 103 | } 104 | .spike:nth-child(8) { 105 | transform: rotate(180deg); 106 | place-self: center; 107 | } 108 | .spike:nth-child(9) { 109 | transform: rotate(195deg); 110 | place-self: center; 111 | } 112 | .spike:nth-child(10) { 113 | transform: rotate(210deg); 114 | place-self: center; 115 | } 116 | .spike:nth-child(11) { 117 | transform: rotate(225deg); 118 | place-self: center; 119 | } 120 | .spike:nth-child(12) { 121 | transform: rotate(240deg); 122 | place-self: center; 123 | } 124 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 ismeet010 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /LoginFormAnimation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Animated Login Form 6 | 7 | 8 | 9 |
10 |
11 |

Sign in

12 |
13 | 14 | Userame 15 | 16 |
17 |
18 | 19 | Password 20 | 21 |
22 |
23 | Forgot Password ? 24 | Signup 25 |
26 | 27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /LoginFormAnimation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); 2 | * 3 | { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | body 10 | { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | min-height: 100vh; 15 | flex-direction: column; 16 | background: #23242a; 17 | } 18 | .box 19 | { 20 | position: relative; 21 | width: 380px; 22 | height: 420px; 23 | background: #1c1c1c; 24 | border-radius: 8px; 25 | overflow: hidden; 26 | } 27 | .box::before 28 | { 29 | content: ''; 30 | z-index: 1; 31 | position: absolute; 32 | top: -50%; 33 | left: -50%; 34 | width: 380px; 35 | height: 420px; 36 | transform-origin: bottom right; 37 | background: linear-gradient(0deg,transparent,#45f3ff,#45f3ff); 38 | animation: animate 6s linear infinite; 39 | } 40 | .box::after 41 | { 42 | content: ''; 43 | z-index: 1; 44 | position: absolute; 45 | top: -50%; 46 | left: -50%; 47 | width: 380px; 48 | height: 420px; 49 | transform-origin: bottom right; 50 | background: linear-gradient(0deg,transparent,#45f3ff,#45f3ff); 51 | animation: animate 6s linear infinite; 52 | animation-delay: -3s; 53 | } 54 | @keyframes animate 55 | { 56 | 0% 57 | { 58 | transform: rotate(0deg); 59 | } 60 | 100% 61 | { 62 | transform: rotate(360deg); 63 | } 64 | } 65 | form 66 | { 67 | position: absolute; 68 | inset: 2px; 69 | background: #28292d; 70 | padding: 50px 40px; 71 | border-radius: 8px; 72 | z-index: 2; 73 | display: flex; 74 | flex-direction: column; 75 | } 76 | h2 77 | { 78 | color: #45f3ff; 79 | font-weight: 500; 80 | text-align: center; 81 | letter-spacing: 0.1em; 82 | } 83 | .inputBox 84 | { 85 | position: relative; 86 | width: 300px; 87 | margin-top: 35px; 88 | } 89 | .inputBox input 90 | { 91 | position: relative; 92 | width: 100%; 93 | padding: 20px 10px 10px; 94 | background: transparent; 95 | outline: none; 96 | box-shadow: none; 97 | border: none; 98 | color: #23242a; 99 | font-size: 1em; 100 | letter-spacing: 0.05em; 101 | transition: 0.5s; 102 | z-index: 10; 103 | } 104 | .inputBox span 105 | { 106 | position: absolute; 107 | left: 0; 108 | padding: 20px 0px 10px; 109 | pointer-events: none; 110 | font-size: 1em; 111 | color: #8f8f8f; 112 | letter-spacing: 0.05em; 113 | transition: 0.5s; 114 | } 115 | .inputBox input:valid ~ span, 116 | .inputBox input:focus ~ span 117 | { 118 | color: #45f3ff; 119 | transform: translateX(0px) translateY(-34px); 120 | font-size: 0.75em; 121 | } 122 | .inputBox i 123 | { 124 | position: absolute; 125 | left: 0; 126 | bottom: 0; 127 | width: 100%; 128 | height: 2px; 129 | background: #45f3ff; 130 | border-radius: 4px; 131 | overflow: hidden; 132 | transition: 0.5s; 133 | pointer-events: none; 134 | z-index: 9; 135 | } 136 | .inputBox input:valid ~ i, 137 | .inputBox input:focus ~ i 138 | { 139 | height: 44px; 140 | } 141 | .links 142 | { 143 | display: flex; 144 | justify-content: space-between; 145 | } 146 | .links a 147 | { 148 | margin: 10px 0; 149 | font-size: 0.75em; 150 | color: #8f8f8f; 151 | text-decoration: beige; 152 | } 153 | .links a:hover, 154 | .links a:nth-child(2) 155 | { 156 | color: #45f3ff; 157 | } 158 | input[type="submit"] 159 | { 160 | border: none; 161 | outline: none; 162 | padding: 11px 25px; 163 | background: #45f3ff; 164 | cursor: pointer; 165 | border-radius: 4px; 166 | font-weight: 600; 167 | width: 100px; 168 | margin-top: 10px; 169 | } 170 | input[type="submit"]:active 171 | { 172 | opacity: 0.8; 173 | } -------------------------------------------------------------------------------- /NewYork-city-animation/images/boat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ismeet010/Magic-Of-CSS/4242fe3671e6ec39b09254533e7fd7d80e41ae55/NewYork-city-animation/images/boat.png -------------------------------------------------------------------------------- /NewYork-city-animation/images/cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ismeet010/Magic-Of-CSS/4242fe3671e6ec39b09254533e7fd7d80e41ae55/NewYork-city-animation/images/cloud.png -------------------------------------------------------------------------------- /NewYork-city-animation/images/newyork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ismeet010/Magic-Of-CSS/4242fe3671e6ec39b09254533e7fd7d80e41ae55/NewYork-city-animation/images/newyork.png -------------------------------------------------------------------------------- /NewYork-city-animation/images/plane.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ismeet010/Magic-Of-CSS/4242fe3671e6ec39b09254533e7fd7d80e41ae55/NewYork-city-animation/images/plane.png -------------------------------------------------------------------------------- /NewYork-city-animation/images/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ismeet010/Magic-Of-CSS/4242fe3671e6ec39b09254533e7fd7d80e41ae55/NewYork-city-animation/images/thumbnail.png -------------------------------------------------------------------------------- /NewYork-city-animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | New york city 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /NewYork-city-animation/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | .scene{ 7 | background-color: rgb(0, 123, 255); 8 | width: 100%; 9 | height: 100vh; 10 | overflow: hidden; 11 | position: relative; 12 | } 13 | img{ 14 | position: absolute; 15 | } 16 | 17 | .city { 18 | bottom: 7px; 19 | width: 100%; 20 | height: 50%; 21 | object-fit: cover; 22 | } 23 | .cloud { 24 | 25 | animation-name: cloud-move; 26 | animation-duration: 70s; 27 | animation-iteration-count: 2; 28 | animation-direction: normal; 29 | 30 | 31 | } 32 | .cloud-1{ 33 | width: 344px; 34 | top: -3em; 35 | left: 9em; 36 | 37 | } 38 | .cloud-2{ 39 | width: 210px; 40 | top: 45px; 41 | left: 35em; 42 | } 43 | .cloud-3{ 44 | width: 163px; 45 | top: 10em; 46 | left: 60em; 47 | } 48 | .plane{ 49 | width: 300px; 50 | top: 10em; 51 | left: 2em; 52 | animation-name: plane-move; 53 | animation-duration: 20s; 54 | animation-iteration-count: infinite; 55 | animation-direction: normal; 56 | 57 | } 58 | .boat{ 59 | 60 | width: 170px; 61 | bottom: 6px; 62 | left: 70em; 63 | /* animation: boat-move 20s linear forwards; */ 64 | animation-name: boat-move; 65 | animation-duration: 20s; 66 | animation-iteration-count: infinite; 67 | animation-direction: normal; 68 | 69 | } 70 | @keyframes plane-move { 71 | to { 72 | transform: 73 | translate(70em,-150px); 74 | } 75 | } 76 | @keyframes boat-move { 77 | to { 78 | transform: 79 | translate(-70em,0px); 80 | } 81 | } 82 | @keyframes cloud-move { 83 | to { 84 | transform: 85 | translate(40em,0px); 86 | } 87 | } -------------------------------------------------------------------------------- /QuizApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Quiz 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 |
16 |

17 | 18 |
Question
19 | 20 |
21 | 22 |
23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 |
32 | 33 | 34 |
35 |
36 | 37 |
38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /QuizApp/quiz.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap'); 2 | 3 | *{ 4 | margin: 0px; 5 | padding: 0px; 6 | font-family: 'Mochiy Pop One', sans-serif; 7 | } 8 | 9 | body 10 | { 11 | background-image: linear-gradient(to right bottom, #00929f, #00ada2, #00c68d, #4edc62, #a8eb12); 12 | background-repeat: no-repeat; 13 | background-position: center; 14 | background-size: cover; 15 | } 16 | 17 | .startbtn 18 | { 19 | /* display: none; */ 20 | display: flex; 21 | margin: auto; 22 | justify-content: center; 23 | align-content: center; 24 | align-items: center; 25 | margin-top: 250px; 26 | } 27 | 28 | #start 29 | { 30 | font-size: 30px; 31 | border-radius: 15px; 32 | /* letter-spacing: 1px; */ 33 | width: 220px; 34 | height: 85px; 35 | text-decoration: none; 36 | padding: 7px; 37 | box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; 38 | border: none; 39 | box-shadow: 4px 4px rgb(199, 5, 253); 40 | background-color: rgba(0,0,124,45%); 41 | animation: btnanime 0.6s ease-out forwards; 42 | 43 | } 44 | @keyframes btnanime 45 | { 46 | 0%{transform: translateX(-300px);} 47 | 0%{opacity: 0;} 48 | 0%{background-color: white;} 49 | } 50 | #start:hover 51 | { 52 | transform: scale(1.3); 53 | } 54 | #start:active 55 | { 56 | transform: scale(0.8); 57 | transition: 0.2s; 58 | } 59 | .emptyspace 60 | { 61 | height: 300px; 62 | } 63 | .box 64 | { 65 | font-size: 20px; 66 | display: none; 67 | /* display: flex; */ 68 | flex-direction: column; 69 | margin: auto; 70 | margin-top: -190px; 71 | /* border:2px solid black; */ 72 | height: 420px; 73 | width: 345px; 74 | animation:up-to-down 0.6s ease-out forwards; 75 | background-color: white; 76 | border-radius: 20px; 77 | padding:10px; 78 | background-image: linear-gradient(to top, #e654ed, #ce44dd, #b533cc, #9e22bc, #860cac); 79 | box-shadow: 3px 3px black; 80 | } 81 | @keyframes up-to-down 82 | { 83 | 0%{transform: translateY(50px);} 84 | } 85 | 86 | .qno 87 | { 88 | justify-content: left; 89 | font-size:16px; 90 | font-weight: bold; 91 | } 92 | .question 93 | { 94 | margin-bottom: 20px; 95 | color: white; 96 | } 97 | 98 | .line 99 | { 100 | width:330px; 101 | background-color: gray; 102 | border-bottom: 2px solid white; 103 | opacity: 65%; 104 | } 105 | 106 | .options 107 | { 108 | display: flex; 109 | flex-direction: column; 110 | margin-top: 20px; 111 | } 112 | #optiona,#optionb,#optionc,#optiond 113 | { 114 | margin-bottom: 15px; 115 | padding-left: 7px; 116 | height:35px; 117 | line-height: 35px; 118 | text-align: left; 119 | border-radius: 11px; 120 | text-decoration: none; 121 | border: none; 122 | } 123 | #optiona:hover,#optionb:hover,#optionc:hover,#optiond:hover 124 | { 125 | background-color: rgb(92, 225, 243); 126 | border: 2px solid white; 127 | transform: scale(0.9); 128 | } 129 | /* #optiona:active,#optionb:active,#optionc:active,#optiond:active 130 | { 131 | transform: scale(0.9); 132 | } */ 133 | #optiona:focus,#optionb:focus,#optionc:focus,#optiond:focus 134 | { 135 | background-color: rgb(92, 225, 243); 136 | } 137 | 138 | .nav 139 | { 140 | display: flex; 141 | flex-direction: row; 142 | justify-content: space-between; 143 | } 144 | 145 | #prev,#next 146 | { 147 | margin-top: 15px; 148 | height:50px; 149 | width:50px; 150 | border-radius: 50%; 151 | box-shadow: 2px 2px black; 152 | } 153 | #prev:hover,#next:hover 154 | { 155 | transform: scale(1.1); 156 | } 157 | .arrow 158 | { 159 | height:30px; 160 | width:30px; 161 | } 162 | 163 | .resultcontainer 164 | { 165 | display: flex; 166 | font-size: 25px; 167 | color: white; 168 | justify-content: center; 169 | align-items: center; 170 | align-content: center; 171 | margin: auto; 172 | } -------------------------------------------------------------------------------- /QuizApp/quiz.js: -------------------------------------------------------------------------------- 1 | const questions=[ 2 | { 3 | question:"What is Git?", 4 | optiona:"A version control system", 5 | optionb:"A programming language", 6 | optionc:"A remote repository platform", 7 | optiond:"A nickname for Github", 8 | correct:"A version control system", 9 | }, 10 | 11 | { 12 | question:"Command to get the installed version of Git?", 13 | optiona:"gitVersion", 14 | optionb:"getGitVersion", 15 | optionc:"git help version", 16 | optiond:"git --version", 17 | correct:"git --version", 18 | }, 19 | 20 | { 21 | question:"Command to add all files to the staging area?", 22 | optiona:"git add -all", 23 | optionb:"git add -A", 24 | optionc:"git Add", 25 | optiond:"git addition", 26 | correct:"git add -A", 27 | }, 28 | 29 | { 30 | question:"Command to get the current status of the Git repository?", 31 | optiona:"--status", 32 | optionb:"git state", 33 | optionc:"git --status", 34 | optiond:"git status", 35 | correct:"git status", 36 | }, 37 | 38 | { 39 | question:"Git commit history is automatically deleted:", 40 | optiona:"Every 2 weeks", 41 | optionb:"Every month", 42 | optionc:"Every year", 43 | optiond:"Commit history is never deleted", 44 | correct:"Commit history is never deleted", 45 | } 46 | ]; 47 | 48 | let qno=document.querySelector('.qno'); 49 | 50 | let question=document.querySelector('.question'); 51 | 52 | let getoption_a=document.getElementById('optiona'); 53 | let getoption_b=document.getElementById('optionb'); 54 | let getoption_c=document.getElementById('optionc'); 55 | let getoption_d=document.getElementById('optiond'); 56 | 57 | 58 | var i=0; 59 | var count=0; 60 | function removenadd() 61 | { 62 | document.querySelector('#start').remove(); 63 | document.querySelector('.box').style.display="flex"; 64 | 65 | 66 | let getquestion=questions[i]; 67 | 68 | qno.innerText+=" " +(i+1)+"/5"; 69 | question.innerText=getquestion.question; 70 | 71 | getoption_a.innerText=getquestion.optiona; 72 | getoption_b.innerText=getquestion.optionb; 73 | getoption_c.innerText=getquestion.optionc; 74 | getoption_d.innerText=getquestion.optiond; 75 | 76 | } 77 | 78 | function nexter() 79 | { 80 | i++; 81 | if(i<(questions.length)-1) 82 | { 83 | let getquestion=questions[i]; 84 | 85 | qno.innerText="Q " +(i+1)+"/5"; 86 | question.innerText=getquestion.question; 87 | 88 | getoption_a.innerText=getquestion.optiona; 89 | getoption_b.innerText=getquestion.optionb; 90 | getoption_c.innerText=getquestion.optionc; 91 | getoption_d.innerText=getquestion.optiond; 92 | } 93 | 94 | else if(i==(questions.length)-1) 95 | { 96 | let getquestion=questions[i]; 97 | qno.innerText="Q " +(i+1)+"/5"; 98 | question.innerText=getquestion.question; 99 | 100 | getoption_a.innerText=getquestion.optiona; 101 | getoption_b.innerText=getquestion.optionb; 102 | getoption_c.innerText=getquestion.optionc; 103 | getoption_d.innerText=getquestion.optiond; 104 | 105 | document.getElementById('next').style.borderRadius="10px"; 106 | document.getElementById('next').style.width="60px"; 107 | document.getElementById('next').innerText="Submit"; 108 | } 109 | else if(i>(questions.length)-1) 110 | { 111 | document.querySelector('.box').innerHTML=""; 112 | document.querySelector('.box').innerHTML+=`
113 | You Scored  ${count}  points!!! 114 |
`; 115 | } 116 | 117 | } 118 | 119 | function previous() 120 | { 121 | document.getElementById('next').innerText="Next"; 122 | i-=2; 123 | nexter(); 124 | } 125 | 126 | 127 | function clickedA() 128 | { 129 | console.log("clicked a"); 130 | 131 | if(questions[i].correct==getoption_a.innerText) 132 | { 133 | count++; 134 | console.log("correct"); 135 | } 136 | else 137 | { 138 | console.log("false"); 139 | } 140 | } 141 | 142 | function clickedB() 143 | { 144 | console.log("clicked b"); 145 | 146 | if(questions[i].correct==getoption_b.innerText) 147 | { 148 | count++; 149 | console.log("correct"); 150 | } 151 | else 152 | { 153 | console.log("false"); 154 | } 155 | } 156 | 157 | function clickedC() 158 | { 159 | if(questions[i].correct==getoption_c.innerText) 160 | { 161 | count++; 162 | console.log("correct") 163 | } 164 | else 165 | { 166 | console.log("false"); 167 | } 168 | } 169 | 170 | function clickedD() 171 | { 172 | console.log("clicked d"); 173 | 174 | if(questions[i].correct==getoption_d.innerText) 175 | { 176 | count++; 177 | console.log("correct") 178 | } 179 | else 180 | { 181 | console.log("false"); 182 | } 183 | } 184 | 185 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## This repo is partcipating in the [Hacktoberfest](https://hacktoberfest.com/) 2022. 2 | 3 | ![](https://pbs.twimg.com/card_img/1573381706404564995/VQLma1S-?format=jpg&name=4096x4096) 4 | 5 | # Magic Of CSS 6 | 7 | 8 | GitHub repo size 9 | 10 | Json-Generator 11 | 12 |

13 | forks 14 |

15 | 16 | **😎😎All Noobs and pro PR's Are Welcome 😎😎**
17 | 18 | ### This repository aims to help code beginners with their first successful pull request and open source contribution. :partying_face: 19 | 20 | This is a beginner-friendly repo, where you can be as much creative as you can with **HTML, CSS and JS.** 21 | 22 | ## Want to contribute? 23 | Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**. 24 | - Take a look at [`contributing guidelines`](Contributing.md). 25 | - Refer [GitHub Flow](https://guides.github.com/introduction/flow). 26 | 27 | ## Contributors ✨ 28 | 29 | **Thanks to these wonderful people ❤️** 30 | 31 |
32 |
33 | 34 | 35 | 36 |
37 | 38 |
39 |
40 |
41 |
© Magic-Of-CSS 2022 42 |
43 | All Rights Reserved
44 | -------------------------------------------------------------------------------- /Ring wave animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ring Animation 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /Ring wave animation/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | min-height: 100vh; 10 | background: #020024; 11 | } 12 | .loader { 13 | position: relative; 14 | width: 300px; 15 | height: 300px; 16 | transform-style: preserve-3d; 17 | transform: perspective(500px) rotateX(60deg); 18 | } 19 | .loader span { 20 | position: absolute; 21 | display: block; 22 | border: 2px solid #fff; 23 | 24 | box-sizing: border-box; 25 | border-radius: 50%; 26 | animation: animate 3s ease-in-out infinite; 27 | margin: 50px; 28 | } 29 | 30 | @keyframes animate { 31 | 0%, 32 | 100% { 33 | transform: translateZ(-100px); 34 | } 35 | 50% { 36 | transform: translateZ(100px); 37 | } 38 | } 39 | .loader span:nth-child(1) { 40 | top: 0; 41 | left: 0; 42 | bottom: 0; 43 | right: 0; 44 | animation-delay: 1.4s; 45 | } 46 | .loader span:nth-child(2) { 47 | top: 10px; 48 | left: 10px; 49 | bottom: 10px; 50 | right: 10px; 51 | animation-delay: 1.3s; 52 | } 53 | .loader span:nth-child(3) { 54 | top: 20px; 55 | left: 20px; 56 | bottom: 20px; 57 | right: 20px; 58 | animation-delay: 1.2s; 59 | } 60 | .loader span:nth-child(4) { 61 | top: 30px; 62 | left: 30px; 63 | bottom: 30px; 64 | right: 30px; 65 | animation-delay: 1.1s; 66 | } 67 | .loader span:nth-child(5) { 68 | top: 40px; 69 | left: 40px; 70 | bottom: 40px; 71 | right: 40px; 72 | animation-delay: 1s; 73 | } 74 | .loader span:nth-child(6) { 75 | top: 50px; 76 | left: 50px; 77 | bottom: 50px; 78 | right: 50px; 79 | animation-delay: 0.9s; 80 | } 81 | .loader span:nth-child(7) { 82 | top: 60px; 83 | left: 60px; 84 | bottom: 60px; 85 | right: 60px; 86 | animation-delay: 0.8s; 87 | } 88 | .loader span:nth-child(8) { 89 | top: 70px; 90 | left: 70px; 91 | bottom: 70px; 92 | right: 70px; 93 | animation-delay: 0.7s; 94 | } 95 | .loader span:nth-child(9) { 96 | top: 80px; 97 | left: 80px; 98 | bottom: 80px; 99 | right: 80px; 100 | animation-delay: 0.6s; 101 | } 102 | .loader span:nth-child(10) { 103 | top: 90px; 104 | left: 90px; 105 | bottom: 90px; 106 | right: 90px; 107 | animation-delay: 0.5s; 108 | } 109 | .loader span:nth-child(11) { 110 | top: 100px; 111 | left: 100px; 112 | bottom: 100px; 113 | right: 100px; 114 | animation-delay: 0.4s; 115 | } 116 | .loader span:nth-child(12) { 117 | top: 110px; 118 | left: 110px; 119 | bottom: 110px; 120 | right: 110px; 121 | animation-delay: 0.3s; 122 | } 123 | .loader span:nth-child(13) { 124 | top: 120px; 125 | left: 120px; 126 | bottom: 120px; 127 | right: 120px; 128 | animation-delay: 0.2s; 129 | } 130 | .loader span:nth-child(14) { 131 | top: 130px; 132 | left: 130px; 133 | bottom: 130px; 134 | right: 130px; 135 | animation-delay: 0.1s; 136 | } 137 | .loader span:nth-child(15) { 138 | top: 140px; 139 | left: 140px; 140 | bottom: 140px; 141 | right: 140px; 142 | animation-delay: 0s; 143 | } -------------------------------------------------------------------------------- /Tab-Component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Tab Component 10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 |
23 |

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live 24 | the blind texts. 25 | Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A 26 | small river named 27 | Duden flows by their place and supplies it with the necessary.

28 |
29 |
30 |

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring 31 | which I enjoy with my 32 | whole heart. I am alone, and feel the charm of existence in this spot, which was created for the 33 | bliss of souls like 34 | mine. 35 |

36 |
37 |
38 |

The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced 39 | by fox whelps. 40 | Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab 41 | quick-jived waltz. Brick quiz 42 | whangs jumpy veldt fox.

43 |
44 |
45 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis odit veritatis exercitationem 46 | molestiae quos qui! Similique ad eius a. Nihil, necessitatibus vitae.

47 |
48 |
49 |
50 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /Tab-Component/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | ::-webkit-scrollbar { 7 | display: none; 8 | } 9 | 10 | body { 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: center; 15 | align-items: center; 16 | font-family: sans-serif; 17 | background-color: rgba(209, 213, 219, 0.479); 18 | } 19 | 20 | .container { 21 | max-width: 640px; 22 | overflow: hidden; 23 | position: relative; 24 | padding: 16px 20px; 25 | width: 100%; 26 | margin: 0 20px; 27 | 28 | } 29 | 30 | .tabs { 31 | display: flex; 32 | flex-direction: row; 33 | margin: 30px 0px; 34 | gap: 20px; 35 | justify-content: center; 36 | align-items: center; 37 | width: 100%; 38 | } 39 | 40 | .btn { 41 | padding: 0.50rem 1rem; 42 | font-size: 1.5rem; 43 | font-weight: 500; 44 | cursor: pointer; 45 | border: none; 46 | border-radius: 6px; 47 | background-color: white; 48 | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); 49 | } 50 | 51 | .btn:hover { 52 | background-color: rgba(0, 0, 0, 0.001); 53 | } 54 | 55 | .btn.active { 56 | background-color: rgba(37, 100, 235, 0.98); 57 | 58 | color: white; 59 | } 60 | 61 | .section { 62 | max-width: 640px; 63 | background-color: rgb(255, 255, 255); 64 | border-radius: 8px; 65 | box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); 66 | 67 | } 68 | 69 | .content.active { 70 | padding: 2rem; 71 | display: block; 72 | } 73 | 74 | h2 { 75 | font-size: 2rem; 76 | font-weight: 600; 77 | opacity: 0.8; 78 | margin: 4px 0; 79 | } 80 | 81 | p { 82 | font-size: 1.2rem; 83 | letter-spacing: 0.2px; 84 | line-height: 1.4; 85 | font-weight: 400; 86 | } 87 | 88 | .content { 89 | display: none; 90 | } 91 | 92 | @media screen and (max-width: 640px) { 93 | .container { 94 | max-width: 420px; 95 | margin: 0 10px; 96 | } 97 | 98 | .tabs { 99 | gap: 14px; 100 | } 101 | 102 | .btn { 103 | font-size: 1.2rem; 104 | } 105 | 106 | .section { 107 | max-width: 420px; 108 | } 109 | } -------------------------------------------------------------------------------- /Text Water Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Water in Text 8 | 9 | 10 | 11 |
12 |

DEVELOPER

13 |

DEVELOPER

14 |
15 | 16 | -------------------------------------------------------------------------------- /Text Water Effect/style.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | margin : 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | background: #d9dee3; 13 | height: 100vh; 14 | } 15 | .main { 16 | position: relative; 17 | } 18 | 19 | h1 { 20 | position: absolute; 21 | color: #fff; 22 | font-size: 8em; 23 | transform: translate(-50%, -50% ); 24 | } 25 | h1:nth-child(1) { 26 | color: transparent; 27 | -webkit-text-stroke: 2px #43545c; 28 | } 29 | h1:nth-child(2) { 30 | color: #38a0cf; 31 | animation: water 4s ease-in-out infinite; 32 | } 33 | 34 | @keyframes water { 35 | 0%, 100% { 36 | clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 85% 59%, 100% 52%, 100% 100%, 0% 100%); 37 | } 38 | 50%{ 39 | clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); 40 | } 41 | } -------------------------------------------------------------------------------- /Typing effects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

This is the heading.

17 |

This the subtitle.

18 | 19 | 20 | -------------------------------------------------------------------------------- /Typing effects/styles.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --bg-color:hsl(49 37% 94%); 3 | --typing-speed:4s; 4 | --char:18; 5 | } 6 | 7 | body{ 8 | margin: 0; 9 | font-family: "Source Code Pro",sans-serif; 10 | min-height: 100vh; 11 | place-content: center; 12 | display: grid; 13 | text-align: center; 14 | background-color: var(--bg-color); 15 | } 16 | 17 | h1{ 18 | font-size: clamp(1rem ,3vw + 1rem,4rem); 19 | color: teal; 20 | position: relative; 21 | font-family: "Source Code Pro",monospace; 22 | position: relative; 23 | width: max-content; 24 | } 25 | 26 | h1::before, 27 | h1::after{ 28 | content: ''; 29 | position: absolute; 30 | top: 0; 31 | left: 0; 32 | bottom: 0; 33 | right: 0; 34 | } 35 | 36 | h1::before{ 37 | background-color: var(--bg-color); 38 | animation: 39 | typewrite var(--typing-speed) steps(var(--char)) 1s forwards; 40 | } 41 | 42 | h1::after{ 43 | width: 0.125em; 44 | background-color: rgb(15, 15, 16); 45 | animation: typewrite var(--typing-speed) steps(var(--char)) 1s forwards, 46 | blink 750ms steps(18) infinite; 47 | } 48 | 49 | @keyframes typewrite{ 50 | to{ 51 | left:100%; 52 | } 53 | } 54 | 55 | @keyframes blink{ 56 | to{ 57 | background-color: transparent; 58 | } 59 | } 60 | .sub{ 61 | color:rgba(0, 0, 0, 0.916); 62 | font-size: 1rem; 63 | font-weight: 400; 64 | opacity: 0; 65 | transform: translateY(3rem); 66 | animation: fadeInUp 6s linear var(--typing-speed) forwards; 67 | } 68 | 69 | @keyframes fadeInUp{ 70 | to{ 71 | opacity: 1; 72 | transform: translateY(0); 73 | } 74 | } -------------------------------------------------------------------------------- /Wires pull SVG loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - Simple SVG loader 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Wires pull SVG loader/script.js: -------------------------------------------------------------------------------- 1 | const paths = document.querySelectorAll(".path"); 2 | const loader = document.getElementById("loader"); 3 | let removeTime = 1; //in seconds 4 | 5 | paths.forEach((path) =>{ 6 | let totalLen = path.getTotalLength(); 7 | let pathElement = path; 8 | pathElement.setAttribute("stroke-dasharray", totalLen); 9 | pathElement.setAttribute("stroke-dashoffset", totalLen); 10 | }); 11 | 12 | let p = document.getElementById("main"); 13 | 14 | //after animation end remove lines 15 | main.addEventListener('animationend', () => { 16 | loader.style.transition= `all ${removeTime}s` 17 | 18 | //optional if you want to remove the clip path 19 | 20 | /* paths.forEach((path) =>{ 21 | let totalLen = path.getTotalLength(); 22 | let pathElement = path; 23 | pathElement.style.transition = `all ${removeTime}s`; 24 | pathElement.setAttribute("stroke-dasharray", ` 0 ${totalLen}`); 25 | pathElement.style.opacity= 0; 26 | }); */ 27 | 28 | loader.style.clipPath = "polygon(0 0, -10% 50%, 0 100%, 0 100%, 0 0)" 29 | }); -------------------------------------------------------------------------------- /Wires pull SVG loader/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | } 4 | 5 | #loader { 6 | z-index: 99; 7 | background: #ebe1dd; 8 | display: grid; 9 | place-items: center; 10 | height: 100vh; 11 | clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0 0); 12 | } 13 | #loader .path { 14 | fill: none; 15 | stroke-linecap: round; 16 | stroke-linejoin: round; 17 | stroke-width: 15px; 18 | } 19 | #loader #main { 20 | animation: line 2s; 21 | animation-delay: 0.5s; 22 | animation-timing-function: easeout; 23 | animation-fill-mode: forwards; 24 | stroke: #803549; 25 | } 26 | #loader #shadow { 27 | animation: line 2s; 28 | transition-delay: 0.5s; 29 | animation-timing-function: easeout; 30 | animation-fill-mode: forwards; 31 | stroke: #f7514c; 32 | } 33 | 34 | @keyframes line { 35 | 100% { 36 | stroke-dashoffset: 0; 37 | } 38 | } -------------------------------------------------------------------------------- /changing emoji rating/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Changing Emoji Rating 9 | 10 | 11 |
12 | 13 | 19 | 20 |
21 | 22 | 89 | -------------------------------------------------------------------------------- /changing emoji rating/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | border: 0; 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | :root { 8 | --hue: 223; 9 | --white: hsl(var(--hue),10%,100%); 10 | --lt-gray: hsl(var(--hue),10%,95%); 11 | --gray1: hsl(var(--hue),10%,90%); 12 | --gray2: hsl(var(--hue),10%,80%); 13 | --gray7: hsl(var(--hue),10%,30%); 14 | --gray9: hsl(var(--hue),10%,10%); 15 | --primary: hsl(var(--hue),90%,55%); 16 | --trans-dur: 0.3s; 17 | font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); 18 | } 19 | body, 20 | input { 21 | font: 1em/1.5 "DM Sans", sans-serif; 22 | } 23 | body { 24 | background-image: linear-gradient(to right,#ad4714 30%,#3b0979 56%,#cd00ff 92%); 25 | color: var(--gray9); 26 | height: 100vh; 27 | display: grid; 28 | place-items: center; 29 | transition: 30 | background-color var(--trans-dur), 31 | color var(--trans-dur); 32 | } 33 | 34 | /* Main styles */ 35 | .fr { 36 | animation: fade-slide-in 0.6s ease-out; 37 | padding: 0 1.5em; 38 | max-width: 20em; 39 | } 40 | .fr__face { 41 | --face-hue1: 60; 42 | --face-hue2: 30; 43 | background-image: 44 | linear-gradient( 45 | 135deg, 46 | hsl(var(--face-hue1),90%,55%), 47 | hsl(var(--face-hue2),90%,45%) 48 | ); 49 | border-radius: 50%; 50 | box-shadow: 0 0.5em 0.75em hsla(var(--face-hue2),90%,55%,0.3); 51 | margin: 0 auto 2em; 52 | position: relative; 53 | width: 3em; 54 | height: 3em; 55 | } 56 | .fr__face-right-eye, 57 | .fr__face-left-eye, 58 | .fr__face-mouth-lower, 59 | .fr__face-mouth-upper { 60 | position: absolute; 61 | transition: 62 | background-color var(--trans-dur), 63 | box-shadow var(--trans-dur), 64 | color var(--trans-dur); 65 | } 66 | .fr__face-right-eye, 67 | .fr__face-left-eye { 68 | background-color: var(--white); 69 | border-radius: 50%; 70 | top: 0.75em; 71 | width: 0.6em; 72 | height: 0.6em; 73 | } 74 | .fr__face-right-eye { 75 | --delay-right: 0s; 76 | animation: right-eye 1s var(--delay-right) linear paused; 77 | clip-path: polygon(0 75%,100% 0,100% 100%,0 100%); 78 | left: 0.6em; 79 | } 80 | .fr__face-left-eye { 81 | --delay-left: 0s; 82 | animation: left-eye 1s var(--delay-left) linear paused; 83 | clip-path: polygon(0 0,100% 75%,100% 100%,0 100%); 84 | right: 0.6em; 85 | } 86 | .fr__face-mouth-lower, 87 | .fr__face-mouth-upper { 88 | color: var(--white); 89 | top: 1.75em; 90 | left: 0.75em; 91 | width: 1.5em; 92 | height: 0.75em; 93 | } 94 | .fr__face-mouth-lower { 95 | --delay-mouth-lower: 0s; 96 | animation: mouth-lower 1s var(--delay-mouth-lower) linear paused; 97 | border-radius: 50% 50% 0 0 / 100% 100% 0 0; 98 | box-shadow: 0 0.125em 0 inset; 99 | } 100 | .fr__face-mouth-upper { 101 | --delay-mouth-upper: 0s; 102 | animation: mouth-upper 1s var(--delay-mouth-upper) linear paused; 103 | border-radius: 0 0 50% 50% / 0 0 100% 100%; 104 | box-shadow: 0 -0.125em 0 inset; 105 | } 106 | .fr__label { 107 | display: block; 108 | margin-bottom: 1.5em; 109 | text-align: center; 110 | } 111 | .fr__input { 112 | --input-hue: 60; 113 | --percent: 50%; 114 | background-color: var(--gray1); 115 | background-image: linear-gradient(hsl(var(--input-hue),90%,45%),hsl(var(--input-hue),90%,45%)); 116 | background-size: var(--percent) 100%; 117 | background-repeat: no-repeat; 118 | border-radius: 0.25em; 119 | display: block; 120 | margin: 0.5em auto; 121 | width: 100%; 122 | max-width: 10em; 123 | height: 0.5em; 124 | transition: background-color var(--trans-dur); 125 | -webkit-appearance: none; 126 | appearance: none; 127 | -webkit-tap-highlight-color: transparent; 128 | } 129 | .fr__input:focus { 130 | outline: transparent; 131 | } 132 | 133 | /* WebKit */ 134 | .fr__input::-webkit-slider-thumb { 135 | background-color: var(--white); 136 | border: 0; 137 | border-radius: 50%; 138 | box-shadow: 0 0.125em 0.5em hsl(0,0%,0%,0.3); 139 | width: 1.5em; 140 | height: 1.5em; 141 | transition: background-color 0.15s linear; 142 | -webkit-appearance: none; 143 | appearance: none; 144 | } 145 | .fr__input:focus::-webkit-slider-thumb, 146 | .fr__input::-webkit-slider-thumb:hover { 147 | background-color: var(--lt-gray); 148 | } 149 | 150 | /* Firefox */ 151 | .fr__input::-moz-range-thumb { 152 | background-color: var(--white); 153 | border: 0; 154 | border-radius: 50%; 155 | box-shadow: 0 0.125em 0.5em hsl(0,0%,0%,0.3); 156 | width: 1.5em; 157 | height: 1.5em; 158 | transition: background-color 0.15s linear; 159 | } 160 | .fr__input:focus::-moz-range-thumb, 161 | .fr__input::-moz-range-thumb:hover { 162 | background-color: var(--lt-gray); 163 | } 164 | 165 | /* `:focus-visible` support */ 166 | @supports selector(:focus-visible) { 167 | .fr__input:focus::-webkit-slider-thumb { 168 | background-color: var(--white); 169 | } 170 | .fr__input:focus-visible::-webkit-slider-thumb, 171 | .fr__input::-webkit-slider-thumb:hover { 172 | background-color: var(--lt-gray); 173 | } 174 | .fr__input:focus::-moz-range-thumb { 175 | background-color: var(--white); 176 | } 177 | .fr__input:focus-visible::-moz-range-thumb, 178 | .fr__input::-moz-range-thumb:hover { 179 | background-color: var(--lt-gray); 180 | } 181 | } 182 | 183 | /* Dark theme */ 184 | @media (prefers-color-scheme: dark) { 185 | body { 186 | background-color: var(--gray9); 187 | color: var(--gray1); 188 | } 189 | .fr__face-right-eye, 190 | .fr__face-left-eye { 191 | background-color: var(--gray9); 192 | } 193 | .fr__face-mouth-lower, 194 | .fr__face-mouth-upper { 195 | color: var(--gray9); 196 | } 197 | .fr__input { 198 | background-color: var(--gray7); 199 | } 200 | } 201 | 202 | /* Animations */ 203 | @keyframes fade-slide-in { 204 | from, 205 | 16.67% { 206 | opacity: 0; 207 | transform: translateY(25%); 208 | } 209 | to { 210 | opacity: 1; 211 | transform: translateY(0); 212 | } 213 | } 214 | @keyframes right-eye { 215 | from { clip-path: polygon(0 75%,100% 0,100% 100%,0 100%); } 216 | 50%, to { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } 217 | } 218 | @keyframes left-eye { 219 | from { clip-path: polygon(0 0,100% 75%,100% 100%,0 100%); } 220 | 50%, to { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } 221 | } 222 | @keyframes mouth-lower { 223 | from { 224 | border-radius: 50% 50% 0 0 / 100% 100% 0 0; 225 | top: 1.75em; 226 | height: 0.75em; 227 | visibility: visible; 228 | } 229 | 40% { 230 | border-radius: 50% 50% 0 0 / 100% 100% 0 0; 231 | top: 1.95em; 232 | height: 0.25em; 233 | visibility: visible; 234 | } 235 | 50%, 236 | to { 237 | border-radius: 0; 238 | top: 2em; 239 | height: 0.125em; 240 | visibility: hidden; 241 | } 242 | } 243 | @keyframes mouth-upper { 244 | from, 245 | 50% { 246 | border-radius: 0; 247 | box-shadow: 0 -0.125em 0 inset; 248 | top: 2em; 249 | height: 0.125em; 250 | visibility: hidden; 251 | } 252 | 62.5% { 253 | border-radius: 0 0 50% 50% / 0 0 100% 100%; 254 | box-shadow: 0 -0.125em 0 inset; 255 | top: 1.95em; 256 | height: 0.25em; 257 | visibility: visible; 258 | } 259 | 75% { 260 | border-radius: 0 0 50% 50% / 0 0 100% 100%; 261 | box-shadow: 0 -0.125em 0 inset; 262 | top: 1.825em; 263 | height: 0.5em; 264 | visibility: visible; 265 | } 266 | to { 267 | border-radius: 0 0 50% 50% / 0 0 100% 100%; 268 | box-shadow: 0 -0.8em 0 inset; 269 | top: 1.75em; 270 | height: 0.75em; 271 | visibility: visible; 272 | } 273 | } -------------------------------------------------------------------------------- /click_counter/counter.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT&display=swap'); 2 | 3 | *{ 4 | margin:0rem; 5 | padding:0rem; 6 | font-family: 'Old Standard TT', serif; 7 | } 8 | 9 | html 10 | { 11 | font-size: 62.5%; 12 | } 13 | body 14 | { 15 | height: 100%; 16 | } 17 | 18 | body 19 | { 20 | background-image: url('https://img.freepik.com/free-vector/realistic-studio-lights-empty-background-design_1017-27233.jpg?w=2000'); 21 | background-size: cover; 22 | background-repeat: no-repeat; 23 | 24 | } 25 | 26 | .container 27 | { 28 | background-color: rgb(255, 253, 196); 29 | border-radius: 2rem; 30 | padding:1.5rem; 31 | margin: auto; 32 | display:flex; 33 | flex-direction: column; 34 | /* margin-left:424rem; */ 35 | height:30rem; 36 | width:30rem; 37 | text-align: center; 38 | margin-top: 17rem; 39 | box-shadow: rgba(0, 0, 0, 0.35) 0rem .5rem 1.5rem; 40 | } 41 | 42 | h1 43 | { 44 | font-size: 3.6rem; 45 | text-align: center; 46 | margin-bottom:4.5rem; 47 | color: blue; 48 | } 49 | 50 | #count 51 | { 52 | font-size: 6.0rem; 53 | margin-bottom:4.0rem; 54 | } 55 | 56 | .row 57 | { 58 | display:flex; 59 | flex-direction:row; 60 | justify-content: space-around; 61 | } 62 | 63 | #b1,#b2,#b3 64 | { 65 | font-size: 2.0rem; 66 | padding:.6rem; 67 | border-radius: .5rem; 68 | } 69 | #b1 70 | { 71 | background-color: green; 72 | } 73 | #b1:hover 74 | { 75 | background-color: rgb(13, 226, 13); 76 | transform: scale(1.1); 77 | } 78 | #b2 79 | { 80 | background-color: rgb(205, 205, 7); 81 | } 82 | #b2:hover 83 | { 84 | background-color: yellow; 85 | transform: scale(1.1); 86 | } 87 | #b3 88 | { 89 | background-color: red; 90 | } 91 | #b3:hover 92 | { 93 | background-color: rgb(240, 100, 100); 94 | transform: scale(1.1); 95 | } 96 | 97 | #history 98 | { 99 | display: flex; 100 | padding-left: 2rem; 101 | margin-top: 3rem; 102 | font-size: 1.7rem; 103 | font-weight: bold; 104 | } 105 | 106 | 107 | 108 | @media (max-width:750px) 109 | { 110 | html 111 | { 112 | font-size: 50%; 113 | } 114 | } 115 | 116 | @media (max-width:590px) 117 | { 118 | html 119 | { 120 | font-size: 45%; 121 | } 122 | } 123 | 124 | @media (max-width:530px) 125 | { 126 | html 127 | { 128 | font-size: 30%; 129 | } 130 | } -------------------------------------------------------------------------------- /click_counter/counter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Counter 8 | 9 | 10 | 11 | 12 |
13 |

Click Counter :

14 | 15 |
16 | 0 17 |
18 | 19 |
20 | 21 | 22 | 23 |
24 | 25 |
26 | 27 |
28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /click_counter/counter.js: -------------------------------------------------------------------------------- 1 | var count = 0; 2 | var countit = document.getElementById('count'); 3 | 4 | function funincrement() { 5 | count++; 6 | if (count > 0) { 7 | countit.style.color = "green"; 8 | } 9 | if (count == 0) { 10 | countit.style.color = "black"; 11 | } 12 | countit.innerText = count; 13 | } 14 | 15 | function fundecrement() { 16 | count--; 17 | if (count < 0) { 18 | countit.style.color = "red"; 19 | } 20 | countit.innerText = count; 21 | } 22 | 23 | function funsave() { 24 | document.getElementById('history').innerHTML += count + " -> "; 25 | } -------------------------------------------------------------------------------- /css-loaders-tutorial-starter-files/README.md: -------------------------------------------------------------------------------- 1 | spinner animation 2 | using css -------------------------------------------------------------------------------- /css-loaders-tutorial-starter-files/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Loaders 6 | 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /css-loaders-tutorial-starter-files/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | max-width: 960px; 3 | margin: 200px auto; 4 | display: flex; 5 | justify-content: space-around; 6 | } 7 | 8 | .spinner{ 9 | width: 100px; 10 | height: 100px; 11 | position: relative; 12 | } 13 | 14 | .spinner div { 15 | box-sizing: border-box; 16 | position: absolute; 17 | width: 100%; 18 | height: 100%; 19 | border: 8px solid transparent; 20 | border-top-color: #ad60f5; 21 | border-radius: 50%; 22 | animation: spinnerOne 1.2s linear infinite; 23 | } 24 | 25 | .spinner div:nth-child(2) { 26 | border: 8px solid transparent; 27 | border-bottom-color: #ad60f5; 28 | animation: spinnerTwo 1.2s linear infinite; 29 | } 30 | 31 | @keyframes spinnerOne { 32 | 0% { transform: rotate(0deg); border-width: 10px;} 33 | 50% { transform: rotate(180deg); border-width: 1px;} 34 | 100% { transform: rotate(360deg); border-width: 10px;} 35 | } 36 | 37 | @keyframes spinnerTwo { 38 | 0% { transform: rotate(0deg); border-width: 1px;} 39 | 50% { transform: rotate(180deg); border-width: 10px;} 40 | 100% { transform: rotate(360deg); border-width: 1px;} 41 | } 42 | 43 | /* spinner */ 44 | 45 | /* bouncing balls */ 46 | 47 | /* flipping squares */ 48 | -------------------------------------------------------------------------------- /happy-toggle/happy.css: -------------------------------------------------------------------------------- 1 | *, *::before, *::after { box-sizing: border-box; } 2 | :root { font-size: 62.5%; } 3 | 4 | 5 | body { 6 | 7 | display: flex; flex-direction: column; 8 | align-items: center; justify-content: center; 9 | 10 | margin: 0; padding: 0; 11 | width: 100%; height: 100vh; 12 | 13 | background: #FAFAFC; 14 | 15 | font: 300 normal 1.5rem/1.6 sans-serif; 16 | color: #303035; 17 | 18 | } 19 | 20 | 21 | 22 | .toggle { display: none; } 23 | 24 | .toggle + label { 25 | 26 | position: relative; 27 | width: 18rem; height: 9rem; 28 | 29 | border-radius: 4.5rem; 30 | background: linear-gradient(to right, #BADC58 0%, #BADC58 33%, #E1E1E6 66%, #E1E1E6 100%); 31 | background-size: 300%; background-position: right; 32 | 33 | transition: all 500ms ease-in-out; 34 | 35 | } 36 | 37 | 38 | .toggle + label .head { 39 | 40 | position: absolute; 41 | top: 1.5rem; left: 1.5rem; 42 | 43 | width: 6rem; height: 6rem; 44 | 45 | border-radius: 50%; 46 | box-shadow: 0 0.5rem 2rem 0 rgba(11, 14, 18, 0.1); 47 | background: #FAFAFA; 48 | background-size: 300%; background-position: right; 49 | 50 | transition: all 500ms ease-in-out; 51 | 52 | } 53 | 54 | 55 | .toggle + label .head .face { 56 | 57 | position: absolute; 58 | top: 0; left: 0; 59 | 60 | width: 6rem; height: 6rem; 61 | 62 | border-radius: 50%; 63 | 64 | transform: rotate(0); -webkit-transform: rotate(0); 65 | 66 | transition: -webkit-transform 500ms ease-in-out; 67 | transition: transform 500ms ease-in-out; 68 | transition: transform 500ms ease-in-out, 69 | -webkit-transform 500ms ease-in-out; 70 | 71 | } 72 | 73 | 74 | .toggle + label .head .face .eye { 75 | 76 | position: absolute; 77 | top: 40%; 78 | 79 | width: .6rem; height: .6rem; 80 | 81 | border-radius: 50%; 82 | background: #303035; 83 | 84 | content: ''; 85 | 86 | } 87 | 88 | .toggle + label .head .face .eye.left { left: 20%; } 89 | .toggle + label .head .face .eye.right { right: 20%; } 90 | 91 | 92 | .toggle + label .head .face .mouth { 93 | 94 | position: absolute; 95 | bottom: 30%; left: 50%; 96 | 97 | width: 1.5rem; height: 1rem; 98 | 99 | border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 30%; border-bottom-right-radius: 30%; 100 | background: #303035; 101 | 102 | transform: translateX(-50%); -webkit-transform: translateX(-50%); 103 | overflow: hidden; 104 | 105 | transition: -webkit-transform 200ms ease-in-out; 106 | transition: transform 200ms ease-in-out; 107 | transition: transform 200ms ease-in-out, 108 | -webkit-transform 200ms ease-in-out; 109 | transition-delay: 150ms; 110 | 111 | } 112 | 113 | 114 | .toggle + label .head .face .mouth::after { 115 | 116 | position: absolute; 117 | bottom: 0; left: 50%; 118 | 119 | width: 1.5rem; height: .8rem; 120 | 121 | border-radius: 50%; 122 | background: pink; 123 | 124 | transform: translate(-50%, 50%); -webkit-transform: translate(-50%, 50%); 125 | transition: -webkit-transform 200ms ease-in-out; 126 | transition: transform 200ms ease-in-out; 127 | transition: transform 200ms ease-in-out, 128 | -webkit-transform 200ms ease-in-out; 129 | transition-delay: 150ms; 130 | 131 | content: ''; 132 | 133 | } 134 | 135 | 136 | 137 | .toggle:checked + label { background-position: left; } 138 | 139 | .toggle:checked + label .head { transform: translateX(9rem); -webkit-transform: translateX(9rem); } 140 | .toggle:checked + label .head .face { transform: rotate(360deg); -webkit-transform: rotate(360deg); } 141 | .toggle:checked + label .head .face .mouth { transform: translateX(-50%) rotate(180deg); -webkit-transform: translateX(-50%) rotate(180deg); } 142 | .toggle:checked + label .head .face .mouth::after { transform: translate(-50%, -80%); -webkit-transform: translate(-50%, -80%); } 143 | -------------------------------------------------------------------------------- /happy-toggle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Happiness Toggle 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /hover_color_animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hover Animation 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /hover_color_animation/script.js: -------------------------------------------------------------------------------- 1 | const blueBtn = document.getElementById('blue'); 2 | const redBtn = document.getElementById('red'); 3 | const greenBtn = document.getElementById('green'); 4 | const yellowBtn = document.getElementById('yellow'); 5 | const purpleBtn = document.getElementById('purple'); 6 | const resetBtn = document.getElementById('reset'); 7 | 8 | resetBtn.addEventListener('click', () => { 9 | document.body.style.backgroundColor = 'white'; 10 | }) 11 | blueBtn.addEventListener('mouseover', () => { 12 | document.body.style.backgroundColor = 'blue'; 13 | }); 14 | redBtn.addEventListener('mouseover', () => { 15 | document.body.style.backgroundColor = 'red'; 16 | }); 17 | greenBtn.addEventListener('mouseover', () => { 18 | document.body.style.backgroundColor = 'green'; 19 | }); 20 | yellowBtn.addEventListener('mouseover', () => { 21 | document.body.style.backgroundColor = 'yellow'; 22 | }); 23 | purpleBtn.addEventListener('mouseover', () => { 24 | document.body.style.backgroundColor = 'purple'; 25 | }); 26 | -------------------------------------------------------------------------------- /hover_color_animation/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 90vh; 3 | display: flex; 4 | gap: 64px; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | 9 | button { 10 | outline: unset; 11 | background-color: unset; 12 | border-radius: 10px; 13 | height: 100px; 14 | width: 130px; 15 | border: none; 16 | font-size: 25px; 17 | cursor: pointer; 18 | } 19 | @keyframes color{ 20 | from {color: red;} 21 | to {color: black;} 22 | } 23 | .reset { 24 | top: 275px; 25 | left: 44vw; 26 | border: 2px solid black; 27 | font-size: 40px 28 | } 29 | .blue { 30 | background-color: blue; 31 | color: white; 32 | } 33 | .red { 34 | background-color: red; 35 | color: white; 36 | } 37 | .green { 38 | background-color: green; 39 | color: white; 40 | } 41 | .yellow { 42 | background-color: yellow; 43 | } 44 | .purple { 45 | background-color: purple; 46 | color: white; 47 | } -------------------------------------------------------------------------------- /image hover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | Document 15 | 16 | 17 |
18 |

19 | IMAGE ANIMATIONS ON HOVER 20 |

21 |
22 |
23 | img1 24 |

ZOOM IN

25 |
26 |
27 | img1 28 |

ZOOM OUT

29 |
30 |
31 | img1 32 |

BLUR

33 |
34 |
35 |
36 |
37 | img1 38 |

GRAYSCALE

39 |
40 |
41 | img1 42 |

Random

43 |

TEXT ON HOVER

44 |
45 |
46 | img1 47 |
48 |

Lorem

49 |

50 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam 51 | lorem nunc, sollicitudin a nisi sodales, imperdiet dignissim enim. 52 |

53 |
54 | 55 |

56 | TEXT BOX ON HOVER 57 |

58 |
59 |
60 |
61 |
62 | img1 63 |

FLASHING

64 |
65 |
66 | img1 67 |

BORDER

68 |
69 |
70 | img1 71 |

72 | BRIGHTEN IMAGE 73 |

74 |
75 |
76 |
77 | 82 | 87 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /image hover/style.css: -------------------------------------------------------------------------------- 1 | img { 2 | overflow: hidden; 3 | } 4 | 5 | .image1 { 6 | -webkit-transform: scale(1); 7 | transform: scale(1); 8 | -webkit-transition: 0.3s ease-in-out; 9 | transition: 0.3s ease-in-out; 10 | } 11 | .image1:hover { 12 | -webkit-transform: scale(1.1); 13 | transform: scale(1.1); 14 | } 15 | .image2:hover { 16 | -webkit-transform: scale(0.9); 17 | transform: scale(0.9); 18 | transition: 0.3s ease-in-out; 19 | } 20 | 21 | .image3:hover { 22 | -webkit-filter: blur(0); 23 | transition: 0.3s ease-in-out; 24 | filter: blur(3px); 25 | } 26 | 27 | .image4:hover { 28 | -webkit-filter: grayscale(0); 29 | transition: 0.3s ease-in-out; 30 | filter: grayscale(100%); 31 | } 32 | .cap { 33 | position: relative; 34 | } 35 | .cap .text { 36 | position: absolute; 37 | top: 50%; 38 | left: 50%; 39 | transform: translate(-50%, -50%); 40 | z-index: 10; 41 | opacity: 0; 42 | transition: all 0.8s ease; 43 | } 44 | .cap .text h1 { 45 | margin: 0; 46 | color: white; 47 | } 48 | .cap:hover .text { 49 | opacity: 1; 50 | } 51 | .cap:hover img { 52 | -webkit-filter: sepia(90%); 53 | filter: sepia(90%); 54 | } 55 | .frame { 56 | text-align: center; 57 | position: relative; 58 | cursor: pointer; 59 | perspective: 500px; 60 | } 61 | .frame .details { 62 | width: 70%; 63 | height: 70%; 64 | padding: 5% 8%; 65 | position: absolute; 66 | content: ""; 67 | top: 45%; 68 | left: 50%; 69 | transform: translate(-50%, -50%) rotateY(90deg); 70 | transform-origin: 50%; 71 | background: rgba(255, 255, 255, 0.9); 72 | opacity: 0; 73 | transition: all 0.4s ease-in; 74 | } 75 | .frame:hover .details { 76 | transform: translate(-50%, -50%) rotateY(0deg); 77 | opacity: 1; 78 | } 79 | 80 | .image7:hover { 81 | opacity: 1; 82 | -webkit-animation: flash 1.5s; 83 | animation: flash 1.5s; 84 | } 85 | @keyframes flash { 86 | 0% { 87 | opacity: 0.4; 88 | } 89 | 100% { 90 | opacity: 1; 91 | } 92 | } 93 | .image9:hover { 94 | box-shadow: 0 0 0 5px #604444; 95 | transition: 0.5s ease; 96 | } 97 | .image8 { 98 | -webkit-filter: brightness(50%); 99 | filter: brightness(50%); 100 | -webkit-transition: all 1s ease; 101 | -moz-transition: all 1s ease; 102 | -o-transition: all 1s ease; 103 | -ms-transition: all 1s ease; 104 | transition: all 1s ease; 105 | } 106 | 107 | .image8:hover { 108 | -webkit-filter: brightness(100%); 109 | filter: brightness(100%); 110 | } 111 | -------------------------------------------------------------------------------- /playlist-carousel-css-only/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Playlist Carousel - css only 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 20 | 23 | 26 |
27 |
28 |
29 |
30 | 31 | 32 | 33 | 34 |
35 |
36 | 43 | 50 | 57 |
58 |
59 |
60 | 61 |
62 |
63 |
64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /playlist-carousel-css-only/script.js: -------------------------------------------------------------------------------- 1 | $('input').on('change', function() { 2 | $('body').toggleClass('blue'); 3 | }); -------------------------------------------------------------------------------- /playlist-carousel-css-only/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap"); 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | html, body { 7 | margin: 0; 8 | padding: 0; 9 | width: 100%; 10 | height: 100%; 11 | } 12 | 13 | body { 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | padding: 30px 10px; 18 | font-family: "DM Sans", sans-serif; 19 | transition: background 0.4s ease-in; 20 | background-color: #c394f8; 21 | } 22 | body.blue { 23 | background-color: #428aa6; 24 | } 25 | 26 | input[type=radio] { 27 | display: none; 28 | } 29 | 30 | .card { 31 | position: absolute; 32 | width: 60%; 33 | height: 100%; 34 | left: 0; 35 | right: 0; 36 | margin: auto; 37 | transition: transform 0.4s ease; 38 | cursor: pointer; 39 | } 40 | 41 | .container { 42 | width: 100%; 43 | max-width: 800px; 44 | max-height: 600px; 45 | height: 100%; 46 | transform-style: preserve-3d; 47 | display: flex; 48 | justify-content: center; 49 | flex-direction: column; 50 | align-items: center; 51 | } 52 | 53 | .cards { 54 | position: relative; 55 | width: 100%; 56 | height: 100%; 57 | margin-bottom: 20px; 58 | } 59 | 60 | img { 61 | width: 100%; 62 | height: 100%; 63 | border-radius: 10px; 64 | -o-object-fit: cover; 65 | object-fit: cover; 66 | } 67 | 68 | #item-1:checked ~ .cards #song-3, #item-2:checked ~ .cards #song-1, #item-3:checked ~ .cards #song-2 { 69 | transform: translatex(-40%) scale(0.8); 70 | opacity: 0.4; 71 | z-index: 0; 72 | } 73 | 74 | #item-1:checked ~ .cards #song-2, #item-2:checked ~ .cards #song-3, #item-3:checked ~ .cards #song-1 { 75 | transform: translatex(40%) scale(0.8); 76 | opacity: 0.4; 77 | z-index: 0; 78 | } 79 | 80 | #item-1:checked ~ .cards #song-1, #item-2:checked ~ .cards #song-2, #item-3:checked ~ .cards #song-3 { 81 | transform: translatex(0) scale(1); 82 | opacity: 1; 83 | z-index: 1; 84 | } 85 | #item-1:checked ~ .cards #song-1 img, #item-2:checked ~ .cards #song-2 img, #item-3:checked ~ .cards #song-3 img { 86 | box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47); 87 | } 88 | 89 | .player { 90 | background-color: #fff; 91 | border-radius: 8px; 92 | min-width: 320px; 93 | padding: 16px 10px; 94 | } 95 | 96 | .upper-part { 97 | position: relative; 98 | display: flex; 99 | align-items: center; 100 | margin-bottom: 12px; 101 | height: 36px; 102 | overflow: hidden; 103 | } 104 | 105 | .play-icon { 106 | margin-right: 10px; 107 | } 108 | 109 | .song-info { 110 | width: calc(100% - 32px); 111 | display: block; 112 | } 113 | 114 | .song-info .title { 115 | color: #403d40; 116 | font-size: 14px; 117 | line-height: 24px; 118 | } 119 | 120 | .sub-line { 121 | display: flex; 122 | justify-content: space-between; 123 | width: 100%; 124 | } 125 | 126 | .subtitle, .time { 127 | font-size: 12px; 128 | line-height: 16px; 129 | color: #c6c5c6; 130 | } 131 | 132 | .time { 133 | font-size: 12px; 134 | line-height: 16px; 135 | color: #a5a5a5; 136 | font-weight: 500; 137 | margin-left: auto; 138 | } 139 | 140 | .progress-bar { 141 | height: 3px; 142 | width: 100%; 143 | background-color: #e9efff; 144 | border-radius: 2px; 145 | overflow: hidden; 146 | } 147 | 148 | .progress { 149 | display: block; 150 | position: relative; 151 | width: 60%; 152 | height: 100%; 153 | background-color: #2992dc; 154 | border-radius: 6px; 155 | } 156 | 157 | .info-area { 158 | width: 100%; 159 | position: absolute; 160 | top: 0; 161 | left: 30px; 162 | transition: transform 0.4s ease-in; 163 | } 164 | 165 | #item-2:checked ~ .player #test { 166 | transform: translateY(0); 167 | } 168 | 169 | #item-2:checked ~ .player #test { 170 | transform: translateY(-40px); 171 | } 172 | 173 | #item-3:checked ~ .player #test { 174 | transform: translateY(-80px); 175 | } -------------------------------------------------------------------------------- /sticker animation/index.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 6 |

Spinner created with only HTML and CSS

7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |

Spinner created with custom SVG and CSS Animation

22 |
23 | -------------------------------------------------------------------------------- /sticker animation/style.css: -------------------------------------------------------------------------------- 1 | #html-spinner{ 2 | width:40px; 3 | height:40px; 4 | border:4px solid #fcd779; 5 | border-top:4px solid white; 6 | border-radius:50%; 7 | } 8 | 9 | #html-spinner, #svg-spinner{ 10 | -webkit-transition-property: -webkit-transform; 11 | -webkit-transition-duration: 1.2s; 12 | -webkit-animation-name: rotate; 13 | -webkit-animation-iteration-count: infinite; 14 | -webkit-animation-timing-function: linear; 15 | 16 | -moz-transition-property: -moz-transform; 17 | -moz-animation-name: rotate; 18 | -moz-animation-duration: 1.2s; 19 | -moz-animation-iteration-count: infinite; 20 | -moz-animation-timing-function: linear; 21 | 22 | transition-property: transform; 23 | animation-name: rotate; 24 | animation-duration: 1.2s; 25 | animation-iteration-count: infinite; 26 | animation-timing-function: linear; 27 | } 28 | 29 | @-webkit-keyframes rotate { 30 | from {-webkit-transform: rotate(0deg);} 31 | to {-webkit-transform: rotate(360deg);} 32 | } 33 | 34 | @-moz-keyframes rotate { 35 | from {-moz-transform: rotate(0deg);} 36 | to {-moz-transform: rotate(360deg);} 37 | } 38 | 39 | @keyframes rotate { 40 | from {transform: rotate(0deg);} 41 | to {transform: rotate(360deg);} 42 | } 43 | 44 | 45 | /* Rest of page style*/ 46 | body{ 47 | background:#FABC20; 48 | font-family: 'Open Sans', sans-serif; 49 | -webkit-font-smoothing: antialiased; 50 | color:#393D3D; 51 | } 52 | 53 | #container{ 54 | width:90%; 55 | max-width:700px; 56 | margin:1em auto; 57 | position:relative; 58 | } 59 | 60 | /* spinner positioning */ 61 | 62 | #html-spinner, #svg-spinner{ 63 | position:absolute; 64 | top:80px; 65 | margin-left:-24px; 66 | } 67 | 68 | #html-spinner{ 69 | left:25%; 70 | } 71 | 72 | #svg-spinner{ 73 | left:75%; 74 | } 75 | 76 | #html-para, #svg-para{ 77 | position:absolute; 78 | top:100px; 79 | width:40%; 80 | padding:5%; 81 | text-align:center; 82 | } 83 | 84 | #svg-para{ 85 | left:50%; 86 | } -------------------------------------------------------------------------------- /terminal-text-effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | > terminal 5 |
6 | 7 | 8 | 37 | --------------------------------------------------------------------------------