Difference between revisions of "Team:Worldshaper-XSHS"

Line 1: Line 1:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
−
html body{
 
−
font-family:purista  !important;
 
−
}
 
 
     .dropdown .dropdown-menu > ul {
 
     .dropdown .dropdown-menu > ul {
−
         background-color: #578a55!important
+
         background-color: rgba(132,176,110,0.4) !important
 
     }  
 
     }  
−
  .positiontitle{
+
    .positiontitle{
−
    position: relative;
+
        position: relative;
−
         top:200px;
+
         top:500px;
 
         font-size: 68px;
 
         font-size: 68px;
−
    color:#fff;
+
        color:#fff;
 
         z-index: 100;
 
         z-index: 100;
 
         letter-spacing: 0.0588235em;
 
         letter-spacing: 0.0588235em;
−
  }
+
    }
−
  .colul .colactive a{
+
    .colul .colactive a{
−
    font-size:22px;
+
        font-size:22px;
 
         color: #00746b !important;
 
         color: #00746b !important;
 
     }
 
     }
−
.v1{
+
    .v1{
−
         font-family: arial !important;
+
         font-family: proxima-nova !important;
 
         font-weight: 600 !important;
 
         font-weight: 600 !important;
 
         font-style: normal !important;
 
         font-style: normal !important;
Line 33: Line 30:
 
     }
 
     }
 
     .colul a:hover{
 
     .colul a:hover{
−
      font-size:22px;
+
 
−
      transition: all linear .3s;
+
 
         color: #00746b !important;  
 
         color: #00746b !important;  
 
     }
 
     }
−
  .colul li a{
+
    .colul li a{
−
         font-family: purista !important;
+
         font-family: adobe-garamond-pro !important;
 
         font-weight: 400;
 
         font-weight: 400;
 
         font-style: normal;
 
         font-style: normal;
Line 49: Line 45:
 
         margin-bottom: .5em;
 
         margin-bottom: .5em;
 
        
 
        
−
  }
+
    }
−
  .ulfixed{
+
    .ulfixed {
−
    position: fixed !important;
+
        position: fixed !important;
−
    left:167px;
+
       
−
    top:100px;
+
        top: 90px;
 
     }
 
     }
 
     .myheader{
 
     .myheader{
 
         box-shadow:none !important;
 
         box-shadow:none !important;
−
         background:rgba(0,0,0,.4) !important;
+
         background:rgba(132,176,110,0.4) !important;
 
         border:none !important;
 
         border:none !important;
 
     }
 
     }
 
     .itemstyle{
 
     .itemstyle{
−
         font-family: michroma !important;
+
         font-family: arial !important;
 
         font-weight: 400 !important;
 
         font-weight: 400 !important;
 
         font-style: normal !important;
 
         font-style: normal !important;
 +
     
 
         letter-spacing: 0px !important;
 
         letter-spacing: 0px !important;
 
         line-height: 1.6em !important;
 
         line-height: 1.6em !important;
Line 71: Line 68:
 
         background:rgba(0,0,0,1) !important;
 
         background:rgba(0,0,0,1) !important;
 
     }
 
     }
−
  @font-face
+
    #back-to-top{
−
{
+
        position:fixed;
−
    font-family: purista;
+
        bottom:100px;
−
    src: url('https://static.igem.org/mediawiki/2018/4/44/T--worldshaper-XSHS--semibold.otf'),
+
        left:80px;
−
    url('https://static.igem.org/mediawiki/2018/4/44/T--worldshaper-XSHS--semibold.otf');
+
    }
−
}
+
    #back-to-top a{
−
{
+
        text-align:center;
−
    font-family: michroma;
+
        text-decoration:none;
−
    src: url('https://static.igem.org/mediawiki/2018/4/41/T--worldshaper-XSHS--michroma.ttf'),
+
        color:#d1d1d1;
−
    url('https://static.igem.org/mediawiki/2018/4/41/T--worldshaper-XSHS--michroma.ttf');
+
        display:block;
−
}
+
        width:80px;
 +
        /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
 +
        -moz-transition:color 1s;
 +
        -webkit-transition:color 1s;
 +
        -o-transition:color 1s;
 +
    }
 +
    #back-to-top a img{
 +
        background:#d1d1d1;
 +
        border-radius:6px;
 +
        display:block;
 +
        height:80px;
 +
        width:80px;
 +
        margin-bottom:5px;
 +
        -moz-transition:background 1s;
 +
        -webkit-transition:background 1s;
 +
        -o-transition:background 1s;
 +
    }
 
</style>
 
</style>
 
     <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/wiki_edit.css">
 
     <link rel="stylesheet" type="text/css" href="http://igem2017.worldshaper.cn/XSHS/css/wiki_edit.css">
Line 101: Line 114:
 
     <script src="http://igem2017.worldshaper.cn/XSHS/js/jquery.fancybox.js"></script>
 
     <script src="http://igem2017.worldshaper.cn/XSHS/js/jquery.fancybox.js"></script>
 
     <script src="http://igem2017.worldshaper.cn/XSHS/js/main.js"></script>
 
     <script src="http://igem2017.worldshaper.cn/XSHS/js/main.js"></script>
 +
<script type="text/javascript">
 +
    $(function () {
 +
        //当点击跳转链接后，回到页面顶部位置
 +
        $("#back-to-top").hide();
 +
        window.onscroll = function () {
 +
            var t = document.documentElement.scrollTop || document.body.scrollTop;  //获取距离页面顶部的距离
 +
            var $x = $('#Ourteam').offset().top
 +
            if (t >= $x - 80) {
 +
                console.log(t, $x)
 +
                $('.colul').addClass('ulfixed')
 +
                $("#back-to-top").fadeIn(1500);
 +
            } else {
 +
                $('.colul').removeClass('ulfixed')
 +
                $("#back-to-top").fadeOut(1500);
 +
            }
 +
        }
 +
        $("#back-to-top").click(function () {
 +
            $('body,html').animate({ scrollTop: 0 }, 1000);
 +
            return false;
 +
        });
 +
        $('.colul li').click(function () {
 +
            $(this).siblings().removeClass('colactive')
 +
            $(this).addClass('colactive')
 +
        })
 +
    })
 +
</script>
 +
  <p id="back-to-top">
 +
    <a href="#top">
 +
       
 +
<img src="https://static.igem.org/mediawiki/2018/e/e5/T--worldshaper-XSHS--back.png">
 +
To Top
 +
    </a>
 +
</p>
 
     <header id="top-bar" class="navbar-fixed-top animated-header  navbar navbar-default myheader"  >
 
     <header id="top-bar" class="navbar-fixed-top animated-header  navbar navbar-default myheader"  >
 
         <div class="container">
 
         <div class="container">
Line 109: Line 155:
 
                     <span class="icon-bar"></span>
 
                     <span class="icon-bar"></span>
 
                     <span class="icon-bar"></span>
 
                     <span class="icon-bar"></span>
−
        </button>
+
                </button>
 
                 <div class="navbar-brand " style="display:block;color:#fff;margin-left:15px;font-size:20px">
 
                 <div class="navbar-brand " style="display:block;color:#fff;margin-left:15px;font-size:20px">
 
                     <a href="https://2018.igem.org/Team:Worldshaper-XSHS">
 
                     <a href="https://2018.igem.org/Team:Worldshaper-XSHS">
Line 115: Line 161:
 
                     </a>
 
                     </a>
 
                 </div>
 
                 </div>
−
      </div>
+
            </div>
 
             <nav class="collapse navbar-collapse navbar-right" role="navigation">
 
             <nav class="collapse navbar-collapse navbar-right" role="navigation">
 
                 <div class="main-menu">
 
                 <div class="main-menu">
Line 226: Line 272:
 
     </header>
 
     </header>
  
−
     <section class="visual wow fadeInLeft animated" data-wow-duration="500ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 500ms; animation-delay: 200ms; animation-name: fadeInLeft;">
+
     <section class="visual wow fadeInLeft text-center animated" data-wow-duration="500ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 500ms; animation-delay: 200ms; animation-name: fadeInLeft;">
−
         <img src="https://static.igem.org/mediawiki/2018/1/13/T--worldshaper-XSHS--Home001.png" alt="" class="bg-stretch" style="width:100%">  
+
        <strong  class="positiontitle">About Us</strong><!-- 这里是大图的标题 -->
 +
         <img src="https://static.igem.org/mediawiki/2018/e/e6/T--worldshaper-XSHS--a001.png" alt="" class="bg-stretch" style="width:100%">
 +
        <!-- 这里是大图的图片链接 -->
 
     </section>
 
     </section>
  
−
     <section id="about" style="background:#fff">
+
     <section class="pageInHere">
 
         <div class="container">
 
         <div class="container">
−
             <div class="row text-center">
+
             <div class="row">
−
                 <div>
+
                 <div class="col-xs-2 xshs-box3  ">
−
                     <div class="block wow fadeInLeft animated" data-wow-delay=".3s" data-wow-duration="500ms" style="visibility: visible; animation-duration: 500ms; animation-delay: 0.3s; animation-name: fadeInLeft;">
+
                     <ul class="colul text-left">
−
                         <h2 class="v1">Abstract</h2>
+
                        <li class="colactive mt-1"><a href="#Ourteam">Our team</a></li>
 +
                        <li class="mt-1"><a href="#OurSchool">Our School</a></li>
 +
                        <li class="mt-1"><a href="#Others">Others</a></li>
 +
                        <!-- 这里是页面定位锚点  href 对应代码的 “id属性  例如 id='xxx'  ”-->
 +
                    </ul> 
 +
                </div>
 +
                <div class="col-xs-10 ">
 +
                    <div class="xshs-box3">
 +
                         <p class="v1" id="Ourteam">Our team</p>
 
                         <p class="itemstyle">
 
                         <p class="itemstyle">
−
                             Hometown Hangzhou is widely known by water- related UNESCO World Heritages – West Lake and Grand Canal, however, severe water
+
                             Worldshaper XSHS, the name of the IGEM team of our Xiaoshan High School, translated as the " The New World's Shaper ", expresses
−
                             pollution problem caused by many reasons also exist. Hence, we hope to provide an easy-operating
+
                             the new generation of young people's good expectations for future technology and the great ideals for contributing
−
                             and low-cost tool for public to monitor water quality around.
+
                            to mankind. Our team consists of 14 members and is guided by a number of teachers and doctors. Last year, the bio-detection
 +
                             device for water oxygen content in our school's IGEM team won the first gold medal in the high school group in East
 +
                            China. This year, we will go all out to strive for further success!
 
                         </p>
 
                         </p>
 +
                    </div>
 +
                    <div class="xshs-box2">
 +
                        <p>
 +
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/e/e6/T--worldshaper-XSHS--a001.png" />
 +
                        </p>
 +
                        <p>
 +
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/0/07/T--worldshaper-XSHS--a002.png" />
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box3">
 +
                        <p class="v1" id="OurSchool">Our School</p>
 
                         <p class="itemstyle">
 
                         <p class="itemstyle">
−
                             We designed a portable water quality bio-detector prototype based on E.coli strains which were constructed to detect dissolved
+
                             We are from Xiaoshan High School, Zhejiang Province, a school founded in 1938 with a long history in Hangzhou, China. The
−
                            oxygen, phosphorus or nitrogen in water respectively. The oxygen sensitive vgb promoter and a GFP
+
                             school adheres to the motto: "seek the truth, seek the innovation, seek the beauty and seeking reality". We have trained
−
                             reporter constitute Oxygen detector 1.0. To enhance the expression of GFP, version 2.0 contains a
+
                             large quantities of outstanding students over the years. This is our school:
−
                            vgb promoter, a T7 RNA polymerase gene, a T7 promoter and a GFP gene. For nitrogen, the PyeaR promoter
+
−
                             was used to response to different concentrations of nitrate, nitrite and nitric, with a BFP reporter
+
−
                            gene. For phosphate, a plasmid consisting of an ‘external phosphate sensing promoter’ to sense the
+
−
                            phosphate concentration and a RFP gene to report.
+
 
                         </p>
 
                         </p>
 
                     </div>
 
                     </div>
−
                     <div>
+
                     <div class="xshs-box2">
−
                         <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms" style="visibility: hidden; animation-duration: 500ms; animation-delay: 0.3s; animation-name: none;">
+
                         <p>
−
                             <img src="https://static.igem.org/mediawiki/2017/f/f1/T-worldshaper-XSHS-k010.png" alt="">
+
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/c/c0/T--worldshaper-XSHS--a003.png" style="width: 133%;height: 150%"
−
                         </div>
+
                            />
 +
                        </p>
 +
                        <p>
 +
                             <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/6/61/T--worldshaper-XSHS--a004.png" />
 +
                        </p>
 +
                        <p>
 +
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/6/67/T--worldshaper-XSHS--a005.png" />
 +
                         </p>
 
                     </div>
 
                     </div>
−
                </div>
+
                     <div class="xshs-box3">
−
                <div class="row">
+
                         <p class="v1" id="Others">Others</p>
−
                     <div class="col-md-6 col-sm-6">
+
                        <p class="itemstyle">
−
                         <div class="block wow fadeInLeft animated" data-wow-delay=".3s" data-wow-duration="500ms" style="visibility: visible; animation-duration: 500ms; animation-delay: 0.3s; animation-name: fadeInLeft;">
+
                            Logo: We have designed our own team logo and flag. This is our logo:
−
                            <h2 class="v1">Abstract</h2>
+
                        </p>
−
                            <p class="itemstyle">
+
−
                                Hometown Hangzhou is widely known by water- related UNESCO World Heritages – West Lake and Grand Canal, however, severe water
+
−
                                pollution problem caused by many reasons also exist. Hence, we hope to provide an easy-operating
+
−
                                and low-cost tool for public to monitor water quality around.
+
−
                            </p>
+
−
                            <p class="itemstyle">
+
−
                                We designed a portable water quality bio-detector prototype based on E.coli strains which were constructed to detect dissolved
+
−
                                oxygen, phosphorus or nitrogen in water respectively. The oxygen sensitive vgb promoter and a
+
−
                                GFP reporter constitute Oxygen detector 1.0. To enhance the expression of GFP, version 2.0 contains
+
−
                                a vgb promoter, a T7 RNA polymerase gene, a T7 promoter and a GFP gene. For nitrogen, the PyeaR
+
−
                                promoter was used to response to different concentrations of nitrate, nitrite and nitric, with
+
−
                                a BFP reporter gene. For phosphate, a plasmid consisting of an ‘external phosphate sensing promoter’
+
−
                                to sense the phosphate concentration and a RFP gene to report.
+
−
                            </p>
+
−
                        </div>
+
−
   
+
 
                     </div>
 
                     </div>
−
                     <div class="col-md-6 col-sm-6">
+
                     <div class="xshs-box2">
−
                         <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms" style="visibility: hidden; animation-duration: 500ms; animation-delay: 0.3s; animation-name: none;">
+
                         <p>
−
                            <img src="https://static.igem.org/mediawiki/2017/f/f1/T-worldshaper-XSHS-k010.png" alt="">
+
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/7/78/T--worldshaper-XSHS--a006.png" />
−
                         </div>
+
                         </p>
 
                     </div>
 
                     </div>
 +
                    <div class="xshs-box3">
 +
                        <p>Logo meaning:</p>
 +
                        <p style="color: red!important">
 +
                            这里输入logo意义
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box3">
 +
                        <p class="itemstyle">
 +
                            Whenever we go out to participate in activities, we all wear our uniform. We all love our uniform:
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box2">
 +
                        <p>
 +
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/6/67/T--worldshaper-XSHS--a007.png" />
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box3">
 +
                        <p class="itemstyle">
 +
                            In addition, the money to buy the uniforms and the flag is all from fund-raising. Thanks to those who support us
 +
                        </p>
 +
                    </div>
 +
                    <div class="xshs-box2">
 +
                        <p>
 +
                            <img class="img-responsive" alt="" src="https://static.igem.org/mediawiki/2018/e/e1/T--worldshaper-XSHS--a008.png" />
 +
                        </p>
 +
                    </div>
 +
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 +
        </div>
 
     </section>
 
     </section>
  
−
     <footer class="footer">
+
     <footer class="footer">
 
         <div class="container">
 
         <div class="container">
 
             <div class="foot-box">
 
             <div class="foot-box">

Revision as of 10:17, 11 October 2018

To Top

Worldshaper- XSHS
About Us

Our team

Worldshaper XSHS, the name of the IGEM team of our Xiaoshan High School, translated as the " The New World's Shaper ", expresses the new generation of young people's good expectations for future technology and the great ideals for contributing to mankind. Our team consists of 14 members and is guided by a number of teachers and doctors. Last year, the bio-detection device for water oxygen content in our school's IGEM team won the first gold medal in the high school group in East China. This year, we will go all out to strive for further success!

Our School

We are from Xiaoshan High School, Zhejiang Province, a school founded in 1938 with a long history in Hangzhou, China. The school adheres to the motto: "seek the truth, seek the innovation, seek the beauty and seeking reality". We have trained large quantities of outstanding students over the years. This is our school:

Others

Logo: We have designed our own team logo and flag. This is our logo:

Logo meaning:

这里输入logo意义

Whenever we go out to participate in activities, we all wear our uniform. We all love our uniform:

In addition, the money to buy the uniforms and the flag is all from fund-raising. Thanks to those who support us

  • Worldshaper-XSHS, Xiaoshan High School

    Adress: No.538,Gongxiu Road,Xiaoshan District,Hangzhou,Zhejiang Province,China