fall 2016 chessboard

by Troy Johnson

HTML

<div class="chessboard">
<div class="white"></div>
<div class="blue"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="white"></div>
<div class="blue"><img src="http://www.charbase.com/images/glyph/9812" alt="white chess king" style="height: 100%; width: 100%; object-fit: contain"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="white"><img src="http://www.charbase.com/images/glyph/9820" alt="black chess rook" style="height: 100%; width: 100%; object-fit: contain"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="white"><img src="http://www.charbase.com/images/glyph/9818" alt="black chess king" style="height: 100%; width: 100%; object-fit: contain"></div>
<div class="blue"></div>
<div class="white"><img src="http://www.charbase.com/images/glyph/9820" alt="black chess rook" style="height: 100%; width: 100%; object-fit: contain"></div>
<div class="blue"><img src="http://www.charbase.com/images/glyph/9822" alt="black chess knight" style="height: 100%; width: 100%; object-fit: contain"></div>
<div class="blue"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="white"></div>
<div class="blue"><img src="http://www.charbase.com/images/glyph/9823" alt="black chess pawn" style="height: 100%; width: 100%; object-fit: contain"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="white"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="white"><img src="http://www.charbase.com/images/glyph/9817" alt="white chess pawn" style="height: 100%; width: 100%; object-fit: contain"></div>
<div class="blue"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="blue"></div>
<div...

CSS

.chessboard 
{border: 20px double #000000;
max-width: 768px; height: 768px; width: 100% margin: 20px;}
	
.blue 
{
background-color: #336699; 
float: left;
width: 12.5%;
height: 12.5vw;
/*display:table-cell*/
}

.white {background-color: #ffffff; float: left;width: 12.5%; height: 12.5%;display: table-cell;}