Chess Board Model

HTML
<html> <head> <meta charset="UTF-8"> <title>Chessboard using Pure CSS and HTML</title> <link rel="stylesheet" href="chess.css" type="text/css"> </head> <body> <div > <marquee behavior="scroll" direction="right"><h1 class="heading">CHESS BOARD</h1></marquee> <div class="chessboard "> <!-- 1st --> <div class="white">♜</div> <div class="black">♞</div> <div class="white">♝</div> <div class="black">♛</div> <div class="white">♚</div> <div class="black">♝</div> <div class="white">♞</div> <div class="black">♜</div> <!-- 2nd --> <div class="black">♟</div> <div class="white">♟</div> <div class="black">♟</div> <div class="white">♟</div> <div class="black">♟</div> <div class="white">♟</div> <div class="black">♟</div> <div class="white">♟</div> <!-- 3th --> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <!-- 4st --> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <!-- 5th --> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <!-- 6th --> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <!-- 7th --> <div class="white">♙</div> <div class="black">♙</div> <div class="white">♙</div> <div class="black">♙</div> <div class="white">♙</div> <div class="black">♙</div> <div class="white">♙</div> <div class="black">♙</div> <!-- 8th --> <div class="black">♖</div> <div class="white">♘</div> <div class="black">♗</div> <div class="white">♕</div> <div class="black">♔</div> <div class="white">♗</div> <div class="black">♘</div> <div class="white">♖</div> </div> </div> </body> </html>
CSS
body { background: #e8e7de; font-family: 'Montserrat', sans-serif; } .heading{ font-family:sans-serif; font-style:italic; font-size:40px; margin:20px; color:red; text-decoration: underline; text-decoration-color: #000; box-shadow:black; } .chessboard { width: 640px; height: 640px; margin: 20px; border: 10px solid #000; border-radius: 4px; background: #e59110; box-shadow: 5px 5px 8px #bebdb6, -5px -5px 8px #ffffff; } .black { float: left; width: 80px; height: 80px; background-color:#769656; font-size:50px; text-align:center; display: table-cell; vertical-align:middle; } .white { float: left; width: 80px; height: 80px; background-color:#eeeed2; font-size:50px; text-align:center; display: table-cell; vertical-align:middle; }
JAVASCRIPT
Expand for more options Login