Difference between revisions of "Team:SZU-China/HP Demo"

Line 6: Line 6:
 
</head>
 
</head>
  
 +
 +
<style>
 +
span{
 +
padding-top: 5%;
 +
}
 +
</style>
 
<body>
 
<body>
 
 
Line 13: Line 19:
 
</div>
 
</div>
 
<div class="row">
 
<div class="row">
−
<div class="col-lg-4 col-md-6 offset-2">
+
<div class="col-lg-4 col-md-10 offset-2">
 
<div class="row"></div>
 
<div class="row"></div>
−
<div class="text-center" style="overflow: hidden;width: 100%;height: 500px;padding-top: 20px">
+
<div class="text-center" style="overflow: hidden;width: 100%;height: 500px;padding-top: 20px" class="hh">
 
<div style="width: 70%;height: 400px;margin: 0 auto">
 
<div style="width: 70%;height: 400px;margin: 0 auto">
 
<div style="height: 400px;width: 400px;position:relative;margin: 0 auto;float: left" class="">
 
<div style="height: 400px;width: 400px;position:relative;margin: 0 auto;float: left" class="">
Line 73: Line 79:
 
                     <div class="box small_dot"></div>
 
                     <div class="box small_dot"></div>
 
<img src="https://static.igem.org/mediawiki/2018/0/00/T--SZU-China--HP-gif1.gif" id="gif_bg1" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" />
 
<img src="https://static.igem.org/mediawiki/2018/0/00/T--SZU-China--HP-gif1.gif" id="gif_bg1" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" />
−
                 <img src="https://static.igem.org/mediawiki/2018/2/26/T--SZU-China--HP-gif2.gif" id="gif_bg2" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
+
                 <img src="https://static.igem.org/mediawiki/2018/2/26/T--SZU-China--HP-gif2.gif" id="gif_bg2" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" />
−
                 <img src="https://static.igem.org/mediawiki/2018/8/8c/T--SZU-China--HP-gif3.gif" id="gif_bg3" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
+
                 <img src="https://static.igem.org/mediawiki/2018/8/8c/T--SZU-China--HP-gif3.gif" id="gif_bg3" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" />
−
                 <img src="https://static.igem.org/mediawiki/2018/a/ae/T--SZU-China--HP-gif4.gif" id="gif_bg4" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
+
                 <img src="https://static.igem.org/mediawiki/2018/a/ae/T--SZU-China--HP-gif4.gif" id="gif_bg4" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" />
−
                 <img src="https://static.igem.org/mediawiki/2018/0/03/T--SZU-China--HP-gif5.gif" id="gif_bg5" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
+
                 <img src="https://static.igem.org/mediawiki/2018/0/03/T--SZU-China--HP-gif5.gif" id="gif_bg5" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" />
−
                 <img src="https://static.igem.org/mediawiki/2018/f/fc/T--SZU-China--HP-gif6.gif" id="gif_bg6" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" />
+
                 <img src="https://static.igem.org/mediawiki/2018/f/fc/T--SZU-China--HP-gif6.gif" id="gif_bg6" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" />
 
<script>
 
<script>
 +
///新增
 +
                    var i=1;
 +
                    $(".row").click(function () {
 +
                   
 +
 +
                        $("#gif_bg"+i).hide();
 +
                        i = (i+1);
 +
                        if(i==7) i=1;
 +
                        $("#gif_bg"+i).show();
 +
                        if(i==1)
 +
                        $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/0/00/T--SZU-China--HP-gif1.gif");
 +
                        if(i==2)
 +
                        $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/2/26/T--SZU-China--HP-gif2.gif");
 +
                        if(i==3)
 +
                        $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/8/8c/T--SZU-China--HP-gif3.gif");
 +
                        if(i==4)
 +
                        $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/a/ae/T--SZU-China--HP-gif4.gif");
 +
                        if(i==5)
 +
                        $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/0/03/T--SZU-China--HP-gif5.gif");
 +
                        if(i==6)
 +
                        $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/f/fc/T--SZU-China--HP-gif6.gif");
 +
                    });
 +
                    ///新增
 
                     $(".dot_btn").click(function () {
 
                     $(".dot_btn").click(function () {
 
                         $(".content1").each(function () {
 
                         $(".content1").each(function () {
Line 124: Line 153:
 
 
 
 
−
<div class="col-lg-4 col-md-10 text-center">
+
<div class="col-lg-5 col-md-10 text-center" style="padding-right: -200px !important;">
 
<div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px; color: white; font-size: 20px;" id="content1" class="content1">
 
<div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px; color: white; font-size: 20px;" id="content1" class="content1">
 
                 <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
 
                 <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
−
                     <span class="kuang_title h2" style="color: #3880A0;">Applet</span>
+
                     <span class="kuang_title h2" ><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a></span>
 
                 </div>
 
                 </div>
 
                 <div class="card h-50 align-middle" style="background-color: #3880A0;width: 100%; padding-top: 10px;margin-top: 50px;">
 
                 <div class="card h-50 align-middle" style="background-color: #3880A0;width: 100%; padding-top: 10px;margin-top: 50px;">
−
                     <span style="">At the beginning of 2018 SZU-China team, we had a brainstorming to decide our topic. We carried out three topics which were all close to daily lives and we didn’t know which to choose.</span>
+
                     <span style="padding-top: 5%;">At the beginning of 2018 SZU-China team, we had a brainstorming to decide our topic. We carried out three topics which were all close to daily lives and we didn’t know which to choose.</span>
 
                 </div>
 
                 </div>
 
                 <div class="card h-50" style="background-color: #3880A0;width: 100%;padding-top: 10px;margin-top: 20px;">
 
                 <div class="card h-50" style="background-color: #3880A0;width: 100%;padding-top: 10px;margin-top: 20px;">
Line 142: Line 171:
 
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content2" class="content1">
 
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content2" class="content1">
 
                 <div  style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
 
                 <div  style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
−
                     <span class="kuang_title h2" style="color: #3880A0;">Meetup</span>
+
                     <span class="kuang_title h2" ><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/MeetUp">Meetup</a></span>
 
                 </div>
 
                 </div>
 
                 <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
 
                 <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
Line 157: Line 186:
 
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content3" class="content1">
 
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content3" class="content1">
 
                 <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
 
                 <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
−
                     <span class="kuang_title h2" style="color: #3880A0;">Inverstigation</span>
+
                     <span class="kuang_title h2" ><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Investigation">Investigation</a></span>
 
                 </div>
 
                 </div>
 
                 <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
 
                 <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
Line 172: Line 201:
 
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content4" class="content1">
 
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content4" class="content1">
 
                 <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
 
                 <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
−
                     <span class="kuang_title h2" style="color: #3880A0;">Simulation</span>
+
                     <span class="kuang_title h2" ><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Simulation">Simulation</a></span>
 
                 </div>
 
                 </div>
 
                 <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
 
                 <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
Line 187: Line 216:
 
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content5" class="content1">
 
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content5" class="content1">
 
                 <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
 
                 <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
−
                     <span class="kuang_title h2" style="color: #3880A0;">Education and public engagement</span>
+
                     <span class="kuang_title h2" ><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Education &#38; public engagement</a></span>
 
                 </div>
 
                 </div>
 
                 <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
 
                 <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
Line 202: Line 231:
 
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content6" class="content1">
 
             <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content6" class="content1">
 
                 <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
 
                 <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center">
−
                     <span class="kuang_title h2" style="color: #3880A0;">Prospect</span>
+
                     <span class="kuang_title h2" ><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Prospect">Prospect</a></span>
 
                 </div>
 
                 </div>
 
                 <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
 
                 <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px">
Line 221: Line 250:
  
 
</body>
 
</body>
 +
 +
 +
<script type="text/javascript">
 +
  $(document).ready(function(){
 +
///新增
 +
        window.onload = function () {
 +
    $("#gif_bg2").hide();
 +
    $("#gif_bg3").hide();
 +
    $("#gif_bg4").hide();
 +
    $("#gif_bg5").hide();
 +
    $("#gif_bg6").hide();
 +
    };
 +
    ///新增
 +
    });
 +
</script>
  
  
 
</html>
 
</html>

Revision as of 14:29, 17 October 2018

Human Practices

At the beginning of 2018 SZU-China team, we had a brainstorming to decide our topic. We carried out three topics which were all close to daily lives and we didn’t know which to choose.
To strengthen the communication between iGEM and the public, we designed an applet named biocompany and post our ideas there. It’s a platform for the public to engage in the iGEM.
With the comments that people gave in Biocompany, we finally decided our project, cockroach terminator. For more details about our applet, please read our applet part.