Difference between revisions of "Team:Cologne-Duesseldorf/Test"

Line 1: Line 1:
−
<html class="no-js" lang="en" dir="ltr">
+
{{Template:Cologne-Duesseldorf/css}}
−
<head>
+
−
<meta charset="utf-8">
+
−
<meta http-equiv="x-ua-compatible" content="ie=edge">
+
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
−
<title>iGEM 2017</title>
+
−
<link href="https://2017.igem.org/Template:Cologne-Duesseldorf/css-wiki-overwrite?action=raw&ctype=text/css" rel="stylesheet"/>
+
−
<link href="https://2017.igem.org/Template:Cologne-Duesseldorf/css-wiki?action=raw&ctype=text/css" rel="stylesheet"/>
+
−
<link href="https://2017.igem.org/Template:Cologne-Duesseldorf/css-normalize?action=raw&ctype=text/css" rel="stylesheet"/>
+
−
<link href="https://2017.igem.org/Template:Cologne-Duesseldorf/css-bootstrap?action=raw&ctype=text/css" rel="stylesheet"/>
+
−
<link href="https://2017.igem.org/Template:Cologne-Duesseldorf/css-app?action=raw&ctype=text/css" rel="stylesheet"/>
+
−
</head>
+
  
 +
<!DOCTYPE html>
 +
<html >
 +
<head>
 +
  <meta charset="UTF-8">
 +
  <title>Create a Sidebar Menu</title>
 +
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
</head>
  
−
<body>
+
<body>
−
<!-- The off-Canvas menu -->
+
  <html>
−
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
+
<head>
−
<!-- Close button -->
+
<title>SideBar Menu</title>
−
<button class="close-button" aria-label="Close menu" type="button" data-close>
+
<link rel="stylesheet" type="text/css" href="style.css">
−
<span aria-hidden="true">&times;</span>
+
</head>
−
</button>
+
<body>
−
<!-- Menu -->
+
 
−
<ul class="vertical menu">
+
<div id="sidebar">
 +
<ul>
 
<li><a href="#">Home</a></li>
 
<li><a href="#">Home</a></li>
 
<li><a href="#">Description</a></li>
 
<li><a href="#">Description</a></li>
Line 42: Line 39:
 
<li><a href="#">Part Collection</a></li>
 
<li><a href="#">Part Collection</a></li>
 
</ul>
 
</ul>
−
</div>
+
</div>
−
<!-- Actual page content -->
+
−
<div class="off-canvas-content">
+
<div id="sidebar-btn">
−
<!-- Menu -->
+
<i class="fa fa-bars"></i>
−
<div class="title-bar-container" data-sticky-container>
+
</div>
−
<div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
+
<div id="overlay"></div>
−
<div class="title-bar">
+
<div id="container">
−
<div class="row align-middle">
+
<div id="paper">
−
<div class="title-bar-left column">
+
<section id="header">
−
<button class="menu-icon" type="button" data-open="offCanvas"></button>
+
<img src="https://static.igem.org/mediawiki/2017/0/0d/T--Cologne-Duesseldorf--artico-logo-cities.svg">
−
<span class="title-bar-title">Menu</span>
+
−
</div>
+
−
<div class="title-bar-right column">
+
−
<a href="#"><img src="img/artico.svg" style="height: 2rem"></a>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<!-- Content -->
+
−
<section class="content">
+
−
<div class="row column">
+
−
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
+
−
<ul class="orbit-container">
+
−
<li class="is-active orbit-slide">
+
−
<div>
+
−
<h3 class="text-center">You can also throw some text in here!</h3>
+
−
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
+
−
<h3 class="text-center">This Orbit slide has chill</h3>
+
−
</div>
+
−
</li>
+
−
<li class="orbit-slide">
+
−
<div>
+
−
<h3 class="text-center">You can also throw some text in here!</h3>
+
−
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
+
−
<h3 class="text-center">This Orbit slide has chill</h3>
+
−
</div>
+
−
</li>
+
−
<li class="orbit-slide">
+
−
<div>
+
−
<h3 class="text-center">You can also throw some text in here!</h3>
+
−
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
+
−
<h3 class="text-center">This Orbit slide has chill</h3>
+
−
</div>
+
−
</li>
+
−
<li class="orbit-slide">
+
−
<div>
+
−
<h3 class="text-center">You can also throw some text in here!</h3>
+
−
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
+
−
<h3 class="text-center">This Orbit slide has chill</h3>
+
−
</div>
+
−
</li>
+
−
</ul>
+
−
<nav class="orbit-bullets">
+
−
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+
−
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
+
−
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
+
−
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
+
−
</nav>
+
−
</div>
+
−
</div>
+
−
<div class="row small-up-1 medium-up-1">
+
−
<div class="column">
+
−
<h1>Main Point</h1>
+
−
<hr>
+
−
<p>Lorem ipsum dolor sit amet, <span class="label primary">Default Label</span> adipiscing elit, sed do eiusmod tempor incididunt ut labore et <strong>strong</strong> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="label secondary">Secondary Label</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <em>emphasis</em>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
−
</div>
+
−
</div>
+
−
<div class="row small-up-1 medium-up-2">
+
−
<div class="column">
+
−
<h2>Second Point</h2>
+
−
<hr>
+
−
<p>Lorem <span class="label success">Success Label</span> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <span class="label alert">Alert Label</span> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint <span class="label warning">Warning Label</span> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
−
</div>
+
−
<div class="column">
+
−
<h2>Third Point</h2>
+
−
<hr>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
−
</div>
+
−
</div>
+
−
<div class="row column">
+
−
<h1> Callouts</h1>
+
−
<hr>
+
−
<div class="callout">
+
−
<h5>This is a callout.</h5>
+
−
<p>It has an easy to override visual style, and is appropriately subdued.</p>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
−
</div>
+
−
</div>
+
−
<div class="row column">
+
−
<h1>Cards</h1>
+
−
<hr>
+
−
</div>
+
−
<div class="row small-up-1 medium-up-3">
+
−
<div class="column">
+
−
<div class="card">
+
−
<div class="card-divider">
+
−
<h4>I'm featured</h4>
+
−
</div>
+
−
<div class="card-section">
+
−
<img src="http://placehold.it/350x150">
+
−
<p>It has an easy to override visual style, and is appropriately subdued.</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="column">
+
−
<div class="card">
+
−
<div class="card-divider">
+
−
<h4>I'm featured</h4>
+
−
</div>
+
−
<div class="card-section">
+
−
<img src="http://placehold.it/350x350">
+
−
<p>It has an easy to override visual style, and is appropriately subdued.</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="column">
+
−
<div class="card">
+
−
<div class="card-divider">
+
−
<h4>I'm featured</h4>
+
−
</div>
+
−
<div class="card-section">
+
−
<img src="http://placehold.it/100x600">
+
−
<p>It has an easy to override visual style, and is appropriately subdued.</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="row column">
+
−
<h1> Accordion </h1>
+
−
<hr>
+
−
<ul class="accordion" data-accordion data-allow-all-closed="true">
+
−
<li class="accordion-item" data-accordion-item>
+
−
<a href="#" class="accordion-title">Accordion 1</a>
+
−
<div class="accordion-content" data-tab-content>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
−
<p> Second Paragraph</p>
+
−
</div>
+
−
</li>
+
−
<li class="accordion-item" data-accordion-item>
+
−
<a href="#" class="accordion-title">Accordion 2</a>
+
−
<div class="accordion-content" data-tab-content>
+
−
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
+
−
</div>
+
−
</li>
+
−
<li class="accordion-item" data-accordion-item>
+
−
<a href="#" class="accordion-title">Accordion 3</a>
+
−
<div class="accordion-content" data-tab-content>
+
−
<p>I would start in the open state, due to using the `is-active` state class.</p>
+
−
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
+
−
<p>I would start in the open state, due to using the `is-active` state class.</p>
+
−
</div>
+
−
</li>
+
−
</ul>
+
−
</div>
+
−
<div class="row small-up-1">
+
−
<div class="column">
+
−
<h3>Fourth Point</h3>
+
−
<hr>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
−
</div>
+
−
</div>
+
−
<div class="row column">
+
−
<h1>Tables</h1>
+
−
<hr>
+
−
<table class="hover">
+
−
<thead>
+
−
<tr>
+
−
<th width="200">Table Header</th>
+
−
<th>Table Header</th>
+
−
<th width="150">Table Header</th>
+
−
<th width="150">Table Header</th>
+
−
</tr>
+
−
</thead>
+
−
<tbody>
+
−
<tr>
+
−
<td>Content Goes Here</td>
+
−
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+
−
<td>Content Goes Here</td>
+
−
<td>Content Goes Here</td>
+
−
</tr>
+
−
<tr>
+
−
<td>Content Goes Here</td>
+
−
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+
−
<td>Content Goes Here</td>
+
−
<td>Content Goes Here</td>
+
−
</tr>
+
−
<tr>
+
−
<td>Content Goes Here</td>
+
−
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+
−
<td>Content Goes Here</td>
+
−
<td>Content Goes Here</td>
+
−
</tr>
+
−
</tbody>
+
−
</table>
+
−
</div>
+
−
<div class="row column">
+
−
<h1>Tabs</h1>
+
−
<hr>
+
−
<ul class="tabs" data-tabs id="collapsing-tabs">
+
−
<li class="tabs-title is-active"><a href="#panel1c" aria-selected="true">Tab 1</a></li>
+
−
<li class="tabs-title"><a href="#panel2c">Tab 2</a></li>
+
−
<li class="tabs-title"><a href="#panel3c">Tab 3</a></li>
+
−
<li class="tabs-title"><a href="#panel4c">Tab 4</a></li>
+
−
</ul>
+
−
<div class="tabs-content" data-tabs-content="collapsing-tabs">
+
−
<div class="tabs-panel is-active" id="panel1c">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
−
</div>
+
−
<div class="tabs-panel" id="panel2c">
+
−
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
+
−
</div>
+
−
<div class="tabs-panel" id="panel3c">
+
−
<img src="http://placehold.it/1200x300">
+
−
</div>
+
−
<div class="tabs-panel" id="panel4c">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="row column">
+
−
<h1>Vertical Tabs</h1>
+
−
<hr>
+
−
<div class="row collapse">
+
−
<div class="medium-3 columns">
+
−
<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
+
−
<li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
+
−
<li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
+
−
<li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
+
−
<li class="tabs-title"><a href="#panel4v">Tab 4</a></li>
+
−
<li class="tabs-title"><a href="#panel5v">Tab 5</a></li>
+
−
<li class="tabs-title"><a href="#panel6v">Tab 6</a></li>
+
−
</ul>
+
−
</div>
+
−
<div class="medium-9 columns">
+
−
<div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
+
−
<div class="tabs-panel is-active" id="panel1v">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
−
</div>
+
−
<div class="tabs-panel" id="panel2v">
+
−
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
+
−
</div>
+
−
<div class="tabs-panel" id="panel3v">
+
−
<img src="http://placehold.it/500x500">
+
−
</div>
+
−
<div class="tabs-panel" id="panel4v">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
−
</div>
+
−
<div class="tabs-panel" id="panel5v">
+
−
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
−
</div>
+
−
<div class="tabs-panel" id="panel6v">
+
−
<img src="http://placehold.it/1200x300">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="row column">
+
−
<h1>Equalizer</h1>
+
−
</div>
+
−
<div class="row" data-equalizer>
+
−
<div class="small-12 medium-4 columns">
+
−
<div class="callout" data-equalizer-watch>
+
−
<img src= "http://placehold.it/1200x300">
+
−
</div>
+
−
</div>
+
−
<div class="small-12 medium-4 columns">
+
−
<div class="callout" data-equalizer-watch>
+
−
<p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
+
−
</div>
+
−
</div>
+
−
<div class="small-12 medium-4 columns">
+
−
<div class="callout" data-equalizer-watch>
+
−
<img src= "http://placehold.it/500x500">
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<!-- Page content close div -->
+
 
</section>
 
</section>
−
<!-- Footer -->
+
<section id="article">
−
<footer class="footer">
+
<h3>Designing a Customizable Synthetic Cell Compartment Toolbox</h3>
−
<div class="row">
+
<hr>
−
<div class="small-12 columns">
+
<p>
−
<p class="slogan">artico</p>
+
Synthetic organisms provide a wide range of applications with the potential to tackle
−
<p class="links">
+
the biggest challenges humanity faces. Their creation is therefore one of the major
−
<a href="#">home</a>
+
goals in synthetic biology. Many breakthroughs have been achieved in the last
−
<a href="#">facebook</a>
+
decade, however, the creation of a fully synthetic cell is yet a milestone to reach for.
−
<a href="#">twitter</a>
+
<br>
−
<a href="#">youtube</a>
+
A common approach tries to build up artificial cells from scratch, whereas we want to
−
<a href="#">contact</a>
+
start by engineering artificial compartments through orthogonalization. For designing
−
</p>
+
these new compartments we plan to establish an open source toolbox accessible to
−
<p class="copywrite">Team Cologne-Düsseldorf</p>
+
the community at large. This will make it possible to boot up a compartment perfectly
−
</div>
+
tailored for a specific application, which will enable cheaper and more efficient
−
</div>
+
production of biofuels, pharmaceuticals, or high value chemicals.
−
</footer>
+
<br>
−
<!-- Off canvas close div -->
+
By integrating enzymes or biosynthetic pathways into semi-permeable organelles we
 +
gain higher concentrations of enzymes and metabolites and provide a basis for the
 +
ideal operation of specialized enzymes. Furthermore, toxic or unstable intermediates
 +
can be sustained and naturally incompatible reactions can take place
 +
simultaneously.
 +
<br>
 +
We have chosen yeast peroxisomes as our chassis for designing this synthetic organelle, which are very resistant, have a useful import mechanism and are expendable under optimal conditions.
 +
</p>
 +
</section>
 +
<section id="sec">
 +
<h3>Designing a Customizable Synthetic Cell Compartment Toolbox</h3>
 +
<hr>
 +
<p>
 +
Synthetic organisms provide a wide range of applications with the potential to tackle
 +
the biggest challenges humanity faces. Their creation is therefore one of the major
 +
goals in synthetic biology. Many breakthroughs have been achieved in the last
 +
decade, however, the creation of a fully synthetic cell is yet a milestone to reach for.
 +
<br>
 +
A common approach tries to build up artificial cells from scratch, whereas we want to
 +
start by engineering artificial compartments through orthogonalization. For designing
 +
these new compartments we plan to establish an open source toolbox accessible to
 +
the community at large. This will make it possible to boot up a compartment perfectly
 +
tailored for a specific application, which will enable cheaper and more efficient
 +
production of biofuels, pharmaceuticals, or high value chemicals.
 +
<br>
 +
By integrating enzymes or biosynthetic pathways into semi-permeable organelles we
 +
gain higher concentrations of enzymes and metabolites and provide a basis for the
 +
ideal operation of specialized enzymes. Furthermore, toxic or unstable intermediates
 +
can be sustained and naturally incompatible reactions can take place
 +
simultaneously.
 +
<br>
 +
We have chosen yeast peroxisomes as our chassis for designing this synthetic organelle, which are very resistant, have a useful import mechanism and are expendable under optimal conditions.
 +
</p>
 +
</section>
 
</div>
 
</div>
−
</body>
+
</div>
−
<script type="text/javascript" src="https://2017.igem.org/Template:Cologne-Duesseldorf/js-jquery?action=raw&ctype=text/javascript"></script>
+
<section id="footer">
−
<script type="text/javascript" src="https://2017.igem.org/Template:Cologne-Duesseldorf/js-what-input?action=raw&ctype=text/javascript""></script>
+
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
−
<script type="text/javascript" src="https://2017.igem.org/Template:Cologne-Duesseldorf/js-foundation?action=raw&ctype=text/javascript"></script>
+
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
−
<script type="text/javascript" src="https://2017.igem.org/Template:Cologne-Duesseldorf/js-app?action=raw&ctype=text/javascript"></script>
+
<a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
 +
<a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>
 +
<a href="#"><i class="fa fa-university" aria-hidden="true"></i><a>
 +
</section>
 +
 +
 +
 
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 +
<script>
 +
 
 +
$(document).ready(function(){
 +
$('#sidebar-btn').click(function(){
 +
$('#sidebar').toggleClass('visible');
 +
$('#overlay').toggleClass('active');
 +
//$('#container').toggleClass('inactive')
 +
});
 +
$('#overlay').click(function(){
 +
$('#sidebar').toggleClass('visible');
 +
$('#overlay').toggleClass('active');
 +
});
 +
});
 +
 
 +
</script>
 +
 
 +
</body>
 +
</html>
 +
 
 +
 
 +
</body>
 
</html>
 
</html>

Revision as of 10:06, 4 May 2017

<!DOCTYPE html> Create a Sidebar Menu SideBar Menu

Designing a Customizable Synthetic Cell Compartment Toolbox

Synthetic organisms provide a wide range of applications with the potential to tackle the biggest challenges humanity faces. Their creation is therefore one of the major goals in synthetic biology. Many breakthroughs have been achieved in the last decade, however, the creation of a fully synthetic cell is yet a milestone to reach for.
A common approach tries to build up artificial cells from scratch, whereas we want to start by engineering artificial compartments through orthogonalization. For designing these new compartments we plan to establish an open source toolbox accessible to the community at large. This will make it possible to boot up a compartment perfectly tailored for a specific application, which will enable cheaper and more efficient production of biofuels, pharmaceuticals, or high value chemicals.
By integrating enzymes or biosynthetic pathways into semi-permeable organelles we gain higher concentrations of enzymes and metabolites and provide a basis for the ideal operation of specialized enzymes. Furthermore, toxic or unstable intermediates can be sustained and naturally incompatible reactions can take place simultaneously.
We have chosen yeast peroxisomes as our chassis for designing this synthetic organelle, which are very resistant, have a useful import mechanism and are expendable under optimal conditions.

Designing a Customizable Synthetic Cell Compartment Toolbox

Synthetic organisms provide a wide range of applications with the potential to tackle the biggest challenges humanity faces. Their creation is therefore one of the major goals in synthetic biology. Many breakthroughs have been achieved in the last decade, however, the creation of a fully synthetic cell is yet a milestone to reach for.
A common approach tries to build up artificial cells from scratch, whereas we want to start by engineering artificial compartments through orthogonalization. For designing these new compartments we plan to establish an open source toolbox accessible to the community at large. This will make it possible to boot up a compartment perfectly tailored for a specific application, which will enable cheaper and more efficient production of biofuels, pharmaceuticals, or high value chemicals.
By integrating enzymes or biosynthetic pathways into semi-permeable organelles we gain higher concentrations of enzymes and metabolites and provide a basis for the ideal operation of specialized enzymes. Furthermore, toxic or unstable intermediates can be sustained and naturally incompatible reactions can take place simultaneously.
We have chosen yeast peroxisomes as our chassis for designing this synthetic organelle, which are very resistant, have a useful import mechanism and are expendable under optimal conditions.


</body> </html>