Created
February 16, 2019 20:44
-
-
Save jgmuchiri/87e719848fb2f305834131d0dfc4016a to your computer and use it in GitHub Desktop.
Responsive 404 page not found
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
<!doctype html> | |
<html lang="en"> | |
<head> | |
<title>404 - Page Not Found!</title> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<link rel="dns-prefetch" href="//fonts.gstatic.com"> | |
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css"> | |
<style> | |
html { | |
line-height: 1.15; | |
-ms-text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100%; | |
} | |
body { | |
margin: 0; | |
} | |
header, | |
nav, | |
section { | |
display: block; | |
} | |
figcaption, | |
main { | |
display: block; | |
} | |
a { | |
background-color: transparent; | |
-webkit-text-decoration-skip: objects; | |
} | |
strong { | |
font-weight: inherit; | |
} | |
strong { | |
font-weight: bolder; | |
} | |
code { | |
font-family: monospace, monospace; | |
font-size: 1em; | |
} | |
dfn { | |
font-style: italic; | |
} | |
svg:not(:root) { | |
overflow: hidden; | |
} | |
button, | |
input { | |
font-family: sans-serif; | |
font-size: 100%; | |
line-height: 1.15; | |
margin: 0; | |
} | |
button, | |
input { | |
overflow: visible; | |
} | |
button { | |
text-transform: none; | |
} | |
button, | |
html [type="button"], | |
[type="reset"], | |
[type="submit"] { | |
-webkit-appearance: button; | |
} | |
button::-moz-focus-inner, | |
[type="button"]::-moz-focus-inner, | |
[type="reset"]::-moz-focus-inner, | |
[type="submit"]::-moz-focus-inner { | |
border-style: none; | |
padding: 0; | |
} | |
button:-moz-focusring, | |
[type="button"]:-moz-focusring, | |
[type="reset"]:-moz-focusring, | |
[type="submit"]:-moz-focusring { | |
outline: 1px dotted ButtonText; | |
} | |
legend { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
color: inherit; | |
display: table; | |
max-width: 100%; | |
padding: 0; | |
white-space: normal; | |
} | |
[type="checkbox"], | |
[type="radio"] { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
padding: 0; | |
} | |
[type="number"]::-webkit-inner-spin-button, | |
[type="number"]::-webkit-outer-spin-button { | |
height: auto; | |
} | |
[type="search"] { | |
-webkit-appearance: textfield; | |
outline-offset: -2px; | |
} | |
[type="search"]::-webkit-search-cancel-button, | |
[type="search"]::-webkit-search-decoration { | |
-webkit-appearance: none; | |
} | |
::-webkit-file-upload-button { | |
-webkit-appearance: button; | |
font: inherit; | |
} | |
menu { | |
display: block; | |
} | |
canvas { | |
display: inline-block; | |
} | |
template { | |
display: none; | |
} | |
[hidden] { | |
display: none; | |
} | |
html { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
font-family: sans-serif; | |
} | |
*, | |
*::before, | |
*::after { | |
-webkit-box-sizing: inherit; | |
box-sizing: inherit; | |
} | |
p { | |
margin: 0; | |
} | |
button { | |
background: transparent; | |
padding: 0; | |
} | |
button:focus { | |
outline: 1px dotted; | |
outline: 5px auto -webkit-focus-ring-color; | |
} | |
*, | |
*::before, | |
*::after { | |
border-width: 0; | |
border-style: solid; | |
border-color: #dae1e7; | |
} | |
button, | |
[type="button"], | |
[type="reset"], | |
[type="submit"] { | |
border-radius: 0; | |
} | |
button, | |
input { | |
font-family: inherit; | |
} | |
input::-webkit-input-placeholder { | |
color: inherit; | |
opacity: .5; | |
} | |
input:-ms-input-placeholder { | |
color: inherit; | |
opacity: .5; | |
} | |
input::-ms-input-placeholder { | |
color: inherit; | |
opacity: .5; | |
} | |
input::placeholder { | |
color: inherit; | |
opacity: .5; | |
} | |
button, | |
[role=button] { | |
cursor: pointer; | |
} | |
.bg-transparent { | |
background-color: transparent; | |
} | |
.bg-white { | |
background-color: #fff; | |
} | |
.bg-teal-light { | |
background-color: #64d5ca; | |
} | |
.bg-blue-dark { | |
background-color: #2779bd; | |
} | |
.bg-indigo-light { | |
background-color: #7886d7; | |
} | |
.bg-purple-light { | |
background-color: #a779e9; | |
} | |
.bg-no-repeat { | |
background-repeat: no-repeat; | |
} | |
.bg-cover { | |
background-size: cover; | |
} | |
.border-grey-light { | |
border-color: #dae1e7; | |
} | |
.hover\:border-grey:hover { | |
border-color: #b8c2cc; | |
} | |
.rounded-lg { | |
border-radius: .5rem; | |
} | |
.border-2 { | |
border-width: 2px; | |
} | |
.hidden { | |
display: none; | |
} | |
.flex { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
} | |
.items-center { | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
} | |
.justify-center { | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
} | |
.font-sans { | |
font-family: Nunito, sans-serif; | |
} | |
.font-light { | |
font-weight: 300; | |
} | |
.font-bold { | |
font-weight: 700; | |
} | |
.font-black { | |
font-weight: 900; | |
} | |
.h-1 { | |
height: .25rem; | |
} | |
.leading-normal { | |
line-height: 1.5; | |
} | |
.m-8 { | |
margin: 2rem; | |
} | |
.my-3 { | |
margin-top: .75rem; | |
margin-bottom: .75rem; | |
} | |
.mb-8 { | |
margin-bottom: 2rem; | |
} | |
.max-w-sm { | |
max-width: 30rem; | |
} | |
.min-h-screen { | |
min-height: 100vh; | |
} | |
.py-3 { | |
padding-top: .75rem; | |
padding-bottom: .75rem; | |
} | |
.px-6 { | |
padding-left: 1.5rem; | |
padding-right: 1.5rem; | |
} | |
.pb-full { | |
padding-bottom: 100%; | |
} | |
.absolute { | |
position: absolute; | |
} | |
.relative { | |
position: relative; | |
} | |
.pin { | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
} | |
.text-white{ | |
color:#ffffff; | |
} | |
.text-red{ | |
color:#E91E63; | |
} | |
.text-black { | |
color: #22292f; | |
} | |
.text-grey-darkest { | |
color: #3d4852; | |
} | |
.text-grey-darker { | |
color: #606f7b; | |
} | |
.text-2xl { | |
font-size: 1.5rem; | |
} | |
.text-5xl { | |
font-size: 3rem; | |
} | |
.uppercase { | |
text-transform: uppercase; | |
} | |
.antialiased { | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.tracking-wide { | |
letter-spacing: .05em; | |
} | |
.w-16 { | |
width: 4rem; | |
} | |
.w-full { | |
width: 100%; | |
} | |
@media (min-width: 768px) { | |
.md\:bg-left { | |
background-position: left; | |
} | |
.md\:bg-right { | |
background-position: right; | |
} | |
.md\:flex { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
} | |
.md\:my-6 { | |
margin-top: 1.5rem; | |
margin-bottom: 1.5rem; | |
} | |
.md\:min-h-screen { | |
min-height: 100vh; | |
} | |
.md\:pb-0 { | |
padding-bottom: 0; | |
} | |
.md\:text-3xl { | |
font-size: 1.875rem; | |
} | |
.md\:text-15xl { | |
font-size: 9rem; | |
} | |
.md\:w-1\/2 { | |
width: 50%; | |
} | |
} | |
@media (min-width: 992px) { | |
.lg\:bg-center { | |
background-position: center; | |
} | |
} | |
</style> | |
</head> | |
<body class="antialiased font-sans"> | |
<div class="md:flex min-h-screen"> | |
<div class="w-full md:w-1/2 bg-white flex items-center justify-center"> | |
<div class="max-w-sm m-8"> | |
<div class="text-red text-5xl md:text-15xl font-black"> | |
404 </div> | |
<div class="w-16 h-1 bg-purple-light my-3 md:my-6"></div> | |
<p class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal"> | |
Oh no! Either we missed something or you can't type! | |
</p> | |
<a href="https://johnmuchiri.com"> | |
<button class="bg-indigo-light text-white font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey hover:border-grey rounded-lg"> | |
Go Home</button></a> | |
<a href="https://johnmuchiri.com"> | |
<button class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg"> | |
Contact us | |
</button> | |
</a> | |
</div> | |
</div> | |
<div class="relative pb-full md:flex md:pb-0 md:min-h-screen w-full md:w-1/2"> | |
<div style="background-image: url(https://snag.gy/fkJWca.jpg);" class="absolute pin bg-cover bg-no-repeat md:bg-left lg:bg-center"> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment