Difference between revisions of "Team:Duesseldorf/Team"

Line 6: Line 6:
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
−
<link rel="stylesheet" type="text/css"
 
−
href="https://2016.igem.org/Template:Duesseldorf/style?action=raw&ctype=text/css" />
 
−
<style> #sideMenu, #top_title {display:none;}
 
−
#content { padding:0px; width:auto;}
 
−
</style>
 
 
<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>
 
 
Line 29: Line 24:
 
                 });
 
                 });
 
  </script>
 
  </script>
 +
 +
<style>
 +
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:auto;}
 +
* {
 +
    -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
    box-sizing: border-box
 +
}
 +
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
 +
html {
 +
    -ms-text-size-adjust: 100%;
 +
    -webkit-text-size-adjust: 100%
 +
}
 +
/* Standard */
 +
body {
 +
    background-color: #e6e6e6;
 +
    font-family: 'Roboto', sans-serif;
 +
    margin: 0px;
 +
    line-height: 1.5;
 +
    font-size: 15px;
 +
}
 +
h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
    color: #0C9476;
 +
padding: 0px 3px 0px 0px;
 +
margin: 0px;
 +
}
 +
h1 {
 +
    font-size: 36px
 +
}
 +
h2 {
 +
    font-size: 30px
 +
}
 +
h3 {
 +
    font-size: 24px
 +
}
 +
h4 {
 +
    font-size: 20px
 +
}
 +
h5 {
 +
    font-size: 18px
 +
}
 +
h6 {
 +
    font-size: 16px
 +
}
 +
p,
 +
a,
 +
li {
 +
    padding-left: 3px;
 +
    padding-right: 3px;
 +
}
 +
.text-justify{
 +
    text-align: justify;
 +
}
 +
.text-left{
 +
    text-align: left;
 +
}
 +
.text-right {
 +
    text-align: right;
 +
}
 +
img {max-width:100%; height:auto}
 +
/* Nützliche Klassen*/
 +
.middle {
 +
    margin: auto;
 +
}
 +
.width {
 +
    width: 80%;
 +
    max-width: 1200px;
 +
}
 +
.top-padding{
 +
padding-top:15px;
 +
}
 +
/*Responsive*/
 +
.row {
 +
width:100%;
 +
    float: left;
 +
}
 +
.row::after {
 +
    content: "";
 +
    clear: both;
 +
    display: table;
 +
}
 +
/* For mobile phones: */
 +
[class*="col-"] {
 +
    width: 100%;
 +
float:left;
 +
}
 +
.colhalf{
 +
width:50%;
 +
}
 +
@media only screen and (min-width: 600px) {
 +
    /* For tablets: */
 +
   
 +
    .col-m-1 {
 +
        width: 8.33%;
 +
    }
 +
    .col-m-2 {
 +
        width: 16.66%;
 +
    }
 +
    .col-m-3 {
 +
        width: 25%;
 +
    }
 +
    .col-m-4 {
 +
        width: 33.33%;
 +
    }
 +
    .col-m-5 {
 +
        width: 41.66%;
 +
    }
 +
    .col-m-6 {
 +
        width: 50%;
 +
    }
 +
    .col-m-7 {
 +
        width: 58.33%;
 +
    }
 +
    .col-m-8 {
 +
        width: 66.66%;
 +
    }
 +
    .col-m-9 {
 +
        width: 75%;
 +
    }
 +
    .col-m-10 {
 +
        width: 83.33%;
 +
    }
 +
    .col-m-11 {
 +
        width: 91.66%;
 +
    }
 +
    .col-m-12 {
 +
        width: 100%;
 +
    }
 +
}
 +
@media only screen and (min-width: 1024px) {
 +
    /* For desktop: */
 +
   
 +
    .col-1 {
 +
        width: 8.33%;
 +
    }
 +
    .col-2 {
 +
        width: 16.66%;
 +
    }
 +
    .col-3 {
 +
        width: 25%;
 +
    }
 +
    .col-4 {
 +
        width: 33.33%;
 +
    }
 +
    .col-5 {
 +
        width: 41.66%;
 +
    }
 +
    .col-6 {
 +
        width: 50%;
 +
    }
 +
    .col-7 {
 +
        width: 58.33%;
 +
    }
 +
    .col-8 {
 +
        width: 66.66%;
 +
    }
 +
    .col-9 {
 +
        width: 75%;
 +
    }
 +
    .col-10 {
 +
        width: 83.33%;
 +
    }
 +
    .col-11 {
 +
        width: 91.66%;
 +
    }
 +
    .col-12 {
 +
        width: 100%;
 +
    }
 +
}
 +
/*Header*/
 +
.banner {
 +
    background-color: #e6e6e6;
 +
}
 +
.navigation {
 +
    background-color: #e6e6e6;
 +
}
 +
ul.topnav {
 +
  list-style-type: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  overflow: hidden;
 +
}
 +
ul.topnav li {float:right;}
 +
ul.topnav li a {
 +
  display: inline-block;
 +
  color: grey;
 +
  text-align: center;
 +
  padding: 14px 16px;
 +
  text-decoration: none;
 +
  transition: 0.3s;
 +
  font-size: 17px;
 +
}
 +
ul.topnav li a.active {color: #0C9476;}
 +
ul.topnav li a:hover {color: #111;}
 +
ul.topnav li.icon {display: none;}
 +
@media screen and (max-width:1024px) {
 +
  ul.topnav li:not(:last-child) {display: none;}
 +
  ul.topnav li {float:left;}
 +
  ul.topnav li.icon {
 +
    float: right;
 +
    display: inline-block;
 +
  }
 +
}
 +
@media screen and (max-width:1024px) {
 +
  ul.topnav.responsive {position: relative;}
 +
  ul.topnav.responsive li.icon {
 +
    position: absolute;
 +
    right: 0;
 +
    top: 0;
 +
  }
 +
  ul.topnav.responsive li {
 +
    float: none;
 +
    display: inline;
 +
  }
 +
  ul.topnav.responsive li a {
 +
    display: block;
 +
    text-align: left;
 +
  }
 +
}
 +
/*Page*/
 +
.border {
 +
    border-radius: 10px;
 +
}
 +
.shadow {
 +
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
 +
}
 +
.page {
 +
    background-color: #ffffff;
 +
    margin-bottom: 6%;
 +
    padding-top: 4%;
 +
    padding-bottom: 2%;
 +
overflow-x: auto
 +
}
 +
.content {
 +
}
 +
.footer {
 +
margin-top: 100px;
 +
}
 +
/* Footer Gallery */
 +
.sponsor {
 +
padding: 5px;
 +
}
 +
.sponsor img {
 +
    -webkit-filter: grayscale(100%);
 +
    /* Chrome, Safari, Opera */
 +
   
 +
    filter: grayscale(100%);
 +
}
 +
.sponsor img:hover {
 +
    -webkit-filter: grayscale(0%);
 +
    filter: none;
 +
}
 +
/* Switch Gallery*/
 +
.sg-container {
 +
    max-width: 100%;
 +
    float: left;
 +
    display: list-item;
 +
    list-style-type: none;
 +
    position: relative;
 +
margin:4px;
 +
 +
}
 +
.sg-container img {
 +
    max-width: 100%;
 +
border-radius: 10px 10px 10px 10px;
 +
-moz-border-radius: 10px 10px 10px 10px;
 +
-webkit-border-radius: 10px 10px 10px 10px;
 +
border: 0px solid #000000;
 +
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
 +
}
 +
.img-hidden {
 +
    bottom: 0;
 +
    position: absolute;
 +
    opacity: 0;
 +
    filter: alpha(opacity=0);
 +
    width: 100%;
 +
    z-index: 1000;
 +
    transition: opacity 2s;
 +
    -moz-transition: opacity 2s;
 +
    -webkit-transition: opacity 2s;
 +
}
 +
.sg-container.active .img-hidden {
 +
    opacity: 1;
 +
    filter: alpha(opacity=100);
 +
    transition: opacity 2s;
 +
    -moz-transition: opacity 2s;
 +
    -webkit-transition: opacity 2s;
 +
}
 +
/* Accordion */
 +
button.accordion {
 +
    background-color: #eee;
 +
    color: #444;
 +
    cursor: pointer;
 +
    padding: 18px;
 +
    width: 100%;
 +
    border: none;
 +
    text-align: left;
 +
    outline: none;
 +
    font-size: 15px;
 +
    transition: 0.4s;
 +
}
 +
button.accordion.active, button.accordion:hover {
 +
    background-color: #ddd;
 +
}
 +
div.panel {
 +
    padding: 0 18px;
 +
    background-color: white;
 +
    max-height: 0;
 +
    overflow: hidden;
 +
    transition: 0.6s ease-in-out;
 +
    opacity: 0;
 +
}
 +
div.panel.show {
 +
    opacity: 1;
 +
    max-height: 500px; 
 +
}
 +
 +
</style>
 +
 +
 +
 +
 +
 
 
 
</head>
 
</head>

Revision as of 11:36, 2 July 2016

<!DOCTYPE html> Team

Our 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. 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.

Alina Kuklinski

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.

Andreas Kahl

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.

Carima Weinert

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.

Carolin Krämer

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.

Claudia Kalus

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.

Dorian Röders

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.

Erdem Sunal

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.

Julia Kapr

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.

Julian Ohl

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.

Leonie Wirth

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.

Maja Magel

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.

Marcel Dickmanns

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.

Martin Duemmel

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.

Marvin Hubert

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.

Marvin van Aalst

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.

Melissa Meschkewitz

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.

Rebecca Wolters

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.

René Inckemann

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.

Tim Rapp

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.

Matias Zurbriggen

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.

Team Opoptosis, Heinrich-Heine Universität Düsseldorf. Design by Marvin van Aalst