A Pen by Ian Gloude on CodePen.
Created
March 4, 2022 18:43
-
-
Save krazy-glue/e1e4347afe4eefe6e586f7c3a470243e to your computer and use it in GitHub Desktop.
BSOD 404 Page
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
| <main class="bsod container"> | |
| <h1 class="neg title"><span class="bg">Error - 404</span></h1> | |
| <p>An error has occured, to continue:</p> | |
| <p>* Return to our homepage.<br /> | |
| * Send us an e-mail about this error and try later.</p> | |
| <nav class="nav"> | |
| <a href="#" class="link">index</a> | <a href="#" class="link">webmaster</a> | |
| </nav> | |
| </main> |
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
| @import 'https://fonts.googleapis.com/css?family=VT323'; | |
| $light-grey: #e0e2f4; | |
| $grey: #aaaaaa; | |
| $blue: #0414a7; | |
| $base-font-size: 20px; | |
| $font-stack: 'VT323', monospace; | |
| body, | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| p, | |
| a { color: $light-grey; } | |
| body, | |
| p { font: normal #{$base-font-size}/1.25rem $font-stack; } | |
| h1 { font: normal 2.75rem/1.05em $font-stack; } | |
| h2 { font: normal 2.25rem/1.25em $font-stack; } | |
| h3 { font: lighter 1.5rem/1.25em $font-stack; } | |
| h4 { font: lighter 1.125rem/1.2222222em $font-stack; } | |
| body { background: $blue; } | |
| .container { | |
| width: 90%; | |
| margin: auto; | |
| max-width: 640px; | |
| } | |
| .bsod { | |
| padding-top: 10%; | |
| .neg { | |
| text-align: center; | |
| color: $blue; | |
| .bg { | |
| background: $grey; | |
| padding: 0 15px 2px 13px; | |
| } | |
| } | |
| .title { margin-bottom: 50px; } | |
| .nav { | |
| margin-top: 35px; | |
| text-align: center; | |
| .link { | |
| text-decoration: none; | |
| padding: 0 9px 2px 8px; | |
| &:hover, | |
| &:focus { | |
| background: $grey; | |
| color: $blue; | |
| } | |
| } | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment