Difference between revisions of "Team:BIT-China"

(Blanked the page)
Line 1: Line 1:
 +
<html>
  
 +
<head>
 +
    <meta charset="utf-8" />
 +
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 +
    <title>iGEM</title>
 +
    <style>
 +
        body {
 +
            height: 100%;
 +
            width: 100%;
 +
            background-color: transparent !important;
 +
        }
 +
 +
        #globalWrapper {
 +
            margin: 0;
 +
            padding: 0;
 +
        }
 +
 +
        #content {
 +
            width: 100%;
 +
            padding: 0;
 +
            margin: -12px 0 0;
 +
            background-color: transparent !important;
 +
        }
 +
 +
        #top_title {
 +
            display: none;
 +
        }
 +
    </style>
 +
 +
    <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-fullPage-style?action=raw&amp;ctype=text/css" />
 +
    <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-common-style?action=raw&amp;ctype=text/css" />
 +
    <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-css-animation?action=raw&amp;ctype=text/css" />
 +
    <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-mouse-template?action=raw&amp;ctype=text/css" />
 +
    <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-mouse-media?action=raw&amp;ctype=text/css" />
 +
    <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-nav-dot-style?action=raw&amp;ctype=text/css" />
 +
 +
    <style>
 +
        .arr-style {
 +
            cursor: pointer;
 +
            position: absolute;
 +
            left: calc(50vw - 50px);
 +
            top: calc(100vh - 50px);
 +
            width: 50px;
 +
            height: 10px;
 +
        }
 +
 +
        .top-old-style {
 +
            cursor: pointer;
 +
            position: absolute;
 +
            right: 20px;
 +
            top: calc(100vh - 60px);
 +
            width: 30px;
 +
            height: 30px;
 +
            opacity: 0;
 +
            transition: all 1s;
 +
            -webkit-transition: all 1s;
 +
            -moz-transition: all 1s;
 +
            -ms-transition: all 1s;
 +
        }
 +
 +
        .top-new-style {
 +
            cursor: pointer;
 +
            position: absolute;
 +
            right: 20px;
 +
            top: calc(100vh - 60px);
 +
            width: 30px;
 +
            height: 30px;
 +
            opacity: 1;
 +
            transition: all 1s;
 +
            -webkit-transition: all 1s;
 +
            -moz-transition: all 1s;
 +
            -ms-transition: all 1s;
 +
        }
 +
 +
        .img2_1-old-pos {
 +
            z-index: 1;
 +
            position: absolute;
 +
            left: calc(20vw + 350px);
 +
            top: calc(0vh + 200px);
 +
 +
            height: 380px;
 +
            width: 600px;
 +
            opacity: 0;
 +
        }
 +
 +
        .img2_1-new-pos {
 +
            opacity: 0;
 +
            -webkit-transition: all .4s;
 +
            -moz-transition: all .4s;
 +
            -ms-transition: all .4s;
 +
            transition: all .4s;
 +
        }
 +
    </style>
 +
 +
</head>
 +
 +
<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>
 +
 +
    <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" />
 +
 +
    <div id="dowebok">
 +
        <div class="section" id="home_section_1">
 +
            <img id="img1_2" style="z-index: 2;position: absolute;left: calc(63vw - 185px);top: 40px;height: 280px;width: 520px;display: block;"
 +
                src="https://static.igem.org/mediawiki/2018/c/cd/T--BIT-China--iGEM2018-wz_img.png">
 +
            <img id="img1_1" style="z-index: 1;position: absolute;left:calc(63vw - 600px);top: 135px;height: 400px;width: 600px;" src="https://static.igem.org/mediawiki/2018/1/1c/T--BIT-China--iGEM2018-img_home_2.png">
 +
 +
            <div style="position: absolute;left:calc(63vw + 20px);top:400px;">
 +
                <div id="text1">
 +
                    <a class="a_style">
 +
                        BIO-DETECTOR OF ANTIOXIDANTS
 +
                    </a>
 +
                    <p class="p_style">
 +
                        ROS plays a complicated roll in our daily life. It is a
 +
                        <br>crucial signal in living cells and it causes senescence,
 +
                        <br>thus it arouses great concerns of the public.
 +
                    </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 class="section" id="home_section_2">
 +
            <img id="img2_2" style="z-index: 2;position: absolute;left: 20vw;top: 0vh;height: 500px;width: 500px; transform:rotate(1deg);"
 +
                src="https://static.igem.org/mediawiki/2018/d/da/T--BIT-China--iGEM2018-img_home_4.png">
 +
            <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 style="position: absolute;left:calc(20vw + 40px);top:calc(0vh + 480px);">
 +
                <div id="text2">
 +
                    <a class="a_style">
 +
                        WHAT’S SPECIAL
 +
                    </a>
 +
                    <p class="p_style">
 +
                        There are many products that claim to have
 +
                        <br> the function of removing ROS for anti-aging.
 +
                    </p>
 +
                </div>
 +
            </div>
 +
        </div>
 +
 +
        <div class="section" id="home_section_3">
 +
        </div>
 +
 +
        <div class="section" id="home_section_4">
 +
        </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">
 +
 +
    <div class="cursor">
 +
        <!-- Main -->
 +
        <div class="box"></div>
 +
        <div class="box hover"></div>
 +
    </div>
 +
 +
    <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery-min?action=raw&amp;ctype=text/javascript"></script>
 +
    <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery-fullPage-min?action=raw&amp;ctype=text/javascript"></script>
 +
    <script>
 +
        var left_side = document.getElementById('left-side'),
 +
            text1 = document.getElementById('text1'),
 +
            text2 = document.getElementById('text2'),
 +
            imgA = document.getElementById('imgA'),
 +
            imgA2 = document.getElementById('imgA2'),
 +
            img2_1 = document.getElementById('img2_1'),
 +
            top_img = document.getElementById('top-img');
 +
 +
        function arr_down() {
 +
            $.fn.fullpage.moveSectionDown();
 +
        }
 +
 +
        function top_up() {
 +
            $.fn.fullpage.moveTo(1);
 +
        };
 +
    </script>
 +
    <script>
 +
        $(function () {
 +
            $('#dowebok').fullpage({
 +
                'navigation': true,
 +
                'anchors': [],
 +
                'afterRender': function () {
 +
                    left_side.classList.add('nope');
 +
 +
                    imgA.className = 'imgA-old-pos';
 +
                    imgA2.className = 'imgA-old-pos';
 +
                    imgA2.style.opacity = 0;
 +
 +
                    top_img.classList.add('top-old-style');
 +
 +
                    text1.classList.add('sleepyEyes');
 +
                },
 +
                'onLeave': function (index, nextIndex, direction) {
 +
                    if (nextIndex == 1) {
 +
                        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');
 +
 +
                        text1.classList.add('sleepyEyes');
 +
                    }
 +
                    if (nextIndex == 2) {
 +
                        img2_1.classList.remove('img2_1-new-pos');
 +
                        img2_1.style.opacity = 0;
 +
 +
                        text2.classList.add('glaucoma');
 +
                    }
 +
 +
                    if (index == 1) {
 +
                        left_side.classList.remove('nope');
 +
                        text1.classList.remove('sleepyEyes');
 +
 +
                        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');
 +
 +
                        text2.classList.remove('glaucoma');
 +
                    }
 +
                },
 +
                'afterLoad': function (anchorLink, index) {
 +
                    if (index == 1) {
 +
                        imgA2.style.opacity = 0;
 +
                        imgA.style.opacity = 1;
 +
                    }
 +
                    if (index == 2) {
 +
                        img2_1.classList.add('gettinLifted');
 +
                        img2_1.style.opacity = 1;
 +
                    }
 +
                },
 +
            });
 +
        });
 +
    </script>
 +
</body>
 +
 +
</html>

Revision as of 09:26, 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.