|
|
(221 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: 580px;
| + | } |
− | left: 0;
| + | |
− | z-index:-1;
| + | |
− | 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%;
| + | |
− | right: 10%;
| + | |
− | background:url(https://static.igem.org/mediawiki/2016/5/55/Igem_2016_hzau_bottom_grass.png);
| + | |
− | }
| + | |
− | .last_img2{
| + | |
− | width: 15%;
| + | |
− | height: 45%;
| + | |
− | position: absolute;
| + | |
− | top: 55%;
| + | |
− | right:15%;
| + | |
− | background:url(https://static.igem.org/mediawiki/2016/0/00/Igem_2016_interbody_man.png);
| + | |
− | }
| + | |
| | | |
| | | |
− | .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"></div>
| + | |
− | <div class="last_img2"></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> |