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

Line 1: Line 1:
−
 
 
<html lang="en">
 
<html lang="en">
  
Line 11: Line 10:
 
     <link href="https://2017.igem.org/Template:SJTU-BioX-Shanghai/CSS/style?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]>
 
     <!--[if lt IE 10]>
−
        <center>您使用的是过时的浏览器，浏览本网页可能会有异常。</center>
+
            <center>您使用的是过时的浏览器，浏览本网页可能会有异常。</center>
−
        <center>You are using an outdated browser and this page may not display properly.</center>
+
            <center>You are using an outdated browser and this page may not display properly.</center>
−
    <![endif]-->
+
        <![endif]-->
 
     <style>
 
     <style>
−
.footer .footer-text {
+
        .footer .footer-text {
−
color: gba(255, 255, 255);
+
            -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.3);
 +
        }
 +
       
 +
        .footer .footer-text {
 +
            padding-bottom: 1.3rem;
 +
        }
 +
       
 +
        .footer .footer-text div {
 +
            font-size: 25px;
 +
            padding-bottom: 3px;
 +
        }
 +
       
 +
        .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";
 +
        }
 +
       
 +
        .head-2 {
 +
            text-align: center;
 +
            color: rgb(183, 76, 91);
 +
            font-weight: 400;
 +
            padding: 0.5rem;
 +
            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;
 +
        }
 +
       
 +
        @media only screen and (max-width: 768px) {
 +
            .vid .msk {
 +
                background: rgba(0, 0, 0, 0.3);
 +
                color: white;
 +
            }
 +
        }
 +
       
 +
        .vid .msk:hover {
 +
            background: rgba(0, 0, 0, 0.5);
 +
            color: white;
 +
        }
 
     </style>
 
     </style>
 
</head>
 
</head>
Line 23: Line 115:
 
<body>
 
<body>
 
     <div class="fluid-bg full-bg-body">
 
     <div class="fluid-bg full-bg-body">
−
     
+
 
−
            <nav class="navbar navbar1 navbar-expand-lg navbar-dark">
+
        <nav class="navbar navbar1 navbar-expand-lg navbar-dark">
−
                <div class="container">
+
            <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>
+
                <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">
+
                <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">
+
                            <div class="hamburger" id="ham1">
−
                            <span class="line"></span>
+
                                <span class="line"></span>
−
                            <span class="line"></span>
+
                                <span class="line"></span>
−
                            <span class="line"></span>
+
                                <span class="line"></span>
−
                        </div>
+
                            </div>
−
                    </button>
+
                        </button>
−
                    <div class="collapse navbar-collapse" id="navbarNav1">
+
                <div class="collapse navbar-collapse" id="navbarNav1">
−
                        <ul class="navbar-nav mr-auto">
+
                    <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/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/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/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/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/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>
+
                        <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Team" class="nav-link">Team</a></li>
−
                        </ul>
+
                    </ul>
−
                        <ul class="navbar-nav ml-auto">
+
                    <ul class="navbar-nav ml-auto">
−
                            <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/HP/Silver-cn" class="nav-link jtzw">简体中文</a></li>
+
                        <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/HP/Silver-cn" class="nav-link jtzw">简体中文</a></li>
−
                        </ul>
+
                    </ul>
 +
                </div>
 +
            </div>
 +
        </nav>
 +
        <div class="full-bg flex-center flex-column">
 +
            <img class="img-fluid mainphoto" src="https://static.igem.org/mediawiki/2017/5/56/T--SJTU-BioX-Shanghai--bg1.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">
 +
                        <div class="h1-my-responsive head-1">Multiple Factor</div>
 +
                        <div class="h3-my-responsive head-2">Which means detecting multiple input</div>
 +
                        <div class="h3-my-responsive head-2">Just use one type of bacteria</div>
 
                     </div>
 
                     </div>
 +
                    <div class="col-12 col-sm-6">
 +
                        <img class="img-fluid" src="https://static.igem.org/mediawiki/2017/f/fe/T--SJTU-BioX-Shanghai--bg3.jpeg">
 +
                    </div>
 +
 
                 </div>
 
                 </div>
−
             </nav>
+
             </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">Means the result can be seen by human beings</div>
 +
                        <div class="h3-my-responsive head-2">And we can use our smart phone to recognize it</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">
 +
                        <div class="h1-my-responsive head-1">Detection System</div>
 +
                        <div class="h3-my-responsive head-2">We have developed an APP</div>
 +
                        <div class="h3-my-responsive head-2">Use the information from your smart phone camera</div>
 +
                        <div class="h3-my-responsive head-2">To reckoning the value of input</div>
 +
                    </div>
 +
                    <div class="col-12 col-sm-6">
 +
                        <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 application</div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
         </div>
 
         <div class="container sponsor">
 
         <div class="container sponsor">
 
             <div class="row">
 
             <div class="row">
Line 78: Line 232:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
<div class="footer">
+
        <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">
 +
                        <video autoplay loop style="width:100%">
 +
                                <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 class="container">
+
                        </div>
−
                 <div class="row">
+
                    </a>
−
 
+
                 </div>
−
                    <div class="footer-S">
+
                <div class="col-12 col-sm-4 vid">
−
                        <a class="footer-text" href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Description">
+
                    <a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/wiki">
−
                            <div>
+
                        <video autoplay loop style="width:100%">
−
                                 Start
+
                                 <source src="https://static.igem.org/mediawiki/2017/7/75/T--SJTU-BioX-Shanghai--logo-wiki.mp4"/>
−
                            </div>
+
                    </video>
−
                            <img src="https://static.igem.org/mediawiki/2017/f/f5/T--SJTU-BioX-Shanghai--right.png" class="img-fluid">
+
                        <div class="msk flex-center flex-column">
 +
                            <div class="h3-my-responsive">Wiki Design </div>
  
−
                         </a>
+
                         </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>
 +
        </div>
 +
        <div class="footer">
  
  
−
         </div>      
+
            <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?
 
         <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/jquery?
−
        action=raw&ctype=text/javascript"></script>
+
            action=raw&ctype=text/javascript"></script>
 
         <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/popper?
 
         <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/popper?
−
        action=raw&ctype=text/javascript"></script>
+
            action=raw&ctype=text/javascript"></script>
 
         <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/ripple?
 
         <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/ripple?
−
        action=raw&ctype=text/javascript"></script>
+
            action=raw&ctype=text/javascript"></script>
 
         <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/bootstrap?
 
         <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/bootstrap?
−
        action=raw&ctype=text/javascript"></script>
+
            action=raw&ctype=text/javascript"></script>
 
         <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/script?
 
         <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/script?
−
        action=raw&ctype=text/javascript"></script>
+
            action=raw&ctype=text/javascript"></script>
  
 
     </div>
 
     </div>

Revision as of 10:10, 28 October 2017

A universal multifactorial visualized detection system
Multiple Factor
Which means detecting multiple input
Just use one type of bacteria
Visualization
Means the result can be seen by human beings
And we can use our smart phone to recognize it
Detection System
We have developed an APP
Use the information from your smart phone camera
To reckoning the value of input
S.T.A.R.
Small Transcriptional-Activating RNA
A new powerful technology
Start to have powerful application
Color Mix Game
Wiki Design
???
Start to Learn More