Difference between revisions of "Team:BNU-China"

Line 1: Line 1:
−
{{BNU-China}}
 
 
<html>
 
<html>
−
<head>
+
<head>
−
<meta charset="utf-8">
+
<meta charset="UTF-8" />
−
<title>BNU-China</title>
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
<meta name="description" content="BNU-China" />
+
<meta name="generator" content="MediaWiki 1.16.5" />
−
<meta name="keywords" content="BNU-China" />
+
<link rel="shortcut icon" href="/favicon.ico" />
 +
<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>
  
−
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
+
<body>
−
+
 
−
<!-- Animate.css -->
+
−
<link rel="stylesheet" type = "text/css" href="https://2018.igem.org/Template:BNU-China/CSS/animate?action=raw&amp;ctype=text/css">
+
−
<!-- Icomoon Icon Fonts-->
+
−
<link rel="stylesheet" type = "text/css" href="https://2018.igem.org/Template:BNU-China/CSS/icomoon?action=raw&amp;ctype=text/css">
+
−
<!-- Bootstrap  -->
+
−
<link rel="stylesheet" type = "text/css" href="https://2018.igem.org/Template:BNU-China/CSS/bootstrap?action=raw&amp;ctype=text/css">
+
  
−
<!-- Magnific Popup -->
+
<div id="top-section">
−
<link rel="stylesheet" type = "text/css" href="https://2018.igem.org/Template:BNU-China/CSS/magnific-popup?action=raw&amp;ctype=text/css">
+
  <script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script>
  
−
<!-- Theme style  -->
 
−
<link rel="stylesheet" type = "text/css" href="https://2018.igem.org/Template:BNU-China/CSS/style?action=raw&amp;ctype=text/css">
 
  
−
<!-- Modernizr JS -->
 
−
<script src="https://2018.igem.org/Template:BNU-China/Javascript/modernizr-2.6.2.min?action=raw&amp;ctype=text/javascript"></script>
 
−
<!-- FOR IE9 below -->
 
−
<!--[if lt IE 9]>
 
−
<script src="https://2018.igem.org/Template:BNU-China/Javascript/respond.min?action=raw&amp;ctype=text/javascript"></script>
 
−
<![endif]-->
 
  
−
</head>
+
−
<body>
+
 
−
+
<div class="right-menu noprint" id="menubar">
−
<div class="fh5co-loader"></div>
+
    <ul>
 +
                <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>
 +
</div><!-- end right menubar -->
 +
 
 +
<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>
 +
 
 +
 
 +
<!-- this section changes the default wiki template to a
 +
white full width background -->
 +
 
 +
<style type="text/css">
 +
#contentSub, #footer-box, #catlinks, #search-controls, #p-
 +
 
 +
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.) --*/
 
 
−
<div id="page">
+
border: 0 none;
−
<nav class="fh5co-nav" role="navigation">
+
height: 14px;
−
<div class="container">
+
z-index: 100;
−
<div class="row">
+
top: 0;
−
<div class="col-xs-2 text-left">
+
position: fixed;
−
<div id="fh5co-logo"><a href="https://2018.igem.org">BNU-China<span></span></a></div>
+
width: 975px;
−
</div>
+
left: 50%;
−
<div class="col-xs-10 text-right menu-1">
+
margin-left: -487px;
−
<ul>
+
}
−
<li class="active"><a href="https://2018.igem.org/Team:BNU-China">Home</a></li>
+
−
<li class="has-dropdown">
+
−
<a href="https://2018.igem.org/Team:BNU-China/Project">Project</a>
+
−
<ul class="dropdown">
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Project">Background</a></li>
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Design">Design</a></li>
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Proof">Results</a></li>
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Description">Improvement</a></li>
+
−
</ul>
+
−
</li>
+
−
+
−
<li class="has-dropdown">
+
−
<a href="https://2018.igem.org/Team:BNU-China/Modeling">Modeling</a>
+
−
<ul class="dropdown">
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Model">Introduction</a></li>
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Model#model-theory">Modeling theory</a></li>
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Model#model-factor">Single Factor Analysis</a></li>
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Model#model-differential">Differential Equation</a></li>
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Model#model-visual">Visual Simulation</a></li>
+
−
</ul>
+
−
</li>
+
−
+
−
<li class="has-dropdown">
+
−
<a href="https://2018.igem.org/Team:BNU-China/Achievements">Achievements</a>
+
−
<ul class="dropdown">
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Achievements#Parts">Parts</a></li>
+
−
                            <li><a href="https://2018.igem.org/Team:BNU-China/Achievements#Judging">Judging</a></li>
+
−
</ul>
+
−
</li>
+
−
+
−
<li class="has-dropdown">
+
−
<a href="https://2018.igem.org/Team:BNU-China/Practices">Practices</a>
+
−
<ul class="dropdown">
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Human_Practices">Schedule</a></li>
+
−
                            <li><a href="https://2018.igem.org/Team:BNU-China/Practices">Human Practice</a></li>
+
−
</ul>
+
−
</li>
+
−
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Safety">Safety</a></li>
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Lab">Lab</a></li>
+
−
<li><a href="https://2018.igem.org/Team:BNU-China/Interlab">Interlab</a></li>
+
−
+
−
<li class="has-dropdown">
+
−
<a href="https://2018.igem.org/Team:BNU-China/Practices">Team</a>
+
−
<ul class="dropdown">
+
−
<li><a href="https://2016.igem.org/Team:BNU-China/Team#">Members</a></li>
+
−
<li><a href="https://2016.igem.org/Team:BNU-China/Attributions">Attributions</a></li>
+
−
<li><a href="https://2016.igem.org/Team:BNU-China/Collaborations">Collaborations</a></li>
+
−
<li><a href="https://2016.igem.org/Team:BNU-China/Acknowledgement">Acknowledgement</a></li>
+
−
<li><a href="https://2016.igem.org/Team:BNU-China/Notebook">Notebook</a></li>
+
−
<li><a href="https://2016.igem.org/Team:BNU-China/Protocol">Protocol</a></li>
+
−
</ul>
+
−
</li>
+
−
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
+
−
</div>
+
−
</nav>
+
−
        </body>
+
  
 +
#globalWrapper, #content { /*-- changes default wiki settings
  
 +
--*/
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 +
}
 +
 +
html, body, .wrapper { /*-- changes default wiki settings --
 +
 +
*/
 +
width: 100%;
 +
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" />
 +
 +
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Heidelberg/css/bootstrapmin?action=raw&amp;ctype=text/css" />
 +
 +
<script type="text/javascript" src="https://2015.igem.org/Template:Heidelberg/js/jasnybootstrapmin?action=raw&amp;ctype=text/javascript"></script>
 +
<!-- Assets -->
 +
<link rel="stylesheet" href="http://static.tildacdn.com/css/tilda-grid-3.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="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/bootstrap/css/bootstrap.min.css">
 +
 +
<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" type="text/css"
 +
href="https://2017.igem.org/Template:Heidelberg/general/CSS?action=raw&amp;ctype=text/css" />
 +
 +
 +
                        <!-- 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/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">
 +
 +
 +
<script type="text/javascript" src="https://2015.igem.org/Template:Heidelberg/js/jasnybootstrapmin?action=raw&amp;ctype=text/javascript"></script>
 +
 +
                        <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;
 +
}
 +
 +
    .textblock > p {font-family: 'Josefin Sans' !important; font-size: 20px !important; color: #444 !important;font-weight: 300 !important;}
 +
 +
      #textblock1 {
 +
          position: absolute;
 +
          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; 
 +
    }
 +
 +
#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;
 +
}
 +
 +
#textblock1 > a {
 +
    color: #F8991D;
 +
    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;
 +
}
 +
 +
#textblock4 > a {
 +
  color:#9D1C20;
 +
    font-size: 60px;
 +
    line-height: 60px;
 +
}
 +
#textblock5 > a {
 +
  color:#Fee000;
 +
    font-size: 50px;
 +
    line-height: 50px;
 +
}
 +
#textblock6 > a {
 +
    color: #6698be;
 +
    font-size: 50px;
 +
    line-height: 50px;
 +
}
 +
 +
 +
#textblock7 > a {
 +
    color:#F8991D;
 +
    font-size: 50px;
 +
    line-height: 50px;
 +
}
 +
#textblock9 > a {
 +
    color: white;
 +
    font-size: 60px !important;
 +
    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;
 +
    }
 +
 +
     
 +
                              .landing-video {
 +
                            position: relative;
 +
                         
 +
                            width: 100%;
 +
                            height: auto;
 +
                            background: url('') no-repeat;
 +
                         
 +
 +
                        }   
 +
      #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;
 +
          }
 +
  }
 +
       
 +
    .sublink {
 +
        font-weight: 400 !important;
 +
    }
 +
 +
    .sublink:hover {
 +
       
 +
        text-decoration: underline !important;
 +
    }
 +
   
 +
    .aligner-left {
 +
        text-align: center !important;
 +
    }
 +
     
 +
      .aligner-right {
 +
        text-align: center !important;
 +
    }
 +
       
 +
  #overall-wrapper {
 +
        min-width: 1000px;
 +
  }
 +
 +
  @media (max-width: 960px) {
 +
    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;
 +
    }
 +
  }
 +
 +
                    </style>
 +
</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">
 +
 +
<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>
 +
                                                                   
 +
                                                                   
 +
                                                                 
 +
</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>
 +
 +
        </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}}

Revision as of 19:59, 7 October 2018

WikitemplateA home - 2014.igem.org

 

WikitemplateA home

From 2014.igem.org

Template:Heidelberg/navbar

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.

Template:Heidelberg/footer