Line 1: | Line 1: | ||
− | |||
<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>--> | ||
+ | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | ||
+ | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | #sideMenu, #top_title { | ||
+ | display:none; | ||
+ | } | ||
− | + | #content { | |
+ | width:100%; | ||
+ | margin:0px; | ||
+ | padding:0px; | ||
+ | background:none; | ||
+ | margin-top:-20px !important; | ||
+ | } | ||
+ | .main { | ||
+ | background-color:#FFFFFF; | ||
+ | margin:auto; | ||
+ | width:1200px; | ||
+ | } | ||
+ | /*gray background and centered website*/ | ||
+ | body { | ||
+ | background-color:#424242; | ||
+ | text-align:center; | ||
+ | } | ||
− | + | /*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; | ||
+ | } | ||
− | + | .spacer_bottom_10px { | |
+ | margin-bottom:10px; | ||
+ | } | ||
− | + | .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> | ||
+ | |||
+ | <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)'; | ||
+ | } | ||
+ | };*/ | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="container main"> | ||
+ | <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">Description</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ü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:56, 13 October 2016