Архив лекций

by pharma_nsk

HTML

<body>
<div class="block">
<header>архив лекций</header>
<div class="mounth">
<span class="back"><a href="#"></a></span><span class="to"><a href="#"></a></span><span class="date">2014</span>
</div>
<div class="content">
<table>
<tr>
  <td><a href="#">январь</a></td>
  <td><a href="#">февраль</a></td>
  <td><a href="#">март</a></td>
</tr>
<tr>
<td><a href="#">апрель</a></td>
<td><a href="#">май</a></td>
<td><a href="#">июнь</a></td>
</tr>
<tr>
<td><a href="#">июль</a></td>
<td  class="pass none"><a href="#">август</a></td>
<td><a href="#">сентябрь</a></td>
</tr>
<tr>
<td><a href="#">октябрь</a></td>
<td><a href="#">ноябрь</a></td>
<td class="current"><a href="#">декабрь</a></td>
</tr>
</table>
</div>
</div>
</body>

CSS

body {background-color:white;}
.block {display:block; height:250px; width:280px; margin:30px auto; border:1px solid #E8E8E8; border-radius:5px 5px 0 0; background-color:#DEDEDE;}
header {border-radius:5px 5px 0 0; background-color:#34825F; color:white; padding:5px; font-size:22px; font-family:sans-serif; text-transform:uppercase; text-align:center; }
.mounth {background-color:black; color:white; padding:5px; font-size:20px; font-family:sans-serif; height:34px; }
.pass a{color:grey;}
.current {background-color:#34825F;}
.content {padding:10px;}
table {border-collapse:collapse; text-align:center;}
td a {display:block; padding:5px 8px; color:black; font-size:20px; text-decoration:none;}
td:hover {background-color:rgba(52, 130, 95, 0.3); cursor:pointer;}
.none:hover {background-color:#DEDEDE; cursor:default; }
.back a {display:block; height:0; width:0; border:15px solid transparent; border-right:15px solid #34825F; float:left; }
.to a {display:block; height:0; width:0; border:15px solid transparent; border-left:15px solid #34825F; float:right;}
.date {display:block; width:270px; text-align:center; line-height:34px;}