CSS3 logo enschede

dabblet.css

/**
 * CSS3 logo enschede
 */
@import url(http://fonts.googleapis.com/css?family=Noto+Serif:400italic|Sanchez);
body {
	background: white;
	min-height: 100%;
}
div {
	width:250px;
	height:235px;
	border-top:30px solid red;
	border-bottom:30px solid red;
	transition:1s;
	box-sizing:border-box;

}
div:before, div:after {
	width: 40px;
	height: 175px;
	content:"";
	position:absolute;
	left:113px;
	background:red;
	transition:1s;
}
div:before {
	transform: skew(45deg);
}
div:after {
	transform: skew(-45deg);
}
span {
	width:250px;
	height:30px;
	position:absolute;
	top:110px;
	background:red;
}
span:before, span:after {
	position:absolute;
	top:2px;
	z-index:10;
	color:white;
	opacity:0;
}
span:before {
	width:100%;
	content: "Gemeente";
	font-style:italic;
	font-family:'Noto Serif';
	left:50px;
	transition:1s 1s;
}
span:after {
	content: "Enschede";
	text-align:center;
	font-family:Sanchez;
	left:130px;
	transition:1s 1.5s;
}
div:hover {
	height:30px;
	margin-top:90px
}
div:hover:before,div:hover:after {
	transform: rotate(90deg);
	width:29px;
	margin-top:-80px;
}
div:hover span:before, div:hover span:after {
	opacity:1;
}

dabblet.html

<div><span></span></div>

dabblet.js

// alert('Hello world!');

settings.json

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