Difference between revisions of "Team:BIT-China"

 
(105 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{BIT-China}}
 
 
<html>
 
<html>
  
−
  <link rel ="stylesheet" type ="text/css" href ="https://2018.igem.org/Template:BIT-China/css-styles?action=raw&ctype=text/css"/>
+
<head>
−
  <link rel ="stylesheet" type ="text/css” href ="https://2018.igem.org/Template:BIT-China/css-font-awesome.min?action=raw&ctype=text/css"/>
+
    <style>
−
  <link rel ="stylesheet" type ="text/css" href ="https://2018.igem.org/Template:BIT-China/css-flexslider?action=raw&ctype=text/css"/>
+
        body {
−
  <link rel ="stylesheet" type ="text/css" href ="https://2018.igem.org/Template:BIT-China/css-queries?action=raw&ctype=text/css"/>
+
            height: 100%;
−
  <link rel ="stylesheet" type ="text/css" href ="https://2018.igem.org/Template:BIT-China/css-animate?action=raw&ctype=text/css"/>
+
            width: 100%;
 +
            background-color: transparent !important;
 +
        }
  
 +
        #globalWrapper {
 +
            margin: 0;
 +
            padding: 0;
 +
            font-size: transparent !important;
 +
        }
  
−
<body id="top">
+
         #content {
−
         <header id="home">
+
             width: 100%;
−
             <nav>
+
            padding: 0;
−
                <div class="container-fluid">
+
            margin: -12px 0 0;
−
                    <div class="row">
+
            background-color: transparent !important;
−
                        <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2">
+
            color: transparent !important;
−
                            <nav class="pull">
+
        }
−
                                <ul class="top-nav">
+
−
                                    <li>
+
−
                                        <a href="#intro">Introduction
+
−
                                            <span class="indicator">
+
−
                                                <i class="fa fa-angle-right"></i>
+
−
                                            </span>
+
−
                                        </a>
+
−
                                    </li>
+
−
                                    <li>
+
−
                                        <a href="#features">Features
+
−
                                            <span class="indicator">
+
−
                                                <i class="fa fa-angle-right"></i>
+
−
                                            </span>
+
−
                                        </a>
+
−
                                    </li>
+
−
                                    <li>
+
−
                                        <a href="#team">Team
+
−
                                            <span class="indicator">
+
−
                                                <i class="fa fa-angle-right"></i>
+
−
                                            </span>
+
−
                                        </a>
+
−
                                    </li>
+
−
                                    <li>
+
−
                                        <a href="#contact">Contact us
+
−
                                            <span class="indicator">
+
−
                                                <i class="fa fa-angle-right"></i>
+
−
                                            </span>
+
−
                                        </a>
+
−
                                    </li>
+
−
                                </ul>
+
−
                            </nav>
+
−
                        </div>
+
−
                    </div>
+
−
                </div>
+
−
            </nav>
+
  
−
            <section class="hero" id="hero">
+
        #top_title {
−
                <div class="container">
+
            display: none;
−
                    <div class="row">
+
        }
−
                        <div class="col-md-12 text-right navicon">
+
−
                            <a id="nav-toggle" class="nav_slide_button" href="#">
+
−
                                <span></span>
+
−
                            </a>
+
−
                        </div>
+
−
                    </div>
+
−
                    <div class="row">
+
−
                        <div class="col-md-8 col-md-offset-2 text-center inner">
+
−
                            <h1 class="animated fadeInDown">BIT-China</h1>
+
−
                        </div>
+
−
                    </div>
+
−
                    <div class="row">
+
−
                        <div class="col-md-6 col-md-offset-3 text-center">
+
−
                            <img src="image/T--BIT-China--iGEM2018_logo.png" height="100" width="100" />
+
−
                        </div>
+
−
                    </div>
+
−
                </div>
+
−
            </section>
+
  
−
         </header>
+
         p:hover {
 +
            border-style: transparent !important;
 +
        }
 +
    </style>
 +
    <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/fullPage-style?action=raw&amp;ctype=text/css">
 +
    <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/common-style?action=raw&amp;ctype=text/css">
 +
    <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/css-animation?action=raw&amp;ctype=text/css">
  
−
         <section class="intro text-center section-padding" id="intro">
+
    <style>
−
             <div class="container">
+
         .down-arrow-style {
−
                 <div class="row">
+
            position: absolute;
−
                    <div class="col-md-8 col-md-offset-2 wp1">
+
            z-index: 4;
−
                         <h1 class="arrow">Introduct our project</h1>
+
            left: calc(50vw - 20px);
−
                        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
+
            top: calc(100vh - 50px);
−
                    </div>
+
            width: 40px;
−
                 </div>
+
            height: 40px;
 +
            cursor: pointer;
 +
        }
 +
 
 +
        .top-style {
 +
            position: fixed;
 +
            z-index: 4;
 +
            right: 20px;
 +
            top: calc(100vh - 40px);
 +
            width: 30px;
 +
            height: 30px;
 +
            cursor: pointer;
 +
        }
 +
    </style>
 +
</head>
 +
 
 +
<body>
 +
            <ul id="left-nav">
 +
        <li>
 +
            <a>PROJECT</a>
 +
            <ul>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Background">Background</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Description">Description</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Design">Idea & Design</a></li>
 +
             </ul>
 +
        </li>
 +
 
 +
        <li>
 +
            <a>EXPERIMENTS</a>
 +
            <ul>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/ExperimentsRegulator">Regulator</a></li>
 +
                 <li><a href="https://2018.igem.org/Team:BIT-China/ExperimentsFeedback">Feedback</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/ExperimentsOutput">Output</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Results">Results</a></li>
 +
            </ul>
 +
        </li>
 +
 
 +
        <li>
 +
            <a>MODELING</a>
 +
            <ul>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Model">Overview</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/FluorescentProbesModel">Fluorescent Probe Model </a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/H2O2DecompositionModel">H<sub>2</sub>O<sub>2</sub>
 +
                        Decomposition Model</a></li>
 +
 
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/roGFP2-Orp1MichaelisEquationModel">roGFP2-Orp1
 +
                         Michaelis equation Model</a></li>
 +
            </ul>
 +
        </li>
 +
 
 +
        <li>
 +
            <a>HUMAN PRACTICES</a>
 +
            <ul>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/HPOverview">Overview</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Human_Practices">Integrated Human Practices</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Public_Engagement">Education & Public Engagement</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Collaborations">Collaborations</a></li>
 +
            </ul>
 +
        </li>
 +
 
 +
        <li>
 +
            <a>NOTEBOOK</a>
 +
            <ul>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Notebook">Lab Book</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Protocols">Methodology / Protocols</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Equipment">Material & Equipment</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/InterLab">Measurement / InterLab</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Safety">Safety</a></li>
 +
            </ul>
 +
        </li>
 +
 
 +
        <li>
 +
            <a>ACHIEVEMENTS</a>
 +
            <ul>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/JudgingForm">Judging Form</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Parts">Parts</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Improve">Improve</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Applied_Design">Applied Design</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Demonstrate">Demonstrate</a></li>
 +
            </ul>
 +
        </li>
 +
 
 +
        <li>
 +
            <a>TEAM</a>
 +
            <ul>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Team">Members</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Attributions">Attributions</a></li>
 +
                <li><a href="https://2018.igem.org/Team:BIT-China/Gallery">Gallery</a></li>
 +
            </ul>
 +
        </li>
 +
    </ul>
 +
 
 +
    <a href="https://2018.igem.org/Team:BIT-China"><img id="imgA" class="imgA-new-pos" src="https://static.igem.org/mediawiki/2018/4/46/T--BIT-China--iGEM2018-A_img.png" /></a>
 +
    <!-- end -->
 +
 
 +
    <div id="dowebok">
 +
        <div id="home_section_0" class="section">
 +
            <img src="https://static.igem.org/mediawiki/2018/2/29/T--BIT-China--iGEM2018-HOME-BG.jpg" style="position: absolute;top:0;left:0;height:100vh;width:100vw;z-index:5;pointer-events: none;">
 +
 
 +
            <img id="gifA" src="https://static.igem.org/mediawiki/2018/f/f3/T--BIT-China--iGEM2018-HOME-A.gif" style="position:absolute;top:calc(50vh - 148px);left:calc(50vw - 292px);height: 295px;width: 583px;z-index: 5;pointer-events: none;">
 +
        </div>
 +
 
 +
        <div id="home_section_1" class="section">
 +
            <img id="img1-1" style="z-index: 1;position: absolute;right:-5px;top: -5px;bottom:-5px;height: 100vh;width: 80vw;"
 +
                 src="https://static.igem.org/mediawiki/2018/2/2f/T--BIT-China--iGEM2018-home.png">
 +
            <img id="img1-2" style="z-index: 0;position: absolute;left:calc(50vw - 350px);bottom:calc(50vh - 300px);height: 260px;width: 600px;"
 +
                src="https://static.igem.org/mediawiki/2018/f/f4/T--BIT-China--iGEM2018-wordcut2.png">
 +
 
 +
            <div id="text1" style="z-index:1;position: absolute;left:calc(50vw - 250px);bottom:calc(50vh - 230px);">
 +
                <p class="p_style" style="width:350px;font-size:16px !important;">
 +
                    <font size="5" face="kg_second_chances_solidRg">“A”</font> indicates antioxidant, and can also
 +
                    represent the best in the grade rating. So the core of our project is to build an antioxidant
 +
                    detecting system to rank antioxidants.
 +
                </p>
 
             </div>
 
             </div>
−
        </section>
 
  
−
        <section class="features text-center section-padding" id="features">
+
            <img id="down1" onclick="arr_down()" class="down-arrow-style" src="https://static.igem.org/mediawiki/2018/2/2a/T--BIT-China--iGEM2018-down_arrow.svg">
−
            <div class="container">
+
        </div>
−
                <div class="row">
+
 
−
                    <div class="col-md-12">
+
        <div id="home_section_2" class="section">
−
                        <h1 class="arrow">Features</h1>
+
            <img id="img2-1" style="z-index: 2;position: absolute;left: calc(50vw - 400px);top: calc(50vh - 350px);height: 500px;width: 500px; transform:rotate(1deg);"
−
                    </div>
+
                src="https://static.igem.org/mediawiki/2018/d/da/T--BIT-China--iGEM2018-img_home_4.png">
−
                </div>
+
            <img id="img2-2" style="z-index: 1;position: absolute;left: calc(50vw - 120px);top: calc(50vh - 225px);height: 400px;width: 600px;"
−
                <div class="row">
+
                src="https://static.igem.org/mediawiki/2018/5/56/T--BIT-China--HomePageFig1.jpg">
−
                    <div id="portfolioSlider">
+
 
−
                        <ul class="slides">
+
            <div id="text2" style="position: absolute;left:calc(50vw - 365px);top:calc(50vh + 135px);">
−
                            <li>
+
                <p class="p_style" style="width:520px;">
−
                                <div class="col-md-4 wp4">
+
                    <font size="5" face="kg_second_chances_solidRg">Antioxidants</font> are <br>compounds that inhibit
−
                                    <div class="overlay-effect effects clearfix">
+
                    oxidation.They can scavenge the excess ROS in the organisms. The antioxidants mentioned here is the
−
                                        <div class="img">
+
                     one working in our bodies, helping us defect the damage of oxidation.
−
                                            <img src="image/T--BIT-China--iGEM2018_temp_portfolio.jpg" alt="Portfolio Item">
+
                 </p>
−
                                            <div class="overlay">
+
−
                                                <a href="#" class="expand">
+
−
                                                    <i class="fa fa-search"></i>
+
−
                                                    <br>View More</a>
+
−
                                                <a class="close-overlay hidden">x</a>
+
−
                                            </div>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                    <h2>Creative Minds</h2>
+
−
                                    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
+
−
                                </div>
+
−
                                <div class="col-md-4 wp4 delay-05s">
+
−
                                    <div class="overlay-effect effects clearfix">
+
−
                                        <div class="img">
+
−
                                            <img src="image/T--BIT-China--iGEM2018_temp_portfolio.jpg" alt="Portfolio Item">
+
−
                                            <div class="overlay">
+
−
                                                <a href="#" class="expand">
+
−
                                                    <i class="fa fa-search"></i>
+
−
                                                    <br>View More</a>
+
−
                                                <a class="close-overlay hidden">x</a>
+
−
                                            </div>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                    <h2>Creative Hearts</h2>
+
−
                                    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
+
−
                                </div>
+
−
                                <div class="col-md-4 wp4 delay-1s">
+
−
                                    <div class="overlay-effect effects clearfix">
+
−
                                        <div class="img">
+
−
                                            <img src="image/T--BIT-China--iGEM2018_temp_portfolio.jpg" alt="Portfolio Item">
+
−
                                            <div class="overlay">
+
−
                                                <a href="#" class="expand">
+
−
                                                    <i class="fa fa-search"></i>
+
−
                                                    <br>View More</a>
+
−
                                                <a class="close-overlay hidden">x</a>
+
−
                                            </div>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                    <h2>Creative Ideas</h2>
+
−
                                    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
+
−
                                </div>
+
−
                            </li>
+
−
                            <li>
+
−
                                <div class="col-md-4 wp4">
+
−
                                    <div class="overlay-effect effects clearfix">
+
−
                                        <div class="img">
+
−
                                            <img src="image/T--BIT-China--iGEM2018_temp_portfolio.jpg" alt="Portfolio Item">
+
−
                                            <div class="overlay">
+
−
                                                <a href="#" class="expand">
+
−
                                                    <i class="fa fa-search"></i>
+
−
                                                    <br>View More</a>
+
−
                                                <a class="close-overlay hidden">x</a>
+
−
                                            </div>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                    <h2>Creative Minds</h2>
+
−
                                    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
+
−
                                </div>
+
−
                                <div class="col-md-4 wp4 delay-05s">
+
−
                                    <div class="overlay-effect effects clearfix">
+
−
                                        <div class="img">
+
−
                                            <img src="image/T--BIT-China--iGEM2018_temp_portfolio.jpg" alt="Portfolio Item">
+
−
                                            <div class="overlay">
+
−
                                                <a href="#" class="expand">
+
−
                                                    <i class="fa fa-search"></i>
+
−
                                                    <br>View More</a>
+
−
                                                <a class="close-overlay hidden">x</a>
+
−
                                            </div>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                    <h2>Creative Hearts</h2>
+
−
                                    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
+
−
                                </div>
+
−
                                <div class="col-md-4 wp4 delay-1s">
+
−
                                    <div class="overlay-effect effects clearfix">
+
−
                                        <div class="img">
+
−
                                            <img src="image/T--BIT-China--iGEM2018_temp_portfolio.jpg" alt="Portfolio Item">
+
−
                                            <div class="overlay">
+
−
                                                <a href="#" class="expand">
+
−
                                                    <i class="fa fa-search"></i>
+
−
                                                    <br>View More</a>
+
−
                                                <a class="close-overlay hidden">x</a>
+
−
                                            </div>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                    <h2>Creative Ideas</h2>
+
−
                                    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
+
−
                                </div>
+
−
                            </li>
+
−
                        </ul>
+
−
                     </div>
+
−
                 </div>
+
 
             </div>
 
             </div>
−
        </section>
 
  
−
        <section class="team text-center section-padding" id="team">
+
            <img id="down2" onclick="arr_down()" class="down-arrow-style" src="https://static.igem.org/mediawiki/2018/2/2a/T--BIT-China--iGEM2018-down_arrow.svg">
−
            <div class="container">
+
        </div>
−
                <div class="row">
+
−
                    <div class="col-md-12">
+
−
                        <h1 class="arrow">We're a team that adore what we do</h1>
+
−
                    </div>
+
−
                </div>
+
−
                <div class="row">
+
−
                    <div class="team-wrapper">
+
−
                        <div id="teamSlider">
+
−
                            <ul class="slides">
+
−
                                <li>
+
−
                                    <div class="col-md-4 wp5">
+
−
                                        <img src="image/T--BIT-China--iGEM2018_temp_team_members.png" alt="Team Member">
+
−
                                        <h2>Man 1</h2>
+
−
                                        <p>xxxxxxxxxxx</p>
+
−
                                        <div class="social">
+
−
                                            <ul class="social-buttons">
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-dribbble"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-twitter"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-envelope"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
  
−
                                    <div class="col-md-4 wp5 delay-05s">
+
        <div id="home_section_3" class="section">
−
                                        <img src="image/T--BIT-China--iGEM2018_temp_team_members.png" alt="Team Member">
+
            <img id="img3" style="z-index: 2;position:absolute;left:calc(50vw - 320px);top:calc(50vh - 280px);height: 500px;width: 500px;"
−
                                        <h2>Man 2</h2>
+
                src="https://static.igem.org/mediawiki/2018/6/6c/T--BIT-China--iGEM2018-home-3.png">
−
                                        <p>xxxxxxxxxxx</p>
+
 
−
                                        <div class="social">
+
            <div id="text3" style="position: absolute;left:calc(50vw + 200px);top:calc(50vh - 60px);">
−
                                            <ul class="social-buttons">
+
                <p class="p_style" style="width:360px;">
−
                                                <li>
+
                    <font size="5" face="kg_second_chances_solidRg">Oxidation</font> damage is very common in our daily
−
                                                    <a href="#" class="social-btn">
+
                    life. It may be caused by UV in the sun, unhealthy living habits, irregular work and rest times,
−
                                                        <i class="fa fa-dribbble"></i>
+
                    and its accumulation will eventually infect the normal function of our body, lead to gene mutation,
−
                                                    </a>
+
                    cell cancer and aging. Therefore, antioxidants are urgently needed to defended the damage of
−
                                                </li>
+
                     oxidation.
−
                                                <li>
+
                 </p>
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-twitter"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-envelope"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                    <div class="col-md-4 wp5 delay-1s">
+
−
                                        <img src="image/T--BIT-China--iGEM2018_temp_team_members.png" alt="Team Member">
+
−
                                        <h2>Man 3</h2>
+
−
                                        <p>xxxxxxxxxxx</p>
+
−
                                        <div class="social">
+
−
                                            <ul class="social-buttons">
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-dribbble"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-twitter"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-envelope"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </li>
+
−
                                <li>
+
−
                                    <div class="col-md-4 wp5">
+
−
                                        <img src="image/T--BIT-China--iGEM2018_temp_team_members.png" alt="Team Member">
+
−
                                        <h2>Man 4</h2>
+
−
                                        <p>xxxxxxxxxxx</p>
+
−
                                        <div class="social">
+
−
                                            <ul class="social-buttons">
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-dribbble"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-twitter"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-envelope"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                    <div class="col-md-4 wp5 delay-05s">
+
−
                                        <img src="image/T--BIT-China--iGEM2018_temp_team_members.png" alt="Team Member">
+
−
                                        <h2>Man 5</h2>
+
−
                                        <p>xxxxxxxxxxx</p>
+
−
                                        <div class="social">
+
−
                                            <ul class="social-buttons">
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-dribbble"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-twitter"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-envelope"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                    <div class="col-md-4 wp5 delay-1s">
+
−
                                        <img src="image/T--BIT-China--iGEM2018_temp_team_members.png" alt="Team Member">
+
−
                                        <h2>Man 6</h2>
+
−
                                        <p>xxxxxxxxxxx</p>
+
−
                                        <div class="social">
+
−
                                            <ul class="social-buttons">
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-dribbble"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-twitter"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                                <li>
+
−
                                                    <a href="#" class="social-btn">
+
−
                                                        <i class="fa fa-envelope"></i>
+
−
                                                    </a>
+
−
                                                </li>
+
−
                                            </ul>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </li>
+
−
                            </ul>
+
−
                        </div>
+
−
                     </div>
+
−
                 </div>
+
 
             </div>
 
             </div>
−
        </section>
 
  
−
        <section class="dark-bg text-center section-padding contact-wrap" id="contact">
+
            <img id="down3" onclick="arr_down()" class="down-arrow-style" src="https://static.igem.org/mediawiki/2018/2/2a/T--BIT-China--iGEM2018-down_arrow.svg">
−
            <a href="#top" class="up-btn">
+
        </div>
−
                <i class="fa fa-chevron-up"></i>
+
 
−
            </a>
+
        <div id="home_section_4" class="section">
−
            <div class="container">
+
            <img id="img4" style="z-index: 2;position: absolute;right: calc(50vw - 480px);top: calc(50vh - 280px);height: 500px;width: 500px;"
−
                <div class="row">
+
                src="https://static.igem.org/mediawiki/2018/1/1e/T--BIT-China--iGEM2018-home-4.png">
−
                    <div class="col-md-12">
+
 
−
                        <h1 class="arrow">CONTACT US</h1>
+
            <div id="text4" style="position: absolute;right:calc(50vw - 40px);top:calc(50vh - 30px);">
−
                    </div>
+
                <p class="p_style" style="width:300px;font-size:18px !important;">
−
                </div>
+
                    <font size="5" face="kg_second_chances_solidRg">Even</font> though antioxidant is so important,
−
                <div class="row contact-details">
+
                     there’s no standard ways to tell us which antioxidant works better.
−
                    <div class="col-md-4">
+
                 </p>
−
                        <div class="light-box box-hover">
+
−
                            <h2>
+
−
                                <i class="fa fa-map-marker"></i>
+
−
                                <span>Address</span>
+
−
                            </h2>
+
−
                            <p> Beijing Institute of Technology, Beijing, China</p>
+
−
                        </div>
+
−
                    </div>
+
−
                    <div class="col-md-4">
+
−
                        <div class="light-box box-hover">
+
−
                            <h2>
+
−
                                <i class="fa fa-mobile"></i>
+
−
                                <span>Phone</span>
+
−
                            </h2>
+
−
                            <p>+86 13520663896</p>
+
−
                        </div>
+
−
                    </div>
+
−
                    <div class="col-md-4">
+
−
                        <div class="light-box box-hover">
+
−
                            <h2>
+
−
                                <i class="fa fa-paper-plane"></i>
+
−
                                <span>Email</span>
+
−
                            </h2>
+
−
                            <p>
+
−
                                <a href="mailto:13520663896@163.com">13520663896@163.com</a>
+
−
                            </p>
+
−
                        </div>
+
−
                     </div>
+
−
                 </div>
+
 
             </div>
 
             </div>
−
        </section>
 
  
 +
            <img id="down4" onclick="arr_down()" class="down-arrow-style" src="https://static.igem.org/mediawiki/2018/2/2a/T--BIT-China--iGEM2018-down_arrow.svg">
 +
        </div>
  
−
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+
         <div id="home_section_5" class="section">
−
<script type="text/javascript" src = "https://2018.igem.org/Template:BIT-China/js-jquery.min?action = raw&ctype=text/javascript"></ script>
+
            <img id="img5" style="z-index: 2;position: absolute;left: 32vw;top: calc(50vh - 290px);height: 400px;width: 600px;"
−
        <!-- Include all compiled plugins (below), or include individual files as needed -->
+
                src="https://static.igem.org/mediawiki/2018/5/55/T--BIT-China--iGEM2018-home-5.png">
−
<script type="text/javascript" src = "https://2018.igem.org/Template:BIT-China/js-waypoints.min?action = raw&ctype=text/javascript"></ script>
+
 
−
<script type="text/javascript" src = "https://2018.igem.org/Template:BIT-China/js-bootstrap.min?action = raw&ctype=text/javascript"></ script>
+
            <div id="text5-1" style="position: absolute;left:calc(50vw - 270px);top:calc(50vh + 120px);">
−
<script type="text/javascript" src = "https://2018.igem.org/Template:BIT-China/js-scripts?action = raw&ctype=text/javascript"></ script>
+
                <p class="p_style" style="width:640px;">
−
<script type="text/javascript" src = "https://2018.igem.org/Template:BIT-China/js-jquery.flexslider?action = raw&ctype=text/javascript"></ script>
+
                    <font size="5" face="kg_second_chances_solidRg">Our</font> goal is to build a system with function
−
<script type="text/javascript" src = "https://2018.igem.org/Template:BIT-China/js-modernizr?action = raw&ctype=text/javascript"></ script>
+
                    of detecting the antioxidants and has the advantages of high biological relevance, simple
 +
                    operation, low-cost, good reproducibility, accuracy, and high sensitivity for antioxidant
 +
                    detection. More importantly, we hope to establish an efficient standard for evaluating antioxidants
 +
                    through our system
 +
                </p>
 +
            </div>
 +
 
 +
            <img id="down5" class="down-arrow-style" src="https://static.igem.org/mediawiki/2018/1/19/T--BIT-China--iGEM2018-horizon.svg"
 +
                style="pointer-events:none;">
 +
        </div>
 +
    </div>
 +
 
 +
    <img id="top-img" onclick="top_up()" src="https://static.igem.org/mediawiki/2018/3/34/T--BIT-China--iGEM2018-top_img.png">
 +
 
 +
    <script src="https://2018.igem.org/Template:BIT-China/js/jquery-min?action=raw&ctype=text/javascript"></script>
 +
    <!-- 导航栏 -->
 +
    <script src="https://2018.igem.org/Template:BIT-China/js/copy-tendina?action=raw&ctype=text/javascript"></script>
 +
    <script>
 +
        $('#left-nav').tendina({
 +
            animate: true,
 +
            speed: 400,  // 下拉时间
 +
        })
 +
    </script>
 +
    <!-- fullPage -->
 +
    <script src="https://2018.igem.org/Template:BIT-China/js/jquery-fullPage-min?action=raw&ctype=text/javascript"></script>
 +
    <script>
 +
        var left_side = document.getElementById('left-nav'),
 +
            imgA = document.getElementById('imgA'),
 +
            gifA = document.getElementById('gifA'),
 +
            top_img = document.getElementById('top-img');
 +
 
 +
        var img1_1 = document.getElementById('img1-1'),
 +
            img1_2 = document.getElementById('img1-2'),
 +
            text1 = document.getElementById('text1'),
 +
            down1 = document.getElementById('down1');
 +
 
 +
        var img2_1 = document.getElementById('img2-1'),
 +
            img2_2 = document.getElementById('img2-2'),
 +
            text2 = document.getElementById('text2'),
 +
            down2 = document.getElementById('down2');
 +
 
 +
        var img3 = document.getElementById('img3'),
 +
            text3 = document.getElementById('text3'),
 +
            down3 = document.getElementById('down3');
 +
 
 +
        var img4 = document.getElementById('img4'),
 +
            text4 = document.getElementById('text4'),
 +
            down4 = document.getElementById('down4');
 +
 
 +
        var img5 = document.getElementById('img5'),
 +
            text5_1 = document.getElementById('text5-1'),
 +
            down5 = document.getElementById('down5');
 +
 
 +
        function arr_down() {
 +
            $.fn.fullpage.moveSectionDown();
 +
        }
 +
 
 +
        function top_up() {
 +
            $.fn.fullpage.moveTo(1);
 +
        };
 +
    </script>
 +
    <script>
 +
        $(function () {
 +
            $('#dowebok').fullpage({
 +
                'scrollingSpeed': 1000,
 +
                //'navigation': true,  // 显示滚动圆点
 +
                'anchors': [],  // anchors参数防止在火狐浏览器中一次滚动到底部
 +
                'afterRender': function () {  // 页面初始化完成后的回调函数
 +
                    left_side.style.opacity = 0;
 +
                    left_side.style.pointerEvents = "none";
 +
 
 +
                    imgA.style.opacity = 0;
 +
                    imgA.style.pointerEvents = "none";
 +
 
 +
                    top_img.style.opacity = 0;
 +
                    top_img.style.pointerEvents = "none";
 +
                    top_img.classList.add('top-style');
 +
                },
 +
                'onLeave': function (index, nextIndex, direction) {  // 滚动前的回调函数
 +
                    if (nextIndex == 1) {
 +
                        left_side.style.opacity = 0;
 +
                        left_side.style.pointerEvents = "none";
 +
                        left_side.classList.remove('imgA-nav-gradient');
 +
                        left_side.classList.add('imgA-nav-gradient-back');
 +
 
 +
                        imgA.style.opacity = 0;
 +
                        imgA.style.pointerEvents = "none";
 +
                        imgA.classList.remove('imgA-nav-gradient');
 +
                        imgA.classList.add('imgA-nav-gradient-back');
 +
 
 +
                        top_img.style.opacity = 0;
 +
                        top_img.pointerEvents = "none";
 +
                        top_img.classList.remove('imgA-nav-gradient');
 +
                        top_img.classList.add('imgA-nav-gradient-back');
 +
 
 +
                        gifA.classList.remove('gifA-move');
 +
                        gifA.classList.add('gifA-move-back');
 +
 
 +
                    }
 +
                    if (nextIndex == 2) {
 +
                        img1_1.classList.remove('right-move-back');
 +
                        img1_2.classList.remove('imgA-nav-gradient-back');
 +
                        text1.classList.remove('imgA-nav-gradient-back');
 +
                        down1.classList.remove('imgA-nav-gradient-back');
 +
 
 +
                        img1_1.classList.add('right-move');
 +
                        img1_2.classList.add('imgA-nav-gradient');
 +
                        text1.classList.add('imgA-nav-gradient');
 +
                        down1.classList.add('imgA-nav-gradient');
 +
                    }
 +
 
 +
                    if (nextIndex == 3) {
 +
                        img2_1.classList.remove('table-rotate-back');
 +
                        img2_2.classList.remove('right-up-come-back');
 +
                        text2.classList.remove('left-come-back');
 +
                        down2.classList.remove('imgA-nav-gradient-back');
 +
 
 +
                        img2_1.classList.add('table-rotate');
 +
                        img2_2.classList.add('right-up-come');
 +
                        text2.classList.add('left-come');
 +
                        down2.classList.add('imgA-nav-gradient');
 +
                    }
 +
 
 +
                    if (nextIndex == 4) {
 +
                        img3.classList.remove('bear-swing-back');
 +
                        text3.classList.remove('imgA-nav-gradient-back');
 +
                        down3.classList.remove('imgA-nav-gradient-back');
 +
 
 +
                        img3.classList.add('bear-swing');
 +
                        text3.classList.add('imgA-nav-gradient');
 +
                        down3.classList.add('imgA-nav-gradient');
 +
                    }
 +
 
 +
                    if (nextIndex == 5) {
 +
                        img4.classList.remove('bear-swing-back');
 +
                        text4.classList.remove('imgA-nav-gradient-back');
 +
                        down4.classList.remove('imgA-nav-gradient-back');
 +
 
 +
                        img4.classList.add('bear-swing');
 +
                        text4.classList.add('imgA-nav-gradient');
 +
                        down4.classList.add('imgA-nav-gradient');
 +
                    }
 +
 
 +
                    if (nextIndex == 6) {
 +
                        img5.classList.remove('up-come-back');
 +
                        text5_1.classList.remove('up-come-back');
 +
                        down5.classList.remove('imgA-nav-gradient-back');
 +
 
 +
                        img5.classList.add('up-come');
 +
                        text5_1.classList.add('up-come');
 +
                        down5.classList.add('imgA-nav-gradient');
 +
                    }
 +
 
 +
                    if (index == 1) {
 +
                        gifA.classList.add('gifA-move');
 +
                        gifA.classList.remove('gifA-move-back');
 +
 
 +
                        imgA.classList.remove('imgA-nav-gradient-back');
 +
                        imgA.classList.add('imgA-nav-gradient');
 +
                        imgA.style.pointerEvents = "visible";
 +
                        setTimeout(function () { imgA.style.opacity = 1 }, 800);
 +
 
 +
                        left_side.classList.remove('imgA-nav-gradient-back');
 +
                        left_side.style.pointerEvents = "visible";
 +
                        left_side.classList.add('imgA-nav-gradient');
 +
                        setTimeout(function () { left_side.style.opacity = 1 }, 800);
 +
 
 +
                        top_img.classList.remove('imgA-nav-gradient-back');
 +
                        top_img.style.pointerEvents = "visible";
 +
                        top_img.classList.add('imgA-nav-gradient');
 +
                        setTimeout(function () { top_img.style.opacity = 1 }, 800);
 +
                    }
 +
                    if (index == 2) {
 +
                        img1_1.classList.remove('right-move');
 +
                        img1_2.classList.remove('imgA-nav-gradient');
 +
                        text1.classList.remove('imgA-nav-gradient');
 +
                        down1.classList.remove('imgA-nav-gradient');
 +
 
 +
                        img1_1.classList.add('right-move-back');
 +
                        img1_2.classList.add('imgA-nav-gradient-back');
 +
                        text1.classList.add('imgA-nav-gradient-back');
 +
                        down1.classList.add('imgA-nav-gradient-back');
 +
                    }
 +
 
 +
                    if (index == 3) {
 +
                        img2_1.classList.remove('table-rotate');
 +
                        img2_2.classList.remove('right-up-come');
 +
                        text2.classList.remove('left-come');
 +
                        down2.classList.remove('imgA-nav-gradient');
 +
 
 +
                        img2_1.classList.add('table-rotate-back');
 +
                        img2_2.classList.add('right-up-come-back');
 +
                        text2.classList.add('left-come-back');
 +
                        down2.classList.add('imgA-nav-gradient-back');
 +
                    }
 +
 
 +
                    if (index == 4) {
 +
                        img3.classList.remove('bear-swing');
 +
                        text3.classList.remove('imgA-nav-gradient');
 +
                        down3.classList.remove('imgA-nav-gradient');
 +
 
 +
                        img3.classList.add('bear-swing-back');
 +
                        text3.classList.add('imgA-nav-gradient-back');
 +
                        down3.classList.add('imgA-nav-gradient-back');
 +
                    }
 +
 
 +
                    if (index == 5) {
 +
                        img4.classList.remove('bear-swing');
 +
                        text4.classList.remove('imgA-nav-gradient');
 +
                        down4.classList.remove('imgA-nav-gradient');
 +
 
 +
                        img4.classList.add('bear-swing-back');
 +
                        text4.classList.add('imgA-nav-gradient-back');
 +
                        down4.classList.add('imgA-nav-gradient-back');
 +
                    }
 +
 
 +
                    if (index == 6) {
 +
                        img5.classList.remove('up-come');
 +
                        text5_1.classList.remove('up-come');
 +
                        down5.classList.remove('imgA-nav-gradient');
 +
 
 +
                        img5.classList.add('up-come-back');
 +
                        text5_1.classList.add('up-come-back');
 +
                        down5.classList.add('imgA-nav-gradient-back');
 +
                    }
 +
                },
 +
                'afterLoad': function (anchorLink, index) {  // 滚动到某一屏时加载动画样式
 +
                    if (index == 1) {
 +
 
 +
                    }
 +
                    if (index == 2) {
 +
 
 +
                    }
 +
                },
 +
            });
 +
        });
 +
    </script>
 
</body>
 
</body>
 +
 
</html>
 
</html>

Latest revision as of 01:27, 18 October 2018

“A” indicates antioxidant, and can also represent the best in the grade rating. So the core of our project is to build an antioxidant detecting system to rank antioxidants.

Antioxidants are
compounds that inhibit oxidation.They can scavenge the excess ROS in the organisms. The antioxidants mentioned here is the one working in our bodies, helping us defect the damage of oxidation.

Oxidation damage is very common in our daily life. It may be caused by UV in the sun, unhealthy living habits, irregular work and rest times, and its accumulation will eventually infect the normal function of our body, lead to gene mutation, cell cancer and aging. Therefore, antioxidants are urgently needed to defended the damage of oxidation.

Even though antioxidant is so important, there’s no standard ways to tell us which antioxidant works better.

Our goal is to build a system with function of detecting the antioxidants and has the advantages of high biological relevance, simple operation, low-cost, good reproducibility, accuracy, and high sensitivity for antioxidant detection. More importantly, we hope to establish an efficient standard for evaluating antioxidants through our system