Difference between revisions of "Team:HUST-China/InterLab"

(Prototype team page)
 
Line 1: Line 1:
−
{{HUST-China}}
 
 
<html>
 
<html>
  
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
    <!-- ʹIEÓÃ×î¸ßģʽäÖȾҳÃæ -->
 +
    <meta name="renderer" content="webkit">
 +
    <!-- ¼«ËÙģʽ -->
 +
    <title>Interlab</title>
 +
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 +
    <!-- <link rel="stylesheet" href="css/nav.css"> -->
 +
    <!-- <script type="text/javascript" src="js/respond.min.js"></script> -->
 +
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
 +
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 +
    <script>
 +
    if ($('.firstHeading')) $('.firstHeading').remove();
 +
    </script>
 +
    <style>
 +
    html {
 +
        overflow-x: hidden;
 +
        width: 100%;
 +
    }
 +
   
 +
    .banner-top {
 +
        margin-left: 15%;
 +
    }
 +
   
 +
    #igem_home_logo {
 +
        width: 100%;
 +
        margin-top: 80px;
 +
    }
 +
   
 +
    @media (min-width: 992px) {
 +
        .work-content .col-md-4 {
 +
            width: 25%;
 +
            margin-right: 8%;
 +
        }
 +
    }
 +
   
 +
    .carousel-control.left,
 +
    .carousel-control.right {
 +
        background-image: none;
 +
        padding-top: 18%;
 +
    }
 +
   
 +
    .carousel-indicators li {
 +
        background-color: #fff;
 +
        border: 1px solid #a94442;
 +
    }
 +
   
 +
    .carousel-indicators li.active {
 +
        background-color: #f0ad4e;
 +
    }
 +
   
 +
    #contentSub,
 +
    #contentcontainer,
 +
    #footer-box,
 +
    #sitesub,
 +
    #catlinks,
 +
    #search-controls,
 +
    #p-logo,
 +
    .h3,
 +
    .printfooter,
 +
    .firstHeading,
 +
    .visualClear {
 +
        display: none;
 +
        box-sizing: content-box;
 +
    }
 +
   
 +
    #sideMenu,
 +
    #top_title {
 +
        display: none;
 +
        box-sizing: content-box;
 +
    }
 +
   
 +
    #sideMenu .mainMenu_toggle,
 +
    #sideMenu .mainMenu_Title,
 +
    #sideMenu .sideMenuTitle,
 +
    #sideMenu .expand_subMenus {
 +
        box-sizing: content-box;
 +
    }
 +
   
 +
    #bodyContent h1,
 +
    #bodyContent h2,
 +
    #bodyContent h3,
 +
    #bodyContent h4,
 +
    #bodyContent h5 {
 +
        margin-bottom: 0px;
 +
    }
 +
   
 +
    #search_text {
 +
        color: #000;
 +
    }
 +
   
 +
    #globalWrapper,
 +
    #content {
 +
        position: absolute;
 +
        left: 0;
 +
        right: 0;
 +
        top: 0;
 +
        width: 100%;
 +
        height: 100%;
 +
        border: 0px;
 +
        background-color: transparent;
 +
        margin: 0px;
 +
        padding: 0px;
 +
    }
 +
   
 +
    @media (min-width: 1200px) {
 +
        .container-fluid .container {
 +
            width: 969px;
 +
            /* margin-left: 300px; */
 +
        }
 +
        .head-container {
 +
            width: 1170px;
 +
        }
 +
    }
 +
    /* article */
 +
   
 +
    .text-content article p {
 +
        text-indent: 20px;
 +
        margin: 10px 0;
 +
        font-size: 15px;
 +
        line-height: 24px;
 +
    }
 +
   
 +
    .text-content article img {
 +
        width: 80%;
 +
        padding-left: 20%;
 +
        /* margin-left: 20%; */
 +
    }
 +
    /*    .mw-content-ltr ol{
 +
        margin:0;
 +
    } */
 +
   
 +
    ol.carousel-indicators {
 +
        position: absolute;
 +
        bottom: 10px;
 +
        left: 50%;
 +
        z-index: 15;
 +
        width: 60%;
 +
        padding-left: 0;
 +
        margin-left: -30%;
 +
        text-align: center;
 +
        list-style: none;
 +
    }
  
−
<div class="column full_size judges-will-not-evaluate">
+
       
−
<h3>★  ALERT! </h3>
+
        @charset "utf-8";
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2017.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2017.igem.org/Judging/Awards"> award listed above</a>. </p>
+
    body {
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2017.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
        font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
−
</div>
+
        color: #666;
−
<div class="clear"></div>
+
        width:100%;
 +
    }
 +
    .logo {
 +
        padding:0;
 +
    }
  
−
<div class="column full_size">
+
    #myCarousel {
−
<h1>InterLab</h1>
+
        margin: 50px 0 0 0;
−
<h3>Bronze Medal Criterion #4</h3>
+
    }
−
<p><b>Standard Tracks:</b> Participate in the Interlab Measurement Study and/or improve the characterization of an existing BioBrick Part or Device and enter this information on that part's Main Page in the Registry. The part that you are characterizing must NOT be from a 2017 part number range.
+
    #navbar-collapse ul {
−
<br><br>
+
        margin-top:0;
−
For teams participating in the <a href="https://2017.igem.org/Competition/InterLab_Study">InterLab study</a>, all work must be shown on this page.  
+
    }
 +
    .carousel-inner img {
 +
        margin: 0 auto;
 +
    }
 +
    /*.carousel-control {
 +
        font-size: 100px;
 +
    }*/
 +
    .tab-h1 {
 +
        width:100%;
 +
        font-size: 30px;
 +
        text-align: center;
 +
        letter-spacing: 1px;
 +
        color: #ffffff;
 +
        background-color:#97477c;
 +
        padding: 30px;
 +
        margin: 0;
 +
    }
  
−
</p>
+
    .tab-p {
−
</div>
+
        font-size: 20px;
 +
        text-align: center;
 +
        letter-spacing: 1px;
 +
        color: #999;
 +
        margin: 20px 0 40px 0;
 +
    }
  
 +
    .container-fluid{
 +
        width:100%;
 +
    }
  
 +
    .tab1 {
 +
        width:100%;
 +
        margin: 0 0;
 +
        color: #666;
 +
        background:#333;
 +
    }
  
 +
    .tab1 .text-muted {
 +
        color: #999;
 +
        text-decoration: line-through;
 +
    }
 +
    .tab1 .media-heading {
 +
        margin: 5px 0 20px 0;
 +
    }
 +
    .tab1 .col {
 +
        padding: 20px;
 +
    }
 +
    .tab2 {
 +
        background-color: #eee;
 +
        padding: 60px 20px;
 +
        text-align: center;
 +
    }
 +
    .tab2 img {
 +
        width: 40%;
 +
        height: 40%;
 +
    }
 +
    .tab3 {
 +
        padding: 60px 20px;
 +
        text-align: center;
 +
    }
 +
    .tab3 img {
 +
        width: 65%;
 +
        height: 65%;
 +
    }
  
 +
    .tab4 {
 +
        background-color: #eee;
 +
        padding: 60px 20px;
 +
        text-align: center;
 +
    }
 +
    .tab4 img {
 +
        width: 65%;
 +
        height: 65%;
 +
    }
  
 +
    .text h3 {
 +
        font-size: 20px;
 +
        color:#0c0047;
 +
    }
  
 +
    .text span{
 +
        color: #97477c;
 +
    }
 +
    .text p {
 +
        font-size: 14px;
 +
    }
 +
    #footer {
 +
        background-color: #eee;
 +
        border-top: 1px solid #ccc;
 +
        padding: 20px;
 +
        text-align: center;
 +
    }
 +
    /*没有小于768px，是因为Bootstrap3以移动端优先设计*/
 +
 +
    /* 小屏幕（平板，大于等于768px） */
 +
    @media (min-width: 768px) {
 +
        .tab-h1 {
 +
            font-size: 26px;
 +
        }
 +
        .tab-p {
 +
            font-size: 16px;
 +
        }
 +
        .text h3 {
 +
            font-size: 22px;
 +
        }
 +
        .text p {
 +
            font-size: 15px;
 +
            text-indent: 30px;
 +
        }
 +
        .tab2-text {
 +
            float: left;
 +
        }
 +
        .tab2-img {
 +
            float: right;
 +
        }
 +
    }
 +
 +
    /* 中等屏幕（桌面显示器，大于等于992px） */
 +
    @media (min-width: 992px) {
 +
        .tab-h1 {
 +
            font-size: 28px;
 +
        }
 +
        .tab-p {
 +
            font-size: 17px;
 +
        }
 +
        .text h3 {
 +
            font-size: 24px;
 +
        }
 +
        .text p {
 +
            font-size: 16px;
 +
        }
 +
    }
 +
 +
    /* 大屏幕（大桌面显示器，大于等于1200px） */
 +
    @media (min-width: 1200px) {
 +
        .tab-h1 {
 +
            font-size: 30px;
 +
        }
 +
        .tab-p {
 +
            font-size: 18px;
 +
        }
 +
        .text h3 {
 +
            font-size: 26px;
 +
        }
 +
        .text p {
 +
            font-size: 18px;
 +
        }
 +
    }
 +
       
 +
 +
    body {
 +
            position: relative;
 +
        }
 +
        ul.nav-pills {
 +
            top: 20px;
 +
            position: fixed;
 +
        }
 +
        div.col-sm-9 div {
 +
            height: 250px;
 +
            font-size: 28px;
 +
        }
 +
        #section1 {color: #fff; background-color: #1E88E5;}
 +
        #section2 {color: #fff; background-color: #673ab7;}
 +
        #section3 {color: #fff; background-color: #ff9800;}
 +
        #section41 {color: #fff; background-color: #00bcd4;}
 +
        #section42 {color: #fff; background-color: #009688;}
 +
 +
        @media screen and (max-width: 810px) {
 +
            #section1, #section2, #section3, #section41, #section42  {
 +
                margin-left: 150px;
 +
            }
 +
        }
 +
 +
    </style>
 +
</head>
 +
 +
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
 +
      <nav class="navbar navbar-default navbar-fixed-top" style="margin-top:15px">
 +
        <div class="container">
 +
 +
            <div class="navbar-header">
 +
                <a href="https://2017.igem.org/Team:HUST-China" class="navbar-brand logo"><img src="https://static.igem.org/mediawiki/2017/6/64/Team_HUST_China_2017_logo.png" alt="HUST_iGEM_2017_logo"></a>
 +
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
 +
                    <span class="glyphicon glyphicon-list"></span>
 +
                </button>
 +
            </div>
 +
 +
 +
            <div class="collapse navbar-collapse" id="navbar-collapse">
 +
                <ul class="nav navbar-nav navbar-right">
 +
 +
 +
 +
                    <li class="active"><a href="https://2017.igem.org/Team:HUST-China">HOME</a></li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 +
                            PROJECT <b class="caret"></b>
 +
                        </a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/project/background">Background</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Description">Description</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Proof">Proof of concept</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Demonstrate">Application</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/project/inprovement">Previous improvement</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Safety">Safety</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 +
                            WETLAB <b class="caret"></b>
 +
                        </a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Experiments">Experiments</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Results">Results</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/InterLab">Interlab</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Notebook">Notebook</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/wetlab/protocols">Protocols</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 +
                            MODELING <b class="caret"></b>
 +
                        </a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Model">Overview</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Model/model-pro">Prokaryotic circuit</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Model/model-euk">Eukaryotic circuit</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Model/model-app">Application circuit</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 +
                            PARTS <b class="caret"></b>
 +
                        </a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Parts">Summary</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Basic_Part">Basic part</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Composite_Part">Composite part</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Part_Collection">Part Collection</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 +
                            HUMAN PRACTICES <b class="caret"></b>
 +
                        </a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Integrated_Practices">Integrated HP</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Collaborations">Collaborations</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 +
                            TEAM <b class="caret"></b>
 +
                        </a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Team">Team Roster</a></li>
 +
                            <li><a href="https://2017.igem.org/Team:HUST-China/Attributions">Attributions</a></li>
 +
                        </ul>
 +
                    </li>
 +
 +
 +
                </ul> 
 +
            </div>
 +
        </div>
 +
    </nav>
 +
 +
 +
    <div class="tab1" style="width:100%;margin-top: 65px;">
 +
            <h1 class="tab-h1" ><strong>「Interlab」</strong></h1>
 +
    </div>
 +
 +
    <div class="container">
 +
        <div class="row">
 +
            <nav class="col-sm-3" id="myScrollspy">
 +
                <div class="container-fluid">
 +
                <div class="container-fluid">
 +
                <ul class="nav nav-pills nav-stacked">
 +
                    <li class="active"><a href="#section1">Section 1</a></li>
 +
                    <li><a href="#section2">Section 2</a></li>
 +
                    <li><a href="#section3">Section 3</a></li>
 +
                    <li class="dropdown">
 +
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="#section41">Section 4-1</a></li>
 +
                            <li><a href="#section42">Section 4-2</a></li>                   
 +
                        </ul>
 +
                    </li>
 +
                </ul>
 +
                </div> 
 +
                </div>     
 +
            </nav>
 +
            <div class="col-sm-9">
 +
                <div id="section1">   
 +
                    <h1>Section 1</h1>
 +
                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
                </div>
 +
                <div id="section2">
 +
                    <h1>Section 2</h1>
 +
                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
                </div>       
 +
                <div id="section3">       
 +
                    <h1>Section 3</h1>
 +
                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
                </div>
 +
                <div id="section41">       
 +
                    <h1>Section 4-1</h1>
 +
                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
                </div>     
 +
                <div id="section42">       
 +
                    <h1>Section 4-2</h1>
 +
                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
 +
   
 +
 +
    <footer id="footer">
 +
        <div class="container">
 +
            <p>1.Binnemans K, Jones P T, Blanpain B, et al. Recycling of rare earths: a critical review[J]. Journal of Cleaner Production, 2013, 51(14):1–22.</p>
 +
            <p>2.Bradsher, Keith (October 29, 2010). "After China's Rare Earth Embargo, a New Calculus". The New York Times. Retrieved October 30, 2010.</p>
 +
        </div>
 +
    </footer>
 +
   
 +
    <!--
 +
 +
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
 +
    <script src="js/bootstrap.min.js"></script>
 +
    -->
 +
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 +
    <!--
 +
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 +
    -->
 +
    <script type="text/javascript">
 +
    $(function () {
 +
 +
        //轮播自动播放
 +
        $('#myCarousel').carousel({
 +
            //自动4秒播放
 +
            interval : 3000,
 +
        });
 +
 +
        // //设置垂直居中
 +
        // $('.carousel-control').css('line-height', $('.carousel-inner img').height() + 'px');
 +
        // $(window).resize(function () {
 +
        //  var $height = $('.carousel-inner img').eq(0).height() ||
 +
        //                $('.carousel-inner img').eq(1).height() ||
 +
        //                $('.carousel-inner img').eq(2).height();
 +
        //  $('.carousel-control').css('line-height', $height + 'px');
 +
        // });
 +
 +
        //设置文字垂直居中
 +
        $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px');
 +
        $(window).resize(function () {
 +
            $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px');
 +
        });
 +
 +
        $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px');
 +
        $(window).resize(function () {
 +
            $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px');
 +
        });
 +
 +
        $('.text').eq(2).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px');
 +
        $(window).resize(function () {
 +
            $('.text').eq(2).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px');
 +
        });
 +
 +
    });
 +
    </script>
 +
</body>
  
 
</html>
 
</html>

Revision as of 11:01, 14 October 2017

Interlab

「Interlab」

Section 1

Try to scroll this section and look at the navigation list while scrolling!

Section 2

Try to scroll this section and look at the navigation list while scrolling!

Section 3

Try to scroll this section and look at the navigation list while scrolling!

Section 4-1

Try to scroll this section and look at the navigation list while scrolling!

Section 4-2

Try to scroll this section and look at the navigation list while scrolling!

1.Binnemans K, Jones P T, Blanpain B, et al. Recycling of rare earths: a critical review[J]. Journal of Cleaner Production, 2013, 51(14):1–22.

2.Bradsher, Keith (October 29, 2010). "After China's Rare Earth Embargo, a New Calculus". The New York Times. Retrieved October 30, 2010.