Corporate Banner

dabblet.css

/* Corporate Banner */
/** /*{background:rgba(255,0,0,.1);outline:1px solid}/**/
* { font:1.3rem/1.6rem Calibri;
	text-decoration:none; color:currentcolor }

.banner > * { box-sizing:border-box }
.banner >:first-child { font-size:2rem }
.banner >:first-child:before {
	content:url(http://oraclegov.us/favicon-96x96.png) }
.banner >:first-child:after { content:attr(title);
	font-size:1.3rem; display:block; padding:1em 0;
	max-width:21em }
.banner >:first-child ~ * { background:hsl(211,48%,48%);
	padding:0 .3em; margin:1px }

.banner { color:white; text-shadow:1px 1px 10px hsl(211,48%,48%);
	background:hsl(211,48%,48%)
		url(https://upload.wikimedia.org/wikipedia/commons/f/f6/Peacearchuscanadaborder.JPG)
		50% 0/cover no-repeat;
	padding:1.6em;
	display:flex; flex-flow:column wrap }
	
@media (min-width:1000px){
	.banner,
	.banner >:first-child { height:12em }
	.banner >:first-child ~ * { width:12em; line-height:2 }
}

.banner .Presentations { border-right:1ex solid hsl(149,45%,47%) }
.banner .Demos { border-right:1ex solid hsl(188,84%,44%) }
.banner .Workshops { border-right:1ex solid hsl(257,35%,45%) }
.banner .Videos { border-right:1ex solid hsl(352,75%,64%) }
.banner .Wins { border-right:1ex solid hsl(17,82%,57%) }

dabblet.html

<nav class=banner>
  <a href=/ 
   	title="The top recommended Pre-Sales Assets for Public Sector Sales Consultants to use in the field to help sell Oracle Public Cloud"> 
  	Cloud Gold Assets </a>
  <a href=# class=Presentations> Presentations </a>
  <a href=# class=Demos> Demos </a>
  <a href=# class=Workshops> Workshops </a>
  <a href=# class=Videos> Videos </a>
  <a href=# class=Wins> Wins </a>
</nav>

dabblet.js

// alert('Hello world!');

settings.json

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