Difference between revisions of "Team:Duesseldorf/Team"

Line 1: Line 1:
 
{{Duesseldorf}}
 
{{Duesseldorf}}
 
<html>
 
<html>
−
<head>
+
<head>
−
<meta charset="utf-8">
+
<meta charset="utf-8">
−
<title>Team</title>
+
<title>TEAM</title>
−
<style type="text/css">
+
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
−
<!--
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
−
body {
+
<!--
−
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
+
Created using JS Bin
−
background-color: ##FFFFFF;
+
http://jsbin.com
−
margin: 0;
+
−
padding: 0;
+
Copyright (c) 2016 by anonymous (http://jsbin.com/utupuw/5/edit)
−
background-image: url(https://static.igem.org/mediawiki/2016/9/9b/Igem-hhu-2016-template-background-image.png);
+
−
}
+
Released under the MIT license: http://jsbin.mit-license.org
 +
-->
 +
<style type="text/css">
 +
body {
 +
background-color: #2D2D2D;
 +
width: 100%;
 +
margin: 0px;
 +
}
 +
h1, h2, h3, h4, h5, h6, h7, p {
 +
color: #0C9476;
 +
font-family: 'Roboto', sans-serif;
 +
padding-left: 3px;
 +
}
 +
.header {
 +
background-color: #FFFFFF;
 +
width: 100%;
 +
height: 60px;
 +
}
 +
.headerContent {
 +
width: 80%;
 +
margin: auto;
 +
}
 +
.header ul {
 +
display:inline;
 +
}
 +
.header ul li {
 +
display:inline;
 +
}
 +
.header ul li img {
 +
height: 40px;
 +
margin: 10px 5px 10px 5px;
 +
float:right;
 +
}
 +
.header-logo {
 +
height: 40px;
 +
margin: 10px 5px 10px 5px;
 +
float:left;
 +
}
  
−
/* background texture from Pixeden.com. Thank you very much! */
+
.footer {
−
 
+
background-color: #FFFFFF;
−
/* ~~ Element-/Tag-Selektoren ~~ */
+
width: 100%;
−
ul, ol, dl {
+
height: 200px;
−
padding: 0;
+
padding-top: 5px;
−
margin: 0;
+
}
−
}
+
.wrap {
−
h1, h2, h3, h4, h5, h6, p {
+
overflow: hidden;
−
margin-top: 0;
+
margin-top: 10px;
−
padding-right: 15px;
+
margin-left: auto;
−
padding-left: 15px;
+
margin-right: auto;
−
}
+
margin-bottom: 20px;
−
a img {  
+
width: 80%;
−
border: none;
+
}
−
}
+
.box {
−
 
+
float: left;
−
/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
+
position: relative;
−
a:link {
+
width: 20%;
−
color:#414958;
+
padding-bottom: 20%;
−
text-decoration: underline; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
+
}
−
}
+
.boxInner {
−
a:visited {
+
position: absolute;
−
color: #4E5869;
+
left: 10px;
−
text-decoration: underline;
+
right: 10px;
−
}
+
top: 10px;
−
a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
+
bottom: 10px;
−
text-decoration: none;
+
overflow: hidden;
−
}
+
}
−
 
+
.boxInner p {
−
/* ~~ Dieser Container umschließt alle anderen div-Tags und weist ihnen ihre als Prozentwert definierte Breite zu. ~~ */
+
position: absolute;
−
.container {
+
display:table;
−
width: 100%;
+
bottom: 0;
−
max-width: 1920px;
+
left: 0;
−
min-width: 720px;
+
right: 0;
−
margin: 0 auto;
+
margin-bottom: 0px;
−
}
+
color: #FFF;
−
 
+
text-align: left;
−
 
+
background: rgba(0, 0, 0, 0.2);
−
.header {
+
}
−
height: 50px;
+
.boxInner img {
−
background: rgba(0,0,0,0.2);
+
width: 100%;
−
}
+
}
−
 
+
.boxInner .titleBox {
−
/* ~~ Dies sind die Layoutinformationen. ~~
+
position: absolute;
−
s
+
display:table;
−
1) Eine Auffüllung wird nur oben und/oder unten im div-Tag positioniert. Die Elemente innerhalb dieses div-Tags verfügen über eine seitliche Auffüllung. Dadurch müssen Sie keine Box-Modell-Berechnungen durchführen. Zu beachten: Wenn Sie dem div-Tag eine seitliche Auffüllung oder einen Rahmen hinzufügen, werden diese zu der festgelegten Breite addiert und ergeben die *gesamte* Breite. Sie können auch die Auffüllung für das Element im div-Tag entfernen und ein zweites div-Tag ohne Breite und mit der gewünschten Auffüllung im ersten div-Tag einfügen.
+
bottom: 0;
−
 
+
left: 0;
−
*/
+
right: 0;
−
.content {
+
margin-bottom: -50px;
−
}
+
background: #000;
−
 
+
background: rgba(0, 0, 0, 0.5);
−
/* ~~ Dieser gruppierte Selektor gibt die Listen im .content-Bereich an. ~~ */
+
color: #FFF;
−
.content ul, .content ol {  
+
padding: 10px;
−
padding: 0 15px 15px 40px; /* Diese Auffüllung setzt die rechte Auffüllung in der obigen Regel für Überschriften und Absätze fort. Die Auffüllung wurde unten für den Abstand zwischen anderen Elementen in den Listen und links für den Einzug platziert. Sie können die Werte nach Bedarf ändern. */
+
text-align: center;
−
}
+
-webkit-transition: opacity 500ms;
−
 
+
-moz-transition: opacity 500ms;
−
  .container_light{background: rgba(0,0,0,0.1); height: auto; padding-bottom:5px;}  
+
-o-transition: opacity 500ms;
−
  .container_dark{background: rgba(0,0,0,0.2); height: auto; padding-bottom:5px;}
+
transition: opacity 500ms;
−
 
+
}
−
/* ~~ Fußzeile ~~ */
+
.boxLarge {
−
.footer {
+
float: left;
−
background: rgba(0,0,0,0.2);
+
position: relative;
−
padding-bottom:10px;
+
width: 40%;
−
}
+
padding-bottom: 20%;
−
 
+
}
−
/* ~~ Verschiedene float/clear-Klassen ~~ */
+
.boxLargeInner {
−
.fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
+
background-color: #FFFFFF;
−
float: right;
+
position: absolute;
−
margin-left: 8px;
+
left: 10px;
−
}
+
right: 10px;
−
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
+
top: 10px;
−
float: left;
+
bottom: 10px;
−
margin-right: 8px;
+
overflow: hidden;
−
}
+
}
−
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
+
.boxLargeInner h1, h2, h3, h4, h5, h6, h7 {
−
clear:both;
+
padding-left:10px;
−
height:0;
+
}
−
font-size: 1px;
+
.boxLargeInner p{
−
line-height: 0px;
+
padding-left:35px;
−
}
+
padding-right:35px;
−
 
+
text-align:justify;
−
.textcontainer{
+
}
−
width:60%;
+
−
display:inline-block;
+
−
}
+
−
 
+
−
.bildtext {
+
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
−
padding: 15px;
+
margin-bottom: 0;
−
text-align: center;
+
}
−
}
+
@media only screen and (max-width : 480px) {
−
 
+
/* Smartphone view: 1 tile */
−
li.fotos {display: inline; margin: 2px 1px;}
+
.box {
−
 
+
width: 100%;
−
 
+
padding-bottom: 100%;
−
-->
+
}
−
</style></head>
+
.boxLarge {
−
 
+
display:none;
−
<body>
+
}
−
 
+
.header {
−
<div class="container">
+
text-align:center;
−
<!-- HEADER -->
+
}
−
  <div class="header">
+
.headerContent {
−
  <ul style="list-style-type: none; text-align: center; line-height: 50px;">  
+
width: 100%;
−
  <li style="color: #000000;display:inline; margin: 5px; font-weight:bold; "> <a href="https://2016.igem.org/Team:Duesseldorf"> HOME </a></li>
+
}
−
    <li style="color: #000000;display:inline; margin: 5px; font-weight:bold;"> <a href="https://2016.igem.org/Team:Duesseldorf/Description"> PROJECT </a></li>
+
.header-logo {
−
    <li style="color: #000000; display: inline; margin: 5px; font-weight: bold;"><a href="https://2016.igem.org/Team:Duesseldorf/Team"> TEAM </a></li>
+
display:none
−
    <li style="color: #000000;display:inline; margin: 5px; font-weight:bold;"><a href="https://2016.igem.org/Team:Duesseldorf/Parts"> PARTS </a></li>
+
}
−
    <li style="color: #000000;display:inline; margin: 5px; font-weight:bold;"><a href="https://2016.igem.org/Team:Duesseldorf/Safety"> SAFETY </a></li>
+
.header ul li img {
−
    <li style="color: #000000;display:inline; margin: 5px; font-weight:bold;"><a href="https://2016.igem.org/Team:Duesseldorf/Human_Practices"> HUMAN PRACTICES </a></li>
+
float:none;
−
    <li style="color: #000000;display:inline; margin: 5px; font-weight:bold;"><a href="https://2016.igem.org/Team:Duesseldorf/Awards"> AWARDS </a> </li>
+
margin-left: auto;
−
    </ul>
+
margin-right: auto;
−
<!-- end .header -->  
+
}
−
  </div>
+
}
−
+
@media only screen and (max-width : 650px) and (min-width : 481px) {
−
+
/* Tablet view: 2 tiles */
−
<div class="container_light" style="text-align: center;">
+
.box {
−
 
+
width: 50%;
−
<h1 style="text-align:center; color: #000000;"> ADVISORS </h1>
+
padding-bottom: 50%;
−
 
+
}
−
<ul style="list-style-type: none; text-align: center;">
+
.boxLarge {
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
width: 100%;
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
padding-bottom: 100%;
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
}
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
.header {
−
</ul>
+
text-align:center;
−
</div>
+
}
−
 
+
.headerContent {
−
<div class="container_dark" style="text-align: center;">
+
width: 100%;
−
<h1 style="text-align:center; color: #000000;"> INSTRUCTORS </h1>
+
}
−
<ul style="list-style-type: none; text-align: center;">
+
.header-logo {
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
display:none
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
}
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
.header ul li img {
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
float:none;
−
   
+
padding-left: auto;
−
</ul>
+
padding-right: auto;
−
</div>
+
}
−
 
+
}
−
<div class="container_light" style="text-align: center;">
+
@media only screen and (max-width : 1050px) and (min-width : 651px) {
−
<h1 style="text-align:center; color: #000000;"> MEMBERS </h1>
+
/* Small desktop / ipad view: 3 tiles */
−
<ul style="list-style-type: none; text-align: center;">
+
.box {
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
width: 33.3%;
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
padding-bottom: 33.3%;
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
}
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
.boxLarge {
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
width: 66.6%;
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
padding-bottom: 66.6%;
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
}
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
}
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
/* Medium desktop: 4 tiles */
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
.box {
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
width: 25%;
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
padding-bottom: 25%;
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
}
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
.boxLarge {
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
width: 50%;
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
padding-bottom: 25%;
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
}
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
}
−
<li class="fotos"><img src="http://placehold.it/225x300.png"> </li>
+
</style>
−
 
+
<!-- Enable media queries for old IE -->
−
 
+
<!--[if lt IE 9]>
−
</ul>
+
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
−
</div>
+
<![endif]-->
−
 
+
</head>
−
 
+
<body class="no-touch">
−
 
+
<div class="header">
−
 
+
<div class="headerContent">
−
</div>
+
<div class="header-logo"><img src="media/opoptosis logo.png" alt="opoptosis logo" height="40">
−
 
+
</div>
−
 
+
<ul>
−
 
+
<li><a href="#"><img src="media/icons/add-button.png" alt="sponsors"></a></li>
−
 
+
<li><a href="#"><img src="media/icons/new-file.png" alt="progress"></a></li>
−
  <div class="footer">  
+
<li><a href="#"><img src="media/icons/user.png" alt="team"></a></li>
−
  <h1 style="text-align:center; color: #000000;"> SPONSORS </h1>
+
<li><a href="#"><img src="media/icons/settings.png" alt="project" ></a></li>
−
    <ul style="list-style-type: none; text-align: center;">
+
<li><a href="#"><img src="media/icons/home.png" alt="home"></a></li>
−
<li style="display: inline; margin: 2px 1px;"> <img src="http://placehold.it/200x100.png" style="border: 2px solid #000000;"></li>
+
</ul>
−
<li style="display: inline; margin: 2px 1px;"> <img src="http://placehold.it/200x100.png" style="border: 2px solid #000000;"></li>
+
</div>
−
<li style="display: inline; margin: 2px 1px;"> <img src="http://placehold.it/200x100.png" style="border: 2px solid #000000;"></li>
+
</div>
−
<li style="display: inline; margin: 2px 1px;"> <img src="http://placehold.it/200x100.png" style="border: 2px solid #000000;"></li>
+
<div class="wrap">
−
<li style="display: inline; margin: 2px 1px;"> <img src="http://placehold.it/200x100.png" style="border: 2px solid #000000;"></li>
+
<div class="boxLarge">
−
<li style="display: inline; margin: 2px 1px;"> <img src="http://placehold.it/200x100.png" style="border: 2px solid #000000;"></li>
+
<div class="boxLargeInner">
−
 
+
<h1>Meet the team!</h2>
−
 
+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
−
    </ul>
+
<h3>Hover over on a face to view more information!</h3>
−
<!-- end .footer -->
+
</div>
 +
 +
 +
</div>
 +
 +
 +
 +
 +
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://placekitten.com/600/600" onmouseover="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" onmouseout="this.src='http://placekitten.com/600/600'" /></a>
 +
<p>Matias Zurbriggen</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" onmouseover="this.src='http://placekitten.com/600/600'" onmouseout="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" /></a>
 +
<p>Andreas Weber</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://placekitten.com/600/600" onmouseover="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" onmouseout="this.src='http://placekitten.com/600/600'" /></a>
 +
<p>Michael Feldbrügge</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" onmouseover="this.src='http://placekitten.com/600/600'" onmouseout="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" /></a>
 +
<p>Nicolas Koutsoubelis</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://placekitten.com/600/600" onmouseover="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" onmouseout="this.src='http://placekitten.com/600/600'" /></a>
 +
<p>Samantha Kurz</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" onmouseover="this.src='http://placekitten.com/600/600'" onmouseout="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" /></a>
 +
<p>Ute Gengenbacher</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://placekitten.com/600/600" onmouseover="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" onmouseout="this.src='http://placekitten.com/600/600'" /></a>
 +
<p>Alina Kuklinski</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" onmouseover="this.src='http://placekitten.com/600/600'" onmouseout="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" /></a>
 +
<p>Andreas Kahl</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://placekitten.com/600/600" onmouseover="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" onmouseout="this.src='http://placekitten.com/600/600'" /></a>
 +
<p>Carima Weinert</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" onmouseover="this.src='http://placekitten.com/600/600'" onmouseout="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" /></a>
 +
<p>Claudia Kalus</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://placekitten.com/600/600" onmouseover="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" onmouseout="this.src='http://placekitten.com/600/600'" /></a>
 +
<p>Dorian Röders</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" onmouseover="this.src='http://placekitten.com/600/600'" onmouseout="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" /></a>
 +
<p>Erdem Sunal</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://placekitten.com/600/600" onmouseover="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" onmouseout="this.src='http://placekitten.com/600/600'" /></a>
 +
<p>Julia Kapr</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" onmouseover="this.src='http://placekitten.com/600/600'" onmouseout="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" /></a>
 +
<p>Julian Ohl</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://placekitten.com/600/600" onmouseover="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" onmouseout="this.src='http://placekitten.com/600/600'" /></a>
 +
<p>Leonie Wirth</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" onmouseover="this.src='http://placekitten.com/600/600'" onmouseout="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" /></a>
 +
<p>Maja Magel</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://placekitten.com/600/600" onmouseover="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" onmouseout="this.src='http://placekitten.com/600/600'" /></a>
 +
<p>Marcel Dickmanns</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" onmouseover="this.src='http://placekitten.com/600/600'" onmouseout="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" /></a>
 +
<p>Martin Duemmel</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://placekitten.com/600/600" onmouseover="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" onmouseout="this.src='http://placekitten.com/600/600'" /></a>
 +
<p>Marvin Hubert</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" onmouseover="this.src='http://placekitten.com/600/600'" onmouseout="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" /></a>
 +
<p>Marvin van Aalst</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://placekitten.com/600/600" onmouseover="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" onmouseout="this.src='http://placekitten.com/600/600'" /></a>
 +
<p>Melissa Meschkewitz</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" onmouseover="this.src='http://placekitten.com/600/600'" onmouseout="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" /></a>
 +
<p>Rebecca Wolters</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://placekitten.com/600/600" onmouseover="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" onmouseout="this.src='http://placekitten.com/600/600'" /></a>
 +
<p>René Inckemann</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" onmouseover="this.src='http://placekitten.com/600/600'" onmouseout="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" /></a>
 +
<p>Tim Rapp</p>
 +
</div>
 +
</div>
 +
<div class="box">
 +
<div class="boxInner">
 +
<a href="http://google.de"><img src="http://placekitten.com/600/600" onmouseover="this.src='http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg'" onmouseout="this.src='http://placekitten.com/600/600'" /></a>
 +
<p>Tobias Link</p>
 +
</div>
 +
</div>
 
</div>
 
</div>
−
 
+
<div class="footer">
−
  <!-- end .container --></div>
+
<h1 style="text-align:center;">Footer</h1>
−
</body>
+
</div>
 +
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
 +
<script type="text/javascript">
 +
$(function(){
 +
  // See if this is a touch device
 +
  if ('ontouchstart' in window)
 +
  {
 +
      // Set the correct body class
 +
      $('body').removeClass('no-touch').addClass('touch');
 +
   
 +
      // Add the touch toggle to show text
 +
      $('div.boxInner img').click(function(){
 +
        $(this).closest('.boxInner').toggleClass('touchFocus');
 +
      });
 +
  }
 +
});
 +
</script>
 +
</body>
 
</html>
 
</html>

Revision as of 16:37, 24 June 2016

TEAM

  • sponsors
  • progress
  • team
  • project
  • home

Meet the team!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Hover over on a face to view more information!

Matias Zurbriggen

Andreas Weber

Michael Feldbrügge

Nicolas Koutsoubelis

Samantha Kurz

Ute Gengenbacher

Alina Kuklinski

Andreas Kahl

Carima Weinert

Claudia Kalus

Dorian Röders

Erdem Sunal

Julia Kapr

Julian Ohl

Leonie Wirth

Maja Magel

Marcel Dickmanns

Martin Duemmel

Marvin Hubert

Marvin van Aalst

Melissa Meschkewitz

Rebecca Wolters

René Inckemann

Tim Rapp

Tobias Link

Footer