Difference between revisions of "Team:Bielefeld-CeBiTec/Description"

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>-->
  
 +
  <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;
 +
}
  
<p>Tell us about your project, describe what moves you and why this is something important for your team.</p>
+
#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;
 +
}
  
<h5>What should this page contain?</h5>
+
/*standard text color and alignment*/
<ul>
+
.stdText {
<li> A clear and concise description of your project.</li>
+
color: #666633;
<li>A detailed explanation of why your team chose to work on this particular project.</li>
+
text-align:left;
<li>References and sources to document your research.</li>
+
}
<li>Use illustrations and other visual resources to explain your project.</li>
+
/*text headline style*/
</ul>
+
.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>
+
.spacer_bottom_10px {
 +
margin-bottom:10px;
 +
}
  
<div class="column full_size" >
+
.headline {
 +
background-color:#666633;
 +
margin-left:0px;
 +
margin-right:0px;
 +
margin-top:0px;
 +
}
  
<h5>Advice on writing your Project Description</h5>
+
/*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*/
  
<p>
+
.navbar .navbar-nav {
We encourage you to put up a lot of information and content on your wiki, but we also encourage you to include summaries as much as possible. If you think of the sections in your project description as the sections in a publication, you should try to be consist, accurate and unambiguous in your achievements.  
+
  display: inline-block;
</p>
+
  float: none;
 +
  vertical-align: top;
 +
}
  
<p>
+
.navbar .navbar-collapse {
Judges like to read your wiki and know exactly what you have achieved. This is how you should think about these sections; from the point of view of the judge evaluating you at the end of the year.
+
  text-align: center;
</p>
+
}
 +
.navbar .nav > p {
 +
margin-left:3px;
 +
margin-right:3px;
 +
color:#666633;
 +
}
  
</div>
+
.navbar_button {
  
 +
margin-left:2px;
 +
color:#DDDDDD !important;
 +
 +
}
 +
.navbar_button:hover {
 +
background-color: #DDDDDD;
 +
color:#666633;
 +
}
 +
.navbar_button:hover > a{
 +
color:#666633;
 +
}
  
<div class="column half_size" >
+
.navbar_button:hover .dropdown-content{
 +
display: block;
 +
}
  
<h5>References</h5>
+
.navbar-default .navbar-nav > li > a {
<p>iGEM teams are encouraged to record references you use during the course of your research. They should be posted somewhere on your wiki so that judges and other visitors can see how you thought about your project and what works inspired you.</p>
+
    color: #dddddd;
 +
}
 +
/*.navbar-default .navbar-nav > li > a:hover {
 +
    color:#666633;
 +
}*/
  
</div>
 
  
 +
/* 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);
 +
}
  
<div class="column half_size" >
+
/* Links inside the dropdown */
<h5>Inspiration</h5>
+
.dropdown-content a {
<p>See how other teams have described and presented their projects: </p>
+
    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;
 +
}
  
<ul>
+
/* Change color of dropdown links on hover */
<li><a href="https://2014.igem.org/Team:Imperial/Project"> Imperial</a></li>
+
.dropdown-content a:hover {background-color: #666633}
<li><a href="https://2014.igem.org/Team:UC_Davis/Project_Overview"> UC Davis</a></li>
+
 
<li><a href="https://2014.igem.org/Team:SYSU-Software/Overview">SYSU Software</a></li>
+
.NavbarBGImg {
</ul>
+
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&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:56, 13 October 2016