Widget:新样式:修订间差异

H萌娘,万物皆可H的百科全书!
跳到导航 跳到搜索
imported>=海豚=
(=海豚=移动页面Widget:测试Widget:样式,不留重定向)
imported>=海豚=
无编辑摘要
第1行: 第1行:
<!-- 檀: Code Start Here (Create at 20201021) -->
<html>
<html>
   <head>
<link rel="stylesheet"
   <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&family=Galdeano&family=Limelight&display=swap" rel="stylesheet">
   href="https://2020.igem.org/wiki/index.php?title=Template:AHUT-ZJU-China/default.css&amp;action=raw&amp;ctype=text/css">
  </head>
<link rel="stylesheet"
  <script>
  href="https://2020.igem.org/wiki/index.php?title=Template:AHUT-ZJU-China/home-fonts.css&amp;action=raw&amp;ctype=text/css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
<style>
#main-header .main-nav nav ul li a {
color: #000;
text-decoration: none;
padding: 0;
transition: all .5s ease-in-out;
}
::selection {
background: rgba(255, 193, 8, 0.7);
color: #ffffff;
}


/* This code is built from two sources: developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event and https://css-tricks.com/updating-a-css-variable-with-javascript/. Please see the CSS note below for the :root bit
::-moz-selection {
*/
background: rgba(255, 193, 8, 0.7);
color: #ffffff;
}


  let root = document.documentElement;
::selection {
background: rgba(255, 193, 8, 0.7);
color: #ffffff;
}


   var body = document.body,
::-moz-selection {
    html = document.documentElement
background: rgba(255, 193, 8, 0.7);
color: #ffffff;
}
   #globalWrapper,
  #content,
  #HQ_page,
  #bodyContent,
  #mw-content-text {
    height: 100%;
  }


   var scrollLimit = 1800;
   * {
  var adjustedScrollLimit = scrollLimit - 0;
   font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   line-height: 1;
font-family: 'Playfair Display', serif !important;
  }


  window.addEventListener('scroll', e => {
#video-preload {
 
height: 0;
  // console.log(scrollY);
width: 0;
opacity: 0;
overflow: hidden;
}


  /* This following block was for the 'sticky' background 
#video-preload video {
   if(window.scrollY>scrollLimit){
height: 0;
   document.getElementById("bodybackground").style.backgroundAttachment = "fixed";
width: 0;
   document.getElementById("bodybackground").style.backgroundPosition = "0px " + scrollLimit + "px";
opacity: 0;
   } else if(window.scrollY<scrollLimit){
overflow: hidden;
   if(document.getElementById("bodybackground").style.backgroundAttachment == "fixed"){
}
   document.getElementById("bodybackground").style.backgroundAttachment = "local";
   document.getElementById("bodybackground").style.backgroundPosition = "0px 0px";
   }  
  }
  */ 
  });


/* When the user clicks on the button,
html, body {
toggle between hiding and showing the dropdown content */
padding: 0;
function showMenu(elementName) {
margin: 0;
   var dropdowns = document.getElementsByClassName("dropdown-content");
width: 100%;
   var i;
   height: 100%;
   for (i = 0; i < dropdowns.length; i++) {
   font-family: 'Playfair Display', serif !important;
    var openDropdown = dropdowns[i];
}
    if (openDropdown.classList.contains('show')) {
.page-section {
     openDropdown.classList.remove('show');
position: relative;
   }
width: 100%;
    }
height: 100%;
}
.next-btn {
   padding: 10px 18px;
   color: #fff;
   border: solid 1px #fff;
   display: inline-block;
   cursor: pointer;
   transition: all .3s ease-in-out;
   font-size: 16px;
}
.next-btn:hover {
background-color: #fff;
color: #000;
}
#hero-section video {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
#hero-section .side-bar {
position: absolute;
z-index: 102;
right: 0;
top: 220px;
bottom: 0;
width: 450px;
background-color: #000;
/* background: linear-gradient(135deg, transparent 20px, #000 0); */
}
#hero-section .side-bar.transform {
animation: side-bar-expand-shrink .6s 1;
-moz-animation: side-bar-expand-shrink .6s 1;
-webkit-animation: side-bar-expand-shrink .6s 1;
-o-animation: side-bar-expand-shrink .6s 1;
animation-timing-function: ease;
}
@keyframes side-bar-expand-shrink {
60%{
width: 100%;
top: 0;
}
70%{
width: 100%;
top: 0;
}
100%{
width: 450px;
top: 220px;
}
}
/*
#hero-section .side-bar::before {
content: '';
   position: absolute;
   height: 80px;
   width: 80px;
   left: -80px;
   bottom: 0;
   background-color: #000;
   background: linear-gradient(135deg, transparent 73px, #000 0);
}
*/
#hero-section .side-bar .content {
opacity: 1;
transition: opacity .5s ease-in-out;
}
#hero-section .side-bar .content.hide {
opacity: 0;
}
#hero-section .side-bar .top-title {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 30px 40px 20px 40px;
}
#hero-section .side-bar .bottom-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 40px;
border-top: solid 1px #525252;
text-align: right;
}
#hero-section .side-bar .top-title .subtitle {
color: #adadad;
   text-transform: uppercase;
   font-size: 13px;
}
#hero-section .side-bar .top-title h1 {
color: #fff;
   font-size: 25px;
   margin-top: 10px;
   margin-bottom: 0;
   text-transform: uppercase;
}
#hero-section .side-bar .text-content {
padding: 0 40px;
   overflow-y: auto;
   position: absolute;
   top: 100px;
   bottom: 62px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
#hero-section .side-bar .text-content::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
#hero-section .side-bar .text-content p {
color: #dedede;
font-size: 16px;
}
#hero-section .video-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(0 0 0 / 0);
   z-index: 101;
   transition: all .5s ease-in-out;
}
#hero-section .video-mask.show {
background-color: rgb(0 0 0 / 0.8);
}
#main-header {
position: absolute;
left: 0;
top: 0;
z-index: 102;
padding: 12px 30px;
padding-right: 50px;
background-color: #fff;
transition: all .5s ease-in-out;
background: linear-gradient(315deg, transparent 20px, #fff 0);
margin-top: 19px;
}
#main-header img.logo {
height: 80px;
width: auto;
transition: all .5s ease-in-out;
-webkit-filter: grayscale(0);
   filter: grayscale(0);
}
#main-header .float-left {
float: left;
}
#main-header .float-right {
float: right;
}
#main-header .float-clear {
clear: both;
}
#main-header .main-nav nav ul li {
color: #000;
    font-size: 16px;
   display: inline-block;
   margin: 15px 10px;
   transition: all .5s ease-in-out;
   cursor: pointer;
   border-left: solid 1px #000;
   padding: 0 0 2px 25px;
}
#main-header .main-nav nav ul {
padding-left: 20px;
transition: all .5s ease-in-out;
margin-top: 15px;
   margin-left: 0;


  document.getElementById(elementName).classList.toggle("show");
}
#main-header.shrink {
transition: all .5s ease-in-out;
}
#main-header.shrink .main-nav nav ul li {
margin: 2px 5px;
font-size: 13px;
border-left: solid 1px #000;
   padding: 0 0 3px 15px;
}
#main-header.shrink .main-nav nav ul {
padding-left: 15px;
margin: 15px 0 0 0;
}
#main-header.shrink img.logo {
height: 50px;
-webkit-filter: grayscale(100%);
   filter: grayscale(100%);
}
#main-header .sub-nav {
visibility: hidden;
opacity: 0;
transform: scaleY(0);
transition: all .5s ease-in-out;
}
#main-header .sub-nav.show {
visibility: visible;
opacity: 1;
transform: scaleY(1);
}
#main-header .sub-nav nav ul li {
display: block;
   padding: 5px 0 !important;
   border-left: none !important;
}
.fadedNavItem {
   color: #e6e6e6 !important;
   border-color: #e6e6e6 !important;
transition: all .5s ease-in-out;
}
.fadedNavItem a {
color: #e6e6e6 !important;
transition: all .5s ease-in-out;
}
}


// Close the dropdown menu if the user clicks outside of it
#main-header li {
window.onclick = function(event) {
-webkit-touch-callout: none;
if (!event.target.matches('.dropbtn')) {
     /* iOS Safari */
   var dropdowns = document.getElementsByClassName("dropdown-content");
     -webkit-user-select: none;
   var i;
     /* Chrome/Safari/Opera */
   for (i = 0; i < dropdowns.length; i++) {
     -khtml-user-select: none;
    var openDropdown = dropdowns[i];
     /* Konqueror */
    if (openDropdown.classList.contains('show')) {
     -moz-user-select: none;
     openDropdown.classList.remove('show');
     /* Firefox */
    }
     -ms-user-select: none;
    }
     /* Internet Explorer/Edge */
  }
     user-select: none;
}
.hero-title {
   position: absolute;
   z-index: 100;
   padding-bottom: 50px;
   padding-left: 50px;
   left: 0;
   bottom: 0;
   right: 0;
   background-image: linear-gradient(to top, black , transparent);
}
.hero-title h1 {
font-size: 40px;
   color: #fff;
   margin-bottom: 0;
}
.hero-title h2 {
   font-size: 14px;
   color: #fff;
   font-weight: 400;
   display: block;
   width: 650px;
   line-height: 1.5;
}
 
#mw-content-text {
margin-top: 10px;
}
#bodyContent h1 {
    font-weight: 600 !important;
}
#top_menu_14 {
background-color: #000000;
}
#top_menu_inside {
padding-top: 2px;
}
#top_menu_inside {
border: none !important;
margin-left: 3px !important;
}
}


</script>
.loading-cover {
 
display: flex;
<style>
justify-content: center;
 
align-items: center;
#sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
min-height: 100vh;
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
background: #042104;
body, html {background-color:white; width: 100%; height: 100%;}
animation: animateBg 10s linear infinite;
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
}
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
  /*2020 Colours:
Pink: #E5A1A9, rgb(229,161,169)
teal: #6ADFCD, rgb(106,223,205)
aqua: #5D8CDD, rgb(93,140,221)
purple: #6D4C93, rgb(109,76,147)
dark green: #1C4F3F, rgb(28,79,63)
logo text: #484494, rgb(72,68,148)
  margin: top right bottom left;
  margin: top right/left bottom;
  margin: top/bottom right/left;
  */
 


.loading-cover .loader{
position: relative;
width: 120px;
height: 120px;
}


:root{
.loading-cover .loader span{
--navBarPos: -75px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(calc(18deg * var(--i)));
}
 
.loading-cover .loader span::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background: #00ff0a;
box-shadow: 0 0 10px #00ff0a,
0 0 20px #00ff0a,
0 0 40px #00ff0a,
0 0 60px #00ff0a,
0 0 70px #00ff0a,
0 0 100px #00ff0a;
animation: animate 2s linear infinite;
animation-delay: calc(0.1s * var(--i));
}
 
@keyframes animateBg{
0%{filter: hue-rotate(0deg)}
100%{filter: hue-rotate(360deg)}
}
 
@keyframes animate{
0%{transform: scale(1);}
80%, 100%{transform: scale(0);}
}
 
#first-screen-loading-cover {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 100000;
}
}
 
  /* This block of code is taken from 2018.igem.org/Team:CUNY_Kingsborough and then modified as necessary */
  .dropbtn {
   border: none;
   background-color: #6c4c94;
   padding: 10px;
   font-family: 'Assistant', sans-serif !important;
   font-size:calc(12px + 0.8vw);
   color: white;
   text-decoration: none;
   width:100%;
   border-radius: 10px;
margin-left: 175px;
/* I added this rotation, just because :) */
  }


  .dd1 {
</style>
   transform:rotate(-10deg);
  }
  .dd2 {
   transform:rotate(-10deg);
  }
 
  .dd3 {
   transform:rotate(-5deg);
  }
 
 
  .navbarFix {
   min-width:900px;
}


  .dropbtn:hover {
   border: none;
   background-color: #6D4C93;
   color: #6ADFCD;
   padding: 10px;
   font-size:calc(12px + 0.8vw);
   transition: all 0.5s;
   text-decoration: bold;
   cursor: pointer;
  }


  .dropdown {
   margin-left: 2%;
   position: relative;
   display: inline-block;
   width: 12%;
   min-width:80px;
   margin-left: 75px;
   /* background-color: #6c4c94; */
  }


  .dropdown-content {
   display: none;
   position: absolute;
   min-width: 180px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 2;
   margin-left: 175px;
   transform:rotate(-10deg);
  }


  .show {
<div class="floating-nav-btn"></div>
   display: block;
<header id="main-header" class="shrink">
   }
<div class="float-left">
<img class="logo" src="https://2020.igem.org/wiki/images/7/74/T--AHUT-ZJU-China--logo%402x.png">
</div>
<div class="float-left main-nav">
<nav id="main-top-nav">
<ul>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China">HOME</a></li>
<li>TEAM</li>
<li>PROJECT</li>
<li>EXPERIMENTS</li>
<li>PARTS</li>
<li>HP</li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Model">MODEL</a></li>
<li><a href="https://igem.org/2020_Judging_Form?id=3656">JUDGING FORM</a></li>
</ul>
</nav>
<!-- Top Sub-Nav S -->
<div class="sub-nav" id="sub-nav-team" style="display: none">
<nav>
<ul>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Team">TEAM MEMBERS</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Attributions">ATTRIBUTION</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Collaborations">COLLABORATION</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Partnership">PARTNERSHIP</a></li>
</ul>
</nav>
</div>
<div class="sub-nav" id="sub-nav-project" style="display: none">
<nav>
<ul>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Description">DESCRIPTION</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Design">DESIGN</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Contribution">CONTRIBUTION</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Implementation">PROPOSED IMPLEMENTATION</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Proof_Of_Concept">PROOF OF CONCEPT</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Excellence_in_another_Area">EXCELLENCE IN ANOTHER AREA</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Engineering">ENGINEERING</a></li>
</ul>
</nav>
</div>
<div class="sub-nav" id="sub-nav-parts" style="display: none">
<nav>
<ul>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Parts">OVERVIEW</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/New_parts">NEW PARTS</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Improved_parts">IMPROVED PARTS</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Characterization">CHARACTERIZATION</a></li>
</ul>
</nav>
</div>
<div class="sub-nav" id="sub-nav-hp" style="display: none">
<nav>
<ul>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Human_Practices">HP FOR SILVER</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Human_Practices">INTEGRATED HP FOR GOLD</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Education">EDUCATION</a></li>
</ul>
</nav>
</div>
                 <div class="sub-nav" id="sub-nav-experiments" style="display: none">
<nav>
<ul>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Protocol">PROTOCOL</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Results">RESULTS</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Safety">SAFETY</a></li>
</ul>
</nav>
</div>
                 <!-- Top Sub-Nav E -->
</div>
<div class="float-clear"></div>
</header>
<!-- 檀: Video Preload -->
<div id="video-preload">
<video src="https://2020.igem.org/wiki/images/0/0b/T--AHUT-ZJU-China--factory.mp4" id="video-preload-first" autoplay="true" preload="load" muted></video>
<video src="https://2020.igem.org/wiki/images/4/41/T--AHUT-ZJU-China--lab.mp4" autoplay="true" preload="load" muted></video>
<video src="https://2020.igem.org/wiki/images/1/14/T--AHUT-ZJU-China--plant.mp4" autoplay="true" preload="load" muted></video>
</div>
<section id="hero-section" class="page-section">
<video id="slide-video" src="" autoplay="true" loop="loop" preload="load" muted></video>
<div class="hero-title">
<h1>Carbon Dioxide Capturer 3.0</h1>
<h2>Presented by Anhui University of Technology (AHUT) and Zhejiang  University (ZJU).</h2>
</div>
<div class="video-mask" id="video-mask"></div>
<div class="side-bar" id="side-bar">
<div class="content" id="side-bar-content">
<div class="top-title">
<div class="subtitle" id="slide-subtitle"></div>
<h1 id="slide-title"></h1>
</div>
<div class="text-content" id="slide-text-content"></div>
<!-- Hero Sidebar Title -->
<div class="bottom-title" id="slide-bottom-title">
<div class="next-btn" id="prev-btn">PREV SLIDE</div>
<div class="next-btn" id="next-btn">NEXT SLIDE</div>
</div>
</div>
</div>
</section>


  .dropdown-content a {
<div id="first-screen-loading-cover">
    border-bottom-style: solid;
    <div class="loading-cover">
   border-color: rgba(255, 255, 255, .7);
<div class="loader">
   border-width: 1px;
<span style="--i:1;"></span>
   color: black;
<span style="--i:2;"></span>
   background-color: #6ADFCD !important;
<span style="--i:3;"></span>
   font-family: 'Assistant', sans-serif !important;
<span style="--i:4;"></span>
   font-size: 16px;
<span style="--i:5;"></span>
   padding: 12px 16px;
<span style="--i:6;"></span>
   text-decoration: none;
<span style="--i:7;"></span>
   display: block;
<span style="--i:8;"></span>
  
<span style="--i:9;"></span>
  }
<span style="--i:10;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:13;"></span>
<span style="--i:14;"></span>
<span style="--i:15;"></span>
<span style="--i:16;"></span>
<span style="--i:17;"></span>
<span style="--i:18;"></span>
<span style="--i:19;"></span>
<span style="--i:20;"></span>
</div>
</div>
</div>


  .dropdown-content a:hover {
   background-color: #5d8cdd !important;
   color: white !important;
  }


/* Code leftover from hover functionality
<!-- 檀: HTML TAGS ENDS & SCRIPTS START -->
  .dropdown:hover .dropdown-content {
   display: block;
  }


  .dropdown:hover .dropbtn {
   background-color: #6c4c94;
  }
*/


.dropbtn:hover, .dropbtn:focus {
<script>
  background-color: #6c4c94;
var slideContent = [
{
"section": "PROJECT DESCRIPTION",
"title": "abstract",
"video-url": "https://2020.igem.org/wiki/images/0/0b/T--AHUT-ZJU-China--factory.mp4",
"content-html": "<p>Carbon dioxide (CO<sub>2</sub>) mainly from the combustion of fossil fuels is primary greenhouse gas associated with global warming and climate change; therefore, reducing the amount of CO<sub>2</sub> emitted into the atmosphere is an urgent need, of which CO<sub>2</sub> capture has become an extensively investigated area of research. In this project, we decided to use the biomimetic method of the enzyme (carbonic anhydrase, CA) for capturing CO<sub>2</sub>, which has the advantages of safety, high catalytic efficiency and environment-friendly compared with other methods. We designed an efficient and stable CA by improving the catalytic performance of CA from the OT3 strain of the hyperthermophilic archeon Pyrococcus horikoshii for capturing CO<sub>2</sub>. We use computer-aided analysis software to predict the ideal mutation site of the OT3-CA for improving its catalytic activity. In conclusion, we constructed a new part OT3-CA-WT and obtained its protein with higher thermostability, which is able to maintain its activity at 45 °C and 70°C. Furthermore, we obtained the mutant OT3-CA via molecular simulation with enhanced catalytic activity. The thermostability and efficiency of OT3-CA make it a potential candidate for CO<sub>2</sub> capture.</p>"
},
{
"section": "PROJECT DESCRIPTION",
"title": "CARBONIC ANHYDRASE",
"video-url": "https://2020.igem.org/wiki/images/4/41/T--AHUT-ZJU-China--lab.mp4",
"content-html": "<p>Carbonic anhydrase is a zinc metalloenzyme that catalyzes the reversible reaction of CO<sub>2</sub> and H<sub>2</sub>O to form HCO3<sup>-</sup> and H<sup>+</sup>. It is widely found in animals, plants and microorganisms, and plays an important role in biological processes such as carbon dioxide transfer, photosynthesis, acid-base balance and ion transport in the body.</p>"
},
{
"section": "PROJECT DESCRIPTION",
"title": "catalytic mechnism",
"video-url": "https://2020.igem.org/wiki/images/1/14/T--AHUT-ZJU-China--plant.mp4",
"content-html": "<p>The first step in the reaction is for the HYDROXyl group to act as a nucleophile and attack the carbon atoms in the CO<sub>2</sub> molecule. In the presence of water molecules, hydroxyl ions and CO<sub>2</sub> complexes are replaced by water molecules, detach from the active centers, and form bicarbonate ions. The second step is the regeneration of the active center Zn<sup>2+</sup> -OH <sup>-</sup>. When certain amino acids are used as hydrogen ion transport carriers, water molecules spontaneously ionize and dehydrogenate, and hydrogen ions are transported out of the hydrophobic center. The proton transport rate of the active center is the rate-limiting step of the enzyme-catalyzed reaction. The K<sub>at</sub> value of most carbonic anhydrases is >10<sup>6</sup> s<sup>-1</sup>.</p>"
}
];
</script>
<script>
// utility
function hasClass(ele, cls) {
  cls = cls || '';
  if (cls.replace(/\s/g, '').length == 0) return false;
  return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ');
}
function addClass(ele, cls) {
  if (!hasClass(ele, cls)) {
   ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
  }
}
function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
   var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
   while (newClass.indexOf(' ' + cls + ' ') >= 0) {
    newClass = newClass.replace(' ' + cls + ' ', ' ');
   }
   ele.className = newClass.replace(/^\s+|\s+$/g, '');
  }
}
function loadSlideContent(slideData, index) {
var subtitle = document.getElementById('slide-subtitle'),
title = document.getElementById('slide-title'),
content = document.getElementById('slide-text-content'),
video = document.getElementById('slide-video'),
nextSlideBtn = document.getElementById('next-btn'),
prevSlideBtn = document.getElementById('prev-btn');
subtitle.innerText = 'section: ' + slideData[index]['section'];
title.innerText = slideData[index]['title'];
content.innerHTML = slideData[index]['content-html'];
video.src = slideData[index]['video-url'];
// Hide Next Slide Btn
if (index == slideData.length - 1) {
nextSlideBtn.style.display = 'none';
} else {
nextSlideBtn.style.display = 'inline-block';
}
// Hide Prev Slide Btn
if (index == 0) {
prevSlideBtn.style.display = 'none';
} else {
prevSlideBtn.style.display = 'inline-block';
}
}
function goToSlide(slideData, page) {
// Hide All Inside Elements
addClass(sideBarContent, 'hide');
setTimeout(function() {
// Side Bar Expand-Shrink Animation
addClass(sideBar, 'transform');
setTimeout(function() {
// Load Next Slide Content
loadSlideContent(slideData, page);
}, 300);
setTimeout(function() {
removeClass(sideBar, 'transform');
// Show All Inside Elements
removeClass(sideBarContent, 'hide');
}, 600);
}, 500);
}
// Page Init
var currentSlidePage = 0;
// Load First Slide
loadSlideContent(slideContent, currentSlidePage);
// "Next Slide" Button Bind Event
var nextSlideBtn = document.getElementById('next-btn'),
sideBar = document.getElementById('side-bar'),
sideBarContent = document.getElementById('side-bar-content');
nextSlideBtn.addEventListener('click', function() {
goToSlide(slideContent, ++currentSlidePage);
});
// "Prev Slide" Button Bind Event
var prevSlideBtn = document.getElementById('prev-btn');
prevSlideBtn.addEventListener('click', function() {
goToSlide(slideContent, --currentSlidePage);
});
// Header Expand Animation
var mainHeader = document.getElementById('main-header'),
videoMask = document.getElementById('video-mask');
mainHeader.addEventListener('mouseover', function() {
removeClass(mainHeader, 'shrink');
videoMask.style.display = 'block';
addClass(videoMask, 'show');
});
mainHeader.addEventListener('mouseout', function() {
addClass(mainHeader, 'shrink');
removeClass(videoMask, 'show');
setTimeout(function() {
videoMask.style.display = 'block';
videoMask.style.zIndex = 0;
}, 500);
});
// Nav Action
function showSubNavMenu(name) {
var subNavMenu = document.getElementById('sub-nav-' + name);
subNavMenu.style.display = 'block';
setTimeout(function() {
addClass(subNavMenu, 'show');
}, 1);
// Fade Other Nav Item
var allLis = document.querySelectorAll('#main-top-nav ul li');
for (var i = 0; i < allLis.length; i++) {
if (allLis[i].innerText.toLocaleLowerCase() != name) {
addClass(allLis[i], 'fadedNavItem');
}
}
isInSubMenu = true;
}
function hideAllSubNavMenu() {
// Disable Current Active Item
var allSubNavs = document.querySelectorAll('#main-header .sub-nav');
for (var i = 0; i < allSubNavs.length; i++) {
if (hasClass(allSubNavs[i], 'show')) {
removeClass(allSubNavs[i], 'show');
allSubNavs[i].style.display = 'none';
}
}
// Unfade Other Nav Item
var allLis = document.querySelectorAll('#main-top-nav ul li');
for (var i = 0; i < allLis.length; i++) {
removeClass(allLis[i], 'fadedNavItem');
}
isInSubMenu = false;
}
var mainTopNav = document.getElementById('main-top-nav');
var isInSubMenu = false;
   mainTopNav.onclick = function (ev) {
     var ev = ev || window.event;
     var target = ev.target || ev.srcElement;
     var name = target.innerText.toLocaleLowerCase();
     if (isInSubMenu) {
if (!hasClass(target, 'fadedNavItem')) {
hideAllSubNavMenu();
     return;
} else {
     hideAllSubNavMenu();
}
}
     } else {
     hideAllSubNavMenu();
     }
     if (target.nodeName.toLocaleLowerCase() == 'li'){
       switch(name){
         case 'team':
         case 'project':
         case 'experiment':
         case 'parts':
         case 'hp':
         case 'experiments':
           showSubNavMenu(name);
           break;
       }
     }
   }


.dropdown-menu-center {
  left: 50% !important;
  right: auto !important;
  text-align: center !important;
  transform: translate(-50%, 0) !important;
  }
.logo {
  /* The image used */
  background-image: url("https://2020.igem.org/wiki/images/d/d6/T--Alma--navbar_no_boxes.png");
  min-height: 650px;
  width: 100vw;
 
  /* Center and scale the image nicely */
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;


  /* Needed to position the navbar */
// TPC: Additional Customize
  position: relative;
 
  border-bottom: 10px solid #484494;
 
}


/* Leftover, might not be necessary
var _tpc_giugiJGUI = document.querySelector('#mw-content-text p');
.container {
_tpc_giugiJGUI.parentNode.removeChild(_tpc_giugiJGUI);
  overflow: hidden;
  position: absolute;
  top: 290px;
  width: 100%;
  min-width: 1100px;
} */


/* The navbar */
.topnav {
  overflow: hidden;
  background-color: rgba(255, 0, 0, 0);
}


/* Navbar links */
var _tpc_uigGIUgkg23s = document.getElementById('top_menu_under');
.topnav a {
_tpc_uigGIUgkg23s.parentNode.removeChild(_tpc_uigGIUgkg23s);
  float: left;
  color: #484494;
  text-align: center;
  text-decoration: none;
  font-size:calc(18px + .5vw);
  width: 14.28%;
}
 
  */
.topnav a:hover {
  color: black;
}
 
.bodybackground {
  background-attachment: local;
  background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url("https://2020.igem.org/wiki/images/d/d0/T--Alma--Pine_River_Background_fullcolor.png") !important;
  width: 100%;
  height: 100%;
  background-size: cover;
  /*background-blend-mode: lighten;*/
 
  border-top: 10px solid #484494;
}


.bodymargin {
  margin: 0px;
  padding: 100px;
}
 
  .textcontainer {
  background-color: rgba(0,0,0,0.5) !important;
  border-radius: 15px;
  padding: 50px;
  padding-top: 75px;
  margin-top: 30px;
  max-width: auto;
}


/* Clear floats after the columns  */
// C Favicon
.rowcontainer:after {
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
  content: "";
   link.rel = 'shortcut icon';
  display: table;
   link.href = 'https://2020.igem.org/wiki/images/7/74/T--AHUT-ZJU-China--logo%402x.png';
  clear: both;
   document.getElementsByTagName('head')[0].appendChild(link);
}
 
.columnthirdleft {
  float: left;
  width: 33.33%;
}


.columntwothirdsright {
var isFPLoaded = false;
  float: right;
  width: 66.67%;
}
 
.columnthirdright {
  float: right;
  width: 33.33%;
}


.columntwothirdsleft {
  float: left;
  width: 66.67%;
}


 
// 主页加载动画
.extraspace {
var fvc = document.getElementById('video-preload-first');
  margin: 50px;
fvc.addEventListener("canplay", function () {
}
   isFPLoaded = true;
  
   // 首屏视频预加载完成
.pstyle {
   setTimeout(function() {
  line-height: 25px;
    $('#first-screen-loading-cover').fadeOut(800);
font-family: 'Assistant', sans-serif !important;
    setTimeout(function(){
  font-size: 20px;
    $('#first-screen-loading-cover').remove();
   margin: 25px 0px;
    }, 801);
  color: white;
  }, 1500);
}
});
 
// a timeout
.pleft {
setTimeout(function(){
   padding-right: 35px;
if(!isFPLoaded){
}
   isFPLoaded = true;
   
   // 首屏视频预加载超时,直接显示
.pright {
   setTimeout(function() {
   padding-left: 35px;
   $('#first-screen-loading-cover').fadeOut(800);
   setTimeout(function(){
    $('#first-screen-loading-cover').remove();
.headline {
   }, 801);
    font-family: 'Limelight', arial, sans-serif !important;
  }, 1500);
   font-size: 75px;
   color: #6ADFCD;
   text-align: center;
    text-transform: uppercase;
  
}
/* Subheadline */
.subheadline {
   font-family: 'Galdeano', arial, sans-serif !important;
  line-height: 47px;
   font-size: 35px;
    color: #6ADFCD
}
.centertext {
  text-align: center;
}
 
.centerimg {
  display: block;
   margin-right: auto;
   margin-left: auto;
}
   
.leftimg {
  display: block;
  max-width: 100%;
  float: left;
  padding: 22px 0px 20px;
}
 
.rightimg {
  display: block;
  max-width: 100%;
  float: right;
  padding: 22px 0px 20px;
}
 
#desc {
  display: block;
  margin-right: auto;
  margin-left: auto;
  max-width: 75%;
  text-align: center;
  margin-top: 40px;
}
 
figcaption {
  color: white;
  text-align: left;
}
 
.hyperlink {
  color: #6ADFCD !important;
}
}
 
}, 6500);
.hyperlink:hover {
  text-shadow: #C0C0C0 0px 0px 1px,  #C0C0C0 0px 0px 1px,  #C0C0C0 0px 0px 1px,
       #C0C0C0 0px 0px 1px,  #C0C0C0 0px 0px 1px,  #C0C0C0 0px 0px 1px;
  text-decoration: none;
}
 
.hyperlink:visited {
  color: #E5A1A9 !important;
}
  span {
  color: red !important;
  font-weight: 700 !important;
}
 
</style>
 
<body> 
  <div class="logo">
  
  <!-- <div class="container">
  </div> -->
  </div> 
 
<div class="navbarFix">
<div class="dropdown" style="top:calc(var(--navBarPos) - 0px);">
  <button class="dropbtn dd1" onClick="showMenu('myDropdown1')">Project</button>
  <div id="myDropdown1" class="dropdown-content dropdown-menu-center">
   <a href="http://2020.igem.org/Team:Alma/Description">Description</a>
     <a href="http://2020.igem.org/Team:Alma/Engineering">Engineering</a>
     <!--<a href="http://2020.igem.org/Team:Alma/Model">Math Modeling</a>-->
     <a href="http://2020.igem.org/Team:Alma/Contribution">Contribution</a>
     <a href="https://2020.igem.org/Team:Alma/Implementation">Proposed Implementation</a>
    <!-- <a href="http://2020.igem.org/Team:Alma/Safety">Safety</a> -->
     <a href="http://2020.igem.org/Team:Alma/Parts">Parts</a>
    </div>
  </div>
 
<div class="dropdown" style="top:calc(var(--navBarPos) - 50px);">
  <button class="dropbtn dd2" onClick="showMenu('myDropdown2')">Human Practices</button>
  <div id="myDropdown2" class="dropdown-content dropdown-menu-center">
   <a  href="http://2020.igem.org/Team:Alma/Human_Practices">Human Practices</a>
     <a href="http://2020.igem.org/Team:Alma/Education">Science Communication</a>
     <a href="http://2020.igem.org/Team:Alma/Collaborations">Collaboration</a>
    </div>
  </div>
 
<div class="dropdown" style="top:calc(var(--navBarPos) - 75px);">
  <button class="dropbtn dd3" onClick="showMenu('myDropdown3')">Team</button>
  <div id="myDropdown3" class="dropdown-content dropdown-menu-center">
   <a  href="http://2020.igem.org/Team:Alma/Team">Team</a>
     <a href="http://2020.igem.org/Team:Alma/Attributions">Attributions</a>
    </div>
  </div>
 
<div class="dropdown" style="top:calc(var(--navBarPos) - 85px);">
  <button class="dropbtn" onClick="showMenu('myDropdown4')">Other</button>
  <div id="myDropdown4" class="dropdown-content dropdown-menu-center">
     <a href="http://2020.igem.org/Team:Alma/References">References</a>
   <a  href="http://2020.igem.org/Team:Alma/Poster" target="_blank">Poster</a>
     <a href="https://igem.org/2020_Judging_Form?id=3445" target="_blank">Judging Form</a>
    </div>
  </div> 
 
  </div>




 
</script>
  <!--promo video -->
 
  <div class="subheadline centertext" style="color:#6D4C93 !important">
   Watch our project promotion video!
  </div>
<div class="pstyle centertext" style="color:black !important">Or watch our project presentation video <a class="hyperlink" href="https://video.igem.org/videos/watch/e8dd4d59-79f2-4853-b1a0-fb847fec8554" target="_blank">here.</a></div>
 
<div class="extraspace" style="margin:5px"></div> 
 
  <iframe class="centerimg" width="800" height="450" sandbox="allow-same-origin allow-scripts allow-popups" src="https://video.igem.org/videos/embed/5a8e20cd-a763-4fa2-ae07-3e1a1b4aab65" frameborder="0" allowfullscreen></iframe>
 
<!--top-->   
  <div id="desc" class="pstyle" style="color:black !important">
    The Pine River runs through mid-Michigan in southwest Isabella, Montcalm,
    and Gratiot counties. <br>Its history is long and unfortunate: the once-beautiful river is now a polluted danger zone.
  </div> 
  <div class="extraspace"></div>




  <div class="bodybackground">
<div class="bodymargin">
      <div class="textcontainer">
  
<div class="rowcontainer">
  <!--row 1 starts-->
  <div class="columntwothirdsleft">
<div class="subheadline">Foundations &amp; Formulations</div>
  <div class="pstyle pleft">
    In 1853, Joseph Clapp founded St. Louis, MI, later building a sawmill and a dam along the Pine River.
    In May of 1856, Clapp sold his sawmill and surrounding forest to Richard G. Hillyer,
    Lewis M. Clark, and George W. Davis of Saginaw. They began to lumber their new property.
   </div>
  </div>
   <div class="columnthirdright">
   <img class="rightimg" src="https://2020.igem.org/wiki/images/1/12/T--Alma--St_Louis_water_tower.png" alt="St. Louis, MI">
   </div>
</div>
  <!--row 2-->
  <div class="rowcontainer">
   <div class="columnthirdleft">
    <img class="leftimg"src="https://2020.igem.org/wiki/images/5/5a/T--Alma--pine_river_scenery.png" alt="The Pine River in autumn">
  </div>
  <div class="columntwothirdsright">
   <div class="pstyle pright">
    In the 1930s, the newly organized Michigan Chemical Corporation had acquired a 14-acre site of the sawmill,
    salt block, and bromine plant. On September 15, 1935, ground was broken for the construction of a chemical plant
    on the banks of the Pine River. Throughout this decade, the company manufactured products such as Crystal Flow salt,
    and eventually dedicated themselves to full chemical research. During World War II, the corporation began
    researching an effective new insecticide called DDT (Dichloro-diphenyl-trichloroethane). More research led to
    constructing a DDT plant in April 1944. The corporation then sent tons of the product to the Army and Navy
    to help them serve in insect-ridden areas. In the 1950s and 1960s, the Michigan Chemical Corporation grew
    into a complex array of buildings and storage tanks across the west side of St. Louis, pumping millions of dollars into the area's economy.
   </div>
  </div>
  </div>
  <!--row 1 ends-->
 
  <!--row 2 starts-->
  <div class="rowcontainer">
  <div class="columntwothirdsleft">
  <div class="subheadline">Chemicals, Cattle, &amp; Contamination</div>
   <div class="pstyle pleft">
    In the 1960s, DDT questions arose about its effectiveness due to more-resistant insects and its negative
    impact on other living organisms. A few years later, the Michigan Chemical Corporation was bought by the
    Velsicol Chemical Company and the production of DDT ceased in 1964, and DDT was eventually outlawed in 1973.
    During the 1970s Velsicol’s main products included Firemaster, a fire retardant with a chemical called PBB
    (Polybrominated Biphenyl), and Nutrimaster, a supplemental cattle feed. In 1973, there was a tragic mix up
    and Nutrimaster bags filled with PBB-laden Firemaster were sent to the Farm Bureau services, leading to the
    slaughter of hundreds of poisoned cattle. However, contaminated meat had already been sold throughout the
    state and nearly every person in the Lower Peninsula ingested PBB. The effects were unknown and there were
    an estimated $200 million in lawsuits.
   </div>
  </div>
  <div class="columnthirdright">
   <img class="rightimg" src="https://2020.igem.org/wiki/images/4/4b/T--Alma--superfund_site_2.png" alt="The location of the former Velsicol Chemical Plant">
   </div>


  </div>
  <div class=“extraspace”></div>
<!--row 2 ends-->    
 
  <!-- row 3 starts-->
<div class="rowcontainer">
    <div class="columnthirdleft">
    <img class="leftimg" src="https://2020.igem.org/wiki/images/9/92/T--Alma--superfund_main_sign.png" alt="Velsicol Chemical Plant Superfund Site Sign">
   </div>
   <div class="columntwothirdsright">
     <div class="subheadline pright">Severance &amp; Shutdown</div>
     <div class="pstyle pright">
      Around this time the Michigan Department of Natural Resources (DNR) stepped in to investigate the effects
      of the Velsicol Chemical Company’s operations surrounding the Pine River. They found the waterway and the
      company’s buildings, and property were highly contaminated by years of chemical production. In 1982, the
      U.S Environmental Protection Agency (EPA) offered Velsicol a deal to pay $38 million in damages in exchange for
      legal freedom of responsibility for the contamination. The buildings on the property were dismantled and
      the area was covered by clay to seal in the contamination. The area was fenced off and became an expensive plot of dirt.
    </div>
  </div>


</div>
  <div class=“extraspace”></div>
  <!--row 3 ends-->
 
  <!--row 4 starts-->
<div class="rowcontainer">
  <div class="columntwothirdsleft">
   <div class="subheadline">Pollution, Problems, &amp; Persistence
   </div>
   <div class="pstyle pleft">
    Throughout the years, the DNR continued to monitor the river and found that sixteen years after the plant
    ceased operations the fish of the river were also poisoned with DDT. Further into the investigation it was
    discovered that river sediment next to the plant site was 4% DDT/DDT derivatives. The pollution problem was
    far from solved and, in fact, getting worse. In 1997, the Pine River Superfund Citizens Task force was
    formed as a local advisory group to the EPA. They pushed the EPA for money to clean up the site. The EPA
    eventually fulfilled the request and a filtration process began that still occurs today.
   </div>
  </div>
   <div class="columnthirdright">
   <img class="rightimg"src="https://2020.igem.org/wiki/images/5/59/T--Alma--superfund_memorial_bench.png" alt="Bench at the site proclaiming mutual goals to restore the Pine River ecosystem to its former glory">
  </div>
</div>
  <div class=“extraspace”></div>
  <!--row 4 ends-->
  <!--row 5 starts-->     
       <div class="rowcontainer">
    <div class="columnthirdleft">
    <img class="leftimg" src="https://2020.igem.org/wiki/images/a/a1/T--Alma--Lab_for_homepage.jpeg" alt="iGEMers in lab">
   </div>
   <div class="columntwothirdsright">
     <div class="subheadline pright">Research &amp; Revival</div>
     <div class="pstyle pright">
      Our team's two-year project, Poisoned River, will focus on creating a DDT-detecting biosensor to aid researchers and cut down on costs.
      Several species of animals have estrogen receptors known to bind DDT, a known xenoestrogen. Linking this binding
      process to a reporting gene, such as RFP, within a microbe will allow for the detection of organochlorides,
      which can enhance broad spectrum screening of these contaminated areas both locally and globally. 
      Ultimately, this biosensor has the potential to save thousands of dollars in the pollution cleanup effort
      as well as provide a basis for the development of future synthetic biology tools for the bioremediation of DDT.
    </div>
  </div>
<div class=“extraspace”></div>
</div>
<!-- end row 5-->
 
  
      </div>
  </div> <!-- ends "bodymargin" -->
  </div> <!-- ends "bodybackground" -->
  </body>
</html>
</html>

2021年4月19日 (一) 21:14的版本


<html> <link rel="stylesheet"

 href="https://2020.igem.org/wiki/index.php?title=Template:AHUT-ZJU-China/default.css&action=raw&ctype=text/css">

<link rel="stylesheet"

 href="https://2020.igem.org/wiki/index.php?title=Template:AHUT-ZJU-China/home-fonts.css&action=raw&ctype=text/css">

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet"> <style>

  1. main-header .main-nav nav ul li a {

color: #000; text-decoration: none; padding: 0; transition: all .5s ease-in-out; }

selection {

background: rgba(255, 193, 8, 0.7); color: #ffffff; }

-moz-selection {

background: rgba(255, 193, 8, 0.7); color: #ffffff; }

selection {

background: rgba(255, 193, 8, 0.7); color: #ffffff; }

-moz-selection {

background: rgba(255, 193, 8, 0.7); color: #ffffff; }

 #globalWrapper,
 #content,
 #HQ_page,
 #bodyContent,
 #mw-content-text {
   height: 100%;
 }
 * {
   font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   line-height: 1;

font-family: 'Playfair Display', serif !important;

 }
  1. video-preload {

height: 0; width: 0; opacity: 0; overflow: hidden; }

  1. video-preload video {

height: 0; width: 0; opacity: 0; overflow: hidden; }

html, body { padding: 0; margin: 0; width: 100%;

   	height: 100%;
   	font-family: 'Playfair Display', serif !important;

} .page-section { position: relative; width: 100%; height: 100%; } .next-btn {

   padding: 10px 18px;
   color: #fff;
   border: solid 1px #fff;
   display: inline-block;
   cursor: pointer;
   transition: all .3s ease-in-out;
   font-size: 16px;

} .next-btn:hover { background-color: #fff; color: #000; } #hero-section video { position: relative; width: 100%; height: 100%; object-fit: cover; } #hero-section .side-bar { position: absolute; z-index: 102; right: 0; top: 220px; bottom: 0; width: 450px; background-color: #000; /* background: linear-gradient(135deg, transparent 20px, #000 0); */ } #hero-section .side-bar.transform { animation: side-bar-expand-shrink .6s 1; -moz-animation: side-bar-expand-shrink .6s 1; -webkit-animation: side-bar-expand-shrink .6s 1; -o-animation: side-bar-expand-shrink .6s 1; animation-timing-function: ease; } @keyframes side-bar-expand-shrink { 60%{ width: 100%; top: 0; } 70%{ width: 100%; top: 0; } 100%{ width: 450px; top: 220px; } } /* #hero-section .side-bar::before { content: ; position: absolute; height: 80px; width: 80px; left: -80px; bottom: 0; background-color: #000; background: linear-gradient(135deg, transparent 73px, #000 0); } */ #hero-section .side-bar .content { opacity: 1; transition: opacity .5s ease-in-out; } #hero-section .side-bar .content.hide { opacity: 0; } #hero-section .side-bar .top-title { position: absolute; top: 0; left: 0; right: 0; padding: 30px 40px 20px 40px; } #hero-section .side-bar .bottom-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 40px; border-top: solid 1px #525252; text-align: right; } #hero-section .side-bar .top-title .subtitle { color: #adadad; text-transform: uppercase; font-size: 13px; } #hero-section .side-bar .top-title h1 { color: #fff; font-size: 25px; margin-top: 10px; margin-bottom: 0; text-transform: uppercase; } #hero-section .side-bar .text-content { padding: 0 40px; overflow-y: auto; position: absolute; top: 100px; bottom: 62px; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ }

  1. hero-section .side-bar .text-content::-webkit-scrollbar {
 display: none; /* Chrome Safari */

} #hero-section .side-bar .text-content p { color: #dedede; font-size: 16px; } #hero-section .video-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(0 0 0 / 0);

   	z-index: 101;
   	transition: all .5s ease-in-out;

} #hero-section .video-mask.show { background-color: rgb(0 0 0 / 0.8); } #main-header { position: absolute; left: 0; top: 0; z-index: 102; padding: 12px 30px; padding-right: 50px; background-color: #fff; transition: all .5s ease-in-out; background: linear-gradient(315deg, transparent 20px, #fff 0); margin-top: 19px; } #main-header img.logo { height: 80px; width: auto; transition: all .5s ease-in-out; -webkit-filter: grayscale(0);

   	filter: grayscale(0);

} #main-header .float-left { float: left; } #main-header .float-right { float: right; } #main-header .float-clear { clear: both; } #main-header .main-nav nav ul li { color: #000;

   font-size: 16px;
   display: inline-block;
   margin: 15px 10px;
   transition: all .5s ease-in-out;
   cursor: pointer;
   border-left: solid 1px #000;
   padding: 0 0 2px 25px;

} #main-header .main-nav nav ul { padding-left: 20px; transition: all .5s ease-in-out; margin-top: 15px;

   margin-left: 0;

} #main-header.shrink { transition: all .5s ease-in-out; } #main-header.shrink .main-nav nav ul li { margin: 2px 5px; font-size: 13px; border-left: solid 1px #000;

   padding: 0 0 3px 15px;

} #main-header.shrink .main-nav nav ul { padding-left: 15px; margin: 15px 0 0 0; } #main-header.shrink img.logo { height: 50px; -webkit-filter: grayscale(100%);

   	filter: grayscale(100%);

} #main-header .sub-nav { visibility: hidden; opacity: 0; transform: scaleY(0); transition: all .5s ease-in-out; } #main-header .sub-nav.show { visibility: visible; opacity: 1; transform: scaleY(1); } #main-header .sub-nav nav ul li { display: block;

   padding: 5px 0 !important;
   border-left: none !important;

} .fadedNavItem {

   color: #e6e6e6 !important;
   border-color: #e6e6e6 !important;

transition: all .5s ease-in-out; } .fadedNavItem a { color: #e6e6e6 !important; transition: all .5s ease-in-out; }

#main-header li { -webkit-touch-callout: none;

       /* iOS Safari */
       -webkit-user-select: none;
       /* Chrome/Safari/Opera */
       -khtml-user-select: none;
       /* Konqueror */
       -moz-user-select: none;
       /* Firefox */
       -ms-user-select: none;
       /* Internet Explorer/Edge */
       user-select: none;

} .hero-title { position: absolute; z-index: 100; padding-bottom: 50px; padding-left: 50px; left: 0; bottom: 0; right: 0; background-image: linear-gradient(to top, black , transparent); } .hero-title h1 { font-size: 40px; color: #fff; margin-bottom: 0; } .hero-title h2 { font-size: 14px; color: #fff; font-weight: 400; display: block; width: 650px;

   line-height: 1.5;

}

  1. mw-content-text {

margin-top: 10px; }

  1. bodyContent h1 {
   font-weight: 600 !important;

}

  1. top_menu_14 {

background-color: #000000; }

  1. top_menu_inside {

padding-top: 2px; }

  1. top_menu_inside {

border: none !important; margin-left: 3px !important; }

.loading-cover { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #042104; animation: animateBg 10s linear infinite; }

.loading-cover .loader{ position: relative; width: 120px; height: 120px; }

.loading-cover .loader span{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(calc(18deg * var(--i))); }

.loading-cover .loader span::before{ content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: #00ff0a; box-shadow: 0 0 10px #00ff0a, 0 0 20px #00ff0a, 0 0 40px #00ff0a, 0 0 60px #00ff0a, 0 0 70px #00ff0a, 0 0 100px #00ff0a; animation: animate 2s linear infinite; animation-delay: calc(0.1s * var(--i)); }

@keyframes animateBg{ 0%{filter: hue-rotate(0deg)} 100%{filter: hue-rotate(360deg)} }

@keyframes animate{ 0%{transform: scale(1);} 80%, 100%{transform: scale(0);} }

  1. first-screen-loading-cover {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 100000;

}

</style>



<header id="main-header" class="shrink">

</header>

<video src="https://2020.igem.org/wiki/images/0/0b/T--AHUT-ZJU-China--factory.mp4" id="video-preload-first" autoplay="true" preload="load" muted></video> <video src="https://2020.igem.org/wiki/images/4/41/T--AHUT-ZJU-China--lab.mp4" autoplay="true" preload="load" muted></video> <video src="https://2020.igem.org/wiki/images/1/14/T--AHUT-ZJU-China--plant.mp4" autoplay="true" preload="load" muted></video>

<section id="hero-section" class="page-section"> <video id="slide-video" src="" autoplay="true" loop="loop" preload="load" muted></video>

Carbon Dioxide Capturer 3.0

Presented by Anhui University of Technology (AHUT) and Zhejiang University (ZJU).

</section>



<script> var slideContent = [ { "section": "PROJECT DESCRIPTION", "title": "abstract", "video-url": "https://2020.igem.org/wiki/images/0/0b/T--AHUT-ZJU-China--factory.mp4",

"content-html": "

Carbon dioxide (CO2) mainly from the combustion of fossil fuels is primary greenhouse gas associated with global warming and climate change; therefore, reducing the amount of CO2 emitted into the atmosphere is an urgent need, of which CO2 capture has become an extensively investigated area of research. In this project, we decided to use the biomimetic method of the enzyme (carbonic anhydrase, CA) for capturing CO2, which has the advantages of safety, high catalytic efficiency and environment-friendly compared with other methods. We designed an efficient and stable CA by improving the catalytic performance of CA from the OT3 strain of the hyperthermophilic archeon Pyrococcus horikoshii for capturing CO2. We use computer-aided analysis software to predict the ideal mutation site of the OT3-CA for improving its catalytic activity. In conclusion, we constructed a new part OT3-CA-WT and obtained its protein with higher thermostability, which is able to maintain its activity at 45 °C and 70°C. Furthermore, we obtained the mutant OT3-CA via molecular simulation with enhanced catalytic activity. The thermostability and efficiency of OT3-CA make it a potential candidate for CO2 capture.

"

}, { "section": "PROJECT DESCRIPTION", "title": "CARBONIC ANHYDRASE", "video-url": "https://2020.igem.org/wiki/images/4/41/T--AHUT-ZJU-China--lab.mp4",

"content-html": "

Carbonic anhydrase is a zinc metalloenzyme that catalyzes the reversible reaction of CO2 and H2O to form HCO3- and H+. It is widely found in animals, plants and microorganisms, and plays an important role in biological processes such as carbon dioxide transfer, photosynthesis, acid-base balance and ion transport in the body.

"

}, { "section": "PROJECT DESCRIPTION", "title": "catalytic mechnism", "video-url": "https://2020.igem.org/wiki/images/1/14/T--AHUT-ZJU-China--plant.mp4",

"content-html": "

The first step in the reaction is for the HYDROXyl group to act as a nucleophile and attack the carbon atoms in the CO2 molecule. In the presence of water molecules, hydroxyl ions and CO2 complexes are replaced by water molecules, detach from the active centers, and form bicarbonate ions. The second step is the regeneration of the active center Zn2+ -OH -. When certain amino acids are used as hydrogen ion transport carriers, water molecules spontaneously ionize and dehydrogenate, and hydrogen ions are transported out of the hydrophobic center. The proton transport rate of the active center is the rate-limiting step of the enzyme-catalyzed reaction. The Kat value of most carbonic anhydrases is >106 s-1.

"

} ]; </script> <script> // utility function hasClass(ele, cls) { cls = cls || ; if (cls.replace(/\s/g, ).length == 0) return false; return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' '); } function addClass(ele, cls) { if (!hasClass(ele, cls)) { ele.className = ele.className ==  ? cls : ele.className + ' ' + cls; } } function removeClass(ele, cls) { if (hasClass(ele, cls)) { var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, ) + ' '; while (newClass.indexOf(' ' + cls + ' ') >= 0) { newClass = newClass.replace(' ' + cls + ' ', ' '); } ele.className = newClass.replace(/^\s+|\s+$/g, ); } } function loadSlideContent(slideData, index) { var subtitle = document.getElementById('slide-subtitle'), title = document.getElementById('slide-title'), content = document.getElementById('slide-text-content'), video = document.getElementById('slide-video'), nextSlideBtn = document.getElementById('next-btn'), prevSlideBtn = document.getElementById('prev-btn'); subtitle.innerText = 'section: ' + slideData[index]['section']; title.innerText = slideData[index]['title']; content.innerHTML = slideData[index]['content-html']; video.src = slideData[index]['video-url']; // Hide Next Slide Btn if (index == slideData.length - 1) { nextSlideBtn.style.display = 'none'; } else { nextSlideBtn.style.display = 'inline-block'; } // Hide Prev Slide Btn if (index == 0) { prevSlideBtn.style.display = 'none'; } else { prevSlideBtn.style.display = 'inline-block'; } } function goToSlide(slideData, page) { // Hide All Inside Elements addClass(sideBarContent, 'hide'); setTimeout(function() { // Side Bar Expand-Shrink Animation addClass(sideBar, 'transform'); setTimeout(function() { // Load Next Slide Content loadSlideContent(slideData, page); }, 300); setTimeout(function() { removeClass(sideBar, 'transform'); // Show All Inside Elements removeClass(sideBarContent, 'hide'); }, 600); }, 500); } // Page Init var currentSlidePage = 0; // Load First Slide loadSlideContent(slideContent, currentSlidePage); // "Next Slide" Button Bind Event var nextSlideBtn = document.getElementById('next-btn'), sideBar = document.getElementById('side-bar'), sideBarContent = document.getElementById('side-bar-content'); nextSlideBtn.addEventListener('click', function() { goToSlide(slideContent, ++currentSlidePage); }); // "Prev Slide" Button Bind Event var prevSlideBtn = document.getElementById('prev-btn'); prevSlideBtn.addEventListener('click', function() { goToSlide(slideContent, --currentSlidePage); }); // Header Expand Animation var mainHeader = document.getElementById('main-header'), videoMask = document.getElementById('video-mask'); mainHeader.addEventListener('mouseover', function() { removeClass(mainHeader, 'shrink'); videoMask.style.display = 'block'; addClass(videoMask, 'show'); }); mainHeader.addEventListener('mouseout', function() { addClass(mainHeader, 'shrink'); removeClass(videoMask, 'show'); setTimeout(function() { videoMask.style.display = 'block'; videoMask.style.zIndex = 0; }, 500); }); // Nav Action function showSubNavMenu(name) { var subNavMenu = document.getElementById('sub-nav-' + name); subNavMenu.style.display = 'block'; setTimeout(function() { addClass(subNavMenu, 'show'); }, 1); // Fade Other Nav Item var allLis = document.querySelectorAll('#main-top-nav ul li'); for (var i = 0; i < allLis.length; i++) { if (allLis[i].innerText.toLocaleLowerCase() != name) { addClass(allLis[i], 'fadedNavItem'); } } isInSubMenu = true; } function hideAllSubNavMenu() { // Disable Current Active Item var allSubNavs = document.querySelectorAll('#main-header .sub-nav'); for (var i = 0; i < allSubNavs.length; i++) { if (hasClass(allSubNavs[i], 'show')) { removeClass(allSubNavs[i], 'show'); allSubNavs[i].style.display = 'none'; } } // Unfade Other Nav Item var allLis = document.querySelectorAll('#main-top-nav ul li'); for (var i = 0; i < allLis.length; i++) { removeClass(allLis[i], 'fadedNavItem'); } isInSubMenu = false; } var mainTopNav = document.getElementById('main-top-nav'); var isInSubMenu = false;

   mainTopNav.onclick = function (ev) {
       var ev = ev || window.event;
       var target = ev.target || ev.srcElement;
       var name = target.innerText.toLocaleLowerCase();
       if (isInSubMenu) {

if (!hasClass(target, 'fadedNavItem')) { hideAllSubNavMenu();

       	return;

} else {

       	hideAllSubNavMenu();

}

       } else {
       	hideAllSubNavMenu();
       }
       if (target.nodeName.toLocaleLowerCase() == 'li'){
           switch(name){
               case 'team':
               case 'project':
               case 'experiment':
               case 'parts':
               case 'hp':
               case 'experiments':
                   showSubNavMenu(name);
                   break;
           }
       }
   }


// TPC: Additional Customize

var _tpc_giugiJGUI = document.querySelector('#mw-content-text p'); _tpc_giugiJGUI.parentNode.removeChild(_tpc_giugiJGUI);


var _tpc_uigGIUgkg23s = document.getElementById('top_menu_under'); _tpc_uigGIUgkg23s.parentNode.removeChild(_tpc_uigGIUgkg23s);


// C Favicon var link = document.querySelector("link[rel*='icon']") || document.createElement('link');

   link.rel = 'shortcut icon';
   link.href = 'https://2020.igem.org/wiki/images/7/74/T--AHUT-ZJU-China--logo%402x.png';
   document.getElementsByTagName('head')[0].appendChild(link);

var isFPLoaded = false;


// 主页加载动画 var fvc = document.getElementById('video-preload-first'); fvc.addEventListener("canplay", function () {

 isFPLoaded = true;
 // 首屏视频预加载完成
 setTimeout(function() {
   $('#first-screen-loading-cover').fadeOut(800);
   setTimeout(function(){
      $('#first-screen-loading-cover').remove();
   }, 801);
  }, 1500);

}); // a timeout setTimeout(function(){ if(!isFPLoaded){

 isFPLoaded = true;
 // 首屏视频预加载超时,直接显示
 setTimeout(function() {
   $('#first-screen-loading-cover').fadeOut(800);
   setTimeout(function(){
      $('#first-screen-loading-cover').remove();
   }, 801);
  }, 1500);

} }, 6500);


</script>



</html>