Widget:新样式

H萌娘，万物皆可H的百科全书！
imported>=海豚=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">

<img class="logo" src="https://2020.igem.org/wiki/images/7/74/T--AHUT-ZJU-China--logo%402x.png">

<nav id="main-top-nav">

</nav>

</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>

取自“https://hmoegirl.com/index.php?title=Widget:新样式&oldid=59173”