|
|
| (247 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{
| + | } |
| − | margin_top:35px;
| + | p{ |
| − | width: 100%;
| + | margin:0 0 0 0; |
| − | height:1800px;
| + | } |
| − | background-color: #dfe6ed;
| + | |
| − | }
| + | |
| − | .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: 80%;
| + | |
| − | height: 10%;
| + | |
| − | position: absolute;
| + | |
| − | top:10%;
| + | |
| − | left: 10%;
| + | |
| − | }
| + | |
| − | .header_left{
| + | |
| − | width: 10%;
| + | |
| − | height: 10%;
| + | |
| − | position: absolute;
| + | |
| − | top:61%;
| + | |
| − | left: 31%;
| + | |
| | | | |
| − | }
| + | .body{ |
| − | .header_right{
| + | margin:auto; |
| − | width: 10%;
| + | position: absolute; |
| − | height: 10%;
| + | top:50px; left:0; right: 0; |
| − | position: absolute;
| + | width:1366px; |
| − | top:20%;
| + | } |
| − | 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;
| + | |
| − | }
| + | |
| − | .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: 330px;
| + | 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;
| + | |
| − | }
| + | |
| − | .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="1348" 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"><img src="https://static.igem.org/mediawiki/2016/ a/ a1/ Igem_2016_hzau_inter_body.png" width="1348" height="500"> | + | <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="1384" 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> |
