Team:Hong Kong HKU/templates/header frontpage
From 2014.igem.org
(Difference between revisions)
(Blanked the page) |
|||
Line 1: | Line 1: | ||
+ | <html> | ||
+ | <meta charset="UTF-8"> | ||
+ | <meta name="title" content="HKU iGEM 2014" /> | ||
+ | <meta name="keywords" content="iGEM, HKU, Synthetic Biology, PPK" /> | ||
+ | <meta name="description" content="HKU's IGEM Team"> | ||
+ | <title>HKU IGEM Team</title> | ||
+ | <style> | ||
+ | /* Reset CSS */ | ||
+ | /* v1.0 | 20080212 */ | ||
+ | |||
+ | html, body, div, span, applet, object, iframe, | ||
+ | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
+ | a, abbr, acronym, address, big, cite, code, | ||
+ | del, dfn, em, font, img, ins, kbd, q, s, samp, | ||
+ | small, strike, strong, sub, sup, tt, var, | ||
+ | b, u, i, center, | ||
+ | dl, dt, dd, ol, ul, li, | ||
+ | fieldset, form, label, legend, | ||
+ | table, caption, tbody, tfoot, thead, tr, th, td { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | outline: 0; | ||
+ | font-size: 100%; | ||
+ | vertical-align: baseline; | ||
+ | background: transparent; | ||
+ | } | ||
+ | body { | ||
+ | line-height: 1; | ||
+ | } | ||
+ | ol, ul { | ||
+ | list-style: none; | ||
+ | } | ||
+ | blockquote, q { | ||
+ | quotes: none; | ||
+ | } | ||
+ | blockquote:before, blockquote:after, | ||
+ | q:before, q:after { | ||
+ | content: ''; | ||
+ | content: none; | ||
+ | } | ||
+ | |||
+ | /* remember to define focus styles! */ | ||
+ | :focus { | ||
+ | outline: 0; | ||
+ | } | ||
+ | |||
+ | /* remember to highlight inserts somehow! */ | ||
+ | ins { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | del { | ||
+ | text-decoration: line-through; | ||
+ | } | ||
+ | |||
+ | /* tables still need 'cellspacing="0"' in the markup */ | ||
+ | table { | ||
+ | border-collapse: collapse; | ||
+ | border-spacing: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | div#menu * { | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | div#menu { | ||
+ | position: fixed; | ||
+ | float: left; | ||
+ | top: 0; | ||
+ | left: -11.5rem; | ||
+ | width: 15.5rem; | ||
+ | height: 100%; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | background: #DDD; | ||
+ | transition: 0.5s; | ||
+ | font-size: 0.8rem; | ||
+ | } | ||
+ | |||
+ | div#menu:hover { | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | div#menu-title { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | top: 0.5rem; | ||
+ | font-size: 1.5rem; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | div#menu-icon { | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | right: 0; | ||
+ | margin: 0 1rem 0 0; | ||
+ | padding: 0.3rem; | ||
+ | font-size: 1.5rem; | ||
+ | color: #AAA; | ||
+ | background: #CCC; | ||
+ | border-radius: 1rem; | ||
+ | cursor: default; | ||
+ | } | ||
+ | |||
+ | div#menu ul { | ||
+ | margin: 0.5rem 0 1rem 0.5rem; | ||
+ | } | ||
+ | |||
+ | ul.main-menu { | ||
+ | position: absolute; | ||
+ | top: 4rem; | ||
+ | } | ||
+ | |||
+ | ul.main-menu a { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | ul.main-menu>li>a { | ||
+ | padding: 0.1rem; | ||
+ | background: #DDD; | ||
+ | } | ||
+ | |||
+ | ul.sub-menu li { | ||
+ | padding: 0.3rem 0.4rem 0.4rem 0.3rem; | ||
+ | background: #88B; | ||
+ | border: 1px dashed #44D; | ||
+ | } | ||
+ | |||
+ | div#sponsor { | ||
+ | position: fixed; | ||
+ | height: 6rem; | ||
+ | width: 100%; | ||
+ | left: 0; | ||
+ | bottom: -4.5rem; | ||
+ | background: #EC9D75; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | |||
+ | div#sponsor:hover { | ||
+ | bottom: 0; | ||
+ | } | ||
+ | |||
+ | div#content { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 4rem; | ||
+ | width: calc(100% - 4rem); | ||
+ | height: calc(100% - 1.5rem); | ||
+ | background: #75B1EC; | ||
+ | } | ||
+ | |||
+ | div#content>div.page { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | div#content-prev-page, div#content-next-page { | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | color: white; | ||
+ | font-size: 2rem; | ||
+ | cursor: pointer; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | |||
+ | div#content-prev-page:hover,div#content-next-page:hover { | ||
+ | opacity: 0.7; | ||
+ | } | ||
+ | |||
+ | div#content-prev-page { | ||
+ | left: 1rem; | ||
+ | } | ||
+ | |||
+ | div#content-next-page { | ||
+ | right: 1rem; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | <body> | ||
+ | |||
+ | <div id="content"> | ||
+ | <div class="page"> | ||
+ | </div> | ||
+ | <div id="content-prev-page"> | ||
+ | ⬅ | ||
+ | </div> | ||
+ | <div id="content-next-page"> | ||
+ | ➡ | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div id="menu"> | ||
+ | <div id="menu-title"> | ||
+ | HKU iGEM 2014 | ||
+ | <a href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a> | ||
+ | </div> | ||
+ | <div id="menu-icon"> | ||
+ | ➤ | ||
+ | </div> | ||
+ | |||
+ | <ul class="main-menu"> | ||
+ | <li> | ||
+ | <a href="#">E. CAPSI</a> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a href="#">M1: Phosphate Removal</a></li> | ||
+ | <li><a href="#">M2: Polyphosphate Kinase</a></li> | ||
+ | <li><a href="#">M3: Micro-compartment</a></li> | ||
+ | <li><a href="#">Modelling</a></li> | ||
+ | <li><a href="#">References</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#">HUMAN PRACTICE</a> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a href="#">Lab Safety</a></li> | ||
+ | <li><a href="#">Public Promotion</a></li> | ||
+ | <li><a href="#">Public Promotion</a></li> | ||
+ | <li><a href="#">Collaborations</a></li> | ||
+ | <li><a href="#">Future Applications</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#">ACHIEVEMENTS</a> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a href="#">BioBricks</a></li> | ||
+ | <li><a href="#">Results</a></li> | ||
+ | <li><a href="#">Judging Criteria</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#">EXTRAS</a> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a href="#">Protocols</a></li> | ||
+ | <li><a href="#">Lab Note - Our Diary</a></li> | ||
+ | <li><a href="#">Photo Gallery</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#">TEAM</a> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a href="#">Our Profile</a></li> | ||
+ | <li><a href="#">People</a></li> | ||
+ | <li><a href="#">Attributions</a></li> | ||
+ | <li><a href="#">Supporters</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
+ | <div id="sponsor"> | ||
+ | </div> | ||
+ | <script> | ||
+ | </script> | ||
+ | |||
+ | </body> | ||
+ | </html> |
Revision as of 06:41, 19 August 2014
⬅
➡