Difference between revisions of "Team:UNIK Copenhagen"

Line 20: Line 20:
  
  
−
/*---------------------------*/
 
−
/*        Slideshow        */
 
−
/*---------------------------*/
 
−
/**
 
−
* 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
 
−
*/
 
  
 +
/*  Illustration  */
  
−
/** RESET AND LAYOUT
+
div.container {
−
===================================*/
+
       display:inline-block;
−
ul.bxslider {
+
      clear: left;
−
       margin: 0;
+
      width:270px;
−
}
+
margin: -1000px 2px 0px 2px;
−
 
+
    }
  
−
div#wikicontent ul.bxslider, div#wikicontent ul.bxgallery {
+
.homeillustration img:hover{
−
    margin: 0;
+
opacity: 0.7;
−
    padding: 0;
+
 
}
 
}
  
−
.bx-wrapper {
+
.flip-container {
−
position: relative;
+
    float: left;
−
margin: 0 0;
+
    position: relative;
−
padding: 0;
+
    perspective: 1000px;
−
*zoom: 1;
+
    -webkit-perspective: 1000px;  
−
left:1px;
+
 
}
 
}
  
−
.bx-wrapper .bxslider img {
+
.flip-container,
−
width: 400px;
+
.flip-container .front-side,
−
height: 270px;
+
.flip-container .back-side {
−
display: block;
+
    width: 270px;
−
        display: inline;
+
    height: 270px;
 +
margin: 0px 2px 0px 2px;
 
}
 
}
  
−
.bx-wrapper .bxslider li {
+
.flip-container .front-side,
−
        background: #FFFFFF;
+
.flip-container .back-side {
−
        text-align: center;
+
−
        vertical-align: center;
+
−
}
+
−
 
+
−
.bx-wrapper .bxgallery img {
+
−
width: 400px;
+
−
height: 270px;
+
−
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: 600px;
+
 
}
 
}
  
−
.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 {
 
−
min-height: 50px;
 
−
background: url('https://static.igem.org/mediawiki/2013/8/8d/TUM13_slider_bx_loader.gif') center center no-repeat #fff;
 
−
height: 100%;
 
−
width: 400px;
 
−
position: absolute;
 
−
top: 0;
 
−
left: 0;
 
−
z-index: 2000;
 
−
}
 
−
 
−
/* PAGER */
 
−
 
−
.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,
 
−
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
 
−
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,
 
−
.bx-wrapper .bx-pager.bx-default-pager a.active {
 
−
background: #000;
 
−
}
 
−
 
−
/* DIRECTION CONTROLS (NEXT / PREV) */
 
−
 
−
.bx-wrapper .bx-prev {
 
−
left: 18px;
 
−
background: url('https://static.igem.org/mediawiki/2013/1/14/TUM13_slider_controls.png') no-repeat 0 -32px;
 
−
}
 
−
 
−
.bx-wrapper .bx-next {
 
−
right: 18px;
 
−
background: url('https://static.igem.org/mediawiki/2013/1/14/TUM13_slider_controls.png') no-repeat -43px -32px;
 
−
}
 
−
 
−
.bx-wrapper .bx-prev:hover {
 
−
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 {
 
−
display: none;
 
−
}
 
−
 
−
/* AUTO CONTROLS (START / STOP) */
 
−
 
−
.bx-wrapper .bx-controls-auto {
 
−
text-align: center;
 
−
}
 
−
 
−
.bx-wrapper .bx-controls-auto .bx-start {
 
−
display: block;
 
−
text-indent: -9999px;
 
−
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,
 
−
.bx-wrapper .bx-controls-auto .bx-start.active {
 
−
background-position: -86px 0;
 
−
}
 
−
 
−
.bx-wrapper .bx-controls-auto .bx-stop {
 
−
display: block;
 
−
text-indent: -9999px;
 
−
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 */
 
−
 
−
.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 {
 
−
right: 20px;
 
−
width: 35px;
 
−
}
 
−
 
−
/* 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 box */
 
−
.slideshowholder{
 
−
float: left;
 
−
width: 400px;
 
−
margin: 0px 10px 0px 10px;
 
−
}
 
−
/*  Slideshow end  */
 
−
 
−
/*-------------------------------------*/
 
−
/*        Two parts        */
 
−
/*-------------------------------------*/
 
−
 
−
#twoParts{
 
−
position: relative;
 
−
margin:0px;
 
−
height:auto;
 
−
width:814px;
 
−
        border: none;
 
−
        background:white;
 
−
}
 
−
.one{
 
−
margin: 5px 0px;
 
−
padding:0px;
 
−
height:auto;
 
−
width:380px;
 
−
float:left;
 
−
}
 
−
.two{
 
−
margin: 5px 0px;
 
−
padding:0px;
 
−
height:auto;
 
−
width:414px;
 
−
float:right;
 
−
}
 
−
#twoParts h1{
 
−
font-family: "Lucida sans unicode", sans-serif;
 
−
font-size: 20px;
 
−
}
 
−
 
−
.one p{
 
−
font-size:10.5pt;
 
−
line-height:18px;
 
−
text-align:justify;
 
−
}
 
−
 
−
/* Two parts end */
 
  
  
Line 335: Line 115:
 
<!--Top front page-->
 
<!--Top front page-->
  
−
<img src="https://static.igem.org/mediawiki/2015/0/0c/UNIK_Copenhagen_Home_Page_Illustration.png" width=800px style="margin:-30px 7px 0px 7px">
+
 
 +
 
 +
<div class="flip-container">
 +
  <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>
 +
 
 +
<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>
 +
 
 +
<div class="flip-container" style="margin: 0px 0px 0px 8px">
 +
  <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>
 +
 
 +
<div class="container">
 +
<img src="https://static.igem.org/mediawiki/2015/e/eb/UNIK_Copenhagen_Homepage_box1.png" width=266px style="margin: -100px 0px 0px 0px">
 +
</div>
 +
 
 +
<div class="container">
 +
<img src="https://static.igem.org/mediawiki/2015/2/2f/UNIK_Copenhagen_Homepage_box2.png" width=266px style="margin: -100px 0px 0px 0px">
 +
</div>
 +
 
 +
<div class="container">
 +
<img src="https://static.igem.org/mediawiki/2015/a/a2/UNIK_Copenhagen_Homepage_box3.png" width=266px style="margin: -100px 0px 0px 0px">
 +
</div>
 +
 
  
 
<div id=logo>
 
<div id=logo>

Revision as of 12:22, 31 August 2015