Difference between revisions of "Team:Duesseldorf"

Line 1: Line 1:
 
{{Duesseldorf}}
 
{{Duesseldorf}}
−
 
 
<html>
 
<html>
−
<head>
+
<head>
−
<meta charset="utf-8">
+
<meta charset="utf-8">
−
<title>Home</title>
+
<title>TEAM OPTOSIS</title>
−
<style type="text/css">
+
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
−
body {font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0;}
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
−
a:link {color:#414958; text-decoration: underline;}
+
<!--
−
a:visited {color: #4E5869; text-decoration: underline;}
+
Created using JS Bin
−
a:hover, a:active, a:focus {text-decoration: none;}
+
http://jsbin.com
−
.container {width: 100%; max-width: 1920px; min-width: 720px; margin: 0 auto;}
+
−
.header {height: 50px; background: rgba(0,0,0,0.2);}
+
Copyright (c) 2016 by anonymous (http://jsbin.com/utupuw/5/edit)
−
.content {}
+
−
.container_light{background: rgba(0,0,0,0.1); height: 25%;}  
+
Released under the MIT license: http://jsbin.mit-license.org
−
.container_dark{background: rgba(0,0,0,0.2); height: 25%;}
+
-->
−
.footer {padding-bottom: 50px; background: #E5E5E5;}
+
<style type="text/css">
−
</style>
+
body {
−
</head>
+
background-color: #2D2D2D;
−
 
+
width: 100%;
−
<body>
+
margin: 0px;
−
<div class="container">
+
}
−
<div class="header">
+
h1, h2, h3, h4, h5, h6, h7, p {
−
<ul style="list-style-type: none; text-align: center; line-height: 50px;">
+
color: #0C9476;
−
<li style="color: #000000;display:inline; margin: 5px; font-weight:bold; "> <a href="https://2016.igem.org/Team:Duesseldorf"> HOME </a></li>
+
font-family: 'Roboto', sans-serif;
−
<li style="color: #000000;display:inline; margin: 5px; font-weight:bold;"> <a href="https://2016.igem.org/Team:Duesseldorf/Description"> PROJECT </a></li>
+
padding-left: 3px;
−
<li style="color: #000000; display: inline; margin: 5px; font-weight: bold;"><a href="https://2016.igem.org/Team:Duesseldorf/Team"> TEAM </a></li>
+
}
−
<li style="color: #000000;display:inline; margin: 5px; font-weight:bold;"><a href="https://2016.igem.org/Team:Duesseldorf/Parts"> PARTS </a></li>
+
.header {
−
<li style="color: #000000;display:inline; margin: 5px; font-weight:bold;"><a href="https://2016.igem.org/Team:Duesseldorf/Safety"> SAFETY </a></li>
+
background-color: #FFFFFF;
−
<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>
+
width: 100%;
−
<li style="color: #000000;display:inline; margin: 5px; font-weight:bold;"><a href="https://2016.igem.org/Team:Duesseldorf/Awards"> AWARDS </a> </li>
+
height: 60px;
−
</ul>
+
}
−
</div>
+
.headerContent {
−
+
width: 80%;
−
<div class="content">  
+
margin: auto;
−
 
+
}
−
<div class="container_light"><a href="https://2016.igem.org/Team:Duesseldorf/Description"> <img src="https://static.igem.org/mediawiki/2016/5/55/Igem-hhu-2016-home-project.png" alt="project" width="70%" style="display:block; margin-left:auto; margin-right:auto;"></a>
+
.header ul {
−
</div>
+
display:inline;
−
   
+
}
−
<div class="container_dark"><a href="https://2016.igem.org/Team:Duesseldorf/Team">  <img src="https://static.igem.org/mediawiki/2016/a/ac/Igem-hhu-2016-home-team.png" alt="team" width="70%" style="display:block; margin-left:auto; margin-right:auto;"></a>
+
.header ul li {
−
</div>
+
display:inline;
−
   
+
}
−
<div class="container_light"><a href="https://2016.igem.org/Team:Duesseldorf/Parts">  <img src="https://static.igem.org/mediawiki/2016/8/87/Igem-hhu-2016-home-parts.png" alt="parts" width="70%" style="display:block; margin-left:auto; margin-right:auto;"></a>
+
.header ul li img {
−
</div>
+
height: 40px;
−
   
+
margin: 10px 5px 10px 5px;
−
<div class="container_dark"><a href="https://2016.igem.org/Team:Duesseldorf/Safety">  <img src="https://static.igem.org/mediawiki/2016/8/8f/Igem-hhu-2016-home-safety.png" alt="safety" width="70%" style="display:block; margin-left:auto; margin-right:auto;"></a>
+
float:right;
−
</div>
+
}
−
   
+
.header-logo {
−
<div class="container_light"><a href="https://2016.igem.org/Team:Duesseldorf/Human_Practices"><img src="https://static.igem.org/mediawiki/2016/5/51/Igem-hhu-2016-home-human_practices.png" alt="human practices" width="70%" style="display:block; margin-left:auto; margin-right:auto;"> </a>
+
height: 40px;
−
</div>
+
margin: 10px 5px 10px 5px;
−
   
+
float:left;
−
<div class="container_dark"><a href="https://2016.igem.org/Team:Duesseldorf/Awards">  <img src="https://static.igem.org/mediawiki/2016/7/75/Igem-hhu-2016-home-awards.png" alt="awards" width="70%" style="display:block; margin-left:auto; margin-right:auto;"></a>
+
}
−
</div>
+
.footer {
−
</div>
+
background-color: #FFFFFF;
−
 
+
width: 100%;  
−
 
+
height: 200px;
−
<div class="footer">  
+
padding-top: 5px;
−
<h1 style="text-align:center; color: #000000;"> SPONSORS </h1>
+
}
−
<ul style="list-style-type: none; text-align: center;">
+
.wrap {
−
<li style="display: inline; margin: 2px 1px;"> <img src="http://placehold.it/200x100.png" style="border: 2px solid #000000;"></li>
+
overflow: hidden;
−
<li style="display: inline; margin: 2px 1px;"> <img src="http://placehold.it/200x100.png" style="border: 2px solid #000000;"></li>
+
margin-top: 10px;
−
<li style="display: inline; margin: 2px 1px;"> <img src="http://placehold.it/200x100.png" style="border: 2px solid #000000;"></li>
+
margin-left: auto;
−
<li style="display: inline; margin: 2px 1px;"> <img src="http://placehold.it/200x100.png" style="border: 2px solid #000000;"></li>
+
margin-right: auto;
−
<li style="display: inline; margin: 2px 1px;"> <img src="http://placehold.it/200x100.png" style="border: 2px solid #000000;"></li>
+
margin-bottom: 20px;
−
<li style="display: inline; margin: 2px 1px;"> <img src="http://placehold.it/200x100.png" style="border: 2px solid #000000;"></li>
+
width: 80%;
−
</ul>
+
}
−
</div>
+
.container_light{background: rgba(0,0,0,0.1); height: 25%;}
−
</div>
+
.container_dark{background: rgba(0,0,0,0.2); height: 25%;}
−
</body>
+
.box {
 +
float: left;
 +
position: relative;
 +
width: 20%;
 +
padding-bottom: 20%;
 +
}
 +
.boxInner {
 +
position: absolute;
 +
left: 10px;
 +
right: 10px;
 +
top: 10px;
 +
bottom: 10px;
 +
overflow: hidden;
 +
}
 +
.boxInner p {
 +
position: absolute;
 +
display:table;
 +
bottom: 0;
 +
left: 0;
 +
right: 0;
 +
margin-bottom: 0px;
 +
color: #FFF;
 +
text-align: left;
 +
background: rgba(0, 0, 0, 0.2);
 +
}
 +
.boxInner img {
 +
width: 100%;
 +
}
 +
.boxInner .titleBox {
 +
position: absolute;
 +
display:table;
 +
bottom: 0;
 +
left: 0;
 +
right: 0;
 +
margin-bottom: -50px;
 +
background: #000;
 +
background: rgba(0, 0, 0, 0.5);
 +
color: #FFF;
 +
padding: 10px;
 +
text-align: center;
 +
-webkit-transition: opacity 500ms;
 +
-moz-transition: opacity 500ms;
 +
-o-transition: opacity 500ms;
 +
transition: opacity 500ms;
 +
}
 +
.boxLarge {
 +
float: left;
 +
position: relative;
 +
width: 40%;
 +
padding-bottom: 20%;
 +
}
 +
.boxLargeInner {
 +
background-color: #FFFFFF;
 +
position: absolute;
 +
left: 10px;
 +
right: 10px;
 +
top: 10px;
 +
bottom: 10px;
 +
overflow: hidden;
 +
}
 +
.boxLargeInner h1, h2, h3, h4, h5, h6, h7 {
 +
padding-left:10px;
 +
}
 +
.boxLargeInner p{
 +
padding-left:35px;
 +
padding-right:35px;
 +
text-align:justify;
 +
}
 +
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
 +
margin-bottom: 0;
 +
}
 +
@media only screen and (max-width : 480px) {
 +
/* Smartphone view: 1 tile */
 +
.box {
 +
width: 100%;
 +
padding-bottom: 100%;
 +
}
 +
.boxLarge {
 +
display:none;
 +
}
 +
.header {
 +
text-align:center;
 +
}
 +
.headerContent {
 +
width: 100%;
 +
}
 +
.header-logo {
 +
display:none
 +
}
 +
.header ul li img {
 +
float:none;
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
}
 +
@media only screen and (max-width : 650px) and (min-width : 481px) {
 +
/* Tablet view: 2 tiles */
 +
.box {
 +
width: 50%;
 +
padding-bottom: 50%;
 +
}
 +
.boxLarge {
 +
width: 100%;
 +
padding-bottom: 100%;
 +
}
 +
.header {
 +
text-align:center;
 +
}
 +
.headerContent {
 +
width: 100%;
 +
}
 +
.header-logo {
 +
display:none
 +
}
 +
.header ul li img {
 +
float:none;
 +
padding-left: auto;
 +
padding-right: auto;
 +
}
 +
}
 +
@media only screen and (max-width : 1050px) and (min-width : 651px) {
 +
/* Small desktop / ipad view: 3 tiles */
 +
.box {
 +
width: 33.3%;
 +
padding-bottom: 33.3%;
 +
}
 +
.boxLarge {
 +
width: 66.6%;
 +
padding-bottom: 66%;
 +
}
 +
}
 +
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
 +
/* Medium desktop: 4 tiles */
 +
.box {
 +
width: 25%;
 +
padding-bottom: 25%;
 +
}
 +
.boxLarge {
 +
width: 50%;
 +
padding-bottom: 25%;
 +
}
 +
}
 +
</style>
 +
<!-- Enable media queries for old IE -->
 +
<!--[if lt IE 9]>
 +
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
 +
<![endif]-->
 +
</head>
 +
<!-- Header -->
 +
<body class="no-touch">
 +
<div class="header">
 +
<div class="headerContent">
 +
<div class="header-logo"><img src="https://static.igem.org/mediawiki/2016/8/8f/Team-opoptosis-2016-logo.png" alt="opoptosis logo" height="40">
 +
</div>
 +
<ul>
 +
<li><a href="#"><img src="https://static.igem.org/mediawiki/2016/9/9c/Team-opoptosis-2016-icons-sponsors.png" alt="sponsors"></a></li>
 +
<li><a href="#"><img src="https://static.igem.org/mediawiki/2016/a/af/Team-opoptosis-2016-icons-progress.png" alt="progress"></a></li>
 +
<li><a href="https://2016.igem.org/Team:Duesseldorf/Team"><img src="https://static.igem.org/mediawiki/2016/5/51/Team-opoptosis-2016-icons-team.png" alt="team"></a></li>
 +
<li><a href="https://2016.igem.org/Team:Duesseldorf/Description"><img src="https://static.igem.org/mediawiki/2016/5/58/Team-opoptosis-2016-icons-project.png" alt="project" ></a></li>
 +
<li><a href="https://2016.igem.org/Team:Duesseldorf"><img src="https://static.igem.org/mediawiki/2016/4/43/Team-opoptosis-2016-icons-home.png" alt="home"></a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
<!-- Body -->
 +
<div class="wrap">
 +
<div class="container_light"><a href="https://2016.igem.org/Team:Duesseldorf/Description"> <img src="media/project.png" alt="project" width="70%" style="display:block; margin-left:auto; margin-right:auto;"></a>
 +
</div>
 +
<div class="container_dark"><a href="https://2016.igem.org/Team:Duesseldorf/Team">  <img src="media/team.png" alt="team" width="70%" style="display:block; margin-left:auto; margin-right:auto;"></a>
 +
</div>
 +
<div class="container_light"><a href="https://2016.igem.org/Team:Duesseldorf/Parts">  <img src="media/parts.png" alt="parts" width="70%" style="display:block; margin-left:auto; margin-right:auto;"></a>
 +
</div>
 +
<div class="container_dark"><a href="https://2016.igem.org/Team:Duesseldorf/Safety">  <img src="media/safety.png" alt="safety" width="70%" style="display:block; margin-left:auto; margin-right:auto;"></a>
 +
</div>
 +
<div class="container_light"><a href="https://2016.igem.org/Team:Duesseldorf/Human_Practices"><img src="media/hp.png" alt="human practices" width="70%" style="display:block; margin-left:auto; margin-right:auto;"> </a>
 +
</div>
 +
<div class="container_dark"><a href="https://2016.igem.org/Team:Duesseldorf/Awards">  <img src="media/awards.png" alt="awards" width="70%" style="display:block; margin-left:auto; margin-right:auto;"></a>
 +
</div>
 +
</div>
 +
<!-- Footer -->
 +
<div class="footer">
 +
<h1 style="text-align:center;">Footer</h1>
 +
</div>
 
</html>
 
</html>

Revision as of 11:41, 26 June 2016

TEAM OPTOSIS

  • sponsors
  • progress
  • team
  • project
  • home
project
team
parts
safety
human practices
awards

Footer