Professional Documents
Culture Documents
DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="calender">
<div class="month">
<strong>April</strong>
<strong>2023</strong>
</div>
<table>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>The</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</span></tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
body{
background-image: url(pics.png);
background-size: cover;
background-repeat: no-repeat;
pa
.calender{
max-width: 800px;
font-family: serif;
font-weight: bold;
color: rosybrown;
.month{
text-align: center;
background: floralwhite;
font-size: 80px;
letter-spacing: 1px;
color: darkbrown;
border:3px khaki;
width: 100%;
table-layout: fixed;
text-align: center;
font-size: 27px;
border-collapse: collapse;
font-family: Elaphant;
padding: 15px;
th{
background: brown;
color: khaki;
td{
background: mistyrose;
color: saddlebrown;
td:hover{
background: white;
}
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.chessboard {
width: 640px;
height: 640px;
margin: 20px;
.black {
float: left;
width: 80px;
height: 80px;
background-color: darkred;
font-size:50px;
text-align:center;
display: table-cell;
vertical-align:middle;
.white {
float: left;
width: 80px;
height: 80px;
background-color: lightpink;
font-size:50px;
text-align:center;
display: table-cell;
vertical-align:middle;
</style>
</head>
<body>
<div class="chessboard">
<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>
<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 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>
<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 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>
<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 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>
<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>