|
|
| (77 intermediate revisions by 2 users not shown) |
| Line 11: |
Line 11: |
| | | | |
| | #mainPart{ | | #mainPart{ |
| − | float:left;
| + | float: left; |
| − | margin:10px;
| + | margin:0px -200px 0px 0px; |
| | height:auto; | | height:auto; |
| − | width:800px; | + | width:900px; |
| | border: none; | | border: none; |
| | background:white; | | background:white; |
| 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 {
| + | .flip-container { |
| − | margin: 0; | + | float: left; |
| − | padding: 0; | + | position: relative; |
| | + | perspective: 1000px; |
| | + | -webkit-perspective: 1000px; |
| | } | | } |
| | | | |
| − | .bx-wrapper { | + | .flip-container, |
| − | position: relative;
| + | .flip-container .front-side, |
| − | margin: 0 0;
| + | .flip-container .back-side { |
| − | padding: 0;
| + | width: 270px; |
| − | *zoom: 1;
| + | height: 400px; |
| − | left:1px;
| + | margin: 0px 2px 0px 2px; |
| | } | | } |
| | | | |
| − | .bx-wrapper .bxslider img { | + | .flip-container .front-side, |
| − | width: 480px;
| + | .flip-container .back-side { |
| − | height: 300px;
| + | |
| − | display: block;
| + | |
| − | display: inline;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bx-wrapper .bxslider li { | + | |
| − | background: #FFFFFF;
| + | |
| − | text-align: center;
| + | |
| − | vertical-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bx-wrapper .bxgallery img {
| + | |
| − | width: 480px;
| + | |
| − | 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: 480px;
| + | |
| | } | | } |
| | | | |
| − | .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%;
| + | |
| − | width: 480px;
| + | |
| − | 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: 20px;
| + | |
| − | background: url('https://static.igem.org/mediawiki/2013/1/14/TUM13_slider_controls.png') no-repeat 0 -32px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bx-wrapper .bx-next {
| + | |
| − | 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 {
| + | |
| − | 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: 480px;
| + | |
| − | margin: 0px 10px 0px 150px;
| + | |
| − | }
| + | |
| − | /* Slideshow end */
| + | |
| − | | + | |
| − | /*-------------------------------------*/
| + | |
| − | /* Two parts */
| + | |
| − | /*-------------------------------------*/
| + | |
| − | | + | |
| − | #twoParts{
| + | |
| − | float:left;
| + | |
| − | margin:0px;
| + | |
| | height:auto; | | height:auto; |
| − | width:920px; | + | width:900px; |
| | border: none; | | border: none; |
| | background:white; | | background:white; |
| | + | display:inline-block; |
| | + | clear: center; |
| | } | | } |
| − | .one{ | + | .logo img{ |
| − | margin: 10px 0px;
| + | margin: 10px 5px 10px 25px; |
| − | padding:10px 10px 10px 10px;
| + | |
| − | height:auto;
| + | |
| − | width:400px;
| + | |
| − | float:left;
| + | |
| − | }
| + | |
| − | .two{
| + | |
| − | margin: 10px 0px;
| + | |
| − | padding:10px 10px 10px 10px;
| + | |
| − | height:auto;
| + | |
| − | width:400px;
| + | |
| − | float:right;
| + | |
| − | }
| + | |
| − | #twoParts h1{
| + | |
| − | font-family: "Lucida sans unicode", sans-serif;
| + | |
| − | font-size: 20px;
| + | |
| | } | | } |
| | | | |
| − | .one p{ | + | .logo img:hover{ |
| − | font-family:'Lato', sans-serif; | + | opacity: 0.7; |
| − | font-size:10.5pt;
| + | |
| − | line-height:18px;
| + | |
| − | text-align:justify;
| + | |
| | } | | } |
| | | | |
| − | /* Two parts end */
| |
| | | | |
| − | /* Logo */ | + | /* E-mail */ |
| − | .logo img{
| + | #footer{ |
| − | margin: 20px 10px 20px 50px;
| + | width: 814px; |
| − | box-shadow: 0px 0px 5px #888888;
| + | bottom:0; |
| − | -webkit-box-shadow: 0px 0px 5px #888888; | + | |
| − | -moz-box-shadow: 0px 0px 5px #888888; | + | |
| | } | | } |
| | | | |
| | </style> | | </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> | | </head> |
| | | | |
| | <!--Top front page--> | | <!--Top front page--> |
| − | <div id="twoParts">
| |
| | | | |
| − | <div class="one">
| |
| − | <h1>Project SpaceMoss</h1>
| |
| − |
| |
| − | <p>SpaceMoss is 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.
| |
| − | <br><br>
| |
| − | Our webpage is under construction. However, you can already get to know <a href="https://2015.igem.org/team:UNIK_Copenhagen/Team">the team</a> and <a href="https://2015.igem.org/team:UNIK_Copenhagen/Description">our project</a>. Please have a look. More information, photos etc. will come as our work proceeds so stay close!
| |
| − | <br><br>
| |
| − | SpaceMoss is made up of an interdisciplinary team of biologists, physicists, and business students.
| |
| − | <a href="https://2015.igem.org/team:UNIK_Copenhagen/Team">Meet the team!</a></p><br>
| |
| − | </div>
| |
| | | | |
| | | | |
| − | | + | <div class="flip-container"> |
| − | | + | |
| − | <a class="twitter-timeline" href="https://twitter.com/SpaceMossUCPH" width="300" height="260" data-widget-id="499917303987720193" data-tweet-limit="">Tweets by @SpaceMossUCPH</a></div>
| + | <img src="https://static.igem.org/mediawiki/2015/e/e0/UNIK_Copenhagen_SpaceMoss_logo_small.png" width=65%></div> |
| − | </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> |
| | | | |
| − | <div class="slideshowholder"> | + | <div class="flip-container"> |
| − | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | + | <div class="front-side"> |
| − | <script src="/js/jquery.bxslider.min.js"></script> | + | <img src="https://static.igem.org/mediawiki/2015/a/af/IGEM_logo_small.png" width=65%></div> |
| − | <script src="https://2015.igem.org/Team:UNIK_Copenhagen/imageslide.js?action=raw&ctype=text/javascript=edit" type="text/javascript"></script> | + | <div class="back-side"> |
| | + | <img src="https://static.igem.org/mediawiki/2015/a/af/IGEM_logo_small.png" width=65%> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | <ul class="bxslider"> | + | <div class="flip-container" style="margin: 0px 0px 0px 8px"> |
| − | <li><img src="https://static.igem.org/mediawiki/2015/d/df/UNIK_Copenhagen_Team_picture_310315.jpg" width="400px"></li>
| + | <div class="front-side"> |
| − | <li><img src="https://static.igem.org/mediawiki/2015/ e/ e2/ UNIK_Copenhagen_Team_picture2_310315. jpg" width= "400px"></ li> | + | <img src="https://static.igem.org/mediawiki/2015/ 2/ 22/ UNIK_Copenhagen_Moss_in_hand_small. png" width= 65%></ div> |
| − | < li><img src="https://static.igem.org/mediawiki/2015/ 1/ 15/ WP_20150513_001. jpg" width= "400px"></li> | + | <div class="back-side"> |
| − | </ul> | + | <img src="https://static.igem.org/mediawiki/2015/ 2/ 22/ UNIK_Copenhagen_Moss_in_hand_small. png" width= 65%> |
| | + | </div> |
| | </div> | | </div> |
| | | | |
| − | <div id="mainPart"> | + | |
| − | <br> | + | <img src="https://static.igem.org/mediawiki/2015/e/eb/UNIK_Copenhagen_Homepage_box1.png" width=266px style="margin: -356px 0px 0px 0px"> |
| − | <h2><font color="#DF3A01">Red</font> Lab and <font color="green">Green</font> Lab</h2>
| + | </div> |
| | | | |
| − | <h5><font color="#DF3A01">Red</font> Lab</h5> | + | <div class="container"> |
| − | In the 'Red Lab', the team will expose the moss to harsh martian conditions, including extreme temperature differences, fake martian soil, radiation exposure, pressure and CO2 concentrations. <a href="https://2015.igem.org/team:UNIK_Copenhagen/Red_Lab">More about Red Lab</a>
| + | <img src="https://static.igem.org/mediawiki/2015/2/2f/UNIK_Copenhagen_Homepage_box2.png" width=266px style="margin: -356px 0px 0px 0px"> |
| | + | </div> |
| | | | |
| − | <br> | + | <div class="container"> |
| | + | <img src="https://static.igem.org/mediawiki/2015/a/a2/UNIK_Copenhagen_Homepage_box3.png" width=266px style="margin: -356px 0px 0px 0px"> |
| | + | </div> |
| | | | |
| − | <h5><font color="green">Green</font> Lab</h5>
| |
| − | <p>
| |
| − | The 'Green Lab' is working on modifying the moss to survive the extreme temperatures, and then also producing useful compounds. We will insert an 'anti-freeze' gene from a ringworm. This amazing feature works by attaching onto the ends of the ice crystals forming in the cell, slowing down the rate of freezing.
| |
| − | <br><br />
| |
| − | Then, we will attempt to produce resveratrol in the moss, demonstrating the potential of using the hardy moss to produce compounds, such as pharmaceuticals which have shelf lives shorter than the trip between the planets. <a href="https://2015.igem.org/team:UNIK_Copenhagen/Green_Lab">More about Green Lab</a>
| |
| | | | |
| − | <br><br></div> | + | <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> |
| | | | |
| | | | |
| − | <div class="logo"> | + | <div id="footer" style="bottom:0;"> |
| − | <img src="https://static.igem.org/mediawiki/2015/e/e3/UNIK_Copenhagen_TychoBio_logo.png" width=200px>
| + | <hr><br> |
| − | <img src="https://static.igem.org/mediawiki/2015/3/30/UNIK_Copenhagen_Ku_logo.jpg" width=200px> | + | <p>SpaceMoss <br> Team UNIK Copenhagen <br> <b>e-mail:</b> igemcph@gmail.com<p> |
| − | <img src="https://static.igem.org/mediawiki/2015/c/cc/UNIK_Copenhagen_IDT-Logo.jpg" width=200px> | + | </div> |
| | </div> | | </div> |
| | | | |
| Line 420: |
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> |
