Team:Cornell/sandbox

From 2013.igem.org

(Difference between revisions)
Line 384: Line 384:
<h1> Parallax Design 1 </h1>
<h1> Parallax Design 1 </h1>
</header>
</header>
 +
</div>
-
<!-- NOTE: first-screen and second-last-screen have to be manually set if layout is changed -->
+
<!-- NOTE: first-screen and second-last-screen have to be manually set if layout is changed -->
-
<!-- Screen 1 -->
+
<!-- Screen 1 -->
-
<div id="first-screen" class="par-wrapper parallax" data-speed="50">
+
<div id="first-screen" class="par-wrapper parallax" data-speed="50">
-
<div data-speed="110" style="left: 22%; padding-top: 7%">
+
<div data-speed="110" style="left: 22%; padding-top: 7%">
-
<h4> Inspired by this site ---> </h4>
+
<h4> Inspired by this site ---> </h4>
-
</div>
+
-
<div data-speed="110" style="left: 40%; padding-top: 6%">
+
-
<a href="http://hotdot.pro/en/#" target="_blank"> <h1 style="color: #871414"> http://hotdot.pro/en/# </h1> </a>
+
-
</div>
+
-
<div data-speed="115" style="left: 24%; padding-top: 10%">
+
-
<h6>(Yeah I stole the background) </h6>
+
-
</div>
+
-
<div data-speed="110" style="left: 58%; padding-top: 26%">
+
-
<h2> Use the arrow keys to navigate --> </h2>
+
-
</div>
+
</div>
</div>
-
<!-- Screen 2 -->
+
<div data-speed="110" style="left: 40%; padding-top: 6%">
-
<div id="second-last-screen" class="par-wrapper parallax" data-speed="50" style="top: -100%; left: 100%">
+
<a href="http://hotdot.pro/en/#" target="_blank"> <h1 style="color: #871414"> http://hotdot.pro/en/# </h1> </a>
-
<div data-speed="100" style="left: 230%; padding-top: 4%;">
+
-
<h2> These pages can replace sliders </h2>
+
-
</div>
+
-
<div data-speed="130" style="left: 40%; padding-top: 10%;">
+
-
<h4> And have pretty pictures that link to project pages </h2>
+
-
</div>
+
-
<div data-speed="125" style="left: 34%; padding-top: 15%;">
+
-
<h5> This means design will be really important </h2>
+
-
</div>
+
-
<div data-speed="125" style="left: 34%; padding-top: 45%;">
+
-
<h5> It also takes a ton of time to set the page up cause I have to position everything manually </h2>
+
-
</div>
+
</div>
</div>
-
<!-- Screen 3 -->
+
<div data-speed="115" style="left: 24%; padding-top: 10%">
-
<div class="par-wrapper parallax" data-speed="50" style="top: -200%; left: 200%">
+
<h6>(Yeah I stole the background) </h6>
-
<div data-speed="90" style="left: 8%;">
+
</div>
-
<h6> Whee! </h6>
+
<div data-speed="110" style="left: 58%; padding-top: 26%">
-
</div>
+
<h2> Use the arrow keys to navigate --> </h2>
-
<div data-speed="100" style="left: 50%; padding-top: 100px">
+
</div>
-
<h2> Yay! Parallax </h2>
+
</div>
-
</div>
+
<!-- Screen 2 -->
-
<div data-speed="100" style="left: 80%; padding-top: 500px">
+
<div id="second-last-screen" class="par-wrapper parallax" data-speed="50" style="top: -100%; left: 100%">
-
<h2> (Nupur's awesome) </h2>
+
<div data-speed="100" style="left: 230%; padding-top: 4%;">
-
</div>
+
<h2> These pages can replace sliders </h2>
 +
</div>
 +
<div data-speed="130" style="left: 40%; padding-top: 10%;">
 +
<h4> And have pretty pictures that link to project pages </h2>
 +
</div>
 +
<div data-speed="125" style="left: 34%; padding-top: 15%;">
 +
<h5> This means design will be really important </h2>
 +
</div>
 +
<div data-speed="125" style="left: 34%; padding-top: 45%;">
 +
<h5> It also takes a ton of time to set the page up cause I have to position everything manually </h2>
 +
</div>
 +
</div>
 +
<!-- Screen 3 -->
 +
<div class="par-wrapper parallax" data-speed="50" style="top: -200%; left: 200%">
 +
<div data-speed="90" style="left: 8%;">
 +
<h6> Whee! </h6>
 +
</div>
 +
<div data-speed="100" style="left: 50%; padding-top: 100px">
 +
<h2> Yay! Parallax </h2>
 +
</div>
 +
<div data-speed="100" style="left: 80%; padding-top: 500px">
 +
<h2> (Nupur's awesome) </h2>
</div>
</div>
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 04:07, 31 December 2013

Parallax Test

Parallax Design 1

Inspired by this site --->

http://hotdot.pro/en/#

(Yeah I stole the background)

Use the arrow keys to navigate -->

These pages can replace sliders

And have pretty pictures that link to project pages

This means design will be really important
It also takes a ton of time to set the page up cause I have to position everything manually
Whee!

Yay! Parallax

(Nupur's awesome)

Retrieved from "http://2013.igem.org/Team:Cornell/sandbox"