|
|
Line 14: |
Line 14: |
| <div style = "text-align: center;"><img width="300px" src="https://static.igem.org/mediawiki/2014/1/1d/Timeline-header.png"></div><br> | | <div style = "text-align: center;"><img width="300px" src="https://static.igem.org/mediawiki/2014/1/1d/Timeline-header.png"></div><br> |
| | | |
− | <div id="calendar"> | + | <link rel="stylesheet" type="text/css" |
− | <div class="clasp hole-left"></div>
| + | href="https://2015.igem.org/Template:YourTeamName/CSS2?action=raw&ctype=text/css" /> |
− | <div class="clasp hole-right"></div>
| + | |
− | <div class="hole hole-left"></div>
| + | |
− | <div class="hole hole-right"></div>
| + | |
− | <div id="month">« March 2012 »</div>
| + | |
− | <div id="days">
| + | |
− | <table class="days">
| + | |
− | <tr>
| + | |
− | <td>SUN</td>
| + | |
− | <td>MON</td>
| + | |
− | <td>TUE</td>
| + | |
− | <td>WED</td>
| + | |
− | <td>THU</td>
| + | |
− | <td>FRI</td>
| + | |
− | <td>SAT</td>
| + | |
− | </tr>
| + | |
− | </table>
| + | |
− | </div>
| + | |
− | <table class="day">
| + | |
− | <tr>
| + | |
− | <td class="old-month">26</td>
| + | |
− | <td class="old-month">27</td>
| + | |
− | <td class="old-month">28</td>
| + | |
− | <td class="old-month">29</td>
| + | |
− | <td>1</td>
| + | |
− | <td>2</td>
| + | |
− | <td class="selected">3</td>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>4</td>
| + | |
− | <td class="appoint">5</td>
| + | |
− | <td>6</td>
| + | |
− | <td>7</td>
| + | |
− | <td>8</td>
| + | |
− | <td>9</td>
| + | |
− | <td>10</td>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>11</td>
| + | |
− | <td>12</td>
| + | |
− | <td>13</td>
| + | |
− | <td>14</td>
| + | |
− | <td>15</td>
| + | |
− | <td>16</td>
| + | |
− | <td>17</td>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>18</td>
| + | |
− | <td>19</td>
| + | |
− | <td>20</td>
| + | |
− | <td>21</td>
| + | |
− | <td class="appoint">22</td>
| + | |
− | <td class="appoint">23</td>
| + | |
− | <td>24</td>
| + | |
− | </tr>
| + | |
− | <tr>
| + | |
− | <td>25</td>
| + | |
− | <td>26</td>
| + | |
− | <td>27</td>
| + | |
− | <td>28</td>
| + | |
− | <td>29</td>
| + | |
− | <td>30</td>
| + | |
− | <td>31</td>
| + | |
− | </tr>
| + | |
− | </table>
| + | |
| | | |
− | <style type="text/css"> | + | <h2>Our Project</h2> |
− | * {
| + | <p>Here is the beginning of the page about our project.</p> |
− | margin: 0;
| + | |
− | padding: 0;
| + | |
− | }
| + | |
| | | |
− | .clasp { | + | <p>Here is the end of the page about our project.</p> |
− | background: #aaaaaa;
| + | |
− | border: 1px solid #999999;
| + | |
− | border-radius: 4px;
| + | |
− | box-shadow: 0 -1px 5px rgba(0,0,0,0.4), inset -1px 1px 2px white;
| + | |
− | display: block;
| + | |
− | height: 16px;
| + | |
− | position: absolute;
| + | |
− | top: -5px;
| + | |
− | width: 4px;
| + | |
− | z-index: 2000;
| + | |
− | }
| + | |
− | .clasp.hole-left {
| + | |
− | left: 9px;
| + | |
− | }
| + | |
− | .clasp.hole-right {
| + | |
− | right: 9px;
| + | |
− | }
| + | |
| | | |
− | .hole {
| + | <script type="text/javascript" src="https://2015.igem.org/Template:YourTeamName/Javascript2? |
− | background: #99ccff;
| + | action=raw&ctype=text/javascript"></script> |
− | border-radius: 8px;
| + | </html> |
− | box-shadow: 0 -1px 0 black, inset 0 0 20px #878787;
| + | |
− | display: block;
| + | |
− | height: 8px;
| + | |
− | position: absolute;
| + | |
− | top: 8px;
| + | |
− | width: 8px;
| + | |
− | }
| + | |
− | | + | |
− | .hole-left {
| + | |
− | left: 8px;
| + | |
− | }
| + | |
− | .hole-right {
| + | |
− | right: 8px;
| + | |
− | }
| + | |
− | | + | |
− | #calendar {
| + | |
− | background: #e4e0e7;
| + | |
− | box-shadow: 0 0 20px #878787;
| + | |
− | height: 208px;
| + | |
− | margin: 20px auto;
| + | |
− | position: relative;
| + | |
− | text-align: center;
| + | |
− | width: 216px;
| + | |
− | }
| + | |
− | | + | |
− | #month {
| + | |
− | background: linear-gradient(#bcde4b, #8bc620);
| + | |
− | color: white;
| + | |
− | height: 30px;
| + | |
− | line-height: 30px;
| + | |
− | text-shadow: 0 -1px 0 #878787;
| + | |
− | width: 216px;
| + | |
− | }
| + | |
− | | + | |
− | #days {
| + | |
− | background: linear-gradient(#f4f4f4, #ebebeb);
| + | |
− | -webkit-box-shadow: 0 1px 0 #aaaaaa;
| + | |
− | }
| + | |
− | | + | |
− | table.days {
| + | |
− | color: #888888;
| + | |
− | font-size: 11px;
| + | |
− | width: 216px;
| + | |
− | }
| + | |
− | | + | |
− | table.day td, table.days td {
| + | |
− | width: 30px;
| + | |
− | }
| + | |
− | | + | |
− | table.day td {
| + | |
− | background: #f4f0f7;
| + | |
− | color: #878787;
| + | |
− | height: 29px;
| + | |
− | box-shadow: 0 -1px 0 white;
| + | |
− | }
| + | |
− | | + | |
− | table.day td.old-month {
| + | |
− | color: #aaaaaa;
| + | |
− | }
| + | |
− | | + | |
− | table.day td:hover {
| + | |
− | background: #e9e9ee;
| + | |
− | cursor: pointer;
| + | |
− | }
| + | |
− | | + | |
− | table.day td.selected {
| + | |
− | background: linear-gradient(#bcde4b, #8bc620);
| + | |
− | color: white;
| + | |
− | text-shadow: 0 -1px 0 #878787;
| + | |
− | }
| + | |
− | | + | |
− | table.day td.appoint {
| + | |
− | border-bottom: 2px solid #99ccff;
| + | |
− | }
| + | |
− | </style> | + | |
| </div> | | </div> |
| </body> | | </body> |
| </html> | | </html> |