Line 30: | Line 30: | ||
font-family: Tahoma, Geneva, sans-serif; | font-family: Tahoma, Geneva, sans-serif; | ||
} | } | ||
+ | |||
+ | ul {list-style-type: none;} | ||
+ | body {font-family: Verdana, sans-serif;} | ||
+ | |||
+ | /* Month header */ | ||
+ | .month { | ||
+ | padding: 70px 25px; | ||
+ | width: 100%; | ||
+ | background: #1abc9c; | ||
+ | } | ||
+ | |||
+ | /* Month list */ | ||
+ | .month ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .month ul li { | ||
+ | color: white; | ||
+ | font-size: 20px; | ||
+ | text-transform: uppercase; | ||
+ | letter-spacing: 3px; | ||
+ | } | ||
+ | |||
+ | /* Previous button inside month header */ | ||
+ | .month .prev { | ||
+ | float: left; | ||
+ | padding-top: 10px; | ||
+ | } | ||
+ | |||
+ | /* Next button */ | ||
+ | .month .next { | ||
+ | float: right; | ||
+ | padding-top: 10px; | ||
+ | } | ||
+ | |||
+ | /* Weekdays (Mon-Sun) */ | ||
+ | .weekdays { | ||
+ | margin: 0; | ||
+ | padding: 10px 0; | ||
+ | background-color:#ddd; | ||
+ | } | ||
+ | |||
+ | .weekdays li { | ||
+ | display: inline-block; | ||
+ | width: 13.6%; | ||
+ | color: #666; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | /* Days (1-31) */ | ||
+ | .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:12px; | ||
+ | color:#777; | ||
+ | } | ||
+ | |||
+ | /* Highlight the "current" day */ | ||
+ | .days li .active { | ||
+ | padding: 5px; | ||
+ | background: #1abc9c; | ||
+ | color: white !important | ||
+ | } | ||
+ | |||
+ | |||
</style> | </style> | ||
<div id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> | <div id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> | ||
Line 92: | Line 167: | ||
</div> | </div> | ||
</div> | </div> | ||
− | |||
<!---TEST---> | <!---TEST---> | ||
+ | <div class="month"> | ||
+ | <ul> | ||
+ | <li class="prev">❮</li> | ||
+ | <li class="next">❯</li> | ||
+ | <li> | ||
+ | August<br> | ||
+ | <span style="font-size:18px">2016</span> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <ul class="weekdays"> | ||
+ | <li>Mo</li> | ||
+ | <li>Tu</li> | ||
+ | <li>We</li> | ||
+ | <li>Th</li> | ||
+ | <li>Fr</li> | ||
+ | <li>Sa</li> | ||
+ | <li>Su</li> | ||
+ | </ul> | ||
+ | |||
+ | <ul class="days"> | ||
+ | <li>1</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> | ||
+ | ...etc | ||
+ | </ul> | ||
<!-- text --> | <!-- text --> | ||
+ | |||
+ | |||
+ | </section> | ||
+ | |||
+ | |||
Revision as of 08:55, 11 July 2017