Layers

dabblet.css

/* Layers */
html, body, figure { height:100vh }
body {	background:linear-gradient(to bottom,rgb(32,111,181),white) }

figure { position:absolute !important;
	top:0; bottom:0; left:0; right:0; z-index:-1;
	box-shadow:0 10px 100px rgb(32,111,181);
	transform:rotateX(30deg); transform-origin:center bottom }


nav { white-space:nowrap; text-align:center;
	position:relative; z-index:2; overflow:auto;
	padding:8rem 0 3rem }
nav a { color:rgb(32,111,181); background:rgba(255,255,255,.93); 
	font-size:.8rem; margin:5px; border:1px solid rgba(32,111,181,.2);
	width:300px; box-sizing:border-box; display:inline-block; vertical-align:top;
	box-shadow:0 10px 100px rgb(32,111,181); }
nav a:before { color:white; background:rgb(32,111,181);
	padding:.3rem 0; margin-right:5px;
	transform:translate3d(-.3rem,-.3rem,0);
	box-shadow:.3rem .3rem 10px rgba(32,111,181,.6);
	width:2rem; display:inline-block; text-align:center }
nav a:after { content:attr(title); font-size:1rem;
	margin-left:5px; white-space:normal; display:block;
	margin:.3em 1em 1em 2.4em }


*,:before,:after {	font:1.3rem/1.3rem FontAwesome,Avenir-Light; 
	background:transparent; transition:all 60ms;
	margin:0; text-decoration:none; border-radius:3px;
	transition:all .4s cubic-bezier(0,.4,.4,0);
	transform-style:preserve-3d; perspective:6000px;
	-background:rgba(255,0,0,.1); -outline:1px dotted }

dabblet.html

<nav>
	<a class=fa-hand-spock-o href=#contact
		title="Schedule with friends and family	
		and be right on time"> Meet </a>
	<a class=fa-gift href=#product
		title="Pick up food and errands,	
		discover new services along familiar routes"> Get </a>
	<a class=fa-bus href=#location
		title="Plan your trip and be on time with real time traffic
		and predictive analytics"> Go </a>
</nav>
<figure></figure>

dabblet.js

ready=()=>{
  new google.maps.Map(document.querySelector('figure'), {
      zoom:13,    
      center: {lat:39.0833686,lng:-94.6019888},
      disableDefaultUI:true
  })
};

(url => new Promise (then => {
    with (document){
    	if (querySelector(`[src='${url}']`))
    		return then(url);
    	s = createElement`script`,
    	s.src = url,        
    	s.onload = () => then(url),        
    	head.appendChild(s);
    }
}))`https://maps.googleapis.com/maps/api/js?key=AIzaSyD9f85xqkym_nkwqabPXTnIQh6bbrAa4Cs&callback=ready`
.then(ready);

(url => {
	with (document)
		link = querySelector(`[src='${url}']`)
			|| createElement`link`,
		link.href = url,
		link.rel = 'stylesheet',
		head.appendChild(link)
})`https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css`;

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}