├── .github └── FUNDING.yml ├── .gitignore ├── DiceRoller.py ├── LICENSE ├── README.md ├── css ├── accordion.css ├── animate.css ├── app.css ├── carousel.css └── one.css ├── images ├── github.png ├── hack.svg └── two.svg ├── index.html └── p1.jpeg /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | build/ 4 | package-lock.json 5 | .idea 6 | -------------------------------------------------------------------------------- /DiceRoller.py: -------------------------------------------------------------------------------- 1 | """ 2 | A simple dice roller which uses `random` module to generate dice rolls taking rolls 3 | and number of sides the dice has as the parameter. 4 | > dice(1, 6) 5 | // 3 ((Any random number between 1 and 6)) 6 | > dice(6, 10) 7 | // 4, 10, 4, 6, 8, 3 ((Any random number between 1 and 10 printed 6 times)) 8 | """ 9 | 10 | import random 11 | 12 | def dice(rolls, sides): 13 | for x in range(0, rolls): 14 | return random.randrange(1, sides + 1) 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Jeremiah Jacob 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hacktoberfest20 2 | 3 | 4 | 5 |

6 | GitHub issues 7 | GitHub forks 8 | GitHub stars 9 |

10 | 11 | ## IMPORTANT INSTRUCTIONS 12 | To earn your Hacktoberfest tee or tree reward, you must register and make four valid pull requests (PRs) between October 1-31 (in any time zone). PRs made before or after that won't be counted!! 13 | 14 | Visit the hactoberfest site for more details :- https://hacktoberfest.digitalocean.com 15 | 16 | 17 | ## This project is perfect for your first pull request 18 | 19 | ## Instructions 20 | 21 | - Fork this Repository using the button at the top 22 | - Clone your forked repository to your pc 23 | - Create a new branch for your modifications using either of the git commands below 24 | - `git branch new-user` and checkout to it `git checkout new-user` 25 | 26 | ***or*** 27 | 28 | - `git checkout -b new-user` to create and checkout to it at the same time) 29 | - Add your your own card quote following the previous format `index.html` 30 | - Add your quote card (`git add -A`), commit (`git commit -m "added myself"`) and push (`git push origin new-user`) 31 | - Create a pull request 32 | - Star this repository 33 | 34 | # How to make your first Pull Request 35 | 36 | Replace `` with your GitHub username in this guide. 37 | 38 | ## 1. Add your quote card to the folder 39 | 40 | Add a quote card of your choice in `index.html`. 41 | 42 | ``` 43 | index.html 44 | ``` 45 | 46 | 47 | ## 2. Wait for Pull Request to merge 48 | 49 | ## 3. Celebrate - you've done your first pull request!! 50 | -------------------------------------------------------------------------------- /css/accordion.css: -------------------------------------------------------------------------------- 1 | .card_accordion { 2 | background-color: var(--background); 3 | display: block; 4 | width: 270px; 5 | min-height: 90px; 6 | border: 3px solid var(--primary); 7 | padding: 15px; 8 | margin: 50px 0 0 100%; 9 | box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--green), 10 | 20px -20px 0 -3px var(--background), 20px -20px var(--yellow), 11 | 30px -30px 0 -3px var(--background), 30px -30px var(--orange), 12 | 40px -40px 0 -3px var(--background), 40px -40px var(--red); 13 | transition: box-shadow 1s, top 1s, left 1s; 14 | position: relative; 15 | top: 0; 16 | left: 10px; 17 | cursor: pointer; 18 | } 19 | 20 | .card:hover { 21 | top: -40px; 22 | left: 40px; 23 | box-shadow: 0 0 0 -3px var(--background), 0 0 0 0 var(--green), 24 | 0 0 0 -3px var(--background), 0 0 0 0 var(--yellow), 25 | 0 0 0 -3px var(--background), 0 0 0 0 var(--orange), 26 | 0 0 0 -3px var(--background), 0 0 0 0 var(--red); 27 | } 28 | 29 | :root { 30 | --primary: rgb(85, 91, 255); 31 | --secondary: rgb(34, 210, 160); 32 | --background: rgb(255, 255, 255); 33 | --green: rgb(31, 193, 27); 34 | --yellow: rgb(255, 217, 19); 35 | --orange: rgb(255, 156, 85); 36 | --red: rgb(255, 85, 85); 37 | } 38 | 39 | *{ 40 | padding: 0; 41 | margin: 0; 42 | box-sizing: border-box; 43 | } 44 | 45 | body { 46 | background-image: radial-gradient(var(--secondary) 30%, var(--background) 30%); 47 | background-size: 2px 3px; 48 | font-family: "Archivo", sans-serif; 49 | color: var(--primary); 50 | } 51 | 52 | .p { 53 | font-size: 10px; 54 | letter-spacing: 0.5px; 55 | margin: 20px 0; 56 | color: rgba(15, 125, 118, 1); 57 | } 58 | 59 | .t { 60 | font-size: 12px; 61 | letter-spacing: 0.5px; 62 | margin: 20px 0; 63 | color: rgb(197, 30, 128); 64 | } 65 | 66 | .card_accordion h2 { 67 | font-size: 16px; 68 | text-transform: uppercase; 69 | font-family: "Archivo Black", "Archivo", sans-serif; 70 | font-weight: normal; 71 | color: rgba(15, 125, 118, 1); 72 | } 73 | -------------------------------------------------------------------------------- /css/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | .animated { 4 | -webkit-animation-duration: 1s; 5 | animation-duration: 1s; 6 | -webkit-animation-fill-mode: both; 7 | animation-fill-mode: both; 8 | } 9 | 10 | .animated.hinge { 11 | -webkit-animation-duration: 2s; 12 | animation-duration: 2s; 13 | } 14 | 15 | @-webkit-keyframes bounce { 16 | 0%, 20%, 50%, 80%, 100% { 17 | -webkit-transform: translateY(0); 18 | transform: translateY(0); 19 | } 20 | 21 | 40% { 22 | -webkit-transform: translateY(-30px); 23 | transform: translateY(-30px); 24 | } 25 | 26 | 60% { 27 | -webkit-transform: translateY(-15px); 28 | transform: translateY(-15px); 29 | } 30 | } 31 | 32 | @keyframes bounce { 33 | 0%, 20%, 50%, 80%, 100% { 34 | -webkit-transform: translateY(0); 35 | -ms-transform: translateY(0); 36 | transform: translateY(0); 37 | } 38 | 39 | 40% { 40 | -webkit-transform: translateY(-30px); 41 | -ms-transform: translateY(-30px); 42 | transform: translateY(-30px); 43 | } 44 | 45 | 60% { 46 | -webkit-transform: translateY(-15px); 47 | -ms-transform: translateY(-15px); 48 | transform: translateY(-15px); 49 | } 50 | } 51 | 52 | .bounce { 53 | -webkit-animation-name: bounce; 54 | animation-name: bounce; 55 | } 56 | 57 | @-webkit-keyframes flash { 58 | 0%, 50%, 100% { 59 | opacity: 1; 60 | } 61 | 62 | 25%, 75% { 63 | opacity: 0; 64 | } 65 | } 66 | 67 | @keyframes flash { 68 | 0%, 50%, 100% { 69 | opacity: 1; 70 | } 71 | 72 | 25%, 75% { 73 | opacity: 0; 74 | } 75 | } 76 | 77 | .flash { 78 | -webkit-animation-name: flash; 79 | animation-name: flash; 80 | } 81 | 82 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 83 | 84 | @-webkit-keyframes pulse { 85 | 0% { 86 | -webkit-transform: scale(1); 87 | transform: scale(1); 88 | } 89 | 90 | 50% { 91 | -webkit-transform: scale(1.1); 92 | transform: scale(1.1); 93 | } 94 | 95 | 100% { 96 | -webkit-transform: scale(1); 97 | transform: scale(1); 98 | } 99 | } 100 | 101 | @keyframes pulse { 102 | 0% { 103 | -webkit-transform: scale(1); 104 | -ms-transform: scale(1); 105 | transform: scale(1); 106 | } 107 | 108 | 50% { 109 | -webkit-transform: scale(1.1); 110 | -ms-transform: scale(1.1); 111 | transform: scale(1.1); 112 | } 113 | 114 | 100% { 115 | -webkit-transform: scale(1); 116 | -ms-transform: scale(1); 117 | transform: scale(1); 118 | } 119 | } 120 | 121 | .pulse { 122 | -webkit-animation-name: pulse; 123 | animation-name: pulse; 124 | } 125 | 126 | @-webkit-keyframes shake { 127 | 0%, 100% { 128 | -webkit-transform: translateX(0); 129 | transform: translateX(0); 130 | } 131 | 132 | 10%, 30%, 50%, 70%, 90% { 133 | -webkit-transform: translateX(-10px); 134 | transform: translateX(-10px); 135 | } 136 | 137 | 20%, 40%, 60%, 80% { 138 | -webkit-transform: translateX(10px); 139 | transform: translateX(10px); 140 | } 141 | } 142 | 143 | @keyframes shake { 144 | 0%, 100% { 145 | -webkit-transform: translateX(0); 146 | -ms-transform: translateX(0); 147 | transform: translateX(0); 148 | } 149 | 150 | 10%, 30%, 50%, 70%, 90% { 151 | -webkit-transform: translateX(-10px); 152 | -ms-transform: translateX(-10px); 153 | transform: translateX(-10px); 154 | } 155 | 156 | 20%, 40%, 60%, 80% { 157 | -webkit-transform: translateX(10px); 158 | -ms-transform: translateX(10px); 159 | transform: translateX(10px); 160 | } 161 | } 162 | 163 | .shake { 164 | -webkit-animation-name: shake; 165 | animation-name: shake; 166 | } 167 | 168 | @-webkit-keyframes swing { 169 | 20% { 170 | -webkit-transform: rotate(15deg); 171 | transform: rotate(15deg); 172 | } 173 | 174 | 40% { 175 | -webkit-transform: rotate(-10deg); 176 | transform: rotate(-10deg); 177 | } 178 | 179 | 60% { 180 | -webkit-transform: rotate(5deg); 181 | transform: rotate(5deg); 182 | } 183 | 184 | 80% { 185 | -webkit-transform: rotate(-5deg); 186 | transform: rotate(-5deg); 187 | } 188 | 189 | 100% { 190 | -webkit-transform: rotate(0deg); 191 | transform: rotate(0deg); 192 | } 193 | } 194 | 195 | @keyframes swing { 196 | 20% { 197 | -webkit-transform: rotate(15deg); 198 | -ms-transform: rotate(15deg); 199 | transform: rotate(15deg); 200 | } 201 | 202 | 40% { 203 | -webkit-transform: rotate(-10deg); 204 | -ms-transform: rotate(-10deg); 205 | transform: rotate(-10deg); 206 | } 207 | 208 | 60% { 209 | -webkit-transform: rotate(5deg); 210 | -ms-transform: rotate(5deg); 211 | transform: rotate(5deg); 212 | } 213 | 214 | 80% { 215 | -webkit-transform: rotate(-5deg); 216 | -ms-transform: rotate(-5deg); 217 | transform: rotate(-5deg); 218 | } 219 | 220 | 100% { 221 | -webkit-transform: rotate(0deg); 222 | -ms-transform: rotate(0deg); 223 | transform: rotate(0deg); 224 | } 225 | } 226 | 227 | .swing { 228 | -webkit-transform-origin: top center; 229 | -ms-transform-origin: top center; 230 | transform-origin: top center; 231 | -webkit-animation-name: swing; 232 | animation-name: swing; 233 | } 234 | 235 | @-webkit-keyframes tada { 236 | 0% { 237 | -webkit-transform: scale(1); 238 | transform: scale(1); 239 | } 240 | 241 | 10%, 20% { 242 | -webkit-transform: scale(0.9) rotate(-3deg); 243 | transform: scale(0.9) rotate(-3deg); 244 | } 245 | 246 | 30%, 50%, 70%, 90% { 247 | -webkit-transform: scale(1.1) rotate(3deg); 248 | transform: scale(1.1) rotate(3deg); 249 | } 250 | 251 | 40%, 60%, 80% { 252 | -webkit-transform: scale(1.1) rotate(-3deg); 253 | transform: scale(1.1) rotate(-3deg); 254 | } 255 | 256 | 100% { 257 | -webkit-transform: scale(1) rotate(0); 258 | transform: scale(1) rotate(0); 259 | } 260 | } 261 | 262 | @keyframes tada { 263 | 0% { 264 | -webkit-transform: scale(1); 265 | -ms-transform: scale(1); 266 | transform: scale(1); 267 | } 268 | 269 | 10%, 20% { 270 | -webkit-transform: scale(0.9) rotate(-3deg); 271 | -ms-transform: scale(0.9) rotate(-3deg); 272 | transform: scale(0.9) rotate(-3deg); 273 | } 274 | 275 | 30%, 50%, 70%, 90% { 276 | -webkit-transform: scale(1.1) rotate(3deg); 277 | -ms-transform: scale(1.1) rotate(3deg); 278 | transform: scale(1.1) rotate(3deg); 279 | } 280 | 281 | 40%, 60%, 80% { 282 | -webkit-transform: scale(1.1) rotate(-3deg); 283 | -ms-transform: scale(1.1) rotate(-3deg); 284 | transform: scale(1.1) rotate(-3deg); 285 | } 286 | 287 | 100% { 288 | -webkit-transform: scale(1) rotate(0); 289 | -ms-transform: scale(1) rotate(0); 290 | transform: scale(1) rotate(0); 291 | } 292 | } 293 | 294 | .tada { 295 | -webkit-animation-name: tada; 296 | animation-name: tada; 297 | } 298 | 299 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 300 | 301 | @-webkit-keyframes wobble { 302 | 0% { 303 | -webkit-transform: translateX(0%); 304 | transform: translateX(0%); 305 | } 306 | 307 | 15% { 308 | -webkit-transform: translateX(-25%) rotate(-5deg); 309 | transform: translateX(-25%) rotate(-5deg); 310 | } 311 | 312 | 30% { 313 | -webkit-transform: translateX(20%) rotate(3deg); 314 | transform: translateX(20%) rotate(3deg); 315 | } 316 | 317 | 45% { 318 | -webkit-transform: translateX(-15%) rotate(-3deg); 319 | transform: translateX(-15%) rotate(-3deg); 320 | } 321 | 322 | 60% { 323 | -webkit-transform: translateX(10%) rotate(2deg); 324 | transform: translateX(10%) rotate(2deg); 325 | } 326 | 327 | 75% { 328 | -webkit-transform: translateX(-5%) rotate(-1deg); 329 | transform: translateX(-5%) rotate(-1deg); 330 | } 331 | 332 | 100% { 333 | -webkit-transform: translateX(0%); 334 | transform: translateX(0%); 335 | } 336 | } 337 | 338 | @keyframes wobble { 339 | 0% { 340 | -webkit-transform: translateX(0%); 341 | -ms-transform: translateX(0%); 342 | transform: translateX(0%); 343 | } 344 | 345 | 15% { 346 | -webkit-transform: translateX(-25%) rotate(-5deg); 347 | -ms-transform: translateX(-25%) rotate(-5deg); 348 | transform: translateX(-25%) rotate(-5deg); 349 | } 350 | 351 | 30% { 352 | -webkit-transform: translateX(20%) rotate(3deg); 353 | -ms-transform: translateX(20%) rotate(3deg); 354 | transform: translateX(20%) rotate(3deg); 355 | } 356 | 357 | 45% { 358 | -webkit-transform: translateX(-15%) rotate(-3deg); 359 | -ms-transform: translateX(-15%) rotate(-3deg); 360 | transform: translateX(-15%) rotate(-3deg); 361 | } 362 | 363 | 60% { 364 | -webkit-transform: translateX(10%) rotate(2deg); 365 | -ms-transform: translateX(10%) rotate(2deg); 366 | transform: translateX(10%) rotate(2deg); 367 | } 368 | 369 | 75% { 370 | -webkit-transform: translateX(-5%) rotate(-1deg); 371 | -ms-transform: translateX(-5%) rotate(-1deg); 372 | transform: translateX(-5%) rotate(-1deg); 373 | } 374 | 375 | 100% { 376 | -webkit-transform: translateX(0%); 377 | -ms-transform: translateX(0%); 378 | transform: translateX(0%); 379 | } 380 | } 381 | 382 | .wobble { 383 | -webkit-animation-name: wobble; 384 | animation-name: wobble; 385 | } 386 | 387 | @-webkit-keyframes bounceIn { 388 | 0% { 389 | opacity: 0; 390 | -webkit-transform: scale(.3); 391 | transform: scale(.3); 392 | } 393 | 394 | 50% { 395 | opacity: 1; 396 | -webkit-transform: scale(1.05); 397 | transform: scale(1.05); 398 | } 399 | 400 | 70% { 401 | -webkit-transform: scale(.9); 402 | transform: scale(.9); 403 | } 404 | 405 | 100% { 406 | -webkit-transform: scale(1); 407 | transform: scale(1); 408 | } 409 | } 410 | 411 | @keyframes bounceIn { 412 | 0% { 413 | opacity: 0; 414 | -webkit-transform: scale(.3); 415 | -ms-transform: scale(.3); 416 | transform: scale(.3); 417 | } 418 | 419 | 50% { 420 | opacity: 1; 421 | -webkit-transform: scale(1.05); 422 | -ms-transform: scale(1.05); 423 | transform: scale(1.05); 424 | } 425 | 426 | 70% { 427 | -webkit-transform: scale(.9); 428 | -ms-transform: scale(.9); 429 | transform: scale(.9); 430 | } 431 | 432 | 100% { 433 | -webkit-transform: scale(1); 434 | -ms-transform: scale(1); 435 | transform: scale(1); 436 | } 437 | } 438 | 439 | .bounceIn { 440 | -webkit-animation-name: bounceIn; 441 | animation-name: bounceIn; 442 | } 443 | 444 | @-webkit-keyframes bounceInDown { 445 | 0% { 446 | opacity: 0; 447 | -webkit-transform: translateY(-2000px); 448 | transform: translateY(-2000px); 449 | } 450 | 451 | 60% { 452 | opacity: 1; 453 | -webkit-transform: translateY(30px); 454 | transform: translateY(30px); 455 | } 456 | 457 | 80% { 458 | -webkit-transform: translateY(-10px); 459 | transform: translateY(-10px); 460 | } 461 | 462 | 100% { 463 | -webkit-transform: translateY(0); 464 | transform: translateY(0); 465 | } 466 | } 467 | 468 | @keyframes bounceInDown { 469 | 0% { 470 | opacity: 0; 471 | -webkit-transform: translateY(-2000px); 472 | -ms-transform: translateY(-2000px); 473 | transform: translateY(-2000px); 474 | } 475 | 476 | 60% { 477 | opacity: 1; 478 | -webkit-transform: translateY(30px); 479 | -ms-transform: translateY(30px); 480 | transform: translateY(30px); 481 | } 482 | 483 | 80% { 484 | -webkit-transform: translateY(-10px); 485 | -ms-transform: translateY(-10px); 486 | transform: translateY(-10px); 487 | } 488 | 489 | 100% { 490 | -webkit-transform: translateY(0); 491 | -ms-transform: translateY(0); 492 | transform: translateY(0); 493 | } 494 | } 495 | 496 | .bounceInDown { 497 | -webkit-animation-name: bounceInDown; 498 | animation-name: bounceInDown; 499 | } 500 | 501 | @-webkit-keyframes bounceInLeft { 502 | 0% { 503 | opacity: 0; 504 | -webkit-transform: translateX(-2000px); 505 | transform: translateX(-2000px); 506 | } 507 | 508 | 60% { 509 | opacity: 1; 510 | -webkit-transform: translateX(30px); 511 | transform: translateX(30px); 512 | } 513 | 514 | 80% { 515 | -webkit-transform: translateX(-10px); 516 | transform: translateX(-10px); 517 | } 518 | 519 | 100% { 520 | -webkit-transform: translateX(0); 521 | transform: translateX(0); 522 | } 523 | } 524 | 525 | @keyframes bounceInLeft { 526 | 0% { 527 | opacity: 0; 528 | -webkit-transform: translateX(-2000px); 529 | -ms-transform: translateX(-2000px); 530 | transform: translateX(-2000px); 531 | } 532 | 533 | 60% { 534 | opacity: 1; 535 | -webkit-transform: translateX(30px); 536 | -ms-transform: translateX(30px); 537 | transform: translateX(30px); 538 | } 539 | 540 | 80% { 541 | -webkit-transform: translateX(-10px); 542 | -ms-transform: translateX(-10px); 543 | transform: translateX(-10px); 544 | } 545 | 546 | 100% { 547 | -webkit-transform: translateX(0); 548 | -ms-transform: translateX(0); 549 | transform: translateX(0); 550 | } 551 | } 552 | 553 | .bounceInLeft { 554 | -webkit-animation-name: bounceInLeft; 555 | animation-name: bounceInLeft; 556 | } 557 | 558 | @-webkit-keyframes bounceInRight { 559 | 0% { 560 | opacity: 0; 561 | -webkit-transform: translateX(2000px); 562 | transform: translateX(2000px); 563 | } 564 | 565 | 60% { 566 | opacity: 1; 567 | -webkit-transform: translateX(-30px); 568 | transform: translateX(-30px); 569 | } 570 | 571 | 80% { 572 | -webkit-transform: translateX(10px); 573 | transform: translateX(10px); 574 | } 575 | 576 | 100% { 577 | -webkit-transform: translateX(0); 578 | transform: translateX(0); 579 | } 580 | } 581 | 582 | @keyframes bounceInRight { 583 | 0% { 584 | opacity: 0; 585 | -webkit-transform: translateX(2000px); 586 | -ms-transform: translateX(2000px); 587 | transform: translateX(2000px); 588 | } 589 | 590 | 60% { 591 | opacity: 1; 592 | -webkit-transform: translateX(-30px); 593 | -ms-transform: translateX(-30px); 594 | transform: translateX(-30px); 595 | } 596 | 597 | 80% { 598 | -webkit-transform: translateX(10px); 599 | -ms-transform: translateX(10px); 600 | transform: translateX(10px); 601 | } 602 | 603 | 100% { 604 | -webkit-transform: translateX(0); 605 | -ms-transform: translateX(0); 606 | transform: translateX(0); 607 | } 608 | } 609 | 610 | .bounceInRight { 611 | -webkit-animation-name: bounceInRight; 612 | animation-name: bounceInRight; 613 | } 614 | 615 | @-webkit-keyframes bounceInUp { 616 | 0% { 617 | opacity: 0; 618 | -webkit-transform: translateY(2000px); 619 | transform: translateY(2000px); 620 | } 621 | 622 | 60% { 623 | opacity: 1; 624 | -webkit-transform: translateY(-30px); 625 | transform: translateY(-30px); 626 | } 627 | 628 | 80% { 629 | -webkit-transform: translateY(10px); 630 | transform: translateY(10px); 631 | } 632 | 633 | 100% { 634 | -webkit-transform: translateY(0); 635 | transform: translateY(0); 636 | } 637 | } 638 | 639 | @keyframes bounceInUp { 640 | 0% { 641 | opacity: 0; 642 | -webkit-transform: translateY(2000px); 643 | -ms-transform: translateY(2000px); 644 | transform: translateY(2000px); 645 | } 646 | 647 | 60% { 648 | opacity: 1; 649 | -webkit-transform: translateY(-30px); 650 | -ms-transform: translateY(-30px); 651 | transform: translateY(-30px); 652 | } 653 | 654 | 80% { 655 | -webkit-transform: translateY(10px); 656 | -ms-transform: translateY(10px); 657 | transform: translateY(10px); 658 | } 659 | 660 | 100% { 661 | -webkit-transform: translateY(0); 662 | -ms-transform: translateY(0); 663 | transform: translateY(0); 664 | } 665 | } 666 | 667 | .bounceInUp { 668 | -webkit-animation-name: bounceInUp; 669 | animation-name: bounceInUp; 670 | } 671 | 672 | @-webkit-keyframes bounceOut { 673 | 0% { 674 | -webkit-transform: scale(1); 675 | transform: scale(1); 676 | } 677 | 678 | 25% { 679 | -webkit-transform: scale(.95); 680 | transform: scale(.95); 681 | } 682 | 683 | 50% { 684 | opacity: 1; 685 | -webkit-transform: scale(1.1); 686 | transform: scale(1.1); 687 | } 688 | 689 | 100% { 690 | opacity: 0; 691 | -webkit-transform: scale(.3); 692 | transform: scale(.3); 693 | } 694 | } 695 | 696 | @keyframes bounceOut { 697 | 0% { 698 | -webkit-transform: scale(1); 699 | -ms-transform: scale(1); 700 | transform: scale(1); 701 | } 702 | 703 | 25% { 704 | -webkit-transform: scale(.95); 705 | -ms-transform: scale(.95); 706 | transform: scale(.95); 707 | } 708 | 709 | 50% { 710 | opacity: 1; 711 | -webkit-transform: scale(1.1); 712 | -ms-transform: scale(1.1); 713 | transform: scale(1.1); 714 | } 715 | 716 | 100% { 717 | opacity: 0; 718 | -webkit-transform: scale(.3); 719 | -ms-transform: scale(.3); 720 | transform: scale(.3); 721 | } 722 | } 723 | 724 | .bounceOut { 725 | -webkit-animation-name: bounceOut; 726 | animation-name: bounceOut; 727 | } 728 | 729 | @-webkit-keyframes bounceOutDown { 730 | 0% { 731 | -webkit-transform: translateY(0); 732 | transform: translateY(0); 733 | } 734 | 735 | 20% { 736 | opacity: 1; 737 | -webkit-transform: translateY(-20px); 738 | transform: translateY(-20px); 739 | } 740 | 741 | 100% { 742 | opacity: 0; 743 | -webkit-transform: translateY(2000px); 744 | transform: translateY(2000px); 745 | } 746 | } 747 | 748 | @keyframes bounceOutDown { 749 | 0% { 750 | -webkit-transform: translateY(0); 751 | -ms-transform: translateY(0); 752 | transform: translateY(0); 753 | } 754 | 755 | 20% { 756 | opacity: 1; 757 | -webkit-transform: translateY(-20px); 758 | -ms-transform: translateY(-20px); 759 | transform: translateY(-20px); 760 | } 761 | 762 | 100% { 763 | opacity: 0; 764 | -webkit-transform: translateY(2000px); 765 | -ms-transform: translateY(2000px); 766 | transform: translateY(2000px); 767 | } 768 | } 769 | 770 | .bounceOutDown { 771 | -webkit-animation-name: bounceOutDown; 772 | animation-name: bounceOutDown; 773 | } 774 | 775 | @-webkit-keyframes bounceOutLeft { 776 | 0% { 777 | -webkit-transform: translateX(0); 778 | transform: translateX(0); 779 | } 780 | 781 | 20% { 782 | opacity: 1; 783 | -webkit-transform: translateX(20px); 784 | transform: translateX(20px); 785 | } 786 | 787 | 100% { 788 | opacity: 0; 789 | -webkit-transform: translateX(-2000px); 790 | transform: translateX(-2000px); 791 | } 792 | } 793 | 794 | @keyframes bounceOutLeft { 795 | 0% { 796 | -webkit-transform: translateX(0); 797 | -ms-transform: translateX(0); 798 | transform: translateX(0); 799 | } 800 | 801 | 20% { 802 | opacity: 1; 803 | -webkit-transform: translateX(20px); 804 | -ms-transform: translateX(20px); 805 | transform: translateX(20px); 806 | } 807 | 808 | 100% { 809 | opacity: 0; 810 | -webkit-transform: translateX(-2000px); 811 | -ms-transform: translateX(-2000px); 812 | transform: translateX(-2000px); 813 | } 814 | } 815 | 816 | .bounceOutLeft { 817 | -webkit-animation-name: bounceOutLeft; 818 | animation-name: bounceOutLeft; 819 | } 820 | 821 | @-webkit-keyframes bounceOutRight { 822 | 0% { 823 | -webkit-transform: translateX(0); 824 | transform: translateX(0); 825 | } 826 | 827 | 20% { 828 | opacity: 1; 829 | -webkit-transform: translateX(-20px); 830 | transform: translateX(-20px); 831 | } 832 | 833 | 100% { 834 | opacity: 0; 835 | -webkit-transform: translateX(2000px); 836 | transform: translateX(2000px); 837 | } 838 | } 839 | 840 | @keyframes bounceOutRight { 841 | 0% { 842 | -webkit-transform: translateX(0); 843 | -ms-transform: translateX(0); 844 | transform: translateX(0); 845 | } 846 | 847 | 20% { 848 | opacity: 1; 849 | -webkit-transform: translateX(-20px); 850 | -ms-transform: translateX(-20px); 851 | transform: translateX(-20px); 852 | } 853 | 854 | 100% { 855 | opacity: 0; 856 | -webkit-transform: translateX(2000px); 857 | -ms-transform: translateX(2000px); 858 | transform: translateX(2000px); 859 | } 860 | } 861 | 862 | .bounceOutRight { 863 | -webkit-animation-name: bounceOutRight; 864 | animation-name: bounceOutRight; 865 | } 866 | 867 | @-webkit-keyframes bounceOutUp { 868 | 0% { 869 | -webkit-transform: translateY(0); 870 | transform: translateY(0); 871 | } 872 | 873 | 20% { 874 | opacity: 1; 875 | -webkit-transform: translateY(20px); 876 | transform: translateY(20px); 877 | } 878 | 879 | 100% { 880 | opacity: 0; 881 | -webkit-transform: translateY(-2000px); 882 | transform: translateY(-2000px); 883 | } 884 | } 885 | 886 | @keyframes bounceOutUp { 887 | 0% { 888 | -webkit-transform: translateY(0); 889 | -ms-transform: translateY(0); 890 | transform: translateY(0); 891 | } 892 | 893 | 20% { 894 | opacity: 1; 895 | -webkit-transform: translateY(20px); 896 | -ms-transform: translateY(20px); 897 | transform: translateY(20px); 898 | } 899 | 900 | 100% { 901 | opacity: 0; 902 | -webkit-transform: translateY(-2000px); 903 | -ms-transform: translateY(-2000px); 904 | transform: translateY(-2000px); 905 | } 906 | } 907 | 908 | .bounceOutUp { 909 | -webkit-animation-name: bounceOutUp; 910 | animation-name: bounceOutUp; 911 | } 912 | 913 | @-webkit-keyframes fadeIn { 914 | 0% { 915 | opacity: 0; 916 | } 917 | 918 | 100% { 919 | opacity: 1; 920 | } 921 | } 922 | 923 | @keyframes fadeIn { 924 | 0% { 925 | opacity: 0; 926 | } 927 | 928 | 100% { 929 | opacity: 1; 930 | } 931 | } 932 | 933 | .fadeIn { 934 | -webkit-animation-name: fadeIn; 935 | animation-name: fadeIn; 936 | } 937 | 938 | @-webkit-keyframes fadeInDown { 939 | 0% { 940 | opacity: 0; 941 | -webkit-transform: translateY(-20px); 942 | transform: translateY(-20px); 943 | } 944 | 945 | 100% { 946 | opacity: 1; 947 | -webkit-transform: translateY(0); 948 | transform: translateY(0); 949 | } 950 | } 951 | 952 | @keyframes fadeInDown { 953 | 0% { 954 | opacity: 0; 955 | -webkit-transform: translateY(-20px); 956 | -ms-transform: translateY(-20px); 957 | transform: translateY(-20px); 958 | } 959 | 960 | 100% { 961 | opacity: 1; 962 | -webkit-transform: translateY(0); 963 | -ms-transform: translateY(0); 964 | transform: translateY(0); 965 | } 966 | } 967 | 968 | .fadeInDown { 969 | -webkit-animation-name: fadeInDown; 970 | animation-name: fadeInDown; 971 | } 972 | 973 | @-webkit-keyframes fadeInDownBig { 974 | 0% { 975 | opacity: 0; 976 | -webkit-transform: translateY(-2000px); 977 | transform: translateY(-2000px); 978 | } 979 | 980 | 100% { 981 | opacity: 1; 982 | -webkit-transform: translateY(0); 983 | transform: translateY(0); 984 | } 985 | } 986 | 987 | @keyframes fadeInDownBig { 988 | 0% { 989 | opacity: 0; 990 | -webkit-transform: translateY(-2000px); 991 | -ms-transform: translateY(-2000px); 992 | transform: translateY(-2000px); 993 | } 994 | 995 | 100% { 996 | opacity: 1; 997 | -webkit-transform: translateY(0); 998 | -ms-transform: translateY(0); 999 | transform: translateY(0); 1000 | } 1001 | } 1002 | 1003 | .fadeInDownBig { 1004 | -webkit-animation-name: fadeInDownBig; 1005 | animation-name: fadeInDownBig; 1006 | } 1007 | 1008 | @-webkit-keyframes fadeInLeft { 1009 | 0% { 1010 | opacity: 0; 1011 | -webkit-transform: translateX(-20px); 1012 | transform: translateX(-20px); 1013 | } 1014 | 1015 | 100% { 1016 | opacity: 1; 1017 | -webkit-transform: translateX(0); 1018 | transform: translateX(0); 1019 | } 1020 | } 1021 | 1022 | @keyframes fadeInLeft { 1023 | 0% { 1024 | opacity: 0; 1025 | -webkit-transform: translateX(-20px); 1026 | -ms-transform: translateX(-20px); 1027 | transform: translateX(-20px); 1028 | } 1029 | 1030 | 100% { 1031 | opacity: 1; 1032 | -webkit-transform: translateX(0); 1033 | -ms-transform: translateX(0); 1034 | transform: translateX(0); 1035 | } 1036 | } 1037 | 1038 | .fadeInLeft { 1039 | -webkit-animation-name: fadeInLeft; 1040 | animation-name: fadeInLeft; 1041 | } 1042 | 1043 | @-webkit-keyframes fadeInLeftBig { 1044 | 0% { 1045 | opacity: 0; 1046 | -webkit-transform: translateX(-2000px); 1047 | transform: translateX(-2000px); 1048 | } 1049 | 1050 | 100% { 1051 | opacity: 1; 1052 | -webkit-transform: translateX(0); 1053 | transform: translateX(0); 1054 | } 1055 | } 1056 | 1057 | @keyframes fadeInLeftBig { 1058 | 0% { 1059 | opacity: 0; 1060 | -webkit-transform: translateX(-2000px); 1061 | -ms-transform: translateX(-2000px); 1062 | transform: translateX(-2000px); 1063 | } 1064 | 1065 | 100% { 1066 | opacity: 1; 1067 | -webkit-transform: translateX(0); 1068 | -ms-transform: translateX(0); 1069 | transform: translateX(0); 1070 | } 1071 | } 1072 | 1073 | .fadeInLeftBig { 1074 | -webkit-animation-name: fadeInLeftBig; 1075 | animation-name: fadeInLeftBig; 1076 | } 1077 | 1078 | @-webkit-keyframes fadeInRight { 1079 | 0% { 1080 | opacity: 0; 1081 | -webkit-transform: translateX(20px); 1082 | transform: translateX(20px); 1083 | } 1084 | 1085 | 100% { 1086 | opacity: 1; 1087 | -webkit-transform: translateX(0); 1088 | transform: translateX(0); 1089 | } 1090 | } 1091 | 1092 | @keyframes fadeInRight { 1093 | 0% { 1094 | opacity: 0; 1095 | -webkit-transform: translateX(20px); 1096 | -ms-transform: translateX(20px); 1097 | transform: translateX(20px); 1098 | } 1099 | 1100 | 100% { 1101 | opacity: 1; 1102 | -webkit-transform: translateX(0); 1103 | -ms-transform: translateX(0); 1104 | transform: translateX(0); 1105 | } 1106 | } 1107 | 1108 | .fadeInRight { 1109 | -webkit-animation-name: fadeInRight; 1110 | animation-name: fadeInRight; 1111 | } 1112 | 1113 | @-webkit-keyframes fadeInRightBig { 1114 | 0% { 1115 | opacity: 0; 1116 | -webkit-transform: translateX(2000px); 1117 | transform: translateX(2000px); 1118 | } 1119 | 1120 | 100% { 1121 | opacity: 1; 1122 | -webkit-transform: translateX(0); 1123 | transform: translateX(0); 1124 | } 1125 | } 1126 | 1127 | @keyframes fadeInRightBig { 1128 | 0% { 1129 | opacity: 0; 1130 | -webkit-transform: translateX(2000px); 1131 | -ms-transform: translateX(2000px); 1132 | transform: translateX(2000px); 1133 | } 1134 | 1135 | 100% { 1136 | opacity: 1; 1137 | -webkit-transform: translateX(0); 1138 | -ms-transform: translateX(0); 1139 | transform: translateX(0); 1140 | } 1141 | } 1142 | 1143 | .fadeInRightBig { 1144 | -webkit-animation-name: fadeInRightBig; 1145 | animation-name: fadeInRightBig; 1146 | } 1147 | 1148 | @-webkit-keyframes fadeInUp { 1149 | 0% { 1150 | opacity: 0; 1151 | -webkit-transform: translateY(20px); 1152 | transform: translateY(20px); 1153 | } 1154 | 1155 | 100% { 1156 | opacity: 1; 1157 | -webkit-transform: translateY(0); 1158 | transform: translateY(0); 1159 | } 1160 | } 1161 | 1162 | @keyframes fadeInUp { 1163 | 0% { 1164 | opacity: 0; 1165 | -webkit-transform: translateY(20px); 1166 | -ms-transform: translateY(20px); 1167 | transform: translateY(20px); 1168 | } 1169 | 1170 | 100% { 1171 | opacity: 1; 1172 | -webkit-transform: translateY(0); 1173 | -ms-transform: translateY(0); 1174 | transform: translateY(0); 1175 | } 1176 | } 1177 | 1178 | .fadeInUp { 1179 | -webkit-animation-name: fadeInUp; 1180 | animation-name: fadeInUp; 1181 | } 1182 | 1183 | @-webkit-keyframes fadeInUpBig { 1184 | 0% { 1185 | opacity: 0; 1186 | -webkit-transform: translateY(2000px); 1187 | transform: translateY(2000px); 1188 | } 1189 | 1190 | 100% { 1191 | opacity: 1; 1192 | -webkit-transform: translateY(0); 1193 | transform: translateY(0); 1194 | } 1195 | } 1196 | 1197 | @keyframes fadeInUpBig { 1198 | 0% { 1199 | opacity: 0; 1200 | -webkit-transform: translateY(2000px); 1201 | -ms-transform: translateY(2000px); 1202 | transform: translateY(2000px); 1203 | } 1204 | 1205 | 100% { 1206 | opacity: 1; 1207 | -webkit-transform: translateY(0); 1208 | -ms-transform: translateY(0); 1209 | transform: translateY(0); 1210 | } 1211 | } 1212 | 1213 | .fadeInUpBig { 1214 | -webkit-animation-name: fadeInUpBig; 1215 | animation-name: fadeInUpBig; 1216 | } 1217 | 1218 | @-webkit-keyframes fadeOut { 1219 | 0% { 1220 | opacity: 1; 1221 | } 1222 | 1223 | 100% { 1224 | opacity: 0; 1225 | } 1226 | } 1227 | 1228 | @keyframes fadeOut { 1229 | 0% { 1230 | opacity: 1; 1231 | } 1232 | 1233 | 100% { 1234 | opacity: 0; 1235 | } 1236 | } 1237 | 1238 | .fadeOut { 1239 | -webkit-animation-name: fadeOut; 1240 | animation-name: fadeOut; 1241 | } 1242 | 1243 | @-webkit-keyframes fadeOutDown { 1244 | 0% { 1245 | opacity: 1; 1246 | -webkit-transform: translateY(0); 1247 | transform: translateY(0); 1248 | } 1249 | 1250 | 100% { 1251 | opacity: 0; 1252 | -webkit-transform: translateY(20px); 1253 | transform: translateY(20px); 1254 | } 1255 | } 1256 | 1257 | @keyframes fadeOutDown { 1258 | 0% { 1259 | opacity: 1; 1260 | -webkit-transform: translateY(0); 1261 | -ms-transform: translateY(0); 1262 | transform: translateY(0); 1263 | } 1264 | 1265 | 100% { 1266 | opacity: 0; 1267 | -webkit-transform: translateY(20px); 1268 | -ms-transform: translateY(20px); 1269 | transform: translateY(20px); 1270 | } 1271 | } 1272 | 1273 | .fadeOutDown { 1274 | -webkit-animation-name: fadeOutDown; 1275 | animation-name: fadeOutDown; 1276 | } 1277 | 1278 | @-webkit-keyframes fadeOutDownBig { 1279 | 0% { 1280 | opacity: 1; 1281 | -webkit-transform: translateY(0); 1282 | transform: translateY(0); 1283 | } 1284 | 1285 | 100% { 1286 | opacity: 0; 1287 | -webkit-transform: translateY(2000px); 1288 | transform: translateY(2000px); 1289 | } 1290 | } 1291 | 1292 | @keyframes fadeOutDownBig { 1293 | 0% { 1294 | opacity: 1; 1295 | -webkit-transform: translateY(0); 1296 | -ms-transform: translateY(0); 1297 | transform: translateY(0); 1298 | } 1299 | 1300 | 100% { 1301 | opacity: 0; 1302 | -webkit-transform: translateY(2000px); 1303 | -ms-transform: translateY(2000px); 1304 | transform: translateY(2000px); 1305 | } 1306 | } 1307 | 1308 | .fadeOutDownBig { 1309 | -webkit-animation-name: fadeOutDownBig; 1310 | animation-name: fadeOutDownBig; 1311 | } 1312 | 1313 | @-webkit-keyframes fadeOutLeft { 1314 | 0% { 1315 | opacity: 1; 1316 | -webkit-transform: translateX(0); 1317 | transform: translateX(0); 1318 | } 1319 | 1320 | 100% { 1321 | opacity: 0; 1322 | -webkit-transform: translateX(-20px); 1323 | transform: translateX(-20px); 1324 | } 1325 | } 1326 | 1327 | @keyframes fadeOutLeft { 1328 | 0% { 1329 | opacity: 1; 1330 | -webkit-transform: translateX(0); 1331 | -ms-transform: translateX(0); 1332 | transform: translateX(0); 1333 | } 1334 | 1335 | 100% { 1336 | opacity: 0; 1337 | -webkit-transform: translateX(-20px); 1338 | -ms-transform: translateX(-20px); 1339 | transform: translateX(-20px); 1340 | } 1341 | } 1342 | 1343 | .fadeOutLeft { 1344 | -webkit-animation-name: fadeOutLeft; 1345 | animation-name: fadeOutLeft; 1346 | } 1347 | 1348 | @-webkit-keyframes fadeOutLeftBig { 1349 | 0% { 1350 | opacity: 1; 1351 | -webkit-transform: translateX(0); 1352 | transform: translateX(0); 1353 | } 1354 | 1355 | 100% { 1356 | opacity: 0; 1357 | -webkit-transform: translateX(-2000px); 1358 | transform: translateX(-2000px); 1359 | } 1360 | } 1361 | 1362 | @keyframes fadeOutLeftBig { 1363 | 0% { 1364 | opacity: 1; 1365 | -webkit-transform: translateX(0); 1366 | -ms-transform: translateX(0); 1367 | transform: translateX(0); 1368 | } 1369 | 1370 | 100% { 1371 | opacity: 0; 1372 | -webkit-transform: translateX(-2000px); 1373 | -ms-transform: translateX(-2000px); 1374 | transform: translateX(-2000px); 1375 | } 1376 | } 1377 | 1378 | .fadeOutLeftBig { 1379 | -webkit-animation-name: fadeOutLeftBig; 1380 | animation-name: fadeOutLeftBig; 1381 | } 1382 | 1383 | @-webkit-keyframes fadeOutRight { 1384 | 0% { 1385 | opacity: 1; 1386 | -webkit-transform: translateX(0); 1387 | transform: translateX(0); 1388 | } 1389 | 1390 | 100% { 1391 | opacity: 0; 1392 | -webkit-transform: translateX(20px); 1393 | transform: translateX(20px); 1394 | } 1395 | } 1396 | 1397 | @keyframes fadeOutRight { 1398 | 0% { 1399 | opacity: 1; 1400 | -webkit-transform: translateX(0); 1401 | -ms-transform: translateX(0); 1402 | transform: translateX(0); 1403 | } 1404 | 1405 | 100% { 1406 | opacity: 0; 1407 | -webkit-transform: translateX(20px); 1408 | -ms-transform: translateX(20px); 1409 | transform: translateX(20px); 1410 | } 1411 | } 1412 | 1413 | .fadeOutRight { 1414 | -webkit-animation-name: fadeOutRight; 1415 | animation-name: fadeOutRight; 1416 | } 1417 | 1418 | @-webkit-keyframes fadeOutRightBig { 1419 | 0% { 1420 | opacity: 1; 1421 | -webkit-transform: translateX(0); 1422 | transform: translateX(0); 1423 | } 1424 | 1425 | 100% { 1426 | opacity: 0; 1427 | -webkit-transform: translateX(2000px); 1428 | transform: translateX(2000px); 1429 | } 1430 | } 1431 | 1432 | @keyframes fadeOutRightBig { 1433 | 0% { 1434 | opacity: 1; 1435 | -webkit-transform: translateX(0); 1436 | -ms-transform: translateX(0); 1437 | transform: translateX(0); 1438 | } 1439 | 1440 | 100% { 1441 | opacity: 0; 1442 | -webkit-transform: translateX(2000px); 1443 | -ms-transform: translateX(2000px); 1444 | transform: translateX(2000px); 1445 | } 1446 | } 1447 | 1448 | .fadeOutRightBig { 1449 | -webkit-animation-name: fadeOutRightBig; 1450 | animation-name: fadeOutRightBig; 1451 | } 1452 | 1453 | @-webkit-keyframes fadeOutUp { 1454 | 0% { 1455 | opacity: 1; 1456 | -webkit-transform: translateY(0); 1457 | transform: translateY(0); 1458 | } 1459 | 1460 | 100% { 1461 | opacity: 0; 1462 | -webkit-transform: translateY(-20px); 1463 | transform: translateY(-20px); 1464 | } 1465 | } 1466 | 1467 | @keyframes fadeOutUp { 1468 | 0% { 1469 | opacity: 1; 1470 | -webkit-transform: translateY(0); 1471 | -ms-transform: translateY(0); 1472 | transform: translateY(0); 1473 | } 1474 | 1475 | 100% { 1476 | opacity: 0; 1477 | -webkit-transform: translateY(-20px); 1478 | -ms-transform: translateY(-20px); 1479 | transform: translateY(-20px); 1480 | } 1481 | } 1482 | 1483 | .fadeOutUp { 1484 | -webkit-animation-name: fadeOutUp; 1485 | animation-name: fadeOutUp; 1486 | } 1487 | 1488 | @-webkit-keyframes fadeOutUpBig { 1489 | 0% { 1490 | opacity: 1; 1491 | -webkit-transform: translateY(0); 1492 | transform: translateY(0); 1493 | } 1494 | 1495 | 100% { 1496 | opacity: 0; 1497 | -webkit-transform: translateY(-2000px); 1498 | transform: translateY(-2000px); 1499 | } 1500 | } 1501 | 1502 | @keyframes fadeOutUpBig { 1503 | 0% { 1504 | opacity: 1; 1505 | -webkit-transform: translateY(0); 1506 | -ms-transform: translateY(0); 1507 | transform: translateY(0); 1508 | } 1509 | 1510 | 100% { 1511 | opacity: 0; 1512 | -webkit-transform: translateY(-2000px); 1513 | -ms-transform: translateY(-2000px); 1514 | transform: translateY(-2000px); 1515 | } 1516 | } 1517 | 1518 | .fadeOutUpBig { 1519 | -webkit-animation-name: fadeOutUpBig; 1520 | animation-name: fadeOutUpBig; 1521 | } 1522 | 1523 | @-webkit-keyframes flip { 1524 | 0% { 1525 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1526 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1527 | -webkit-animation-timing-function: ease-out; 1528 | animation-timing-function: ease-out; 1529 | } 1530 | 1531 | 40% { 1532 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1533 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1534 | -webkit-animation-timing-function: ease-out; 1535 | animation-timing-function: ease-out; 1536 | } 1537 | 1538 | 50% { 1539 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1540 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1541 | -webkit-animation-timing-function: ease-in; 1542 | animation-timing-function: ease-in; 1543 | } 1544 | 1545 | 80% { 1546 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1547 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1548 | -webkit-animation-timing-function: ease-in; 1549 | animation-timing-function: ease-in; 1550 | } 1551 | 1552 | 100% { 1553 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1554 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1555 | -webkit-animation-timing-function: ease-in; 1556 | animation-timing-function: ease-in; 1557 | } 1558 | } 1559 | 1560 | @keyframes flip { 1561 | 0% { 1562 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1563 | -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1564 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1565 | -webkit-animation-timing-function: ease-out; 1566 | animation-timing-function: ease-out; 1567 | } 1568 | 1569 | 40% { 1570 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1571 | -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1572 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1573 | -webkit-animation-timing-function: ease-out; 1574 | animation-timing-function: ease-out; 1575 | } 1576 | 1577 | 50% { 1578 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1579 | -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1580 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1581 | -webkit-animation-timing-function: ease-in; 1582 | animation-timing-function: ease-in; 1583 | } 1584 | 1585 | 80% { 1586 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1587 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1588 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1589 | -webkit-animation-timing-function: ease-in; 1590 | animation-timing-function: ease-in; 1591 | } 1592 | 1593 | 100% { 1594 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1595 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1596 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1597 | -webkit-animation-timing-function: ease-in; 1598 | animation-timing-function: ease-in; 1599 | } 1600 | } 1601 | 1602 | .animated.flip { 1603 | -webkit-backface-visibility: visible; 1604 | -ms-backface-visibility: visible; 1605 | backface-visibility: visible; 1606 | -webkit-animation-name: flip; 1607 | animation-name: flip; 1608 | } 1609 | 1610 | @-webkit-keyframes flipInX { 1611 | 0% { 1612 | -webkit-transform: perspective(400px) rotateX(90deg); 1613 | transform: perspective(400px) rotateX(90deg); 1614 | opacity: 0; 1615 | } 1616 | 1617 | 40% { 1618 | -webkit-transform: perspective(400px) rotateX(-10deg); 1619 | transform: perspective(400px) rotateX(-10deg); 1620 | } 1621 | 1622 | 70% { 1623 | -webkit-transform: perspective(400px) rotateX(10deg); 1624 | transform: perspective(400px) rotateX(10deg); 1625 | } 1626 | 1627 | 100% { 1628 | -webkit-transform: perspective(400px) rotateX(0deg); 1629 | transform: perspective(400px) rotateX(0deg); 1630 | opacity: 1; 1631 | } 1632 | } 1633 | 1634 | @keyframes flipInX { 1635 | 0% { 1636 | -webkit-transform: perspective(400px) rotateX(90deg); 1637 | -ms-transform: perspective(400px) rotateX(90deg); 1638 | transform: perspective(400px) rotateX(90deg); 1639 | opacity: 0; 1640 | } 1641 | 1642 | 40% { 1643 | -webkit-transform: perspective(400px) rotateX(-10deg); 1644 | -ms-transform: perspective(400px) rotateX(-10deg); 1645 | transform: perspective(400px) rotateX(-10deg); 1646 | } 1647 | 1648 | 70% { 1649 | -webkit-transform: perspective(400px) rotateX(10deg); 1650 | -ms-transform: perspective(400px) rotateX(10deg); 1651 | transform: perspective(400px) rotateX(10deg); 1652 | } 1653 | 1654 | 100% { 1655 | -webkit-transform: perspective(400px) rotateX(0deg); 1656 | -ms-transform: perspective(400px) rotateX(0deg); 1657 | transform: perspective(400px) rotateX(0deg); 1658 | opacity: 1; 1659 | } 1660 | } 1661 | 1662 | .flipInX { 1663 | -webkit-backface-visibility: visible !important; 1664 | -ms-backface-visibility: visible !important; 1665 | backface-visibility: visible !important; 1666 | -webkit-animation-name: flipInX; 1667 | animation-name: flipInX; 1668 | } 1669 | 1670 | @-webkit-keyframes flipInY { 1671 | 0% { 1672 | -webkit-transform: perspective(400px) rotateY(90deg); 1673 | transform: perspective(400px) rotateY(90deg); 1674 | opacity: 0; 1675 | } 1676 | 1677 | 40% { 1678 | -webkit-transform: perspective(400px) rotateY(-10deg); 1679 | transform: perspective(400px) rotateY(-10deg); 1680 | } 1681 | 1682 | 70% { 1683 | -webkit-transform: perspective(400px) rotateY(10deg); 1684 | transform: perspective(400px) rotateY(10deg); 1685 | } 1686 | 1687 | 100% { 1688 | -webkit-transform: perspective(400px) rotateY(0deg); 1689 | transform: perspective(400px) rotateY(0deg); 1690 | opacity: 1; 1691 | } 1692 | } 1693 | 1694 | @keyframes flipInY { 1695 | 0% { 1696 | -webkit-transform: perspective(400px) rotateY(90deg); 1697 | -ms-transform: perspective(400px) rotateY(90deg); 1698 | transform: perspective(400px) rotateY(90deg); 1699 | opacity: 0; 1700 | } 1701 | 1702 | 40% { 1703 | -webkit-transform: perspective(400px) rotateY(-10deg); 1704 | -ms-transform: perspective(400px) rotateY(-10deg); 1705 | transform: perspective(400px) rotateY(-10deg); 1706 | } 1707 | 1708 | 70% { 1709 | -webkit-transform: perspective(400px) rotateY(10deg); 1710 | -ms-transform: perspective(400px) rotateY(10deg); 1711 | transform: perspective(400px) rotateY(10deg); 1712 | } 1713 | 1714 | 100% { 1715 | -webkit-transform: perspective(400px) rotateY(0deg); 1716 | -ms-transform: perspective(400px) rotateY(0deg); 1717 | transform: perspective(400px) rotateY(0deg); 1718 | opacity: 1; 1719 | } 1720 | } 1721 | 1722 | .flipInY { 1723 | -webkit-backface-visibility: visible !important; 1724 | -ms-backface-visibility: visible !important; 1725 | backface-visibility: visible !important; 1726 | -webkit-animation-name: flipInY; 1727 | animation-name: flipInY; 1728 | } 1729 | 1730 | @-webkit-keyframes flipOutX { 1731 | 0% { 1732 | -webkit-transform: perspective(400px) rotateX(0deg); 1733 | transform: perspective(400px) rotateX(0deg); 1734 | opacity: 1; 1735 | } 1736 | 1737 | 100% { 1738 | -webkit-transform: perspective(400px) rotateX(90deg); 1739 | transform: perspective(400px) rotateX(90deg); 1740 | opacity: 0; 1741 | } 1742 | } 1743 | 1744 | @keyframes flipOutX { 1745 | 0% { 1746 | -webkit-transform: perspective(400px) rotateX(0deg); 1747 | -ms-transform: perspective(400px) rotateX(0deg); 1748 | transform: perspective(400px) rotateX(0deg); 1749 | opacity: 1; 1750 | } 1751 | 1752 | 100% { 1753 | -webkit-transform: perspective(400px) rotateX(90deg); 1754 | -ms-transform: perspective(400px) rotateX(90deg); 1755 | transform: perspective(400px) rotateX(90deg); 1756 | opacity: 0; 1757 | } 1758 | } 1759 | 1760 | .flipOutX { 1761 | -webkit-animation-name: flipOutX; 1762 | animation-name: flipOutX; 1763 | -webkit-backface-visibility: visible !important; 1764 | -ms-backface-visibility: visible !important; 1765 | backface-visibility: visible !important; 1766 | } 1767 | 1768 | @-webkit-keyframes flipOutY { 1769 | 0% { 1770 | -webkit-transform: perspective(400px) rotateY(0deg); 1771 | transform: perspective(400px) rotateY(0deg); 1772 | opacity: 1; 1773 | } 1774 | 1775 | 100% { 1776 | -webkit-transform: perspective(400px) rotateY(90deg); 1777 | transform: perspective(400px) rotateY(90deg); 1778 | opacity: 0; 1779 | } 1780 | } 1781 | 1782 | @keyframes flipOutY { 1783 | 0% { 1784 | -webkit-transform: perspective(400px) rotateY(0deg); 1785 | -ms-transform: perspective(400px) rotateY(0deg); 1786 | transform: perspective(400px) rotateY(0deg); 1787 | opacity: 1; 1788 | } 1789 | 1790 | 100% { 1791 | -webkit-transform: perspective(400px) rotateY(90deg); 1792 | -ms-transform: perspective(400px) rotateY(90deg); 1793 | transform: perspective(400px) rotateY(90deg); 1794 | opacity: 0; 1795 | } 1796 | } 1797 | 1798 | .flipOutY { 1799 | -webkit-backface-visibility: visible !important; 1800 | -ms-backface-visibility: visible !important; 1801 | backface-visibility: visible !important; 1802 | -webkit-animation-name: flipOutY; 1803 | animation-name: flipOutY; 1804 | } 1805 | 1806 | @-webkit-keyframes lightSpeedIn { 1807 | 0% { 1808 | -webkit-transform: translateX(100%) skewX(-30deg); 1809 | transform: translateX(100%) skewX(-30deg); 1810 | opacity: 0; 1811 | } 1812 | 1813 | 60% { 1814 | -webkit-transform: translateX(-20%) skewX(30deg); 1815 | transform: translateX(-20%) skewX(30deg); 1816 | opacity: 1; 1817 | } 1818 | 1819 | 80% { 1820 | -webkit-transform: translateX(0%) skewX(-15deg); 1821 | transform: translateX(0%) skewX(-15deg); 1822 | opacity: 1; 1823 | } 1824 | 1825 | 100% { 1826 | -webkit-transform: translateX(0%) skewX(0deg); 1827 | transform: translateX(0%) skewX(0deg); 1828 | opacity: 1; 1829 | } 1830 | } 1831 | 1832 | @keyframes lightSpeedIn { 1833 | 0% { 1834 | -webkit-transform: translateX(100%) skewX(-30deg); 1835 | -ms-transform: translateX(100%) skewX(-30deg); 1836 | transform: translateX(100%) skewX(-30deg); 1837 | opacity: 0; 1838 | } 1839 | 1840 | 60% { 1841 | -webkit-transform: translateX(-20%) skewX(30deg); 1842 | -ms-transform: translateX(-20%) skewX(30deg); 1843 | transform: translateX(-20%) skewX(30deg); 1844 | opacity: 1; 1845 | } 1846 | 1847 | 80% { 1848 | -webkit-transform: translateX(0%) skewX(-15deg); 1849 | -ms-transform: translateX(0%) skewX(-15deg); 1850 | transform: translateX(0%) skewX(-15deg); 1851 | opacity: 1; 1852 | } 1853 | 1854 | 100% { 1855 | -webkit-transform: translateX(0%) skewX(0deg); 1856 | -ms-transform: translateX(0%) skewX(0deg); 1857 | transform: translateX(0%) skewX(0deg); 1858 | opacity: 1; 1859 | } 1860 | } 1861 | 1862 | .lightSpeedIn { 1863 | -webkit-animation-name: lightSpeedIn; 1864 | animation-name: lightSpeedIn; 1865 | -webkit-animation-timing-function: ease-out; 1866 | animation-timing-function: ease-out; 1867 | } 1868 | 1869 | @-webkit-keyframes lightSpeedOut { 1870 | 0% { 1871 | -webkit-transform: translateX(0%) skewX(0deg); 1872 | transform: translateX(0%) skewX(0deg); 1873 | opacity: 1; 1874 | } 1875 | 1876 | 100% { 1877 | -webkit-transform: translateX(100%) skewX(-30deg); 1878 | transform: translateX(100%) skewX(-30deg); 1879 | opacity: 0; 1880 | } 1881 | } 1882 | 1883 | @keyframes lightSpeedOut { 1884 | 0% { 1885 | -webkit-transform: translateX(0%) skewX(0deg); 1886 | -ms-transform: translateX(0%) skewX(0deg); 1887 | transform: translateX(0%) skewX(0deg); 1888 | opacity: 1; 1889 | } 1890 | 1891 | 100% { 1892 | -webkit-transform: translateX(100%) skewX(-30deg); 1893 | -ms-transform: translateX(100%) skewX(-30deg); 1894 | transform: translateX(100%) skewX(-30deg); 1895 | opacity: 0; 1896 | } 1897 | } 1898 | 1899 | .lightSpeedOut { 1900 | -webkit-animation-name: lightSpeedOut; 1901 | animation-name: lightSpeedOut; 1902 | -webkit-animation-timing-function: ease-in; 1903 | animation-timing-function: ease-in; 1904 | } 1905 | 1906 | @-webkit-keyframes rotateIn { 1907 | 0% { 1908 | -webkit-transform-origin: center center; 1909 | transform-origin: center center; 1910 | -webkit-transform: rotate(-200deg); 1911 | transform: rotate(-200deg); 1912 | opacity: 0; 1913 | } 1914 | 1915 | 100% { 1916 | -webkit-transform-origin: center center; 1917 | transform-origin: center center; 1918 | -webkit-transform: rotate(0); 1919 | transform: rotate(0); 1920 | opacity: 1; 1921 | } 1922 | } 1923 | 1924 | @keyframes rotateIn { 1925 | 0% { 1926 | -webkit-transform-origin: center center; 1927 | -ms-transform-origin: center center; 1928 | transform-origin: center center; 1929 | -webkit-transform: rotate(-200deg); 1930 | -ms-transform: rotate(-200deg); 1931 | transform: rotate(-200deg); 1932 | opacity: 0; 1933 | } 1934 | 1935 | 100% { 1936 | -webkit-transform-origin: center center; 1937 | -ms-transform-origin: center center; 1938 | transform-origin: center center; 1939 | -webkit-transform: rotate(0); 1940 | -ms-transform: rotate(0); 1941 | transform: rotate(0); 1942 | opacity: 1; 1943 | } 1944 | } 1945 | 1946 | .rotateIn { 1947 | -webkit-animation-name: rotateIn; 1948 | animation-name: rotateIn; 1949 | } 1950 | 1951 | @-webkit-keyframes rotateInDownLeft { 1952 | 0% { 1953 | -webkit-transform-origin: left bottom; 1954 | transform-origin: left bottom; 1955 | -webkit-transform: rotate(-90deg); 1956 | transform: rotate(-90deg); 1957 | opacity: 0; 1958 | } 1959 | 1960 | 100% { 1961 | -webkit-transform-origin: left bottom; 1962 | transform-origin: left bottom; 1963 | -webkit-transform: rotate(0); 1964 | transform: rotate(0); 1965 | opacity: 1; 1966 | } 1967 | } 1968 | 1969 | @keyframes rotateInDownLeft { 1970 | 0% { 1971 | -webkit-transform-origin: left bottom; 1972 | -ms-transform-origin: left bottom; 1973 | transform-origin: left bottom; 1974 | -webkit-transform: rotate(-90deg); 1975 | -ms-transform: rotate(-90deg); 1976 | transform: rotate(-90deg); 1977 | opacity: 0; 1978 | } 1979 | 1980 | 100% { 1981 | -webkit-transform-origin: left bottom; 1982 | -ms-transform-origin: left bottom; 1983 | transform-origin: left bottom; 1984 | -webkit-transform: rotate(0); 1985 | -ms-transform: rotate(0); 1986 | transform: rotate(0); 1987 | opacity: 1; 1988 | } 1989 | } 1990 | 1991 | .rotateInDownLeft { 1992 | -webkit-animation-name: rotateInDownLeft; 1993 | animation-name: rotateInDownLeft; 1994 | } 1995 | 1996 | @-webkit-keyframes rotateInDownRight { 1997 | 0% { 1998 | -webkit-transform-origin: right bottom; 1999 | transform-origin: right bottom; 2000 | -webkit-transform: rotate(90deg); 2001 | transform: rotate(90deg); 2002 | opacity: 0; 2003 | } 2004 | 2005 | 100% { 2006 | -webkit-transform-origin: right bottom; 2007 | transform-origin: right bottom; 2008 | -webkit-transform: rotate(0); 2009 | transform: rotate(0); 2010 | opacity: 1; 2011 | } 2012 | } 2013 | 2014 | @keyframes rotateInDownRight { 2015 | 0% { 2016 | -webkit-transform-origin: right bottom; 2017 | -ms-transform-origin: right bottom; 2018 | transform-origin: right bottom; 2019 | -webkit-transform: rotate(90deg); 2020 | -ms-transform: rotate(90deg); 2021 | transform: rotate(90deg); 2022 | opacity: 0; 2023 | } 2024 | 2025 | 100% { 2026 | -webkit-transform-origin: right bottom; 2027 | -ms-transform-origin: right bottom; 2028 | transform-origin: right bottom; 2029 | -webkit-transform: rotate(0); 2030 | -ms-transform: rotate(0); 2031 | transform: rotate(0); 2032 | opacity: 1; 2033 | } 2034 | } 2035 | 2036 | .rotateInDownRight { 2037 | -webkit-animation-name: rotateInDownRight; 2038 | animation-name: rotateInDownRight; 2039 | } 2040 | 2041 | @-webkit-keyframes rotateInUpLeft { 2042 | 0% { 2043 | -webkit-transform-origin: left bottom; 2044 | transform-origin: left bottom; 2045 | -webkit-transform: rotate(90deg); 2046 | transform: rotate(90deg); 2047 | opacity: 0; 2048 | } 2049 | 2050 | 100% { 2051 | -webkit-transform-origin: left bottom; 2052 | transform-origin: left bottom; 2053 | -webkit-transform: rotate(0); 2054 | transform: rotate(0); 2055 | opacity: 1; 2056 | } 2057 | } 2058 | 2059 | @keyframes rotateInUpLeft { 2060 | 0% { 2061 | -webkit-transform-origin: left bottom; 2062 | -ms-transform-origin: left bottom; 2063 | transform-origin: left bottom; 2064 | -webkit-transform: rotate(90deg); 2065 | -ms-transform: rotate(90deg); 2066 | transform: rotate(90deg); 2067 | opacity: 0; 2068 | } 2069 | 2070 | 100% { 2071 | -webkit-transform-origin: left bottom; 2072 | -ms-transform-origin: left bottom; 2073 | transform-origin: left bottom; 2074 | -webkit-transform: rotate(0); 2075 | -ms-transform: rotate(0); 2076 | transform: rotate(0); 2077 | opacity: 1; 2078 | } 2079 | } 2080 | 2081 | .rotateInUpLeft { 2082 | -webkit-animation-name: rotateInUpLeft; 2083 | animation-name: rotateInUpLeft; 2084 | } 2085 | 2086 | @-webkit-keyframes rotateInUpRight { 2087 | 0% { 2088 | -webkit-transform-origin: right bottom; 2089 | transform-origin: right bottom; 2090 | -webkit-transform: rotate(-90deg); 2091 | transform: rotate(-90deg); 2092 | opacity: 0; 2093 | } 2094 | 2095 | 100% { 2096 | -webkit-transform-origin: right bottom; 2097 | transform-origin: right bottom; 2098 | -webkit-transform: rotate(0); 2099 | transform: rotate(0); 2100 | opacity: 1; 2101 | } 2102 | } 2103 | 2104 | @keyframes rotateInUpRight { 2105 | 0% { 2106 | -webkit-transform-origin: right bottom; 2107 | -ms-transform-origin: right bottom; 2108 | transform-origin: right bottom; 2109 | -webkit-transform: rotate(-90deg); 2110 | -ms-transform: rotate(-90deg); 2111 | transform: rotate(-90deg); 2112 | opacity: 0; 2113 | } 2114 | 2115 | 100% { 2116 | -webkit-transform-origin: right bottom; 2117 | -ms-transform-origin: right bottom; 2118 | transform-origin: right bottom; 2119 | -webkit-transform: rotate(0); 2120 | -ms-transform: rotate(0); 2121 | transform: rotate(0); 2122 | opacity: 1; 2123 | } 2124 | } 2125 | 2126 | .rotateInUpRight { 2127 | -webkit-animation-name: rotateInUpRight; 2128 | animation-name: rotateInUpRight; 2129 | } 2130 | 2131 | @-webkit-keyframes rotateOut { 2132 | 0% { 2133 | -webkit-transform-origin: center center; 2134 | transform-origin: center center; 2135 | -webkit-transform: rotate(0); 2136 | transform: rotate(0); 2137 | opacity: 1; 2138 | } 2139 | 2140 | 100% { 2141 | -webkit-transform-origin: center center; 2142 | transform-origin: center center; 2143 | -webkit-transform: rotate(200deg); 2144 | transform: rotate(200deg); 2145 | opacity: 0; 2146 | } 2147 | } 2148 | 2149 | @keyframes rotateOut { 2150 | 0% { 2151 | -webkit-transform-origin: center center; 2152 | -ms-transform-origin: center center; 2153 | transform-origin: center center; 2154 | -webkit-transform: rotate(0); 2155 | -ms-transform: rotate(0); 2156 | transform: rotate(0); 2157 | opacity: 1; 2158 | } 2159 | 2160 | 100% { 2161 | -webkit-transform-origin: center center; 2162 | -ms-transform-origin: center center; 2163 | transform-origin: center center; 2164 | -webkit-transform: rotate(200deg); 2165 | -ms-transform: rotate(200deg); 2166 | transform: rotate(200deg); 2167 | opacity: 0; 2168 | } 2169 | } 2170 | 2171 | .rotateOut { 2172 | -webkit-animation-name: rotateOut; 2173 | animation-name: rotateOut; 2174 | } 2175 | 2176 | @-webkit-keyframes rotateOutDownLeft { 2177 | 0% { 2178 | -webkit-transform-origin: left bottom; 2179 | transform-origin: left bottom; 2180 | -webkit-transform: rotate(0); 2181 | transform: rotate(0); 2182 | opacity: 1; 2183 | } 2184 | 2185 | 100% { 2186 | -webkit-transform-origin: left bottom; 2187 | transform-origin: left bottom; 2188 | -webkit-transform: rotate(90deg); 2189 | transform: rotate(90deg); 2190 | opacity: 0; 2191 | } 2192 | } 2193 | 2194 | @keyframes rotateOutDownLeft { 2195 | 0% { 2196 | -webkit-transform-origin: left bottom; 2197 | -ms-transform-origin: left bottom; 2198 | transform-origin: left bottom; 2199 | -webkit-transform: rotate(0); 2200 | -ms-transform: rotate(0); 2201 | transform: rotate(0); 2202 | opacity: 1; 2203 | } 2204 | 2205 | 100% { 2206 | -webkit-transform-origin: left bottom; 2207 | -ms-transform-origin: left bottom; 2208 | transform-origin: left bottom; 2209 | -webkit-transform: rotate(90deg); 2210 | -ms-transform: rotate(90deg); 2211 | transform: rotate(90deg); 2212 | opacity: 0; 2213 | } 2214 | } 2215 | 2216 | .rotateOutDownLeft { 2217 | -webkit-animation-name: rotateOutDownLeft; 2218 | animation-name: rotateOutDownLeft; 2219 | } 2220 | 2221 | @-webkit-keyframes rotateOutDownRight { 2222 | 0% { 2223 | -webkit-transform-origin: right bottom; 2224 | transform-origin: right bottom; 2225 | -webkit-transform: rotate(0); 2226 | transform: rotate(0); 2227 | opacity: 1; 2228 | } 2229 | 2230 | 100% { 2231 | -webkit-transform-origin: right bottom; 2232 | transform-origin: right bottom; 2233 | -webkit-transform: rotate(-90deg); 2234 | transform: rotate(-90deg); 2235 | opacity: 0; 2236 | } 2237 | } 2238 | 2239 | @keyframes rotateOutDownRight { 2240 | 0% { 2241 | -webkit-transform-origin: right bottom; 2242 | -ms-transform-origin: right bottom; 2243 | transform-origin: right bottom; 2244 | -webkit-transform: rotate(0); 2245 | -ms-transform: rotate(0); 2246 | transform: rotate(0); 2247 | opacity: 1; 2248 | } 2249 | 2250 | 100% { 2251 | -webkit-transform-origin: right bottom; 2252 | -ms-transform-origin: right bottom; 2253 | transform-origin: right bottom; 2254 | -webkit-transform: rotate(-90deg); 2255 | -ms-transform: rotate(-90deg); 2256 | transform: rotate(-90deg); 2257 | opacity: 0; 2258 | } 2259 | } 2260 | 2261 | .rotateOutDownRight { 2262 | -webkit-animation-name: rotateOutDownRight; 2263 | animation-name: rotateOutDownRight; 2264 | } 2265 | 2266 | @-webkit-keyframes rotateOutUpLeft { 2267 | 0% { 2268 | -webkit-transform-origin: left bottom; 2269 | transform-origin: left bottom; 2270 | -webkit-transform: rotate(0); 2271 | transform: rotate(0); 2272 | opacity: 1; 2273 | } 2274 | 2275 | 100% { 2276 | -webkit-transform-origin: left bottom; 2277 | transform-origin: left bottom; 2278 | -webkit-transform: rotate(-90deg); 2279 | transform: rotate(-90deg); 2280 | opacity: 0; 2281 | } 2282 | } 2283 | 2284 | @keyframes rotateOutUpLeft { 2285 | 0% { 2286 | -webkit-transform-origin: left bottom; 2287 | -ms-transform-origin: left bottom; 2288 | transform-origin: left bottom; 2289 | -webkit-transform: rotate(0); 2290 | -ms-transform: rotate(0); 2291 | transform: rotate(0); 2292 | opacity: 1; 2293 | } 2294 | 2295 | 100% { 2296 | -webkit-transform-origin: left bottom; 2297 | -ms-transform-origin: left bottom; 2298 | transform-origin: left bottom; 2299 | -webkit-transform: rotate(-90deg); 2300 | -ms-transform: rotate(-90deg); 2301 | transform: rotate(-90deg); 2302 | opacity: 0; 2303 | } 2304 | } 2305 | 2306 | .rotateOutUpLeft { 2307 | -webkit-animation-name: rotateOutUpLeft; 2308 | animation-name: rotateOutUpLeft; 2309 | } 2310 | 2311 | @-webkit-keyframes rotateOutUpRight { 2312 | 0% { 2313 | -webkit-transform-origin: right bottom; 2314 | transform-origin: right bottom; 2315 | -webkit-transform: rotate(0); 2316 | transform: rotate(0); 2317 | opacity: 1; 2318 | } 2319 | 2320 | 100% { 2321 | -webkit-transform-origin: right bottom; 2322 | transform-origin: right bottom; 2323 | -webkit-transform: rotate(90deg); 2324 | transform: rotate(90deg); 2325 | opacity: 0; 2326 | } 2327 | } 2328 | 2329 | @keyframes rotateOutUpRight { 2330 | 0% { 2331 | -webkit-transform-origin: right bottom; 2332 | -ms-transform-origin: right bottom; 2333 | transform-origin: right bottom; 2334 | -webkit-transform: rotate(0); 2335 | -ms-transform: rotate(0); 2336 | transform: rotate(0); 2337 | opacity: 1; 2338 | } 2339 | 2340 | 100% { 2341 | -webkit-transform-origin: right bottom; 2342 | -ms-transform-origin: right bottom; 2343 | transform-origin: right bottom; 2344 | -webkit-transform: rotate(90deg); 2345 | -ms-transform: rotate(90deg); 2346 | transform: rotate(90deg); 2347 | opacity: 0; 2348 | } 2349 | } 2350 | 2351 | .rotateOutUpRight { 2352 | -webkit-animation-name: rotateOutUpRight; 2353 | animation-name: rotateOutUpRight; 2354 | } 2355 | 2356 | @-webkit-keyframes slideInDown { 2357 | 0% { 2358 | opacity: 0; 2359 | -webkit-transform: translateY(-2000px); 2360 | transform: translateY(-2000px); 2361 | } 2362 | 2363 | 100% { 2364 | -webkit-transform: translateY(0); 2365 | transform: translateY(0); 2366 | } 2367 | } 2368 | 2369 | @keyframes slideInDown { 2370 | 0% { 2371 | opacity: 0; 2372 | -webkit-transform: translateY(-2000px); 2373 | -ms-transform: translateY(-2000px); 2374 | transform: translateY(-2000px); 2375 | } 2376 | 2377 | 100% { 2378 | -webkit-transform: translateY(0); 2379 | -ms-transform: translateY(0); 2380 | transform: translateY(0); 2381 | } 2382 | } 2383 | 2384 | .slideInDown { 2385 | -webkit-animation-name: slideInDown; 2386 | animation-name: slideInDown; 2387 | } 2388 | 2389 | @-webkit-keyframes slideInLeft { 2390 | 0% { 2391 | opacity: 0; 2392 | -webkit-transform: translateX(-2000px); 2393 | transform: translateX(-2000px); 2394 | } 2395 | 2396 | 100% { 2397 | -webkit-transform: translateX(0); 2398 | transform: translateX(0); 2399 | } 2400 | } 2401 | 2402 | @keyframes slideInLeft { 2403 | 0% { 2404 | opacity: 0; 2405 | -webkit-transform: translateX(-2000px); 2406 | -ms-transform: translateX(-2000px); 2407 | transform: translateX(-2000px); 2408 | } 2409 | 2410 | 100% { 2411 | -webkit-transform: translateX(0); 2412 | -ms-transform: translateX(0); 2413 | transform: translateX(0); 2414 | } 2415 | } 2416 | 2417 | .slideInLeft { 2418 | -webkit-animation-name: slideInLeft; 2419 | animation-name: slideInLeft; 2420 | } 2421 | 2422 | @-webkit-keyframes slideInRight { 2423 | 0% { 2424 | opacity: 0; 2425 | -webkit-transform: translateX(2000px); 2426 | transform: translateX(2000px); 2427 | } 2428 | 2429 | 100% { 2430 | -webkit-transform: translateX(0); 2431 | transform: translateX(0); 2432 | } 2433 | } 2434 | 2435 | @keyframes slideInRight { 2436 | 0% { 2437 | opacity: 0; 2438 | -webkit-transform: translateX(2000px); 2439 | -ms-transform: translateX(2000px); 2440 | transform: translateX(2000px); 2441 | } 2442 | 2443 | 100% { 2444 | -webkit-transform: translateX(0); 2445 | -ms-transform: translateX(0); 2446 | transform: translateX(0); 2447 | } 2448 | } 2449 | 2450 | .slideInRight { 2451 | -webkit-animation-name: slideInRight; 2452 | animation-name: slideInRight; 2453 | } 2454 | 2455 | @-webkit-keyframes slideOutLeft { 2456 | 0% { 2457 | -webkit-transform: translateX(0); 2458 | transform: translateX(0); 2459 | } 2460 | 2461 | 100% { 2462 | opacity: 0; 2463 | -webkit-transform: translateX(-2000px); 2464 | transform: translateX(-2000px); 2465 | } 2466 | } 2467 | 2468 | @keyframes slideOutLeft { 2469 | 0% { 2470 | -webkit-transform: translateX(0); 2471 | -ms-transform: translateX(0); 2472 | transform: translateX(0); 2473 | } 2474 | 2475 | 100% { 2476 | opacity: 0; 2477 | -webkit-transform: translateX(-2000px); 2478 | -ms-transform: translateX(-2000px); 2479 | transform: translateX(-2000px); 2480 | } 2481 | } 2482 | 2483 | .slideOutLeft { 2484 | -webkit-animation-name: slideOutLeft; 2485 | animation-name: slideOutLeft; 2486 | } 2487 | 2488 | @-webkit-keyframes slideOutRight { 2489 | 0% { 2490 | -webkit-transform: translateX(0); 2491 | transform: translateX(0); 2492 | } 2493 | 2494 | 100% { 2495 | opacity: 0; 2496 | -webkit-transform: translateX(2000px); 2497 | transform: translateX(2000px); 2498 | } 2499 | } 2500 | 2501 | @keyframes slideOutRight { 2502 | 0% { 2503 | -webkit-transform: translateX(0); 2504 | -ms-transform: translateX(0); 2505 | transform: translateX(0); 2506 | } 2507 | 2508 | 100% { 2509 | opacity: 0; 2510 | -webkit-transform: translateX(2000px); 2511 | -ms-transform: translateX(2000px); 2512 | transform: translateX(2000px); 2513 | } 2514 | } 2515 | 2516 | .slideOutRight { 2517 | -webkit-animation-name: slideOutRight; 2518 | animation-name: slideOutRight; 2519 | } 2520 | 2521 | @-webkit-keyframes slideOutUp { 2522 | 0% { 2523 | -webkit-transform: translateY(0); 2524 | transform: translateY(0); 2525 | } 2526 | 2527 | 100% { 2528 | opacity: 0; 2529 | -webkit-transform: translateY(-2000px); 2530 | transform: translateY(-2000px); 2531 | } 2532 | } 2533 | 2534 | @keyframes slideOutUp { 2535 | 0% { 2536 | -webkit-transform: translateY(0); 2537 | -ms-transform: translateY(0); 2538 | transform: translateY(0); 2539 | } 2540 | 2541 | 100% { 2542 | opacity: 0; 2543 | -webkit-transform: translateY(-2000px); 2544 | -ms-transform: translateY(-2000px); 2545 | transform: translateY(-2000px); 2546 | } 2547 | } 2548 | 2549 | .slideOutUp { 2550 | -webkit-animation-name: slideOutUp; 2551 | animation-name: slideOutUp; 2552 | } 2553 | 2554 | @-webkit-keyframes hinge { 2555 | 0% { 2556 | -webkit-transform: rotate(0); 2557 | transform: rotate(0); 2558 | -webkit-transform-origin: top left; 2559 | transform-origin: top left; 2560 | -webkit-animation-timing-function: ease-in-out; 2561 | animation-timing-function: ease-in-out; 2562 | } 2563 | 2564 | 20%, 60% { 2565 | -webkit-transform: rotate(80deg); 2566 | transform: rotate(80deg); 2567 | -webkit-transform-origin: top left; 2568 | transform-origin: top left; 2569 | -webkit-animation-timing-function: ease-in-out; 2570 | animation-timing-function: ease-in-out; 2571 | } 2572 | 2573 | 40% { 2574 | -webkit-transform: rotate(60deg); 2575 | transform: rotate(60deg); 2576 | -webkit-transform-origin: top left; 2577 | transform-origin: top left; 2578 | -webkit-animation-timing-function: ease-in-out; 2579 | animation-timing-function: ease-in-out; 2580 | } 2581 | 2582 | 80% { 2583 | -webkit-transform: rotate(60deg) translateY(0); 2584 | transform: rotate(60deg) translateY(0); 2585 | opacity: 1; 2586 | -webkit-transform-origin: top left; 2587 | transform-origin: top left; 2588 | -webkit-animation-timing-function: ease-in-out; 2589 | animation-timing-function: ease-in-out; 2590 | } 2591 | 2592 | 100% { 2593 | -webkit-transform: translateY(700px); 2594 | transform: translateY(700px); 2595 | opacity: 0; 2596 | } 2597 | } 2598 | 2599 | @keyframes hinge { 2600 | 0% { 2601 | -webkit-transform: rotate(0); 2602 | -ms-transform: rotate(0); 2603 | transform: rotate(0); 2604 | -webkit-transform-origin: top left; 2605 | -ms-transform-origin: top left; 2606 | transform-origin: top left; 2607 | -webkit-animation-timing-function: ease-in-out; 2608 | animation-timing-function: ease-in-out; 2609 | } 2610 | 2611 | 20%, 60% { 2612 | -webkit-transform: rotate(80deg); 2613 | -ms-transform: rotate(80deg); 2614 | transform: rotate(80deg); 2615 | -webkit-transform-origin: top left; 2616 | -ms-transform-origin: top left; 2617 | transform-origin: top left; 2618 | -webkit-animation-timing-function: ease-in-out; 2619 | animation-timing-function: ease-in-out; 2620 | } 2621 | 2622 | 40% { 2623 | -webkit-transform: rotate(60deg); 2624 | -ms-transform: rotate(60deg); 2625 | transform: rotate(60deg); 2626 | -webkit-transform-origin: top left; 2627 | -ms-transform-origin: top left; 2628 | transform-origin: top left; 2629 | -webkit-animation-timing-function: ease-in-out; 2630 | animation-timing-function: ease-in-out; 2631 | } 2632 | 2633 | 80% { 2634 | -webkit-transform: rotate(60deg) translateY(0); 2635 | -ms-transform: rotate(60deg) translateY(0); 2636 | transform: rotate(60deg) translateY(0); 2637 | opacity: 1; 2638 | -webkit-transform-origin: top left; 2639 | -ms-transform-origin: top left; 2640 | transform-origin: top left; 2641 | -webkit-animation-timing-function: ease-in-out; 2642 | animation-timing-function: ease-in-out; 2643 | } 2644 | 2645 | 100% { 2646 | -webkit-transform: translateY(700px); 2647 | -ms-transform: translateY(700px); 2648 | transform: translateY(700px); 2649 | opacity: 0; 2650 | } 2651 | } 2652 | 2653 | .hinge { 2654 | -webkit-animation-name: hinge; 2655 | animation-name: hinge; 2656 | } 2657 | 2658 | @-webkit-keyframes rollIn { 2659 | 0% { 2660 | opacity: 0; 2661 | -webkit-transform: translateX(-100%) rotate(-120deg); 2662 | transform: translateX(-100%) rotate(-120deg); 2663 | } 2664 | 2665 | 100% { 2666 | opacity: 1; 2667 | -webkit-transform: translateX(0px) rotate(0deg); 2668 | transform: translateX(0px) rotate(0deg); 2669 | } 2670 | } 2671 | 2672 | @keyframes rollIn { 2673 | 0% { 2674 | opacity: 0; 2675 | -webkit-transform: translateX(-100%) rotate(-120deg); 2676 | -ms-transform: translateX(-100%) rotate(-120deg); 2677 | transform: translateX(-100%) rotate(-120deg); 2678 | } 2679 | 2680 | 100% { 2681 | opacity: 1; 2682 | -webkit-transform: translateX(0px) rotate(0deg); 2683 | -ms-transform: translateX(0px) rotate(0deg); 2684 | transform: translateX(0px) rotate(0deg); 2685 | } 2686 | } 2687 | 2688 | .rollIn { 2689 | -webkit-animation-name: rollIn; 2690 | animation-name: rollIn; 2691 | } 2692 | 2693 | @-webkit-keyframes rollOut { 2694 | 0% { 2695 | opacity: 1; 2696 | -webkit-transform: translateX(0px) rotate(0deg); 2697 | transform: translateX(0px) rotate(0deg); 2698 | } 2699 | 2700 | 100% { 2701 | opacity: 0; 2702 | -webkit-transform: translateX(100%) rotate(120deg); 2703 | transform: translateX(100%) rotate(120deg); 2704 | } 2705 | } 2706 | 2707 | @keyframes rollOut { 2708 | 0% { 2709 | opacity: 1; 2710 | -webkit-transform: translateX(0px) rotate(0deg); 2711 | -ms-transform: translateX(0px) rotate(0deg); 2712 | transform: translateX(0px) rotate(0deg); 2713 | } 2714 | 2715 | 100% { 2716 | opacity: 0; 2717 | -webkit-transform: translateX(100%) rotate(120deg); 2718 | -ms-transform: translateX(100%) rotate(120deg); 2719 | transform: translateX(100%) rotate(120deg); 2720 | } 2721 | } 2722 | 2723 | .rollOut { 2724 | -webkit-animation-name: rollOut; 2725 | animation-name: rollOut; 2726 | } 2727 | -------------------------------------------------------------------------------- /css/app.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Dancing+Script|Josefin+Sans:600"); 2 | @import url("https://fonts.googleapis.com/css2?family=Karla&display=swap"); 3 | @import url("https://fonts.googleapis.com/css?family=Archivo+Black&display=swap"); 4 | @import url("https://fonts.googleapis.com/css?family=Archivo:700&display=swap"); 5 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:300i,400"); 6 | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro"); 7 | 8 | :root { 9 | --main-color: #643a7a; 10 | --secondary-color: #741caf; 11 | --sans: "josefin sans", sans serif; 12 | } 13 | 14 | html { 15 | box-sizing: border-box; 16 | } 17 | 18 | *:before, 19 | *:after { 20 | box-sizing: inherit; 21 | } 22 | 23 | html, 24 | body { 25 | width: 100%; 26 | height: 100%; 27 | margin: 0; 28 | padding: 0; 29 | } 30 | 31 | body { 32 | overflow-x: hidden; 33 | -moz-osx-font-smoothing: grayscale; 34 | -webkit-font-smoothing: antialiased; 35 | background: #f4f8fb; 36 | font-family: "Source Sans Pro", sans-serif; 37 | font-weight: 300 !important; 38 | } 39 | 40 | a { 41 | display: inline-block; 42 | color: inherit; 43 | text-decoration: none; 44 | } 45 | 46 | button { 47 | border: 0; 48 | outline: 0; 49 | cursor: pointer; 50 | } 51 | 52 | ul, 53 | ol { 54 | padding: 0; 55 | margin: 0; 56 | list-style: none; 57 | } 58 | 59 | svg { 60 | width: 100%; 61 | height: 100%; 62 | fill: currentColor; 63 | } 64 | 65 | h1, 66 | h2, 67 | h3, 68 | h4, 69 | h5 { 70 | margin: 0; 71 | } 72 | 73 | img { 74 | width: 100%; 75 | max-width: 100%; 76 | vertical-align: middle; 77 | } 78 | 79 | .container { 80 | display: grid; 81 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 82 | grid-gap: 2em; 83 | padding: 0 6%; 84 | margin-top: 10px; 85 | } 86 | 87 | .card-container { 88 | display: flex; 89 | flex-wrap: wrap; 90 | } 91 | 92 | .card-container .card1 { 93 | border: solid 1px #f2f2f2; 94 | margin: 5px; 95 | } 96 | 97 | .card-container .card1 .card-body1 { 98 | padding: 10px; 99 | } 100 | 101 | .card-container .card1 img.card-img { 102 | height: 300px; 103 | width: 300px; 104 | object-fit: cover; 105 | } 106 | .content1 { 107 | font-size: 15px; 108 | font-family: "Karla", sans-serif; 109 | } 110 | 111 | .author { 112 | font-size: 22px; 113 | font-family: "dancing script", cursive; 114 | } 115 | 116 | @media only screen and (max-width: 600px) { 117 | .container { 118 | margin-top: -70px; 119 | } 120 | } 121 | 122 | .container .card { 123 | background: #fff 50%; 124 | background-size: cover; 125 | border-radius: 5px; 126 | box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 127 | 1px 3px 8px rgba(39, 44, 49, 0.03); 128 | transition: all 0.5s ease; 129 | } 130 | 131 | .container .card:hover { 132 | box-shadow: 0 0 1px rgba(39, 44, 49, 0.1), 0 3px 16px rgba(39, 44, 49, 0.07); 133 | transition: all 0.3s ease; 134 | transform: translate3D(0, -1px, 0); 135 | } 136 | 137 | .container .card .content { 138 | display: flex; 139 | flex-direction: column; 140 | justify-content: space-between; 141 | height: 100%; 142 | min-height: 5px; 143 | padding: 10px; 144 | } 145 | 146 | .container .card .content a { 147 | display: block; 148 | color: black; 149 | } 150 | 151 | .container .card__title span { 152 | display: block; 153 | margin-bottom: 0px; 154 | color: #738a94; 155 | font-size: 12px; 156 | line-height: 1.15em; 157 | font-weight: 500; 158 | letter-spacing: 0.5px; 159 | text-transform: uppercase; 160 | } 161 | 162 | .container .card__title h2 { 163 | margin: 0 0 0em; 164 | font-size: 20px; 165 | } 166 | 167 | .container .card__description p { 168 | font-family: "Source Sans Pro", sans-serif; 169 | color: #15171a; 170 | line-height: 1.7; 171 | margin-bottom: 0px; 172 | font-size: 15px; 173 | font-weight: 100; 174 | } 175 | 176 | .container .card__footer .author { 177 | color: #738a94; 178 | text-transform: initial; 179 | letter-spacing: 0.5px; 180 | font-size: 12px; 181 | } 182 | 183 | header { 184 | display: flex; 185 | justify-content: center; 186 | align-items: center; 187 | flex-direction: column; 188 | padding: 0% 0%; 189 | background: url("../images/hack.svg") no-repeat; 190 | background-size: 100% 100%; 191 | text-align: center; 192 | height: 20vh; 193 | min-height: 550px; 194 | } 195 | 196 | header h1 { 197 | margin-bottom: 20px; 198 | font-size: 50px; 199 | color: #fff; 200 | } 201 | 202 | header h2 { 203 | font-weight: 400; 204 | letter-spacing: 6px; 205 | text-transform: uppercase; 206 | color: #191e27; 207 | } 208 | 209 | footer { 210 | color: #191e27; 211 | padding: 5% 10%; 212 | text-align: center; 213 | background-size: cover; 214 | } 215 | 216 | footer p { 217 | max-width: 730px; 218 | margin: 0 auto 20px; 219 | line-height: 1.5; 220 | } 221 | 222 | footer p a { 223 | border-bottom: 1px solid #191e27; 224 | } 225 | .vanish { 226 | display: none; 227 | } 228 | 229 | @media only screen and (max-width: 600px) { 230 | header { 231 | height: 20vh; 232 | } 233 | 234 | header h1 { 235 | font-size: 34px; 236 | font-weight: 700; 237 | line-height: 0; 238 | } 239 | 240 | header h2 { 241 | font-size: 15px; 242 | letter-spacing: 6px; 243 | text-transform: uppercase; 244 | color: #191e27; 245 | font-weight: 100; 246 | } 247 | 248 | body { 249 | background: #e8e8e8; 250 | } 251 | } 252 | 253 | .alpha { 254 | margin-top: 40px; 255 | } 256 | 257 | .alpha p { 258 | margin: 0 auto; 259 | font-family: "Source Sans Pro", sans-serif; 260 | font-size: 14px; 261 | text-align: center; 262 | } 263 | -------------------------------------------------------------------------------- /css/carousel.css: -------------------------------------------------------------------------------- 1 | 2 | .carousel { 3 | position: relative; 4 | width: 85%; 5 | left: 0; 6 | right: 0; 7 | margin: 3em auto; 8 | display: flex; 9 | flex-flow: row wrap; 10 | justify-content: center; 11 | font-family: 'Open Sans', sans-serif; 12 | } 13 | 14 | .card_car { 15 | display: flex; 16 | height: 280px; 17 | width: 200px; 18 | background-color: #17141d; 19 | border-radius: 10px; 20 | box-shadow: -1rem 0 3rem #000; 21 | transition: 0.4s ease-out; 22 | position: relative; 23 | left: 0px; 24 | } 25 | 26 | .card_car:not(:first-child) { 27 | margin-left: -50px; 28 | } 29 | 30 | .card_car:hover { 31 | transform: translateY(-20px); 32 | transition: 0.4s ease-out; 33 | } 34 | 35 | .card_car:hover ~ .card_car { 36 | position: relative; 37 | left: 50px; 38 | transition: 0.4s ease-out; 39 | } 40 | 41 | .card_title { 42 | color: white; 43 | font-size: 12px; 44 | position: absolute; 45 | left: 20px; 46 | top: 15px; 47 | } 48 | 49 | .card_title p { 50 | color: rgb(155, 108, 172); 51 | font-size: 12px; 52 | position: relative; 53 | left: 0; 54 | top: 10px; 55 | } 56 | 57 | .contributor:hover { 58 | color: rgb(194, 30, 145); 59 | font-size: 13px; 60 | } 61 | 62 | 63 | .bar { 64 | position: relative; 65 | top: 100px; 66 | left: 20px; 67 | height: 5px; 68 | width: 150px; 69 | } 70 | 71 | .emptybar { 72 | background-color: #2e3033; 73 | width: 100%; 74 | height: 100%; 75 | } 76 | 77 | .filledbar { 78 | position: relative; 79 | top: 0px; 80 | z-index: 3; 81 | width: 0px; 82 | height: 100%; 83 | background: rgb(0,154,217); 84 | background: linear-gradient(90deg, rgb(58, 0, 96) 0%, rgb(156, 9, 167) 65%, rgb(194, 30, 145) 100%); 85 | transition: 0.3s ease-out; 86 | } 87 | 88 | .card_car:hover .filledbar { 89 | width: 100%; 90 | transition: 0.3s ease-out; 91 | } 92 | 93 | .card_description { 94 | color: white; 95 | font-size: 10px; 96 | position: absolute; 97 | left: 15px; 98 | top: 120px; 99 | } 100 | 101 | .card_footer { 102 | position: absolute; 103 | bottom: 10px; 104 | color: #fff; 105 | font-size: .8rem; 106 | left: 20px; 107 | } 108 | -------------------------------------------------------------------------------- /css/one.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *:before, 7 | *:after { 8 | box-sizing: inherit; 9 | } 10 | 11 | ::selection { 12 | background: yellow; 13 | } 14 | 15 | html, 16 | body { 17 | width: 100%; 18 | height: 100%; 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | body { 24 | overflow-x: hidden; 25 | -moz-osx-font-smoothing: grayscale; 26 | -webkit-font-smoothing: antialiased; 27 | background: #f4f8fb; 28 | font-family: 'Source Sans Pro', sans-serif 29 | } 30 | 31 | a { 32 | display: inline-block; 33 | color: inherit; 34 | text-decoration: none; 35 | } 36 | 37 | svg { 38 | width: 100%; 39 | height: 100%; 40 | fill: currentColor; 41 | } 42 | 43 | h1, 44 | h2, 45 | h3, 46 | h4, 47 | h5 { 48 | margin: 0; 49 | } 50 | 51 | h3 { 52 | color: #738a94; 53 | } 54 | 55 | .red { 56 | background: #F2854D; 57 | } 58 | 59 | ul { 60 | line-height: 1.5; 61 | } 62 | 63 | img { 64 | width: 100%; 65 | max-width: 100%; 66 | vertical-align: middle; 67 | } 68 | 69 | .pimp { 70 | color: dodgerblue; 71 | } 72 | 73 | .blue { 74 | background: dodgerblue; 75 | } 76 | 77 | .container { 78 | display: grid; 79 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 80 | grid-gap: 2em; 81 | padding: 0 5%; 82 | margin-top: -110px; 83 | } 84 | 85 | @media only screen and (max-width: 0px) { 86 | .container { 87 | margin-top: -0px 88 | } 89 | 90 | .container .card__description { 91 | font-size: 15px !important; 92 | } 93 | 94 | ul, li { 95 | margin: 0; 96 | padding: 0; 97 | list-style-position: inside; 98 | } 99 | .turf{ 100 | margin-top: 15px; 101 | } 102 | 103 | h3 { 104 | line-height: 3; 105 | } 106 | } 107 | 108 | @media only screen and (min-width: 600px) { 109 | .container .card { 110 | margin-left: 5%; 111 | width: 90%; 112 | padding: 30px 60px 0 60px; 113 | } 114 | 115 | .new { 116 | font-size: 35px !important; 117 | } 118 | } 119 | 120 | .container .card { 121 | background: #fff 50%; 122 | background-size: cover; 123 | border-radius: 5px; 124 | box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03); 125 | transition: all 0.5s ease; 126 | } 127 | 128 | .container .card .content { 129 | display: flex; 130 | flex-direction: column; 131 | justify-content: space-between; 132 | height: 100%; 133 | min-height: 300px; 134 | padding: 20px; 135 | } 136 | 137 | .container .card .content a { 138 | display: block; 139 | color: black; 140 | } 141 | 142 | .container .card__title span { 143 | display: block; 144 | margin-bottom: 7px; 145 | color: #738a94; 146 | font-size: 12px; 147 | line-height: 1.15em; 148 | font-weight: 500; 149 | letter-spacing: 0.5px; 150 | text-transform: uppercase; 151 | } 152 | 153 | .container .card__title h2 { 154 | margin: 0 0 0.0em; 155 | font-size: 20px; 156 | } 157 | 158 | .container .card__description { 159 | font-weight: 500; 160 | font-size: 18px; 161 | } 162 | 163 | .container .card__description p { 164 | 165 | line-height: 1.7; 166 | margin-bottom: 20px; 167 | } 168 | 169 | .container .card__footer .author { 170 | color: #738a94; 171 | margin-top: 40px; 172 | text-transform: initial; 173 | letter-spacing: 0.5px; 174 | font-size: 12px; 175 | } 176 | 177 | header { 178 | display: flex; 179 | justify-content: center; 180 | align-items: center; 181 | flex-direction: column; 182 | padding: 5% 10%; 183 | background: url('../images/hack.svg') no-repeat; 184 | background-size: cover; 185 | text-align: center; 186 | height: 40vh; 187 | min-height: 370px; 188 | } 189 | 190 | header h1 { 191 | margin-bottom: 20px; 192 | font-size: 50px; 193 | color: #fff; 194 | line-height: 0.5; 195 | } 196 | 197 | header h2 { 198 | font-weight: 400; 199 | letter-spacing: 6px; 200 | text-transform: uppercase; 201 | color: #191e27; 202 | } 203 | 204 | footer { 205 | color: #191e27; 206 | padding: 5% 10%; 207 | text-align: center; 208 | background: url('../images/footer.svg') no-repeat; 209 | background-size: cover; 210 | } 211 | 212 | footer p { 213 | max-width: 730px; 214 | margin: 0 auto 20px; 215 | line-height: 1.5; 216 | } 217 | 218 | footer p a { 219 | border-bottom: 1px solid #191e27; 220 | } 221 | 222 | @media only screen and (max-width: 600px) { 223 | .vanish { 224 | display: none; 225 | } 226 | 227 | header { 228 | height: 20vh; 229 | min-height: 220px; 230 | } 231 | 232 | header h1 { 233 | font-size: 34px; 234 | font-weight: 700; 235 | line-height: 0; 236 | } 237 | 238 | header h2 { 239 | font-size: 15px; 240 | letter-spacing: 6px; 241 | text-transform: uppercase; 242 | color: #191e27; 243 | font-weight: 100; 244 | } 245 | 246 | body { 247 | background: #E8E8E8; 248 | } 249 | 250 | } 251 | 252 | .alpha { 253 | margin-top: 10px; 254 | } 255 | 256 | .alpha p { 257 | margin: 0 auto; 258 | font-family: 'Source Sans Pro', sans-serif; 259 | font-size: 14px; 260 | text-align: center; 261 | } 262 | 263 | .code { 264 | font-family: 'Courier New', monospace; 265 | } 266 | 267 | .beta { 268 | font-size: 10px !important; 269 | } 270 | 271 | .new, .new a { 272 | font-size: 27px; 273 | display: inline-block !important; 274 | color: #000; 275 | } 276 | hr { 277 | border: 0; 278 | height: 1px; 279 | background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)); 280 | } 281 | .ruins li { 282 | line-height: 2; 283 | } 284 | .ctr{ 285 | text-align: center; 286 | } 287 | .btn { 288 | padding: 8px 11px; 289 | border-radius: 20px; 290 | box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03); 291 | transition: all 0.5s ease; 292 | margin-top: 20px; 293 | } 294 | .home{ 295 | padding: 8px 9px; 296 | color: #fff; 297 | position: relative; 298 | border-radius: 20px; 299 | background: #ff5330; 300 | box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03); 301 | } 302 | .home:hover{ 303 | background-color: #000; 304 | color: #fff; 305 | } 306 | .btn:hover{ 307 | color: #000; 308 | background: #fff 50%; 309 | } 310 | .nxt{ 311 | position: absolute; 312 | color: #fff; 313 | background: #F59B46 50%; 314 | } 315 | .bck{ 316 | background: #E82C69 50%; 317 | position: relative; 318 | color: #fff; 319 | } 320 | @media (min-width: 1280px) { 321 | .nxt{ 322 | right: 45.5% 323 | } 324 | .bck{ 325 | left: 45% 326 | } 327 | .home{ 328 | left: 45.4%; 329 | } 330 | } 331 | @media (max-width: 1024px) { 332 | .nxt{ 333 | right: 44%; 334 | } 335 | .home{ 336 | left: 45%; 337 | } 338 | .bck{ 339 | left: 44% 340 | } 341 | } 342 | 343 | @media (max-width: 800px) { 344 | .nxt{ 345 | right: 46%; 346 | } 347 | .home{ 348 | left: 50%; 349 | } 350 | .bck{ 351 | left: 46%; 352 | } 353 | } 354 | 355 | @media (max-width: 640px) { 356 | .nxt{ 357 | right: 40%; 358 | } 359 | .home{ 360 | left: 44%; 361 | } 362 | .bck{ 363 | left: 40%; 364 | } 365 | } 366 | 367 | @media (max-width: 414px) { 368 | footer{ 369 | margin-top: 60px; 370 | } 371 | .nxt{ 372 | margin-right: -45px; 373 | } 374 | .home{ 375 | position: absolute; 376 | left: 50%; 377 | margin-top: 20px; 378 | } 379 | .bck{ 380 | position: absolute; 381 | margin-left: -10px; 382 | } 383 | } 384 | -------------------------------------------------------------------------------- /images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/j-kon/hacktoberfest20/33a073b1e3c0d7066a3fc126c4b12cc2c083507f/images/github.png -------------------------------------------------------------------------------- /images/hack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 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 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | -------------------------------------------------------------------------------- /images/two.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 40 | 41 | 42 | 43 | 44 | 45 | 48 | 49 | 50 | 51 | 52 | 53 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 99 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /p1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/j-kon/hacktoberfest20/33a073b1e3c0d7066a3fc126c4b12cc2c083507f/p1.jpeg --------------------------------------------------------------------------------