Skip to content

Instantly share code, notes, and snippets.

@jaygilmore

jaygilmore/error.html

Last active Jan 9, 2020
Embed
What would you like to do?
Basic HTML Error Page Example (with SVG Logo)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Error: Site Unavailable</title>
</head>
<style>
#page {
margin: 4rem auto 0 auto;
min-width: 300px;
max-width: 500px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 16px;
}
svg {
width: 200px;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
p {
font-size: 1.25rem;
}
@media (max-width:400px) {
#page {
padding: 1rem;
}
}
</style>
<body>
<div id="page">
<header>
<svg width="298px" height="68px" viewBox="0 0 298 68" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>logo-7</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="logo-7" transform="translate(-1.000000, -1.000000)" fill="#394149" fill-rule="nonzero">
<path d="M87.175,20.175 L94.675,20.175 L94.675,50.5 L87.175,50.5 L87.175,20.175 Z M97.65,39.05 C97.65,31.55 102.25,27.075 109.35,27.075 C116.45,27.075 121.05,31.55 121.05,39.05 C121.05,46.55 116.55,51.05 109.35,51.05 C102.15,51.05 97.65,46.675 97.65,39.05 Z M113.525,39.05 C113.525,34.925 111.9,32.5 109.35,32.5 C106.8,32.5 105.2,35 105.2,39.05 C105.2,43.1 106.775,45.55 109.35,45.55 C111.925,45.55 113.525,43.25 113.525,39.075 L113.525,39.05 Z M123.875,51.975 L131.075,51.975 C131.77864,53.5383252 133.425914,54.4534773 135.125,54.225 C137.975,54.225 139.475,52.675 139.475,50.425 L139.475,46.225 L139.325,46.225 C138.102394,48.8586707 135.399343,50.4824816 132.5,50.325 C127.025,50.325 123.4,46.15 123.4,38.975 C123.4,31.8 126.85,27.275 132.6,27.275 C135.592941,27.1576753 138.343861,28.9118852 139.5,31.675 L139.5,31.675 L139.5,27.5 L147,27.5 L147,50.25 C147,55.725 142.175,59.125 135.05,59.125 C128.425,59.125 124.3,56.15 123.875,52 L123.875,51.975 Z M139.5,39.025 C139.5,35.375 137.825,33.075 135.175,33.075 C132.525,33.075 130.9,35.35 130.9,39.025 C130.9,42.7 132.5,44.775 135.175,44.775 C137.85,44.775 139.5,42.75 139.5,39.05 L139.5,39.025 Z M149.825,39.025 C149.825,31.525 154.425,27.05 161.525,27.05 C168.625,27.05 173.25,31.525 173.25,39.025 C173.25,46.525 168.75,51.025 161.525,51.025 C154.3,51.025 149.825,46.675 149.825,39.05 L149.825,39.025 Z M165.7,39.025 C165.7,34.9 164.075,32.475 161.525,32.475 C158.975,32.475 157.5,35 157.5,39.075 C157.5,43.15 159.075,45.575 161.625,45.575 C164.175,45.575 165.7,43.25 165.7,39.075 L165.7,39.025 Z M176.1,22.05 C176.059807,20.501364 176.957686,19.0814052 178.374001,18.4537591 C179.790317,17.826113 181.44536,18.1147339 182.565625,19.1847311 C183.685891,20.2547283 184.050137,21.8947875 183.488129,23.3384064 C182.926121,24.7820254 181.548849,25.7441029 180,25.775 C178.98506,25.8447233 177.987074,25.4876993 177.246671,24.7900121 C176.506269,24.0923248 176.09064,23.1172886 176.1,22.1 L176.1,22.05 Z M176.1,27.55 L183.6,27.55 L183.6,50.5 L176.1,50.5 L176.1,27.55 Z M210.825,39.025 C210.825,46.525 207.5,50.8 201.8,50.8 C198.806114,50.9921807 196.010641,49.294929 194.8,46.55 L194.65,46.55 L194.65,57.85 L187.15,57.85 L187.15,27.5 L194.65,27.5 L194.65,31.6 L194.8,31.6 C195.954515,28.8093126 198.732932,27.0403206 201.75,27.175 C207.5,27.275 210.925,31.575 210.925,39.075 L210.825,39.025 Z M203.325,39.025 C203.325,35.375 201.65,33.05 199.025,33.05 C196.4,33.05 194.725,35.4 194.7,39.025 C194.675,42.65 196.4,44.975 199.025,44.975 C201.65,44.975 203.325,42.7 203.325,39.075 L203.325,39.025 Z M223.7,27.025 C229.925,27.025 233.7,29.975 233.875,34.7 L227.05,34.7 C227.05,33.075 225.7,32.05 223.625,32.05 C221.55,32.05 220.625,32.85 220.625,34.025 C220.625,35.2 221.45,35.575 223.125,35.925 L227.925,36.9 C232.5,37.875 234.45,39.725 234.45,43.2 C234.45,47.95 230.125,51 223.75,51 C217.375,51 213.2,47.95 212.875,43.275 L220.1,43.275 C220.325,44.975 221.675,45.975 223.875,45.975 C226.075,45.975 227.075,45.25 227.075,44.05 C227.075,42.85 226.375,42.6 224.575,42.225 L220.25,41.3 C215.775,40.375 213.425,38 213.425,34.5 C213.475,30 217.5,27.075 223.7,27.075 L223.7,27.025 Z M259.475,50.45 L252.25,50.45 L252.25,46.175 L252.1,46.175 C251.281774,49.1322565 248.513658,51.1198888 245.45,50.95 C243.144486,51.081053 240.895357,50.2063287 239.284201,48.5520172 C237.673046,46.8977058 236.858065,44.6262452 237.05,42.325 L237.05,27.5 L244.55,27.5 L244.55,40.6 C244.55,43.325 245.95,44.775 248.275,44.775 C249.377988,44.7772555 250.428259,44.3032617 251.156277,43.4746624 C251.884295,42.646063 252.219184,41.5435255 252.075,40.45 L252.075,27.5 L259.575,27.5 L259.475,50.45 Z M263.1,27.5 L270.35,27.5 L270.35,31.925 L270.5,31.925 C271.318436,29.0122231 273.999942,27.0190732 277.025,27.075 C280.128044,26.8265011 282.901959,29.0021206 283.4,32.075 L283.55,32.075 C284.483008,28.994342 287.384123,26.9368137 290.6,27.075 C292.662733,27.0057024 294.657822,27.815807 296.088327,29.3035322 C297.518832,30.7912574 298.250105,32.8165687 298.1,34.875 L298.1,50.5 L290.6,50.5 L290.6,36.875 C290.6,34.375 289.475,33.225 287.375,33.225 C286.427504,33.2169832 285.522975,33.619725 284.89496,34.3292384 C284.266945,35.0387518 283.977004,35.9854871 284.1,36.925 L284.1,50.5 L276.975,50.5 L276.975,36.775 C276.975,34.475 275.85,33.225 273.8,33.225 C272.842022,33.2252956 271.930004,33.6357024 271.294448,34.3524943 C270.658893,35.0692862 270.360615,36.0238757 270.475,36.975 L270.475,50.5 L262.975,50.5 L263.1,27.5 Z" id="Shape"></path>
<path d="M66.2,21.55 C64.9277553,18.640902 63.2438615,15.929833 61.2,13.5 C52.9542535,3.40440464 39.6411445,-1.05470707 26.9781902,2.03769819 C14.315236,5.13010346 4.55602204,15.2236802 1.89179131,27.9835883 C-0.772439433,40.7434965 4.13245768,53.8988958 14.5,61.8 C16.9375115,63.6947289 19.6308788,65.2349984 22.5,66.375 C26.5225871,68.0234512 30.8277489,68.8725956 35.175,68.875 C53.8584027,68.83367 68.9862674,53.6834434 69.000034,35 C69.0065934,30.3713009 68.0531845,25.7915334 66.2,21.55 Z M35.15,7.975 C39.053879,7.97458065 42.9106288,8.82784388 46.45,10.475 L46.45,10.475 C45.5869118,10.8479188 44.679481,11.108385 43.75,11.25 C37.468534,12.1592773 32.5342773,17.093534 31.625,23.375 C31.2243709,26.9109801 28.3940623,29.6786251 24.85,30 C18.568534,30.9092773 13.6342773,35.843534 12.725,42.125 C12.5751037,43.7559799 11.8792314,45.2886607 10.75,46.475 L10.75,46.475 C6.78988352,38.1073778 7.3927787,28.2942827 12.3474224,20.4743639 C17.3020661,12.6544452 25.9175935,7.91809561 35.175,7.92499246 L35.15,7.975 Z M14.475,52.5 C14.775,52.225 15.075,51.975 15.375,51.675 C17.5991331,49.5186412 19.0267873,46.6721455 19.425,43.6 C19.5864576,41.873111 20.3574995,40.2601267 21.6,39.05 C22.7956201,37.8054216 24.4049233,37.0407802 26.125,36.9 C32.406466,35.9907227 37.3407227,31.056466 38.25,24.775 C38.3581538,22.9687821 39.1332656,21.2671 40.425,20 C41.6501279,18.7796255 43.2747799,18.0427615 45,17.925 C47.8097876,17.5384107 50.4303308,16.2892851 52.5,14.35 C54.856618,16.3051757 56.8533339,18.6572392 58.4,21.3 C58.3050019,21.4283751 58.1959961,21.5457659 58.075,21.65 C56.8816676,22.905489 55.2744403,23.6869034 53.55,23.85 C47.2606899,24.7435999 42.3185999,29.6856899 41.425,35.975 C41.0617479,39.5233501 38.2496784,42.3249658 34.7,42.675 C28.4010407,43.5771963 23.4410213,48.5067238 22.5,54.8 C22.3654556,56.0218305 21.9458584,57.1949898 21.275,58.225 C18.7099972,56.7020907 16.4127165,54.767983 14.475,52.5 Z M35.15,62.1500161 C32.6131776,62.1527617 30.0885322,61.7993114 27.65,61.1 C28.4841536,59.5450081 29.0264345,57.8503801 29.25,56.1 C29.6111762,52.5600615 32.4100615,49.7611762 35.95,49.4 C42.2411862,48.5008785 47.1879222,43.5643209 48.1,37.275 C48.4611762,33.7350615 51.2600615,30.9361762 54.8,30.575 C57.1050593,30.2751696 59.3020296,29.416978 61.2,28.075 C63.3358152,36.1707717 61.6022541,44.7992684 56.5053291,51.441902 C51.408404,58.0845356 43.5227037,61.992466 35.15,62.025 L35.15,62.1500161 Z" id="Shape"></path>
</g>
</g>
</svg>
</header>
<main>
<h1>Site Error</h1>
<p>Our website is experiencing an error or undegoing maintenance at this time. Please try again later.</p>
<p>For immediate assistance, please <a href="mailto:email@example.com">contact us</a>.</p>
</main>
<footer>
<p>&copy; Example, Inc.</p>
</footer>
</div>
</body>
</html>
@jaygilmore

This comment has been minimized.

Copy link
Owner Author

@jaygilmore jaygilmore commented Jan 9, 2020

Image of the rendered example.

Error Site Unavailable 2020-01-08 21-54-59

Logo from logoipsum.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.