Difference between revisions of "Team:JiangnanU China"

Line 1: Line 1:
 
{{:Team:JiangnanU_China/Header}}
 
{{:Team:JiangnanU_China/Header}}
−
<html lang="en">
+
<html>
 
<head>
 
<head>
−
     <meta charset="UTF-8">
+
     <meta charset="utf-8" />
 +
    <title>JiangNan</title>
 +
    <meta name="description" content="An iGEM project" />
 +
    <meta name="author" content="Yifan Liu" />
 +
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 +
 
 +
    <!-- FONT -->
 +
    <link href="http://fonts.googleapis.com/css?family=Comfortaa|Lato|Raleway:400,300,600" rel="stylesheet" type="text/css" />
 +
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 +
 
 +
    <!-- CSS -->
 +
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 +
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
 +
    <link rel="stylesheet" href="https://2019.igem.org/Team:JiangnanU_China/css/custom?action=raw&ctype=text/css" />
 +
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
 +
 
 +
    <!-- JS -->
 +
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 +
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
    <script src="https://use.fontawesome.com/b31c04f526.js"></script>
 +
 
 +
    <!-- KATEX -->
 +
    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha384-/y1Nn9+QQAipbNQWU65krzJralCnuOasHncUFXGkdwntGeSvQicrYkiUBwsgUqc1" crossorigin="anonymous"></script>
 +
    <script src="https://2017.igem.org/Team:TUDelft/js/auto-render?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
    <script>
 +
        document.addEventListener("DOMContentLoaded", function() {
 +
            renderMathInElement(document.body, {
 +
                delimiters: [{
 +
                    left: "$$",
 +
                    right: "$$",
 +
                    display: true
 +
                },
 +
                    {
 +
                        left: "\\[",
 +
                        right: "\\]",
 +
                        display: true
 +
                    },
 +
                    {
 +
                        left: "$",
 +
                        right: "$",
 +
                        display: false
 +
                    },
 +
                    {
 +
                        left: "\\(",
 +
                        right: "\\)",
 +
                        display: false
 +
                    }
 +
                ],
 +
                throwOnError: false,
 +
                macros: {
 +
                    '\\tag': '\\pod\\text'
 +
                }
 +
            });
 +
            var eqno = document.querySelectorAll(".katex span > span.mspace.quad");
 +
            for (var i = 0; i < eqno.length; ++i) {
 +
                if (eqno[i].parentNode.className)
 +
                    continue;
 +
                var quad = eqno[i];
 +
                var span = quad.parentNode;
 +
                var text = span.nextSibling;
 +
                var pare = text.nextSibling;
 +
                span.removeChild(quad);
 +
                span.appendChild(text);
 +
                span.appendChild(pare);
 +
                span.className = 'eqno';
 +
            }
 +
        });
 +
    </script>
 +
 
 +
    <!-- 标题栏logo -->
 +
    <link rel="icon" type="image/jpg" href="https://static.igem.org/mediawiki/2019/3/34/T--JiangnanU_China--Logo-Web_version.jpg" />
 +
 
 
     <style>
 
     <style>
−
         #first {
+
         @media screen and (min-width: 768px){
−
            background-image: url('https://static.igem.org/mediawiki/2019/c/c2/T--JiangnanU_China--host_bg.png');
+
             CSS
−
             background-size: cover;
+
−
            background-position: center;
+
−
            background-repeat: no-repeat;
+
 
         }
 
         }
−
 
+
        /*总背景*/
−
         .box {
+
         #custom-nav {
−
             height: 100vh;
+
             background-color: rgba(0, 19, 86,1);
−
             display: flex;
+
             border: 0;
−
             flex-direction: column;
+
             box-shadow: none;
−
             justify-content: center;
+
             z-index: 999;
−
             align-items: center;
+
             -webkit-transition: background .5s ease-in-out, opacity .5s ease;
−
             /*margin-top: -100px;*/
+
             -moz-transition: background .5s ease-in-out, opacity .5s ease;
−
             position: relative;
+
             transition: background .5s ease-in-out, opacity .5s ease;
 +
            margin-right: -15px;
 
         }
 
         }
−
 
+
         /*二级菜单*/
−
         /*跳转按钮*/
+
         #custom-nav .dropdown-menu {
−
         .rdmrbttn img {
+
             float: right;
−
             width: 10%;
+
            border-radius: 0;
−
             height: auto;
+
            border: none;
 +
            border-top: 5px solid transparent;
 +
            background-color: rgba(0,19,86,1);
 +
            -webkit-box-shadow: none;
 +
            box-shadow: none;
 +
             padding-top: 0;
 
         }
 
         }
−
 
+
         #custom-nav .dropdown-menu a{
−
         .rdmrbttn {
+
             color: white;
−
             position: absolute;
+
−
            top: 88%;
+
−
            left: 20%;
+
 
         }
 
         }
−
 
+
         #custom-nav .dropdown-menu a:hover{
−
        /*缩略图*/
+
             background: rgb(0, 178, 255);
−
         .thumbnail img {
+
−
             opacity: 0.7;
+
 
         }
 
         }
−
 
+
         #custom-nav .container {
−
         .thumbnail:hover {
+
            padding-top: 25px;
−
             -webkit-transform: scale(1.05);
+
            padding-bottom: 25px;
−
             -ms-transform: scale(1.05);
+
             -webkit-transition: padding-top .5s ease, padding-bottom .5s ease;
−
             transform: scale(1.05);
+
             -moz-transition: padding-top .5s ease, padding-bottom .5s ease;
 +
             transition: padding-top .5s ease, padding-top .5s ease, padding-bottom .5s ease;
 
         }
 
         }
−
 
+
         #custom-nav.affix {
−
         .thumbnail:hover img {
+
             top: 0;
−
             opacity: 1;
+
            min-width: 100%;
 +
            background-color: rgba(0,19,86,0.7);
 +
            /* opacity: 0.9; */
 +
            -webkit-transition: background .5s ease-in-out, opacity .5s ease;
 +
            -moz-transition: background .5s ease-in-out, opacity .5s ease;
 +
            transition: background .5s ease-in-out, opacity .5s ease;
 +
            margin-right: 15px;
 +
        }
 +
        @media screen and (max-width: 767px){
 +
            #wrapwrap {
 +
                padding-top: 50px;
 +
            }
 +
            .navbar-fixed-top {
 +
                z-index: 999;
 +
            }
 
         }
 
         }
  
−
         /*///////////////////////////////*/
+
         /* navbar
−
 
+
        .navbar-default {
−
         /*//////////////////*/
+
            background-color: #0092CB;
−
         .top {
+
            border-color: #E7E7E7;
−
             width: 30%;
+
        }*/
−
             height: auto;
+
        /* Title */
−
             position: absolute;
+
        .navbar-default .navbar-brand {
−
             top: 20%;
+
            color: #FFFFFF;
−
             left: 20%;
+
        }
 +
        .navbar-default .navbar-brand:hover,
 +
        .navbar-default .navbar-brand:focus {
 +
            color: #5E5E5E;
 +
        }
 +
         /* Link */
 +
        .navbar-default .navbar-nav > li > a {
 +
            color: #FFFFFF;
 +
        }
 +
        .navbar-default .navbar-nav > li > a:hover,
 +
        .navbar-default .navbar-nav > li > a:focus {
 +
            color: #555;
 +
        }
 +
        .navbar-default .navbar-nav > .active > a,
 +
        .navbar-default .navbar-nav > .active > a:hover,
 +
        .navbar-default .navbar-nav > .active > a:focus {
 +
            color: #555;
 +
            background-color: #E7E7E7;
 +
        }
 +
        .navbar-default .navbar-nav > .open > a,
 +
        .navbar-default .navbar-nav > .open > a:hover,
 +
        .navbar-default .navbar-nav > .open > a:focus {
 +
            color: #555;
 +
            background-color: rgba(0,19,86,1);
 +
        }
 +
        /* Caret */
 +
         .navbar-default .navbar-nav > .dropdown > a .caret {
 +
             border-top-color: #FFFFFF;
 +
             border-bottom-color: #FFFFFF;
 +
        }
 +
        .navbar-default .navbar-nav > .dropdown > a:hover .caret,
 +
        .navbar-default .navbar-nav > .dropdown > a:focus .caret {
 +
             border-top-color: #555;
 +
             border-bottom-color: #555;
 +
        }
 +
        .navbar-default .navbar-nav > .open > a .caret,
 +
        .navbar-default .navbar-nav > .open > a:hover .caret,
 +
        .navbar-default .navbar-nav > .open > a:focus .caret {
 +
            border-top-color: #555;
 +
             border-bottom-color: #555;
 +
        }
 +
        /* Mobile version */
 +
        .navbar-default .navbar-toggle {
 +
            border-color: #FFF;
 
         }
 
         }
  
−
         .dna {
+
         .navbar-default .navbar-toggle:hover,
−
            width: 30%;
+
        .navbar-default .navbar-toggle:focus {
−
            height: auto;
+
             background-color: #DDD;
−
             margin-right: 5%;
+
 
         }
 
         }
−
         .block{
+
         .navbar-default .navbar-toggle .icon-bar {
−
            width: 25%;
+
             background-color: #FFF;
−
            height: auto;
+
−
            display: flex;
+
−
            flex-direction: column;
+
−
            justify-content: center;
+
−
             align-content: center;
+
 
         }
 
         }
−
         .block img{
+
         @media (max-width: 767px) {
−
             width: 40%;
+
             .navbar-default .navbar-nav .open .dropdown-menu > li > a {
−
             height: auto;
+
                color: #FFFF;
 +
             }
 +
            .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
 +
            .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
 +
                color: white;
 +
            }
 
         }
 
         }
−
    </style>
 
−
</head>
 
−
<body style="margin: 0">
 
  
−
<header id="first" class="box">
+
/*/////////////////////////////////////////////////*/
  
−
    <img class="top" src="https://static.igem.org/mediawiki/2019/9/9c/T--JiangnanU_China--host_top_text.png" alt="">
+
        .chosen_bar{
−
    <div class="rdmrbttn"><a href="#second" class="thumbnail"><img style="width: 15%;height: auto"
+
            top: -10px;
−
                                                                  src="https://static.igem.org/mediawiki/2019/0/09/T--JiangnanU_China--host_liubianxing.png"></a>
+
            position: absolute;
−
    </div>
+
            width:100%;
 +
            height: 10px;
 +
        }
 +
        .adopeicon {
 +
            height: 40px;
 +
            width: auto;
 +
            margin: 10px;
 +
            padding-left: 10px;
 +
        }
  
−
</header>
+
    </style>
 +
    <script>
 +
        $(window).scroll(function() {
 +
            if ($(".navbar").offset().top > 50) {
 +
                $('#custom-nav').addClass('affix');
 +
                $(".navbar-fixed-top").addClass("top-nav-collapse");
 +
            } else {
 +
                $('#custom-nav').removeClass('affix');
 +
                $(".navbar-fixed-top").removeClass("top-nav-collapse");
 +
            }
 +
        });
 +
    </script>
  
−
<div id="second" class="box" style="flex-direction: row">
 
−
    <img class="dna" src="https://static.igem.org/mediawiki/2019/3/38/T--JiangnanU_China--host_circle.png" alt="">
 
−
    <p style="width: 40%;margin-left: 5%">What is ‘TOP’<br>
 
−
        Our aim is to construct a device which will increase the fermentation strains’ phage tolerance while
 
−
        wouldn’t have apparent effect on their growth.
 
−
        We want to develop an innovative methodology towards the prevention and control of phage infection in
 
−
        factories. And now we are devoted to studying the interaction mechanism between phages and bacteria. We
 
−
        firmly believe that this anti-phage biobrick can enhance the potential for open fermentation. [333333 Futura
 
−
        Medium 22pt 1.5倍行距]
 
−
    </p>
 
−
    <div class="rdmrbttn"><a href="#third" class="thumbnail"><img style="width: 15%;height: auto"
 
−
                                                                  src="https://static.igem.org/mediawiki/2019/b/bb/T--JiangnanU_China--host_next.png"></a>
 
−
    </div>
 
−
</div>
 
  
−
<div id="third" class="box" style="flex-direction: row">
+
</head>
 +
<body>
  
−
    <div class="block">
+
<header>
−
        <img src="https://static.igem.org/mediawiki/2019/2/24/T--JiangnanU_China--host_back.png"alt="">
+
−
    </div>
+
−
    <div class="block">
+
−
        <img src="https://static.igem.org/mediawiki/2019/2/24/T--JiangnanU_China--host_back.png"alt="">
+
−
    </div>
+
−
    <div class="block">
+
−
        <img src="https://static.igem.org/mediawiki/2019/2/24/T--JiangnanU_China--host_back.png"alt="">
+
−
    </div>
+
−
    <div class="rdmrbttn"><a href="#first" class="thumbnail"><img style="width: 15%;height: auto"
+
−
                                                                  src="https://static.igem.org/mediawiki/2019/2/24/T--JiangnanU_China--host_back.png"></a>
+
−
    </div>
+
−
</div>
+
  
 +
    <nav class="navbar navbar-default navbar-fixed-top" id="custom-nav" style="margin:15px;">
 +
        <div class="container-fluid">
 +
            <div class="navbar-header">
 +
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#adopenav" aria-expanded="false">
 +
                    <span class="sr-only"></span>
 +
                    <span class="icon-bar"></span>
 +
                    <span class="icon-bar"></span>
 +
                    <span class="icon-bar"></span>
 +
                </button>
 +
                <!-- 顶部栏logo -->
 +
                <a class="pull-left" href="https://2019.igem.org/Team:JiangnanU_China" style="color: white"><img class="adopeicon" src="https://static.igem.org/mediawiki/2019/3/34/T--JiangnanU_China--Logo-Web_version.jpg">JiangnanU_China</a>
 +
            </div>
 +
            <div class="collapse navbar-collapse" id="adopenav"  >
 +
                <ul class="nav navbar-nav">
 +
                    <!-- Project -->
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project</a>
 +
                        <ul class="dropdown-menu" >
 +
                            <li><img class="chosen_bar" src="https://static.igem.org/mediawiki/2019/3/31/T--JiangnanU_China--chosen_bar.jpg" alt="  "></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Description">Description</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Design">Design</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Results">Results</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Demonstrate">Demonstration</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <!-- Wetlab -->
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Wetlab</a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><img class="chosen_bar" src="https://static.igem.org/mediawiki/2019/3/31/T--JiangnanU_China--chosen_bar.jpg" alt="  "></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Experiments">Experiments (Protocols)</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Notebook">Notebook</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/InterLab">InterLab</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Safety">Safety</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Measurement">Measurement</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <!-- Parts -->
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Parts</a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><img class="chosen_bar" src="https://static.igem.org/mediawiki/2019/3/31/T--JiangnanU_China--chosen_bar.jpg" alt="  "></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Parts">Parts Overview</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Basic_Part">Basic Parts</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Composite_Parts">Composite Parts</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Part_Collection">Part Collection</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Primers">Sequences</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <!-- Modeling -->
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Modeling</a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><img class="chosen_bar" src="https://static.igem.org/mediawiki/2019/3/31/T--JiangnanU_China--chosen_bar.jpg" alt="  "></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Model">Model</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Software">Software Tool</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Improve">Improvement</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <!-- Human Practices -->
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Human Practices</a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><img class="chosen_bar" src="https://static.igem.org/mediawiki/2019/3/31/T--JiangnanU_China--chosen_bar.jpg" alt="  "></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Human_Practices">Integrated Human Practices</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Public_Engagement">Education and Engagement</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Entrepreneurship">Entrepreneurship</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Applied_Design">Applied Design</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <!-- EurAsian Meetup -->
 +
                    <li><a href="https://2019.igem.org/Team:JiangnanU_China/Meetup">Meetup</a></li>
 +
                    <!-- Team -->
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Team</a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><img class="chosen_bar" src="https://static.igem.org/mediawiki/2019/3/31/T--JiangnanU_China--chosen_bar.jpg" alt="  "></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Team">Team Members</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Collaborations">Collaborations</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Contributions">Contributions</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Team_Building">Team Building</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <!-- Acknowledgements -->
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Acknowledgements</a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><img class="chosen_bar" src="https://static.igem.org/mediawiki/2019/3/31/T--JiangnanU_China--chosen_bar.jpg" alt="  "></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Attributions">Attributions</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:JiangnanU_China/Sponsors">Sponsors</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <!-- awards -->
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-trophy"></i></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><img class="chosen_bar" src="https://static.igem.org/mediawiki/2019/3/31/T--JiangnanU_China--chosen_bar.jpg" alt="  "></li>
 +
                            <li><a href="https://igem.org/2019_Judging_Form?team=JiangnanU_China">Judging form</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:TUDelft/Medals">Medal Requirements</a></li>
 +
                            <li><a href="https://2019.igem.org/Team:TUDelft/Awards">Awards</a></li>
 +
                        </ul>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
        </div>
 +
    </nav>
 +
</header>
  
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 08:21, 29 September 2019

JiangNan

JiangNan