Simple Calendar Design in HTML
Click on the link below to download the simple project for students
HTML Codes:
<html>
<head>
<title>calender</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body bgcolor=”pink”>
<h1>Calendar</h1>
<font face=”bookman oldtype”>
<table border=”1″ cellpadding=”5″ width=”500″ align=”center” bgcolor=”#ffccbb”>
<tr>
<td colspan=”7″><img src=”image/1.jpg” width=”500″ height=”200″/></td>
</tr>
<tr>
<td colspan=”7″><b>Bhadra, 2075</b><b id=”sep”> Aug-Sept 2019</b></td>
</tr>
<tr id=”day”>
<th align=”center”>SUN</th>
<th align=”center”>MON</th>
<th align=”center”>TUE</th>
<th align=”center”>WED</th>
<th align=”center”>THU</th>
<th align=”center”>FRI</th>
<th align=”center” bgcolor=”red”>SAT</th>
</tr>
<tr>
<td align=”center”>३१ <sub> 16</sub></td>
<td align=”center”></td>
<td align=”center”></td>
<td align=”center”></td>
<td align=”center”></td>
<td align=”center”>१ <sub> 17</sub></td>
<td align=”center” class=”holiday”>२<sub> 18</sub></td>
</tr>
<tr>
<td align=”center”> ३ <sub> 19</sub></td>
<td align=”center”> ४ <sub> 20</sub></td>
<td align=”center”> ५ <sub> 21</sub></td>
<td align=”center”> ६ <sub> 22</sub></td>
<td align=”center”> ७ <sub> 23</sub></td>
<td align=”center”> ८ <sub> 24</sub></td>
<td align=”center” class=”holiday”>९<sub> 25</sub></td>
</tr>
<tr>
<td align=”center” > १० <sub> 26</sub></td>
<td align=”center” class=”holiday”>११<sub> 27</sub></td>
<td align=”center”> १२ <sub> 28</sub></td>
<td align=”center”> १३ <sub> 29</sub></td>
<td align=”center”> १४ <sub> 30</sub></td>
<td align=”center”> १५ <sub> 31</sub></td>
<td align=”center” class=”holiday”>१६<sub> 1</sub></td>
</tr>
<tr>
<td align=”center”> १७ <sub> 2</sub></td>
<td align=”center”> १८ <sub> 3</sub></td>
<td align=”center”> १९ <sub> 4</sub></td>
<td align=”center”> २० <sub> 5</sub></td>
<td align=”center”> २१ <sub> 6</sub></td>
<td align=”center”> २२ <sub> 7</sub></td>
<td align=”center” class=”holiday”>२३<sub> 8</sub></td>
</tr>
<tr>
<td align=”center”> २४ <sub> 9</sub></td>
<td align=”center”> २५ <sub> 10</sub></td>
<td align=”center”> २६<sub> 11</sub></td>
<td align=”center” class=”holiday”> २७ <sub> 12</sub></td>
<td align=”center”> २८ <sub> 13</sub></td>
<td align=”center”> २९ <sub> 14</sub></td>
<td align=”center” class=”holiday”>३०<sub> 15</sub></td>
</tr>
<tr>
<td colspan=”7″><p id=”fest” align=”justify”>११ गाई जात्रा<br> २७ हरितलिका तीज (महिला बिदा) <br></p></td>
</tr>
<tr>
<td colspan=”7″> <img src=”image/2.jpg” width=”250″ height=”60″/><img src=”image/3.jpg” width=”250″ height=”60″/>
</td>
</tr>
<tr>
<td colspan=”7″ id=”f” style=”color:red;”>Growing old is mandatory,<br><b style=”margin-left=”90%;”>Growing up is optional</b></td>
</tr>
</table>
<p align=”right”>© PRAJWAL RAI</p>
</font>
</body>
</html>
CSS (style.css)
.holiday
{
color:blue;
background:red;
}
#day
{
font-weight:bold;
color:white;
background:blue;
tr
{
font-size=15px;
}
td:span
{
position:relative;
top:8px;
left:13px;
font-family:helvetica;
font-size:14px;
font-weight:bold;
}
td
{
color:blue;
font-size:15px;
}
#fest
{
font-family:helvetica;
font-size:14px;
color:#FF0F0F;
#sep
{
margin-left:50%;
}
#sep
{
color:blue;
font-size:13px;
}
table
{
border:2px solid red;
box-shadow:5px 6px 5px grey;
border-radius:10px;
}
