You are on page 1of 8

<!

DOCTYPE html>

<html>

<head>

<title>Nicolai Fuentes Calendar</title>

<link rel="stylesheet" type="text/css" href="style.css">

</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;

margin: 10% 10%;

.month{

text-align: center;

background: floralwhite;

font-size: 80px;

letter-spacing: 1px;

color: darkbrown;

border:3px khaki;

table, th, td{

width: 100%;

table-layout: fixed;

text-align: center;
font-size: 27px;

border-collapse: collapse;

border:5px solid black;

font-family: Elaphant;

tr, th, td{

padding: 15px;

th{

background: brown;

color: khaki;

font-family: arial black;

td{

background: mistyrose;

color: saddlebrown;

td:hover{

background: white;

}
<html>

<head>

<meta charset="UTF-8">

<title>Chessboard Priliminary exam</title>

<style type="text/css">

.chessboard {

width: 640px;

height: 640px;

margin: 20px;

border: 25px solid #333;

.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">

<!-- 1st -->

<div class="white">&#9820;</div>

<div class="black">&#9822;</div>

<div class="white">&#9821;</div>

<div class="black">&#9819;</div>

<div class="white">&#9818;</div>

<div class="black">&#9821;</div>

<div class="white">&#9822;</div>

<div class="black">&#9820;</div>

<!-- 2nd -->

<div class="black">&#9821;</div>

<div class="white">&#9821;</div>

<div class="black">&#9821;</div>

<div class="white">&#9821;</div>

<div class="black">&#9821;</div>

<div class="white">&#9821;</div>

<div class="black">&#9821;</div>

<div class="white">&#9821;</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">&#9817;</div>

<div class="black">&#9817;</div>

<div class="white">&#9817;</div>

<div class="black">&#9817;</div>

<div class="white">&#9817;</div>

<div class="black">&#9817;</div>

<div class="white">&#9817;</div>

<div class="black">&#9817;</div>

<!-- 8th -->

<div class="black">&#9814;</div>

<div class="white">&#9816;</div>

<div class="black">&#9815;</div>

<div class="white">&#9813;</div>

<div class="black">&#9812;</div>

<div class="white">&#9815;</div>

<div class="black">&#9816;</div>
<div class="white">&#9814;</div>

</div>

</body>

</html>

You might also like