Learn with us how to create a simple maintenance page in CSS!
If you found us on TikTok on the following post, check out this article and copy-paste the full code!
Happy coding! 😻
@creative.tim Check the link in bio to access the full code 🤩 #webdevelopment #programmingexercises #csscoding #techtok ♬ original sound - Creative Tim
1. HTML Code
<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>
<div class="content">
<h1>Oh, no!
<br>We are currently performing maintenance. </br></h1>
</div>
</div>
2. CSS Code
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400);
html {font-size: 18px;}
body {
font-family: 'Source Sans Pro', sans-serif;
line-height: 1.6;
font-size: 1em;
padding: 0 20px;
background-color: #FFF4E9;
}
#wrapper {
width: 410px;
height: 350px;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -205px;
}
.content {
width: 100%;
margin: 0 auto;
text-align: center;
}
h1 {
font-weight: 300;
font-size: 1.5em;
color: #1A1423;
}
p {
font-family: 'Source Sans Pro', sans-serif;
line-height: 1em;
font-weight: 300;
color: #333;
}
/*
Server by @chrisburton
*/
.grid {
max-width: 175px;
height: 200px;
background: #222;
margin: 0 auto;
padding: 1em 0;
border-radius: 3px;
}
.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;
}
/* Animation */
@-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;}
}
I hope you did find this tutorial useful!
For more web development or UI/UX design tutorials, follow us on:
Other useful resources: