boxes , image & ribbon

dabblet.css

/* boxes , image  & ribbon */
html {
	font-size:1.2em;/* rezize font-size to see */
	background:#333;
	}
body {
	text-align:center;
}
aside {
	display:inline-table; 
	padding:0 2em;
	background:#159;
	height:10em;
	width:13em;
	margin:0.5em;
	box-shadow:0 0 5px gold;
	}
aside figure {
	display:table-cell;
	vertical-align:middle;
}
aside figure img {
	max-height:8em;
	width:13em;
	max-width:13em;
	box-shadow:-0 0 0 1px tomato;
}
aside figure figcaption {
	position:relative;
	z-index:1;
	margin:0 ;
}
aside figure figcaption:after {
	content:'';
	border:0.5rem solid red;
	position:absolute;
	right:-1rem;
	top:4.55rem;
	height:0;font-size:0;overflow:hidden;
	border-right:solid transparent 0.5rem;
	border-bottom:solid transparent 0.5rem;
}
aside figure figcaption h3 {
	position:absolute;
	text-align:center;
	text-shadow:1px 1px white;
	box-shadow: 15px 15px 15px -12px;
	overflow:hidden;
	border-radius:0.15em;
	margin:0 -1rem 0 -1.1em;
	margin-top:2.75em;
	width:13.1em;
	z-index:1;
}
aside figure figcaption h3:before {content:'';
	position:absolute;
	transform:rotate(32deg) skew(-30deg);
	height:1.5em;
	width:1.25em;
	left:-0.8em;
	box-shadow: 0 0 0 5000px tomato, inset 0px 1px 5px;
	z-index:-1;
}
@media all and (max-width:2700px) {html {font-size:50px;transition:1s;}}
@media all and (max-width:2000px) {html {font-size:45px;transition:1s;}}
@media all and (max-width:1600px) {html {font-size:30px;transition:1s;}}
@media all and (max-width:1200px) {html {font-size:25px;transition:1s;}}
@media all and (max-width:1100px) {html {font-size:22px;transition:1s;}}
@media all and (max-width: 900px) {html {font-size:18px;transition:1s;}}
@media all and (max-width: 700px) {html {font-size:15px;transition:1s;}}
@media all and (max-width: 500px) {html {font-size:12px;transition:1s;}}
@media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}}
h1,p {border:solid 1px;}

dabblet.html

<aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/architettura/casa-tre/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/architettura/municipio/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/architettura/studio-grattacielo/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/interni/attico-a/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/interni/casa-malori/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/interni/casa-vecchi/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/interni/prince-discoteca-ristorante/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/progetti-urbani/riqualificazione-centro-storico/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/design/dual-mobile-bagno/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/design/letto-riletto/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/design/amaca-tavolo/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/design/cabine-ascensori-elfer/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/design/parca-cucina/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/progetti-urbani/area-ex-fonderie/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/interni/scuderie-villa-tedeschi/_img/copertina.jpg" />
</figure>
</aside>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}