"
Team:Imperial College/Templates/Carousel
From 2013.igem.org
(Difference between revisions)
| (43 intermediate revisions not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| - | < | + | <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" type="text/css"> |
<script src="//cdn.jsdelivr.net/slidesjs/3.0.1/jquery.slides.min.js" type="text/javascript"></script> | <script src="//cdn.jsdelivr.net/slidesjs/3.0.1/jquery.slides.min.js" type="text/javascript"></script> | ||
<style> | <style> | ||
| - | #slides | + | #slides { |
| - | + | ||
| - | + | ||
color: #232525; | color: #232525; | ||
| - | display: none | + | display: none; |
| + | position: relative; | ||
| + | text-align: center; | ||
| + | margin-bottom: 1em; | ||
} | } | ||
#slides .slidesjs-navigation { | #slides .slidesjs-navigation { | ||
| - | + | cursor: pointer; | |
| + | -webkit-transition: all 300ms ease; | ||
| + | -moz-transition: all 300ms ease; | ||
| + | -ms-transition: all 300ms ease; | ||
| + | -o-transition: all 300ms ease; | ||
| + | transition: all 300ms ease; | ||
| + | } | ||
| + | |||
| + | #slides .slidesjs-navigation.slidesjs-previous, | ||
| + | #slides .slidesjs-navigation.slidesjs-next { | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | bottom: 0; | ||
| + | height: 100%; | ||
| + | line-height: 548px; | ||
| + | width: 100px; | ||
| + | opacity: 0.75; | ||
| + | padding: 0 10px 0 10px; | ||
| + | z-index: 1000; | ||
| + | background: transparent; | ||
| + | } | ||
| + | |||
| + | #slides .slidesjs-navigation.slidesjs-previous > i.icon-3x, | ||
| + | #slides .slidesjs-navigation.slidesjs-next > i.icon-3x { | ||
| + | line-height: 548px; | ||
| + | } | ||
| + | |||
| + | #slides .slidesjs-navigation:hover { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | #slides .slidesjs-navigation.slidesjs-previous { | ||
| + | left: 0; | ||
| + | text-align: left; | ||
| + | } | ||
| + | |||
| + | #slides .slidesjs-navigation.slidesjs-previous:hover { | ||
| + | background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ | ||
| + | background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ | ||
| + | background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ | ||
| + | background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ | ||
| + | background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ | ||
| + | background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */ | ||
| + | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */ | ||
| + | } | ||
| + | |||
| + | #slides .slidesjs-navigation.slidesjs-next { | ||
| + | right: 0; | ||
| + | text-align: right; | ||
| + | } | ||
| + | |||
| + | #slides .slidesjs-navigation.slidesjs-next:hover { | ||
| + | background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ | ||
| + | background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ | ||
| + | background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ | ||
| + | background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ | ||
| + | background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */ | ||
| + | background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */ | ||
| + | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ | ||
| + | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80ffffff',GradientType=1 ); /* IE6-9 */ | ||
| + | } | ||
| + | |||
| + | #slides .slidesjs-pagination { | ||
| + | float: none; | ||
| + | text-align: center; | ||
| + | display: inline-block; | ||
} | } | ||
| Line 31: | Line 97: | ||
#slides .slide span.text { | #slides .slide span.text { | ||
| + | text-align: left; | ||
color: #ffffff; | color: #ffffff; | ||
background: rgba(0, 0, 0, 0.75); | background: rgba(0, 0, 0, 0.75); | ||
| Line 36: | Line 103: | ||
padding: 10px; | padding: 10px; | ||
position: absolute; | position: absolute; | ||
| - | bottom: | + | bottom: 30px; |
| - | left: | + | left: 20px; |
max-width: 65%; | max-width: 65%; | ||
z-index: 1000; | z-index: 1000; | ||
| + | -webkit-transition: all 300ms ease; | ||
| + | -moz-transition: all 300ms ease; | ||
| + | -ms-transition: all 300ms ease; | ||
| + | -o-transition: all 300ms ease; | ||
| + | transition: all 300ms ease; | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | #slides .slide span.text:hover { | ||
| + | opacity: 0.25; | ||
} | } | ||
| Line 146: | Line 223: | ||
</style> | </style> | ||
| - | <script> | + | <script type="text/javascript"> |
$(function() { | $(function() { | ||
$('#slides').slidesjs({ | $('#slides').slidesjs({ | ||
| Line 152: | Line 229: | ||
height: 548, | height: 548, | ||
play: { | play: { | ||
| - | active: | + | active: false, |
auto: true, | auto: true, | ||
interval: 4000, | interval: 4000, | ||
| - | + | pauseOnHover: true, | |
| + | restartDelay: 10000 | ||
| + | }, | ||
| + | navigation: { | ||
| + | active: false | ||
} | } | ||
}); | }); | ||
| Line 163: | Line 244: | ||
<div class="container"> | <div class="container"> | ||
<div id="slides"> | <div id="slides"> | ||
| + | <div class="slidesjs-previous slidesjs-navigation"> | ||
| + | <i class="icon-chevron-left icon-3x"></i> | ||
| + | </div> | ||
| + | <div class="slidesjs-next slidesjs-navigation"> | ||
| + | <i class="icon-chevron-right icon-3x"></i> | ||
| + | </div> | ||
<!-- | <!-- | ||
<div class="slide"> | <div class="slide"> | ||
| Line 178: | Line 265: | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| - | <span class="background"><img src="https:// | + | <span class="background"><img src="https://static.igem.org/mediawiki/2013/0/0e/Jar_of_SRF.jpg" style="width: 100%; height: 100%"></span> |
<span class="text">Solid Recovered Fuel (SRF)</span> | <span class="text">Solid Recovered Fuel (SRF)</span> | ||
</div> | </div> | ||
| Line 186: | Line 273: | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| - | <span class="background"><img src="https:// | + | <span class="background"><img src="https://static.igem.org/mediawiki/2013/2/2b/PBS_Plus_Waste.jpg"></span> |
| - | <span class="text" | + | <span class="text"><b>(A)</b> SRF in PBS (phosphate buffered saline), a buffer. We can see from this experiment whether our bacteria can grow solely on the waste SRF. <b>(B)</b> Cells containing mCherry pigment grown in SRF <b>(A)</b> over 3 days, then streaked in a qualitative assay to check for growth. <b>(C)</b> mCherry cells were streaked again after 6 days growth in SRF. </span> |
| - | </div> | + | </div> |
| + | <div class="slide"> | ||
| + | <span class="background"><img src="https://static.igem.org/mediawiki/2013/9/9e/CombinedBacteriaArt.jpg"></span> | ||
| + | <span class="text">Cultured bacteria performing arts.</span> | ||
| + | </div> | ||
</div> | </div> | ||
| - | </div | + | </div> |
</div> | </div> | ||
</html> | </html> | ||
Latest revision as of 12:14, 30 September 2013
Europe's Newest Mountain, Mount Wasted
Production of the red pigment by stress induction. MG1655 were grown with LB media and sterile filtrated WCM for 48 hours.
Solid Recovered Fuel (SRF)
(A) WCM precursor material, this sterilised media made from LB and SRF was used to produce all WCM utilised. (B) Cells containing mCherry pigment grown in SRF (A) over 3 days, then streaked in a qualitative assay to check for growth. (C) mCherry cells were streaked again after 7 days growth in SRF.
(A) SRF in PBS (phosphate buffered saline), a buffer. We can see from this experiment whether our bacteria can grow solely on the waste SRF. (B) Cells containing mCherry pigment grown in SRF (A) over 3 days, then streaked in a qualitative assay to check for growth. (C) mCherry cells were streaked again after 6 days growth in SRF.
Cultured bacteria performing arts.
