HOW TO CREATE CHESS BOARD USING HTML AND CSS
FOR CSS:
.body{
background: url(L.jpg);
}
.chessboard{
width: 600px;
height: 600px;
margin: 15px auto;
border: 15px solid #333;
}
.black{
float: left;
width: 75px;
height: 75px;
background-color: #999;
font-size: 50px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.white{
float: left;
width: 75px;
height: 75px;
background-color: #fff;
font-size: 50px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
FOR HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="chess.css">
<title>chessboard</title>
</head>
<body class="body">
<div class="chessboard">
<!--first-->
<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>
<!--second-->
<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>
<!--third-->
<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>
<!--forth-->
<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>
<!--fifth-->
<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>
<!--sixth-->
<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>
<!--seventh-->
<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>
<!--eighth-->
<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>
</body>
</html>
Comments
Post a Comment