<h1>Pure CSS Blueprint</h1>
<footer>by <a href="https://twitter.com/FWeinb">Fabrice Weinberg</a></footer>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);


html{
  background:radial-gradient(50% 100%, rgba(255,255,255,.2), rgba(255,255,255,0)),
    
             linear-gradient(90deg, rgba(50,100,170,.7) 1px, transparent 0),
             linear-gradient(180deg, rgba(50,100,170,.7) 1px, transparent 0),
    
             linear-gradient(90deg, rgba(50,100,170,.4) 1px, transparent 0),
             linear-gradient(180deg, rgba(50,100,170,.4) 1px, transparent 0),
    
             linear-gradient(90deg, rgba(50,100,170,1) 2px, transparent 0),
             linear-gradient(180deg, rgba(50,100,170,1) 2px, transparent 0);
  
  background-color:#074b97;
  
  background-size:100% 100%, 
    
                  50px 50px,
                  50px 50px,
    
                  25px 25px,
                  25px 25px,
    
                  100px 100px, 
                  100px 100px;
  
  background-attachment: local;
  
  width:100%;
  height:100%;
}

* { box-sizing: border-box } 

body{
  font-family:'Open Sans';
  color:white;
  margin:0;
}


h1{
  font-size:24pt;
  text-align:center;
  padding:8px;
}

footer{
  position:absolute;
  bottom:10px;
  width:100%;
  text-align:right;
  padding:5px;
}


a{
  color:white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js