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

 
(41 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
 +
 
<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:80%;
+
width:1200px;
 +
}
 +
/*gray background and centered website*/
 +
body {
 +
background-color:#DDDDDD;
 +
text-align:center;
 
}
 
}
 +
 +
/*standard text color and alignment*/
 +
.stdText {
 +
color: #7e828c;
 +
text-align:left;
 +
}
 +
/*text headline style*/
 +
.textHeadline {
 +
font-size: 16px;
 +
line-height: 18px;
 +
margin: 0 0 5px;
 +
color: #009cff;
 +
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:black;
 +
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 black*/
 +
.custom_navbar_style {
 +
border:solid;
 +
    box-shadow:0;
 +
    border-width:1px;
 +
border-radius:0;
 +
border-color:#DDDDDD;
 +
 +
background-color:black;
 +
}
 +
.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:#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">
−
  Test<br>Test
+
<div class="row headline">
 +
<div class="col-md-6 spacer_bottom_10px">
 +
iGEM Logo
 +
</div>
 +
<div class="col-md-6 spacer_bottom_10px">
 +
Irgentwas
 +
</div>
 +
</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>
 +
 
 +
<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 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>
 
  </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