Skip to content

Instantly share code, notes, and snippets.

@ianhernandez

ianhernandez/index.html

Created February 19, 2020 00:46
Show Gist options
  • Save ianhernandez/3a2ef3821cfc2d9ce7a6a630185b16e7 to your computer and use it in GitHub Desktop.
Save ianhernandez/3a2ef3821cfc2d9ce7a6a630185b16e7 to your computer and use it in GitHub Desktop.
Download ZIP
WebMail Login
Raw
index.html
<section class="site">
<aside class="error-aside">
<a href="https://dreamhost.com" class="back-to-dreamhost">← Go Back To DreamHost</a>
</aside>
<main class="error-message">
<div class="error-message__content">
<!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="75px"
height="66.66px" viewBox="0 0 56.4 50.2" style="enable-background:new 0 0 56.4 50.2;" xml:space="preserve">
<style type="text/css">
.st01{fill:#0073EC;}
.st12{fill:#86BDF6;}
</style>
<defs>
</defs>
<g>
<path class="st01" d="M26.5,15.7h3.5c0.3,0,0.6,0.3,0.6,0.6l-0.7,19.2c0,0.3-0.3,0.6-0.6,0.6h-2c-0.3,0-0.6-0.2-0.6-0.6l-0.7-19.2
C25.9,16,26.1,15.7,26.5,15.7L26.5,15.7z"/>
<circle class="st01" cx="28.2" cy="40.8" r="2.7"/>
<path class="st12" d="M55.8,43.1L32.3,2.4c-1.8-3.1-6.3-3.1-8.2,0L0.6,43.1c-1.8,3.1,0.5,7.1,4.1,7.1h47
C55.3,50.2,57.6,46.2,55.8,43.1z M51.7,47h-47c-1.2,0-2-1.3-1.4-2.4L26.9,3.9c0.6-1,2.1-1,2.7,0l23.5,40.8
C53.7,45.7,52.9,47,51.7,47z"/>
</g>
</svg>
<h1>404 Not Found</h1>
<p>We're really embarassed, this shouldn't of happened.</p>
<div class="action-group">
<a href="https://webmail.dreamhost.com" class="Button Button--primary">Back To Mail</a>
<a href="https://panel.dreamhost.com" class="Button">Back To DreamHost Panel</a>
</div>
<?xml version="1.0" encoding="UTF-8"?>
<svg id="logo-svg" width="240px" enable-background="new 0 0 120.5 16.7" version="1.1" viewBox="0 0 120.5 16.7" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
.st0 {
fill: #071C26;
}
.st1 {
fill: #0073EC;
}
</style>
<path class="st0"
d="m21.4 2.4h4.4c4.2 0 7.8 1.8 7.8 6.6 0 4.3-3.5 6.6-7.4 6.6h-4.8v-13.2zm2.9 10.5h1.5c2.7 0 4.7-1 4.7-4 0-2.6-2.1-3.8-4.5-3.8h-1.7v7.8z" />
<path class="st0"
d="m35.1 6.5h2.8v1.5c0.6-1.1 1.4-1.7 2.6-1.7 0.3 0 0.7 0 0.9 0.1v2.5c-0.4-0.1-0.8-0.2-1.2-0.2-2.1 0-2.4 1.2-2.4 3v3.8h-2.8l0.1-9z" />
<path class="st0"
d="m51 14c-0.9 1.1-2.4 1.8-3.8 1.8-2.8 0-5-1.9-5-4.8s2.2-4.8 5-4.8c2.6 0 4.2 1.9 4.2 4.8v1h-6.5c0.2 1.1 1 1.7 2.1 1.7 0.9 0 1.5-0.5 2-1.1l2 1.4zm-2.4-4c0-0.9-0.7-1.7-1.7-1.7-1.2 0-1.9 0.8-2 1.7h3.7z" />
<path class="st0"
d="m58.4 14.5c-0.6 1-1.8 1.4-2.9 1.4-1.7 0-3.2-1-3.2-2.8 0-3.1 3.8-3.2 6.1-3.2 0-1-0.8-1.6-1.8-1.6-0.9 0-1.7 0.4-2.3 1.1l-1.5-1.5c1-1 2.5-1.5 4-1.5 3.3 0 4.1 1.7 4.1 4.7v4.6h-2.6l0.1-1.2zm-0.7-2.9c-0.9 0-2.8 0.1-2.8 1.3 0 0.7 0.7 1 1.3 1 1.1 0 2.1-0.6 2.1-1.7v-0.6h-0.6z" />
<path class="st0"
d="m62.8 6.5h2.7v1.2c0.4-0.7 1.3-1.5 2.7-1.5 1.3 0 2.3 0.5 2.8 1.6 0.7-1.2 1.5-1.6 2.9-1.6 2.5 0 3.2 1.7 3.2 3.9v5.3h-2.8v-5.3c0-0.8-0.3-1.6-1.2-1.6-1.3 0-1.7 0.9-1.7 2v4.8h-2.8v-4.8c0-0.7 0-2-1.2-2-1.5 0-1.7 1.1-1.7 2.3v4.5h-2.8l-0.1-8.8z" />
<path class="st0" d="M78.8,2.4h2.9v4.9h5.6V2.4h2.9v13.2h-2.9V9.9h-5.6v5.7h-2.9V2.4z" />
<path class="st0"
d="m96.5 6.3c2.8 0 5 1.9 5 4.8s-2.2 4.8-5 4.8-5-1.9-5-4.8 2.2-4.8 5-4.8zm0 7c1.4 0 2.2-0.9 2.2-2.3s-0.8-2.3-2.2-2.3-2.2 0.9-2.2 2.3 0.8 2.3 2.2 2.3z" />
<path class="st0"
d="m107.9 9.2c-0.4-0.5-0.9-0.8-1.6-0.8-0.5 0-1 0.2-1 0.7 0 1.3 4.7 0.2 4.7 3.7 0 2.3-2.2 3-4.2 3-1.3 0-2.7-0.3-3.6-1.2l1.7-1.9c0.5 0.6 1.1 1 2 1 0.6 0 1.3-0.2 1.3-0.7 0-1.5-4.7-0.2-4.7-3.7 0-2.1 1.9-3 3.8-3 1.2 0 2.5 0.3 3.3 1.2l-1.7 1.7z" />
<path class="st0"
d="m117.5 8.8h-2.5v3c0 1 0.1 1.7 1.3 1.7 0.3 0 0.9 0 1.1-0.2v2.3c-0.6 0.2-1.3 0.3-2 0.3-1.9 0-3.3-0.8-3.3-2.7v-4.4h-1.8v-2.3h1.8v-2.7h2.8v2.7h2.5v2.3z" />
<path class="st0"
d="m16.4 12.6c-1.4 0.7-2.9 1.2-4.6 1.1-4.9-0.1-8.8-4.1-8.7-8.9 0-1.6 0.5-3.2 1.4-4.4-2.6 1.5-4.4 4.2-4.5 7.4-0.1 4.8 3.8 8.8 8.7 8.9 3.3 0 6.1-1.6 7.7-4.1" />
<path class="st1"
d="m9.2 0c-1.3 0-2.6 0.3-3.7 0.9-0.7 1.2-1 2.5-1.1 3.8-0.1 4.2 3.3 7.6 7.6 7.7 1.3 0 2.7-0.3 3.8-0.9 0.7-1.1 1.1-2.5 1.1-3.9 0-4.2-3.4-7.6-7.7-7.6z" />
<path class="st0"
d="m118.5 2.5c0-0.1 0-0.3 0.1-0.4s0.1-0.2 0.2-0.3 0.2-0.2 0.3-0.2c0.1-0.1 0.2-0.1 0.4-0.1 0.1 0 0.3 0 0.4 0.1s0.2 0.1 0.3 0.2 0.2 0.2 0.2 0.3c0.1 0.1 0.1 0.2 0.1 0.4 0 0.1 0 0.3-0.1 0.4s-0.1 0.2-0.2 0.3-0.2 0.2-0.3 0.2c-0.1 0.1-0.2 0.1-0.4 0.1-0.1 0-0.3 0-0.4-0.1s-0.2-0.1-0.3-0.2-0.2-0.2-0.2-0.3c-0.1-0.2-0.1-0.3-0.1-0.4zm0.2 0c0 0.1 0 0.2 0.1 0.3s0.1 0.2 0.2 0.3 0.2 0.1 0.3 0.2 0.2 0.1 0.3 0.1 0.2 0 0.3-0.1 0.2-0.1 0.3-0.2 0.1-0.2 0.2-0.3 0.1-0.2 0.1-0.3 0-0.2-0.1-0.3-0.1-0.2-0.2-0.3-0.2-0.1-0.3-0.2-0.2-0.1-0.3-0.1-0.2 0-0.3 0.1-0.2 0.1-0.3 0.2-0.1 0.2-0.2 0.3c-0.1 0-0.1 0.1-0.1 0.3zm0.4-0.6h0.4c0.3 0 0.4 0.1 0.4 0.3 0 0.1 0 0.2-0.1 0.2-0.1 0.1-0.1 0.1-0.2 0.1l0.4 0.5h-0.2l-0.3-0.5h-0.2v0.5h-0.2v-1.1zm0.2 0.5h0.2 0.1 0.1s0.1 0 0.1-0.1v-0.1-0.1s0-0.1-0.1-0.1h-0.1-0.1-0.2v0.4z" />
</svg>
</div>
</main>
</section>
Raw
style.scss
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700&display=swap');
// * {box-sizing: border-box; border: 1px solid red;}
html,
body {
height: 100%;
}
$breakpoint-1: 600px;
$breakpoint-2: 800px;
$breakpoint-3: 1200px;
$breakpoint-4: 1600px;
img {max-width: 100%;}
h1,h2,h3,h4,h5,h6 {
font-family: Ubuntu, sans-serif;
line-height: 1.25;
}
.site {
min-height: min-content;
height: 100%;
align-items: stretch;
overflow: hidden;
display: flex;
flex-direction: column;
@media (min-width: $breakpoint-2) {
flex-direction: row;
}
}
.error-message {
z-index: 100;
flex: 1 2 auto;
display: flex;
flex-direction: column;
align-items: center;
min-height: min-content;
padding: 2rem;
overflow: auto;
@media (min-width: $breakpoint-2) {
justify-content: center;
padding: 6rem 2rem;
}
@media (min-width: $breakpoint-3) {
padding: 6rem;
}
@media (min-width: $breakpoint-4) {
padding: 8rem;
}
h1 {
margin-bottom: 0;
line-height: 1;
font-size: 1.5rem;
@media (min-width: $breakpoint-3) {
font-size: 1.75rem;
}
}
}
.error-message__content {
max-width: 30rem;
display: flex;
flex-direction: column;
flex-grow: 1;
> * + * {
margin-top: 2rem;
}
@media (min-width: $breakpoint-4) {
max-width: 50rem;
}
svg:first-of-type {
margin-bottom: 4rem;
}
svg:last-of-type {
padding-top: 2rem;
margin-top: auto;
}
p {
margin-bottom: 0;
}
}
.error-aside {
background-color: rgb(0,115,236);
position: relative;
padding: 2rem;
@media (min-width: $breakpoint-2) {
max-width: 50rem;
flex: 1 1 auto;
}
@media (min-width: $breakpoint-4) {
min-width: 40rem;
overflow: hidden;
}
&::before {
content: "404";
position: absolute;
color: white;
bottom: 0;
line-height: 1;
font-size: 20rem;
left: -1.45ch;
font-weight: 700;
color: rgba(255,255,255,0.2);
@media (min-width: $breakpoint-4){
font-size: 30rem;
}
}
&::after {
line-height: 1;
content: "404";
position: absolute;
color: white;
top: .2ch;
font-size: 20rem;
right: -1.45ch;
font-weight: 700;
color: rgba(255,255,255,0.2);
@media (min-width: $breakpoint-4){
font-size: 30rem;
}
}
}
.back-to-dreamhost {
border: 0 none;
background-color: transparent;
color: #fff;
z-index: 100;
padding: 1rem;
border-radius: 5rem;
position: relative;
left: -1rem;
transition: .2s all linear;
animation: fadein 6s ease-in;
animation-iteration-count: 1;
cursor: pointer;
text-decoration: none;
&:hover{
background-color: rgba(255,255,255,0.2);
left: 0;
}
}
@keyframes fadein {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.Button {
font-family: "Proxima Nova", sans-serif;
color: #0073EC;
background: transparent;
border: solid 1px #0073EC;
border-radius: 3px;
display: inline-block;
font-size: 1rem;
line-height: 1rem;
padding: 0.75rem 2rem 0.625rem;
margin: 0;
text-align: center;
text-decoration: none;
font-weight: 600;
text-shadow: none;
vertical-align: baseline;
outline: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.Button--primary {
background: #0073EC;
color: #ffffff;
border: solid 1px #0073EC;
}
.action-group {
display: flex;
* + * {
margin-left: 1rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment