Skip to content

Instantly share code, notes, and snippets.

@leesmith

leesmith/index.html

Created October 23, 2018 17:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leesmith/4139255a0e1990e87a74d5462e50ebdd to your computer and use it in GitHub Desktop.
Save leesmith/4139255a0e1990e87a74d5462e50ebdd to your computer and use it in GitHub Desktop.
Download ZIP
CSS maintenance server
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Maintenance Page</title>
<style>
html{font-size:18px}
body{font-family:'IBM Plex Sans',sans-serif;line-height:1.6;font-size:1em;padding:0 20px}
#wrapper{width:100%;height:350px;margin:0 auto;position:absolute;top:50%;left:50%;margin-top:-175px;margin-left:-50%}
.content{width:100%;margin:0 auto;text-align:center}
h1{font-weight:400;font-size:1.5em;color:#000;text-align:center}
.grid{max-width:175px;height:200px;background:#333;margin:0 auto;padding:1em 0;border-radius:4px}
.grid .server{display:block;max-width:68%;height:20px;background:rgba(255,255,255,.15);box-shadow:0 0 0 1px black inset;margin:10px 0 20px 30px}
.grid .server:before{content:"";position:relative;top:7px;left:-18px;display:block;width:6px;height:6px;background:green;border:1px solid black;border-radius:6px;margin-top:7px}
@-webkit-keyframes pulse{0%{background:rgba(255,255,255,.15)}100%{background:#ae1508}}
.grid .server:nth-child(3):before{background:rgba(255,255,255,.15);-webkit-animation:pulse .5s infinite alternate}
@-webkit-keyframes pulse_three{0%{background:rgba(255,255,255,.15)}100%{background:#d2710a}}
.grid .server:nth-child(5):before{background:rgba(255,255,255,.15);-webkit-animation:pulse_three .7s infinite alternate}
@-webkit-keyframes pulse_two{0%{background:rgba(255,255,255,.15)}100%{background:#9da506}}
.grid .server:nth-child(1):before{background:rgba(255,255,255,.15);-webkit-animation:pulse_two .1s infinite alternate}
.grid .server:nth-child(2):before{background:rgba(255,255,255,.15);-webkit-animation:pulse_two .175s infinite alternate}
.grid .server:nth-child(4):before{background:rgba(255,255,255,.15);-webkit-animation:pulse_two .1s infinite alternate}
@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2) {
html{font-size:12px}
}
@media only screen and (min-device-width:320px) and (max-device-width:568px) and (-webkit-min-device-pixel-ratio:2) {
html{font-size:14px}
}
</style>
</head>
<body>
<div id="wrapper">
<div class="grid">
<span class="server"></span>
<span class="server"></span>
<span class="server"></span>
<span class="server"></span>
<span class="server"></span>
</div>
<h1>Please sit tight as we're currently performing maintenance.</h1>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment