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

 
(16 intermediate revisions by 3 users not shown)
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>
 
         .full-bg.full-bg-0 {
 
         .full-bg.full-bg-0 {
−
             background-image: url("https://static.igem.org/mediawiki/2017/0/04/T--SJTU-BioX-Shanghai--17001.jpeg");
+
             background-image: url("https://static.igem.org/mediawiki/2017/3/3d/T--SJTU-BioX-Shanghai--17005.jpeg");
 +
            background-position: top center;
 
         }
 
         }
 
          
 
          
−
         @media only screen and (min-width: 768px) {
+
         @media only screen and (min-width: 576px) {
 
             .full-bg.full-bg-0 {
 
             .full-bg.full-bg-0 {
−
                 background-image: url("https://static.igem.org/mediawiki/2017/2/25/T--SJTU-BioX-Shanghai--17001-hi.jpeg");
+
                 background-image: url("https://static.igem.org/mediawiki/2017/7/75/T--SJTU-BioX-Shanghai--17005-hi.jpeg");
 
             }
 
             }
 
         }
 
         }
Line 27: Line 27:
 
         .nav2-brand {
 
         .nav2-brand {
 
             width: 14em;
 
             width: 14em;
 +
        }
 +
       
 +
        .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;
 +
        }
 +
       
 +
        .msk:hover {
 +
            background: rgba(0, 0, 0, 0.2);
 +
            color: white;
 +
        }
 +
       
 +
        .head-1 {
 +
            text-align: center;
 +
            color: rgb(183, 76, 91);
 +
            font-weight: 400;
 +
            padding-bottom: 2rem;
 +
            font-family: "Gochi Hand";
 +
            line-height:1em;
 +
        }
 +
       
 +
        .big-head {
 +
            padding-bottom: 4rem
 
         }
 
         }
 
     </style>
 
     </style>
Line 36: Line 68:
 
             <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="#"><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">
Line 51: Line 83:
 
                             <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 active"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/HP" class="nav-link">Human Practice</a></li>
 
                             <li class="nav-item active"><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>
Line 72: Line 104:
 
                         </div>
 
                         </div>
 
                         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2" aria-controls="navbarNav2" aria-expanded="false" aria-label="Toggle navigation">
 
                         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2" aria-controls="navbarNav2" aria-expanded="false" aria-label="Toggle navigation">
−
                            <div class="hamburger" id="ham2">
+
                                    <div class="hamburger" id="ham2">
−
                                    <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="navbarNav2">
 
                         <div class="collapse navbar-collapse " id="navbarNav2">
 
                             <ul class="navbar-nav mr-auto">
 
                             <ul class="navbar-nav mr-auto">
Line 83: Line 115:
 
                                 <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/HP/Gold_Integrated" class="nav-link">Integrated</a></li>
 
                                 <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/HP/Gold_Integrated" class="nav-link">Integrated</a></li>
 
                                 <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Engagement" class="nav-link">Engagement</a></li>
 
                                 <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Engagement" class="nav-link">Engagement</a></li>
−
                                 <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Collaborations" class="nav-link">Collaborations</a></li>                              
+
                                 <li class="nav-item"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Collaborations" class="nav-link">Collaborations</a></li>
 
                             </ul>
 
                             </ul>
 
                         </div>
 
                         </div>
Line 92: Line 124:
  
 
         </div>
 
         </div>
−
         <div class="big-head h1-my-responsive"> <img src="https://static.igem.org/mediawiki/2017/5/52/T--SJTU-BioX-Shanghai--quan.png" class="img-fluid">Overview</div>
+
         <div class="big-head h1-my-responsive"> <img src="https://static.igem.org/mediawiki/2017/d/d3/T--SJTU-BioX-Shanghai--17y06.png" class="img-fluid">Overview</div>
 
         <div class="container maink">
 
         <div class="container maink">
 
             <div class="container maintext">
 
             <div class="container maintext">
−
                 <div class="row">
+
                 <div class="row justify-content-center">
−
                     <div class="scrcol col-lg-3">
+
                   
−
                         <div class="scroll-box grey lighten-5">
+
                     <div class="col-md-5 col-12">
−
                             <nav class="list-unstyled" id="navbar-left" role="navigation">
+
                         <a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/HP/Gold_Integrated">
 +
                             <img class="img-fluid" src="https://static.igem.org/mediawiki/2017/7/7b/T--SJTU-BioX-Shanghai--17ovbus.png">
 +
                            <div class="h2-my-responsive head-1">Business Plan in Integrated </div>
 +
                            <div class="msk">
 +
                            </div>
 +
                        </a>
 +
                    </div>
  
−
                                <li class="nav-item">
+
                    <div class="col-md-5 col-12">
−
                                    <a class="nav-link" href="#section1">Title One</a>
+
                        <a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Engagement">
−
                                </li>
+
                            <img class="img-fluid" src="https://static.igem.org/mediawiki/2017/9/9c/T--SJTU-BioX-Shanghai--17ov2048.png">
−
                                <li class="nav-item">
+
                            <div class="h2-my-responsive head-1">Color Game in Engagement</div>
−
                                    <a class="nav-link" href="#section2">Title Two</a>
+
                            <div class="msk">
−
                                </li>
+
                             </div>
−
                                <li class="nav-item">
+
                         </a>
−
                                    <a class="nav-link" href="#section3">Title Three</a>
+
−
                                </li>
+
−
                                <li class="nav-item">
+
−
                                    <a class="nav-link" href="#section4">Title Four</a>
+
−
                                </li>
+
−
                                <li class="nav-item">
+
−
                                    <a class="nav-link" href="#section5">Title Five</a>
+
−
                                </li>
+
−
                             </nav>
+
−
                         </div>
+
 
                     </div>
 
                     </div>
−
                     <div class="col-12 col-lg-9">
+
                     <div class="col-md-5 col-12">
−
                         <div class="my-title h5-my-responsive" id="section1">Title One</div>
+
                         <a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Safety">
−
                        <p>Something something something something something something something something something</p>
+
                            <img class="img-fluid" src="https://static.igem.org/mediawiki/2017/2/28/T--SJTU-BioX-Shanghai--17ovsaf.png">
−
                        <p>Something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something</p>
+
                            <div class="h2-my-responsive head-1">Safety</div>
−
                        <div class="my-title h5-my-responsive" id="section2">Title Two</div>
+
                            <div class="msk">
−
                        <p>Something something something something something something something something something</p>
+
                            </div>
−
                         <p>Something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something</p>
+
                         </a>
−
                        <div class="my-title h5-my-responsive" id="section3">Title Three</div>
+
                    </div>
−
                         <p>Something something something something something something something something something</p>
+
                    <div class="col-md-5 col-12">
−
                        <p>Something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something</p>
+
                         <a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/Collaborations">
−
                        <div class="my-title h5-my-responsive" id="section4">Title Four</div>
+
                            <img class="img-fluid" src="https://static.igem.org/mediawiki/2017/d/d7/T--SJTU-BioX-Shanghai--17ovcol.png">
−
                        <p>Something something something something something something something something something</p>
+
                            <div class="h2-my-responsive head-1">Collaborations </div>
−
                        <p>Something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something</p>
+
                            <div class="msk">
−
                        <div class="my-title h5-my-responsive" id="section5">Title Five</div>
+
                            </div>
−
                        <p>Something something something something something something something something something</p>
+
                         </a>
−
                         <p>Something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something something</p>
+
 
                     </div>
 
                     </div>
−
 
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 174: Line 200:
 
                             <span class="direction">Model</span>
 
                             <span class="direction">Model</span>
 
                             <div class="title">
 
                             <div class="title">
−
                                Color Chart
+
                                Color Chart
 
                             </div>
 
                             </div>
 
                         </a>
 
                         </a>
Line 201: Line 227:
 
         </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/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/nav?
−
        action=raw&ctype=text/javascript"></script>
+
                action=raw&ctype=text/javascript"></script>
  
 
     </div>
 
     </div>

Latest revision as of 03:50, 2 November 2017

Overview
Business Plan in Integrated
Color Game in Engagement
Safety
Collaborations
Model
Color Chart
Practice
Integrated