Архив за декабрь

by pharma_nsk

HTML

<body>
<div class="block">
<header>архив</header>
<div class="mounth">
<span class="back"><a href="#"></a></span><span class="date">декабрь 2014</span><span class="to"><a href="#"></a></span>
</div>
<div class="content">
<table>
<tr>
  <td class="pass">1</td>
  <td class="pass">2</td>
  <td class="pass">3</td>
  <td class="current">4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
</tr>
<tr>
  <td>8</td>
  <td>9</td>
  <td>10</td>
  <td>11</td>
  <td>12</td>
  <td>13</td>
  <td>14</td>
</tr>
<tr>
  <td>15</td>
  <td>16</td>
  <td>17</td>
  <td>18</td>
  <td>19</td>
  <td>20</td>
  <td>21</td>
</tr>
<tr>
  <td>22</td>
  <td>23</td>
  <td>24</td>
  <td>25</td>
  <td>26</td>
  <td>27</td>
  <td>28</td>
</tr>
<tr>
  <td>29</td>
  <td>30</td>
  <td>31</td>
  <td class="none" colspan="4"></td>
</tr>
</table>
</div>
</div>
</body>

CSS

body {background-color:white;}
.block {display:block; height:320px; width:320px; 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:24px; font-family:sans-serif; text-transform:uppercase; text-align:center; }
.mounth {background-color:black; color:white; padding:5px; font-size:22px; font-family:sans-serif; height:34px; }
.pass {color:black;}
.current {color:white; background-color:#34825F;}
.content {padding:20px;}
table {border-collapse:collapse;}
td {padding:5px 8px; color:grey; font-size:24px; text-align:right;}
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; margin-right:55px; }
.to a {display:block; height:0; width:0; border:15px solid transparent; border-left:15px solid #34825F; float:right;}