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

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 {
Line 28: Line 27:
 
         .nav2-brand {
 
         .nav2-brand {
 
             width: 14em;
 
             width: 14em;
 +
        }
 +
       
 +
        .we {
 +
            display: block;
 +
        }
 +
       
 +
        .they {
 +
            display: none;
 +
        }
 +
       
 +
        .btn {
 +
            border-radius: 3rem;
 +
        }
 +
       
 +
        .btn-group-xlg>.btn {
 +
            padding: 1rem 2rem;
 +
            font-size: 1.6rem;
 +
            border-radius: 3rem;
 +
        }
 +
       
 +
        @media only screen and (max-width: 768px) {
 +
            .btn-group-xlg>.btn {
 +
                padding: 1rem 2rem;
 +
                font-size: 1.4rem;
 +
                border-radius: 3rem;
 +
            }
 +
        }
 +
       
 +
        @media only screen and (max-width: 576px) {
 +
            .btn-group-xlg>.btn {
 +
                padding: 0.75rem 1.5rem;
 +
                font-size: 1.25rem;
 +
            }
 
         }
 
         }
 
     </style>
 
     </style>
Line 39: Line 71:
 
                     <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">
Line 52: Line 84:
 
                             <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 73: Line 105:
 
                         </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 84: Line 116:
 
                                 <li class="nav-item active"><a href="https://2017.igem.org/Team:SJTU-BioX-Shanghai/HP/Gold_Integrated" class="nav-link">Integrated</a></li>
 
                                 <li class="nav-item active"><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 94: Line 126:
 
         </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">Integrated</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">Integrated</div>
 +
        <div style="text-align:center;padding-top:2rem;">
 +
            <div class="btn-group btn-group-xlg" role="group">
 +
                <button type="button" class="btn btn-info active" id="we_btn" aria-pressed="true" data-state="0">&nbsp;We&nbsp;</button>
 +
                <button type="button" class="btn btn-info" id="they_btn" aria-pressed="false" data-state="0">They</button>
 +
            </div>
 +
        </div>
 
         <div class="container maink">
 
         <div class="container maink">
 
             <div class="container maintext">
 
             <div class="container maintext">
Line 99: Line 137:
 
                     <div class="scrcol col-lg-3">
 
                     <div class="scrcol col-lg-3">
 
                         <div class="scroll-box grey lighten-5">
 
                         <div class="scroll-box grey lighten-5">
−
                             <nav class="list-unstyled" id="navbar-left" role="navigation">
+
                             <div class="we">
 +
                                <nav class="list-unstyled" id="navbar-left" role="navigation">
  
−
                                <li class="nav-item">
+
                                    <li class="nav-item">
−
                                    <a class="nav-link" href="#section1">Title One</a>
+
                                        <a class="nav-link" href="#section1">Title One</a>
−
                                </li>
+
                                    </li>
−
                                <li class="nav-item">
+
                                    <li class="nav-item">
−
                                    <a class="nav-link" href="#section2">Title Two</a>
+
                                        <a class="nav-link" href="#section2">Title Two</a>
−
                                </li>
+
                                    </li>
−
                                <li class="nav-item">
+
                                    <li class="nav-item">
−
                                    <a class="nav-link" href="#section3">Title Three</a>
+
                                        <a class="nav-link" href="#section3">Title Three</a>
−
                                </li>
+
                                    </li>
−
                                <li class="nav-item">
+
                                    <li class="nav-item">
−
                                    <a class="nav-link" href="#section4">Title Four</a>
+
                                        <a class="nav-link" href="#section4">Title Four</a>
−
                                </li>
+
                                    </li>
−
                                 <li class="nav-item">
+
                                    <li class="nav-item">
−
                                     <a class="nav-link" href="#section5">Title Five</a>
+
                                        <a class="nav-link" href="#section5">Title Five</a>
−
                                </li>
+
                                    </li>
−
                            </nav>
+
                                 </nav>
 +
                            </div>
 +
                            <div class="they">
 +
                                <nav class="list-unstyled" id="navbar-left" role="navigation">
 +
 
 +
                                    <li class="nav-item">
 +
                                        <a class="nav-link" href="#section1">Title One</a>
 +
                                     </li>
 +
                                    <li class="nav-item">
 +
                                        <a class="nav-link" href="#section2">Title Two</a>
 +
                                    </li>
 +
                                    <li class="nav-item">
 +
                                        <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>
 
                     </div>
 
                     <div class="col-12 col-lg-9">
 
                     <div class="col-12 col-lg-9">
−
                         <div class="my-title h5-my-responsive" id="section1">Title One</div>
+
                         <div class="we">
−
                        <p>Something something something something something something something something something</p>
+
                            <div class="my-title h5-my-responsive" id="section1">Title One (WE)</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>
+
                            <p>Something something something something something something something something something</p>
−
                        <div class="my-title h5-my-responsive" id="section2">Title Two</div>
+
 
−
                        <p>Something something something something something something something something something</p>
+
                            <div class="my-title h5-my-responsive" id="section2">Title Two</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>
+
                            <p>Something something something something something something something something something</p>
−
                        <div class="my-title h5-my-responsive" id="section3">Title Three</div>
+
 
−
                        <p>Something something something something something something something something something</p>
+
                            <div class="my-title h5-my-responsive" id="section3">Title Three</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>
+
                            <p>Something something something something something something something something something</p>
−
                        <div class="my-title h5-my-responsive" id="section4">Title Four</div>
+
 
−
                        <p>Something something something something something something something something something</p>
+
                            <div class="my-title h5-my-responsive" id="section4">Title Four</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>
+
                            <p>Something something something something something something something something something</p>
−
                        <div class="my-title h5-my-responsive" id="section5">Title Five</div>
+
 
−
                        <p>Something something something something something something something something something</p>
+
                            <div class="my-title h5-my-responsive" id="section5">Title Five</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>
+
                            <p>Something something something something something something something something something</p>
 +
 
 +
                        </div>
 +
                         <div class="they">
 +
                            <div class="my-title h5-my-responsive" id="section1">Title One (They)</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                            <div class="my-title h5-my-responsive" id="section2">Title Two</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                            <div class="my-title h5-my-responsive" id="section3">Title Three</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                            <div class="my-title h5-my-responsive" id="section4">Title Four</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                            <div class="my-title h5-my-responsive" id="section5">Title Five</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                        </div>
 
                     </div>
 
                     </div>
  
Line 175: Line 254:
 
                             <span class="direction">Practice</span>
 
                             <span class="direction">Practice</span>
 
                             <div class="title">
 
                             <div class="title">
−
                                Overview
+
                                Overview
 
                             </div>
 
                             </div>
 
                         </a>
 
                         </a>
Line 202: Line 281:
 
         </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?
 
         <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/script?
−
        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/nav?
 
         <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/nav?
−
        action=raw&ctype=text/javascript"></script>
+
            action=raw&ctype=text/javascript"></script>
 +
        <script>
 +
            $(document).ready(function() {
 +
                $("#we_btn").click(function() {
 +
                    $(".they").slideUp("slow", function() {
 +
                        $(".we").slideDown("slow");
 +
                    });
 +
                    $("#we_btn").addClass('active');
 +
                    $("#they_btn").removeClass('active');
 +
 
 +
                });
 +
                $("#they_btn").click(function() {
 +
                    $(".we").slideUp("slow", function() {
 +
                        $(".they").slideDown("slow");
 +
                    });
 +
                    $("#they_btn").addClass('active');
 +
                    $("#we_btn").removeClass('active');
  
 +
                });
 +
            });
 +
        </script>
 
     </div>
 
     </div>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 14:05, 1 November 2017

Integrated
Title One (WE)

Something something something something something something something something something

Title Two

Something something something something something something something something something

Title Three

Something something something something something something something something something

Title Four

Something something something something something something something something something

Title Five

Something something something something something something something something something

Title One (They)

Something something something something something something something something something

Title Two

Something something something something something something something something something

Title Three

Something something something something something something something something something

Title Four

Something something something something something something something something something

Title Five

Something something something something something something something something something

Practice
Overview
Practice
Engagement