Team:NJU China

From 2013.igem.org

(Difference between revisions)
 
(171 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html>
 
<html lang="en">
<html lang="en">
-
<head>
+
<head>
 +
        <meta charset="UTF-8" />
 +
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 +
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
<style type="text/css">
<style type="text/css">
/* hiding the top section*/
/* hiding the top section*/
-
body{position:absolute; top:0px; width:100%; height:1480px;}
+
body{position:absolute; top:0px; width:100%; height:100%;}
#top-section{
#top-section{
-
    height:0px;
+
  height:0px;
     border:none;
     border:none;
-
     width:1200px;
+
     width:980px;
     margin:0 auto;
     margin:0 auto;
     padding:0 0 0 0;
     padding:0 0 0 0;
Line 25: Line 27:
#globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%;font-family: calibri， Arial, Helvetica, sans-serif;}
#globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%;font-family: calibri， Arial, Helvetica, sans-serif;}
#content{
#content{
-
     background-color:transparent;
+
     background-color:white;
     border:none;
     border:none;
-
     width:1360px;
+
     width:1340px;
-
    height:800px;
+
/*    height:700px;*/
     marign:0 auto;
     marign:0 auto;
     padding:0 0 0 0;
     padding:0 0 0 0;
Line 58: Line 60:
     float:left;
     float:left;
     white-space: nowrap;
     white-space: nowrap;
-
     top:-10px;
+
     top:-6px;
-
     width: 590px;
+
     width: 490px;
     z-index: 5000;
     z-index: 5000;
     font-family: sans-serif;
     font-family: sans-serif;
Line 68: Line 70:
-
.left-menu, .left-menu a {
+
#aa{
-
    text-align: left;
+
        width:100%;
-
    color:#999999;
+
        height:100%;
-
    text-transform: lowercase;
+
        margin:0 0 0 0;
-
}
+
        padding:0 0 0 0;
 +
float:left;
 +
position:absolute;
-
.left-menu:hover {
+
       
-
    color: #D00000;
+
-
    background-color: transparent;
+
}
}
-
.right-menu{width:400px; float:right}
+
#b{
-
.right-menu, .right-menu a {
+
        width:100%;
-
    right: 0px;
+
        height:100%;
-
    text-align: right;
+
        margin:0 0 0 0;
-
    color: #999999;
+
        padding:0 0 0 0;
 +
float:left;
 +
display:none;
 +
}
}
-
#menubar ul {
+
</style>
-
    color: #999999;
+
<script language="javascript">
-
    list-style: none;
+
function changemodel()
 +
{
 +
document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/2/27/Nju-home-Model.png";
 +
document.getElementById("b").style.display="block";
}
}
-
#menubar li {
+
function changeproject()
-
    display: inline;
+
{
-
    position: relative;
+
document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/c/c6/Nju-home-Project.png";
-
    cursor: pointer;
+
document.getElementById("b").style.display="block";
-
    padding-left: 0px;
+
-
    padding-right: 0px;
+
}
}
-
.left-menu li a {
+
function changehuman()
-
    padding: 0px 10px 0px 0px;
+
{
 +
document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/9/94/Human1111.png";
 +
document.getElementById("b").style.display="block";
}
}
-
.left-menu .selected {
+
function changesafety()
-
#    color: #999999;
+
{
 +
document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/f/f0/Nju-home-Safety.png";
 +
document.getElementById("b").style.display="block";
}
}
-
#.left-menu .selected:hover {
+
function changewetlab()
-
#    color: #999999;
+
{
-
#}
+
document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/e/ed/Nju-logo-Wet_lab.png";
-
 
+
document.getElementById("b").style.display="block";
-
.left-menu:hover a {
+
-
    color: #999999;;
+
}
}
-
 
+
function changeteam()
-
.left-menu li a:hover {
+
{
-
    color: #D00000;
+
document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/5/55/Nju-home-Team.png";
-
    text-decoration: underline;
+
document.getElementById("b").style.display="block";
}
}
-
 
+
function changeextras()
-
 
+
{
-
.right-menu li {
+
document.getElementById("image").src = "https://static.igem.org/mediawiki/2013/6/68/Nju-home-Extras.png";
-
#    background-color: transparent;
+
document.getElementById("b").style.display="block";
}
}
-
.right-menu li a {
+
function home()
-
    padding: 0px 15px 0px 0px;
+
{
-
    color: #999999;;
+
document.getElementById("b").style.display="none";
-
    background-color: transparent;
+
}
}
-
.right-menu li a:hover {
+
</script>
-
    color: #D00000;
+
-
    text-decoration: underline;
+
-
}
+
-
/* end menu (edit, page ...) */
+
 +
</head>
-
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
+
<body style="margin:0px;padding:0px; ">
 +
<div style="float:left; position:absolute; z-index:1; display:block; ">
 +
</br></br>
 +
<a href="https://2013.igem.org"><img src="https://static.igem.org/mediawiki/2013/2/26/NJU-Miniminilogo.png" ></a>
 +
</div>
 +
<div id="aa">
-
@font-face {
+
<img src="https://static.igem.org/mediawiki/2013/0/0b/NJU_home_Index.png" usemap="#Map"/>
-
font-family: 'icomoon';
+
<map name="Map" id="Map">
-
src:url('../fonts/icomoon.eot');
+
<area shape="rect" coords="400,590,970,679" onmouseover="home();" href="#"onfocus="blur(this);">
-
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
+
<area shape="circle" coords="400,122,82" onmouseover="changemodel();" href="https://2013.igem.org/Team:NJU_China/Modeling" onfocus="blur(this);"/>
-
url('../fonts/icomoon.woff') format('woff'),
+
<area shape="circle" coords="236,432,116" onmouseover="changeproject();" href="https://2013.igem.org/Team:NJU_China/Project" onfocus="blur(this);"/>
-
url('../fonts/icomoon.ttf') format('truetype'),
+
<area shape="circle" coords="530,315,110" onmouseover="changehuman();" href="https://2013.igem.org/Team:NJU_China/Human Practice" onfocus="blur(this);"/>
-
url('../fonts/icomoon.svg#icomoon') format('svg');
+
<area shape="circle" coords="875,173,105" onmouseover="changesafety();" href="https://2013.igem.org/Team:NJU_China/Safety" onfocus="blur(this);"/>
-
font-weight: normal;
+
<area shape="circle" coords="762,388,105" onmouseover="changewetlab();" href="https://2013.igem.org/Team:NJU_China/Wet lab" onfocus="blur(this);"/>
-
font-style: normal;
+
<area shape="circle" coords="995,362,78" onmouseover="changeteam();" href="https://2013.igem.org/Team:NJU_China/Team" onfocus="blur(this);"/>
-
}
+
<area shape="circle" coords="1138,490,71" onmouseover="changeextras();" href="https://2013.igem.org/Team:NJU_China/Extras" onfocus="blur(this);"/>
-
 
+
</map>
-
body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;}
+
</div>
-
 
+
<div id ="b">
-
*,
+
<img id = "image" src="https://static.igem.org/mediawiki/2013/6/68/Nju-home-Extras.png">
-
*:after,
+
</div>
-
*:before {
+
-
-webkit-box-sizing: border-box;
+
-
-moz-box-sizing: border-box;
+
-
box-sizing: border-box;
+
-
}
+
-
 
+
-
body {
+
-
    font-family: 'Lato', Calibri, Arial, sans-serif;
+
-
    color: #f2ede3;
+
-
    background: #333;
+
-
    font-size: 0.9em;
+
-
    font-weight: 300;
+
-
}
+
-
 
+
-
a {
+
-
color: #f0f0f0;
+
-
text-decoration: none;
+
-
font-weight: 700;
+
-
letter-spacing: 2px;
+
-
padding: 0 5px;
+
-
text-transform: uppercase;
+
-
font-size: 80%;
+
-
}
+
-
 
+
-
a:hover {
+
-
color: #fff;
+
-
}
+
-
 
+
-
.container { height: 100%; }
+
-
 
+
-
.bl-main {
+
-
position: absolute;
+
-
width: 99%;
+
-
height: 99%;
+
-
overflow: hidden;
+
-
}
+
-
 
+
-
.bl-main > section {
+
-
position: absolute;
+
-
width: 33%;
+
-
height: 33%;
+
-
}
+
-
 
+
-
.bl-main > section:first-child {
+
-
top: 0;
+
-
left: 0;
+
-
background: #F06060;
+
-
}
+
-
 
+
-
.bl-main > section:nth-child(2) {
+
-
top: 0;
+
-
left: 33%;
+
-
background: #FA987D;
+
-
}
+
-
 
+
-
.bl-main > section:nth-child(3) {
+
-
top: 0%;
+
-
left: 66%;
+
-
background: #72CCA7;
+
-
}
+
-
 
+
-
.bl-main > section:nth-child(4) {
+
-
top: 33%;
+
-
left: 0%;
+
-
background: #10A296;
+
-
}
+
-
 
+
-
.bl-main > section:nth-child(5) {
+
-
top: 33%;
+
-
left: 33%;
+
-
background: #10A296;
+
-
}
+
-
.bl-main > section:nth-child(6) {
+
-
top: 33%;
+
-
left: 66%;
+
-
background: #10A296;
+
-
}
+
-
.bl-main > section:nth-child(7) {
+
-
top: 66%;
+
-
left: 0%;
+
-
background: #72CCA7;
+
-
}
+
-
.bl-main > section:nth-child(8) {
+
-
top: 66%;
+
-
left: 33%;
+
-
background: #FA987D;
+
-
}
+
-
.bl-main > section:nth-child(9) {
+
-
top: 66%;
+
-
left: 66%;
+
-
background: #F06060;
+
-
}
+
-
.bl-box {
+
-
position: relative;
+
-
width: 100%;
+
-
height: 100%;
+
-
cursor: pointer;
+
-
opacity: 1;
+
-
/* Centering with flexbox */
+
-
    display: -webkit-box;
+
-
    display: -moz-box;
+
-
    display: -ms-flexbox;
+
-
    display: -webkit-flex;
+
-
    display: flex;
+
-
    -webkit-flex-direction: row;
+
-
    -ms-flex-direction: row;
+
-
    flex-direction: row;
+
-
    -webkit-flex-wrap: wrap;
+
-
    -ms-flex-wrap: wrap;
+
-
    flex-wrap: wrap;
+
-
    -webkit-box-pack: center;
+
-
    -moz-box-pack: center;
+
-
    -webkit-justify-content: center;
+
-
    -ms-flex-pack: center;
+
-
    justify-content: center;
+
-
    -webkit-box-align: center;
+
-
    -moz-box-align: center;
+
-
    -webkit-align-items: center;
+
-
    -ms-flex-align: center;
+
-
    align-items: center;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
@media screen and (max-width: 46.5em) {
+
-
.bl-content,
+
-
.bl-box {
+
-
font-size: 75%;
+
-
}
+
-
 
+
-
.bl-expand .bl-box {
+
-
height: 130px;
+
-
}
+
-
 
+
-
.bl-content > ul li {
+
-
width: 40%;
+
-
}
+
-
}
+
-
</style>
+
-
</head>
+
</body>
-
<body>
+
-
<div class="container">
+
-
<div id="bl-main" class="bl-main">
+
-
<section>
+
-
<div class="bl-box">
+
-
                    <a href="http://tympanus.net/Development/ResponsiveMultiLevelMenu/" color="white">HOME</a>
+
-
</div>
+
-
</section>
+
-
<section id="bl-work-section">
+
-
<div class="bl-box">
+
-
<h2>Works</h2>
+
-
</div>
+
-
</section>
+
-
<section>
+
-
<div class="bl-box">
+
-
<h2>Blog</h2>
+
-
</div>
+
-
</section>
+
-
<section>
+
-
<div class="bl-box">
+
-
<h2>Contact</h2>
+
-
</div>
+
-
</section>
+
-
                <section>
+
-
<div class="bl-box">
+
-
<h2>Contact</h2>
+
-
</div>
+
-
</section>
+
-
                <section>
+
-
<div class="bl-box">
+
-
<h2>Contact</h2>
+
-
</div>
+
-
</section>
+
-
                <section>
+
-
<div class="bl-box">
+
-
<h2>Contact</h2>
+
-
</div>
+
-
</section>
+
-
                <section>
+
-
<div class="bl-box">
+
-
<h2>Contact</h2>
+
-
</div>
+
-
</section>
+
-
                <section>
+
-
<div class="bl-box">
+
-
<h2>Contact</h2>
+
-
</div>
+
-
</section>
+
-
+
-
</div>
+
-
</div><!-- /container -->
+
-
</body>
 
</html>
</html>

Latest revision as of 03:48, 28 September 2013



Retrieved from "http://2013.igem.org/Team:NJU_China"