|
|
| Line 23: |
Line 23: |
| | body {font-family: Verdana, sans-serif;} | | body {font-family: Verdana, sans-serif;} |
| | | | |
| − | .month {
| |
| − | padding: 100px 50px;
| |
| − | width: 100%;
| |
| − | background:blue;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .month ul {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | .month ul li {
| |
| − | color: black;
| |
| − | font-size: 100px;
| |
| − | text-transform: uppercase;
| |
| − | letter-spacing: 3px;
| |
| − | }
| |
| − |
| |
| − | .month .prev {
| |
| − | float: left;
| |
| − | padding-top: 10px;
| |
| − | }
| |
| − |
| |
| − | .month .next {
| |
| − | float: right;
| |
| − | padding-top: 10px;
| |
| − | }
| |
| − |
| |
| − | .weekdays {
| |
| − | margin: 0;
| |
| − | padding: 10px 0;
| |
| − | background-color:grey;
| |
| − | }
| |
| − |
| |
| − | .weekdays li {
| |
| − | display: inline-block;
| |
| − | width: 13.6%;
| |
| − | color: black;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .days {
| |
| − | padding: 10px 0;
| |
| − | background: #eee;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | .days li {
| |
| − | list-style-type: none;
| |
| − | display: inline-block;
| |
| − | width: 13.6%;
| |
| − | text-align: center;
| |
| − | margin-bottom: 5px;
| |
| − | font-size: 13px;
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − | .days li .active {
| |
| − | padding: 5px;
| |
| − | background: green;
| |
| − | color: white !important
| |
| − | }
| |
| − |
| |
| − | /* Add media queries for smaller screens */
| |
| − | @media screen and (max-width:720px) {
| |
| − | .weekdays li, .days li {width: 13.1%;}
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 420px) {
| |
| − | .weekdays li, .days li {width: 12.5%;}
| |
| − | .days li .active {padding: 2px;}
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 290px) {
| |
| − | .weekdays li, .days li {width: 12.2%;}
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − |
| |
| − | <div class="month">
| |
| − | <ul>
| |
| − | <li class="prev">❮</li>
| |
| − | <li class="next">❯</li>
| |
| − | <li>
| |
| − | May<br>
| |
| − | <span style="font-size:15px">2017</span>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </div>
| |
| − |
| |
| − | <ul class="weekdays">
| |
| − | <li>Mon</li>
| |
| − | <li>Tue</li>
| |
| − | <li>Wed</li>
| |
| − | <li>Thurs</li>
| |
| − | <li>Fri</li>
| |
| − | <li>Sat</li>
| |
| − | <li>Sun</li>
| |
| − | </ul>
| |
| − |
| |
| − | <ul class="days">
| |
| − | <li><button>1</button></li>
| |
| − | <li>2</li>
| |
| − | <li>3</li>
| |
| − | <li>4</li>
| |
| − | <li>5</li>
| |
| − | <li>6</li>
| |
| − | <li>7</li>
| |
| − | <li>8</li>
| |
| − | <li>9</li>
| |
| − | <li><span class="active">10</span></li>
| |
| − | <li>11</li>
| |
| − | <li>12</li>
| |
| − | <li>13</li>
| |
| − | <li>14</li>
| |
| − | <li>15</li>
| |
| − | <li>16</li>
| |
| − | <li>17</li>
| |
| − | <li>18</li>
| |
| − | <li>19</li>
| |
| − | <li>20</li>
| |
| − | <li>21</li>
| |
| − | <li>22</li>
| |
| − | <li>23</li>
| |
| − | <li>24</li>
| |
| − | <li>25</li>
| |
| − | <li>26</li>
| |
| − | <li>27</li>
| |
| − | <li>28</li>
| |
| − | <li>29</li>
| |
| − | <li>30</li>
| |
| − | <li>31</li>
| |
| − | </ul>
| |
| | | | |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |
