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

Line 19: Line 19:
 
  margin:auto;
 
  margin:auto;
 
  width:80%;
 
  width:80%;
 +
}
 +
/*gray background and centered website*/
 +
body {
 +
background-color:#DDDDDD;
 +
text-align:center;
 +
}
 +
/*white text background*/
 +
.main {
 +
background-color:white;
 +
width:1200px;
 +
}
 +
/*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%;
 +
}
 +
.spacer_bottom_10px {
 +
margin-bottom:10px;
 +
}
 +
.red {
 +
background-color:red;
 +
}
 +
 +
/*changes border of thumbnail class --> rectangular, thin, gray*/
 +
.row .thumbnail {
 +
    border:solid;
 +
    box-shadow:0;
 +
    border-width:1px;
 +
border-radius:0;
 +
border-color:#DDDDDD;
 +
}
 +
.picture {
 +
background-color:green;
 +
heigth:100px;
 +
width:100px;
 
}
 
}
  
 
</style>
 
</style>
 
  <div class="container main">
 
  <div class="container main">
−
   Test<br>Test
+
   <div class="row">
 +
<div class="col-md-6 spacer_bottom_10px">
 +
<div class="picture">A</div>
 +
</div>
 +
<div class="col-md-6">
 +
<div class="row">
 +
<div class="col-md-6 spacer_bottom_10px"><div class="picture">A</div></div>
 +
<div class="col-md-6 spacer_bottom_10px"><div class="picture">A</div></div>
 +
</div>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<h3 class="textHeadline">Headline 1</h3>
 +
<p class="stdText">Content<br>Content<br>Content</p>
 +
</div>
 +
<div class="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-md-3">
 +
<div class="thumbnail">
 +
<div class="row">
 +
<div class="col-md-5">
 +
<div class="picture">A</div>
 +
</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-md-3">
 +
<div class="thumbnail">
 +
<div class="row">
 +
<div class="col-md-5">
 +
<div class="picture">A</div>
 +
</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 class="col-md-3">
 +
<div class="thumbnail">
 +
<div class="row">
 +
<div class="col-md-5">
 +
<div class="picture">A</div>
 +
</div>
 +
<div class="col-md-7">
 +
<h3 class="textHeadline">Headline 3</h3>
 +
<p class="stdText">Content<br>Content<br>Content</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-3">
 +
<div class="thumbnail">
 +
<div class="row">
 +
<div class="col-md-5">
 +
<div class="picture">A</div>
 +
</div>
 +
<div class="col-md-7">
 +
<h3 class="textHeadline">Headline 4</h3>
 +
<p class="stdText">Content<br>Content<br>Content</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 
  </div>
 
  </div>
 
</html>
 
</html>

Revision as of 14:10, 1 August 2016

A
A
A

Headline 1

Content
Content
Content

Headline 1

Content
Content
Content

A

Headline 1

Content
Content
Content

A

Headline 2

Content
Content
Content

A

Headline 3

Content
Content
Content

A

Headline 4

Content
Content
Content