Difference between revisions of "Team:Heidelberg"

 
(24 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
<style>
+
<meta charset="UTF-8" />
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700');
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
html {
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  -webkit-box-sizing: border-box;
+
<meta name="generator" content="MediaWiki 1.16.5" />
  -moz-box-sizing: border-box;
+
<link rel="shortcut icon" href="/favicon.ico" />
  box-sizing: border-box;
+
<link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="2014.igem.org (en)" />
}
+
<link title="Creative Commons" type="application/rdf+xml" href="/wiki/index.php?title=WikitemplateA_home&amp;action=creativecommons" rel="meta" />
 +
<link rel="copyright" href="http://creativecommons.org/licenses/by/3.0/" />
 +
<link rel="alternate" type="application/atom+xml" title="2014.igem.org Atom feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=atom" /> <title>WikitemplateA home - 2014.igem.org</title>
 +
<style type="text/css" media="screen, projection">/*<![CDATA[*/
 +
@import "/wiki/skins/common/shared.css?270";
 +
@import "/wiki/skins/igem/main.css?270";
 +
/*]]>*/</style>
 +
<link rel="stylesheet" type="text/css" media="print" href="/wiki/skins/common/commonPrint.css?270" />
 +
<!--[if lt IE 5.5000]><style type="text/css">@import "/wiki/skins/igem/IE50Fixes.css?270";</style><![endif]-->
 +
<!--[if IE 5.5000]><style type="text/css">@import "/wiki/skins/igem/IE55Fixes.css?270";</style><![endif]-->
 +
<!--[if IE 6]><style type="text/css">@import "/wiki/skins/igem/IE60Fixes.css?270";</style><![endif]-->
 +
<!--[if IE 7]><style type="text/css">@import "/wiki/skins/igem/IE70Fixes.css?270";</style><![endif]-->
 +
<!--[if lt IE 7]><script type="text/javascript" src="/wiki/skins/common/IEFixes.js?270"></script>
 +
<meta http-equiv="imagetoolbar" content="no" /><![endif]-->
 +
           
 +
<script type="text/javascript" src="/wiki/skins/common/wikibits.js?270"><!-- wikibits js --></script>
 +
<!-- Head Scripts -->
 +
<script src="/wiki/skins/common/ajax.js?270"></script>
 +
<script src="/wiki/skins/common/mwsuggest.js?270"></script>
 +
<script type="text/javascript" src="/wiki/index.php?title=-&amp;action=raw&amp;gen=js&amp;useskin=igem"><!-- site js --></script>
 +
<!-- jQuery Javascript -->
 +
<script type='text/javascript'        src ='/common/jquery-latest.min.js'></script>
 +
<script type='text/javascript'        src ='/common/tablesorter/jquery.tablesorter.min.js'></script>
 +
        <link rel='stylesheet' type='text/css' href='/common/tablesorter/themes/groupparts/style.css' />
 +
        <link rel='stylesheet' type='text/css' href='/common/table_styles.css' />
 +
        <link rel='stylesheet' type='text/css' href='/forum/forum_styles.css' />
 +
<script type='text/javascript'        src ='/forum/forum_scripts.js'></script>
 +
</head>
  
*,
+
<body>
*:before,
+
    
*:after {
+
   -webkit-box-sizing: inherit;
+
  -moz-box-sizing: inherit;
+
  box-sizing: inherit;
+
  padding: 0;
+
  margin: 0;
+
}
+
  
body,
+
<div id="top-section">
html {
+
   <script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script>
   width: 100%;
+
  height: 100%;
+
}
+
  
body {
 
  font-family: 'Source Sans Pro', sans-serif;
 
  line-height: 1.5;
 
}
 
  
.page-wrapper {
 
  display: block;
 
  background: radial-gradient(circle, orange,red);
 
  margin: 0 auto;
 
}
 
  
header {
+
  
  align-items: center;
+
<div class="right-menu noprint" id="menubar">
  justify-content: center;
+
    <ul>
  text-align: center;
+
                <li id="pt-login"><a href="/wiki/index.php?title=Special:UserLogin&amp;returnto=WikitemplateA_home" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o">Log in</a></li>     </ul>
  height: 330px;
+
</div><!-- end right menubar -->
  padding-top: 1%;
+
   
+
}
+
  
 +
<div id="search-controls" class="noprint">
 +
<form action="/Special:Search" id="searchform">
 +
<input id="searchInput" name="search" type="text" title="Search 2014.igem.org [f]" accesskey="f" value="" />
 +
<input type='submit' name="go" class="searchButton" id="searchGoButton" value="Go" title="Go to a page with this exact name if exists" />&#160;
 +
      <input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="Search" title="Search the pages for this text" />
 +
</form>
 +
</div> <!-- close search controls -->
 +
    </div> <!-- close top-section-->
 +
    <div id="content">
 +
<a name="top" id="top"></a>
 +
<h1 class="firstHeading">WikitemplateA home</h1>
 +
<div id="bodyContent">
 +
<h3 id="siteSub" class='noprint'>From 2014.igem.org</h3>
 +
<div id="contentSub"></div>
 +
<!--
 +
<div id="jump-to-nav">Jump to:                        <a href="#column-one">navigation</a>, <a href="#searchInput">search</a></div>-->
 +
<!-- start content -->
 +
<p>
  
#Logo{
 
  opacity: 1;
 
}
 
  
#header_1 {
+
<!-- this section changes the default wiki template to a
  color: #FFF;
+
white full width background -->
  font-size: 60px;
+
  font-weight: 300;
+
  opacity: 1;
+
  margin-top:15px;
+
}
+
  
#first_paragraph {
+
<style type="text/css">
  color: #FFF;
+
#contentSub, #footer-box, #catlinks, #search-controls, #p-
  font-size: 20px;
+
  font-weight: 300;
+
  opacity: 0.7;
+
  margin-left: 40%;
+
  margin-right: auto;
+
  width: 80%;
+
  
 +
logo, #sideMenu, #menubar, .logo_2017, .printfooter, .firstHeading,.visualClear {display:
 +
 +
none;} /*-- hides default wiki settings --*/
 +
 +
#top-section { /*-- styling for default menu bar (edit, page,
 +
 +
history, etc.) --*/
 +
 +
border: 0 none;
 +
height: 14px;
 +
z-index: 100;
 +
top: 0;
 +
position: fixed;
 +
width: 975px;
 +
left: 50%;
 +
margin-left: -487px;
 
}
 
}
  
@media screen and (max-width: 1280px) {
+
#globalWrapper, #content { /*-- changes default wiki settings
  .header-container h1 {
+
 
    font-size: 40px;
+
--*/
  }
+
width: 100%;  
  .header-container p {
+
height: 100%;
    font-size: 17px;
+
border: 0px;
  }
+
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 
}
 
}
  
.content-wrapper {
+
html, body, .wrapper { /*-- changes default wiki settings --
  margin-top: 150px;
+
 
  background: #fff;
+
*/
  width: 100%;
+
width: 100%;  
  height: auto;
+
height: 100%;
 +
background-color: transparent;
 
}
 
}
 +
</style>
  
 +
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Heidelberg/css/jasnybootstrapmin?action=raw&amp;ctype=text/css" />
  
/* ----- NAV ----- */
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Heidelberg/css/bootstrapmin?action=raw&amp;ctype=text/css" />
  
nav {
+
<script type="text/javascript" src="https://2015.igem.org/Template:Heidelberg/js/jasnybootstrapmin?action=raw&amp;ctype=text/javascript"></script>
  height: 100px;
+
<!-- Assets -->
  margin-left: -29px;
+
<link rel="stylesheet" href="http://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" />
}
+
  
nav ul {
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400|Roboto:300,400,500">
  height: 100px;
+
<link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/bootstrap/css/bootstrap.min.css">
  background-color: #f7f7f7;
+
  @include prefix(display,
+
  flex,
+
  webkit moz o);
+
  list-style: none;
+
  font-size: 18px;
+
  
  @include prefix(transition,
+
<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">
  height 0.2s linear,
+
<link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/font-awesome/css/font-awesome.min.css">
  webkit moz o);
+
  @include prefix(transition,
+
  font 0.2s linear,
+
  webkit moz o);
+
}
+
  
nav ul li {
+
<link rel="stylesheet" type="text/css"
    padding-top: 35px;
+
href="https://2017.igem.org/Template:Heidelberg/general/CSS?action=raw&amp;ctype=text/css" />
    margin-left: 35%;
+
    font-size: 180%;
+
    font-family: 'Source Sans Pro', sans-serif;
+
}
+
  
  
@media screen and (max-width: 1280px) {
+
                        <!-- Favicon and touch icons -->
  nav ul li a {
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    font-size: 15px;
+
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
  }
+
}
+
  
@media screen and (max-width: 740px) {
 
  nav {
 
    display: none;
 
  }
 
}
 
  
 +
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Heidelberg/styles2/CSS?action=raw&amp;ctype=text/css">
  
/* ----- SECTION01 ----- */
 
  
.section01 {
+
<script type="text/javascript" src="https://2015.igem.org/Template:Heidelberg/js/jasnybootstrapmin?action=raw&amp;ctype=text/javascript"></script>
  padding: 8% 8%;
+
 
  border-bottom: 1px solid #ccc;
+
                        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 +
 
 +
<!-- jQuery CDN -->
 +
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 +
        <!-- Bootstrap Js CDN -->
 +
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
        <!-- jQuery Nicescroll CDN -->
 +
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script>
 +
 
 +
<style>
 +
  body {
 +
    font-family: 'Josefin Sans' !important;
 +
    font-size: 16px;
 +
    font-weight: 300;
 +
    color: #888;
 +
   
 +
    text-align: center;
 
}
 
}
  
.section01-container {
+
    .textblock > p {font-family: 'Josefin Sans' !important; font-size: 20px !important; color: #444 !important;font-weight: 300 !important;}
  @include prefix(display,
+
 
   flex,
+
      #textblock1 {
  webkit moz o);
+
          position: absolute;
  align-items: center;
+
          top: 100px;
  width: 100%;
+
          left: 20px;
  justify-content: center;
+
          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; 
 +
    }
 +
 
 +
#textblock1 > p, #textblock3 > p, #textblock5 > p,#textblock2 > p, #textblock4 > p, #textblock6 > p, #textblock7 > p, #textblock8 > p {
 +
    color: white !important;
 +
    text-align: center;
 +
    font-size: 26px !important;
 +
    font-weight: 300 !important;
 
}
 
}
  
.section01-text {
+
#textblock1 > a {
  color: #636363;
+
    color: #F8991D;
  text-align: justify;
+
    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;
 
}
 
}
  
.section01-text p {
+
#textblock4 > a {
  font-size: 20px;
+
  color:#9D1C20;
  margin-bottom: 40px;
+
    font-size: 60px;
  font-weight: 400;
+
    line-height: 60px;
  width: 100%;
+
}
 +
#textblock5 > a {
 +
  color:#Fee000;
 +
    font-size: 50px;
 +
    line-height: 50px;
 +
}
 +
#textblock6 > a {
 +
    color: #6698be;
 +
    font-size: 50px;
 +
    line-height: 50px;
 
}
 
}
  
.section01-text button {
+
 
  padding: 18px 40px;
+
#textblock7 > a {
  font-size: 16px;
+
    color:#F8991D;
  border: 1px solid #ccc;
+
    font-size: 50px;
  color: #767676;
+
    line-height: 50px;
  font-weight: 300 !important;
+
}
  border-radius: 10px;
+
#textblock9 > a {
  background: #fff;
+
    color: white;
  outline: none;
+
    font-size: 60px !important;
  cursor: pointer;
+
    line-height: 60px !important;
 
}
 
}
  
  
 +
    #toolbox-icon1 {
 +
position: absolute;
 +
top: 4460px;
 +
left: 430px;
 +
 +
   
 +
    #toolbox-row1 {
 +
        top: 0px;
 +
    }
 +
    #toolbox-row2 {
 +
        top: 180px;
 +
    }
 +
    #toolbox-row3 {
 +
        top: 360px;
 +
    }
 +
    wrapper {
 +
        padding-bottom: 0px;
 +
    }
  
@media screen and (max-width:960px) {
+
     
   .section01-container {
+
                              .landing-video {
     @include prefix(display,
+
                            position: relative;
     flex,
+
                         
     webkit moz o);
+
                            width: 100%;
     align-items: center;
+
                            height: auto;
     justify-content: center;
+
                            background: url('') no-repeat;
     flex-direction: column-reverse;
+
                         
 +
 
 +
                        }   
 +
      #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;
 +
      } 
 +
     
 +
 
 +
     
 +
      #Icon4 > .icon-text-right  h5 {
 +
          text-transform: uppercase;
 +
          color: #d89f9c !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      }
 +
 
 +
     
 +
      #Icon5 > .icon-text-right  h5 {
 +
          text-transform: uppercase;
 +
          color: #fef39b !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      }
 +
     
 +
 
 +
     
 +
      #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;
 +
      }
 +
 
 +
 
 +
@media (max-width: 1200px) {
 +
         
 +
          #wrapper {
 +
              padding-bottom: 600px;
 +
          }
 +
         
 +
         
 +
         
 +
              #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;
 +
}
 +
         
 +
     #textblock1 > a, #textblock2 > a,#textblock3 > a, #textblock4 > a,#textblock5 > a,#textblock6 > a,#textblock7 > a,#textblock8 > a,#textblock9 > a      {
 +
    line-height: 50px !important;
 +
     font-size: 50px !Important;
 +
}
 +
         
 +
      #textblock2 {
 +
          position: absolute;
 +
          top: 800px;
 +
          left: 150px;
 +
          width: 500px;
 +
      } 
 +
       
 +
      #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;
 +
          }
 
   }
 
   }
  .section01-text,
+
       
  .section01-image {
+
    .sublink {
    flex-grow: 0;
+
        font-weight: 400 !important;
     flex-basis: auto;
+
    }
    text-align: center;
+
 
 +
    .sublink:hover {
 +
       
 +
        text-decoration: underline !important;
 +
    }
 +
      
 +
    .aligner-left {
 +
        text-align: center !important;
 +
    }
 +
     
 +
      .aligner-right {
 +
        text-align: center !important;
 +
    }
 +
       
 +
  #overall-wrapper {
 +
        min-width: 1000px;
 
   }
 
   }
  .section01-text h3 {
+
 
    font-size: 30px;
+
   @media (max-width: 960px) {
   }
+
     body {
  .section01-text h3:after {
+
      width: 1000px;
    content: '';
+
      overflow-x: scroll;
    display: block;
+
     }
    margin-left: auto;
+
    margin-right: auto;
+
    width: 100px;
+
    height: 2px;
+
    margin-top: 20px;
+
    margin-bottom: 20px;
+
    background: linear-gradient(330deg, #e05252 0%, #52e0e0 50%, #e05252 100%);
+
     ;
+
  }
+
  .section01-text p {
+
    width: 100%;
+
    font-size: 25px;
+
     text-align: justify;
+
 
   }
 
   }
   .section01-text button {
+
   @media screen and (max-width: 960px) {
     font-size: 15px;
+
     .t-container {
    padding: 15px 30px;
+
      width: 1000px ! important;
 +
      max-width: 1200px !important;
 +
      min-width: 980px !important;
 +
    }
 
   }
 
   }
}
 
  
</style>
+
                    </style>
 
</head>
 
</head>
<body>
+
<body class="t-body">
<div class="page-wrapper">
+
    <!-- Top menu -->
  <header>
+
</html>
      <img src="https://static.igem.org/mediawiki/2017/5/52/Team_Heidelberg_2017_Group_Picture.jpeg" style="margin-left: -110px" width="50%" alt="logo" id="Logo" />
+
{{Heidelberg/navbar}}
      <h1 id="header_1">Evolution Fast Forward</h1>
+
<html>
      <p id="first_paragraph">iGEM Team Heidelberg 2017</p>
+
<div id="overall-wrapper">
  </header>
+
      <!-- cover -->
 +
<div class="t-cover"  style="height:100vh;" >
  
  <div class="content-wrapper">
 
    <nav>
 
      <ul>
 
        <li id="Introduction">Project Description</li>
 
      </ul>
 
    </nav>
 
  
    <section class="section01" id="introduction">
+
                                    <div id="media-box">
      <div class="section01-container">
+
                                      <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>
        <div class="section01-text">
+
                                        <source src="https://static.igem.org/mediawiki/2017/2/25/T--Heidelberg--2017_Wiki_Intro_iGEM2017.mp4" type="video/mp4">
          <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>
+
                                      </video>
        </div>
+
                                    </div>
        <div class="section01-text">
+
</div>
<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>
+
          </div>
+
<div style="position:relative; height: 15px; ; z-index: 5; box-shadow: 0em -0.1em 3em 0.5em black; background-color: white">
          <div class="section01-text">
+
                                            <a href="#textblock1" style="position: absolute; bottom: 40px;right: 40px; background-color:transparent;">
<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>
+
                                            <img src="https://static.igem.org/mediawiki/2017/6/6d/T--Heidelberg--2017_Phage_on_top2.svg" class="phage-scroller"></a>
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.  
+
</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">
 +
 
 +
<img width="100%" src="https://static.igem.org/mediawiki/2017/c/cc/T--Heidelberg--2017_Red_Thread3.svg">
 +
</div>
 +
 +
<div class="textblock" id="textblock1">
 +
                                                                    <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>
 +
                                                                    <a href="https://2017.igem.org/Team:Heidelberg/Description" id="accelerated_evolution"><strong>Accelerate Evolution</strong></a>
 +
                                                                    <p>to drive <a href="https://2017.igem.org/Team:Heidelberg/Achievements" class="sublink" style="color: #f8991d !important">Innovation</a> for human benefit</p>
 +
                                                                    <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>
 
</p>
         
+
                                                                   
          <button>Wait for it...</button>
+
                                                                   
        </div>
+
                                                                 
  </div>
+
</div>
      </section>
+
                                                    <div class="textblock" id="textblock6">
</div>
+
                                                       
    </div>
+
                                                        <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>
     </body>
+
                                                                 
 +
</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>
 +
 
 +
        </div>                             
 +
 
 +
     <script>
 +
 
 +
$('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')
 +
});
 +
 
 +
$( document ).ready( function() {
 +
  $('link[rel="shortcut icon"]').attr('href','https://static.igem.org/mediawiki/2017/0/08/T--Heidelberg--2017_favicon.png');
 +
});
 +
 
 +
</script>
 +
 
 +
 
 +
       
 +
 
 +
        </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.