Szachownica
szachownica.html
— 5.8 KB
File contents
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<title>
Sachownica
</title>
<style>
#header{
text-align: center;
font-family: 'Dancing Script', cursive;
font-size: 25pt;
padding-bottom: 1em;
}
#board{
width: 800px;
height: 800px;
border: 20px solid #d00;
margin: 0 auto;
}
.black-figures {
color: black;
}
.white-figures {
color: white;
}
.dark, .light{
width: 100px;
height: 100px;
float: left;
font-size: 60pt;
text-align: center;
padding-top: 5px;
box-sizing: border-box;
}
.dark{
background-color: brown;
}
.light{
background-color: #ccc;
}
.row{
clear: both;
}
</style>
</head>
<body>
<div id="header">
Szachy są super ;)
</div>
<div id="board">
<div class="row black-figures">
<div class="dark"><i class="fas fa-chess-rook"></i></div>
<div class="light"><i class="fas fa-chess-knight"></i></div>
<div class="dark"><i class="fas fa-chess-bishop"></i></div>
<div class="light"><i class="fas fa-chess-king"></i></div>
<div class="dark"><i class="fas fa-chess-queen"></i></div>
<div class="light"><i class="fas fa-chess-bishop"></i></div>
<div class="dark"><i class="fas fa-chess-knight"></i></div>
<div class="light"><i class="fas fa-chess-rook"></i></div>
</div>
<div class="row black-figures">
<div class="light">
<i class="fas fa-chess-pawn"></i>
</div>
<div class="dark"><i class="fas fa-chess-pawn"></i></div>
<div class="light"><i class="fas fa-chess-pawn"></i></div>
<div class="dark"><i class="fas fa-chess-pawn"></i></div>
<div class="light"><i class="fas fa-chess-pawn"></i></div>
<div class="dark"><i class="fas fa-chess-pawn"></i></div>
<div class="light"><i class="fas fa-chess-pawn"></i></div>
<div class="dark"><i class="fas fa-chess-pawn"></i></div>
</div>
<div class="row">
<div class="dark"></div>
<div class="light"></div>
<div class="dark"></div>
<div class="light"></div>
<div class="dark"></div>
<div class="light"></div>
<div class="dark"></div>
<div class="light"></div>
</div>
<div class="row">
<div class="light"></div>
<div class="dark"></div>
<div class="light"></div>
<div class="dark"></div>
<div class="light"></div>
<div class="dark"></div>
<div class="light"></div>
<div class="dark"></div>
</div>
<div class="row">
<div class="dark"></div>
<div class="light"></div>
<div class="dark"></div>
<div class="light"></div>
<div class="dark"></div>
<div class="light"></div>
<div class="dark"></div>
<div class="light"></div>
</div>
<div class="row">
<div class="light"></div>
<div class="dark"></div>
<div class="light"></div>
<div class="dark"></div>
<div class="light"></div>
<div class="dark"></div>
<div class="light"></div>
<div class="dark"></div>
</div>
<div class="row white-figures">
<div class="dark"><i class="fas fa-chess-pawn"></i></div>
<div class="light"><i class="fas fa-chess-pawn"></i></div>
<div class="dark"><i class="fas fa-chess-pawn"></i></div>
<div class="light"><i class="fas fa-chess-pawn"></i></div>
<div class="dark"><i class="fas fa-chess-pawn"></i></div>
<div class="light"><i class="fas fa-chess-pawn"></i></div>
<div class="dark"><i class="fas fa-chess-pawn"></i></div>
<div class="light"><i class="fas fa-chess-pawn"></i></div>
</div>
<div class="row white-figures">
<div class="light"><i class="fas fa-chess-rook"></i></div>
<div class="dark"><i class="fas fa-chess-knight"></i></div>
<div class="light"><i class="fas fa-chess-bishop"></i></div>
<div class="dark"><i class="fas fa-chess-king"></i></div>
<div class="light"><i class="fas fa-chess-queen"></i></div>
<div class="dark"><i class="fas fa-chess-bishop"></i></div>
<div class="light"><i class="fas fa-chess-knight"></i></div>
<div class="dark"><i class="fas fa-chess-rook"></i></div>
</div>
</div>
</body>
</html>