| - | <html><div id="bored" class="step slide active present" data-x="-1000" data-y="-1500" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(-1000px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform-style: preserve-3d; "><q>Aren"t you just <b>bored</b> with all those slides-based presentations?</q></div><div class="step slide future" data-x="0" data-y="-1500" id="step-2" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(0px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform-style: preserve-3d; "><q>Don"t you think that presentations given <strong>in modern browsers</strong> shouldn"t <strong>copy the limits</strong> of "classic" slide decks?</q></div><div class="step slide future" data-x="1000" data-y="-1500" id="step-3" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(1000px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform-style: preserve-3d; "><q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q></div><div id="title" class="step future" data-x="0" data-y="0" data-scale="4" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(4); -webkit-transform-style: preserve-3d; "><span class="try">then you should try</span><h1>impress.js<sup>*</sup></h1><span class="footnote"><sup>*</sup> no rhyme intended</span></div><div id="its" class="step future" data-x="850" data-y="3000" data-rotate="90" data-scale="5" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(850px, 3000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg) scale(5); -webkit-transform-style: preserve-3d; "><p>It"s a <strong>presentation tool</strong> <br>inspired by the idea behind <a href="http://prezi.com/">prezi.com</a> <br>and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p></div><div id="big" class="step future" data-x="3500" data-y="2100" data-rotate="180" data-scale="6" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(3500px, 2100px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(180deg) scale(6); -webkit-transform-style: preserve-3d; "><p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p></div><div id="tiny" class="step future" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(2825px, 2325px, -3000px) rotateX(0deg) rotateY(0deg) rotateZ(300deg) scale(1); -webkit-transform-style: preserve-3d; "><p>and <b>tiny</b> ideas</p></div><div id="ing" class="step future" data-x="3500" data-y="-850" data-rotate="270" data-scale="6" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(3500px, -850px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(270deg) scale(6); -webkit-transform-style: preserve-3d; "><p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p></div><div id="imagination" class="step future" data-x="6700" data-y="-300" data-scale="6" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6700px, -300px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(6); -webkit-transform-style: preserve-3d; "><p>the only <b>limit</b> is your <b class="imagination">imagination</b></p></div><div id="source" class="step future" data-x="6300" data-y="2000" data-rotate="20" data-scale="4" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6300px, 2000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(20deg) scale(4); -webkit-transform-style: preserve-3d; "><p>want to know more?</p><q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q></div><div id="one-more-thing" class="step future" data-x="6000" data-y="4000" data-scale="2" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6000px, 4000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(2); -webkit-transform-style: preserve-3d; "><p>one more thing...</p></div><div id="its-in-3d" class="step future" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6200px, 4300px, -100px) rotateX(-40deg) rotateY(10deg) rotateZ(0deg) scale(2); -webkit-transform-style: preserve-3d; "><p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it"s</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p><span class="footnote">* beat that, prezi ;)</span></div><div id="overview" class="step future" data-x="3000" data-y="1500" data-scale="10" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(3000px, 1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(10); -webkit-transform-style: preserve-3d; "></div></div></div><div id="bored" class="step slide active present" data-x="-1000" data-y="-1500" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(-1000px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform-style: preserve-3d; "><q>Aren"t you just <b>bored</b> with all those slides-based presentations?</q></div><div class="step slide future" data-x="0" data-y="-1500" id="step-2" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(0px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform-style: preserve-3d; "> <q>Don"t you think that presentations given <strong>in modern browsers</strong> shouldn"t <strong>copy the limits</strong> of "classic" slide decks?</q></div><div class="step slide future" data-x="1000" data-y="-1500" id="step-3" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(1000px, -1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform-style: preserve-3d; "> <q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q></div> <div id="title" class="step future" data-x="0" data-y="0" data-scale="4" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(4); -webkit-transform-style: preserve-3d; "><span class="try">then you should try</span><h1>impress.js<sup>*</sup></h1><span class="footnote"><sup>*</sup> no rhyme intended</span></div><div id="its" class="step future" data-x="850" data-y="3000" data-rotate="90" data-scale="5" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(850px, 3000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(90deg) scale(5); -webkit-transform-style: preserve-3d; "><p>It"s a <strong>presentation tool</strong> <br>inspired by the idea behind <a href="http://prezi.com/">prezi.com</a> <br> and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p></div><div id="big" class="step future" data-x="3500" data-y="2100" data-rotate="180" data-scale="6" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(3500px, 2100px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(180deg) scale(6); -webkit-transform-style: preserve-3d; "><p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p> </div><div id="tiny" class="step future" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(2825px, 2325px, -3000px) rotateX(0deg) rotateY(0deg) rotateZ(300deg) scale(1); -webkit-transform-style: preserve-3d; "> <p>and <b>tiny</b> ideas</p> </div> <div id="ing" class="step future" data-x="3500" data-y="-850" data-rotate="270" data-scale="6" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(3500px, -850px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(270deg) scale(6); -webkit-transform-style: preserve-3d; "> <p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p> </div> <div id="imagination" class="step future" data-x="6700" data-y="-300" data-scale="6" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6700px, -300px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(6); -webkit-transform-style: preserve-3d; "> <p>the only <b>limit</b> is your <b class="imagination">imagination</b></p> </div> <div id="source" class="step future" data-x="6300" data-y="2000" data-rotate="20" data-scale="4" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6300px, 2000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(20deg) scale(4); -webkit-transform-style: preserve-3d; "> <p>want to know more?</p> <q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q> </div> <div id="one-more-thing" class="step future" data-x="6000" data-y="4000" data-scale="2" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6000px, 4000px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(2); -webkit-transform-style: preserve-3d; "> <p>one more thing...</p> </div><div id="its-in-3d" class="step future" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(6200px, 4300px, -100px) rotateX(-40deg) rotateY(10deg) rotateZ(0deg) scale(2); -webkit-transform-style: preserve-3d; "> <p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it"s</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p><span class="footnote">* beat that, prezi ;)</span></div> <div id="overview" class="step future" data-x="3000" data-y="1500" data-scale="10" style="position: absolute; -webkit-transform: translate(-50%, -50%) translate3d(3000px, 1500px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(10); -webkit-transform-style: preserve-3d; "></div></div></div></html>
| + | <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="impress" class="impress-not-supported"><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></div></html> |
"
