Difference between revisions of "Team:HZAU-China"

 
(225 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{HZAU-China}}
 
{{HZAU-China}}
<html>
 
  
 +
 +
<html>
 
<head>
 
<head>
    <meta charset="UTF-8">
+
<meta charset="UTF-8">  
    <title>body</title>
+
<style>
    <style type="text/css">
+
body{
        *{margin: 0;padding: 0;}
+
background-color: white;
        .content_wrapper{
+
}
            width: 100%;
+
p{
            height:1800px;
+
margin:0 0 0 0;
            background-color: #dfe6ed;
+
}
            position:absolute;
+
            top:35px;
+
            z-index:-1;
+
        }
+
        .header{
+
            width: 100%;
+
            height: 580px;
+
            position: relative;
+
            background:url(https://static.igem.org/mediawiki/2016/e/e4/Igem_2016_hzau_header_background.png);
+
        }
+
        .title{
+
            width: 100%;
+
            height: 10%;
+
            position: absolute;
+
            top:30px;
+
            left: 0;
+
        }
+
        .header_left{
+
            width: 10%;
+
            height: 10%;
+
            position: absolute;
+
            top:390px;
+
            left: 31%;
+
  
        }
+
.body{
        .header_right{
+
margin:auto;
            width: 10%;
+
position: absolute;
            height: 10%;
+
top:50px; left:0; right: 0;
            position: absolute;
+
width:1366px;
            top:130px;
+
}
            left:47%;
+
.head{
        }
+
position: absolute;
 +
top:35px;
 +
}
 +
.item{
 +
padding:0 0px 0 0px;
 +
}
  
 +
#picture1{
 +
position: absolute;
 +
top: 500px;
 +
left:150px;
 +
}
  
 +
#picture2{
 +
position: absolute;
 +
top: 850px;
 +
right:160px;
 +
}
  
        .main_part{
+
#picture3{
            width: 100%;
+
position: absolute;
            height: 880px;
+
top: 1200px;
            position: absolute;
+
left:300px;
            top: 600px;
+
}
            left: 0;
+
            background:url(https://static.igem.org/mediawiki/2016/5/58/Igem_2016_interbody_mainpart.png);
+
        }
+
        .bar_name{
+
            width:80%;
+
            height: 20%;
+
            position: absolute;
+
            top: 0px;
+
            left: 0;
+
        }
+
        .tmp_img{
+
            width: 20%;
+
            height: 20%;
+
            position: absolute;
+
            top: 0;
+
            left: 80%;
+
        }
+
        .part1{
+
            width: 30%;
+
            height: 80%;
+
            position: absolute;
+
            top: 20%;
+
            left: 2.5%;
+
        }
+
  
        .part2{
+
#video{
            width: 30%;
+
position: absolute;
            height: 80%;
+
top:1420px;
            position: absolute;
+
z-index: -1;
            top: 20%;
+
left: 58px;
            left: 35%;
+
}
        }
+
.biopafiar_video{
        .part3{
+
position:absolute;
            width: 30%;
+
top:1690px;
            height: 80%;
+
left: 125px;
            position: absolute;
+
}
            top: 20%;
+
.lines{
            left: 67.5%;
+
position:absolute;
        }
+
top:2230px;
        .decoration{
+
width: 1366px;
            width: 100%;
+
}
            height: 8%;
+
#uplines{
            position: absolute;
+
position: absolute;
            top: 8%;
+
top:70px;
            left: 0;
+
left: 920px;
        }
+
}
        .words{
+
.uplines{
            width: 52%;
+
    width: 60px;
            height: 60%;
+
        display: block;  
            position: absolute;
+
        transition: 0.4s ;
            top: 20%;
+
}
            left: 10%;
+
.uplines:hover{
            background-color: #dec5df;
+
transform: scale(1.1);
        }
+
}
        .bottom{
+
.sublines{
            width: 180px;
+
width: 150px;
            height: 8%;
+
        display: block;  
            position: absolute;
+
        transition: 0.4s ;
            top: 83%;
+
}
            left: 30%;
+
.sublines:hover{
        }
+
transform: scale(1.1);
        .view_more{
+
}
            display: block;
+
#wetlab{
            width: 100%;
+
position:absolute;
            height: 50px;
+
top:200px;
            line-height: 50px;
+
left: 300px;
            text-decoration: none;
+
}
            color: #7d489c;
+
#drylab{
            font-family: Arial;
+
position:absolute;
            font-size: 25px;
+
top:200px;
            font-weight: bold;
+
left: 600px;
            border: 2px solid rgba(230,158,230,0.6);
+
}
            box-sizing: border-box;
+
#hp{
            padding-left: 25px;
+
position:absolute;
            margin:0 auto;
+
top:200px;
            transition:border 0.4s ease;
+
left:900px;
            position: relative;
+
}
        }
+
        .view_more:hover{
+
            border: 2px solid rgba(110, 33, 134,0.8);
+
        }
+
  
  
  
  
        .last_part{
+
.carousel-control img{
            width:100%;
+
padding:210px 0 0 0;
            height: 500px;
+
}
            position: absolute;
+
            top:1500px;
+
            left: 0;
+
            background:url(https://static.igem.org/mediawiki/2016/a/a1/Igem_2016_hzau_inter_body.png);
+
        }
+
        .last_head{
+
            width: 20%;
+
            height: 12%;
+
            position: absolute;
+
            top:8%;
+
            left: 40%;
+
            background-color: #72c9b6;
+
        }
+
        .last_body{
+
            width: 80%;
+
            height: 20%;
+
            position: absolute;
+
            top: 25%;
+
            left: 10%;
+
            background-color: #72c9b6;
+
        }
+
        .last_bottom{
+
            width: 13%;
+
            height: 10%;
+
            position: absolute;
+
            top: 50%;
+
            left: 45%;
+
        }
+
        .last_img1{
+
            width: 50%;
+
            height: 30%;
+
            position: absolute;
+
            top: 70%;
+
            left: 50%;
+
        }
+
        .last_img2{
+
            width: 15%;
+
            height: 45%;
+
            position: absolute;
+
            top: 55%;
+
            left:70%;
+
        }
+
  
  
        .footer{
+
.related{
            width: 100%;
+
    color: #fff;
            height: 300px;
+
    font-size: 1em;
            position: absolute;
+
    position: absolute;
            top: 2000px;
+
top:2750px;
            left: 0;
+
font: times;
        }
+
        z-index:-1;
 +
     
 +
}
  
    </style>
+
 
 +
ul
 +
  {
 +
  list-style:none;
 +
  }
 +
</style>
 +
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
 +
<script type="text/javascript" src="//cdn.bootcss.com/wow/1.1.2/wow.min.js"></script> 
 +
<script>
 +
              new WOW().init();
 +
              </script>
 
</head>
 
</head>
 
  
 
<body>
 
<body>
<div class="content_wrapper">
+
<div class="body">
 +
  <div class="head">
 +
     
 +
<img src="https://static.igem.org/mediawiki/2016/6/66/T--HZAU-China--gif3.gif" />
 +
</head>
  
    <div class="header"><img src="https://static.igem.org/mediawiki/2016/e/e4/Igem_2016_hzau_header_background.png" width="100%" height="580"></div>
 
    <div class="title"><h1>this is main topic!</h1></div>
 
    <div class="header_left"><img src="https://static.igem.org/mediawiki/2016/3/3f/Igem_2016_hzau_header_table.png" width="250" height="210"></div>
 
    <div class="header_right"><img src="https://static.igem.org/mediawiki/2016/7/72/Igem_2016_hzau_header_human.png" width="300" height="480"></div>
 
 
    <div class="main_part"><img src="https://static.igem.org/mediawiki/2016/5/58/Igem_2016_interbody_mainpart.png" width="100%" height="1200" >
 
        <div class="bar_name"><h2>about us!</h2></div>
 
        <div class="tmp_img"></div>
 
 
        <div class="part1"><img src="https://static.igem.org/mediawiki/2016/7/76/Igem_2016_hzau_body_white_regtangle.png" width="407" height="680">
 
            <div class="decoration"><img src="https://static.igem.org/mediawiki/2016/b/b4/Igem_2016_hzau_decoration_tmp.png" width="410" height="60"></div>
 
 
            <div class="words">
 
                <p>In our project, the communication between these two parts is mutual which means that we need
 
                    a two-way interface device composed of Light Receiving part and Light Controlling part. For
 
                    the former one, cells were cultivated on a microfluidic chip and observed by fluorescence microscope.</p>
 
                <p>And for the last one, light (LED beads) can be controlled by the computer through a Single Chip Micyoco.
 
                    Besides, we have made a different device to achieve the phase 2 collaborated with Model and another to
 
                    complete the test of light control system with Wet Lab. Most important of all are that these two
 
                    devices all turned to work successfully.</p>
 
            </div>
 
            <div class="bottom">
 
            <a href="#" class="view_more">view more</a>
 
            </div>
 
        </div>
 
 
        <div class="part2"><img src="https://static.igem.org/mediawiki/2016/7/76/Igem_2016_hzau_body_white_regtangle.png" width="407" height="680">
 
            <div class="decoration"><img src="https://static.igem.org/mediawiki/2016/b/b4/Igem_2016_hzau_decoration_tmp.png" width="410" height="60"></div>
 
            <div class="words">
 
                <p>abcdIn our project, the communication between these two parts is mutual which means that we need
 
                    a two-way interface device composed of Light Receiving part and Light Controlling part. For
 
                    the former one, cells were cultivated on a microfluidic chip and observed by fluorescence microscope.
 
                    And for the last one, light (LED beads) can be controlled by the computer through a Single Chip Micyoco.
 
                    Besides, we have made a different device to achieve the phase 2 collaborated with Model and another to
 
                    complete the test of light control system with Wet Lab. Most important of all are that these two
 
                    devices all turned to work successfully.</p>
 
            </div>
 
            <div class="bottom">
 
                <a href="#" class="view_more">view more</a>
 
            </div>
 
        </div>
 
 
        <div class="part3"><img src="https://static.igem.org/mediawiki/2016/7/76/Igem_2016_hzau_body_white_regtangle.png" width="407" height="680">
 
            <div class="decoration"><img src="https://static.igem.org/mediawiki/2016/b/b4/Igem_2016_hzau_decoration_tmp.png" width="410" height="60"></div>
 
            <div class="words">
 
                <p>abcdIn our project, the communication between these two parts is mutual which means that we need
 
                    a two-way interface device composed of Light Receiving part and Light Controlling part. For
 
                    the former one, cells were cultivated on a microfluidic chip and observed by fluorescence microscope.
 
                    And for the last one, light (LED beads) can be controlled by the computer through a Single Chip Micyoco.
 
                    complete the test of light control system with Wet Lab. Most important of all are that these two
 
                    devices all turned to work successfully.</p>
 
            </div>
 
            <div class="bottom">
 
                <a href="#" class="view_more">view more</a>
 
            </div>
 
        </div>
 
  
 +
<div class="wow fadeInLeft" id="picture1">
 +
<img src="https://static.igem.org/mediawiki/2016/8/8e/T--HZAU-China--1.png" />
 +
</div>
 +
 +
<div class="wow fadeIn" id="picture2">
 +
<img src="https://static.igem.org/mediawiki/2016/a/a4/T--HZAU-China--ppic2.png" />
 +
</div>
 +
 +
<div class="wow fadeInRight" id="picture3">
 +
<img src="https://static.igem.org/mediawiki/2016/a/af/T--HZAU-China--3.png" />
 +
</div>
 +
 +
<div id="video">
 +
<img src="https://static.igem.org/mediawiki/2016/d/d1/T--HZAU-China--vbox5.png" />
 +
</div>
 +
<div class="biopafiar_video">
 +
<video src="https://static.igem.org/mediawiki/2016/d/db/T--HZAU-China--biopafiar_video.mp4" width="750px" controls="controls"/>
 
     </div>
 
     </div>
 
+
<div class="lines">
    <div class="last_part">
+
<a href="https://2016.igem.org/Team:HZAU-China/Description"><img  src="https://static.igem.org/mediawiki/2016/8/80/T--HZAU-China--view.png" /></a>
        <div class="last_head"><h2>interlab</h2></div>
+
<a href="https://2016.igem.org/Team:HZAU-China/Description"><img class="uplines" id="uplines" src="https://static.igem.org/mediawiki/2016/8/89/T--HZAU-China--go.png" id="lines-go"/></a>
        <div class="last_body"><h4>And for the last one, light (LED beads) can be controlled by the computer through a Single Chip Micyoco.</h4></div>
+
<a href="https://2016.igem.org/Team:HZAU-China/Measurement"><img class="sublines" src="https://static.igem.org/mediawiki/2016/7/71/T--HZAU-China--button_1.png" id="wetlab"></a>
        <div class="last_bottom">
+
<a href="https://2016.igem.org/Team:HZAU-China/Model"><img class="sublines" src="https://static.igem.org/mediawiki/2016/3/30/T--HZAU-China--button_2.png" id="drylab"></a>
            <a href="#" class="view_more">view more</a>
+
<a href="https://2016.igem.org/Team:HZAU-China/Collaborations"><img class="sublines" src="https://static.igem.org/mediawiki/2016/d/d7/T--HZAU-China--button_3.png" id="hp"></a>
        </div>
+
</div>
        <div class="last_img1"><img src="https://static.igem.org/mediawiki/2016/5/55/Igem_2016_hzau_bottom_grass.png" width="600" height="150"></div>
+
        <div class="last_img2"><img src="https://static.igem.org/mediawiki/2016/0/00/Igem_2016_interbody_man.png" width="180" height="235"></div>
+
    </div>
+
 
+
    <div class="footer"><img src="https://static.igem.org/mediawiki/2016/2/23/Igem_2016_hzau_bottom_box.png" width=100% height="300">
+
    </div>
+
  
  
 +
 +
<div class="related"> 
 +
 +
 
 +
                      <img src="https://static.igem.org/mediawiki/2016/b/bf/T--HZAU-China--eeee.png" />
 +
                   
 +
                   
 +
    </div>
 +
               
 +
   
 +
         
 +
       
 +
   
 
</div>
 
</div>
 
</body>
 
</body>
 
 
 
</html>
 
</html>

Latest revision as of 17:23, 19 October 2016