|
|
| Line 1: |
Line 1: |
| | {{Template:Cologne-Duesseldorf/css}} | | {{Template:Cologne-Duesseldorf/css}} |
| | {{Template:Cologne-Duesseldorf/header}} | | {{Template:Cologne-Duesseldorf/header}} |
| | + | <html> |
| | + | |
| | + | <head> |
| | + | <style> |
| | + | #loader-wrapper { |
| | + | position: fixed; |
| | + | top: 0; |
| | + | left: 0; |
| | + | width: 100%; |
| | + | height: 100%; |
| | + | z-index: 1000; |
| | + | } |
| | + | #loader { |
| | + | display: block; |
| | + | position: relative; |
| | + | left: 50%; |
| | + | top: 50%; |
| | + | width: 150px; |
| | + | height: 150px; |
| | + | margin: -75px 0 0 -75px; |
| | + | border-radius: 50%; |
| | + | border: 3px solid transparent; |
| | + | border-top-color: #3498db; |
| | + | |
| | + | -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
| | + | animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ |
| | + | |
| | + | z-index: 1001; |
| | + | } |
| | + | |
| | + | #loader:before { |
| | + | content: ""; |
| | + | position: absolute; |
| | + | top: 5px; |
| | + | left: 5px; |
| | + | right: 5px; |
| | + | bottom: 5px; |
| | + | border-radius: 50%; |
| | + | border: 3px solid transparent; |
| | + | border-top-color: #e74c3c; |
| | + | |
| | + | -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
| | + | animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ |
| | + | } |
| | + | |
| | + | #loader:after { |
| | + | content: ""; |
| | + | position: absolute; |
| | + | top: 15px; |
| | + | left: 15px; |
| | + | right: 15px; |
| | + | bottom: 15px; |
| | + | border-radius: 50%; |
| | + | border: 3px solid transparent; |
| | + | border-top-color: #f9c922; |
| | + | |
| | + | -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
| | + | animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ |
| | + | } |
| | + | |
| | + | @-webkit-keyframes spin { |
| | + | 0% { |
| | + | -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ |
| | + | -ms-transform: rotate(0deg); /* IE 9 */ |
| | + | transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ |
| | + | } |
| | + | 100% { |
| | + | -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ |
| | + | -ms-transform: rotate(360deg); /* IE 9 */ |
| | + | transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ |
| | + | } |
| | + | } |
| | + | @keyframes spin { |
| | + | 0% { |
| | + | -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ |
| | + | -ms-transform: rotate(0deg); /* IE 9 */ |
| | + | transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ |
| | + | } |
| | + | 100% { |
| | + | -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ |
| | + | -ms-transform: rotate(360deg); /* IE 9 */ |
| | + | transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ |
| | + | } |
| | + | } |
| | + | |
| | + | #loader-wrapper .loader-section { |
| | + | position: fixed; |
| | + | top: 0; |
| | + | width: 51%; |
| | + | height: 100%; |
| | + | background: #222222; |
| | + | z-index: 1000; |
| | + | -webkit-transform: translateX(0); /* Chrome, Opera 15+, Safari 3.1+ */ |
| | + | -ms-transform: translateX(0); /* IE 9 */ |
| | + | transform: translateX(0); /* Firefox 16+, IE 10+, Opera */ |
| | + | } |
| | + | |
| | + | #loader-wrapper .loader-section.section-left { |
| | + | left: 0; |
| | + | } |
| | + | |
| | + | #loader-wrapper .loader-section.section-right { |
| | + | right: 0; |
| | + | } |
| | + | |
| | + | /* Loaded */ |
| | + | .loaded #loader-wrapper .loader-section.section-left { |
| | + | -webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ |
| | + | -ms-transform: translateX(-100%); /* IE 9 */ |
| | + | transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */ |
| | + | |
| | + | -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
| | + | transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
| | + | } |
| | + | |
| | + | .loaded #loader-wrapper .loader-section.section-right { |
| | + | -webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */ |
| | + | -ms-transform: translateX(100%); /* IE 9 */ |
| | + | transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */ |
| | + | |
| | + | -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
| | + | transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
| | + | } |
| | + | |
| | + | .loaded #loader { |
| | + | opacity: 0; |
| | + | -webkit-transition: all 0.3s ease-out; |
| | + | transition: all 0.3s ease-out; |
| | + | } |
| | + | .loaded #loader-wrapper { |
| | + | visibility: hidden; |
| | + | |
| | + | -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ |
| | + | -ms-transform: translateY(-100%); /* IE 9 */ |
| | + | transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */ |
| | + | |
| | + | -webkit-transition: all 0.3s 1s ease-out; |
| | + | transition: all 0.3s 1s ease-out; |
| | + | } |
| | + | /* JavaScript Turned Off */ |
| | + | .no-js #loader-wrapper { |
| | + | display: none; |
| | + | } |
| | + | .no-js h1 { |
| | + | color: #222222; |
| | + | } |
| | + | </style> |
| | + | </head> |
| | + | |
| | | | |
| − | <html>
| |
| | <body> | | <body> |
| − | <section id="banner">
| |
| − | <img src="https://static.igem.org/mediawiki/2017/0/0d/T--Cologne-Duesseldorf--artico-logo-cities.svg">
| |
| − | </section>
| |
| | <article> | | <article> |
| − | <h1>Heading</h1>
| + | <div id="loader-wrapper"> |
| − | <div id="ToC"></div> | + | |
| − | <h3 id="one">Heading one</h3>
| + | <div class=" loader- section section- left"></div> |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus pharetra mollis. Quisque a nisi felis. Curabitur gravida orci a enim sodales convallis. Duis magna quam, finibus id nulla id, eleifend imperdiet ex. Maecenas lacinia fermentum nisl, sollicitudin interdum turpis imperdiet tincidunt. Sed ultricies sagittis orci pharetra vulputate. Nunc ac ipsum augue. Suspendisse dapibus quam a rutrum congue. Pellentesque nec mauris et purus interdum tristique id semper odio. Fusce in est maximus, sollicitudin augue non, iaculis leo. Integer vitae metus id felis volutpat imperdiet. Cras elit est, egestas sit amet orci condimentum, aliquet rhoncus purus. Duis sed lectus interdum, vestibulum orci et, aliquam elit. Aliquam eleifend purus nec lorem accumsan, a tincidunt nibh vehicula. Etiam lobortis volutpat lorem, ac dictum libero egestas efficitur. Fusce condimentum tempor ipsum ut condimentum.</p>
| + | <div class=" loader- section section- right"></div> |
| − | <h3 id="two">Bioreactor simulation</h3>
| + | |
| − | <!-- Plot p450 Bioreactor -->
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/f/f7/T--Cologne-Duesseldorf--Nootkatone-p450-Model-Bioreactor.svg">
| + | |
| − | <p>The yield of $154.9 \ \frac{\text{mg}}{\text{L}}$ Nootkatol was lower than the published results of Wriessnegger 2014. Our first guess was that the assumption of all enzymes being equally concentrated was probably false. We therefore varied the enzyme concentrations and found that overexpression of valencene synthase increased the yield dramatically by converting way more FPP than before, while overexpressing the other enzymes had little to no effect at all:</p>
| + | |
| − | <!-- Plot Expression analysis -->
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/8/8a/T--Cologne-Duesseldorf--Nootkatone-Expression-3D.svg">
| + | |
| − | <p>What can be seen in the plot above is that the system is mostly influenced by concentration changes of valencene synthase. Since the Nootkatone production did not seem to increase further after increasing the valencene synthase concentration by 20-fold, we stuck to that number and simulated our model under the changed conditions.</p>
| + | |
| − | <h3 id="accordion">Accordion</h3>
| + | |
| − | <button class="accordion">Section 1</button>
| + | |
| − | | + | |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
| + | |
| − | </div>
| + | |
| − | <button class="accordion">Section 2</button>
| + | |
| − | <div class="panel">
| + | |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
| + | |
| − | </div>
| + | |
| − | <button class="accordion">Section 3</button>
| + | |
| − | <div class="panel">
| + | |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
| + | |
| − | </div>
| + | |
| − | <div class="callout">
| + | |
| − | <h4 id="Callout">Callout</h4>
| + | |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <h3 id="tables">Responsive tables</h3>
| + | |
| − | <table>
| + | |
| − | <thead>
| + | |
| − | <tr>
| + | |
| − | <th>Parameter</th>
| + | |
| − | <th>Value</th>
| + | |
| − | <th>Source</th>
| + | |
| − | </tr>
| + | |
| − | </thead>
| + | |
| − | <tbody>
| + | |
| − | <tr>
| + | |
| − | <td>$c_{\text{FPP, Wildtype}}$</td>
| + | |
| − | <td>$2.5 \ \frac{\text{nmol}}{\text{OD}}$</td>
| + | |
| − | <td><abbr title="2017, Sebastián Rubat - Increasing the intracellular isoprenoid pool in Saccharomyces cerevisiae by structural fine-tuning of a bifunctional farnesyl diphosphate synthase">Rubat 2017</abbr></td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>$N_{\text{cells per OD}}$</td>
| + | |
| − | <td>$3E+7 \ \frac{\text{cells}}{\text{OD}}$</td>
| + | |
| − | <td><a href="http://bionumbers.hms.harvard.edu/bionumber.aspx?id=100986&ver=3">Bionumbers</a></td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>$V_{\text{Yeast}}$</td>
| + | |
| − | <td>$6E-14 \ \text{L}$</td>
| + | |
| − | <td><abbr title="2012, Rob Phillips - Physical Biology of the Cell">Philips 2012</abbr></td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>$c_{\text{Max FPP}}$</td>
| + | |
| − | <td>$1.39E-3 \frac{\text{mol}}{\text{L}}$</td>
| + | |
| − | <td>$\frac{c_{\text{FPP, Wildtype}}}{N_{\text{cells per OD}} \cdot V_{\text{Yeast}}}$</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>$\mu_{FPP}$</td>
| + | |
| − | <td>$1E-6 \frac{1}{\text{s}}$</td>
| + | |
| − | <td>Assumption</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>$\text{kM}_{\text{Valencene Synthase}}$</td>
| + | |
| − | <td>$1.04 \text{µM}$</td>
| + | |
| − | <td><a href="http://www.brenda-enzymes.org/enzyme.php?ecno=4.2.3.73">Brenda</a></td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>$\text{kM}_{\text{p450 BM3}}$</td>
| + | |
| − | <td>$126 \text{µM}$</td>
| + | |
| − | <td><a href="http://www.brenda-enzymes.de/enzyme.php?ecno=1.14.14.1">Brenda</a></td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>$\text{kM}_{\text{ADH-21}}$</td>
| + | |
| − | <td>$161 \text{µM}$</td>
| + | |
| − | <td><abbr title="2017, Sebastián Rubat - Increasing the intracellular isoprenoid pool in Saccharomyces cerevisiae by structural fine-tuning of a bifunctional farnesyl diphosphate synthase">Rubat 2017</abbr></td>
| + | |
| − | <tr>
| + | |
| − | <tr>
| + | |
| − | <td>$\text{kcat}_{\text{Valencene Synthase}}$</td>
| + | |
| − | <td>$0.0032 \frac{1}{\text{s}}$</td>
| + | |
| − | <td><a href="http://www.brenda-enzymes.org/enzyme.php?ecno=4.2.3.73">Brenda</a></td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>$\text{kcat}_{\text{p450 BM3}}$</td>
| + | |
| − | <td>$2.619 \frac{1}{\text{s}}$</td>
| + | |
| − | <td><a href="http://www.brenda-enzymes.de/enzyme.php?ecno=1.14.14.1">Brenda</a></td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>$\text{kcat}_{\text{ADH-21 forward}}$</td>
| + | |
| − | <td>$6 \frac{1}{\text{s}}$</td>
| + | |
| − | <td><a href="http://onlinelibrary.wiley.com/doi/10.1002/cctc.201402952/full">Schulz 2015</a></td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>$\text{kcat}_{\text{ADH-21 backward}}$</td>
| + | |
| − | <td>$1.2 \frac{1}{\text{s}}$</td>
| + | |
| − | <td>$\frac{\text{kcat}_{\text{ADH-21 forward}}}{5}$</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>$c_{\text{Enzyme}}$</td>
| + | |
| − | <td>$1 \text{µM}$</td>
| + | |
| − | <td>Assumption</td>
| + | |
| − | </tr>
| + | |
| − | </tbody>
| + | |
| − | </table>
| + | |
| − | </div>
| + | |
| − | <!-- Large Menu -->
| + | |
| − | <h3 id="large-menu">Mega menu</h3>
| + | |
| − | <div id="mega-menu">
| + | |
| − | <a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Description"><i class="fa fa-cog" aria-hidden="true"></i></a>
| + | |
| − | <a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Team"><i class="fa fa-users" aria-hidden="true"></i></a>
| + | |
| − | <a href="https://2017.igem.org/Team:Cologne-Duesseldorf/HP/Gold_Integrated"><i class="fa fa-user-plus" aria-hidden="true"></i></a>
| + | |
| − | <a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Part_Collection"><i class="fa fa-cogs" aria-hidden="true"></i></a>
| + | |
| − | </div>
| + | |
| − | <p>Morbi quis faucibus tellus. Quisque ultrices diam non neque fringilla, scelerisque porttitor quam porta. Suspendisse fermentum suscipit pulvinar. Integer finibus orci id cursus ornare. Donec pretium vulputate quam ut sagittis. Ut sodales sit amet felis et blandit. Cras non velit ac mi faucibus gravida. Vivamus placerat blandit velit ut convallis. Donec imperdiet mi feugiat, lacinia urna nec, sagittis mauris. Aenean convallis, sapien quis consectetur cursus, lacus magna scelerisque purus, et malesuada lacus lorem eu justo. Mauris ornare dictum sem, quis vestibulum magna sodales a. Nulla facilisi. Nam justo urna, gravida eget venenatis eu, rutrum ut quam. Morbi ultrices, sapien ac interdum rutrum, ex neque cursus justo, eget lacinia mauris felis in lacus. Quisque in turpis in ante pharetra semper ut sed erat.</p>
| + | |
| − | <h3 id="flex-gallery">Flex Gallery</h3>
| + | |
| − | <div class=" flex- gallery"> | + | |
| − | <div>
| + | |
| − | <h6>Aikaterini Karapantsaiou</h6>
| + | |
| − | <a href="#Aikaterini-Karapantsiou">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/4/42/Aikaterini-Karapantsiou-1.jpg">
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h6>Anna Sappler</h6>
| + | |
| − | <a href="#Anna-Sappler">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/0/00/T--Cologne-Duesseldorf--Anna-Sappler-2.jpg">
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| − | <div>
| + | |
| − | <h6>Bastiaan Tjeng</h6>
| + | |
| − | <a href="#Bastiaan-Tjeng">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/0/0b/T--Cologne-Duesseldorf--Bastiaan-Tjeng-1.jpg">
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| | </div> | | </div> |
| | + | </article> |
| | + | <script> |
| | + | $(document).ready(function() { |
| | + | setTimeout(function(){ |
| | + | $('body').addClass('loaded'); |
| | + | $('h1').css('color','#222222'); |
| | + | }, 3000); |
| | + | }); |
| | + | </script> |
| | | | |
| − | <div id="Aikaterini-Karapantsiou" class="modalDialog">
| |
| − | <a href="#close" title="Close" class="close">X</a>
| |
| − | <div>
| |
| − | <div>
| |
| − | <img src="https://static.igem.org/mediawiki/2017/9/97/T--Cologne-Duesseldorf--Aikaterini-Karapantsiou-3.jpg">
| |
| − | </div>
| |
| − | <div>
| |
| − | <h4>Aikaterini Karapantsiou</h4>
| |
| − | <ul>
| |
| − | <li>First Point</li>
| |
| − | <li>Second Point</li>
| |
| − | <li>Third Point</li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| | | | |
| − | </article>
| |
| | </body> | | </body> |
| | </html> | | </html> |
