Source code:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Chess board</title>
</head>
<body>
<table>
<tr>
<th>♖</th>
<th id="black">♘</th>
<th id="white">♗</th>
<th id="black">♔</th>
<th id="white">♕</th>
<th id="black">♗</th>
<th id="white">♘</th>
<th id="black">♖</th>
</tr>
<tr>
<th id="black">♙</th>
<th >♙</th>
<th id="black">♙</th>
<th id="white">♙</th>
<th id="black">♙</th>
<th id="white">♙</th>
<th id="black">♙</th>
<th id="white">♙</th>
</tr>
<tr>
<td>
<br>
</td>
<td id="black"></td>
<td ></td>
<td id="black"></td>
<td></td>
<td id="black"></td>
<td ></td>
<td id="black"></td>
</tr>
<tr>
<td id="black">
<br>
</td>
<td></td>
<td id="black"></td>
<td></td>
<td id="black"></td>
<td></td>
<td id="black"></td>
<td></td>
</tr>
<tr>
<td>
<br>
</td>
<td id="black"></td>
<td ></td>
<td id="black"></td>
<td></td>
<td id="black"></td>
<td ></td>
<td id="black"></td>
</tr>
<tr>
<td id="black">
<br>
</td>
<td></td>
<td id="black"></td>
<td></td>
<td id="black"></td>
<td></td>
<td id="black"></td>
<td></td>
</tr>
<tr>
<th id="">♟</th>
<th id="black">♟</th>
<th id="">♟</th>
<th id="black">♟</th>
<th id="">♟</th>
<th id="black">♟</th>
<th id="">♟</th>
<th id="black">♟</th>
</tr>
<tr>
<th id="black-color">♜</th>
<th id="black">♞</th>
<th id="black-color">♝</th>
<th id="">♛</th>
<th id="black-color">♚</th>
<th id="black">♝</th>
<th id="black-color">♞</th>
<th id="black">♜</th>
</tr>
</table>
</body>
</html>
CSS:
body{height:100vh;}
table{width:100%; height: 100%; border: #444 2px solid;}
#black{background-color: #baca44;}
th, td{background-color: #769656; opacity:70%}
Comments
Post a Comment