Tag: maintenance page

Creating textured background HTML5

Creating texture background HTML5 and making the html page is very simple and hosting in a minute, so here some trick to making more fancy on it. We have seen in previous post that how to make simple html site maintenance page.

Creating textured background HTML5 snippet

body {
color: #FFF;
..
background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color: #282828;
background-size:8px 8px;
…
}

body {

color: #FFF;

background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;

background-color: #282828;

background-size:8px 8px;

…

}

I have modified the body text color and added few background tags. This would make more different than previous one.

Cheers!

July 15, 2017

Simple HTML Maintenance Page

We everyone are looking for very simple HTML and classy site maintenance page for hosting. Nowhere we go.

html maintenance page snippet

<!doctype html>
<title>Site Maintenance!</title>
<style>
  body { text-align: center; padding: 150px; }
  h1 { font-size: 50px; }
  body { font: 20px Helvetica, sans-serif; color: #333; }
  article { display: block; text-align: left; width: 650px; margin: 0 auto; }
  a { color: #dc8100; text-decoration: none; }
  a:hover { color: #333; text-decoration: none; }
</style>

<article>
    <h1>We&rsquo;ll be back soon!</h1>
    <div>
        <p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. Please feel free to <a href=”mailto:contact@sathiya.io”>contact us</a>, otherwise we&rsquo;ll be back online shortly!</p>
        <p>&mdash; IT Admin <a href=”http://sathiya.io” target=”_new”>Sathiya.io</a></p>
    </div>
</article>

<!doctype html>

<title>Site Maintenance!</title>

<style>

body { text-align: center; padding: 150px; }

h1 { font-size: 50px; }

body { font: 20px Helvetica, sans-serif; color: #333; }

article { display: block; text-align: left; width: 650px; margin: 0 auto; }

a { color: #dc8100; text-decoration: none; }

a:hover { color: #333; text-decoration: none; }

</style>

<div>

<p>Sorry for the inconvenience but we’re performing some maintenance at the moment. Please feel free to <a href=“mailto:contact@sathiya.io”>contact us</a>, otherwise we’ll be back online shortly!</p>

<p>— IT Admin <a href=“http://sathiya.io” target=“_new”>Sathiya.io</a></p>

</div>

</article>

Cheers…!

April 6, 2016