Difference between revisions of "Team:Heidelberg/Sandbox2"

Line 1: Line 1:
−
 
+
{{Heidelberg/header}}
−
 
+
{{Heidelberg/navbar}}
−
 
+
 
<html>
 
<html>
−
<head>
+
<style>
−
<meta charset="utf-8" />
+
#overall-wrapper {
−
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
        min-width: 700px;
−
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
    }
−
+
    body {
−
         <style type="text/css">
+
        background-color: #010101;
−
#contentSub, #footer-box, #catlinks, #search-controls, #p-
+
    }
 +
      #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;
 +
}
  
−
logo, #sideMenu, #menubar, .logo_2017, .printfooter, .firstHeading,.visualClear {display:  
+
#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;
 +
}
  
−
none;} /*-- hides default wiki settings --*/
+
#textblock4 > a {
−
 
+
  color:#FEE000;
−
#top-section { /*-- styling for default menu bar (edit, page,
+
    font-size: 50px;
−
 
+
    line-height: 50px;
−
history, etc.) --*/
+
}
−
+
#textblock5 > a {
−
border: 0 none;
+
  color:whitesmoke;
−
height: 14px;
+
    font-size: 50px;
−
z-index: 100;
+
    line-height: 50px;
−
top: 0;
+
}
−
position: fixed;
+
#textblock6 > a {
−
width: 975px;  
+
  color:#9D1C20;
−
left: 50%;  
+
    font-size: 50px;
−
margin-left: -487px;
+
    line-height: 50px;
 
}
 
}
  
−
#globalWrapper, #content { /*-- changes default wiki settings
 
  
−
--*/
+
#textblock7 > a {
−
width: 100%;  
+
    color: #6698be;
−
height: 100%;
+
    font-size: 50px;
−
border: 0px;
+
    line-height: 50px;
−
background-color: transparent;
+
}
−
margin: 0px;
+
#textblock8 > a {
−
padding: 0px;
+
    color: #393939;
 +
    font-size: 50px;
 
}
 
}
  
−
html, body, .wrapper { /*-- changes default wiki settings --
+
    #toolbox-icon1 {
 +
position: absolute;
 +
top: 4460px;
 +
left: 430px;
 +
} 
 +
   
 +
    #toolbox-row1 {
 +
        top: 0px;
 +
    }
 +
    #toolbox-row2 {
 +
        top: 200px;
 +
    }
 +
    #toolbox-row3 {
 +
        top: 400px;
 +
    }
 +
    wrapper {
 +
        padding-bottom: 0px;
 +
    }
  
−
*/
+
     
−
width: 100%;  
+
                              video {
−
height: 100%;  
+
                            position: relative;
−
background-color: transparent;
+
                         
−
}
+
                            width: 100%;
−
</style>
+
                            height: auto;
 +
                            background: url('') no-repeat;
 +
                         
  
−
<!-- Assets -->
+
                        }   
−
<link rel="stylesheet" href="http://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" />
+
      #Icon1 {
−
<link rel="stylesheet" href="https://2017.igem.org/Template:Heidelberg/general/CSS?action=raw&amp;ctype=text/css" type="text/css" media="all" />
+
            position: absolute;
−
<link rel="stylesheet" href="http://static.tildacdn.com/css/tilda-zoom-1.0.min.css" type="text/css" media="all" />
+
          width: 400px;
−
                            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400|Roboto:300,400,500">
+
            left: 4%;
−
                        <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/font-awesome/css/font-awesome.min.css">
+
      #Icon2 {
−
                        <link rel="stylesheet" type="text/css"
+
          position: absolute;
−
                              href="https://2017.igem.org/Template:Heidelberg/navbar/CSS?action=raw&amp;ctype=text/css" />
+
          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;
 +
      } 
  
−
                        <!-- Favicon and touch icons -->
+
     
−
                        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+
      #Icon3 > .icon-text > h5 {
−
<script src="http://static.tildacdn.com/js/jquery-1.10.2.min.js"></script>
+
          text-transform: uppercase;
−
<script src="http://static.tildacdn.com/js/tilda-scripts-2.8.min.js"></script>
+
          color: #6698BE !important;
 +
          font-weight: 400 !important;
 +
          line-height: 40px !important;
 +
      } 
 +
     
  
−
<script src="http://static.tildacdn.com/js/tilda-zoom-1.0.min.js"></script>
+
     
−
<script src="http://static.tildacdn.com/js/bootstrap.min.js"></script>
+
      #Icon4 > .icon-text-right > h5 {
−
<script src="http://static.tildacdn.com/js/jquery.touchswipe.min.js"></script>
+
          text-transform: uppercase;
−
<script src="http://static.tildacdn.com/js/tilda-map-1.0.min.js"></script>
+
          color: #FEE000 !important;
−
<script src="http://static.tildacdn.com/js/lazyload-1.3.min.js"></script>
+
          font-weight: 400 !important;
−
        <style>
+
          line-height: 40px !important;
−
                    video {
+
      }
−
    position: relative;
+
−
  min-width: 100%;
+
−
    min-height: 100%;
+
−
    width: auto;
+
−
    height: auto;
+
−
    background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
+
−
  background-size: cover;
+
−
 
+
−
}  
+
−
                       
+
−
        </style>
+
−
</head>
+
−
<body class="t-body">
+
−
                        <!-- CSS -->       
+
−
                   
+
  
 +
     
 +
      #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 {
−
<nav class="navbar navbar-inverse navbar-fixed-top navbar-no-bg" role="navigation">
+
            cursor: pointer;
−
<div class="container">
+
      }
−
<div class="navbar-header">
+
      .toolbox-icon {
−
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar-1">
+
          width: 120px;
−
<span class="sr-only">Toggle navigation</span>
+
          height: 120px;
−
<span class="icon-bar"></span>
+
          border-radius: 100%;
−
<span class="icon-bar"></span>
+
          float: left;
−
<span class="icon-bar"></span>
+
          background-color: white;
−
</button>
+
          position: absolute;
−
<a class="navbar-brand" href="#"><div id="circle">
+
         
−
                    </div></a>
+
      }
−
</div>
+
     
−
<!-- Collect the nav links, forms, and other content for toggling -->
+
      .icon:hover > .toolbox-icon {
−
<div class="collapse navbar-collapse" id="top-navbar-1">
+
         
−
<ul class="nav navbar-nav navbar-right">
+
          transform: scale(1.2,1.2);
−
<li><a href="#">Achievements</a></li>
+
          transition: all 1s ease-out;
−
<li class="dropdown"><a href="#">Project <span class="caret"></span></a>
+
      }
−
 
+
      @media (max-width: 1200px) {
−
                        </li>
+
         
−
<li><a href="#">Modeling</a></li>
+
          #wrapper {
−
<li><a href="#">Software & Hardware <span class="caret"></span></a></li>
+
              padding-bottom: 600px;
−
<li class="dropdown"><a href="#">Human Practice <span class="caret"></span></a>
+
          }
−
                        <ul class="dropdown-menu">
+
         
−
                            <li><a href="">Safety & Security</a></li>
+
         
−
                            <li class="divider"></li>
+
         
−
                            <li><a href="">Integrated Human Practice</a></li>
+
              #textblock1 {
−
                            <li><a href="">Education</a></li>
+
          position: absolute;
−
                            <li class="divider"></li>
+
          top: 100px;
−
                            <li><a href="">Public Engagement</a></li>
+
          left: 0px;
−
                            <li><a href="">Collaborations</a></li>
+
          width: 400px;
−
                        </ul>
+
      }     
 +
          #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;
 
                          
 
                          
−
                        </li>
+
          }
−
<li><a href="#">People</a></li>
+
          #Icon6 {
−
                        <li><a href="#">Toolbox</a></li>
+
              right: 200px;
−
</ul>
+
          }
−
</div>
+
      }
−
</div>
+
      @media (max-width: 960px) {
−
</nav>
+
       
−
+
            #wrapper {
−
+
              padding-bottom: 980px;
−
<!-- cover -->
+
             
 +
          }
 +
            .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;
 +
          }
 +
           
 +
      }
 +
     
 +
   
 +
     
 +
</style>
 +
<!-- cover -->
 
<div class="t-cover"  style="height:100vh;" >
 
<div class="t-cover"  style="height:100vh;" >
  
  
−
                                     <div class="video-container">
+
                                     <div id="media-box">
−
                                       <video poster="" class="video-parallax" playsinline autoplay muted loop>
+
                                       <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">
+
                                         <source src="https://static.igem.org/mediawiki/2017/2/25/T--Heidelberg--2017_Wiki_Intro_iGEM2017.mp4" type="video/mp4">
 
                                       </video>
 
                                       </video>
−
                                     </div>
+
                                     </div>  
−
 
+
−
                                 
+
−
 
+
−
                                   
+
−
                                   
+
−
                                   
+
−
 
+
−
<div class="t306">
+
−
<div class="t-container">
+
−
<div class="t-cover__wrapper t-valign_middle" style="height:100vh;">
+
−
<div class="t306__table-container">
+
−
<div class="t306__table-cell t-align_center t-intro" style="height:100vh;">
+
−
</div>
+
−
</div>
+
−
</div>
+
 
</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>
−
</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 src="https://static.igem.org/mediawiki/2017/4/4a/T--Heidelberg--2017_Red_Thread.svg">
 +
 +
</div>
 +
 +
<div  id="textblock1">
 +
                                                                    <p>This year´s iGEM Team Heidelberg aims at harnessing the enormous power of</p>
 +
                                                                    <a href="#" id="accelerated_evolution"><strong>Accelerated evolution</strong></a>
 +
                                                                    <p>by using Phage-assisted continious evolution (PACE) and our newly created method called PREDCEL</p>
 +
                                                                </div>
 +
                                                                <div id="textblock2">
 +
                                                                    <p>Let us introduce you to the next generation of directed evolution...</p>
 +
                                                                    <a href="#"><strong>Come discover the diversity of Nature</strong></a>
 +
                                                                </div>
 +
                                                                <div id="textblock3">
 +
                                                                    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/2fsSNhgj-Qs" frameborder="0" allowfullscreen></iframe>
 +
                                                                   
 +
</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="https://static.igem.org/mediawiki/2017/7/79/T--Heidelberg--2017_T--Heidelberg--2017_Icon_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="https://static.igem.org/mediawiki/2017/e/e9/T--Heidelberg--2017_T--Heidelberg--2017_Icon_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">
 +
                                                                <div id="Icon2" class="icon"><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;"><div class="icon-text" style="width: 200px;"><h5>DNA Editing</h5><p>Edit</p></div></div>
 +
                                                           
 +
                                                                <div id="Icon5" class="icon"><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: 270px;"><div class="icon-text-right"><h5>Protein Interaction</h5><p>Interact</p></div></div>
 +
                                                                </div>
 +
                                                           
 +
                                                            <div style="position: relative;t" id="toolbox-row3">
 +
                                                                  <div id="Icon3" class="icon"><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;"><div class="icon-text" style="width: 200px;"><h5>Opto-Genetics</h5><p>Turn on</p></div></div>   
 +
                                                                  <div id="Icon6" class="icon"><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: 250px;"><div class="icon-text-right"><h5>Protein Specificity</h5><p>Specify</p></div></div>
 +
                                                          </div> 
 +
                                                </div>
 +
                                            </div>
 +
                                    </div>     
 +
                                         
 +
 +
 
 
−
<div style="padding-top:10%;padding-bottom: 10%;background-color:white; background-image: url(''); background-repeat: no-repeat; background-size: cover;">
 
−
<!-- T017 -->
 
−
<div class="t017">
 
−
<div class="t-container t-align_center">
 
−
<div class="t-col t-col_12">
 
−
<img class="t-img" src="./Images/Toolbox_Wallpaper_Background.svg"/>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
  
−
                                            <section id="footer-sec">
+
                                         
−
        <div class="container">
+
    </div>
−
            <div class="row" style="padding-top: 30px;">
+
   
−
                <div class="col-md-3">
+
−
                    <h4>ABOUT US </h4>
+
−
                    <p>"We are an extremely motivated team of young students competing in the worlds biggest synthetic biology competition"</p>
+
  
−
                </div>
+
       
−
                <div class="col-md-3">
+
−
                    <h4> Useful <strong>Links</strong> </h4>
+
  
−
<li>
+
</html>
−
<a href="#">
+
{{Heidelberg/footer}}
−
<i class="fa fa-angle-right">
+
−
</i>
+
−
Special pages
+
−
</a>
+
−
</li>
+
−
<li>
+
−
<a href="#">
+
−
<i class="fa fa-angle-right">
+
−
</i>
+
−
Main Page
+
−
</a>
+
−
</li>
+
−
</div>
+
−
                <div class="col-md-3">
+
−
                    <h4> Follow us on </h4>
+
−
                    <a href="#" target="_blank"><i class="fa fa-facebook-square fa-3x" id="facebook"></i></a> 
+
−
                    <span style="color: grey">&</span>
+
−
                    <a href="#" target="_blank"><i class="fa fa-twitter-square fa-3x" id="twitter"></i></a>
+
−
                </div>
+
−
                <div class="col-md-3">
+
−
                    <h4> Contact us </h4>
+
−
                    <li>
+
−
<i class="fa fa-map-marker fa-lg">
+
−
</i>
+
−
Im Neuenheimer Feld 267
+
−
<br>
+
−
69120 Heidelberg
+
−
</li>
+
−
<li>
+
−
<i class="fa fa-phone">
+
−
</i>
+
−
1 -234 -456 -7890
+
−
</li>
+
−
 
+
−
<li>
+
−
<a href="mailto:info@yourdomain.com">
+
−
<i class="fa fa-envelope">
+
−
</i>
+
−
bioquant@uni-heidelberg.de
+
−
</a>
+
−
</li>
+
−
                </div>
+
−
            </div>
+
−
        </div>
+
−
    </section>
+
−
        <script src="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/bootstrap/js/bootstrap.min.js"></script>
+
−
        <script src="C:\\Users\\Wolle\\Pictures\\awrereigemgrafiken\\imakewebthings-waypoints-latest-0-g34d9f6d\\imakewebthings-waypoints-34d9f6d\\lib\\jquery.waypoints.min.js"></script>
+
−
        <script>
+
−
        jQuery(document).ready(function() {
+
−
var check1 = true;
+
−
    var check2 = true;
+
−
    new Waypoint({
+
−
  element: document.getElementById('first_chapter'),
+
−
  handler: function() {
+
−
      if(check1 == true) {
+
−
          $('#path32').css({fill: 'orangered', transition: 'fill 0.5s'});
+
−
          $('#accelerated_evolution').css({color: 'orangered', transition: 'color 0.5s'});
+
−
          check1 = false;
+
−
        }
+
−
      else {
+
−
        $('#path32').css({fill: 'white', transition: 'fill 0.5s'});
+
−
        $('#accelerated_evolution').css({color: 'white', transition: 'color 0.5s'});
+
−
          check1 = true;
+
−
      }
+
−
    }
+
−
  })
+
−
 
+
−
  new Waypoint({
+
−
  element: document.getElementById('second_chapter'),
+
−
  handler: function() {
+
−
      if(check2 == true) {
+
−
          $('#path7575').css({fill: 'gold', stroke:'gold', transition: 'fill 0.5s'});
+
−
          $('#artificial_intelligence').css({color: 'gold', transition: 'color 0.5s'});
+
−
          check2 = false;
+
−
          console.log(check2)
+
−
        }
+
−
      else {
+
−
        $('#path7575').css({fill: 'white', stroke:'white', transition: 'fill 0.5s'});
+
−
        $('#artificial_intelligence').css({color: 'white', transition: 'color 0.5s'});
+
−
          console.log('Hey');
+
−
          check2 = true;
+
−
      }
+
−
    }
+
−
  })
+
−
 
+
−
 
+
−
+
−
});
+
−
       
+
−
        </script>
+
−
</body>
+
−
</html>
+

Revision as of 18:52, 20 October 2017

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