Team:UCLondon/content/slide1

From 2012e.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html lang="en"><style>.step {width: 100%; padding: 40px; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box;box-sizing:        border-box; font-family: "PT Serif", georgia, serif; font-size: 48px; line-height: 1.5;} .step {-webkit-transition: opacity 1s;-moz-transition:   opacity 1s;-ms-transition:     opacity 1s;-o-transition:      opacity 1s;transition:        opacity 1s;}.slide { display: block;width: 900px; height: 700px;padding: 40px 60px;border-radius: 10px;background-color: white;box-shadow: 0 2px 6px rgba(0, 0, 0, .1); border: 1px solid rgba(0, 0, 0, .3);font-family: "Open Sans", Arial, sans-serif;color: rgb(102, 102, 102); text-shadow: 0 2px 2px rgba(0, 0, 0, .1);font-size: 30px; line-height: 36px;letter-spacing: -1px; }</style><div id="bored" class="step slide" data-x="-1000" data-y="-1500"><q>72,000 men & 3 women had <b>one idea</b></q></div><div class="step slide" data-x="0" data-y="-1500"><q>To make a codon optimisation utility which was easy to use.</q></div><div class="step slide" data-x="1000" data-y="-1500"><q>Coming soon..</q></div></html>
+
<html lang="en"><style>#impress { width: 90%; height: 600px; margin:auto; font-size:20pt; font-family:Helvetica;}#impress .step{ text-align:center; width:1024px; }#impress #slide7{ width:400px; } #impress #slide8{ width:400px; } #impress #slide9{ width:400px; }</style><div id="impress"><div id="start" class="step" > <q>Demo Presentation</q> <p>Creating Stunning Visualizations</p> <p>Impress.js </p> <p class="hint_text">Press <em>Spacebar</em> or Tab To Get Started</p> </div><div id="slide1" class="step" data-x="-1200"> <p>This Slide Moves From Left To Right</p> <p>Relax the real presentation will look much better than this</P> </div><div id="slide3" class="step" data-x="2200" data-y="500"> <p>This Slide Moves From Right To Left and Bottom To Top</p> </div><div id="slide4" class="step" data-x="2200" data-y="-500"> <p>This Slide Moves Top To Bottom</p> </div><div id="slide5" class="step" data-x="3200" data-rotate="150"> <p>This Slide Rotates Clockwise Around z-axis</p> </div><div id="slide6" class="step" data-x="6200" data-scale="3"> <p>This Slide Scales 3 Times</p> </div><div id="slide7" class="step" data-x="4200" data-y="1500" data-z="1500"> <p>Away</p> </div><div id="slide8" class="step" data-x="4900" data-y="1500" data-z="100"> <p>Towards</p> </div><div id="slide9" class="step" data-x="5600" data-y="1500" data-z="-1500"> <p>Futher Towards</p> </div><div id="slide10" class="step" data-x="6600" data-y="3000" data-scale="10"> <p>Visualization Slide Positions</p> </div></div></html>

Revision as of 00:46, 20 October 2012

Demo Presentation

Creating Stunning Visualizations

Impress.js

Press Spacebar or Tab To Get Started

This Slide Moves From Left To Right

Relax the real presentation will look much better than this

This Slide Moves From Right To Left and Bottom To Top

This Slide Moves Top To Bottom

This Slide Rotates Clockwise Around z-axis

This Slide Scales 3 Times

Away

Towards

Futher Towards

Visualization Slide Positions

Retrieved from "http://2012e.igem.org/wiki/index.php/Team:UCLondon/content/slide1"