Difference between revisions of "Team:Heidelberg"

 
(18 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
+
<html>
 
+
<html lang="en" dir="ltr" class="client-nojs">
+
 
<head>
 
<head>
 
<meta charset="UTF-8" />
 
<meta charset="UTF-8" />
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<head>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<meta name="generator" content="MediaWiki 1.16.5" />
 
<meta name="generator" content="MediaWiki 1.16.5" />
Line 43: Line 39:
 
    
 
    
  
    <div id="top-section">
+
<div id="top-section">
 
+
  <script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script>
<script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script>
+
  
  
Line 119: Line 114:
 
}
 
}
 
</style>
 
</style>
 +
 
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Heidelberg/css/jasnybootstrapmin?action=raw&amp;ctype=text/css" />
 
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Heidelberg/css/jasnybootstrapmin?action=raw&amp;ctype=text/css" />
  
Line 127: Line 123:
 
<link rel="stylesheet" href="http://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" />
 
<link rel="stylesheet" href="http://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" />
  
<link rel="stylesheet" href="http://static.tildacdn.com/css/tilda-zoom-1.0.min.css" type="text/css" media="all" />
 
 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400|Roboto:300,400,500">
 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400|Roboto:300,400,500">
 
<link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/bootstrap/css/bootstrap.min.css">
 
<link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/bootstrap/css/bootstrap.min.css">
<script src="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/bootstrap/js/bootstrap.min.js"></script>
+
 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css?action=raw&amp;ctype=text/css" type="text/css" rel="stylesheet">
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css?action=raw&amp;ctype=text/css" type="text/css" rel="stylesheet">
 
<link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/font-awesome/css/font-awesome.min.css">
 
<link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/font-awesome/css/font-awesome.min.css">
 
  
 
<link rel="stylesheet" type="text/css"  
 
<link rel="stylesheet" type="text/css"  
href="https://2017.igem.org/Template:Heidelberg/body/CSS?action=raw&amp;ctype=text/css" />
+
href="https://2017.igem.org/Template:Heidelberg/general/CSS?action=raw&amp;ctype=text/css" />
<link rel="stylesheet" type="text/css"
+
 
href="https://2017.igem.org/Template:Heidelberg/table_layout/CSS?action=raw&amp;ctype=text/css" />
+
 
 
                         <!-- Favicon and touch icons -->
 
                         <!-- Favicon and touch icons -->
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
  
  
 +
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Heidelberg/styles2/CSS?action=raw&amp;ctype=text/css">
  
  
Line 148: Line 144:
  
 
                         <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 
                         <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://static.tildacdn.com/js/jquery-1.10.2.min.js"></script>
 
<script src="http://static.tildacdn.com/js/tilda-scripts-2.8.min.js"></script>
 
  
<script src="http://static.tildacdn.com/js/tilda-zoom-1.0.min.js"></script>
 
 
<script src="http://static.tildacdn.com/js/jquery.touchswipe.min.js"></script>
 
<script src="http://static.tildacdn.com/js/tilda-map-1.0.min.js"></script>
 
<script src="http://static.tildacdn.com/js/lazyload-1.3.min.js"></script>
 
 
  <!-- jQuery CDN -->
 
  <!-- jQuery CDN -->
 
         <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 
         <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
Line 162: Line 151:
 
         <!-- jQuery Nicescroll CDN -->
 
         <!-- jQuery Nicescroll CDN -->
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script>
                    <style>
+
 
                     
+
                    </style>
+
 
<style>
 
<style>
 
+
  body {
     </style>
+
     font-family: 'Josefin Sans' !important;
</head>
+
    font-size: 16px;
       
+
    font-weight: 300;
+
    color: #888;
+
 
+
 
+
</head>
+
<body class="t-body">
+
                        <!-- CSS -->       
+
                   
+
 
+
 
+
 
      
 
      
    <!-- Top menu -->
+
    text-align: center;
<nav class="navbar navbar-inverse navbar-fixed-top navbar-no-bg " role="navigation">
+
}
<div class="container">
+
<div class="navbar-header">
+
                 
+
                    <a class="navbar-brand" href="https://2017.igem.org/Team:Heidelberg" data-canvas="body" type="button" id="sidebarCollapse"><div id="circle">
+
                        </div></a>
+
             
+
</div>
+
<!-- Collect the nav links, forms, and other content for toggling -->
+
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
<ul class="nav navbar-nav navbar-right">
+
<li><a href="https://2017.igem.org/Team:Heidelberg/Achievements">Achievements</a></li>
+
<li class="dropdown"><a href="https://2017.igem.org/Team:Heidelberg/Description">Project <span class="caret"></span></a>
+
                        <ul class="dropdown-menu">
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Description">Overview</a></li> 
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Results">Results</a></li>
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Parts">Parts</a></li>
+
                        </ul>
+
                        </li>
+
<li class="dropdown"><a href="https://2017.igem.org/Team:Heidelberg/Model">Modeling <span class="caret"></span></a>
+
                        <ul class="dropdown-menu">
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/iGEMGoesGreen">iGEM goes Green</a></li> 
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Model">Modeling</a></li>
+
                        </ul>
+
                        </li>
+
<li class="dropdown"><a href="https://2017.igem.org/Team:Heidelberg/Software&Hardware">Software &amp; Hardware <span class="caret"></span></a>
+
                        <ul class="dropdown-menu">
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Software">AI</a></li> 
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Hardware">Hardware</a></li>
+
                        </ul>
+
                        </li>
+
<li class="dropdown"><a href="https://2017.igem.org/Team:Heidelberg/HP">Human Practice <span class="caret"></span></a>
+
                        <ul class="dropdown-menu">
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Safety">Safety &amp; Security</a></li>
+
                            <li class="divider"></li>
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Description">Integrated Human Practice</a></li>
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Engagement">Public Engagement</a></li>
+
                            <li class="divider"></li>
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Education">Education</a></li>
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Collaborations">Collaborations</a></li>
+
                        </ul>
+
                       
+
                        </li>
+
<li class="dropdown"><a href="https://2017.igem.org/Team:Heidelberg/Team">People <span class="caret"></span></a>
+
                        <ul class="dropdown-menu">
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Team">Team</a></li>
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Attributions">Attributions</a></li>
+
                        </ul>
+
                       
+
                        </li>
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Toolbox">Toolbox</a></li>
+
</ul>
+
</div>
+
</div>
+
</nav>
+
  
          <nav id="sidebar" style="background-color: white;border: none;box-shadow:1px 0px 0px #393939;" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
+
    .textblock > p {font-family: 'Josefin Sans' !important; font-size: 20px !important; color: #444 !important;font-weight: 300 !important;}
        <a class="navmenu-brand" href="#"><img src="https://static.igem.org/mediawiki/2017/8/8f/Heidelberg_2017_phage_logo.svg"><br><br> iGEM TEAM HEIDELBERG 2017</a>
+
        <hr>
+
        <ul class="nav navmenu-nav" id="sidenav">
+
          <li><a href="https://2017.igem.org/Team:Heidelberg/Achievements">Achievements</a></li>
+
<li><a data-toggle="collapse" data-target="#Project_side">Project <i class="fa fa-fw fa-caret-down"></i></a>
+
                        <ul id="Project_side" class="collapse side">
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Description">Overview</a></li> 
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Results">Results</a></li>
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Parts">Parts</a></li>
+
                        </ul>
+
                        </li>
+
                        <li><a data-toggle="collapse" data-target="#Model_side">Modeling <i class="fa fa-fw fa-caret-down"></i></a>
+
                        <ul id="Model_side" class="collapse side">
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/iGEMGoesGreen">iGEM goes Green</a></li> 
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Model">Modeling</a></li>
+
                        </ul>
+
                        </li>
+
                        <li><a data-toggle="collapse" data-target="#AI_side">Software &amp; Hardware <i class="fa fa-fw fa-caret-down"></i></a>
+
                        <ul id="AI_side" class="collapse side">
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Software">AI</a></li> 
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Hardware">Hardware</a></li>
+
                        </ul>
+
                        </li>
+
                        <li><a data-toggle="collapse" data-target="#HP_side">Human Practice <i class="fa fa-fw fa-caret-down"></i></a>
+
                        <ul id="HP_side" class="collapse side">
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/HP" data-toggle="collapse" data-target="#HP_side">Overview</a></li>
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Safety">Safety &amp; Security</a></li>
+
                            <li class="divider"></li>
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Description">Integrated Human Practice</a></li>
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Engagement">Public Engagement</a></li>
+
                            <li class="divider"></li>
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Education">Education</a></li>
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Collaborations">Collaborations</a></li>
+
                        </ul>
+
                       
+
                        </li>
+
                        <li><a data-toggle="collapse" data-target="#People_side">People <i class="fa fa-fw fa-caret-down"></i></a>
+
                        <ul id="People_side" class="collapse side">
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Team">Team</a></li>
+
                            <li><a href="https://2017.igem.org/Team:Heidelberg/Attributions">Attributions</a></li>
+
                        </ul>
+
                       
+
                        </li>
+
                        <li><a href="https://2017.igem.org/Team:Heidelberg/Toolbox">Toolbox</a></li>
+
        </ul>
+
    </nav>
+
                 
+
  
<div style="padding-top: 10%;background-color:white;">
+
      #textblock1 {
<div class="t-container">
+
          position: absolute;
<div class="t-col t-col_12">
+
          top: 100px;
                                                       
+
          left: 20px;
                                                 
+
          width:500px;
 +
      }     
 +
      #textblock2 {
 +
          position: absolute;
 +
          top: 960px;
 +
          left: 220px;
 +
          width: 450px;
 +
      } 
 +
      #textblock3 {
 +
            position: absolute;
 +
          top: 960px;
 +
          right: 20px;
 +
          width: 500px;
 +
          height: 300px;
 +
         
 +
      }
 +
      #textblock4 {
 +
            position: absolute;
 +
          top: 1500px;
 +
          left: 20px;
 +
          width:450px;
 +
      }
 +
      #textblock5 {
 +
            position: absolute;
 +
          top: 2100px;
 +
          right: 20px;
 +
          width: 550px;
 +
      }
 +
      #textblock6 {
 +
            position: absolute;
 +
          top: 2700px;
 +
          left: 20px;
 +
          width: 500px;
 +
      }
 +
    #textblock7 {
 +
            position: absolute;
 +
          top: 3250px;
 +
          right: 20px;
 +
          width: 600px;
 +
      }
 +
    #textblock8 {
 +
          position: absolute;
 +
          top: 3750px;
 +
          left: 50px;
 +
          width: 400px;
 +
    }
 +
    #textblock9 {
 +
        position: absolute;
 +
          top: 3750px;
 +
          right: 50px;
 +
          width: 400px; 
 +
    }
  
                                                        <h1>iGEM Team Heidelberg</h1>
+
#textblock1 > p, #textblock3 > p, #textblock5 > p,#textblock2 > p, #textblock4 > p, #textblock6 > p, #textblock7 > p, #textblock8 > p {
                                                        <h2>Coming soon...</h2>
+
    color: white !important;
                                                        <hr>
+
    text-align: center;
                                                        <div class="container-fluid">
+
    font-size: 26px !important;
                                                <div class="row"> 
+
    font-weight: 300 !important;
<div class="pull-right col-lg-12 col-md-12 col-sm-12 col-xs-12">
+
}
                                               
+
                                                  <a href="#" target="_blank" ><img src="https://static.igem.org/mediawiki/2017/5/52/Team_Heidelberg_2017_Group_Picture.jpeg"  alt="#"></a>
+
                                                </div>
+
                                                </div>
+
                                                </div>
+
                                                 
+
                                                        <h3>Project Description</h3>
+
                                                       
+
                                                     
+
          <p>About four billion years ago our planet was at a historic turning point. While organic chemistry had already been invented, the recent generation of organic molecules was profoundly different. They organized into spatially confined structures and self-replicated at an ever-increasing speed. Soon, the freely available organic building blocks became limited and the increasingly complex structures began to actively compete for resources and space. Life emerged and with it the Darwinian evolution. </p>
+
      <br>
+
       
+
<p> The concept of life turned out to be immensely powerful and rapidly transformed our planet into what ET could easily describe as a huge bioreactor. Innumerable rounds of mutation and selection over billions of years gave rise to the beautiful biological diversity and complexity we can appreciate today. Life appears to seamlessly adapt to even the most harsh and unfriendly environments by finding clever solutions – provided it has enough time to do so. And this is where our project begins. </p>
+
         
+
         
+
<p> This year, the iGEM team Heidelberg aims at harnessing the enormous power of Darwinian evolution to facilitate the development of biomolecules for human benefit. To this end, we will build upon the PACE (phage-assisted continuous evolution) method, which miniaturizes and accelerates evolution and governs it towards a predefined purpose. PACE couples the survival of quickly mutating phages carrying a scaffold protein to directed selection within E. coli hosts. Thereby, proteins with desired properties can be evolved within hours instead of centuries. <br>
+
To harness its enormous potential, we will create a comprehensive and standardized toolbox and accompanying software that will enable the application of PACE on diverse protein classes, including enzymes for pharmaceutical and biomaterial production.
+
</p>
+
         
+
       
+
                      </div>
+
                        </div>
+
                        </div>
+
                                            <section id="footer-sec">
+
        <div class="container">
+
            <div class="row" style="padding-top: 30px;">
+
                <div class="col-md-3">
+
                    <h4>About us</h4>
+
                    <p>"We are an extremely motivated team of young students competing in the worlds biggest synthetic biology competition"</p>
+
  
                </div>
+
#textblock1 > a {
                <div class="col-md-3">
+
    color: #F8991D;
                    <h4> Useful <strong>Links</strong> </h4>
+
    font-size: 60px !important;
 +
    line-height: 60px !important;
 +
}
 +
#textblock1 > a:hover, #textblock2 > a:hover, #textblock3 > a:hover, #textblock4 > a:hover, #textblock5 > a:hover, #textblock6 > a:hover, #textblock7 > a:hover, #textblock9 > a:hover  {
 +
    text-decoration: underline;
 +
}
 +
#textblock2 > a {
 +
    color: #fbb74b;
 +
    font-size: 60px;
 +
    line-height: 60px;
 +
}
  
<p>
+
#textblock4 > a {
<a href="#">
+
  color:#9D1C20;
<i class="fa fa-angle-right">
+
    font-size: 60px;
</i>
+
     line-height: 60px;
Special pages
+
}
</a>
+
#textblock5 > a {
     </p>
+
  color:#Fee000;
<p>
+
    font-size: 50px;
<a href="#">
+
    line-height: 50px;
<i class="fa fa-angle-right">
+
}
</i>
+
#textblock6 > a {
Main Page
+
    color: #6698be;
</a>
+
    font-size: 50px;
</p>
+
    line-height: 50px;
</div>
+
}
                <div class="col-md-3">
+
                    <h4> Follow us on </h4>
+
                    <a href="#" target="_blank" id="facebook"><i class="fa fa-facebook-square fa-2x"></i></a
+
                    <span style="color: grey">&amp;</span>
+
                    <a href="#" target="_blank" id="twitter"><i class="fa fa-twitter-square fa-2x"></i></a>
+
                </div>
+
                <div class="col-md-3">
+
                    <h4> Contact us </h4>
+
                  <p>
+
<i class="fa fa-map-marker fa-lg">
+
</i>
+
Im Neuenheimer Feld 267
+
<br>
+
69120 Heidelberg
+
                    </p>
+
<p>
+
<i class="fa fa-phone">
+
</i>
+
06221/5451202
+
</p>
+
  
<p>
 
<a href="mailto:info@yourdomain.com">
 
<i class="fa fa-envelope">
 
</i>
 
bioquant@uni-heidelberg.de
 
</a>
 
</p>
 
                </div>
 
            </div>
 
        </div>
 
    </section>
 
        <script src="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/bootstrap/js/bootstrap.min.js"></script>
 
       
 
<script>
 
  
var ToC =
+
#textblock7 > a {
  "<nav role='navigation' class='table-of-contents'>" +
+
    color:#F8991D;
     "<h3>On this page:</h3>" +
+
    font-size: 50px;
     "<ul class='toc-nav'>";
+
    line-height: 50px;
 +
}
 +
#textblock9 > a {
 +
     color: white;
 +
     font-size: 60px !important;
 +
    line-height: 60px !important;
 +
}
  
var newLine, el, title, link;
 
  
$("article h2").each(function() {
+
    #toolbox-icon1 {
   
+
position: absolute;
    el = $(this);
+
top: 4460px;  
    title = el.text();
+
left: 430px;
    link = "#" + el.attr("id");
+
 +
   
 +
    #toolbox-row1 {
 +
        top: 0px;
 +
    }
 +
    #toolbox-row2 {
 +
        top: 180px;
 +
    }
 +
    #toolbox-row3 {
 +
        top: 360px;
 +
    }
 +
    wrapper {
 +
        padding-bottom: 0px;
 +
    }
  
  newLine =
+
     
    "<li>" +
+
                              .landing-video {
      "<a href='" + link + "'>" +
+
                            position: relative;
        title +
+
                         
      "</a>" +
+
                            width: 100%;
    "</li>";
+
                            height: auto;
 +
                            background: url('') no-repeat;
 +
                         
  
   ToC += newLine;
+
                        }   
 +
      #Icon1 {
 +
            position: absolute;
 +
         
 +
            left: 4%;
 +
      }
 +
      #Icon2 {
 +
          position: absolute;
 +
          width: 400px;
 +
          left: 1%;
 +
    
 +
      }
 +
      #Icon3 {
 +
            position: absolute;
 +
          left: 4%;
 +
          width: 400px;
 +
      }
 +
      #Icon4 {
 +
            position: absolute;
 +
            right: 12%;
 +
          width: 300px;
 +
      }
 +
      #Icon5 {
 +
        position: absolute;
 +
        right: 8%;
 +
          width: 300px;
 +
      }
 +
      #Icon6 {
 +
          position: absolute;
 +
            right: 10%;
 +
          width: 300px;
 +
      }
 +
     
 +
      .icon-text {
 +
          position: relative;
 +
          top: 20px;
 +
          left: 130px;
 +
       
 +
         
 +
      }
 +
     
 +
      .icon-text-right {
 +
          position: relative;
 +
          top: 20px;
 +
          right: 0px;
 +
     
 +
          width: 300px;
 +
      }
 +
     
 +
      #Icon1 > .icon-text  h5 {
 +
          text-transform: uppercase;
 +
          color: #b3dede !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      }
 +
     
 +
      #Icon1:hover > .icon-text  p,#Icon2:hover > .icon-text  p,#Icon3:hover > .icon-text  p,#Icon4:hover > .icon-text-right p,#Icon5:hover > .icon-text-right p,#Icon6:hover > .icon-text-right p {
 +
          opacity: 1 !important;
 +
          text-align: center;
 +
          transition: opacity 1s ease;
 +
      }
 +
      #Icon1 > .icon-text p,#Icon2 > .icon-text p,#Icon3 > .icon-text p,#Icon4 > .icon-text-right p,#Icon5 > .icon-text-right p,#Icon6 > .icon-text-right p  {
 +
          opacity: 0 !important;
 +
          color: white !important;
 +
          font-family: 'Josefin Sans' !important;
 +
          font-size: 25px !important;
 +
      }
 +
      #Icon2 > .icon-text  h5 {
 +
          text-transform: uppercase;
 +
          color: #b2cbdd !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      } 
  
});
+
     
 +
      #Icon3 > .icon-text  h5 {
 +
          text-transform: uppercase;
 +
          color: #fed699!important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      } 
 +
     
  
ToC +=
+
     
  "</ul>" +
+
      #Icon4 > .icon-text-right  h5 {
  "</nav>";
+
          text-transform: uppercase;
 +
          color: #d89f9c !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      }
  
$(".all-questions").prepend(ToC);   
+
     
</script>
+
      #Icon5 > .icon-text-right  h5 {
<script>
+
          text-transform: uppercase;
$(document).ready(function(){
+
          color: #fef39b !important;
$('a[href^="#"]').on('click',function (e) {
+
          font-weight: 400 !important;
    e.preventDefault();
+
          line-height: 40px !important;
 +
      }
 +
     
  
    var target = this.hash;
+
     
    var $target = $(target);
+
      #Icon6 > .icon-text-right  h5 {
 +
          text-transform: uppercase;
 +
          color: #9ad5c3 !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      }
 +
     
 +
      .phage-scroller {
 +
              width: 150px;
 +
              height: auto;
 +
          }
 +
     
 +
      #toolbox {
 +
          position: absolute;
 +
          top: 3900px;
 +
          min-height: 600px ;
 +
          width: 100%;
 +
          max-width: 1200px;
 +
          margin: 0 auto;
 +
         
 +
      }
 +
     
 +
      #toolbox-image {
 +
          position: absolute;
 +
          left: 380px;
 +
          width: 500px;
 +
          top: 10%
 +
      }
 +
   
 +
      .icon {
 +
            cursor: pointer;
 +
      }
 +
      .toolbox-icon {
 +
          width: 120px;
 +
          height: 120px;
 +
          border-radius: 100%;
 +
          float: left;
 +
          background-color: white;
 +
          position: absolute;
 +
         
 +
      }
 +
     
 +
      .icon:hover > .toolbox-icon {
 +
         
 +
          transform: scale(1.2,1.2);
 +
          transition: all 1s ease-out;
 +
      }
  
    $('html, body').stop().animate({
 
        'scrollTop': $target.offset().top-200
 
    }, 1000, 'swing', function () {
 
        window.location.hash = target;
 
    });
 
});
 
});   
 
</script>
 
<script>
 
  
    window.onresize = window.onload = function() {
+
@media (max-width: 1200px) {
    if(this.innerWidth<1211) {
+
         
        $('#sidebarCollapse').attr("data-target", "#sidebar");
+
          #wrapper {
        $('#sidebarCollapse').removeAttr("href");
+
              padding-bottom: 600px;
        $('#sidebarCollapse').attr("data-toggle", "offcanvas");
+
          }
    } else {
+
         
        $('#sidebarCollapse').attr("data-target", "");
+
         
        $('#sidebarCollapse').removeAttr("data-toggle");
+
         
        $('#sidebarCollapse').attr("href", "https://2017.igem.org/Team:Heidelberg");
+
              #textblock1 {
     }     
+
          position: absolute;
 +
          top: 50px;
 +
          left: 0px;
 +
          width: 400px;
 +
      }      
 +
          #textblock1 > p, #textblock2 > p, #textblock3 > p,#textblock4 > p, #textblock5 > p,#textblock6 > p,#textblock7 > p,#textblock8 > p,#textblock9 > p {
 +
    color: white !important;
 +
   
 +
 
 +
    font-size: 24px !important;
 +
     font-weight: 300 !important;
 
}
 
}
 
+
         
     </script>  
+
     #textblock1 > a, #textblock2 > a,#textblock3 > a, #textblock4 > a,#textblock5 > a,#textblock6 > a,#textblock7 > a,#textblock8 > a,#textblock9 > a      {
<!-- Saved in parser cache with key 2014_igem_org:pcache:idhash:224-0!1!0!!en!2!edit=0 and timestamp 20170831072851 -->
+
    line-height: 50px !important;
<div class="printfooter">
+
    font-size: 50px !Important;
Retrieved from "<a href="https://2014.igem.org/WikitemplateA_home">https://2014.igem.org/WikitemplateA_home</a>"</div>
+
}
<div id="catlinks"><div id='catlinks' class='catlinks catlinks-allhidden'></div></div> <!-- end content -->
+
         
<div class="visualClear"></div>
+
      #textblock2 {
</div>
+
          position: absolute;
    </div>
+
          top: 800px;
<!-- PAGE FOOTER -- ITEMS FROM COLUMN ! HAVE BEEN MOVED HERE -- RDR  -->
+
          left: 150px;
<div class="visualClear"></div>
+
          width: 500px;
    <div id='footer-box' class='noprint'>
+
      }  
        <div id="footer">
+
       
              <div id="f-poweredbyico"><a href="http://www.mediawiki.org/"><img src="/wiki/skins/common/images/poweredby_mediawiki_88x31.png" height="31" width="88" alt="Powered by MediaWiki" /></a></div>       <div id="f-copyrightico"><a href="http://creativecommons.org/licenses/by/3.0/"><img src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="Attribution 3.0 Unported" width="88" height="31" /></a></div>     <ul id="f-list">
+
      #textblock3 {
+
            position: absolute;
 +
          top: 780px;
 +
          right: 0px;
 +
          width: 300px;
 +
          height: 220px;
 +
      }
 +
      #textblock4 {
 +
            position: absolute;
 +
          top: 1250px;
 +
          left: 0px;
 +
          width: 400px;
 +
      }
 +
      #textblock5 {
 +
            position: absolute;
 +
          top: 1700px;
 +
          right: 0px;
 +
          width: 500px;
 +
      }
 +
      #textblock6 {
 +
            position: absolute;
 +
          top: 2220px;
 +
          left: 0px;
 +
          width: 450px;
 +
      }
 +
         
 +
          #textblock7 {
 +
              position: absolute;
 +
              top: 2700px;
 +
              right: 0px;
 +
              width: 550px;
 +
          }
 +
          #textblock8 {
 +
              position: absolute;
 +
              top: 3200px;
 +
              left: 0px;
 +
              width: 400px;
 +
          }
 +
          #textblock9 {
 +
              position: absolute;
 +
              top: 3200px;
 +
              right: 0px;
 +
              width: 400px;
 +
          }
 +
          #toolbox {
 +
              position: absolute;
 +
              top: 3700px;
 +
          }
 +
          #toolbox-image {
 +
              position: relative;
 +
              left: 30px !important;
 +
          }
 +
          #Icon1 {
 +
              left: 100px;
 +
          }
 +
          #Icon2 {
 +
              left: 100px;
 +
          }
 +
          #Icon3 {
 +
              left: 100px;
 +
          }
 +
          #Icon4 {
 +
              right: 200px;
 +
          }
 +
          #Icon5 {
 +
              right: 200px;
 +
                       
 +
          }
 +
          #Icon6 {
 +
              right: 200px;
 +
          }
 +
  }
 +
       
 +
    .sublink {
 +
        font-weight: 400 !important;
 +
    }
  
  <!-- Recentchanges is not handles well DEBUG -->
+
    .sublink:hover {
    <li id="t-recentchanges"><a href="/Special:RecentChanges"
+
       
      title='Recent changes'>Recent changes</a></li>
+
        text-decoration: underline !important;
 +
    }
 +
   
 +
    .aligner-left {
 +
        text-align: center !important;
 +
    }
 +
     
 +
      .aligner-right {
 +
        text-align: center !important;
 +
    }
 +
       
 +
  #overall-wrapper {
 +
        min-width: 1000px;
 +
  }
  
    <li id="t-whatlinkshere"><a href="/Special:WhatLinksHere/WikitemplateA_home"
+
  @media (max-width: 960px) {
      title="List of all wiki pages that link here [j]" accesskey="j">What links here</a></li>
+
    body {
 +
      width: 1000px;
 +
      overflow-x: scroll;
 +
    }
 +
  }
 +
  @media screen and (max-width: 960px) {
 +
    .t-container {
 +
      width: 1000px ! important;
 +
      max-width: 1200px !important;
 +
      min-width: 980px !important;
 +
    }
 +
  }
  
                        <li id="t-recentchangeslinked"><a href="/Special:RecentChangesLinked/WikitemplateA_home"
+
                    </style>
                          title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li>
+
</head>
 +
<body class="t-body">
 +
    <!-- Top menu -->
 +
</html>
 +
{{Heidelberg/navbar}}
 +
<html>
 +
<div id="overall-wrapper">
 +
      <!-- cover -->
 +
<div class="t-cover"  style="height:100vh;" >
  
  
 +
                                    <div id="media-box">
 +
                                      <video id="landing-page-video" class="landing-video" poster="https://static.igem.org/mediawiki/2017/0/06/T--Heidelberg--2017_Landing_Page_Poster.svg" style="position:absolute" playsinline autoplay muted>
 +
                                        <source src="https://static.igem.org/mediawiki/2017/2/25/T--Heidelberg--2017_Wiki_Intro_iGEM2017.mp4" type="video/mp4">
 +
                                      </video>
 +
                                    </div>
 +
</div>
 +
 +
<div style="position:relative; height: 15px; ; z-index: 5; box-shadow: 0em -0.1em 3em 0.5em black; background-color: white">
 +
                                            <a href="#textblock1" style="position: absolute; bottom: 40px;right: 40px; background-color:transparent;">
 +
                                            <img src="https://static.igem.org/mediawiki/2017/6/6d/T--Heidelberg--2017_Phage_on_top2.svg" class="phage-scroller"></a>
 +
</div>
 +
<div style="background: #393939; z-index: 5;" id="wrapper">
 +
 +
 +
<div class="t-container" style="position: relative; padding-bottom: 50px; background-color: transparent;">
 +
<div class="t-col t-col_12">
  
                <li id="t-specialpages"><a href="/Special:SpecialPages"
+
<img width="100%" src="https://static.igem.org/mediawiki/2017/c/cc/T--Heidelberg--2017_Red_Thread3.svg">
                  title="List of all special pages [q]" accesskey="q">Special pages</a>
+
</div>
                </li>
+
                <li><a href='/Special:Preferences'>My preferences</a></li>
+
<div class="textblock" id="textblock1">
            </ul>
+
                                                                    <p style="padding-bottom: 10px" class="aligner-left">Life shows an astonishing diversity and complexity, resulting from millions of years of random mutation and selection.</p><p> We, <a href="https://2017.igem.org/Team:Heidelberg/Team" class="sublink" style="color: #f8991d !important">the iGEM Team Heidelberg</a>,</p>
        </div> <!-- close footer -->
+
                                                                    <a href="https://2017.igem.org/Team:Heidelberg/Description" id="accelerated_evolution"><strong>Accelerate Evolution</strong></a>
        <div id='footer'>
+
                                                                    <p>to drive <a href="https://2017.igem.org/Team:Heidelberg/Achievements" class="sublink" style="color: #f8991d !important">Innovation</a> for human benefit</p>
    <ul id="f-list">
+
                                                                    <a href="https://2017.igem.org/Team:Heidelberg/Description" style="color: white !important; padding: 20px; background-color: #f8991d !important; border-radius: 5px;font-size: 30px !important;">Explore our project</a>
 +
                                                                </div>
 +
                                                                <div class="textblock" id="textblock2">
 +
                                                                    <a href="https://2017.igem.org/Team:Heidelberg/Design"><strong>Curious how?</strong></a>
 +
                                                                    <p style="padding-top: 30px" class="aligner-left">To speed up and direct evolution, we use  <a href="https://2017.igem.org/Team:Heidelberg/Pace" class="sublink" style="color: #fbb74b !important">phage-assisted continuous evolution</a> and our newly created &amp; simple method called  <a href="https://2017.igem.org/Team:Heidelberg/Predcel" class="sublink" style="color: #fbb74b !important">PREDCEL</a></p>
 +
                                                                </div>
 +
                                                              <div id="textblock3" style="z-index: 2;">
 +
                                                                  <video  poster="" style="position:absolute;" controls>
 +
                                        <source src="https://static.igem.org/mediawiki/2017/a/a9/T--Heidelberg--2017_1st_Video_iGEM_lq.mp4" type="video/mp4">
 +
                                      </video>
 +
<p style="font-family: 'Josefin Sans' !important; font-size: 20px !important; color: white; position: absolute; bottom: -44px; text-align: center;"> <a style="font-size: 20px; font-family: 'Josefin Sans' !important; color: #fbb74b; text-decoration: underline;" href="https://2017.igem.org/Team:Heidelberg/Design">Klick here</a> for our second video!</p>
 +
                                                                </div>
 +
                                                           
 +
<div class="textblock" id="textblock4">
 +
                                                                <p>No way to be fast enough without</p><a href="https://2017.igem.org/Team:Heidelberg/Model"><strong>Modeling</strong></a><p class="aligner-left"> Learn how we optimized our experimental parameters using ODE models calibrated with wet lab data.</p><p class="aligner-left"> And the best: Our interactive models run  <a href="https://2017.igem.org/Team:Heidelberg/Model/Tools" class="sublink" style="color: #9d1c20 !important">entirely in your browser!</a></p>
 +
                                                                   
 +
                                                                   
 +
</div>
 +
                                                            <div class="textblock" id="textblock5">
 +
                                                                <p>Still too slow? Meet our Artificial Intelligence for Genetic Evolution Mimicking,</p><a href="https://2017.igem.org/Team:Heidelberg/Software" id="artificial_intelligence"><strong>AiGEM!</strong></a><p style="padding-top: 10px;" class="aligner-right"> AiGEM comprises a<a href="https://2017.igem.org/Team:Heidelberg/Software/DeeProtein" class="sublink" style="color: #ffd700 !important"> deep neuronal network</a> and accompanying <a href="https://2017.igem.org/Team:Heidelberg/Software/GAIA" class="sublink" style="color: #ffd700 !important">genetic algorithm</a> able to fast-forward directed evolution in silico</p><p class="aligner-right"> Not convinced yet?
 +
                                                                Check out our fully in silico evolved, optimized <a href="https://2017.igem.org/Team:Heidelberg/Validation#bLac" class="sublink" style="color: #ffd700 !important">Beta-lactamase</a> and reprogrammed <a href="https://2017.igem.org/Team:Heidelberg/Validation#GUS2GAL" class="sublink" style="color: #ffd700 !important">Beta-glucuronidase!</a></p>
 +
</p>
 +
                                                                   
 +
                                                                   
 +
                                                                 
 +
</div>
 +
                                                    <div class="textblock" id="textblock6">
 +
                                                       
 +
                                                        <p>To make a difference, we need to consider the whole</p> <a href="https://2017.igem.org/Team:Heidelberg/Human_Practices"><strong>Colorful Picture</strong></a><p style="padding-top: 10px;" class="aligner-left">Our integrated human practice activities helped us to make our technology <a href="https://2017.igem.org/Team:Heidelberg/Safety" class="sublink" style="color:#6698be !important">safer</a> and stimulate its <a href="https://2017.igem.org/Team:Heidelberg/Interviews" class="sublink" style="color:#6698be !important">responsible use</a>, ideally to address urgent human needs.</p>
 +
                                                                 
 +
</div>
 +
                                                    <div class="textblock" id="textblock7">
 +
                                                        <a href="https://2017.igem.org/Team:Heidelberg/Organosilicons"><strong>Our Applications:</strong></a>
 +
                                                        <p class="aligner-right">Evolving novel cytochromes with help of <a href="https://2017.igem.org/Team:Heidelberg/Software/MAWS" class="sublink" style="color: #F8991D !important">in silico predicted riboswitches</a>, to enable fully biological production of <a href="https://2017.igem.org/Team:Heidelberg/Organosilicons" class="sublink" style="color: #F8991D !important">organosilicons</a>. Using PREDCEL, we engineered the product specificity of <a href="https://2017.igem.org/Team:Heidelberg/Cytochrome_Engineering" class="sublink" style="color: #F8991D !important">cytochrome P450 1A2</a> towards theophylline.</p>
 +
</div>
 +
                                                    <div class="textblock" id="textblock8">
 +
                                                        <p class="aligner-left"> Now it’s on you. Our toolbox guide and RFC help you to get started.</p>
 +
</div>
 +
                                                    <div class="textblock" id="textblock9">
 +
                                                        <a href="https://2017.igem.org/Team:Heidelberg/Toolbox"><strong>Learn. </strong><strong>Evolve.</strong><strong> PREDCEL! </strong></a>
 +
</div>
 +
                                                    <div id="toolbox">
 +
                                                           
 +
                                                            <div style="position: relative;" id="toolbox-row1">
 +
                                                              <div id="Icon1" class="icon"><a href="https://2017.igem.org/Team:Heidelberg/Protein_Interaction"><img src="https://static.igem.org/mediawiki/2017/4/4b/T--Heidelberg--2017_T--Heidelberg--2017_Icon_Protein_Interaction.svg" class="toolbox-icon" style="left: 0px;"></a><div class="icon-text" style="width: 300px;"><a href="https://2017.igem.org/Team:Heidelberg/Protein_Interaction"><h5>Protein Interaction</h5><p>Evolve specific binding</p></a></div></div>
 +
                                                              <div id="Icon4" class="icon"> <a href="https://2017.igem.org/Team:Heidelberg/Cytochrome_Engineering"><img src="https://static.igem.org/mediawiki/2017/9/9c/T--Heidelberg--2017_T--Heidelberg--2017_Icon_Product_Specificity.svg" class="toolbox-icon" style="left: 280px;"></a><div class="icon-text-right"> <a href="https://2017.igem.org/Team:Heidelberg/Cytochrome_Engineering"><h5>Cytochrome Engineering</h5><p>Turning promiscous enzymes into specific biofactories</p></a></div></div>
 +
                                                            </div>
 +
                                                       
 +
                                                            <div style="position: relative;" id="toolbox-row2">
 +
                                                                <div id="Icon2" class="icon"><a href="https://2017.igem.org/Team:Heidelberg/Optogenetics"><img src="https://static.igem.org/mediawiki/2017/3/38/T--Heidelberg--2017_T--Heidelberg--2017_Icon_Opto_Genetics.svg" class="toolbox-icon" style="left: 0px;"></a><div class="icon-text" style="width: 300px;"><a href="https://2017.igem.org/Team:Heidelberg/Optogenetics"><h5>Optogenetics</h5><p>Adapt selection stringency with light</p></a></div></div>
 +
                                                           
 +
                                                                <div id="Icon5" class="icon"><a href="https://2017.igem.org/Team:Heidelberg/Organosilicons"><img src="https://static.igem.org/mediawiki/2017/e/e9/T--Heidelberg--2017_T--Heidelberg--2017_Icon_Carbonsilicones.svg" class="toolbox-icon" style="left: 270px;"></a><div class="icon-text-right"><a href="https://2017.igem.org/Team:Heidelberg/Organosilicons"><h5>Organo-<br>silicons</h5><p>Teaching nature carbonsilicon chemistry</p></a></div></div>
 +
                                                                </div>
 +
                                                           
 +
                                                            <div style="position: relative;t" id="toolbox-row3">
 +
                                                                <div id="Icon3" class="icon"> <a href="https://2017.igem.org/Team:Heidelberg/CRISPR"><img src="https://static.igem.org/mediawiki/2017/c/cd/T--Heidelberg--2017_T--Heidelberg--2017_Icon_DNA_Editing.svg" class="toolbox-icon" style="left: 0px;"></a><div class="icon-text" style="width: 230px;"> <a href="https://2017.igem.org/Team:Heidelberg/CRISPR"><h5>CRISPR Cas9</h5><p>Towards next-generation nucleases</p></a></div></div> 
 +
                                                                <div id="Icon6" class="icon"><a href="https://2017.igem.org/Team:Heidelberg/RFC"><img src="https://static.igem.org/mediawiki/2017/2/27/T--Heidelberg--2017_Icon_RFC.svg" class="toolbox-icon" style="left: 280px;"></a><div class="icon-text-right"><a href="https://2017.igem.org/Team:Heidelberg/RFC"><h5>RFC</h5><p>Our in vivo Evolution Standard</p></a></div></div>
 +
                                                          </div> 
 +
                                                       
 +
                                                         
 +
                                                </div>
 +
                                                   
 +
                                            </div>
 +
                                    </div>     
 +
                                         
 +
 +
       
 +
        </body>
  
            <li id="t-print"><a href="/wiki/index.php?title=WikitemplateA_home&amp;printable=yes"
+
        </div>                              
              title="Printable version of this page [p]" accesskey="p">Printable version</a>
+
            </li>
+
  
            <li id="t-permalink"><a href="/wiki/index.php?title=WikitemplateA_home&amp;oldid=145279"
+
    <script>
              title="Permanent link to this revision of the page">Permanent link</a>
+
 
            </li>
+
$('a[href^="#textblock1"]').on('click',function (e) {
 +
    e.preventDefault();
  
 +
    var target = this.hash;
 +
    var $target = $(target);
 +
        var scroll = $target.offset().top-200;
 +
    $('html').stop().animate({
 +
        'scrollTop': scroll
 +
    }, 1000, 'swing')
 +
});
  
        <li id="privacy"><a href="/2014.igem.org:Privacy_policy" title="2014.igem.org:Privacy policy">Privacy policy</a></li>
+
$( document ).ready( function() {
        <li id="disclaimer"><a href="/2014.igem.org:General_disclaimer" title="2014.igem.org:General disclaimer">Disclaimers</a></li>
+
  $('link[rel="shortcut icon"]').attr('href','https://static.igem.org/mediawiki/2017/0/08/T--Heidelberg--2017_favicon.png');
    </ul>
+
});
</div> <!-- close footer -->
+
    </div> <!-- close footer-box -->
+
  
</div>
+
</script>
  
  
         <!-- Side Menubar -->
+
          
        <div id="sideMenu">
+
            <a href="https://2017.igem.org">
+
                <div id="home_logo" >
+
                <img src="https://static.igem.org/mediawiki/2017/b/bf/HQ_menu_logo.jpg">
+
                </div>
+
            </a>
+
 
+
            <div style="clear:both; height:5px;"></div>
+
 
+
            <div id="menuDisplay"></div>  <!- Menu will be loaded here ->
+
        </div>
+
 
+
        <!-- Pop_Why Div is definded here -->
+
        <div class="pop_why_cover"></div>
+
 
+
        <div class="pop_why_box" >
+
            <div class="pop_close">× </div>
+
            <div class="pop_why_content"><h3> Loading ... </h3></div>
+
        </div>
+
  
    </div>
+
        </body>
 
</html>
 
</html>
 +
{{Heidelberg/footer}}

Latest revision as of 17:29, 14 December 2017

WikitemplateA home - 2014.igem.org

 

WikitemplateA home

From 2014.igem.org

Life shows an astonishing diversity and complexity, resulting from millions of years of random mutation and selection.

We, the iGEM Team Heidelberg,

Accelerate Evolution

to drive Innovation for human benefit

Explore our project
Curious how?

To speed up and direct evolution, we use phage-assisted continuous evolution and our newly created & simple method called PREDCEL

Klick here for our second video!

No way to be fast enough without

Modeling

Learn how we optimized our experimental parameters using ODE models calibrated with wet lab data.

And the best: Our interactive models run entirely in your browser!

Still too slow? Meet our Artificial Intelligence for Genetic Evolution Mimicking,

AiGEM!

AiGEM comprises a deep neuronal network and accompanying genetic algorithm able to fast-forward directed evolution in silico

Not convinced yet? Check out our fully in silico evolved, optimized Beta-lactamase and reprogrammed Beta-glucuronidase!

To make a difference, we need to consider the whole

Colorful Picture

Our integrated human practice activities helped us to make our technology safer and stimulate its responsible use, ideally to address urgent human needs.

Our Applications:

Evolving novel cytochromes with help of in silico predicted riboswitches, to enable fully biological production of organosilicons. Using PREDCEL, we engineered the product specificity of cytochrome P450 1A2 towards theophylline.

Now it’s on you. Our toolbox guide and RFC help you to get started.