Created
September 16, 2019 18:18
-
-
Save adamwatters/e89c06e5222902b809f3522b93875550 to your computer and use it in GitHub Desktop.
planet paradise
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div class="sign"> | |
| <span class="sign__word">WELCOME</span> | |
| <span class="sign__word">TO</span> | |
| <span class="sign__word">PLANET PARADISE</span> | |
| </div> | |
| </body> | |
| <style> | |
| /*-- Base Styles --*/ | |
| html, | |
| body { | |
| margin: 0; | |
| height: 100%; | |
| } | |
| html { | |
| font-size: 16px; | |
| } | |
| body { | |
| font-family: "Vibur", cursive; | |
| font-size: 1rem; | |
| background-image: url(https://media.giphy.com/media/3o6Ei2cEEtv9xcPiF2/source.gif); | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-color: #141400; | |
| } | |
| /*-- Sign Styles --*/ | |
| .sign { | |
| min-height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .sign__word { | |
| font-size: 5.6rem; | |
| text-align: center; | |
| line-height: 1; | |
| color: #c6e2ff; | |
| -webkit-animation: neon 0.08s ease-in-out infinite alternate; | |
| animation: neon 0.08s ease-in-out infinite alternate; | |
| } | |
| /*-- Animation Keyframes --*/ | |
| @-webkit-keyframes neon { | |
| from { | |
| text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), | |
| 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), | |
| 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), | |
| 0 0 54px rgba(30, 132, 242, 0.92); | |
| } | |
| to { | |
| text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), | |
| 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), | |
| 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), | |
| 0 0 60px #1e84f2; | |
| } | |
| } | |
| @keyframes neon { | |
| from { | |
| text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), | |
| 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), | |
| 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), | |
| 0 0 54px rgba(30, 132, 242, 0.92); | |
| } | |
| to { | |
| text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), | |
| 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), | |
| 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), | |
| 0 0 60px #1e84f2; | |
| } | |
| } | |
| </style> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment