shapes sizes and colors

by jshacker

HTML

<div class="grayNurse"></div>
<div class="black" data-color="black"></div>
<div class="mineShaft"></div>
<div class="lochmara"></div>
<div class="alto"></div>
<div class="white"></div>
<div class="celeste"></div>
<div class="gallery"></div>
<div class="pacificBlue"></div>
<div class="stormDust"></div>
<div class="wildSand"></div>
<div class="christi"></div>

CSS

div {
  height: 50px;
  width: 50px;
  border-radius: 4px;
  margin: 5px;
  display: inline-block;
  box-shadow: 1px 1px 1px #333;
}
div:nth-child(2n + 1) {
  border-radius: 50%;
}
.grayNurse {
  background-color: #e9e9e9;
}
.black {
  background-color: black;
}
.mineShaft {
  background-color: #333;
}
.lochmara {
  background-color: #008ed2;
}
.alto {
  background-color: #ddd;
}
.white {
  background-color: white;
}
.celeste {
  background-color: #ccc;
}
.gallery {
  background-color: #ededed;
}
.pacificBlue {
  background-color: #008fd3;
}
.stormDust {
  background-color: #666;
}
.wildSand {
  background-color: #f4f4f4;
}
.christi {
  background-color: #51b91e;
}