Team:TU-Eindhoven/Templates/boxes

From 2012.igem.org

(Difference between revisions)

Latest revision as of 20:28, 15 July 2012

Abstract

Test link.

Multimedia

Test video link and a usual link.

Tools

A link in the right box.

@@ Line 1: / Line 1: @@
 <html>
-<div id="leftbox" style="float:left; height:200px;  width:242px;" class="tophome">
+<!-- Boxes -start -->
+<div id="boxes" style="padding-bottom: 10px; overflow: auto;">
+<div id="leftbox" style="float:left;  width:242px;" class="tophome">
 <div id="lefttop" style="background:#96d446; background-image:url('https://static.igem.org/mediawiki/2010/a/ad/Cam-Gradient-Overlay.png');" class="secheader">Abstract</div>
 <div id="leftcontent" style="background:-webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f8f8f8));
 background: -moz-linear-gradient(top, #f2f2f2, #f8f8f8); color:#333333; height:150px;">
-<p style="line-height:140%; padding-left:10px; padding-top:10px; padding-right:10px;text-align:justify; font-size:90%;"> We placed genes from <a style="color:#6bbe00 !important" href="https://2010.igem.org/Team:Cambridge/Bioluminescence">fireflies</a> and bioluminescent <a style="color:#6bbe00 !important"  href="https://2010.igem.org/Team:Cambridge/Bioluminescence/Bacterial_Luciferases">bacteria</a> into E.coli. Codon optimisation and single amino acid mutagenesis allowed us to generate bright light output in a range of different colours. Future applications include  and quantitative <a style="color:#6bbe00 !important" href="https://2010.igem.org/Team:Cambridge/Tools/microMeasure">biosensors</a> and biological <a style="color:#6bbe00 !important" href="https://2010.igem.org/Team:Cambridge/Tools/Lighting">alternatives</a> to conventional lighting.</p>
+<p style="line-height:140%; padding-left:10px; padding-top:10px; padding-right:10px;text-align:justify; font-size:90%;">
+<!-- Left box content -start -->
+Test <a style="color:#6bbe00 !important" href="/Team:TU-Eindhoven">link</a>.
+<!-- Left box content -end -->
+</p>
 </div>
 </div>
-<div id="cbox" style="float:left; height:200px;  width:241px; margin-left:5px;" class="tophome">
+<div id="cbox" style="float:left; width:241px; margin-left:5px;" class="tophome">
 <div id="ctop" style="background:#fad72a;background-image:url('https://static.igem.org/mediawiki/2010/a/ad/Cam-Gradient-Overlay.png')" class="secheader">Multimedia</div>
 <div id="ccontent" style="background:-webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f8f8f8));
 background: -moz-linear-gradient(top, #f2f2f2, #f8f8f8); color:#333333; height:150px;">
-<p style="line-height:140%; padding-left:10px; padding-top:10px; padding-right:10px;text-align:justify; font-size:90%;">If you want a break from hard-core science, check out our Gibson Assembly  <a  style="color:#d9b400 !important" onclick="displayGibson('http://www.youtube.com/v/WCWjJFU1be8?fs=1&amp;hl=en_GB'); return false;" href="http://www.youtube.com/watch?v=WCWjJFU1be8">music video</a>.<br /><br />You can also see view videos of our <a style="color:#d9b400 !important" onclick="displayGibson('http://www.youtube.com/v/tUFscEVK5Ks?fs=1&amp;hl=en_GB'); return false;" href="http://www.youtube.com/watch?v=WCWjJFU1be8">bacterial bubble lamp</a> and <a style="color:#d9b400 !important" onclick="displayGibson('http://www.cambridgeigem.org/video.php'); return false;" href="http://www.cambridgeigem.org/video.php?nojs=true">project overview</a>.
+<p style="line-height:140%; padding-left:10px; padding-top:10px; padding-right:10px;text-align:justify; font-size:90%;">
+<!-- Middle box content -start -->
+Test <a style="color:#d9b400 !important" onclick="displayVideo('http://www.youtube.com/watch?v=GQYyTT-vQmM?fs=1'); return false;" href="http://www.youtube.com/watch?v=GQYyTT-vQmM">video link</a> and a <a style="color:#d9b400 !important" href="http://tue.nl">usual link</a>.
+<!-- Middle box content -end -->
+</p>
+</div>
+</div>
+<div id="rightbox" style="float:left; margin-left:5px; width:242px;" class="tophome">
+<div id="rtop" style="background:#fb5c2b;background-image:url('https://static.igem.org/mediawiki/2010/a/ad/Cam-Gradient-Overlay.png')" class="secheader">Tools</div>
+<div id="rcontent" style="background:-webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f8f8f8));
+background: -moz-linear-gradient(top, #f2f2f2, #f8f8f8); color:#333333; height:150px; margin-top:5px; position:relative;">
+<p style="line-height:140%; padding-left:10px; padding-top:10px; padding-right:10px;text-align:justify; font-size:90%;">
+<!-- Right box content -start -->
+A <a style="color:#e53500 !important;" href="https://2012.igem.org">link in the right box.</a>
+<!-- Right box content -end -->
+</p>
+</div>
+</div>
+<!-- Overlay Youtube video script -start -->
 <script>
 var dontclose=false;
-function displayGibson(youTubeURL){
+function displayVideo(youTubeURL){
 var newDiv = document.createElement('div');
 newDiv.setAttribute('id',"GibsonVidOverlay");
@@ Line 35: / Line 61: @@
 }
 </script>
-</div>
+<!-- Overlay Youtube video script -end -->
-</div>
-<div id="rightbox" style="float:left;  height:200px; margin-left:5px; width:242px;" class="tophome">
-<div id="rtop" style="background:#fb5c2b;background-image:url('https://static.igem.org/mediawiki/2010/a/ad/Cam-Gradient-Overlay.png')" class="secheader">Tools</div>
-<div id="rcontent" style="background:-webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f8f8f8));
-background: -moz-linear-gradient(top, #f2f2f2, #f8f8f8); color:#333333; height:150px; margin-top:5px; position:relative;">
-<div style="position:relative; top:10px;">
-<a href="http://www.gibthon.org" id="leftbox" style="background:url('https://static.igem.org/mediawiki/2010/5/53/Cambridge-Gibthon.png'); position:absolute; width:120px; height:100px; left:0;top:0; background-repeat:no-repeat; display:block;text-align:center; padding-top:70px; background-position: center top; color:#e53500 !important;" >
-Gibson<br />Assembly
-</a>
-<a href="http://www.gibthon.org/ligate.html" id="rightbox" style="background:url('https://static.igem.org/mediawiki/2010/b/b1/Cambridge-Flask.png'); position:absolute; width:120px; height:100px; left:120px; text-align:center;top:0; background-repeat:no-repeat;display:block; padding-top:70px; background-position: center top; color:#e53500 !important;" />
-Ligation<br />Calculator
-</a>
-</div>
-</div>
 </div>
+<!-- Boxes -end -->
 </html>