A simple 404 error page with CSS3 Animation
A Pen by Akash Rajendra on CodePen.
| <div id="main"> | |
| <div class="fof"> | |
| <h1>Error 404</h1> | |
| </div> | |
| </div> |
| /* | |
| <3 You xD | |
| */ |
A simple 404 error page with CSS3 Animation
A Pen by Akash Rajendra on CodePen.
| *{ | |
| transition: all 0.6s; | |
| } | |
| html { | |
| height: 100%; | |
| } | |
| body{ | |
| font-family: 'Lato', sans-serif; | |
| color: #888; | |
| margin: 0; | |
| } | |
| #main{ | |
| display: table; | |
| width: 100%; | |
| height: 100vh; | |
| text-align: center; | |
| } | |
| .fof{ | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| .fof h1{ | |
| font-size: 50px; | |
| display: inline-block; | |
| padding-right: 12px; | |
| animation: type .5s alternate infinite; | |
| } | |
| @keyframes type{ | |
| from{box-shadow: inset -3px 0px 0px #888;} | |
| to{box-shadow: inset -3px 0px 0px transparent;} | |
| } |
| <link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet" /> |