A Pen by Dillon Vance on CodePen.
Created
February 15, 2022 05:37
-
-
Save HeNy007/01495aa273f972e4f1c3314622e127cd to your computer and use it in GitHub Desktop.
Error Message
This file contains hidden or 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> | |
| <div class="gears"> | |
| <img src="http://simpleicon.com/wp-content/uploads/gear-2.svg" class="gearOne" width="200px"> | |
| <div class="transformed"> | |
| <img src="http://simpleicon.com/wp-content/uploads/gear-2.svg" | |
| class="gearTwo" width="200px"> | |
| </div> | |
| <div class="errorMessage"> | |
| <label> | |
| Sorry | |
| </label> | |
| <p id="info"> | |
| This page is under maintenance. | |
| </p> | |
| <button id="helpButton" type="button" onclick="changeText()"> Need Help?</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| function changeText() { | |
| document.getElementById("info").innerHTML = "Please contact example@example.com."; | |
| document.getElementById("helpButton").innerHTML = "Thank you."; | |
| document.getElementById("helpButton").style.cursor = "default"; | |
| } |
This file contains hidden or 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
| $black: #000; | |
| $grey: #181818; | |
| $lightGrey: #7E7E7E; | |
| $speed: 15s; | |
| html { | |
| height: 100%; | |
| background: $lightGrey; | |
| background: radial-gradient($lightGrey, $black); | |
| } | |
| body { | |
| margin: 30px; | |
| } | |
| .gears{ | |
| position: relative; | |
| padding-left: 100px; | |
| max-width: 400px; | |
| margin: 0 auto; | |
| background: $lightGrey; | |
| border-radius: 100px; | |
| border: 0px solid #fff; | |
| box-shadow: inset -2px -2px 7px 10px #000; | |
| } | |
| img.gearOne { | |
| transform: rotate(0deg); | |
| animation-name: gearOne; | |
| animation-duration: $speed; | |
| animation-iteration-count: infinite; | |
| animation-timing-function: linear; | |
| } | |
| @keyframes gearOne { | |
| 0% {transform:rotate(0deg);} | |
| 25% {transform:rotate(90deg);} | |
| 50% {transform:rotate(180deg);} | |
| 75% {transform:rotate(270deg);} | |
| 100% {transform:rotate(360deg);} | |
| } | |
| img.gearTwo { | |
| transform: rotate(22.5deg); | |
| animation-name: gearTwo; | |
| animation-duration: $speed; | |
| animation-iteration-count: infinite; | |
| animation-timing-function: linear; | |
| } | |
| @keyframes gearTwo { | |
| 0% {transform:rotate(382.5deg);} | |
| 25% {transform:rotate(292.5deg);} | |
| 50% {transform:rotate(202.5deg);} | |
| 75% {transform:rotate(112.5deg);} | |
| 100% {transform:rotate(22.5deg);} | |
| } | |
| .transformed { | |
| transform: translate(100px, -100px); | |
| margin: 0; | |
| } | |
| .errorMessage { | |
| color: #FFF; | |
| font-size: 22px; | |
| text-shadow: -1px -1px 5px black; | |
| margin: auto; | |
| text-align: center; | |
| transform: translate(-50px, -100px); | |
| background: $lightGrey; | |
| box-shadow: inset -5px -7px 7px 5px #000; | |
| border: 0px solid #000; | |
| border-radius: 30px; | |
| padding: 20px | |
| } | |
| label { | |
| color: #A50000; | |
| font-size: 100px; | |
| } | |
| #helpButton { | |
| background-color: $grey; | |
| color: #fff; | |
| border: none; | |
| padding: 15px 32px; | |
| text-align: center; | |
| font-size: 16px; | |
| cursor: pointer; | |
| border-radius: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment