Team:ZJU-China/humanpractice.htm
From 2012.igem.org
(Difference between revisions)
(63 intermediate revisions not shown) | |||
Line 180: | Line 180: | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
+ | |||
+ | #search-controls | ||
+ | { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #footer-box | ||
+ | { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #banner { | ||
+ | position: relative; | ||
+ | width: 500px; | ||
+ | height: 330px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #banner_list img { | ||
+ | border: 0px; | ||
+ | } | ||
+ | |||
+ | #banner_bg { | ||
+ | position: absolute; | ||
+ | bottom: 20px; | ||
+ | background-color: #000; | ||
+ | height: 44px; | ||
+ | filter: Alpha(Opacity = 1); | ||
+ | opacity: 0.01; | ||
+ | z-index: 1000; | ||
+ | cursor: pointer; | ||
+ | width: 500px; | ||
+ | } | ||
+ | |||
+ | #banner_info { | ||
+ | position: absolute; | ||
+ | bottom: 20px; | ||
+ | left: 1px; | ||
+ | height: 44px; | ||
+ | color: #fff; | ||
+ | z-index: 1001; | ||
+ | cursor: pointer | ||
+ | } | ||
+ | |||
+ | #banner_text { | ||
+ | position: absolute; | ||
+ | width: 120px; | ||
+ | z-index: 1002; | ||
+ | right: 3px; | ||
+ | bottom: 3px; | ||
+ | } | ||
+ | |||
+ | #banner ul { | ||
+ | position: absolute; | ||
+ | list-style-type: none; | ||
+ | filter: Alpha(Opacity = 80); | ||
+ | opacity: 0.8; | ||
+ | border: 1px solid #fff; | ||
+ | z-index: 1002; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | bottom: 3px; | ||
+ | right: 5px; | ||
+ | } | ||
+ | |||
+ | #banner ul li { | ||
+ | padding: 0px 8px; | ||
+ | float: left; | ||
+ | display: block; | ||
+ | color: #FFF; | ||
+ | border: #e5eaff 1px solid; | ||
+ | background: #6f4f67; | ||
+ | cursor: pointer | ||
+ | |||
+ | #banner1 { | ||
+ | position: relative; | ||
+ | left: 10%; | ||
+ | width: 561px; | ||
+ | height: 485px; | ||
+ | border: 1px solid #666; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #banner_list1 img { | ||
+ | border: 0px; | ||
+ | } | ||
+ | |||
+ | #banner_info1 { | ||
+ | position: absolute; | ||
+ | bottom: 20px; | ||
+ | left: 5px; | ||
+ | height: 44px; | ||
+ | color: #fff; | ||
+ | z-index: 1001; | ||
+ | cursor: pointer | ||
+ | } | ||
+ | |||
+ | #banner1 ul { | ||
+ | position: absolute; | ||
+ | list-style-type: none; | ||
+ | filter: Alpha(Opacity = 80); | ||
+ | opacity: 0.8; | ||
+ | border: 1px solid #fff; | ||
+ | z-index: 1002; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | bottom: 3px; | ||
+ | right: 5px; | ||
+ | } | ||
+ | |||
+ | #banner1 ul li { | ||
+ | padding: 0px 8px; | ||
+ | float: left; | ||
+ | display: block; | ||
+ | color: #FFF; | ||
+ | border: #e5eaff 1px solid; | ||
+ | background: #6f4f67; | ||
+ | cursor: pointer | ||
+ | } | ||
+ | |||
+ | #banner1 ul li.on { | ||
+ | background: #900 | ||
+ | } | ||
+ | |||
+ | #banner_list1 a { | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #banner2 { | ||
+ | position: relative; | ||
+ | left: 10%; | ||
+ | width: 561px; | ||
+ | height: 485px; | ||
+ | border: 1px solid #666; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #banner_list2 img { | ||
+ | border: 0px; | ||
+ | } | ||
+ | |||
+ | #banner_info2 { | ||
+ | position: absolute; | ||
+ | bottom: 20px; | ||
+ | left: 5px; | ||
+ | height: 44px; | ||
+ | color: #fff; | ||
+ | z-index: 1001; | ||
+ | cursor: pointer | ||
+ | } | ||
+ | |||
+ | #banner2 ul { | ||
+ | position: absolute; | ||
+ | list-style-type: none; | ||
+ | filter: Alpha(Opacity = 80); | ||
+ | opacity: 0.8; | ||
+ | border: 1px solid #fff; | ||
+ | z-index: 1002; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | bottom: 3px; | ||
+ | right: 5px; | ||
+ | } | ||
+ | |||
+ | #banner2 ul li { | ||
+ | padding: 0px 8px; | ||
+ | float: left; | ||
+ | display: block; | ||
+ | color: #FFF; | ||
+ | border: #e5eaff 1px solid; | ||
+ | background: #6f4f67; | ||
+ | cursor: pointer | ||
+ | } | ||
+ | |||
+ | #banner2 ul li.on { | ||
+ | background: #900 | ||
+ | } | ||
+ | |||
+ | #banner_list2 a { | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
</style> | </style> | ||
Line 209: | Line 393: | ||
<script src="http://www.jiajunlu.com/igem/slide.js" type="text/javascript"></script> | <script src="http://www.jiajunlu.com/igem/slide.js" type="text/javascript"></script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | function movetotop(){ | ||
+ | $("html, body").animate({ scrollTop: 0 }, "slow"); | ||
+ | return false; | ||
+ | } | ||
$(function() { | $(function() { | ||
var offset = $("#logo").offset(); | var offset = $("#logo").offset(); | ||
Line 232: | Line 420: | ||
<div class="content"> | <div class="content"> | ||
<div id="columnLeft"> | <div id="columnLeft"> | ||
- | <div id="logo" style="margin-top: 0px; "> | + | <div id="logo" style="margin-top: 0px; " onclick="movetotop()"> |
- | <a | + | <a><img src="https://static.igem.org/mediawiki/2012/1/12/Zju_logo.png"></a> |
<!-- end #logo --></div> | <!-- end #logo --></div> | ||
<!-- end #columnLeft" --></div> | <!-- end #columnLeft" --></div> | ||
Line 246: | Line 434: | ||
<li class="3"><a href="https://2012.igem.org/Team:ZJU-China/project.htm"><img src="http://www.jiajunlu.com/igem/project_btn.gif"></a></li> | <li class="3"><a href="https://2012.igem.org/Team:ZJU-China/project.htm"><img src="http://www.jiajunlu.com/igem/project_btn.gif"></a></li> | ||
<li class="divline"></li> | <li class="divline"></li> | ||
- | <li class="4"><a href="https://2012.igem.org/Team:ZJU-China/ | + | <li class="4"><a href="https://2012.igem.org/Team:ZJU-China/models.htm"><img src="http://www.jiajunlu.com/igem/Zju_models_btn.gif"></a></li> |
<li class="divline"></li> | <li class="divline"></li> | ||
<li class="5"><a href="https://2012.igem.org/Team:ZJU-China/notebook.htm"><img src="http://www.jiajunlu.com/igem/notebook_btn.gif"></a></li> | <li class="5"><a href="https://2012.igem.org/Team:ZJU-China/notebook.htm"><img src="http://www.jiajunlu.com/igem/notebook_btn.gif"></a></li> | ||
Line 255: | Line 443: | ||
<li class="divline"></li> | <li class="divline"></li> | ||
<li class="8"><a href="https://2012.igem.org/Team:ZJU-China/achievement.htm"><img src="http://www.jiajunlu.com/igem/achievement_btn.gif"></a></li> | <li class="8"><a href="https://2012.igem.org/Team:ZJU-China/achievement.htm"><img src="http://www.jiajunlu.com/igem/achievement_btn.gif"></a></li> | ||
+ | <li class="divline"></li> | ||
+ | <li class="8"><a href="https://2012.igem.org"><img src="http://www.jiajunlu.com/igem/Zju_igem_btn.gif"></a></li> | ||
+ | |||
</ul> | </ul> | ||
<!-- end #menu --></div> | <!-- end #menu --></div> | ||
Line 260: | Line 451: | ||
<div id="main"> | <div id="main"> | ||
- | <h2 class="acc_trigger | + | <h2 class="acc_trigger">01 <strong>AT A GLANCE</strong></h2> |
<div class="acc_container" style="display: none; "> | <div class="acc_container" style="display: none; "> | ||
- | + | ||
<!--Content Goes Here--> | <!--Content Goes Here--> | ||
+ | <p align="justify">“Technology alone is not enough. It is technology marry with liberal arts, marry with humanities, that yield us the result that makes our hearts sing.” -Steve Jobs</p> | ||
+ | <p align="justify"> </p> | ||
+ | <p align="justify">“We discovered the true inner beauty of iGEM humanity, which is, being ethical, being versatile, and being creative.” -ZJU China</p> | ||
+ | <p align="justify"> </p> | ||
+ | <p align="justify">Humanity in cut-edge science has always being a fascinating topic in synthetic biology. We cast eye over the 8 years of iGEM teams’ human practices, embraces the beauty of creativeness in science outreach. Greatly inspired, ZJU-China produced a handbook summarizing the previous iGEM human practices, deeply digging and fully analyzing. We’ve compared most of them in the real practice in our campus, and detailed a new video approach, which has the most impressive influence. We made efforts to discover the true inner beauty of iGEM, which is, being ethical, being versatile, and being creative.</p> | ||
+ | <p align="justify"> </p> | ||
+ | <p align="justify"> Don’t hesitate to join our journey with a view of fantastic iGEM human practices.</p> | ||
- | |||
</div><!-- end .acc_container --> | </div><!-- end .acc_container --> | ||
- | + | <h2 class="acc_trigger">02 <strong>EXPERIENCE A REAL IGEM</strong></h2> | |
<div class="acc_container" style="display: none; "> | <div class="acc_container" style="display: none; "> | ||
- | |||
- | |||
- | < | + | <!--Content Goes Here--> |
+ | <div class="projectNav"> | ||
+ | <p align="justify">This year, ZJU-China made full use of our Synthetic Biology Club. We recruited 60 members throughout the campus. They are coming from different majors,such as mathematics, computer science, biotechnology, agriculture, food science, clinical medicine, bioinformatics, polymer materials science and engineering, plant protection, geographic information systems, optical engineering, accounting, business, electrical engineering and automation, energy and environmental engineering, tea science and chemistry. All of them took part in our annually "experiencing iGEM" activity, namely, ZJU Jamboree. </p> | ||
+ | <p align="justify"> </p> | ||
+ | <p align="justify">This year, ZJU-China did a few lectures to widespread the value of iGEM, participated in some scientific activities to display our projects and gain funding ourselves, put special highlight on our high school friends, provided opportunities to others who were interested in experiencing a real iGEM lab life.</p> | ||
+ | <p align="justify"> </p> | ||
- | < | + | <div class="projectNavFloat"> |
+ | <a target="brainFrame" href="https://2012.igem.org/Team:ZJU-China/hp_s2_1.htm" style="text-decoration:none">1.Synthetic Biology Club</a> | ||
+ | <br> | ||
+ | <a target="brainFrame" href="https://2012.igem.org/Team:ZJU-China/hp_s2_2.htm" style="text-decoration:none">2.ZJU Jamboree</a> | ||
+ | <br> | ||
+ | <a target="brainFrame" href="https://2012.igem.org/Team:ZJU-China/hp_s2_3.htm" style="text-decoration:none">3.Lectures</a> | ||
+ | </div><!-- end .projectNavFloat --> | ||
+ | <div class="projectNavFloat"> | ||
+ | <a target="brainFrame" href="https://2012.igem.org/Team:ZJU-China/hp_s2_4.htm" style="text-decoration:none">4.Other Scientific Activities</a> | ||
+ | <br> | ||
- | < | + | <a target="brainFrame" href="https://2012.igem.org/Team:ZJU-China/hp_s2_5.htm" style="text-decoration:none">5.High School Outreach</a> |
+ | <br> | ||
+ | <a target="brainFrame" href="https://2012.igem.org/Team:ZJU-China/hp_s2_6.htm" style="text-decoration:none">6.Experience a Real iGEM Lab Life</a> | ||
- | <p> | + | </div><!-- end .projectNavFloat --> |
+ | <br class="clearfloat"> | ||
+ | </div><!-- end .projectNav --> | ||
+ | |||
+ | <iframe src="" frameborder="0" name="brainFrame" width="100%" height="500px"> </iframe> | ||
+ | </div><!-- end .acc_container --> | ||
+ | |||
+ | <h2 class="acc_trigger">03 <strong>EXPLORE A NEW IGEM</strong></h2> | ||
+ | <div class="acc_container" style="display: none; "> | ||
+ | |||
+ | <!--Content Goes Here--> | ||
+ | <div class="projectNav"> | ||
+ | <p align="justify">This year, ZJU-China had tremendous ideas about human practice and actually did research about it. With the spirit of share and fun, here comes our HP creative idea workshop, aiming to provide brilliant and workable thoughts about iGEM human practice for future teams, and trying to develop insights of a real effective human practice. Needless to say, we even try some ideas of our workshop. Well, it went well!</p> | ||
+ | <p align="justify"> </p> | ||
+ | <p align="justify">Let’s take a look at what we tried this year! ZJU-China held a special event called "Scaffold in your eyes" in campus, and attracted a lot of attention. ZJU-China created a cute love story to illustrate our main idea of project, then we made an animation of this story, "Scaffold in Syn & Bio's love", in which we even create our own song (with the tune of Jason Mraz "I'm yours"). It is so awesome and so fun, definitely worth seeing! The video received more than 2200 clicks so far, and we are so happy to see the comments like "Well, iGEM seems fun!", "Your project is interesting". Additionally, ZJU-China thought ethical thinking is also crucial, and apart from the safety sheet we undergraduate researchers have to think about, we left the question directly to our freshmen in their first English Speech Contest.</p> | ||
+ | |||
+ | |||
+ | <p align="justify"> </p> | ||
+ | |||
+ | <div class="projectNavFloat"> | ||
+ | <a target="brainFramei" href="https://2012.igem.org/Team:ZJU-China/hp_s3_1.htm" style="text-decoration:none">1.HP creative idea workshop</a> | ||
+ | <br> | ||
+ | <a target="brainFramei" href="https://2012.igem.org/Team:ZJU-China/hp_s3_2.htm" style="text-decoration:none">2.Card game: Methane Killer</a><br> | ||
+ | <a target="brainFramei" href="https://2012.igem.org/Team:ZJU-China/hp_s3_3.htm" style="text-decoration:none">3.Scaffold in your eyes</a> | ||
+ | </div><!-- end .projectNavFloat --> | ||
+ | <div class="projectNavFloat"> | ||
- | + | ||
+ | |||
+ | <a target="brainFramei" href="https://2012.igem.org/Team:ZJU-China/hp_s3_4.htm" style="text-decoration:none">4.A love story between Syn & Bio</a> | ||
+ | <br> | ||
+ | <a target="brainFramei" href="https://2012.igem.org/Team:ZJU-China/hp_s3_5.htm" style="text-decoration:none">5.English Speech Contest</a> | ||
+ | </div><!-- end .projectNavFloat --> | ||
+ | <br class="clearfloat"> | ||
+ | </div><!-- end .projectNav --> | ||
+ | |||
+ | <iframe src="" frameborder="0" name="brainFramei" width="100%" height="500px"> </iframe> | ||
</div><!-- end .acc_container --> | </div><!-- end .acc_container --> | ||
- | + | ||
- | <h2 class="acc_trigger"> | + | |
+ | <h2 class="acc_trigger">04 <strong>COLLABRATIONS</strong></h2> | ||
<div class="acc_container" style="display: none; "> | <div class="acc_container" style="display: none; "> | ||
- | + | ||
<!--Content Goes Here--> | <!--Content Goes Here--> | ||
+ | <div class="projectNav"> | ||
- | + | <div class="projectNavFloat"> | |
+ | <a target="brainFramej" href="https://2012.igem.org/Team:ZJU-China/hp_s4_1.htm" style="text-decoration:none">1.Dr. Yuhua Hu's visit</a> | ||
+ | <br> | ||
+ | <a target="brainFramej" href="https://2012.igem.org/Team:ZJU-China/hp_s4_2.htm" style="text-decoration:none">2.Peking_U visiting our team</a> | ||
+ | |||
+ | </div><!-- end .projectNavFloat --> | ||
+ | <div class="projectNavFloat"> | ||
+ | |||
+ | <a target="brainFramej" href="https://2012.igem.org/Team:ZJU-China/hp_s4_3.htm" style="text-decoration:none">3.Terrific trip to UIUC</a> | ||
+ | |||
+ | </div><!-- end .projectNavFloat --> | ||
+ | <br class="clearfloat"> | ||
+ | </div><!-- end .projectNav --> | ||
+ | |||
+ | <iframe src="" frameborder="0" name="brainFramej" width="100%" height="500px"> </iframe> | ||
</div><!-- end .acc_container --> | </div><!-- end .acc_container --> | ||
+ | <h2 class="acc_trigger">05 <strong>SCAFFOLD IN SYN AND BIO'S LOVE</strong></h2> | ||
+ | <div class="acc_container" style="display: none; "> | ||
+ | <!--Content Goes Here--> | ||
+ | <embed src="http://bis.zju.edu.cn/igem2012/scaffold-in-love.mp4" width="700" height="550" autoplay="false" controller="true" ></embed> | ||
+ | <p> </p> | ||
+ | <p>You can also watch it in the following video site:</p> | ||
+ | <p><a style="color:#FF8000" href="http://www.youtube.com/watch?v=tMY8qbvkW3c&feature=youtu.be">Youtube: http://www.youtube.com/watch?v=tMY8qbvkW3c&feature=youtu.be</a></p> | ||
+ | <p><a style="color:#FF8000" href="http://v.youku.com/v_show/id_XNDU0NDkwNDYw.html">Youku: http://v.youku.com/v_show/id_XNDU0NDkwNDYw.html</a></p> | ||
+ | |||
+ | </div><!-- end .acc_container --> | ||
<!-- end #main --></div> | <!-- end #main --></div> | ||
Line 303: | Line 574: | ||
<br class="clearfloat"> | <br class="clearfloat"> | ||
<br class="clearfloat"> | <br class="clearfloat"> | ||
- | + | <!-- end #columnRight --></div> | |
- | <!-- end #columnRight --></div> | + | |
- | + | ||
<!-- end .content --></div> | <!-- end .content --></div> | ||
- | + | <!-- end .container --></div> | |
- | + | ||
- | + | ||
- | <!-- end .container --></div> | + | |
- | + | ||
</div><!-- end .wrapper --> | </div><!-- end .wrapper --> | ||
+ | <div><img src="https://static.igem.org/mediawiki/igem.org/d/d9/Zju_foot.png" width="100%"></div> | ||
<div id="footer"> | <div id="footer"> | ||
<div id="footerImg"> | <div id="footerImg"> | ||
</div><!-- end footerImg --> | </div><!-- end footerImg --> | ||
- | |||
- | |||
<!-- end #footer --></div> | <!-- end #footer --></div> | ||
<script type="text/javascript"> Cufon.now(); </script> | <script type="text/javascript"> Cufon.now(); </script> | ||
- | |||
- | |||
</body></html> | </body></html> |