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

HKU IGEM Team