Difference between revisions of "Team:BIT-China"

 
(112 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{BIT-China}}
 
 
<html>
 
<html>
−
    <meta charset="utf-8">
 
−
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
  
−
  <link rel =“stylesheet”type =“text / css” href =“https://2018.igem.org/Template:BIT-China/css-styles?action=raw&ctype=text/css”/>
+
<head>
−
     <link href="css/font-awesome.min.css" rel="stylesheet">
+
     <style>
−
    <link href="css/flexslider.css" rel="stylesheet">
+
        body {
−
    <link href="css/styles.css" rel="stylesheet">
+
            height: 100%;
−
    <link href="css/queries.css" rel="stylesheet">
+
            width: 100%;
−
    <link href="css/animate.css" rel="stylesheet">
+
            background-color: transparent !important;
 +
        }
  
−
    <body id="top">
+
        #globalWrapper {
 +
            margin: 0;
 +
            padding: 0;
 +
            font-size: transparent !important;
 +
        }
  
−
         <header id="home">
+
         #content {
−
             <nav>
+
             width: 100%;
−
                <div class="container-fluid">
+
            padding: 0;
−
                    <div class="row">
+
            margin: -12px 0 0;
−
                        <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2">
+
            background-color: transparent !important;
−
                            <nav class="pull">
+
            color: transparent !important;
−
                                <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>
 +
 +
        <div id="home_section_5" class="section">
 +
            <img id="img5" style="z-index: 2;position: absolute;left: 32vw;top: calc(50vh - 290px);height: 400px;width: 600px;"
 +
                src="https://static.igem.org/mediawiki/2018/5/55/T--BIT-China--iGEM2018-home-5.png">
 +
 +
            <div id="text5-1" style="position: absolute;left:calc(50vw - 270px);top:calc(50vh + 120px);">
 +
                <p class="p_style" style="width:640px;">
 +
                    <font size="5" face="kg_second_chances_solidRg">Our</font> 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
 +
                </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) {
  
−
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+
                    }
−
        <script src="js/jquery.min.js"></script>
+
                },
−
        <!-- Include all compiled plugins (below), or include individual files as needed -->
+
            });
−
         <script src="js/waypoints.min.js"></script>
+
         });
−
        <script src="js/bootstrap.min.js"></script>
+
    </script>
−
        <script src="js/scripts.js"></script>
+
</body>
−
        <script src="js/jquery.flexslider.js"></script>
+
−
        <script src="js/modernizr.js"></script>
+
−
    </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