(Prototype team page) |
|||
Line 2: | Line 2: | ||
<html> | <html> | ||
+ | <!-----------Thank you to the 2016 WashU iGEM team for the style and set-up of the lab notebook!------------------> | ||
− | |||
− | < | + | <style> |
− | + | ||
− | + | /* Slideshow container */ | |
− | + | .slideshow-container { | |
+ | //max-width: 1000px; | ||
+ | position: relative; | ||
+ | margin: 40px; | ||
+ | float:right; | ||
+ | width: 40vw; | ||
+ | outline: solid 2px grey; | ||
+ | overflow:scroll; | ||
+ | } | ||
+ | p { | ||
+ | padding: 20px 0px 0px 20px; | ||
+ | font-family: 'MartelReg'; | ||
+ | font-size: 16px; | ||
+ | } | ||
− | + | /* Next & previous buttons */ | |
− | + | .prev, .next { | |
− | + | cursor: pointer; | |
− | + | //position: relative; | |
− | + | top: 0; | |
− | + | top: 50%; | |
− | + | //width: auto; | |
− | + | margin-top: -22px; | |
+ | padding: 16px; | ||
+ | color: white; | ||
+ | font-weight: bold; | ||
+ | font-size: 18px; | ||
+ | transition: 0.6s ease; | ||
+ | border-radius: 3px 3px 3px 3px; | ||
+ | } | ||
− | + | /* Position the "next button" to the right */ | |
− | + | .prev { | |
− | + | float: left; | |
− | + | } | |
+ | .next { | ||
+ | //right: 0; | ||
+ | border-radius: 3px 3px 3px 3px; | ||
+ | float: right; | ||
+ | } | ||
− | + | /* On hover, add a black background color with a little bit see-through */ | |
− | + | .prev:hover, .next:hover { | |
− | + | background-color: rgba(0,0,0,0.8); | |
− | + | } | |
− | + | ||
− | + | ||
− | </div> | + | /* Caption text */ |
− | </ | + | .text { |
+ | //color: #f2f2f2; | ||
+ | font-size: 15px; | ||
+ | padding: 8px 12px; | ||
+ | position: absolute; | ||
+ | bottom: 8px; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | |||
+ | transform: translateY(100%); | ||
+ | -ms-transform: translateY(100%); | ||
+ | -moz-transform: translateY(100%x); | ||
+ | -webkit-transform: translateY(100%); | ||
+ | -o-transform: translateY(100%); | ||
+ | |||
+ | } | ||
+ | |||
+ | /* Number text (1/3 etc) */ | ||
+ | .numbertext { | ||
+ | //color: #f2f2f2; | ||
+ | font-size: 12px; | ||
+ | padding: 8px 12px; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | /* The dots/bullets/indicators */ | ||
+ | .dot { | ||
+ | cursor:pointer; | ||
+ | height: 13px; | ||
+ | width: 13px; | ||
+ | margin: 0 2px; | ||
+ | background-color: #bbb; | ||
+ | border-radius: 50%; | ||
+ | display: inline-block; | ||
+ | transition: background-color 0.6s ease; | ||
+ | } | ||
+ | |||
+ | .active, .dot:hover { | ||
+ | background-color: #717171; | ||
+ | } | ||
+ | |||
+ | /* Fading animation */ | ||
+ | .fade { | ||
+ | -webkit-animation-name: fade; | ||
+ | -webkit-animation-duration: 1.5s; | ||
+ | animation-name: fade; | ||
+ | animation-duration: 1.5s; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes fade { | ||
+ | from {opacity: .4} | ||
+ | to {opacity: 1} | ||
+ | } | ||
+ | |||
+ | @keyframes fade { | ||
+ | from {opacity: .4} | ||
+ | to {opacity: 1} | ||
+ | } | ||
+ | |||
+ | |||
+ | .month-calendar { | ||
+ | |||
+ | width: 400px; | ||
+ | //float:left; | ||
+ | padding: 5px 5px 5px 5px; | ||
+ | //display: none; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | .button-wrapper { | ||
+ | |||
+ | width: 200px; | ||
+ | padding: 5px 5px 5px 5px; | ||
+ | //display: none; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | display:block; | ||
+ | background:grey; | ||
+ | padding: 30px 50px 30px 50px; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | tr { | ||
+ | line-height: 0px; | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | .selected-date { | ||
+ | background-color: #72c9b6; | ||
+ | } | ||
+ | |||
+ | .date { | ||
+ | |||
+ | } | ||
+ | |||
+ | td { | ||
+ | background-color: white; | ||
+ | } | ||
+ | |||
+ | .mySlides { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .calendar-wrapper { | ||
+ | display:table; | ||
+ | float:left; | ||
+ | width: 45vw; | ||
+ | position: relative; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | <div class = "column full_size"> | ||
+ | |||
+ | |||
+ | <h1>Notebook</h1> | ||
+ | |||
+ | |||
+ | <div class = "calendar-wrapper"> | ||
+ | <div class="month-calendar june" style = "display:block;"> | ||
+ | <table> | ||
+ | <tr> | ||
+ | <th colspan=7>June</th> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td class = "date selected-date">1</td> | ||
+ | <td class = "date">2</td> | ||
+ | <td class = "date">3</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">4</td> | ||
+ | <td class = "date">5</td> | ||
+ | <td class = "date">6</td> | ||
+ | <td class = "date">7</td> | ||
+ | <td class = "date">8</td> | ||
+ | <td class = "date">9</td> | ||
+ | <td class = "date">10</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">11</td> | ||
+ | <td class = "date">12</td> | ||
+ | <td class = "date">13</td> | ||
+ | <td class = "date">14</td> | ||
+ | <td class = "date">15</td> | ||
+ | <td class = "date">16</td> | ||
+ | <td class = "date">17</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">18</td> | ||
+ | <td class = "date">19</td> | ||
+ | <td class = "date">20</td> | ||
+ | <td class = "date">21</td> | ||
+ | <td class = "date">22</td> | ||
+ | <td class = "date">23</td> | ||
+ | <td class = "date">24</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">25</td> | ||
+ | <td class = "date">26</td> | ||
+ | <td class = "date">27</td> | ||
+ | <td class = "date">28</td> | ||
+ | <td class = "date">29</td> | ||
+ | <td class = "date">30</td> | ||
+ | <td></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | |||
+ | <div class="month-calendar july" style = "display:none;"> | ||
+ | <table> | ||
+ | <tr> | ||
+ | <th colspan=7>July</th> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td class = "date">1</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">2</td> | ||
+ | <td class = "date">3</td> | ||
+ | <td class = "date">4</td> | ||
+ | <td class = "date">5</td> | ||
+ | <td class = "date">6</td> | ||
+ | <td class = "date">7</td> | ||
+ | <td class = "date">8</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">9</td> | ||
+ | <td class = "date">10</td> | ||
+ | <td class = "date">11</td> | ||
+ | <td class = "date">12</td> | ||
+ | <td class = "date">13</td> | ||
+ | <td class = "date">14</td> | ||
+ | <td class = "date">15</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">16</td> | ||
+ | <td class = "date">17</td> | ||
+ | <td class = "date">18</td> | ||
+ | <td class = "date">19</td> | ||
+ | <td class = "date">20</td> | ||
+ | <td class = "date">21</td> | ||
+ | <td class = "date">22</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">23</td> | ||
+ | <td class = "date">24</td> | ||
+ | <td class = "date">25</td> | ||
+ | <td class = "date">26</td> | ||
+ | <td class = "date">27</td> | ||
+ | <td class = "date">28</td> | ||
+ | <td class = "date">29</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">30</td> | ||
+ | <td class = "date">31</td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | |||
+ | <div class="month-calendar august" style = "display:none;"> | ||
+ | <table> | ||
+ | <tr> | ||
+ | <th colspan=7>August</th> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td class = "date">1</td> | ||
+ | <td class = "date">2</td> | ||
+ | <td class = "date">3</td> | ||
+ | <td class = "date">4</td> | ||
+ | <td class = "date">5</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">6</td> | ||
+ | <td class = "date">7</td> | ||
+ | <td class = "date">8</td> | ||
+ | <td class = "date">9</td> | ||
+ | <td class = "date">10</td> | ||
+ | <td class = "date">11</td> | ||
+ | <td class = "date">12</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">13</td> | ||
+ | <td class = "date">14</td> | ||
+ | <td class = "date">15</td> | ||
+ | <td class = "date">16</td> | ||
+ | <td class = "date">17</td> | ||
+ | <td class = "date">18</td> | ||
+ | <td class = "date">19</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">20</td> | ||
+ | <td class = "date">21</td> | ||
+ | <td class = "date">22</td> | ||
+ | <td class = "date">23</td> | ||
+ | <td class = "date">24</td> | ||
+ | <td class = "date">25</td> | ||
+ | <td class = "date">26</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">27</td> | ||
+ | <td class = "date">28</td> | ||
+ | <td class = "date">29</td> | ||
+ | <td class = "date">30</td> | ||
+ | <td class = "date">31</td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | |||
+ | <div class="month-calendar september" style = "display:none;"> | ||
+ | <table> | ||
+ | <tr> | ||
+ | <th colspan=7>September</th> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td class = "date">1</td> | ||
+ | <td class = "date">2</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">3</td> | ||
+ | <td class = "date">4</td> | ||
+ | <td class = "date">5</td> | ||
+ | <td class = "date">6</td> | ||
+ | <td class = "date">7</td> | ||
+ | <td class = "date">8</td> | ||
+ | <td class = "date">9</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">10</td> | ||
+ | <td class = "date">11</td> | ||
+ | <td class = "date">12</td> | ||
+ | <td class = "date">13</td> | ||
+ | <td class = "date">14</td> | ||
+ | <td class = "date">15</td> | ||
+ | <td class = "date">16</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">17</td> | ||
+ | <td class = "date">18</td> | ||
+ | <td class = "date">19</td> | ||
+ | <td class = "date">20</td> | ||
+ | <td class = "date">21</td> | ||
+ | <td class = "date">22</td> | ||
+ | <td class = "date">23</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">24</td> | ||
+ | <td class = "date">25</td> | ||
+ | <td class = "date">26</td> | ||
+ | <td class = "date">27</td> | ||
+ | <td class = "date">28</td> | ||
+ | <td class = "date">29</td> | ||
+ | <td class = "date">30</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | |||
+ | <div class="month-calendar october" style = "display:none;"> | ||
+ | <table> | ||
+ | <tr> | ||
+ | <th colspan=7>October</th> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">1</td> | ||
+ | <td class = "date">2</td> | ||
+ | <td class = "date">3</td> | ||
+ | <td class = "date">4</td> | ||
+ | <td class = "date">5</td> | ||
+ | <td class = "date">6</td> | ||
+ | <td class = "date">7</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">8</td> | ||
+ | <td class = "date">9</td> | ||
+ | <td class = "date">10</td> | ||
+ | <td class = "date">11</td> | ||
+ | <td class = "date">12</td> | ||
+ | <td class = "date">13</td> | ||
+ | <td class = "date">14</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">15</td> | ||
+ | <td class = "date">16</td> | ||
+ | <td class = "date">17</td> | ||
+ | <td class = "date">18</td> | ||
+ | <td class = "date">19</td> | ||
+ | <td class = "date">20</td> | ||
+ | <td class = "date">21</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">22</td> | ||
+ | <td class = "date">23</td> | ||
+ | <td class = "date">24</td> | ||
+ | <td class = "date">25</td> | ||
+ | <td class = "date">26</td> | ||
+ | <td class = "date">27</td> | ||
+ | <td class = "date">28</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td class = "date">29</td> | ||
+ | <td class = "date">30</td> | ||
+ | <td class = "date">31</td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | |||
+ | |||
+ | |||
+ | </div> |
Revision as of 18:04, 5 June 2017
Notebook
June | ||||||
---|---|---|---|---|---|---|
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 | |