<html>
<style>
.main
{
margin:0px auto;
border:2px solid;
width:600px;
height:auto;
}
.mytable th
{
background-color:#3EDEFE;
width:auto;
height:50px;
color:white;
text-align:left;
}
.mytable td h2
{
color:red;
}
.month{
background-color:C3D2D5;
font-weight: 900;
text-align:center;
}
.date{
box-shadow: 0 0 20px rgba(0,0,0,0.3);
background-color: #f1f1f1;
border-radius: 10px;
width: 100px;
height: 150px;
margin:10px;
}
span{
display: block;
padding: 10px;
text-align: center;
}
.date-day{
font-weight: 600;
}
.date-number{
font-size: 20px;
}
.date-month{
background-color: #EF4836;
border-bottom: 4px solid #D64541;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
color: white;
font-weight: 700;
}
</style>
<body>
<div class="main">
<table class="mytable" width="600px">
<tr>
<th colspan="3"><h2>Table Calender Template</h2></th>
</tr>
<tr>
<td colspan="3" class="month">October</td>
</tr>
<tr>
<td>Date</td>
<td>Band/Artist</td>
<td>Tickets</td>
</tr>
<tr>
<td>
<div class="date">
<span class="date-day">Thursday</span>
<span class="date-number">31</span>
<span class="date-month">OCT</span>
</div>
</td>
<td>
<h2>Halloween party</h2>
<p>
When:october 31,2013<br/>
Where:surat<br/>
Price:$0.00</p>
<br/>
<p>Halloween party yay!</p>
</td>
<td>
Colsed
</td>
</tr>
<tr>
<td colspan="3" class="month">November</td>
</tr>
<tr>
<td>Date</td>
<td>Band/Artist</td>
<td>Tickets</td>
</tr>
<tr>
<td>
<div class="date">
<span class="date-day">Monday</span>
<span class="date-number">11</span>
<span class="date-month">Nov</span>
</div>
</td>
<td>
<h2>Piraty party</h2>
<p>
When:November 11,2013<br/>
Where:surat<br/>
Price:$0.00</p>
<br/>
<p>Pirate party yay!</p>
</td>
<td>
Register Now
</td>
</tr>
<tr>
<td>
<div class="date">
<span class="date-day">Friday</span>
<span class="date-number">22</span>
<span class="date-month">Nov</span>
</div>
</td>
<td>
<h2>Harvest party</h2>
<p>
When:November 22,2013<br/>
Where:surat<br/>
Price:$0.00</p>
<br/>
<p>Harvest party yay!</p>
</td>
<td>
Register Now
</td>
</tr>
</table>
</div>
</body>
</html>
Webdesign task for generate box of date ,month and day
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.