|
|
(21 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(193, 86, 101);
| |
− | }
| |
− | </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>
| |