|
|
| 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&ctype=text/css" />
| |
| − | <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-common-style?action=raw&ctype=text/css" />
| |
| − | <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-css-animation?action=raw&ctype=text/css" />
| |
| − | <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-mouse-template?action=raw&ctype=text/css" />
| |
| − | <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-mouse-media?action=raw&ctype=text/css" />
| |
| − | <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;
| |
| − | 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&ctype=text/javascript"></script>
| |
| − | <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery-fullPage-min?action=raw&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>
| |
