Difference between revisions of "Team:Heidelberg"

Line 1: Line 1:
−
 
  
 
<html lang="en" dir="ltr" class="client-nojs">
 
<html lang="en" dir="ltr" class="client-nojs">
Line 5: Line 4:
 
<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 119: Line 116:
 
}
 
}
 
</style>
 
</style>
−
 
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
 
<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" />
  
 
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Heidelberg/css/bootstrapmin?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 -->
 
<!-- 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="http://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" />
Line 130: Line 127:
 
<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" />
 +
<style>
 +
body {
 +
    font-family: 'Josefin Sans' !important;
 +
    font-size: 16px;
 +
    font-weight: 300;
 +
    color: #888;
 +
    overflow-x: hidden;
 +
    text-align: center;
 +
}
 +
 
 +
    p {font-family: 'Josefin Sans' !important; font-size: 20px !important; color: #444 !important;font-weight: 300 !important;}
 +
 
 +
h1,h2,h3,h4,h5,h6{font-weight:100 !important; color: #393939 !important;font-family: 'Josefin Sans' !important;line-height: 70px !important;}
 +
   
 +
   
 +
    #footer-sec h4 {
 +
        color: white !important;
 +
        font-size: 26px !important;
 +
    }
 +
 
 +
#footer-sec p {
 +
color: grey !important;
 +
font-size: 18px !important;
 +
font-family: 'Josefin Sans' !important;
 +
text-align: center;
 +
}
 +
    #footer-sec a {
 +
        color: grey !important;
 +
    } 
 +
    #footer-sec a:hover {
 +
        color: white !important;
 +
        transition: color 1s !important;
 +
    } 
 +
   
 +
    article li {
 +
        text-align: justify;
 +
    }
 +
 
 +
    .inline_table {
 +
        font-size: 18px !important;
 +
        font-family: 'Josefin Sans' !important, sans-serif;
 +
    }
 +
   
 +
   
 +
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4,.col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{
 +
      padding-top: 10px !important;
 +
        padding-bottom: 50px !important;
 +
    }
 +
  .mw-body {
 +
        background-color: red !important; 
 +
      height: 0px !important;
 +
    }
 +
 
 +
 
 +
    .table-of-contents {
 +
      float: right;
 +
      width: 100%;
 +
      background: #eee;
 +
      font-size: 0.8em;
 +
      padding-top: 15px;
 +
      padding-bottom: 10px;
 +
   
 +
 
 +
    }
 +
    .table-of-contents ul {
 +
      list-style: none;
 +
        text-align: left !important;
 +
        line-height: normal !important;
 +
 
 +
    }
 +
 
 +
    .table-of-contents a {
 +
      text-decoration: none;
 +
        font-size: 16px;
 +
        color: #393939 !important;
 +
       
 +
    }
 +
    .table-of-contents a:hover,
 +
    .table-of-contents a:active {
 +
      text-decoration: underline;
 +
    }
 +
 
 +
    .toc-nav li {
 +
        padding-bottom: 10px;
 +
    }
 +
    .toc-nav a {
 +
        font-family: 'Josefin Sans' !important;
 +
        font-size: 20px !important;
 +
        color: #444 !important;
 +
        font-weight: 300 !important;
 +
    }
 +
 
 +
 
 +
strong { font-weight: 500; }
 +
 
 +
a, a:hover, a:focus {
 +
color: black; text-decoration: none;
 +
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
 +
}
 +
 
 +
h1 { margin-top: 10px; font-family: 'Josefin Sans', sans-serif !important; font-size: 58px !important; font-weight: 300 !important; color: #393939 !important; line-height: 58px !important; opacity: 0.9; text-align:center; color: #393939;}
 +
h2 { margin-top: 10px; font-family: 'Josefin Sans', sans-serif; font-size: 48px; font-weight: 300; color: #393939; line-height: 56px; opacity: 0.9; text-align:center}
 +
 
 +
h3 { font-family: 'Josefin Sans', sans-serif; font-size: 40px; font-weight: 300; color: #555; line-height: 40px; }
 +
h4 { font-family: 'Josefin Sans', sans-serif; font-size: 35px; font-weight: 300; color: #555; line-height: 40px; }
 +
h5 { font-family: 'Josefin Sans', sans-serif; font-size: 30px; font-weight: 300; color: #555; line-height: 40px; }
 +
h6 { font-family: 'Josefin Sans', sans-serif; font-size: 25px; font-weight: 300; color: #555; line-height: 40px; }
 +
h7 { font-family: 'Josefin Sans', sans-serif; font-size: 22px; font-weight: 300; color: #555; line-height: 40px; }
 +
 
 +
img { max-width: 100%; }
 +
 
 +
.medium-paragraph { font-size: 18px; line-height: 34px; }
 +
 
 +
.colored { color: #df6482; }
 +
 
 +
::-moz-selection { background: #df6482; color: #fff; text-shadow: none; }
 +
::selection { background: #df6482; color: #fff; text-shadow: none; }
 +
 
 +
/***** General style, all sections *****/
 +
 
 +
.section-container { margin: 0 auto; padding-bottom: 80px; }
 +
.section-description { margin-top: 60px; padding-bottom: 10px; }
 +
.section-description p { margin-top: 20px; padding: 0 120px; }
 +
 
 +
/***** Divider *****/
 +
 
 +
.divider-1 { padding: 25px 0 15px 0; }
 +
.divider-1 .line { width: 160px; margin: 0 auto; border-bottom: 1px dashed #ccc; }
 +
 
 +
/***** Top menu *****/
 +
.navbar {
 +
margin-bottom: 0;
 +
    z-index: 10;
 +
    position: fixed;
 +
background: white;
 +
border-bottom: 1px solid white;
 +
    box-shadow: 2px 0px 30px black ;
 +
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
 +
}
 +
 
 +
.navbar-no-bg { padding-top: 10px; background: white; }
 +
 
 +
ul.navbar-nav {
 +
        padding-top: 10px;
 +
font-family: 'Josefin Sans', sans-serif;
 +
font-size: 14px;
 +
color: #fff;
 +
font-weight: 400;
 +
    display: inline-block;
 +
text-transform: uppercase;
 +
}
 +
.navbar-inverse ul.navbar-nav li a { color: grey; border: 0; }
 +
.navbar-inverse ul.navbar-nav li a:hover { color: #000; border: 0; }
 +
.navbar-inverse ul.navbar-nav li a:focus { color: #000; outline: 0; border: 0; }
 +
 
 +
 
 +
.navbar-brand {
 +
width: 100%;
 +
    position: absolute;
 +
    top: 1px;
 +
}
 +
 
 +
 
 +
 
 +
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0; }
 +
 
 +
.dropdown:hover .dropdown-menu {
 +
    display: block;
 +
    background-color: white;
 +
    font-family: 'Josefin Sans', sans-serif;
 +
font-size: 14px;
 +
font-weight: 400;
 +
text-transform: uppercase;
 +
    border-top: none;
 +
}
 +
.dropdown-menu>li>a {
 +
    color: grey;
 +
}
 +
 
 +
/* Animate */
 +
 
 +
 
 +
 
 +
.top-content .text h1 { color: #393939; }
 +
 
 +
.top-content .description { margin: 30px 0 10px 0; }
 +
.top-content .description p { opacity: 0.8; }
 +
.top-content .description a { color: #fff; border-bottom: 1px dotted #fff; }
 +
.top-content .description a:hover, .top-content .description a:focus { color: #fff; border: 0; }
 +
 
 +
 
 +
/***** Features *****/
 +
 
 +
.features-box { margin-top: 30px; text-align: left; }
 +
.features-box .features-box-icon { font-size: 60px; color: #df6482; line-height: 60px; text-align: center; }
 +
.features-box h3 { margin-top: 0; padding: 0 0 10px 0; }
 +
 
 +
 
 +
#footer-sec {
 +
    position: relative;
 +
    background-color: #393939;
 +
font-family: 'Josefin Sans', sans-serif;
 +
}
 +
#footer-sec h4 {
 +
color: white;
 +
 
 +
}
 +
#footer-sec  li > a {
 +
color: grey;
 +
font-size: 16x;
 +
}
 +
#footer-sec  span {
 +
font-family: 'Josefin Sans', sans-serif;
 +
color: grey;
 +
font-size: 16px;
 +
}
 +
 
 +
#footer-sec  li {
 +
color: grey;
 +
font-size: 16px;
 +
list-style: none;
 +
    padding-bottom: 2px;
 +
}
 +
 
 +
 
 +
#footer-sec li > a:hover{
 +
    color: white;
 +
    text-decoration: none;
 +
    transition-delay: 0.1s;
 +
    -webkit-transition: color 1s; /* Safari */
 +
    transition: color 1s;
 +
}
 +
#facebook, #twitter {
 +
color: grey
 +
}
 +
#facebook:hover,#twitter:hover {
 +
    color: white;
 +
    transition-delay: 0.1s;
 +
    -webkit-transition: color 1s; /* Safari */
 +
    transition: color 1s;
 +
}
 +
 
 +
 
 +
/***** MEDIA QUERIES *****/
 +
 
 +
@media (max-width: 1211px) {
 +
    .navbar-header {
 +
        float: none;
 +
    }
 +
    .navbar-toggle {
 +
        display: block;
 +
    }
 +
    .navbar-collapse {
 +
        border-top: 1px solid transparent;
 +
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
 +
    }
 +
    .navbar-collapse.collapse {
 +
        display: none!important;
 +
    }
 +
    .navbar-brand {position: absolute; left: 10px;top: 1px;}
 +
    #circle:before {
 +
        height: 61px !important;
 +
    }
 +
    .navbar {
 +
        height: 77px;
 +
    }
 +
    .navbar-nav {
 +
        float: none!important;
 +
        margin: 7.5px -15px;
 +
    }
 +
    .navbar-nav>li {
 +
        float: none;
 +
    }
 +
    .navbar-nav>li>a {
 +
        padding-top: 10px;
 +
        padding-bottom: 10px;
 +
    }
 +
    .navbar-text {
 +
        float: none;
 +
        margin: 15px 0;
 +
    }
 +
    /* since 3.1.0 */
 +
    .navbar-collapse.collapse.in {
 +
        display: block!important;
 +
    }
 +
    .collapsing {
 +
        overflow: hidden!important;
 +
    }
 +
}
 +
   
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
#circle {
 +
    position: relative;
 +
    box-shadow: 2px 0px 30px black ;
 +
    background-color: blue;
 +
    height: 120px;
 +
    width: 120px;
 +
    border-radius: 50%;
 +
   
 +
   
 +
}
 +
 
 +
#circle:before{
 +
    position: absolute;
 +
    content: "";
 +
    width: 260%;
 +
    height: 60px;
 +
   
 +
    left: -90%;
 +
    background: white;
 +
}
 +
 
 +
 
 +
#circle:after{
 +
    position: absolute;
 +
    content: "";
 +
    width: 100%;
 +
    height: 100%;
 +
    left: 0;
 +
    top: 0;
 +
    background: white;
 +
    border-radius: 50%;
 +
    background-image: url('https://static.igem.org/mediawiki/2017/8/8f/Heidelberg_2017_phage_logo.svg');
 +
    background-size: 90px 90px;
 +
    background-repeat: no-repeat;
 +
    background-position: center;
 +
}
 +
 
 +
 
 +
 
 +
  .input_form {
 +
                        background-color: #939393;
 +
                        border: none;
 +
                        color: white;
 +
                        padding: 5px 32px;
 +
                        margin-top: 25px;
 +
                        text-align: center;
 +
                        text-decoration: none;
 +
                        display: inline-block;
 +
                        font-size: 16px; 
 +
                        }
 +
                       
 +
                        input[type="text"] {
 +
                          display: block;
 +
                          margin: 0;
 +
                          width: 100%;
 +
                          height: 30px;
 +
                          font-size: 18px;
 +
                          -webkit-appearance: none;
 +
                          -moz-appearance: none;
 +
                          appearance: none;
 +
                          -webkit-box-shadow: none;
 +
                          -moz-box-shadow: none;
 +
                          box-shadow: none;
 +
                          -webkit-border-radius: none;
 +
                          -moz-border-radius: none;
 +
                          -ms-border-radius: none;
 +
                          -o-border-radius: none;
 +
                          border-radius: none;
 +
                        }
 +
                       
 +
                        #sidenav {
 +
                            font-family: 'Josefin Sans', sans-serif;
 +
                            font-size: 14px;
 +
                            color: #fff;
 +
                            font-weight: 400;
 +
                            text-transform: uppercase;
 +
                           
 +
                          list-style: none;
 +
                        }
 +
                        #sidenav {
 +
                            font-family: 'Josefin Sans', sans-serif;
 +
                            font-size: 14px;
 +
                            color: #fff;
 +
                            font-weight: 400;
 +
                            text-transform: uppercase;
 +
                           
 +
                        }
 +
                        #sidenav > li > ul > li {
 +
                            list-style: none;
 +
                        }
 +
                        #sidenav > li > ul > li > a {
 +
                            color: firebrick;
 +
                        }
 +
                        #sidenav > li > ul > li > a:hover {
 +
                            color: #393939;
 +
                            transition: color 1s ease;
 +
                        }
 +
                       
 +
                        .navmenu-brand > img {
 +
                            border-radius: 200px;
 +
                            width: 100px;
 +
                            height: auto;
 +
                        }
 +
                       
 +
                        .navmenu-brand {
 +
                            text-align: center;
 +
                            font-size: 20px;
 +
                            color: #fff;
 +
                            font-weight: 400;
 +
                           
 +
                           
 +
                        }
 +
               
 +
               
 +
</style>
 
<link rel="stylesheet" type="text/css"  
 
<link rel="stylesheet" type="text/css"  
 
href="https://2017.igem.org/Template:Heidelberg/table_layout/CSS?action=raw&amp;ctype=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 -->
−
                        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 +
 
 +
 
 +
 
  
 
<script type="text/javascript" src="https://2015.igem.org/Template:Heidelberg/js/jasnybootstrapmin?action=raw&amp;ctype=text/javascript"></script>
 
<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">
 
<script src="http://static.tildacdn.com/js/jquery-1.10.2.min.js"></script>
 
<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-scripts-2.8.min.js"></script>
Line 151: Line 563:
 
<script src="http://static.tildacdn.com/js/tilda-map-1.0.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>
 
<script src="http://static.tildacdn.com/js/lazyload-1.3.min.js"></script>
−
    <script src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+
<!-- jQuery CDN -->
−
   
+
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
−
</head>
+
        <!-- 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 {
 +
        background-color: #010101;
 +
    }
 +
      #textblock1 {
 +
          position: absolute;
 +
          top: 200px;
 +
          left: 0px;
 +
          width: 500px;
 +
      }     
 +
      #textblock2 {
 +
          position: absolute;
 +
          top: 1050px;
 +
          left: 150px;
 +
          width: 500px;
 +
      } 
 +
      #textblock3 {
 +
            position: absolute;
 +
          top: 950px;
 +
          right: 50px;
 +
          width: 500px;
 +
          height: 400px;
 +
         
 +
      }
 +
      #textblock4 {
 +
            position: absolute;
 +
          top: 1600px;
 +
          left: 100px;
 +
          width: 500px;
 +
      }
 +
      #textblock5 {
 +
            position: absolute;
 +
          top: 2150px;
 +
          right: 100px;
 +
          width: 600px;
 +
      }
 +
      #textblock6 {
 +
            position: absolute;
 +
          top: 2700px;
 +
          left: 0px;
 +
          width: 500px;
 +
      },
 +
         #textblock6 {
 +
            position: absolute;
 +
          top: 2800px;
 +
          left: 0px;
 +
          width: 400px;
 +
      }
 +
    #textblock7 {
 +
            position: absolute;
 +
          top: 3250px;
 +
          right: 100px;
 +
          width: 400px;
 +
      }
 +
#textblock1 > p, #textblock3 > p, #textblock5 > p,#textblock2 > p, #textblock4 > p, #textblock6 > p, #textblock7 > p {
 +
    color: white !important;
 +
    text-align: center;
 +
    font-size: 28px !important;
 +
    font-weight: 300 !important;
 +
}
  
 +
#textblock1 > a {
 +
    color: #F8991D;
 +
    font-size: 50px;
 +
}
 +
#textblock1 > a:hover, #textblock2 > a:hover, #textblock3 > a:hover, #textblock4 > a:hover, #textblock5 > a:hover, #textblock6 > a:hover, #textblock7 > a:hover, #textblock8 > a:hover  {
 +
    text-decoration: underline;
 +
}
 +
#textblock2 > a {
 +
    color: whitesmoke;
 +
    font-size: 50px;
 +
    line-height: 50px;
 +
}
  
−
+
#textblock4 > a {
−
<body class="t-body">
+
  color:#FEE000;
−
                        <!-- CSS -->       
+
    font-size: 50px;
−
                   
+
    line-height: 50px;
 +
}
 +
#textblock5 > a {
 +
  color:whitesmoke;
 +
    font-size: 50px;
 +
    line-height: 50px;
 +
}
 +
#textblock6 > a {
 +
  color:#9D1C20;
 +
    font-size: 50px;
 +
    line-height: 50px;
 +
}
  
  
 +
#textblock7 > a {
 +
    color: #6698be;
 +
    font-size: 50px;
 +
    line-height: 50px;
 +
}
 +
#textblock8 > a {
 +
    color: #393939;
 +
    font-size: 50px;
 +
}
 +
 +
    #toolbox-icon1 {
 +
position: absolute;
 +
top: 4460px;
 +
left: 430px;
 +
} 
 +
   
 +
    #toolbox-row1 {
 +
        top: 0px;
 +
    }
 +
    #toolbox-row2 {
 +
        top: 200px;
 +
    }
 +
    #toolbox-row3 {
 +
        top: 400px;
 +
    }
 +
    wrapper {
 +
        padding-bottom: 0px;
 +
    }
 +
 +
     
 +
                              video {
 +
                            position: relative;
 +
                         
 +
                            width: 100%;
 +
                            height: auto;
 +
                            background: url('') no-repeat;
 +
                         
 +
 +
                        }   
 +
      #Icon1 {
 +
            position: absolute;
 +
          width: 400px;
 +
            left: 4%;
 +
      }
 +
      #Icon2 {
 +
          position: absolute;
 +
          width: 400px;
 +
          left: 1%;
 +
 
 +
      }
 +
      #Icon3 {
 +
            position: absolute;
 +
          left: 6%;
 +
          width: 400px;
 +
      }
 +
      #Icon4 {
 +
            position: absolute;
 +
            right: 11%;
 +
          width: 300px;
 +
      }
 +
      #Icon5 {
 +
        position: absolute;
 +
        right: 8%;
 +
          width: 300px;
 +
      }
 +
      #Icon6 {
 +
          position: absolute;
 +
            right: 11%;
 +
          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: #009E73 !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 {
 +
          visibility: visible !important;
 +
          text-align: center;
 +
          transition: color 1s ease;
 +
          color: white !important;
 +
      }
 +
      #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  {
 +
          visibility: hidden!important;
 +
      }
 +
      #Icon2 > .icon-text > h5 {
 +
          text-transform: uppercase;
 +
          color: #F8991D !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      } 
 +
 +
     
 +
      #Icon3 > .icon-text > h5 {
 +
          text-transform: uppercase;
 +
          color: #6698BE !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      } 
 +
     
 +
 +
     
 +
      #Icon4 > .icon-text-right > h5 {
 +
          text-transform: uppercase;
 +
          color: #FEE000 !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      }
 +
 +
     
 +
      #Icon5 > .icon-text-right > h5 {
 +
          text-transform: uppercase;
 +
          color: #009193 !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      }
 +
     
 +
 +
     
 +
      #Icon6 > .icon-text-right > h5 {
 +
          text-transform: uppercase;
 +
          color: #9D1C20 !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      }
 +
     
 +
      .phage-scroller {
 +
              width: 150px;
 +
              height: auto;
 +
          }
 +
     
 +
      #toolbox {
 +
          position: absolute;
 +
          top: 3800px;
 +
          min-height: 600px ;
 +
          width: 100%;
 +
          max-width: 1200px;
 +
          margin: 0 auto;
 +
         
 +
      }
 +
     
 +
      #toolbox-image {
 +
          position: absolute;
 +
          left: 380px;
 +
          width: 500px;
 +
          top: 10%
 +
      }
 
      
 
      
−
    <!-- Top menu -->
+
      .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: 100px;
 +
          left: 0px;
 +
          width: 400px;
 +
      }     
 +
          #textblock1 > p, #textblock3 > p, #textblock5 > p {
 +
    color: white !important;
 +
   
 +
    text-align: center;
 +
    font-size: 24px !important;
 +
    font-weight: 300 !important;
 +
}
 +
         
 +
    #textblock1 > a {
 +
    line-height: 50px;
 +
    font-size: 50px;
 +
}
 +
         
 +
      #textblock2 {
 +
          position: absolute;
 +
          top: 800px;
 +
          left: 150px;
 +
          width: 500px;
 +
      } 
 +
       
 +
      #textblock3 {
 +
            position: absolute;
 +
          top: 780px;
 +
          right: 0px;
 +
          width: 300px;
 +
          height: 220px;
 +
      }
 +
      #textblock4 {
 +
            position: absolute;
 +
          top: 1300px;
 +
          left: 0px;
 +
          width: 500px;
 +
      }
 +
      #textblock5 {
 +
            position: absolute;
 +
          top: 1770px;
 +
          right: 30px;
 +
          width: 500px;
 +
      }
 +
      #textblock6 {
 +
            position: absolute;
 +
          top: 2200px;
 +
          left: 0px;
 +
          width: 400px;
 +
      }
 +
         
 +
          #textblock7 {
 +
              position: absolute;
 +
              top: 2650px;
 +
              right: 50px;
 +
          }
 +
         
 +
          #toolbox {
 +
              position: absolute;
 +
              top: 3600px;
 +
             
 +
             
 +
          }
 +
          #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;
 +
          }
 +
      }
 +
      @media (max-width: 960px) {
 +
       
 +
            #wrapper {
 +
              padding-bottom: 980px;
 +
             
 +
          }
 +
            .phage-scroller {
 +
              width: 100px;
 +
              height: auto;
 +
          }
 +
              #textblock1 {
 +
          position: absolute;
 +
          top: 20px;
 +
          left: 0px;
 +
          width: 280px;
 +
      }     
 +
         
 +
        #textblock1 > p,#textblock2 > p, #textblock3 > p,#textblock4 > p, #textblock5 > p,#textblock6 > p, #textblock7 > p {
 +
            color: white !important;
 +
            text-align: center;
 +
            font-size: 20px !important;
 +
            font-weight: 300 !important;
 +
        }
 +
          #textblock1 > a,#textblock2 > a, #textblock4 > a,  #textblock6 > a, #textblock7 > a {
 +
    font-size: 35px;
 +
    line-height: 30px;
 +
}
 +
          #textblock5 > a {
 +
              font-size: 25px;
 +
            line-height: 20px; 
 +
          }
 +
             
 +
      #textblock2 {
 +
          position: absolute;
 +
          top: 520px;
 +
          left: 120px;
 +
          width: 300px;
 +
      } 
 +
       
 +
      #textblock3 {
 +
            position: absolute;
 +
          top: 530px;
 +
          right: 0px;
 +
          width: 200px;
 +
          height: 120px;
 +
         
 +
      }
 +
      #textblock4 {
 +
            position: absolute;
 +
          top: 820px;
 +
          left: 0px;
 +
          width: 350px;
 +
      }
 +
      #textblock5 {
 +
            position: absolute;
 +
          top: 1110px;
 +
          right: 0px;
 +
          width: 360px;
 +
      }
 +
      #textblock6 {
 +
            position: absolute;
 +
          top: 1380px;
 +
          left: 0px;
 +
          width: 300px;
 +
      } 
 +
        #textblock7 {
 +
            position: absolute;
 +
          top: 1680px;
 +
          right: 0px;
 +
          width: 300px;
 +
      } 
 +
         
 +
          #toolbox {
 +
              top: 2300px;
 +
          }
 +
         
 +
         
 +
          #toolbox-image {
 +
              position: relative;
 +
              left: 30px !important;
 +
          }
 +
          #Icon1 {
 +
              left: 100px;
 +
              top: 0px;
 +
          }
 +
          #Icon2 {
 +
              left: 100px;
 +
              top: 150px;
 +
          }
 +
          #Icon3 {
 +
              left: 100px;
 +
              top: 300px;
 +
          }
 +
          #Icon4 {
 +
              right: 200px;
 +
              top: 150px;
 +
          }
 +
          #Icon5 {
 +
              right: 200px;
 +
              top: 300px; 
 +
          }
 +
          #Icon6 {
 +
              right: 200px;
 +
              top: 450px;
 +
          }
 +
           
 +
      }
 +
     
 +
      @media (max-width: 700px) {
 +
         
 +
          #wrapper {
 +
              padding-bottom: 680px;
 +
             
 +
          }
 +
            #toolbox-row1 {
 +
                top: 0px;
 +
            }
 +
            #toolbox-row2 {
 +
                top: 100px;
 +
            }
 +
            #toolbox-row3 {
 +
                top: 200px;
 +
            }
 +
         
 +
         
 +
         
 +
          #toolbox {
 +
              position: absolute;
 +
              top: 97%;
 +
          }
 +
              #textblock1 {
 +
          position: absolute;
 +
          top: 4%;
 +
          left: 0px;
 +
          width: 42%;
 +
             
 +
      }     
 +
          #textblock1 > p,#textblock2 > p, #textblock3 > p,#textblock4 > p, #textblock5 > p,#textblock6 > p, #textblock7 > p {
 +
    color: white !important;
 +
    line-height: 3.2vw !important;
 +
    text-align: center;
 +
    font-size: 3.1vw !important;
 +
    font-weight: 300 !important;
 +
}
 +
         
 +
    #textblock1 > a, #textblock2 > a, #textblock3 > a, #textblock4 > a, #textblock5 > a, #textblock6 > a, #textblock7 > a {
 +
  line-height: 3vw !important;
 +
    font-size: 3.1vw;
 +
}
 +
         
 +
    #textblock2 {
 +
          position: absolute;
 +
          top: 23%;
 +
          left: 15%;
 +
          width: 40%;
 +
      } 
 +
       
 +
      #textblock3 {
 +
            position: absolute;
 +
          top: 24%;
 +
          right: 3%;
 +
          width: 40%;
 +
         
 +
      }
 +
      #textblock4 {
 +
            position: absolute;
 +
          top: 35%;
 +
          left: 10%;
 +
          width: 40%;
 +
      }
 +
      #textblock5 {
 +
            position: absolute;
 +
          top: 48%;
 +
          right: 0px;
 +
          width: 50%;
 +
      }
 +
      #textblock6 {
 +
            position: absolute;
 +
          top: 60%;
 +
          left: 0%;
 +
          width: 40%;
 +
      } 
 +
        #textblock7 {
 +
            position: absolute;
 +
          top: 72%;
 +
          right: 5%;
 +
          width: 40%;
 +
      }   
 +
          .toolbox-icon {
 +
          width: 80px;
 +
          height: 80px;
 +
          border-radius: 100%;
 +
          position: absolute;
 +
         
 +
      }
 +
        #textblock1 > a, #textblock2 > a, #textblock3 > a, #textblock4 > a, #textblock5 > a, #textblock6 > a, #textblock7 > a {
 +
  line-height: 3vw !important;
 +
    font-size: 3.1vw;
 +
}   
 +
        #Icon1 > .icon-text > h5 {
 +
            line-height: 3vw !important;
 +
    font-size: 3.1vw;
 +
          text-transform: uppercase;
 +
          color: #009E73 !important;
 +
          font-weight: 400 !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 {
 +
          visibility: visible !important;
 +
          text-align: center;
 +
          transition: color 1s ease;
 +
          color: white !important;
 +
      }
 +
      #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  {
 +
          visibility: hidden!important;
 +
      }
 +
      #Icon2 > .icon-text > h5 {
 +
          text-transform: uppercase;
 +
          color: #F8991D !important;
 +
          font-weight: 400 !important;
 +
          line-height: 3vw !important;
 +
    font-size: 3.1vw;
 +
      } 
 +
 
 +
     
 +
      #Icon3 > .icon-text > h5 {
 +
          text-transform: uppercase;
 +
          color: #6698BE !important;
 +
          font-weight: 400 !important;
 +
          line-height: 3vw !important;
 +
    font-size: 3.1vw;
 +
      } 
 +
     
 +
 
 +
     
 +
      #Icon4 > .icon-text-right > h5 {
 +
          text-transform: uppercase;
 +
          color: #FEE000 !important;
 +
          font-weight: 400 !important;
 +
         
 +
            line-height: 3vw !important;
 +
    font-size: 3.1vw;
 +
      }
 +
 
 +
     
 +
      #Icon5 > .icon-text-right > h5 {
 +
          text-transform: uppercase;
 +
          color: #009193 !important;
 +
          font-weight: 400 !important;
 +
            line-height: 3vw !important;
 +
    font-size: 3.1vw;
 +
      }
 +
     
 +
 
 +
     
 +
      #Icon6 > .icon-text-right > h5 {
 +
          text-transform: uppercase;
 +
          color: #9D1C20 !important;
 +
          font-weight: 400 !important;
 +
            line-height: 3vw !important;
 +
    font-size: 3.1vw;
 +
      } 
 +
         
 +
         
 +
         
 +
         
 +
      }
 +
     
 +
     
 +
 
 +
     
 +
     
 +
     
 +
     
 +
 +
.fa-twitter{
 +
background: #393939;
 +
color: #FFFFFF;
 +
  padding: 0.1em 0.1em;
 +
    font-size: 2em;
 +
}
 +
    .fa-facebook{
 +
background: #393939;
 +
color: #FFFFFF;
 +
  padding: 0.1em 0.3em;
 +
        font-size: 2em;
 +
}
 +
 
 +
                    </style>
 +
         
 +
</head>
 +
<body class="t-body">
 +
     
 +
    <!-- Top menu -->
 
<nav class="navbar navbar-inverse navbar-fixed-top navbar-no-bg " role="navigation">
 
<nav class="navbar navbar-inverse navbar-fixed-top navbar-no-bg " role="navigation">
 
<div class="container">
 
<div class="container">
Line 192: Line 1,257:
 
                         </ul>
 
                         </ul>
 
                         </li>
 
                         </li>
−
<li class="dropdown"><a href="https://2017.igem.org/Team:Heidelberg/Software&Hardware">Software &amp; Hardware <span class="caret"></span></a>
+
<li class="dropdown"><a href="https://2017.igem.org/Team:Heidelberg/Software&amp;Hardware">Software &amp; Hardware <span class="caret"></span></a>
 
                         <ul class="dropdown-menu">
 
                         <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/Software">AI</a></li>   
Line 270: Line 1,335:
 
         </ul>
 
         </ul>
 
     </nav>
 
     </nav>
−
                 
 
  
−
<div style="padding-top: 10%;background-color:white;">
+
      <!-- cover -->
−
<div class="t-container">
+
<div class="t-cover"  style="height:100vh;" >
 +
 
 +
 
 +
                                    <div id="media-box">
 +
                                      <video id="landing-page-video" poster="" 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/4/46/T--Heidelberg--2017_Phage_on_top.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">
 
<div class="t-col t-col_12">
−
                                                          
+
                                                         <img src="https://static.igem.org/mediawiki/2017/4/4a/T--Heidelberg--2017_Red_Thread.svg">
−
                                                 
+
  
−
                                                        <h1>iGEM Team Heidelberg</h1>
+
</div>
−
                                                        <h2>Coming soon...</h2>
+
−
                                                        <hr>  
+
<div  id="textblock1">
−
                                                        <div class="container-fluid">
+
                                                                    <p>This year´s iGEM Team Heidelberg aims at harnessing the enormous power of</p>
−
                                                <div class="row">
+
                                                                    <a href="#" id="accelerated_evolution"><strong>Accelerated evolution</strong></a>
−
<div class="pull-right col-lg-12 col-md-12 col-sm-12 col-xs-12">
+
                                                                    <p>by using Phage-assisted continious evolution (PACE) and our newly created method called PREDCEL</p>
−
                                               
+
                                                                </div>
−
                                                  <a href="#" target="_blank" ><img src="https://static.igem.org/mediawiki/2017/5/52/Team_Heidelberg_2017_Group_Picture.jpeg" alt="#"></a>
+
                                                                <div id="textblock2">
−
                                                </div>
+
                                                                    <p>Let us introduce you to the next generation of directed evolution...</p>
−
                                                </div>
+
                                                                    <a href="#"><strong>Come discover the diversity of Nature</strong></a>
−
                                                </div>
+
                                                                </div>
−
                                                 
+
                                                                <div id="textblock3">
−
                                                        <h3>Project Description</h3>
+
                                                                   
 +
                                                                   
 +
</div>
 +
<div id="textblock4">
 +
                                                                    <p>As finding the right startersequence is quite difficult we used</p>
 +
                                                                    <a href="#" id="artificial_intelligence"><strong>Artificial Intelligence</strong></a>
 +
                                                                    <p>for protein classification & generation of entirely new functional sequences</p>
 +
                                                                   
 +
</div>
 +
                                                            <div id="textblock5">
 +
                                                                  <p>Right at the beginning our major ambition was it utilize PACE for</p>
 +
                                                                    <a href="#"><strong>Carbon-Silicon Bond Formation</strong></a>
 +
                                                                    <p> which could ultimately affect a lot of different aspects of our life and life in general</p>
 +
</div>
 +
                                                    <div id="textblock6">
 +
                                                                <p>In order to make PREDCEL work, we also had a lot to model</p><br><p> Therefore check out our</p>
 +
                                                                    <a href="#"><strong>Interactive modeling</strong></a>
 +
</div>
 +
                                                    <div id="textblock7">
 +
                                                        <p> As we affect the world & <br> the world affects us, we need</p>
 +
                                                                    <a href="#"><strong>Human Practice</strong></a>
 +
</div>
 +
                                                   
 +
                                                    <div id="toolbox">
 +
                                                           
 +
                                                          <div style="position: relative;" id="toolbox-row1">
 +
                                                                <div id="Icon1" class="icon"><img src="../../savenet/Icons/Destructase.svg" class="toolbox-icon" style="left: 0px;"><div class="icon-text" style="width: 230px;"><h5>Destructase Screening</h5><p>Screen</p></div></div>
 +
                                                                <div id="Icon4" class="icon"><img src="../../savenet/Icons/Carbonsilicones.svg" class="toolbox-icon" style="left: 250px;"><div class="icon-text-right"><h5>Organo silicones</h5><p>Produce</p></div></div>
 +
                                                            </div>
 
                                                          
 
                                                          
−
                                                     
+
                                                            <div style="position: relative;" id="toolbox-row2">
−
          <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>
+
                                                                <div id="Icon2" class="icon"><img src="../../savenet/Icons/DNA Editing.svg" class="toolbox-icon" style="left: 0px;"><div class="icon-text" style="width: 200px;"><h5>DNA Editing</h5><p>Edit</p></div></div>
−
      <br>
+
                                                           
−
       
+
                                                                <div id="Icon5" class="icon"><img src="../../savenet/Icons/Protein Interaction.svg" class="toolbox-icon" style="left: 270px;"><div class="icon-text-right"><h5>Protein Interaction</h5><p>Interact</p></div></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;t" id="toolbox-row3">
−
<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>
+
                                                                  <div id="Icon3" class="icon"><img src="../../savenet/Icons/Opto Genetics.svg" class="toolbox-icon" style="left: 0px;"><div class="icon-text" style="width: 200px;"><h5>Opto-Genetics</h5><p>Turn on</p></div></div>   
−
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 id="Icon6" class="icon"><img src="../../savenet/Icons/Product Specificity.svg" class="toolbox-icon" style="left: 250px;"><div class="icon-text-right"><h5>Protein Specificity</h5><p>Specify</p></div></div>
−
</p>
+
                                                          </div> 
−
         
+
                                                </div>
−
       
+
                                            </div>
−
                      </div>
+
                                    </div>    
−
                        </div>
+
                                         
−
                        </div>
+
 +
 +
 +
 
 
                                             <section id="footer-sec">
 
                                             <section id="footer-sec">
−
         <div class="container">
+
         <div class="t-container">
−
             <div class="row" style="padding-top: 30px;">
+
             <div class="t-row" style="padding-top: 30px;">
−
                 <div class="col-md-3">
+
                 <div class="t-col t-col_3">
−
                     <h4>About us</h4>
+
                     <h4>ABOUT US </h4>
 
                     <p>"We are an extremely motivated team of young students competing in the worlds biggest synthetic biology competition"</p>
 
                     <p>"We are an extremely motivated team of young students competing in the worlds biggest synthetic biology competition"</p>
  
 
                 </div>
 
                 </div>
−
                 <div class="col-md-3">
+
                 <div class="t-col t-col_3">
 
                     <h4> Useful <strong>Links</strong> </h4>
 
                     <h4> Useful <strong>Links</strong> </h4>
  
−
<p>
+
<li>
 
<a href="#">
 
<a href="#">
 
<i class="fa fa-angle-right">
 
<i class="fa fa-angle-right">
Line 324: Line 1,435:
 
Special pages
 
Special pages
 
</a>
 
</a>
−
    </p>
+
</li>
−
<p>
+
<li>
 
<a href="#">
 
<a href="#">
 
<i class="fa fa-angle-right">
 
<i class="fa fa-angle-right">
Line 331: Line 1,442:
 
Main Page
 
Main Page
 
</a>
 
</a>
−
</p>
+
</li>
 
</div>
 
</div>
−
                 <div class="col-md-3">
+
                 <div class="t-col t-col_3">
 
                     <h4> Follow us on </h4>
 
                     <h4> Follow us on </h4>
−
                     <a href="#" target="_blank" id="facebook"><i class="fa fa-facebook-square fa-2x"></i></a>   
+
                     <a href="#" target="_blank"><i class="fa fa-facebook" id="facebook"></i></a>   
−
                     <span style="color: grey">&amp;</span>
+
                     <span style="color: grey">&</span>
−
                     <a href="#" target="_blank" id="twitter"><i class="fa fa-twitter-square fa-2x"></i></a>
+
                     <a href="#" target="_blank"><i class="fa fa-twitter" id="twitter"></i></a>
 
                 </div>
 
                 </div>
−
                 <div class="col-md-3">
+
                 <div class="t-col t-col_3">
 
                     <h4> Contact us </h4>
 
                     <h4> Contact us </h4>
−
                  <p>
+
                    <li>
 
<i class="fa fa-map-marker fa-lg">
 
<i class="fa fa-map-marker fa-lg">
 
</i>
 
</i>
Line 347: Line 1,458:
 
<br>
 
<br>
 
69120 Heidelberg
 
69120 Heidelberg
−
                    </p>
+
</li>
−
<p>
+
<li>
 
<i class="fa fa-phone">
 
<i class="fa fa-phone">
 
</i>
 
</i>
−
06221/5451202
+
1 -234 -456 -7890
−
</p>
+
</li>
  
−
<p>
+
<li>
 
<a href="mailto:info@yourdomain.com">
 
<a href="mailto:info@yourdomain.com">
 
<i class="fa fa-envelope">
 
<i class="fa fa-envelope">
Line 360: Line 1,471:
 
bioquant@uni-heidelberg.de
 
bioquant@uni-heidelberg.de
 
</a>
 
</a>
−
</p>
+
</li>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </section>
 
     </section>
−
        </script>
+
    <script>
−
       
+
    
−
<script>
+
$('a[href^="#textblock1"]').on('click',function (e) {
−
 
+
−
var ToC =
+
−
  "<nav role='navigation' class='table-of-contents'>" +
+
−
    "<h3>On this page:</h3>" +
+
−
    "<ul class='toc-nav'>";
+
−
 
+
−
var newLine, el, title, link;
+
−
 
+
−
$("article h2").each(function() {
+
−
   
+
−
    el = $(this);
+
−
    title = el.text();
+
−
    link = "#" + el.attr("id");
+
−
 
+
−
  newLine =
+
−
    "<li>" +
+
−
      "<a href='" + link + "'>" +
+
−
        title +
+
−
      "</a>" +
+
−
    "</li>";
+
−
 
+
−
  ToC += newLine;
+
−
 
+
−
});
+
−
 
+
−
ToC +=
+
−
   "</ul>" +
+
−
  "</nav>";
+
−
 
+
−
$(".all-questions").prepend(ToC);   
+
−
</script>
+
−
<script>
+
−
$(document).ready(function(){
+
−
$('a[href^="#"]').on('click',function (e) {
+
 
    e.preventDefault();
 
    e.preventDefault();
  
 
    var target = this.hash;
 
    var target = this.hash;
 
    var $target = $(target);
 
    var $target = $(target);
−
 
+
        var scroll = $target.offset().top-200;
−
    $('html, body').stop().animate({
+
    $('html').stop().animate({
−
        'scrollTop': $target.offset().top-200
+
        'scrollTop': scroll
−
    }, 1000, 'swing', function () {
+
    }, 1000, 'swing')
−
        window.location.hash = target;
+
−
    });
+
 
});
 
});
−
});   
 
 
</script>
 
</script>
−
<script>
+
<script>
  
 
     window.onresize = window.onload = function() {
 
     window.onresize = window.onload = function() {
Line 428: Line 1,502:
 
     }       
 
     }       
 
}
 
}
−
 
 
 
     </script>  
 
     </script>  
−
<!-- Saved in parser cache with key 2014_igem_org:pcache:idhash:224-0!1!0!!en!2!edit=0 and timestamp 20170831072851 -->
 
−
<div class="printfooter">
 
−
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>
 
−
</div>
 
−
    </div>
 
−
<!-- PAGE FOOTER -- ITEMS FROM COLUMN ! HAVE BEEN MOVED HERE  -- RDR  -->
 
−
<div class="visualClear"></div>
 
−
    <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">
 
−
 
  
−
  <!-- Recentchanges is not handles well DEBUG -->
+
          
−
    <li id="t-recentchanges"><a href="/Special:RecentChanges"
+
−
      title='Recent changes'>Recent changes</a></li>
+
−
 
+
−
    <li id="t-whatlinkshere"><a href="/Special:WhatLinksHere/WikitemplateA_home"
+
−
      title="List of all wiki pages that link here [j]" accesskey="j">What links here</a></li>
+
−
 
+
−
                        <li id="t-recentchangeslinked"><a href="/Special:RecentChangesLinked/WikitemplateA_home"
+
−
                          title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li>
+
−
 
+
−
 
+
−
 
+
−
                <li id="t-specialpages"><a href="/Special:SpecialPages"
+
−
                  title="List of all special pages [q]" accesskey="q">Special pages</a>
+
−
                </li>
+
−
                <li><a href='/Special:Preferences'>My preferences</a></li>
+
−
            </ul>
+
−
         </div> <!-- close footer -->
+
−
        <div id='footer'>
+
−
    <ul id="f-list">
+
−
 
+
−
            <li id="t-print"><a href="/wiki/index.php?title=WikitemplateA_home&amp;printable=yes"
+
−
              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"
+
−
              title="Permanent link to this revision of the page">Permanent link</a>
+
−
            </li>
+
−
 
+
−
 
+
−
        <li id="privacy"><a href="/2014.igem.org:Privacy_policy" title="2014.igem.org:Privacy policy">Privacy policy</a></li>
+
−
        <li id="disclaimer"><a href="/2014.igem.org:General_disclaimer" title="2014.igem.org:General disclaimer">Disclaimers</a></li>
+
−
    </ul>
+
−
</div> <!-- close footer -->
+
−
    </div> <!-- close footer-box -->
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
        <!-- 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></div></div>
 
</html>
 
</html>

Revision as of 12:51, 16 October 2017

WikitemplateA home - 2014.igem.org

 

WikitemplateA home

From 2014.igem.org

This year´s iGEM Team Heidelberg aims at harnessing the enormous power of

Accelerated evolution

by using Phage-assisted continious evolution (PACE) and our newly created method called PREDCEL

Let us introduce you to the next generation of directed evolution...

Come discover the diversity of Nature

As finding the right startersequence is quite difficult we used

Artificial Intelligence

for protein classification & generation of entirely new functional sequences

Right at the beginning our major ambition was it utilize PACE for

Carbon-Silicon Bond Formation

which could ultimately affect a lot of different aspects of our life and life in general

In order to make PREDCEL work, we also had a lot to model


Therefore check out our

Interactive modeling

As we affect the world &
the world affects us, we need

Human Practice
Destructase Screening

Screen

Organo silicones

Produce

DNA Editing

Edit

Protein Interaction

Interact

Opto-Genetics

Turn on

Protein Specificity

Specify