Difference between revisions of "Team:BIT-China"

Line 1: Line 1:
 
<html>
 
<html>
−
<style>
+
<head>
−
     #contentSub,
+
     <meta charset="utf-8" />
−
     #footer-box,
+
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
−
     #catlinks,
+
     <meta name="viewport" content="width=device-width, initial-scale=1">
−
     #search-controls,
+
     <title>iGEM</title>
−
     #p-logo,
+
    <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-fullPage-style?action=raw&ctype=text/css" />
−
     .printfooter,
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-common-style?action=raw&ctype=text/css" />
−
     .firstHeading,
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-css-animation?action=raw&ctype=text/css" />
−
     .visualClear,
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-mouse-template?action=raw&ctype=text/css" />
−
     #top_title {
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-mouse-media?action=raw&ctype=text/css" />
−
         display: none;
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-nav-dot-style?action=raw&ctype=text/css" />
−
    }
+
    <style>
 +
         .arr-style {
 +
            cursor: pointer;
 +
            position: absolute;
 +
            right: 650px;
 +
            top: 480px;
 +
            width: 50px;
 +
            height: 10px;
 +
        }
  
−
    /*-- hides default wiki settings --*/
+
        .top-old-style {
 +
            cursor: pointer;
 +
            position: absolute;
 +
            right: 50px;
 +
            top: 550px;
 +
            width: 30px;
 +
            height: 30px;
 +
            opacity: 0;
 +
            transition: all 1s;
 +
            -webkit-transition: all 1s;
 +
            -moz-transition: all 1s;
 +
            -ms-transition: all 1s;
 +
        }
  
−
    #globalWrapper,
+
        .top-new-style {
−
    #content {
+
            cursor: pointer;
−
        width: 100%;
+
            position: absolute;
−
        height: 100%;
+
            right: 50px;
−
        margin: 0px;
+
            top: 550px;
−
        padding: 0px;
+
            width: 30px;
−
    }
+
            height: 30px;
 +
            opacity: 1;
 +
            transition: all 1s;
 +
            -webkit-transition: all 1s;
 +
            -moz-transition: all 1s;
 +
            -ms-transition: all 1s;
 +
        }
  
−
    #HQ_page .text-center {
+
        .text1-old-pos {
−
        text-align: center;
+
            position: relative;
−
    }
+
            left: -900px;
 +
            top: -10px;
 +
        }
  
−
    #contact p {
+
        .text1-new-pos {
−
        text-align: center;
+
            position: relative;
−
    }
+
            left: 900px;
 +
            top: -10px;
 +
            -webkit-transition: all 1s;
 +
            -moz-transition: all 1s;
 +
            -ms-transition: all 1s;
 +
            transition: all 1s;
 +
        }
  
−
    #intro p {
+
        .text2-old-pos {
−
        margin: 50px 0 0;
+
            position: relative;
−
    }
+
            left: -300px;
 +
            top: -70px;
 +
        }
  
−
    #measure p {
+
        .text2-new-pos {
−
        margin: 50px 0 0;
+
            position: relative;
−
    }
+
            left: 300px;
 +
            top: -70px;
 +
            -webkit-transition: all 1s;
 +
            -moz-transition: all 1s;
 +
            -ms-transition: all 1s;
 +
            transition: all 1s;
 +
        }
  
−
    #approach p {
+
        .img2_1-old-pos {
−
        margin: 50px 0 0;
+
            z-index: 1;
−
    }
+
            position: absolute;
 +
            /* right: -140px;
 +
            top: -165px; */
 +
            right: 140px;
 +
            top: 165px;
  
−
    #target p {
+
            height: 380px;
−
        margin: 50px 0 0;
+
            width: 600px;
−
    }
+
            opacity: 0;
 +
        }
  
−
</style>
+
        .img2_1-new-pos {
 +
            opacity: 0;
 +
            -webkit-transition: all .4s;
 +
            -moz-transition: all .4s;
 +
            -ms-transition: all .4s;
 +
            transition: all .4s;
 +
        }
 +
    </style>
  
−
<link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-bootstrap?action=raw&ctype=text/css" />
+
</head>
−
<link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-font-awesome?action=raw&ctype=text/css" />
+
−
<link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-style?action=raw&ctype=text/css" />
+
−
<link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-queries?action=raw&ctype=text/css" />
+
−
<link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-animate?action=raw&ctype=text/css" />
+
  
 +
<body>
 +
    <div id="left-side">
 +
        <ul>
 +
            <li>
 +
                PROJECT
 +
            </li>
 +
            <li>
 +
                EXPERIMENT
 +
            </li>
 +
            <li>
 +
                MODELING
 +
            </li>
 +
            <li>
 +
                HP
 +
            </li>
 +
            <li>
 +
                NOTEBOOK
 +
            </li>
 +
            <li>
 +
                ACHIEVEMENTS
 +
            </li>
 +
            <li>
 +
                TEAM
 +
            </li>
 +
        </ul>
 +
    </div>
  
−
<body id="top">
+
    <img id="imgA" src="https://static.igem.org/mediawiki/2018/4/46/T--BIT-China--iGEM2018-A_img.png" />
 +
    <img id="imgA2" src="https://static.igem.org/mediawiki/2018/4/46/T--BIT-China--iGEM2018-A_img.png" />
 +
    <!-- end -->
  
−
     <header id="home">
+
     <div id="dowebok">
−
       
+
         <div class="section" id="home_section_1">
−
 
+
             <div style="position: relative;display: block;">
−
         <section class="hero" id="hero">
+
                 <img id="img1_1" style="z-index: 1;position: absolute;left: 280px;top: 30px;height: 400px;width: 600px;" src="https://static.igem.org/mediawiki/2018/1/1c/T--BIT-China--iGEM2018-img_home_2.png">
−
             <div class="container">
+
                 <img id="img1_2" style="z-index: 2;position: relative;right: -680px;top: -65px;height: 280px;width: 520px;display: block;"
−
                 <div class="row">
+
                    src="https://static.igem.org/mediawiki/2018/c/cd/T--BIT-China--iGEM2018-wz_img.png">
−
                    <div class="col-md-8 col-md-offset-2 text-center inner">
+
                 <div id="text1" class="text1-old-pos">
−
                        <h1 class="animated fadeInDown">BIT-China</h1>
+
                    <a class="a_style">
−
                    </div>
+
                        BIO-DETECTOR OF ANTIOXIDANTS
−
                 </div>
+
                    </a>
−
                <div class="row">
+
                     <p class="p_style">
−
                    <div class="col-md-6 col-md-offset-3 text-center">
+
                        ROS plays a complicated roll in our daily life. It is a
−
                        <img src="https://static.igem.org/mediawiki/2018/d/da/T--BIT-China--iGEM2018_logo.png" height="100" width="100" />
+
                        <br>crucial signal in living cells and it causes senescence,
−
                    </div>
+
                        <br>thus it arouses great concerns of the public.
−
                 </div>
+
                    </p>
−
            </div>
+
−
        </section>
+
−
 
+
−
    </header>
+
−
 
+
−
    <section class="intro text-center section-padding" id="intro">
+
−
        <div class="container">
+
−
            <div class="row">
+
−
                <div class="col-md-8 col-md-offset-2">
+
−
                     <h1 class="arrow">About us</h1>
+
−
                    <p>This year, we will focus on how to identify the antioxidant capacity of antioxidants.. Antioxidants has
+
−
                        been widely used in foods, Health products and cosmetic. But is there any measure way to know which
+
−
                        antioxidant is better?</p>
+
 
                 </div>
 
                 </div>
 +
                <img onclick="arr_down()" class="arr-style" src="https://static.igem.org/mediawiki/2018/8/81/T--BIT-China--iGEM2018-arr_img.png">
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
    </section>
 
  
−
    <section class="intro text-center section-padding" id="measure">
+
        <div class="section" id="home_section_2">
−
        <div class="container">
+
            <div style="position: relative;display: block;">
−
            <div class="row">
+
                <img id="img2_1" class="img2_1-old-pos" src="https://static.igem.org/mediawiki/2018/a/a6/T--BIT-China--iGEM2018-img_home_3.png">
−
                 <div class="col-md-8 col-md-offset-2">
+
                 <img id="img2_2" style="z-index: 1;position: relative;right: -300px;top: -35px;height: 500px;width: 500px; transform:rotate(1deg);"
−
                     <h1 class="arrow">Measure ways before us</h1>
+
                    src="https://static.igem.org/mediawiki/2018/d/da/T--BIT-China--iGEM2018-img_home_4.png">
−
                     <p>1. Most of the current detection methods for antioxidant properties are based on chemical assays, which
+
                <div id="text2" class="text2-old-pos">
−
                         has limited value for us since the redox reaction in vivo is quite different from that in vitro.
+
                     <a class="a_style">
−
                         <br> 2. Others also consider to transfer redox reactions to the intracellular environment by adding H2O2
+
                        WHAT’S SPECIAL
−
                        and different antioxidants in order, through observing whether the yeast died or not, they could
+
                    </a>
−
                        know which antioxidant would work better. However, people still looking forward a more gentle way
+
                     <p class="p_style">
−
                        of representation.
+
                         There are many products that claim to have
−
                        <br>
+
                         <br> the function of removing ROS for anti-aging.
 
                     </p>
 
                     </p>
−
                    <p></p>
 
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
    </section>
+
        <div class="section" id="home_section_3">
−
 
+
−
    <section class="intro text-center section-padding" id="approach">
+
−
        <div class="container">
+
−
            <div class="row">
+
−
                <div class="col-md-8 col-md-offset-2">
+
−
                    <h1 class="arrow">What we are trying to do</h1>
+
−
                    <p>We are going to modified yeast to identify the antioxidant capacity of antioxidants. Single-cell eukaryotic
+
−
                        yeasts have a similar apoptotic process as animal cells, and due to S. cerevisiae have advantages,
+
−
                        Saccharomyces cerevisiae is an important model organism for studying apoptosis.</p>
+
−
                </div>
+
−
            </div>
+
 
         </div>
 
         </div>
−
    </section>
+
        <div class="section" id="home_section_4">
−
 
+
−
    <section class="intro text-center section-padding" id="target">
+
−
        <div class="container">
+
−
            <div class="row">
+
−
                <div class="col-md-8 col-md-offset-2">
+
−
                    <h1 class="arrow">how to achieve that</h1>
+
−
                    <p>To achieve that goal, our project will be separate into 4 parts:
+
−
                        <br> 1. Regulate
+
−
                        <br> Firstly, we will over express gene ndi1 (which may express ubiquinone oxidoreductase, transfers
+
−
                        electrons from NADH to ubiquinone in the respiratory chain. It has been proved that over express
+
−
                        ndi1 could accumulate ROS. [1]) to accumulate ROS (Reactive oxygen species). Besides, through knocking
+
−
                        out gene yca1 (also known as MCA1, may expresses Ca(2+)-dependent cysteine protease MCA1. MCA1 could
+
−
                        regulate apoptosis upon H2O2 treatment. Once knock it out, yeast may survive from high oxidative
+
−
                        stress. [2]) we will improve the tolerance of ROS, which means our yeast will stay alive during the
+
−
                        whole process of detection.
+
−
                        <br> 2. Feedback
+
−
                        <br> To ensure our yeast won’t die from large accumulation of ROS, we need to promptly turn off the
+
−
                        expression of ROS. At the same time, this will also meet the detection range of ro-GFP.
+
−
                        <br> 3. Input
+
−
                        <br> after that, we will add different antioxidants into the medium, we will standardize the externally
+
−
                        added antioxidants to make the results more feasible.
+
−
                        <br> 4. Output
+
−
                        <br> We will express orp-ro-GFP in our yeast to sense the ROS remaining, (it's a kind of Fusion protein,
+
−
                        which will become oxidized and turn into orp-ox-GFP once react with ROS, and when the amount of ROS
+
−
                        drop, it will back to orp-ro-GFP. Its two different states correspond to different wavelengths of
+
−
                        excitation light, which has been described and used in
+
−
                        <a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2296000">Cornell University 2017</a> ) to know the residual amount of yeast endogenous ROS in different states,
+
−
                        so that we can compare the performance of different antioxidants, and conclude which antioxidant
+
−
                        is better.
+
−
                        <br>
+
−
                    </p>
+
−
                </div>
+
−
            </div>
+
 
         </div>
 
         </div>
−
     </section>
+
     </div>
  
−
     <section class="dark-bg text-center section-padding contact-wrap" id="contact">
+
     <img id="top-img" onclick="top_up()" src="https://static.igem.org/mediawiki/2018/3/34/T--BIT-China--iGEM2018-top_img.png">
−
        <div class="container">
+
−
            <div class="row">
+
−
                <div class="col-md-12">
+
−
                    <h1 class="arrow">CONTACT US</h1>
+
−
                </div>
+
−
            </div>
+
  
−
            <div class="row contact-details">
+
    <div class="cursor">
−
                <div class="col-md-3">
+
        <!-- Main -->
−
                    <div class="light-box box-hover">
+
        <div class="box"></div>
−
                        <h2>
+
        <div class="box hover"></div>
−
                            <i class="fa fa-twitter"></i>
+
    </div>
−
                            <span>Twitter</span>
+
−
                        </h2>
+
−
                        <p>
+
−
                            <a href="https://mobile.twitter.com/BIT_China2018">BIT_China2018</a>
+
−
                        </p>
+
−
                    </div>
+
−
                </div>
+
−
                <div class="col-md-3">
+
−
                    <div class="light-box box-hover">
+
−
                        <h2>
+
−
                            <i class="fa fa-facebook"></i>
+
−
                            <span>Facebook</span>
+
−
                        </h2>
+
−
                        <p>
+
−
                            <a href="https://www.facebook.com/BIT_China2018-190488561659083/">BIT_China2018</a>
+
−
                        </p>
+
−
                    </div>
+
−
                </div>
+
  
−
                <div class="col-md-3">
+
    <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery-min?action=raw&ctype=text/javascript"></script>
−
                    <div class="light-box box-hover">
+
 
−
                        <h2>
+
    <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery-fullPage-min?action=raw&ctype=text/javascript"></script>
−
                            <i class="fa fa-envelope"></i>
+
    <script>
−
                            <span>Email</span>
+
        var left_side = document.getElementById('left-side'),
−
                        </h2>
+
            text1 = document.getElementById('text1'),
−
                        <p>
+
            text2 = document.getElementById('text2'),
−
                            <a href="mailto:bit_china@163.com">bit_china@163.com</a>
+
            imgA = document.getElementById('imgA'),
−
                        </p>
+
            imgA2 = document.getElementById('imgA2'),
−
                    </div>
+
            img2_1 = document.getElementById('img2_1'),
−
                </div>
+
            top_img = document.getElementById('top-img');
 +
 
 +
        function arr_down() {
 +
            $.fn.fullpage.moveSectionDown();
 +
        }
  
−
                <div class="col-md-3">
+
        function top_up() {
−
                     <div class="light-box box-hover">
+
            $.fn.fullpage.moveTo(1);
−
                        <h2>
+
        };
−
                            <i class="fa fa-instagram"></i>
+
    </script>
−
                            <span>Ins</span>
+
    <script>
−
                         </h2>
+
        $(function () {
−
                         <p>
+
            $('#dowebok').fullpage({
−
                            <a href="https://www.instagram.com/bit_china/">bit_china</a>
+
                'navigation': true,
−
                         </p>
+
                'anchors': [],
−
                     </div>
+
                'afterRender': function () {
−
                </div>
+
                    text1.className = 'text1-new-pos';
−
            </div>
+
 
−
        </div>
+
                     left_side.classList.add('nope');
−
    </section>
+
 
 +
                    imgA.className = 'imgA-old-pos';
 +
                    imgA2.className = 'imgA-old-pos';
 +
                    imgA2.style.opacity = 0;
 +
 
 +
                    top_img.classList.add('top-old-style');
 +
                },
 +
                'onLeave': function (index, nextIndex, direction) { 
 +
                    if (nextIndex == 1) {
 +
                         text1.className = 'text1-old-pos';
 +
 
 +
                         left_side.classList.add('nope');
 +
 
 +
                        imgA.classList.remove('imgA-move');
 +
                        imgA.classList.remove('imgA-new-pos');
 +
                        imgA2.classList.remove('imgA-move2');
 +
                        imgA2.classList.remove('imgA-new-pos');
 +
                        imgA.classList.add('move-imgA');
 +
                        imgA2.classList.add('move2-imgA');
 +
                        imgA2.style.opacity = 0;
 +
 
 +
                        top_img.classList.remove('top-new-style');
 +
                         top_img.classList.add('top-old-style');
 +
                     }
 +
                    if (nextIndex == 2) {
 +
 
 +
                        img2_1.classList.remove('img2_1-new-pos');
 +
                        img2_1.style.opacity = 0;
 +
 
 +
                        text2.className = 'text2-old-pos';
 +
                    }
 +
                    if (index == 1) {
 +
                        imgA.classList.remove('move-imgA');
 +
                        imgA2.classList.remove('move2-imgA');
 +
 
 +
                        imgA.classList.add('imgA-move');
 +
                        imgA.style.opacity = 0;
 +
                        imgA.classList.add('imgA-new-pos');
  
 +
                        imgA2.classList.add('imgA-move2');
 +
                        imgA2.classList.add('imgA-new-pos');
 +
                        imgA2.style.opacity = 1;
 +
                        top_img.classList.remove('top-old-style');
 +
                        top_img.classList.add('top-new-style');
 +
                    }
 +
                    if (index == 2) {
 +
                        img2_1.classList.add('img2_1-new-pos');
 +
                        img2_1.classList.remove('gettinLifted');
 +
                    }
 +
                },
 +
                'afterLoad': function (anchorLink, index) {
 +
                    if (index != 1) {
 +
                        left_side.classList.remove('nope');
 +
                    }
 +
                    if (index == 1) {
 +
                        imgA2.style.opacity = 0;
 +
                        imgA.style.opacity = 1;
  
−
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+
                        text1.className = 'text1-new-pos';
−
    <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery?action=raw&ctype=text/javascript"></script>
+
                    }
−
    <!-- Include all compiled plugins (below), or include individual files as needed -->
+
                    if (index == 2) {
−
    <script src="https://2018.igem.org/Template:BIT-China/js/temp-waypoints?action=raw&ctype=text/javascript"></script>
+
                        img2_1.classList.add('gettinLifted');
−
    <script src="https://2018.igem.org/Template:BIT-China/js/temp-bootstrap?action=raw&ctype=text/javascript"></script>
+
                        img2_1.style.opacity = 1;
−
    <script src="https://2018.igem.org/Template:BIT-China/js/temp-scripts?action=raw&ctype=text/javascript"></script>
+
−
    <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery_flexslider?action=raw&ctype=text/javascript"></script>
+
−
    <script src="https://2018.igem.org/Template:BIT-China/js/temp-modernizr?action=raw&ctype=text/javascript"></script>
+
  
 +
                        text2.className = 'text2-new-pos';
 +
                    }
 +
                },
 +
            });
 +
        });
 +
    </script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 06:00, 21 August 2018

iGEM

  • PROJECT
  • EXPERIMENT
  • MODELING
  • HP
  • NOTEBOOK
  • ACHIEVEMENTS
  • TEAM
BIO-DETECTOR OF ANTIOXIDANTS

ROS plays a complicated roll in our daily life. It is a
crucial signal in living cells and it causes senescence,
thus it arouses great concerns of the public.

WHAT’S SPECIAL

There are many products that claim to have
the function of removing ROS for anti-aging.