Difference between revisions of "Team:Bielefeld-CeBiTec/2016 BielefeldCeBiTec HomeTest"
| Line 4: | Line 4: | ||
<style type="text/css"> | <style type="text/css"> | ||
#sideMenu, #top_title { | #sideMenu, #top_title { | ||
| − | + | display:none; | |
} | } | ||
body { | body { | ||
| − | + | background-color:#DDDDDD; | |
} | } | ||
#content { | #content { | ||
| − | + | width:100%; | |
| − | + | margin:0px; | |
| − | + | padding:0px; | |
| − | + | background:none; | |
} | } | ||
.main { | .main { | ||
| − | + | background-color:white; | |
| − | + | margin:auto; | |
| − | + | width:1200px; | |
} | } | ||
/*gray background and centered website*/ | /*gray background and centered website*/ | ||
| Line 25: | Line 25: | ||
text-align:center; | text-align:center; | ||
} | } | ||
| − | |||
/*standard text color and alignment*/ | /*standard text color and alignment*/ | ||
| Line 45: | Line 44: | ||
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; | ||
| + | } | ||
/*changes border of thumbnail class --> rectangular, thin, gray*/ | /*changes border of thumbnail class --> rectangular, thin, gray*/ | ||
| Line 57: | Line 66: | ||
border-radius:0; | border-radius:0; | ||
border-color:#DDDDDD; | border-color:#DDDDDD; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
/*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 76: | Line 80: | ||
padding-left:0px; | padding-left:0px; | ||
} | } | ||
| − | |||
/*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; | ||
| − | |||
} | } | ||
| + | |||
.navbar .navbar-collapse { | .navbar .navbar-collapse { | ||
text-align: center; | text-align: center; | ||
| − | |||
| − | |||
| − | |||
} | } | ||
.navbar .nav > p { | .navbar .nav > p { | ||
margin-left:3px; | margin-left:3px; | ||
margin-right:3px; | margin-right:3px; | ||
| − | |||
color:#64676F; | color:#64676F; | ||
} | } | ||
| − | |||
</style> | </style> | ||
| − | + | <div class="container main"> | |
| − | <div | + | <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> | </div> | ||
| − | <nav class="navbar navbar-default custom_navbar_style"> | + | <!-- 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="active"><a href="#">HOME</a></li> | |
| − | + | <p class="navbar-text">|</p> | |
| − | + | <li><a href="#">TEAM</a></li> | |
| − | + | <p class="navbar-text">|</p> | |
| − | + | <li><a href="#">PROJECT</a></li> | |
| − | + | <p class="navbar-text">|</p> | |
| + | <li><a href="#">PARTS</a></li> | ||
| + | <p class="navbar-text">|</p> | ||
| + | <li><a href="#">SAFETY</a></li> | ||
| + | <p class="navbar-text">|</p> | ||
| + | <li><a href="#">ATTRIBUTIONS</a></li> | ||
| + | <p class="navbar-text">|</p> | ||
| + | <li><a href="#">HUMAN PRACTICES</a></li> | ||
| + | <p class="navbar-text">|</p> | ||
| + | <li><a href="#">AWARDS</a></li> | ||
| + | </ul> | ||
</div> | </div> | ||
| − | </nav> | + | </div> |
| − | + | </nav> | |
| − | <div class="col-md-6 spacer_bottom_10px"> | + | <div class="row"> |
| − | <img class="picture" src="http://www.kunst-spektrum.de/assets/images/Dienst_ScaramoucheVI_2001_Acryl_auf_Leinwand_160x360cm.jpg" /> | + | <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> | ||
| − | <div class=" | + | <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-xs- | + | <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> | ||
| − | <div class="col-xs- | + | <div class="col-xs-7 col-md-7"> |
| − | <h3 class="textHeadline">Headline | + | <h3 class="textHeadline">Headline</h3> |
<p class="stdText">Content<br>Content<br>Content</p> | <p class="stdText">Content<br>Content<br>Content</p> | ||
</div> | </div> | ||
| Line 176: | Line 198: | ||
</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>> | |
| − | + | <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> | ||
| − | + | <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> | |
| − | + | <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> | </div> | ||
| + | </div> | ||
</div> | </div> | ||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.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> | |
| − | + | <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> | |
</html> | </html> | ||
Revision as of 16:37, 1 August 2016
