WebMail Login

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>

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;
  }
}

webmail-login.markdown

WebMail Login

A Pen by ian hernandez on CodePen.

License.