|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| − | <head>
| + | <head> |
| − | <meta charset="utf-8">
| + | <style> |
| − | <title>TEAM OPTOPOSIS</title>
| + | /* Wiki CSS */ |
| − | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
| + | |
| − | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
| + | |
| − | <style type="text/css">
| + | |
| − | #sideMenu, #top_title {display:none;}
| + | |
| − | #content { padding:0px; width:auto; margin-top:-7px; margin-left:0px;}
| + | |
| − | 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;
| + | |
| − | }
| + | |
| − | .footer {
| + | |
| − | background-color: #FFFFFF;
| + | |
| − | width: 100%;
| + | |
| − | height: 200px;
| + | |
| − | padding-top: 5px;
| + | |
| − | }
| + | |
| − | .wrap {
| + | |
| − | overflow: hidden;
| + | |
| − | margin-top: 10px;
| + | |
| − | margin-left: auto;
| + | |
| − | margin-right: auto;
| + | |
| − | margin-bottom: 20px;
| + | |
| − | width: 80%;
| + | |
| − | }
| + | |
| − | .wrapFull {
| + | |
| − | overflow: hidden;
| + | |
| − | margin-left: auto;
| + | |
| − | margin-right: auto;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | .container_light{background: rgba(0,0,0,0.1); height: 25%;}
| + | |
| − | .container_dark{background: rgba(0,0,0,0.2); height: 25%;}
| + | |
| − | .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>
| + | |
| | | | |
| | + | #sideMenu, #top_title {display:none;} |
| | + | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;} |
| | + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } |
| | + | h1, |
| | + | h2, |
| | + | h3, |
| | + | h4, |
| | + | h5, |
| | + | h6 { |
| | + | color: #0C9476; |
| | + | padding: 0px 3px 0px 0px; |
| | + | margin: 0px; |
| | + | } |
| | + | |
| | + | /* Page CSS */ |
| | + | </style> |
| | + | </head> |
| | + | |
| | + | |
| | + | |
| | + | <body> |
| | + | |
| | + | <h1 style="text-align: center;"> Under Construction </h1> |
| | + | |
| | + | </body> |
| | | | |
| − | <!-- 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="40px" width="80%">
| |
| − | </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="wrapFull">
| |
| − | <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>
| |
| − | </div>
| |
| − | <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>
| |
| − | </div>
| |
| − | <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>
| |
| − | </div>
| |
| − | <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>
| |
| − | </div>
| |
| − | <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>
| |
| − | </div>
| |
| − | <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>
| |
| − | </div>
| |
| − | <!-- Footer -->
| |
| − | <div class="footer">
| |
| − | <h1 style="text-align:center;">Footer</h1>
| |
| − | </div>
| |
| | </html> | | </html> |
