<div class="turquoise"><p>Turquoise</p><span>#1abc9c</span></div>
<div class="emerland"><p>Emerland</p><span>#2ecc71</span></div>
<div class="peterriver"><p>Peter River</p><span>#3498db</span></div>
<div class="amethyst"><p>Amethyst</p><span>#9b59b6</span></div>
<div class="wetasphalt"><p>Wet Asphalt</p><span>#34495e</span></div>
<div class="greensea"><p>Green Sea</p><span>#16a085</span></div>
<div class="nephritis"><p>Nephritis</p><span>#27ae60</span></div>
<div class="belizehole"><p>BelizeHole</p><span>#2980b9</span></div>
<div class="wisteria"><p>Wisteria</p><span>#8e44ad</span></div>
<div class="midnightblue"><p>Midnight Blue</p><span>#2c3e50</span></div>
<div class="sunflower"><p>Sun Flower</p><span>#f1c40f</span></div>
<div class="carrot"><p>Carrot</p><span>#e67e22</span></div>
<div class="alizarin"><p>Alizarin</p><span>#e74c3c</span></div>
<div class="clouds"><p>Clouds</p><span>#ecf0f1</span></div>
<div class="concrete"><p>Concrete</p><span>#95a5a6</span></div>
<div class="orange"><p>Orange</p><span>#f39c12</span></div>
<div class="pumpkin"><p>Pumpkin</p><span>#d35400</span></div>
<div class="pomegranate"><p>Pomegranate</p><span>#c0392b</span></div>
<div class="silver"><p>Silver</p><span>#bdc3c7</span></div>
<div class="asbestos"><p>Asbestos</p><span>#7f8c8d</span></div>
@import url(https://fonts.googleapis.com/css?family=Lato:700);
*,
*:before,
*:after {
box-sizing: border-box
}
html, body {
color: #fff;
font-family: 'Lato';
font-size: 16px;
width: 100%;
height: 100%;
}
div {
box-shadow: inset 0 0 0 3px transparent;
float: left;
display: block;
width: 20%;
height: 25%;
position: relative;
transition: box-shadow 0.5s ease;
&:hover,
&:active {
box-shadow: inset 0 0 0 3px #666;
cursor: pointer;
}
}
p {
bottom: 5px;
left: 5px;
margin: 0;
padding: 0;
position: absolute;
text-transform: uppercase;
}
span {
bottom: 25px;
left: 5px;
position: absolute;
}
.turquoise { background: #1abc9c; }
.emerland { background: #2ecc71; }
.peterriver { background: #3498db; }
.amethyst { background: #9b59b6; }
.wetasphalt { background: #34495e; }
.greensea { background: #16a085; }
.nephritis { background: #27ae60; }
.belizehole { background: #2980b9; }
.wisteria { background: #8e44ad; }
.midnightblue { background: #2c3e50; }
.sunflower { background: #f1c40f; }
.carrot { background: #e67e22; }
.alizarin { background: #e74c3c; }
.clouds { background: #ecf0f1; color: #777; }
.concrete { background: #95a5a6; }
.orange { background: #f39c12; }
.pumpkin { background: #d35400; }
.pomegranate { background: #c0392b; }
.silver { background: #bdc3c7; }
.asbestos { background: #7f8c8d; }
View Compiled
// there's no easy way to copy to clipboard yet :'(
/*
function initClickAndCopy() {
document.querySelector('body').addEventListener('click', function(event) {
var node = event.target;
if (node.nodeName === 'DIV') {
console.log(node.querySelector('span').innerText);
}
return true;
}, false);
}
if (window.addEventListener) {
window.addEventListener("load", initClickAndCopy, false);
} else if (window.attachEvent) {
window.attachEvent("onload", initClickAndCopy);
} else {
window.onload = initClickAndCopy;
}
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.