Difference between revisions of "Team:Lethbridge/Notebook"

(Undo revision 237739 by Kristiturton (talk))
(Undo revision 237795 by Kristiturton (talk))
Line 18: Line 18:
 
<body>
 
<body>
 
<div><img src="https://static.igem.org/mediawiki/2017/e/e6/Banner_LAnotebook.png"  class="center fit"></div>
 
<div><img src="https://static.igem.org/mediawiki/2017/e/e6/Banner_LAnotebook.png"  class="center fit"></div>
 +
<style>
 +
* {box-sizing: border-box;}
 +
ul {list-style-type: none;}
 +
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">&#10094;</li>
 +
    <li class="next">&#10095;</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>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>
 +
  <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>

Revision as of 02:06, 25 October 2017

  • May
    2017
  • Mon
  • Tue
  • Wed
  • Thurs
  • Fri
  • Sat
  • Sun
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31