Difference between revisions of "Team:SJTU-BioX-Shanghai/home test"

(Blanked the page)
 
(20 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<html lang="en">
 
  
<head>
 
    <meta charset="utf-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <meta http-equiv="x-ua-compatible" content="ie=edge">
 
    <link href="https://2017.igem.org/Template:SJTU-BioX-Shanghai/CSS/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
 
    <link href="https://2017.igem.org/Template:SJTU-BioX-Shanghai/CSS/ripple?action=raw&ctype=text/css" rel="stylesheet">
 
    <link href="https://2017.igem.org/Template:SJTU-BioX-Shanghai/CSS/font-awesome?action=raw&ctype=text/css" rel="stylesheet">
 
    <link href="https://2017.igem.org/Template:SJTU-BioX-Shanghai/CSS/style?action=raw&ctype=text/css" rel="stylesheet">
 
    <!--[if lt IE 10]>
 
                    <center>您使用的是过时的浏览器,浏览本网页可能会有异常。</center>
 
                    <center>You are using an outdated browser and this page may not display properly.</center>
 
                <![endif]-->
 
    <style>
 
        .footer .footer-text {
 
            -webkit-transition: all 0.3s ease-in-out;
 
            -o-transition: all 0.3s ease-in-out;
 
            transition: all 0.3s ease-in-out;
 
            color: rgb(255, 255, 255);
 
        }
 
       
 
        .footer .footer-text:hover {
 
            background: rgba(0, 0, 0, 0.2);
 
        }
 
       
 
        .footer .footer-text {
 
            padding-bottom: 1.3rem;
 
        }
 
       
 
        .footer .footer-text div {
 
            font-size: 25px;
 
            padding-bottom: 3px;
 
        }
 
       
 
        @media only screen and (max-width: 576px) {
 
            .footer .footer-text div {
 
                font-size: 22px;
 
            }
 
        }
 
       
 
        .fluid-bg {
 
            background: white;
 
        }
 
       
 
        .full-home-1 {
 
            background-size: cover;
 
            width: 70%;
 
            height: 70%;
 
            position: relative;
 
            z-index: 1;
 
            background-position: center center;
 
            background-repeat: no-repeat;
 
        }
 
       
 
        .head-1 {
 
            text-align: center;
 
            color: rgb(183, 76, 91);
 
            font-weight: 400;
 
            padding: 1rem;
 
            font-family: "Gochi Hand";
 
        }
 
       
 
        .first-page {
 
            min-height: calc(100vh - 75px)
 
        }
 
       
 
        .head-2 {
 
            text-align: center;
 
            color: rgb(183, 76, 91);
 
            font-weight: 400;
 
            padding: 0.3rem;
 
            font-family: "Gochi Hand";
 
            line-height: 1.2em;
 
        }
 
       
 
        .mainphoto {
 
            width: 90%;
 
        }
 
       
 
        @media only screen and (min-width: 576px) {
 
            .mainphoto {
 
                width: 80%;
 
            }
 
        }
 
       
 
        @media only screen and (min-width: 768px) {
 
            .mainphoto {
 
                width: 60%;
 
            }
 
        }
 
       
 
        .vid {
 
            padding: 0 0 0 0;
 
        }
 
       
 
        .vid .msk {
 
            -webkit-transition: all 0.5s ease-in-out;
 
            -o-transition: all 0.5s ease-in-out;
 
            transition: all 0.5s ease-in-out;
 
            background: rgba(0, 0, 0, 0);
 
            color: transparent;
 
            position: absolute;
 
            top: 0;
 
            bottom: 0;
 
            left: 0;
 
            right: 0;
 
            z-index: 50;
 
        }
 
       
 
        .vid video {
 
            width: 100%;
 
            display: block;
 
        }
 
       
 
        .vid img {
 
            display: none;
 
        }
 
       
 
        @media only screen and (max-width: 768px) {
 
            .vid .msk {
 
                background: rgba(0, 0, 0, 0.25);
 
                color: white;
 
            }
 
            .vid video {
 
                display: none;
 
            }
 
            .vid img {
 
                display: block;
 
            }
 
        }
 
       
 
        #bg1-1 {
 
            display: block;
 
            padding-top:2rem;
 
        }
 
       
 
        #bg1-2 {
 
            display: none;
 
        }
 
       
 
        @media only screen and (max-width: 576px) {
 
            #bg1-1 {
 
                display: none;
 
            }
 
            #bg1-2 {
 
                display: block;
 
                padding-top:0rem;
 
            }
 
        }
 
       
 
        .vid .msk:hover {
 
            background: rgba(0, 0, 0, 0.4);
 
            color: white;
 
        }
 
 
a.lin:visited{
 
    color:rgb(183, 76, 91);
 
}
 
a.lin:hover{
 
    color:rgb(153, 46, 61);
 
}
 
 
a.lin{
 
    font-size:80%;
 
    color:rgb(203, 96, 111);
 
}
 
    </style>
 
</head>
 
 
<body>
 
    <div class="fluid-bg full-bg-body">
 
 
        <nav class="navbar navbar1 navbar-expand-lg navbar-dark">
 
            <div class="container">
 
                <a class="navbar-brand" href="https://2017.igem.org/Team:SJTU-BioX-Shanghai"><img src="https://static.igem.org/mediawiki/2017/b/be/T--SJTU-BioX-Shanghai--logo.png" height="55" /></a>
 
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
 
                                    <div class="hamburger" id="ham1">
 
                                        <span class="line"></span>
 
                                        <span class="line"></span>
 
                                        <span class="line"></span>
 
                                    </div>
 
                                </button>
 
                <div class="collapse navbar-collapse" id="navbarNav1">
 
                    <ul class="navbar-nav mr-auto">
 
                        <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Description" class="nav-link">Project</a></li>
 
                        <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Notebook" class="nav-link">Wet Lab</a></li>
 
                        <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Loader" class="nav-link">Device</a></li>
 
                        <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Model" class="nav-link">Model</a></li>
 
                        <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/HP" class="nav-link">Human Practice</a></li>
 
 
                        <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Team" class="nav-link">Team</a></li>
 
                    </ul>
 
                    <ul class="navbar-nav ml-auto">
 
                        <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/cn" class="nav-link jtzw">简体中文</a></li>
 
                    </ul>
 
                </div>
 
            </div>
 
        </nav>
 
        <div class="full-bg flex-center flex-column first-page">
 
            <img class="img-fluid mainphoto" id="bg1-1" src="https://static.igem.org/mediawiki/2017/5/56/T--SJTU-BioX-Shanghai--bg1.jpeg">
 
            <img class="img-fluid mainphoto" id="bg1-2" src="https://static.igem.org/mediawiki/2017/9/90/T--SJTU-BioX-Shanghai--bg1-m.jpeg">
 
            <div class="h1-my-responsive head-1">A universal multifactorial visualized detection system</div>
 
 
        </div>
 
        <div class="full-bg flex-center flex-column">
 
            <div class="container">
 
                <div class="row">
 
                    <div class="col-12 col-sm-6 flex-center flex-column order-2 order-sm-1">
 
                        <div class="h1-my-responsive head-1">Multiple Factor</div>
 
                        <div class="h3-my-responsive head-2">Detecting multiple input</div>
 
                        <div class="h3-my-responsive head-2">Just using one type of bacteria</div>
 
                        <div class="h3-my-responsive head-2"><a class="lin" target="_blank" href="https://2017.igem.org/Team:ECUST/HP/SJTU">more @Design</a></div>
 
                    </div>
 
                    <div class="col-12 col-sm-6 order-1 order-sm-2">
 
                        <img class="img-fluid" src="https://static.igem.org/mediawiki/2017/f/fe/T--SJTU-BioX-Shanghai--bg3.jpeg">
 
 
                    </div>
 
 
                </div>
 
            </div>
 
        </div>
 
 
        <div class="full-bg flex-center flex-column">
 
            <div class="container">
 
                <div class="row">
 
                    <div class="col-12 col-sm-6">
 
                        <img class="img-fluid" src="https://static.igem.org/mediawiki/2017/4/4b/T--SJTU-BioX-Shanghai--bg2.jpeg">
 
                    </div>
 
                    <div class="col-12 col-sm-6 flex-center flex-column">
 
                        <div class="h1-my-responsive head-1">Visualization</div>
 
                        <div class="h3-my-responsive head-2">Result can be seen by naked eyes</div>
 
                        <div class="h3-my-responsive head-2">Use smart phones to recognize and analyse the color</div>
 
                    </div>
 
                </div>
 
            </div>
 
        </div>
 
        <div class="full-bg flex-center flex-column">
 
            <div class="container">
 
                <div class="row">
 
 
                    <div class="col-12 col-sm-6 flex-center flex-column order-2 order-sm-1">
 
                        <div class="h1-my-responsive head-1">small C.A.T.</div>
 
                        <div class="h3-my-responsive head-2">Small chromoprotein analyse toolbox</div>
 
                        <div class="h3-my-responsive head-2">A detection system</div>
 
                        <div class="h3-my-responsive head-2">To reckon the value of input</div>
 
                    </div>
 
                    <div class="col-12 col-sm-6 order-1 order-sm-2">
 
                        <img class="img-fluid" src="https://static.igem.org/mediawiki/2017/8/85/T--SJTU-BioX-Shanghai--bg5.jpeg">
 
                    </div>
 
                </div>
 
            </div>
 
        </div>
 
        <div class="full-bg flex-center flex-column">
 
            <div class="container">
 
                <div class="row">
 
                    <div class="col-12 col-sm-6">
 
                        <img class="img-fluid" src="https://static.igem.org/mediawiki/2017/b/bc/T--SJTU-BioX-Shanghai--bg4.jpeg">
 
                    </div>
 
                    <div class="col-12 col-sm-6 flex-center flex-column">
 
                        <div class="h1-my-responsive head-1">S.T.A.R.</div>
 
                        <div class="h3-my-responsive head-2">Small Transcriptional-Activating RNA</div>
 
                        <div class="h3-my-responsive head-2">A new powerful technology</div>
 
                        <div class="h3-my-responsive head-2">Start to have powerful applications</div>
 
                    </div>
 
                </div>
 
            </div>
 
        </div>
 
        <div class="container sponsor">
 
            <div class="row">
 
                <div class="col-12 col-sm-6 col-lg-3 sponsor-1">
 
                    <a target="_blank" href="http://www.sjtu.edu.cn/">
 
                        <img src="https://static.igem.org/mediawiki/2017/8/85/T--SJTU-BioX-Shanghai--SJTU.png">
 
                    </a>
 
                </div>
 
                <div class="col-12 col-sm-6 col-lg-3 sponsor-1">
 
                    <a target="_blank" href="http://www.bio-x.cn/">
 
                        <img src="https://static.igem.org/mediawiki/2017/e/e6/T--SJTU-BioX-Shanghai--BioX.png">
 
                    </a>
 
                </div>
 
                <div class="col-12 col-sm-6 col-lg-3 sponsor-1">
 
                    <a target="_blank" href="http://life.sjtu.edu.cn/">
 
                        <img src="https://static.igem.org/mediawiki/2017/f/fa/T--SJTU-BioX-Shanghai--Life.png">
 
                    </a>
 
                </div>
 
                <div class="col-12 col-sm-6 col-lg-3 sponsor-2">
 
                    <a target="_blank" href="http://www.decodinglife.cn/">
 
                        <img src="https://static.igem.org/mediawiki/2017/3/3e/T--SJTU-BioX-Shanghai--ATGC.png">
 
                    </a>
 
                </div>
 
            </div>
 
        </div>
 
        <div class="container-fluid">
 
            <div class="row">
 
                <div class="col-12 col-sm-4 vid">
 
                    <a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/2048">
 
                        <img class="img-fluid" src="https://static.igem.org/mediawiki/2017/5/5e/T--SJTU-BioX-Shanghai--bc2048.jpeg">
 
                        <video autoplay loop>
 
                                        <source src="https://static.igem.org/mediawiki/2017/a/af/T--SJTU-BioX-Shanghai--logo-2048.mp4"/>
 
                                </video>
 
                        <div class="msk flex-center flex-column">
 
                            <div class="h3-my-responsive">Color Mix Game</div>
 
 
                        </div>
 
                    </a>
 
                </div>
 
                <div class="col-12 col-sm-4 vid">
 
                    <a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/wiki">
 
                        <img class="img-fluid" src="https://static.igem.org/mediawiki/2017/9/94/T--SJTU-BioX-Shanghai--bcwiki.jpeg">
 
                        <video autoplay loop>
 
                                        <source src="https://static.igem.org/mediawiki/2017/7/75/T--SJTU-BioX-Shanghai--logo-wiki.mp4"/>
 
                            </video>
 
                        <div class="msk flex-center flex-column">
 
                            <div class="h3-my-responsive">Wiki Design </div>
 
 
                        </div>
 
                    </a>
 
                </div>
 
                <div class="col-12 col-sm-4 vid">
 
                    <a href="fsdf">
 
                        <video autoplay loop style="width:100%">
 
                                         
 
                                </video>
 
                        <div class="msk flex-center flex-column">
 
                            <div class="h3-my-responsive">??? </div>
 
 
                        </div>
 
                    </a>
 
                </div>
 
            </div>
 
        </div>
 
        <div class="footer">
 
 
 
            <div class="row">
 
 
                <div class="footer-S">
 
                    <a class="footer-text" href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Description">
 
                        <div>
 
                            Start to Learn More
 
                        </div>
 
                        <img src="https://static.igem.org/mediawiki/2017/f/f5/T--SJTU-BioX-Shanghai--right.png" class="img-fluid">
 
 
                    </a>
 
                </div>
 
 
            </div>
 
 
 
        </div>
 
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/jquery?
 
                    action=raw&ctype=text/javascript"></script>
 
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/popper?
 
                    action=raw&ctype=text/javascript"></script>
 
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/ripple?
 
                    action=raw&ctype=text/javascript"></script>
 
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/bootstrap?
 
                    action=raw&ctype=text/javascript"></script>
 
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/script?
 
                    action=raw&ctype=text/javascript"></script>
 
        <script>
 
            if (bsSys.isiOS || bsSys.isAndroid) {
 
                $(".vid video").css("display", "none");
 
                $(".vid img").css("display", "block");
 
                $(".vid .msk").css("color", "white");
 
                $(".vid .msk").css("background", "rgba(0, 0, 0, 0.25)");
 
 
            }
 
        </script>
 
    </div>
 
</body>
 
 
</html>
 

Latest revision as of 00:45, 2 November 2017