Forgiveness Assist Financial Consultant Agency
A Pen by Carlo Moscatiello on CodePen.
Created
July 20, 2016 04:15
-
-
Save cm85/8897aee265c8a0ed455d5a7aa0386fc6 to your computer and use it in GitHub Desktop.
Forgiveness Assist Neon Sign
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 > | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Forgiveness Assist</title> | |
| <link rel="stylesheet" href="css/style.css"> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div class="neon">Forgiveness </div> | |
| <div class="flux">Assist </div> | |
| </div> | |
| </body> | |
| </html> |
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, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: table; | |
| background-color: black; | |
| } | |
| @font-face { | |
| font-family: neon; | |
| src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf); | |
| } | |
| #container { | |
| display: table-cell; | |
| text-align: center; | |
| vertical-align: middle; | |
| } | |
| .neon { | |
| font-family: neon; | |
| color: #FB4264; | |
| font-size: 9vw; | |
| line-height: 9vw; | |
| text-shadow: 0vw 0vw 3vw #F40A35; | |
| } | |
| .neon { | |
| animation: neon 1s ease infinite; | |
| -moz-animation: neon 1s ease infinite; | |
| /* Firefox */ | |
| -webkit-animation: neon 1s ease infinite; | |
| /* Safari and Chrome */ | |
| -o-animation: neon 1s ease infinite; | |
| /* Opera */ | |
| } | |
| @keyframes neon { | |
| 0%, | |
| 100% { | |
| text-shadow: 0vw 0vw 1vw #FA1C16, 0vw 0vw 3vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw .4vw #FED128, .5vw .5vw .1vw #806914; | |
| color: #FED128; | |
| } | |
| 50% { | |
| text-shadow: 0vw 0vw .5vw #800E0B, 0vw 0vw 1.5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw .2vw #800E0B, .5vw .5vw .1vw #40340A; | |
| color: #806914; | |
| } | |
| } | |
| @-moz-keyframes neon | |
| /* Firefox */ | |
| @keyframes neon { | |
| 0%, | |
| 100% { | |
| text-shadow: 0vw 0vw 1vw #FA1C16, 0vw 0vw 3vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw .4vw #FED128, .5vw .5vw .1vw #806914; | |
| color: #FED128; | |
| } | |
| 50% { | |
| text-shadow: 0vw 0vw .5vw #800E0B, 0vw 0vw 1.5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw .2vw #800E0B, .5vw .5vw .1vw #40340A; | |
| color: #806914; | |
| } | |
| } | |
| @-webkit-keyframes neon | |
| /* Safari and Chrome */ | |
| @keyframes neon { | |
| 0%, | |
| 100% { | |
| text-shadow: 0vw 0vw 1vw #FA1C16, 0vw 0vw 3vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw .4vw #FED128, .5vw .5vw .1vw #806914; | |
| color: #FED128; | |
| } | |
| 50% { | |
| text-shadow: 0vw 0vw .5vw #800E0B, 0vw 0vw 1.5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw .2vw #800E0B, .5vw .5vw .1vw #40340A; | |
| color: #806914; | |
| } | |
| } | |
| @-o-keyframes neon | |
| /* Opera */ | |
| @keyframes neon { | |
| 0%, | |
| 100% { | |
| text-shadow: 0vw 0vw 1vw #FA1C16, 0vw 0vw 3vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw 10vw #FA1C16, 0vw 0vw .4vw #FED128, .5vw .5vw .1vw #806914; | |
| color: #FED128; | |
| } | |
| 50% { | |
| text-shadow: 0vw 0vw .5vw #800E0B, 0vw 0vw 1.5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw 5vw #800E0B, 0vw 0vw .2vw #800E0B, .5vw .5vw .1vw #40340A; | |
| color: #806914; | |
| } | |
| } | |
| .flux { | |
| font-family: neon; | |
| color: #426DFB; | |
| font-size: 9vw; | |
| line-height: 9vw; | |
| text-shadow: 0vw 0vw 3vw #2356FF; | |
| } | |
| .flux { | |
| animation: flux 2s linear infinite; | |
| -moz-animation: flux 2s linear infinite; | |
| /* Firefox */ | |
| -webkit-animation: flux 2s linear infinite; | |
| /* Safari and Chrome */ | |
| -o-animation: flux 2s linear infinite; | |
| /* Opera */ | |
| } | |
| @keyframes flux { | |
| 0%, | |
| 100% { | |
| text-shadow: 0vw 0vw 1vw #1041FF, 0vw 0vw 3vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw .4vw #8BFDFE, .5vw .5vw .1vw #147280; | |
| color: #28D7FE; | |
| } | |
| 50% { | |
| text-shadow: 0vw 0vw .5vw #082180, 0vw 0vw 1.5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw .2vw #082180, .5vw .5vw .1vw #0A3940; | |
| color: #146C80; | |
| } | |
| } | |
| @-moz-keyframes flux | |
| /* Firefox */ | |
| @keyframes flux { | |
| 0%, | |
| 100% { | |
| text-shadow: 0vw 0vw 1vw #1041FF, 0vw 0vw 3vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw .4vw #8BFDFE, .5vw .5vw .1vw #147280; | |
| color: #28D7FE; | |
| } | |
| 50% { | |
| text-shadow: 0vw 0vw .5vw #082180, 0vw 0vw 1.5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw .2vw #082180, .5vw .5vw .1vw #0A3940; | |
| color: #146C80; | |
| } | |
| } | |
| @-webkit-keyframes flux | |
| /* Safari and Chrome */ | |
| @keyframes flux { | |
| 0%, | |
| 100% { | |
| text-shadow: 0vw 0vw 1vw #1041FF, 0vw 0vw 3vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw .4vw #8BFDFE, .5vw .5vw .1vw #147280; | |
| color: #28D7FE; | |
| } | |
| 50% { | |
| text-shadow: 0vw 0vw .5vw #082180, 0vw 0vw 1.5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw .2vw #082180, .5vw .5vw .1vw #0A3940; | |
| color: #146C80; | |
| } | |
| } | |
| @-o-keyframes flux | |
| /* Opera */ | |
| @keyframes flux { | |
| 0%, | |
| 100% { | |
| text-shadow: 0vw 0vw 1vw #1041FF, 0vw 0vw 3vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw 10vw #1041FF, 0vw 0vw .4vw #8BFDFE, .5vw .5vw .1vw #147280; | |
| color: #28D7FE; | |
| } | |
| 50% { | |
| text-shadow: 0vw 0vw .5vw #082180, 0vw 0vw 1.5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw 5vw #082180, 0vw 0vw .2vw #082180, .5vw .5vw .1vw #0A3940; | |
| color: #146C80; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment