Difference between revisions of "Team:UNIK Copenhagen"

 
(135 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{UNIK_Copenhagen}}
+
{{UNIK_Copenhagen2}}
  
 
<html>
 
<html>
Line 6: Line 6:
 
<style>
 
<style>
  
−
/*---------------------------*/
+
/*-------------------------------------*/
−
/*        Slideshow         */
+
/*        Main part         */
−
/*---------------------------*/
+
/*-------------------------------------*/
−
/**
+
−
* BxSlider v4.0 - Fully loaded, responsive content slider
+
−
* http://bxslider.com
+
−
*
+
−
* Written by: Steven Wanderski, 2012
+
−
* http://stevenwanderski.com
+
−
* (while drinking Belgian ales and listening to jazz)
+
−
*
+
−
* CEO and founder of bxCreative, LTD
+
−
* http://bxcreative.com
+
−
*/
+
  
−
 
+
#mainPart{
−
/** RESET AND LAYOUT
+
float: left;
−
===================================*/
+
margin:0px -200px 0px 0px;
−
ul.bxslider {
+
height:auto;
−
      margin: 0;
+
width:900px;
 +
        border: none;
 +
        background:white;
 
}
 
}
  
  
−
div#wikicontent ul.bxslider, div#wikicontent ul.bxgallery {
 
−
    margin: 0;
 
−
    padding: 0;
 
−
}
 
  
−
.bx-wrapper {
+
/*  Illustration  */
−
position: relative;
+
 
−
margin: 0 0;
+
div.container {
−
padding: 0;
+
      display:inline-block;
−
*zoom: 1;
+
      clear: left;
−
left:1px;
+
      width:270px;
−
}
+
margin: -1000px 2px 0px 2px;
 +
    }
  
−
.bx-wrapper .bxslider img {
+
.flip-container {
−
width: 930px;
+
    float: left;
−
height: 250px;
+
    position: relative;
−
display: block;
+
    perspective: 1000px;
−
        display: inline;
+
    -webkit-perspective: 1000px;  
 
}
 
}
  
−
.bx-wrapper .bxslider li {
+
.flip-container,
−
        background: #FFFFFF;
+
.flip-container .front-side,
−
        text-align: center;
+
.flip-container .back-side {
−
        vertical-align: center;
+
    width: 270px;
 +
    height: 400px;
 +
margin: 0px 2px 0px 2px;
 
}
 
}
  
−
.bx-wrapper .bxgallery img {
+
.flip-container .front-side,
−
width: 930px;
+
.flip-container .back-side {
−
height: 250px;
+
−
display: block;
+
−
margin: auto;
+
 
     position: absolute;
 
     position: absolute;
 
     top: 0;
 
     top: 0;
 
     left: 0;
 
     left: 0;
−
     right: 0;
+
     backface-visibility: hidden;
−
     bottom: 0;
+
     -webkit-backface-visibility: hidden;
 +
    transition: 1.2s;
 +
    -webkit-transition: 1.2s;
 +
    color: #fff;
 +
    font-size: 12px;
 +
    text-align: center;
 +
    padding-top: 0px;
 
}
 
}
  
−
/** THEME
+
.flip-container .back-side {
−
===================================*/
+
    z-index: 1;
−
 
+
    transform: rotateY(180deg);
−
 
+
    -webkit-transform: rotateY(180deg);
−
.bx-wrapper .bx-viewport {
+
−
background: #FFF;
+
−
        border: none;
+
−
        left: -1px;
+
 
}
 
}
  
−
.box-center .bx-wrapper .bx-viewport {
+
.flip-container .front-side {
−
background: #ded6ca;
+
    z-index: 2;
 +
    transform: rotateY(0deg);
 +
    -webkit-transform: rotateY(0deg);
 
}
 
}
  
−
.bx-wrapper .bx-pager,
+
.flip-container:hover .front-side {
−
.bx-wrapper .bx-controls-auto {
+
    transform: rotateY(-180deg);
−
position: absolute;
+
    -webkit-transform: rotateY(-180deg);
−
bottom: 30px;
+
−
width: 938px;
+
 
}
 
}
  
−
.box-center .bx-wrapper .bx-pager,
+
.flip-container:hover .back-side {
−
.box-center .bx-wrapper .bx-controls-auto {
+
    transform: rotateY(0deg);
−
bottom: 2px;
+
    -webkit-transform: rotateY(0deg);
 
}
 
}
  
−
/* LOADER */
 
  
−
.bx-wrapper .bx-loading {
+
/*  Logo  */
−
min-height: 50px;
+
#logo{
−
background: url('https://static.igem.org/mediawiki/2013/8/8d/TUM13_slider_bx_loader.gif') center center no-repeat #fff;
+
margin:0px 0px 0px 100px;
−
height: 100%;
+
height:auto;
−
width: 930px;
+
width:900px;
−
position: absolute;
+
        border: none;
−
top: 0;
+
        background:white;
−
left: 0;
+
      display:inline-block;
−
z-index: 2000;
+
      clear: center;
 
}
 
}
−
 
+
.logo img{
−
/* PAGER */
+
margin: 10px 5px 10px 25px;
−
 
+
−
.bx-wrapper .bx-pager {
+
−
text-align: center;
+
−
font-size: .85em;
+
−
font-family: Arial;
+
−
font-weight: bold;
+
−
color: #666;
+
−
padding-top: 20px;
+
−
left:20px;
+
 
}
 
}
  
−
.bx-wrapper .bx-pager .bx-pager-item,
+
.logo img:hover{
−
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
+
opacity: 0.7;
−
display: inline-block;
+
−
*zoom: 1;
+
−
*display: inline;
+
 
}
 
}
  
−
.bx-wrapper .bx-pager.bx-default-pager a {
 
−
background: #666;
 
−
text-indent: -9999px;
 
−
display: block;
 
−
width: 10px;
 
−
height: 10px;
 
−
margin: 0 5px;
 
−
outline: 0;
 
−
-moz-border-radius: 5px;
 
−
-webkit-border-radius: 5px;
 
−
border-radius: 5px;
 
−
}
 
  
−
.bx-wrapper .bx-pager.bx-default-pager a:hover,
+
/*  E-mail  */
−
.bx-wrapper .bx-pager.bx-default-pager a.active {
+
#footer{
−
background: #000;
+
width: 814px;
 +
bottom:0;
 
}
 
}
  
−
/* DIRECTION CONTROLS (NEXT / PREV) */
+
</style>
  
−
.bx-wrapper .bx-prev {
 
−
left: 20px;
 
−
background: url('https://static.igem.org/mediawiki/2013/1/14/TUM13_slider_controls.png') no-repeat 0 -32px;
 
−
}
 
  
−
.bx-wrapper .bx-next {
+
</head>
−
right: 20px;
+
−
background: url('https://static.igem.org/mediawiki/2013/1/14/TUM13_slider_controls.png') no-repeat -43px -32px;
+
−
}
+
  
−
.bx-wrapper .bx-prev:hover {
+
<!--Top front page-->
−
background-position: 0 0;
+
−
}
+
  
−
.bx-wrapper .bx-next:hover {
 
−
background-position: -43px 0;
 
−
}
 
  
−
.bx-wrapper .bx-controls-direction a {
 
−
position: absolute;
 
−
top: 50%;
 
−
margin-top: -16px;
 
−
outline: 0;
 
−
width: 32px;
 
−
height: 32px;
 
−
text-indent: -9999px;
 
−
z-index: 9995;
 
−
}
 
  
−
.bx-wrapper .bx-controls-direction a.disabled {
+
<div class="flip-container">
−
display: none;
+
  <div class="front-side">
−
}
+
  <img src="https://static.igem.org/mediawiki/2015/e/e0/UNIK_Copenhagen_SpaceMoss_logo_small.png" width=65%></div>
 +
  <div class="back-side">
 +
  <img src="https://static.igem.org/mediawiki/2015/e/e0/UNIK_Copenhagen_SpaceMoss_logo_small.png" width=65%>
 +
  </div>
 +
</div>
  
−
/* AUTO CONTROLS (START / STOP) */
+
<div class="flip-container">
 +
  <div class="front-side">
 +
  <img src="https://static.igem.org/mediawiki/2015/a/af/IGEM_logo_small.png" width=65%></div>
 +
  <div class="back-side">
 +
  <img src="https://static.igem.org/mediawiki/2015/a/af/IGEM_logo_small.png" width=65%>
 +
  </div>
 +
</div>
  
−
.bx-wrapper .bx-controls-auto {
+
<div class="flip-container" style="margin: 0px 0px 0px 8px">
−
text-align: center;
+
  <div class="front-side">
−
}
+
  <img src="https://static.igem.org/mediawiki/2015/2/22/UNIK_Copenhagen_Moss_in_hand_small.png" width=65%></div>
 +
  <div class="back-side">
 +
  <img src="https://static.igem.org/mediawiki/2015/2/22/UNIK_Copenhagen_Moss_in_hand_small.png" width=65%>
 +
  </div>
 +
</div>
  
−
.bx-wrapper .bx-controls-auto .bx-start {
+
<div class="container">
−
display: block;
+
<img src="https://static.igem.org/mediawiki/2015/e/eb/UNIK_Copenhagen_Homepage_box1.png" width=266px style="margin: -356px 0px 0px 0px">
−
text-indent: -9999px;
+
</div>
−
width: 10px;
+
−
height: 11px;
+
−
outline: 0;
+
−
background: url('https://static.igem.org/mediawiki/2013/1/14/TUM13_slider_controls.png') -86px -11px no-repeat;
+
−
margin: 0 3px;
+
−
}
+
  
−
.bx-wrapper .bx-controls-auto .bx-start:hover,
+
<div class="container">
−
.bx-wrapper .bx-controls-auto .bx-start.active {
+
<img src="https://static.igem.org/mediawiki/2015/2/2f/UNIK_Copenhagen_Homepage_box2.png" width=266px style="margin: -356px 0px 0px 0px">
−
background-position: -86px 0;
+
</div>
−
}
+
  
−
.bx-wrapper .bx-controls-auto .bx-stop {
+
<div class="container">
−
display: block;
+
<img src="https://static.igem.org/mediawiki/2015/a/a2/UNIK_Copenhagen_Homepage_box3.png" width=266px style="margin: -356px 0px 0px 0px">
−
text-indent: -9999px;
+
</div>
−
width: 9px;
+
−
height: 11px;
+
−
outline: 0;
+
−
background: url('https://static.igem.org/mediawiki/2013/1/14/TUM13_slider_controls.png') -86px -44px no-repeat;
+
−
margin: 0 3px;
+
−
}
+
  
−
.bx-wrapper .bx-controls-auto .bx-stop:hover,
 
−
.bx-wrapper .bx-controls-auto .bx-stop.active {
 
−
background-position: -86px -33px;
 
−
}
 
  
−
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
+
<div id=logo>
 +
<br><br>
 +
<div class="logo">
 +
<a href="http://www.tycho-bio.com/"><img src="https://static.igem.org/mediawiki/2015/e/e3/UNIK_Copenhagen_TychoBio_logo.png" width=160px title="Click to go to TychoBio's webpage"></a>
 +
<a href="http://www.ku.dk/english"><img src="https://static.igem.org/mediawiki/2015/3/30/UNIK_Copenhagen_Ku_logo.jpg" width=160px title="Click to go to University of Copenhagen's webpage"></a>
 +
<a href="http://www.idtdna.com/site"><img src="https://static.igem.org/mediawiki/2015/c/cc/UNIK_Copenhagen_IDT-Logo.jpg" width=160px title="Click to go to IDT's webpage"></a>
 +
</div>
 +
<div class="logo">
 +
<a href="http://www.lundbeckfoundation.com/"><img src="https://static.igem.org/mediawiki/2015/4/48/UNIK_copenhagen_Lundbeckfonden.jpg" width=160px style="margin:0px 0px 0px 100px" title="Click to go to Lundbeckfonden's webpage"></a>
 +
<a href="http://www.bachberry.eu/"><img src="https://static.igem.org/mediawiki/2015/b/b8/UNIK_Copenhagen_Backberrylogo.png" width=220px title="Click to go to Bachberry's webpage"></a>
 +
</div>
 +
<br><br>
 +
</div>
  
−
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
 
−
text-align: left;
 
−
width: 80%;
 
−
}
 
  
−
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
+
<div id="footer" style="bottom:0;">
−
right: 20px;
+
<hr><br>
−
width: 35px;
+
<p>SpaceMoss <br> Team UNIK Copenhagen <br> <b>e-mail:</b> igemcph@gmail.com<p>
−
}
+
</div>
 +
</div>
  
−
/* IMAGE CAPTIONS */
 
  
−
.bx-wrapper .bx-caption {
 
−
position: absolute;
 
−
bottom: 0;
 
−
left: 0;
 
−
background: #666\9;
 
−
background: rgba(80, 80, 80, 0.75);
 
−
width: 100%;
 
−
}
 
  
−
.bx-wrapper .bx-caption span {
 
−
color: #fff;
 
−
font-family: Arial;
 
−
display: block;
 
−
font-size: .85em;
 
−
padding: 0px;
 
−
}
 
−
/*  Slideshow end  */
 
−
 
−
/*-------------------------------------*/
 
−
/*        Two parts        */
 
−
/*-------------------------------------*/
 
−
 
−
#twoParts{
 
−
float:left;
 
−
margin:15px;
 
−
height:auto;
 
−
width:920px;
 
−
        border: none;
 
−
        background:white;
 
−
}
 
−
.two{
 
−
margin:5px 15px;
 
−
padding:20px 10px 10px 10px;
 
−
height:auto;
 
−
width:400px;
 
−
float:left;
 
−
}
 
−
 
−
/* Two parts end */
 
−
 
−
</style>
 
−
 
−
<!--Twitter box-->
 
−
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 
−
</head>
 
−
 
−
<!--Slideshow-->
 
−
 
−
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 
−
<script src="/js/jquery.bxslider.min.js"></script>
 
−
<script src="https://2015.igem.org/Team:UNIK_Copenhagen/imageslide.js?action=raw&ctype=text/javascript=edit" type="text/javascript"></script>
 
−
 
−
<ul class="bxslider">
 
−
  <li><img src="https://static.igem.org/mediawiki/2015/d/df/UNIK_Copenhagen_Team_picture_310315.jpg"></li>
 
−
  <li><img src="https://static.igem.org/mediawiki/2015/e/e2/UNIK_Copenhagen_Team_picture2_310315.jpg"></li>
 
−
</ul>
 
−
 
−
 
−
<div id="twoParts">
 
−
 
−
<div class="two">
 
−
                            <h1>WELCOME TO OUR WIKI!</h1>
 
−
  <p>At SpaceMoss, we are working on a new breed of moss, designed to be able to live on Mars. Moss can be engineered to produce an almost limitless variety of compounds, and the implications are enormous. These very days, we are looking into what, exactly, our moss should produce, and it could be litterally anything. Should it be pharmaceuticals for the first colonists? Plastics for use in 3D printers on the first Mars outpost? Or even terraforming of the atmosphere?
 
−
Follow our ideas, work, research and production through the next few months. I think we're in for one hell of a ride! </p>
 
−
</div>
 
−
 
−
 
−
<div class="two">
 
−
<div class="tweetbar">
 
−
<a class="twitter-timeline" href="https://twitter.com/iGEMkhb" width="300" height="260" data-widget-id="499917303987720193" data-tweet-limit="">Tweets by @iGEMKBH</a></div>
 
−
</div>
 
−
</div>
 
  
 +
<!--iGEM stuff
 
<h4>Before you start: </h4>
 
<h4>Before you start: </h4>
 
<p> Please read the following pages:</p>
 
<p> Please read the following pages:</p>
Line 337: Line 215:
 
</ul>  
 
</ul>  
  
−
 
+
<br>
 
<h4>Inspiration</h4>
 
<h4>Inspiration</h4>
 
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
 
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
Line 354: Line 232:
  
 
<a href="https://2015.igem.org/Special:Upload">CLICK HERE TO UPLOAD FILES</a>
 
<a href="https://2015.igem.org/Special:Upload">CLICK HERE TO UPLOAD FILES</a>
−
 
+
-->
  
  

Latest revision as of 13:37, 31 August 2015