Difference between revisions of "Team:Bielefeld-CeBiTec/2016 BielefeldCeBiTec HomeTest"

 
(36 intermediate revisions by 2 users not shown)
Line 4: Line 4:
 
<style type="text/css">
 
<style type="text/css">
 
#sideMenu, #top_title {
 
#sideMenu, #top_title {
−
display:none;
+
display:none;
 
}
 
}
 
body {
 
body {
−
background-color:#DDDDDD;
+
background-color:#DDDDDD;
 
}
 
}
 
#content {
 
#content {
−
width:100%;
+
width:100%;
−
margin:0px;
+
margin:0px;
−
padding:0px;
+
padding:0px;
−
background:none;
+
background:none;
 +
        margin-top:-20px !important;
 
}
 
}
 
.main {
 
.main {
−
background-color:white;
+
background-color:white;
−
margin:auto;
+
margin:auto;
−
width:1200px;
+
width:1200px;
 
}
 
}
 
/*gray background and centered website*/
 
/*gray background and centered website*/
Line 25: Line 26:
 
text-align:center;
 
text-align:center;
 
}
 
}
−
/*white text background*/
 
  
 
/*standard text color and alignment*/
 
/*standard text color and alignment*/
Line 45: Line 45:
 
width:100%;  
 
width:100%;  
 
}
 
}
 +
.carousel-inner > .item > img {
 +
    margin: 0 auto;
 +
height:300px;
 +
}
 +
 
.spacer_bottom_10px {
 
.spacer_bottom_10px {
 
margin-bottom:10px;
 
margin-bottom:10px;
 
}
 
}
  
 +
.headline {
 +
background-color:black;
 +
margin-left:0px;
 +
margin-right:0px;
 +
margin-top:0px;
 +
}
  
 
/*changes border of thumbnail class --> rectangular, thin, gray*/
 
/*changes border of thumbnail class --> rectangular, thin, gray*/
Line 57: Line 68:
 
border-radius:0;
 
border-radius:0;
 
border-color:#DDDDDD;
 
border-color:#DDDDDD;
−
}
 
−
.picture {
 
−
background-color:green;
 
−
height:100%;
 
−
 
 
}
 
}
 
/*changes border of the navbar --> rectangular, thin, gray and changes background to black*/
 
/*changes border of the navbar --> rectangular, thin, gray and changes background to black*/
Line 75: Line 81:
 
.navbar {
 
.navbar {
 
padding-left:0px;
 
padding-left:0px;
 +
        z-index: 1000;
 
}
 
}
−
 
 
/*Centers content of the navbar*/
 
/*Centers content of the navbar*/
 +
 
.navbar .navbar-nav {
 
.navbar .navbar-nav {
 
   display: inline-block;
 
   display: inline-block;
 
   float: none;
 
   float: none;
 
   vertical-align: top;
 
   vertical-align: top;
−
  width:100%;
 
 
}
 
}
 +
 
.navbar .navbar-collapse {
 
.navbar .navbar-collapse {
 
   text-align: center;
 
   text-align: center;
−
}
 
−
.navbar .nav > li > a {
 
−
    color:#64676F;
 
 
}
 
}
 
.navbar .nav > p {
 
.navbar .nav > p {
 
margin-left:3px;
 
margin-left:3px;
 
margin-right:3px;
 
margin-right:3px;
−
 
 
color:#64676F;
 
color:#64676F;
 
}
 
}
  
 +
.navbar_button {
 +
background-color:#333333;
 +
margin-left:2px;
 +
color:white !important;
 +
 +
border-bottom-style:solid;
 +
border-bottom-width:5px;
 +
border-bottom-color:green;
 +
}
 +
.navbar_button:hover {
 +
background-color:green;
 +
}
 +
 +
.navbar_button:hover .dropdown-content{
 +
display: block;
 +
}
 +
 +
.navbar-default .navbar-nav > li > a {
 +
    color:white;
 +
}
 +
.navbar-default .navbar-nav > li > a:hover {
 +
    color:white;
 +
}
 +
/* Dropdown Content (Hidden by Default) */
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
}
 +
 +
/* Links inside the dropdown */
 +
.dropdown-content a {
 +
    color: black;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
 +
/* Change color of dropdown links on hover */
 +
.dropdown-content a:hover {background-color: #4F4949}
  
 
</style>
 
</style>
−
<div class="container main">
+
<div class="container main">
−
<div class='col-md-12'>
+
<div class="row headline">
−
<nav class="navbar navbar-default custom_navbar_style">
+
<div class="col-md-6 spacer_bottom_10px">
−
<div class="container-fluid">
+
iGEM Logo
−
<div id="navbar" class="navbar-collapse collapse">
+
</div>
−
<ul class="nav navbar-nav navbar-center">
+
<div class="col-md-6 spacer_bottom_10px">
−
<li class="active"><a href="#">HOME</a></li>
+
Irgentwas
−
<p class="navbar-text">|</p>
+
</div>
−
<li><a href="#">TEAM</a></li>
+
</div>
−
<p class="navbar-text">|</p>
+
 
−
<li><a href="#">PROJECT</a></li>
+
<div id="myCarousel" class="carousel slide" data-ride="carousel">
−
<p class="navbar-text">|</p>
+
<!-- Indicators -->
−
<li><a href="#">PARTS</a></li>
+
<ol class="carousel-indicators">
−
<p class="navbar-text">|</p>
+
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
−
<li><a href="#">SAFETY</a></li>
+
<li data-target="#myCarousel" data-slide-to="1"></li>
−
<p class="navbar-text">|</p>
+
<li data-target="#myCarousel" data-slide-to="2"></li>
−
<li><a href="#">ATTRIBUTIONS</a></li>
+
</ol>
−
<p class="navbar-text">|</p>
+
 
−
<li><a href="#">HUMAN PRACTICES</a></li>
+
<!-- Wrapper for slides -->
−
<p class="navbar-text">|</p>
+
<div class="carousel-inner" role="listbox">
−
<li><a href="#">AWARDS</a></li>
+
<div class="item active">
−
</ul>
+
<img src="http://www.mittelstand-die-macher.de/media/cache/article_content/cms/2016/04/Kaufverhalten-Farben.jpg" alt="A">
−
</div>
+
 
</div>
 
</div>
−
</nav>
+
<div class="item">
−
</div>
+
<img src="http://www.lonecke-zetel.de/uploads/pics/Farben_19.jpg" alt="B">
−
  <div class="row">
+
−
<div class="col-md-6 spacer_bottom_10px">
+
−
<img class="picture" src="https://static.igem.org/mediawiki/2016/8/8b/HQ_page_logo.jpg" />
+
 
</div>
 
</div>
−
<div class="col-md-6">
+
<div class="item">
−
<div class="row">
+
<img src="http://de.wallpaperhd.biz/wp-content/uploads/2013/01/hd-wallpaper-farben-800x600.jpg" alt="C">
−
<div class="col-md-6 spacer_bottom_10px"><img class="picture" src="https://static.igem.org/mediawiki/2016/8/8b/HQ_page_logo.jpg" /></div>
+
</div>
−
<div class="col-md-6 spacer_bottom_10px"><img class="picture" src="https://static.igem.org/mediawiki/2016/8/8b/HQ_page_logo.jpg" /></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>
 +
 
 +
<nav class="navbar navbar-default custom_navbar_style">
 +
<div class="container-fluid">
 +
<div id="navbar" class="navbar-collapse collapse">
 +
<ul class="nav navbar-nav navbar-center">
 +
<li class="navbar_button active"><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/2016_BielefeldCeBiTec_HomeTest">HOME</a></li>
 +
<li class="navbar_button"><a href="#">TEAM</a>
 +
                                        <div class="dropdown-content">
 +
<a href="#">Official Team Profile</a>
 +
                                                <a href="#"> Members</a>
 +
                                                <a href="#"> Subteams</a>
 +
                                                <a href="#"> University Bielefeld</a>
 +
                                                <a href="#"> Collaborations</a>
 +
                                                <ul class="dropdown-extra">
 +
                                                    <li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Team/Collaborations/Postcards"> Postcards </a></li>
 +
                               
 +
                                                </ul>
 +
<a href="#">Acknowledgement</a>
 +
<a href="#">Sponsors</a>
 +
<a href="#">Contact</a>
 +
</div>
 +
                                        </li>
 +
<li class="navbar_button"><a href="#">PROJECT</a>
 +
<div class="dropdown-content">
 +
<a href="#">Overview</a>
 +
                                                <a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Notebook"> Notebook</a>
 +
                                                <ul class="dropdown-extra">
 +
                                                    <li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Notebook/Library"> Library </a></li>
 +
                                                    <li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Notebook/Mutation"> Mutation </a></li>
 +
                                                    <li><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Notebook/Selection"> Selection </a></li>
 +
                                                </ul>
 +
<a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Library">Library</a>
 +
<a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Mutation">Mutation</a>
 +
<a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Selection">Selection</a>
 +
</div>
 +
</li>
 +
<li class="navbar_button"><a href="#">PARTS</a></li>
 +
<li class="navbar_button"><a href="#">SAFETY</a></li>
 +
<li class="navbar_button"><a href="#">ATTRIBUTIONS</a></li>
 +
<li class="navbar_button"><a href="#">HUMAN PRACTICES</a></li>
 +
<li class="navbar_button"><a href="#">AWARDS</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</nav>
 +
<div class="row">
 +
<div class="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-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>
 +
<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="row">
−
<div class="col-md-6">
+
<div class="col-xs-5 col-md-5">  
−
<h3 class="textHeadline">Headline 1</h3>
+
<img class="picture" src="http://www.kunst-spektrum.de/assets/images/Dienst_ScaramoucheVI_2001_Acryl_auf_Leinwand_160x360cm.jpg" />
−
<p class="stdText">Content<br>Content<br>Content</p>
+
 
</div>
 
</div>
−
<div class="col-md-6">
+
<div class="col-xs-7 col-md-7">
−
<h3 class="textHeadline">Headline 1</h3>
+
<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>
 
<p class="stdText">Content<br>Content<br>Content</p>
 
</div>
 
</div>
Line 146: Line 265:
 
</div>
 
</div>
 
</div>
 
</div>
−
<div class="row">
+
<div class="col-xs-3 col-md-3">
−
<div class="col-md-3">
+
<div class="thumbnail">  
−
<div class="thumbnail">  
+
<div class="row">
−
<div class="row">
+
<div class="col-xs-5 col-md-5">  
−
<div class="col-md-5">  
+
<img class="picture" src="http://www.kunst-spektrum.de/assets/images/Dienst_ScaramoucheVI_2001_Acryl_auf_Leinwand_160x360cm.jpg" />
−
<img class="picture" src="https://static.igem.org/mediawiki/2016/8/8b/HQ_page_logo.jpg" />
+
−
</div>
+
−
<div class="col-md-7">
+
−
<h3 class="textHeadline">Headline 1</h3>
+
−
<p class="stdText">Content<br>Content<br>Content</p>
+
−
</div>
+
 
</div>
 
</div>
−
</div>
+
<div class="col-xs-7 col-md-7">
−
</div>
+
<h3 class="textHeadline"> <a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Mutation">Mutation</a> </h3>
−
<div class="col-md-3">
+
<p class="stdText">Content<br>Content<br>Content</p>
−
<div class="thumbnail">
+
−
<div class="row">
+
−
<div class="col-md-5">  
+
−
<img class="picture" src="https://static.igem.org/mediawiki/2016/8/8b/HQ_page_logo.jpg" />
+
−
</div>
+
−
<div class="col-md-7">
+
−
<h3 class="textHeadline">Headline 2</h3>
+
−
<p class="stdText">Content<br>Content<br>Content</p>
+
−
</div>
+
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
<div class="col-md-3">
+
</div>
−
<div class="thumbnail">  
+
<div class="col-xs-3 col-md-3">
−
<div class="row">
+
<div class="thumbnail">  
−
<div class="col-md-5">  
+
<div class="row">
−
<img class="picture" src="https://static.igem.org/mediawiki/2016/8/8b/HQ_page_logo.jpg" />
+
<div class="col-xs-5 col-md-5">  
−
</div>
+
<img class="picture" src="http://www.kunst-spektrum.de/assets/images/Dienst_ScaramoucheVI_2001_Acryl_auf_Leinwand_160x360cm.jpg" />
−
<div class="col-md-7">
+
</div>
−
<h3 class="textHeadline">Headline 3</h3>
+
<div class="col-xs-7 col-md-7">
−
<p class="stdText">Content<br>Content<br>Content</p>
+
<h3 class="textHeadline"><a href="https://2016.igem.org/Team:Bielefeld-CeBiTec/Selection">Selection</a></h3>
−
</div>
+
<p class="stdText">Content<br>Content<br>Content</p>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
<div class="col-md-3">
+
</div>
−
<div class="thumbnail">  
+
<div class="col-xs-3 col-md-3">
−
<div class="row">
+
<div class="thumbnail">  
−
<div class="col-md-5">  
+
<div class="row">
−
<img class="picture" src="https://static.igem.org/mediawiki/2016/8/8b/HQ_page_logo.jpg" />
+
<div class="col-xs-5 col-md-5">  
−
</div>
+
<img class="picture" src="http://www.kunst-spektrum.de/assets/images/Dienst_ScaramoucheVI_2001_Acryl_auf_Leinwand_160x360cm.jpg" />
−
<div class="col-md-7">
+
</div>
−
<h3 class="textHeadline">Headline 4</h3>
+
<div class="col-xs-7 col-md-7">
−
<p class="stdText">Content<br>Content<br>Content</p>
+
<h3 class="textHeadline">Headline</h3>
−
</div>
+
<p class="stdText">Content<br>Content<br>Content</p>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 +
</div>
 
  </div>
 
  </div>
 +
<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>
 +
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
 
</html>
 
</html>

Latest revision as of 12:56, 4 August 2016

iGEM Logo
Irgentwas

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