Difference between revisions of "Team:Bielefeld-CeBiTec"

Line 1: Line 1:
−
{{Bielefeld-CeBiTec}}
 
 
<html>
 
<html>
 +
<!--<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
 +
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 +
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>-->
  
−
<head>
+
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
−
<style>
+
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
−
h2 p {color: #999933;}
+
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
−
h1 p {color: #999933;}
+
−
h3 p {color: #999933;}
+
  
−
</style>
+
 
−
</head>
+
<style type="text/css">
 +
#sideMenu, #top_title {
 +
display:none;
 +
}
  
−
<div class="column full_size" >
+
#content {
−
<img src="https://static.igem.org/mediawiki/2016/1/1f/Cebitec_20160629_BP_team_logo_2016.png">
+
width:100%;
−
</div>
+
margin:0px;
 +
padding:0px;
 +
background:none;
 +
        margin-top:-20px !important;
 +
}
  
−
<div class="column full_size" >
+
.main {
−
<h2> <p align="center">Welcome to iGEM Bielefeld-CeBiTec 2016! </h2>
+
background-color:#FFFFFF;
−
<p align="center">Our team is looking forward to start the iGEM season! </p>
+
margin:auto;
 +
width:1200px;
 +
}
 +
/*gray background and centered website*/
 +
body {
 +
background-color:#424242;
 +
text-align:center;
 +
}
  
−
</div>
+
/*standard text color and alignment*/
 +
.stdText {
 +
color: #666633;
 +
text-align:left;
 +
}
 +
/*text headline style*/
 +
.textHeadline {
 +
font-size: 16px;
 +
line-height: 18px;
 +
margin: 0 0 5px;
 +
color: #666633;
 +
text-align:left;
 +
}
  
 +
/*fit images to container*/
 +
.row img {
 +
width:100%;
 +
}
 +
.carousel-inner > .item > img {
 +
    margin: 0 auto;
 +
height:300px;
 +
}
  
−
<div class="column full_size" >
+
.spacer_bottom_10px {
−
<h5><p align="center"> Abstract: </h5></p>
+
margin-bottom:10px;
−
<FONT SIZE="+2"><h1><p align="center">Directed evolution of binding proteins</FONT></h1><br></p>
+
}
  
−
<p align="center">Carsten Hain, Niklas Hoffmann, Judith Kampa, Marius Schöller, Mikail Sahin, Pascal Schmidt, Marten Linder, Cassandra Königs, Bianca Frommer, Fabian Roeloffs and Sebastian Perez Knoche</p><br>
+
.headline {
 +
background-color:#666633;
 +
margin-left:0px;
 +
margin-right:0px;
 +
margin-top:0px;
 +
}
 +
 
 +
/*changes border of thumbnail class --> rectangular, thin, gray*/
 +
.row .thumbnail {
 +
    border:solid;
 +
    box-shadow:0;
 +
    border-width:1px;
 +
border-radius:0;
 +
border-color:#DDDDDD;
 +
}
 +
/*changes border of the navbar --> rectangular, thin, gray and changes background to olive*/
 +
.custom_navbar_style {
 +
border:solid;
 +
    box-shadow:0;
 +
    border-width:1px;
 +
border-radius:0;
 +
border-color:#DDDDDDD;
 +
 +
background-color:#666633;
 +
background-image:url('https://static.igem.org/mediawiki/2016/f/f5/Bielefeld_CeBiTec_2016_10_13_X_menubar_background.png');
 +
 +
height:120px;
 +
}
 +
.navbar {
 +
padding-left:0px;
 +
        z-index: 1000;
 +
}
 +
/*Centers content of the navbar*/
 +
 
 +
.navbar .navbar-nav {
 +
  display: inline-block;
 +
  float: none;
 +
  vertical-align: top;
 +
}
 +
 
 +
.navbar .navbar-collapse {
 +
  text-align: center;
 +
}
 +
.navbar .nav > p {
 +
margin-left:3px;
 +
margin-right:3px;
 +
color:#666633;
 +
}
 +
 
 +
.navbar_button {
 +
 
 +
margin-left:2px;
 +
color:#DDDDDD !important;
 +
 +
}
 +
.navbar_button:hover {
 +
background-color: #DDDDDD;
 +
color:#666633;
 +
}
 +
.navbar_button:hover > a{
 +
color:#666633;
 +
}
 +
 
 +
.navbar_button:hover .dropdown-content{
 +
display: block;
 +
}
 +
 
 +
.navbar-default .navbar-nav > li > a {
 +
    color: #dddddd;
 +
}
 +
/*.navbar-default .navbar-nav > li > a:hover {
 +
    color:#666633;
 +
}*/
 +
 
 +
 
 +
/* Dropdown Content (Hidden by Default) */
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #666633;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
}
 +
 
 +
/* Links inside the dropdown */
 +
.dropdown-content a {
 +
    color: #dddddd;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-menu>li>a {
 +
    display: block;
 +
    padding: 3px 20px;
 +
    clear: both;
 +
    font-weight: 400;
 +
    line-height: 1.42857143;
 +
    color: #dddddd;
 +
    white-space: nowrap;
 +
}
 +
 
 +
/* Change color of dropdown links on hover */
 +
.dropdown-content a:hover {background-color: #666633}
 +
 
 +
.NavbarBGImg {
 +
z-index:-1;
 +
}
 +
 
 +
/*changes border of the navbar --> rectangular, thin, gray and changes background to olive*/
 +
.custom_navbar_style {
 +
border:solid;
 +
    box-shadow:0;
 +
    border-width:1px;
 +
border-radius:0;
 +
border-color:#DDDDDDD;
 +
 +
background-color:#666633;
 +
/*opacity: 0.9;*/
 +
background-image:url('https://static.igem.org/mediawiki/2016/f/f5/Bielefeld_CeBiTec_2016_10_13_X_menubar_background.png
 +
');
 +
 +
height:120px;
 +
}
 +
 
 +
.navbar {
 +
padding-left:0px;
 +
        /*z-index: 1;*/
 +
}
 +
 
 +
.navbar_button:hover {
 +
background-color: #DDDDDD;
 +
color:#666633;
 +
}
 +
 
 +
/*.navbar_button:hover > a {
 +
    color: #666633;
 +
}*/
 +
 
 +
 
 +
 
 +
/*.navbar-default .navbar-nav > li > a:hover {
 +
    color:#666633;
 +
}*/
 +
 
 +
 
 +
 
 +
/* Change color of dropdown links on hover */
 +
.dropdown-content a:hover {background-color: #666633}
 +
 
 +
.NavbarBGImg {
 +
z-index:-1;
 +
}
 +
 
 +
.spacer_top{
 +
background-color:#666633;
 +
height:120px;
 +
width:100%;
 +
align:left;
 +
}
 +
 
 +
 
 +
</style>
  
−
<h5><p align="center">iGEM Bielefeld-CeBiTec, Bielefeld University, Germany </h5></p><br><hr>
+
<script>
 +
/*var myNav = document.getElementById('navbar');
 +
window.onscroll = function () {
 +
    "use strict";
 +
    if (document.body.scrollTop >= 120 ) {
 +
        myNav.style.opacity="0.9";
 +
myNav.style.filter  = 'alpha(opacity=90)';
 +
    }
 +
    else {
 +
        myNav.style.opacity="1";
 +
myNav.style.filter  = 'alpha(opacity=100)';
 +
    }
 +
};*/
  
−
<p align="justify">The impact of antibodies in modern medicine is on a permanent rise but the cost and time factor as well as the immunization of animals, which die during the harvesting process, are still problematic. Therefore we want to establish an alternative using antibody-like binding proteins that are generated <i>in vivo</i> in <i>E. coli</i>. Profiting of the short generation cycle and the exponential growth of bacteria, we want to generate binding proteins in a much shorter period of time while also being more cost efficient. Furthermore, no animals have to suffer in the process by immunization.
+
</script>
  
−
Our goal is to develop binding proteins in <i>E. coli</i> in a process of directed evolution that can subsequently be utilized in diagnostic techniques and target-mediated drug delivery against pathogens. Due to the ability of our system to quickly adapt to a certain target protein under evolutionary pressure it is especially useful in concern of quickly evolving and newly arising viral pathogens. The concept of our system subdivides into the following aspects: At first, we create a randomized library of binding protein sequences in bacteria to form the starting point of our project. As scaffolds for our binding proteins, we settled on both antibody mimetics (monobodies) and natural antibody fragments (nanobodies). In the next step, we use a two plasmid system in combination with a mutant of the polymerase I which leads to a higher mutation rate in the coding regions of our binding proteins, so that there is a chance for the binding proteins to adapt to the target proteins. Finally, we isolate the strains that produce the binding proteins with the highest affinity to the target protein by using an <i>in vivo</i> selection mechanisms: Mediated by the binding of our protein and the target, the cell in concern is granted a selective advantage directly increasing its evolutionary fitness. </p>
+
  
−
</div>
 
  
  
  
−
<div align="center" class="column full_size" >
+
<div class="container main">
−
<img src="https://static.igem.org/mediawiki/2016/b/b6/Cebitec_20160701_Ma_Poster.png" >
+
<div class="spacer_top">
 
</div>
 
</div>
 +
 +
<div id="header">
 +
 +
<nav id="navigationbar" class="navbar navbar-default custom_navbar_style navbar-fixed-top">
 +
<a href="https://2016.igem.org/Team:Bielefeld-CeBiTec"><img src="https://static.igem.org/mediawiki/2016/4/45/Bielefeld_CeBiTec_2016_10_13_X_homebutton.png" style="height:150px;position:fixed;left:0;"></a>
 +
<div class="container-fluid">
 +
<div id="navbar" class="navbar-collapse collapse">
 +
 +
<ul class="nav navbar-nav navbar-center">
 +
<li class="navbar_button dropdown">
 +
<a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Description"><img src="https://static.igem.org/mediawiki/2016/3/3f/Bielefeld_CeBiTec_2016_10_13_X_tetris.png" style="height:60px;"> <br> PROJECT <span class="caret"></span></a>
 +
                                        <!--<div class="dropdown-content">-->
 +
<ul class="dropdown-menu dropdown-content">
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Description">Overview</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Project/Library">Library</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Project/Mutation">Mutation</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Project/Selection">Selection</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Project/Modeling">Modeling</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Fermentation">Fermentation</a></li>
 +
 +
 +
</ul>
 +
 +
                    </li>
 +
<li class="navbar_button dropdown"><li class="navbar_button dropdown">
 +
<a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Results"><img src="https://static.igem.org/mediawiki/2016/d/d7/Bielefeld_CeBiTec_2016_10_13_X_achievement.png" style="height:60px;"> <br> RESULTS <span class="caret"></span></a>
 +
                                        <!--<div class="dropdown-content">-->
 +
<ul class="dropdown-menu dropdown-content">
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Results">Overview</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Results/Library">Library</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Results/Mutation">Mutation</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Results/Selection">Selection</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Results/Modeling">Modeling</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Parts">Parts</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Medal_Fulfillment">Medal fulfillment</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Proof">Improve a part</a></li>
 +
 +
 +
</ul>
 +
 +
                    </li>
 +
<li class="navbar_button dropdown">
 +
<a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Human_Practices"><img src="https://static.igem.org/mediawiki/2016/a/a9/Bielefeld_CeBiTec_2016_10_13_X_humanpractice.png" style="height:60px;"> <br> HUMAN PRACTICES <span class="caret"></span></a>
 +
                                        <!--<div class="dropdown-content">-->
 +
<ul class="dropdown-menu dropdown-content">
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Human_Practices">Overview</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/HP/School_Talks">School talks</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/HP/Dictionary">Dictionary</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/HP/Crowdfunding">Crowdfunding and Press</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Team/Collaborations/Postcards">Postcards</a></li>
 +
<li><a href="#">Public relations activities</a></li>
 +
 +
 +
</ul>
 +
 +
                    </li>
 +
<li class="navbar_button dropdown">
 +
<a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Collaborations"><img src="https://static.igem.org/mediawiki/2016/f/fa/Bielefeld_CeBiTec_2016_10_13_X_Team.png" style="height:60px;"> <br> COLLABORATIONS <span class="caret"></span></a>
 +
                                        <!--<div class="dropdown-content">-->
 +
<ul class="dropdown-menu dropdown-content">
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Collaborations">Overview</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Collaborations/Duesseldorf">D&uuml;sseldorf</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Collaborations/Freiburg">Freiburg</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Collaborations/Lethbridge">Lethbridge</a></li>
 +
 +
 +
</ul>
 +
 +
                    </li>
 +
 +
<li class="navbar_button dropdown">
 +
<a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Experiments"><img src="https://static.igem.org/mediawiki/2016/1/17/Bielefeld_CeBiTec_2016_10_13_X_notebook.png" style="height:60px;"> <br> NOTEBOOK <span class="caret"></span></a>
 +
                                        <!--<div class="dropdown-content">-->
 +
<ul class="dropdown-menu dropdown-content">
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Experiments">Overview</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Notebook">Lab Notebook</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Experiments/Primers">Primers</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Experiments/Protocols">Lab Protocols</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Experiments/Media">Media and Buffers</a></li>
 +
</ul>
 +
</li>
 +
<li class="navbar_button dropdown">
 +
<a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Team"><img src="https://static.igem.org/mediawiki/2016/3/33/Bielefeld_CeBiTec_2016_10_13_X_Team_white.png" style="height:60px;"> <br> TEAM <span class="caret"></span></a>
 +
                                        <!--<div class="dropdown-content">-->
 +
<ul class="dropdown-menu dropdown-content">
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Team">Official Team Profile</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Team/Members">Members</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Team/Bielefeld_University">University Bielefeld</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Team/Contact">Contact</a></li>
 +
</ul>
 +
 +
                    </li>
 +
<li class="navbar_button dropdown">
 +
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><img src="https://static.igem.org/mediawiki/2016/8/8f/Bielefeld_CeBiTec_2016_10_13_X_Acknowledgement_white.png" style="height:60px;"> <br> ACKNOWLEDGEMENT <span class="caret"></span></a>
 +
                                        <!--<div class="dropdown-content">-->
 +
<ul class="dropdown-menu dropdown-content">
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Acknowledgement">Overview</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Sponsors_And_Partners">Sponsors and Partner</a></li>
 +
<li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Attributions">Attributions</a></li>
 +
</ul>
 +
 +
                    </li>
 +
</ul>
 +
</div>
 +
</div>
 +
</nav>
 +
</div>
 +
<div class="row">
 +
<img class="picture" src="https://static.igem.org/mediawiki/2016/0/03/Bielefeld_CeBiTec_2016_10_13_X_Evobodies_animation.gif" />
 +
</div>
 +
<div id="myCarousel" class="carousel slide" data-ride="carousel">
 +
<!-- Indicators -->
 +
<ol class="carousel-indicators">
 +
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 +
<li data-target="#myCarousel" data-slide-to="1"></li>
 +
<li data-target="#myCarousel" data-slide-to="2"></li>
 +
</ol>
  
 +
<!-- Wrapper for slides -->
 +
<div class="carousel-inner" role="listbox">
 +
<div class="item active">
 +
<img src="http://www.mittelstand-die-macher.de/media/cache/article_content/cms/2016/04/Kaufverhalten-Farben.jpg" alt="A">
 +
</div>
 +
<div class="item">
 +
<img src="http://www.lonecke-zetel.de/uploads/pics/Farben_19.jpg" alt="B">
 +
</div>
 +
<div class="item">
 +
<img src="http://de.wallpaperhd.biz/wp-content/uploads/2013/01/hd-wallpaper-farben-800x600.jpg" alt="C">
 +
</div>
 +
</div>
  
 +
<!-- Left and right controls -->
 +
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
 +
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 +
<span class="sr-only">Previous</span>
 +
</a>
 +
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
 +
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 +
<span class="sr-only">Next</span>
 +
</a>
 +
</div>
  
 +
<div class="row">
 +
<div class="col-md-6 spacer_bottom_10px">
 +
<img class="picture" src="../Animation/Evobodies_Animation_800x600_Einmal.gif" />
 +
</div>
 +
<div class="col-md-6">
 +
<div class="row">
 +
<div class="col-xs-6 col-md-6 spacer_bottom_10px"><img class="picture" src="http://www.kunst-spektrum.de/assets/images/Dienst_ScaramoucheVI_2001_Acryl_auf_Leinwand_160x360cm.jpg" /></div>
 +
<div class="col-xs-6 col-md-6 spacer_bottom_10px"><img class="picture" src="http://www.kunst-spektrum.de/assets/images/Dienst_ScaramoucheVI_2001_Acryl_auf_Leinwand_160x360cm.jpg" /></div>
 +
</div>
 +
<div class="row">
 +
<div class="col-xs-6 col-md-6">
 +
<h3 class="textHeadline">Headline 1</h3>
 +
<p class="stdText">Content<br>Content<br>Content</p>
 +
</div>
 +
<div class="col-xs-6 col-md-6">
 +
<h3 class="textHeadline">Headline 1</h3>
 +
<p class="stdText">Content<br>Content<br>Content</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="col-xs-3 col-md-3">
 +
<div class="thumbnail">
 +
<div class="row">
 +
<div class="col-xs-5 col-md-5">
 +
<img class="picture" src="http://www.kunst-spektrum.de/assets/images/Dienst_ScaramoucheVI_2001_Acryl_auf_Leinwand_160x360cm.jpg" />
 +
</div>
 +
<div class="col-xs-7 col-md-7">
 +
<h3 class="textHeadline"><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Library">Library</a></h3>
 +
<p class="stdText">Content<br>Content<br>Content</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-xs-3 col-md-3">
 +
<div class="thumbnail">
 +
<div class="row">
 +
<div class="col-xs-5 col-md-5">
 +
<img class="picture" src="http://www.kunst-spektrum.de/assets/images/Dienst_ScaramoucheVI_2001_Acryl_auf_Leinwand_160x360cm.jpg" />
 +
</div>
 +
<div class="col-xs-7 col-md-7">
 +
<h3 class="textHeadline"> <a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Mutation">Mutation</a> </h3>
 +
<p class="stdText">Content<br>Content<br>Content</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-xs-3 col-md-3">
 +
<div class="thumbnail">
 +
<div class="row">
 +
<div class="col-xs-5 col-md-5">
 +
<img class="picture" src="http://www.kunst-spektrum.de/assets/images/Dienst_ScaramoucheVI_2001_Acryl_auf_Leinwand_160x360cm.jpg" />
 +
</div>
 +
<div class="col-xs-7 col-md-7">
 +
<h3 class="textHeadline"><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Selection">Selection</a></h3>
 +
<p class="stdText">Content<br>Content<br>Content</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-xs-3 col-md-3">
 +
<div class="thumbnail">
 +
<div class="row">
 +
<div class="col-xs-5 col-md-5">
 +
<img class="picture" src="http://www.kunst-spektrum.de/assets/images/Dienst_ScaramoucheVI_2001_Acryl_auf_Leinwand_160x360cm.jpg" />
 +
</div>
 +
<div class="col-xs-7 col-md-7">
 +
<h3 class="textHeadline">Headline</h3>
 +
<p class="stdText">Content<br>Content<br>Content</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<script>
 +
var myNav = document.getElementById('navigationbar');
 +
    $(document).ready(function(){
 +
      $(window).scroll(function() { // check if scroll event happened
 +
        if ($(document).scrollTop() > 120) { // check if user scrolled more than 50 from top of the browser window
 +
         
 +
myNav.style.opacity="0.9"; // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
 +
console.log("über 120");
 +
        } else {
 +
         
 +
myNav.style.opacity="1"; // if not, change it back to transparent
 +
console.log("unter 120");
 +
        }
 +
      });
 +
    });
 +
</script>
  
 
</html>
 
</html>

Revision as of 22:42, 13 October 2016

Headline 1

Content
Content
Content

Headline 1

Content
Content
Content

Library

Content
Content
Content

Mutation

Content
Content
Content

Selection

Content
Content
Content

Headline

Content
Content
Content