Difference between revisions of "Template:SCUT-FSE-CHINA"

Line 1: Line 1:
 
<html>
 
<html>
    <link rel="stylesheet" href="https://2017.igem.org/Template:SCUT-FSE-CHINA/Style/Bootstrap?action=raw&ctype=text/css" />
+
<!--###############TEMPLATE FOOTER START##################-->
    <link rel="stylesheet" href="https://2017.igem.org/Template:SCUT-FSE-CHINA/Style/Swiper?action=raw&ctype=text/css" />
+
<style>
    <script src="https://2017.igem.org/Template:SCUT-FSE-CHINA/Javascript/JQuery21?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
     .footer {
     <script src="https://2017.igem.org/Template:SCUT-FSE-CHINA/Javascript/BootstrapJs?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
        margin: auto 20%;
    <script type="text/x-mathjax-config">
+
        text-align: center;
         MathJax.Hub.Config({
+
         color: #555;
            tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
+
     }
        });
+
     </script>
+
    <script src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
+
    <script src="https://2017.igem.org/Template:SCUT-FSE-CHINA/Javascript/Swiper?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
  
     <style>
+
     .footer b {
    @font-face {
+
         font-weight: 700;
         font-family: 'Glyphicons Halflings';
+
        src: url('https://static.igem.org/mediawiki/2017/2/2a/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.eot');
+
        src: url('https://static.igem.org/mediawiki/2017/2/2a/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.eot?#iefix]]') format('embedded-opentype'), url('https://static.igem.org/mediawiki/2017/6/61/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.woff') format('woff'), url('https://static.igem.org/mediawiki/2017/a/a8/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.ttf') format('truetype'), url('https://static.igem.org/mediawiki/2017/d/dc/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+
 
     }
 
     }
        /* Clear wiki style */
+
</style>
 
+
<hr style="width: 50%; margin-left: 25%; margin-top: 50px; height: 0; border-top: 1px solid #ccc;" />
        li {
+
<div class="footer">
            margin-bottom: 0;
+
     <div class="col-md-6">
        }
+
         <span class="glyphicon glyphicon-home" aria-hidden="true"></span><br>
 
+
        <p style="font-size: small; text-align: center;">
        ul, ol {
+
             Lab of Applied Biocatalysis,<br>
            font-size: 12px;
+
             College of Food Sciences and Engineering,<br>
            line-height: 1.5em;
+
             South China University of Technology,<br>
        }
+
             Guangzhou 510640,<br>
 
+
             Guangdong,<br>
        .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
+
             Peoples R China
            margin: auto;
+
         </p>
            padding: 0;
+
        }
+
 
+
        a:active, a:focus, a:visited, a:hover {
+
            text-decoration: none;
+
            text-decoration-line: none;
+
        }
+
 
+
        #top_menu_inside {
+
            display: block;
+
            position: relative;
+
            width: 960px;
+
            height: 100%;
+
            margin: 0px auto;
+
            padding: 0 10px;
+
            border-left: 1px solid #c8c8c8;
+
            border-right: 1px solid #c8c8c8;
+
            font-family: 'arial',sans-serif;
+
            font-size: 12px;
+
            font-weight: 400;
+
            color: #ffffff;
+
            line-height: normal;
+
        }
+
 
+
        #content {
+
            padding: 0;
+
            margin: 0;
+
            width: 100%;
+
            position: relative;
+
            background-color: initial;
+
        }
+
 
+
        #top_title, #sideMenu {
+
            display: none;
+
        }
+
       
+
        a:visited {
+
            color: #337ab7;
+
        }
+
 
+
        /***************************/
+
       
+
        .navbar-tmc {
+
            background-color: #f9edbd;
+
            border-color: unset;
+
        }
+
       
+
        body {
+
            background-image: url(https://static.igem.org/mediawiki/2017/3/3b/T--SCUT-FSE-CHINA--bg.jpg);
+
            background-color: #f9edbd;
+
            margin-top: 50px;
+
        }
+
 
+
        h1, h2, h3, h4 {
+
            font-weight: 800;
+
            margin-top: 40px;
+
            font-family: 'Franklin Gothic Demi', 'Franklin Gothic Book', 'Raleway', 'Roboto', sans-serif;
+
            color: #566474;
+
        }
+
 
+
        h2 {
+
            font-weight: 500;
+
            font-size: 2.5em;
+
            text-align: center;
+
            font-family: 'Century Gothic Regular', 'Franklin Gothic Demi', 'Franklin Gothic Book', 'Raleway', sans-serif;
+
            color: #566474;;
+
        }
+
        h2::before, h2::after {
+
            content: ' —— ';
+
            letter-spacing: -1px;
+
        }
+
       
+
        b {
+
            font-weight: 500;
+
        }
+
 
+
        h1 {
+
            font-family: 'Century Gothic Regular';
+
            position: relative;
+
            margin-left: -5.5%;
+
            margin-right: -5.5%;
+
            padding: 0;
+
            height: 450px;
+
            line-height: 450px;
+
            text-align: center;
+
            margin-top: 0;
+
            margin-bottom: 0;
+
        }
+
        h1>span {
+
            font-family: 'Century Gothic Regular', 'Franklin Gothic Demi', 'Franklin Gothic Book', 'Raleway', sans-serif;
+
            font-weight: 500;
+
            background-color: #566474;
+
            color: #fff;
+
            padding: 2% 5%;
+
            position: relative;
+
            z-index: 2;
+
            font-size: larger;
+
        }
+
        h1::after {
+
            content: '';
+
            background-image: url(https://static.igem.org/mediawiki/2017/thumb/6/6a/T--SCUT-FSE-CHINA--page-title.png/800px-T--SCUT-FSE-CHINA--page-title.png);
+
            height: 100%;
+
            position: absolute;
+
            width: 100%;
+
            left: 0;
+
            background-repeat: no-repeat;
+
            background-size: contain;
+
            background-position: center;
+
            z-index: 1;
+
        }
+
 
+
        #HQ_page p, p, b, .container-fluid i, span.img-exp, .text-content {
+
            font-size: 1em;
+
            line-height: 1.5em;
+
            text-indent: 0em;
+
            font-family: 'Franklin Gothic Book', 'Franklin Gothic Demi', 'Raleway', 'Roboto', sans-serif;
+
            display: inline-block;
+
            color: #566474;
+
        }
+
 
+
        ul {
+
            list-style: none;
+
        }
+
 
+
        .container-fluid li {
+
            color: #566474;
+
        }
+
 
+
        .icon-bar {
+
            background: black;
+
        }
+
 
+
        .navbar-nav>li>a {
+
            color: #804040;
+
            font-weight: 600;
+
            font-size: 1.3em;
+
        }
+
 
+
        .navbar-brand {
+
            color: #804040;
+
            float: right;
+
        }
+
 
+
        .nav>li>a:hover, .nav>li>a:focus, .nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
+
            background-color: #feeee0;
+
        }
+
 
+
        .navbar {
+
            border: solid 2px #b38c8c;
+
            border-left: none;
+
            border-right: none;
+
        }
+
 
+
        .navbar, .navbar-header {
+
            height: 54px;
+
        }
+
 
+
        #nav-body {
+
            position: absolute;
+
            right: 10%;
+
            z-index: 500;
+
        }
+
        .nav-img {
+
            height: 200px;
+
            margin-top: -73px;
+
        }
+
 
+
        .dropdown-menu {
+
            transition: all 0.3s;
+
            background-color: #fffff8;
+
        }
+
 
+
        .dropdown-menu>li>a {
+
            font-weight: 600;
+
            font-size: 1.1em;
+
            line-height: 30px;
+
        }
+
 
+
        .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
+
            background-color: #ffeedf;
+
        }
+
 
+
        .center {
+
            text-align: center;
+
        }
+
 
+
        .main-content {
+
            padding: 2% 20%;
+
        }
+
 
+
        #nav-div {
+
            position: fixed;
+
            width: 100%;
+
            z-index: 1000;
+
        }
+
 
+
        #nav-div::before {
+
            content: "";
+
            width: 100%;
+
            top: 14px;
+
            position: fixed;
+
            height: 100px;
+
            background-color: #f9edbd;
+
        }
+
 
+
        .img-exp {
+
            text-align: left;
+
            float: left;
+
            margin-bottom: 1em;
+
            font-size: smaller;
+
        }
+
 
+
        .img-exp.no-float {
+
            float: none;
+
            text-align: unset;
+
        }
+
 
+
        .main-content .container-fluid {
+
            background-color: #fae5ab;
+
            padding-left: 5%;
+
            padding-right: 5%;
+
            padding-bottom: 10%;
+
            padding-top: 0%;
+
        }
+
 
+
        @media (max-width: 1420px) {
+
            #nav-body {
+
                right: 5%;
+
            }
+
 
+
            .nav-img {
+
                height: 100px;
+
                margin-top: -23px;
+
            }
+
 
+
            .navbar-nav>li>a {
+
                font-size: 1.1em;
+
            }
+
 
+
            body {
+
                margin-top: 0;
+
            }
+
 
+
            #nav-div::before {
+
                height: 50px;
+
            }
+
        }
+
 
+
        @media (min-width: 768px) and (max-width: 1070px) {
+
            .nav-img {
+
                display: none;
+
            }
+
        }
+
 
+
        @media (max-width: 768px) {
+
            body {
+
                margin-top: 0;
+
            }
+
 
+
            #nav-body {
+
                position: relative;
+
                background-color: #f9edbd;
+
            }
+
        }
+
 
+
        .bd {
+
            font-weight: 800;
+
            color: #566474;
+
        }
+
    </style>
+
    <script>
+
        function animate(e) {
+
            $(e).css("opacity", 0);
+
            window.setTimeout(function () {
+
                $(e).css("opacity", 1);
+
            }, 50);
+
        }
+
        $(document).on("ready", function () {
+
            $(".dropdown-toggle").on("click", function (e) {
+
                animate($(e.target).next());
+
            });
+
            $(".dropdown-toggle").on("mouseenter", function (e) {
+
                window.setTimeout(function () {
+
                    var el = $(e.target).next();
+
                    if (el.css("display") != "none")
+
                        return;
+
                    $(e.target).click();
+
                }, 50);
+
            });
+
            $(".navbar-nav>li").on("mouseenter", function (e) {
+
                $("body").click();
+
                $(".dropdown-toggle").blur();
+
            });
+
        });
+
 
+
        function jumpTo(el, time)
+
        {
+
            $('html body').animate({scrollTop: $(el).offset().top}, time);
+
        }
+
    </script>
+
    <div id="nav-div">
+
     <nav class="navbar navbar-tmc container-fluid">
+
        <div class="row">
+
        <div class="navbar-header col-md-3">
+
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-body" aria-expanded="false">
+
                <span class="sr-only">Toggle navigation</span>
+
                <span class="icon-bar"></span>
+
                <span class="icon-bar"></span>
+
                <span class="icon-bar"></span>
+
            </button>
+
            <img class="nav-img" src="https://static.igem.org/mediawiki/2017/9/9f/T--SCUT-FSE-CHINA--title.png" />
+
         </div>
+
        <div class="collapse navbar-collapse col-md-8" id="nav-body">
+
        <ul class="nav navbar-nav">
+
            <li><a href="/Team:SCUT-FSE-CHINA">HOME</a></li>
+
            <li class="dropdown">
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECT <span class="caret"></span></a>
+
                <ul class="dropdown-menu">
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Description">Description</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Description#bg">|&nbsp;&nbsp;Background</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Description#design">|&nbsp;&nbsp;Design</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Construction">Construction</a></li>
+
                </ul>
+
            </li>
+
            <li class="dropdown">
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">RESULTS<span class="caret"></span></a>
+
                <ul class="dropdown-menu">
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Results#">|&nbsp;&nbsp;N&amp;P Pathways</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Results#crispr">|&nbsp;&nbsp;CRISPR/Cas9</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Results#rbsys">|&nbsp;&nbsp;Robust System</a></li>
+
                </ul>
+
            </li>
+
            <li class="dropdown">
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MODELING<span class="caret"></span></a>
+
                <ul class="dropdown-menu">
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Model#">|&nbsp;&nbsp;Growth Model</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Model#metabolic">|&nbsp;&nbsp;Metabolic Model</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Model#scaleup">|&nbsp;&nbsp;Scale Up</a></li>
+
                </ul>
+
             </li>
+
             <li class="dropdown">
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">HUMAN PRACTICE<span class="caret"></span></a>
+
                <ul class="dropdown-menu">
+
                    <li><a href="/Team:SCUT-FSE-CHINA/HP/Silver">Silver</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/HP/Gold_Integrated">Gold</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Collaborations">Collaboration</a></li>
+
                </ul>
+
             </li>
+
             <li><a href="/Team:SCUT-FSE-CHINA/InterLab">INTERLAB</a></li>
+
             <li class="dropdown">
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TEAM<span class="caret"></span></a>
+
                <ul class="dropdown-menu">
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Team">Team</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Attributions">Attributions</a></li>
+
                </ul>
+
             </li>
+
            <li><a href="/Team:SCUT-FSE-CHINA/Parts">PARTS</a></li>
+
            <li class="dropdown">
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">LAB<span class="caret"></span></a>
+
                <ul class="dropdown-menu">
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Notes">Lab Notes</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Protocol">Protocol</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Safety">Safety</a></li>
+
                </ul>
+
            </li>
+
            <li class="dropdown">
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MEDAL<span class="caret"></span></a>
+
                <ul class="dropdown-menu">
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Medal#">|&nbsp;&nbsp;Bronze Criteria</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Medal#silver">|&nbsp;&nbsp;Silver Criteria</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Medal#gold">|&nbsp;&nbsp;Gold Criteria</a></li>
+
                </ul>
+
            </li>
+
         </ul>
+
        </div>
+
        </div>
+
    </nav>
+
 
     </div>
 
     </div>
     <div class="main-content">
+
     <div class="col-md-6">
 
+
        <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><br>
     <!--########################TEMPLATE TOP END##############################-->
+
        <p style="font-size: small; text-align: center;">
 +
            <b>PI. Lou wenyong</b><br>
 +
            wylou@scut.edu.cn<br>
 +
            <b>Members. Email:</b><br>
 +
            lihuixianscut@126.com<br>
 +
            xjialiu5211@163.com
 +
        </p>
 +
     </div>
 +
    <p style="font-size: small;">If you are interested to our project, welcome to contact us.</p>
 +
</div>
 +
<!--################TEMPLATE FOOTER END################-->
 +
</html>

Revision as of 14:05, 1 November 2017