SHARE
TWEET

Untitled

a guest Jan 22nd, 2019 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6.  
  7. <h1>CSS Calendar</h1>
  8.  
  9. <div class="month">      
  10.   <ul>
  11.     <li class="prev">&#10094;</li>
  12.     <li class="next">&#10095;</li>
  13.     <li>
  14.       August<br>
  15.       <span style="font-size:18px">2017</span>
  16.     </li>
  17.   </ul>
  18. </div>
  19.  
  20. <ul class="weekdays">
  21.   <li>Mo</li>
  22.   <li>Tu</li>
  23.   <li>We</li>
  24.   <li>Th</li>
  25.   <li>Fr</li>
  26.   <li>Sa</li>
  27.   <li>Su</li>
  28. </ul>
  29.  
  30. <ul class="days">  
  31.   <li>1</li>
  32.   <li>2</li>
  33.   <li>3</li>
  34.   <li>4</li>
  35.   <li>5</li>
  36.   <li>6</li>
  37.   <li>7</li>
  38.   <li>8</li>
  39.   <li>9</li>
  40.   <li><span class="active">10</span></li>
  41.   <li>11</li>
  42.   <li>12</li>
  43.   <li>13</li>
  44.   <li>14</li>
  45.   <li>15</li>
  46.   <li>16</li>
  47.   <li>17</li>
  48.   <li>18</li>
  49.   <li>19</li>
  50.   <li>20</li>
  51.   <li>21</li>
  52.   <li>22</li>
  53.   <li>23</li>
  54.   <li>24</li>
  55.   <li>25</li>
  56.   <li>26</li>
  57.   <li>27</li>
  58.   <li>28</li>
  59.   <li>29</li>
  60.   <li>30</li>
  61.   <li>31</li>
  62. </ul>
  63.  
  64. </body>
  65. </html>
  66.    
  67. ul {list-style-type: none;}
  68. body {font-family: Verdana, sans-serif;}
  69.  
  70. /* Month header */
  71. .month {
  72.   padding: 70px 25px;
  73.   width: 100%;
  74.   background: #1abc9c;
  75.   text-align: center;
  76. }
  77.  
  78. /* Month list */
  79. .month ul {
  80.   margin: 0;
  81.   padding: 0;
  82. }
  83.  
  84. .month ul li {
  85.   color: white;
  86.   font-size: 20px;
  87.   text-transform: uppercase;
  88.   letter-spacing: 3px;
  89. }
  90.  
  91. /* Previous button inside month header */
  92. .month .prev {
  93.   float: left;
  94.   padding-top: 10px;
  95. }
  96.  
  97. /* Next button */
  98. .month .next {
  99.   float: right;
  100.   padding-top: 10px;
  101. }
  102.  
  103. /* Weekdays (Mon-Sun) */
  104. .weekdays {
  105.   margin: 0;
  106.   padding: 10px 0;
  107.   background-color:#ddd;
  108. }
  109.  
  110. .weekdays li {
  111.   display: inline-block;
  112.   width: 13.6%;
  113.   color: #666;
  114.   text-align: center;
  115. }
  116.  
  117. /* Days (1-31) */
  118. .days {
  119.   padding: 10px 0;
  120.   background: #eee;
  121.   margin: 0;
  122. }
  123.  
  124. .days li {
  125.   list-style-type: none;
  126.   display: inline-block;
  127.   width: 13.6%;
  128.   text-align: center;
  129.   margin-bottom: 5px;
  130.   font-size:12px;
  131.   color: #777;
  132. }
  133.  
  134. /* Highlight the "current" day */
  135. .days li .active {
  136.   padding: 5px;
  137.   background: #1abc9c;
  138.   color: white !important
  139. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top