Team:Cornell/sandbox

From 2013.igem.org

(Difference between revisions)
Line 374: Line 374:
<!-- content -->
<!-- content -->
<div class="wrapper">
<div class="wrapper">
 +
<header>
 +
<h1> Parallax Design 1 </h1>
 +
</header>
 +
<!-- 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>
<div>
-
<div id="first-screen" class="parallax layer1" data-speed="100">
+
<div id="first-screen" class="parallax layer1" data-speed="110" style="left: 12%; padding-top: 11%">
-
<h1> Parallax Design 1 </h1>
+
-
</div>
+
-
<div class="parallax layer1" data-speed="110" style="left: 10%; padding-top: 100px">
+
<h4> Inspired by this site ---> </h4>
<h4> Inspired by this site ---> </h4>
</div>
</div>
-
<div class="parallax layer1" data-speed="110" style="left: 60%; padding-top: 100px">
+
<div class="parallax layer1" data-speed="110" style="left: 40%; padding-top: 11%">
-
<a href="http://hotdot.pro/en/#" <h3> http://hotdot.pro/en/# </h3> </a>
+
<a href="http://hotdot.pro/en/#"> <h3> http://hotdot.pro/en/# </h3> </a>
</div>
</div>
-
<div class="parallax layer1" data-speed="110" style="left: 15%; padding-top: 130px">
+
<div class="parallax layer1" data-speed="150" style="left: 22%; padding-top: 14%">
-
(Yeah I stole the background)
+
<h6>(Yeah I stole the background) </h6>
</div>
</div>
-
<div class="parallax layer1" data-speed="140" style="left: 50%; padding-top: 300px">
+
<div class="parallax layer1" data-speed="110" style="left: 42%; padding-top: 25%">
<h2> Use the arrow keys to navigate </h2>
<h2> Use the arrow keys to navigate </h2>
</div>
</div>
</div>
</div>
-
<div>
 
<!-- Screen 2 -->
<!-- Screen 2 -->
<div>
<div>
-
<div id="second-last-screen" class="parallax layer1" data-speed="90">
+
<div id="second-last-screen" class="parallax layer1" data-speed="90" style="left: 108%;">
<h6> Whee! </h6>
<h6> Whee! </h6>
</div>
</div>

Revision as of 04:38, 30 December 2013

Parallax Test

Parallax Design 1

Inspired by this site --->

(Yeah I stole the background)

Use the arrow keys to navigate

Whee!

Yay! Parallax

(Nupur's awesome)

These pages replace sliders

And have pretty pictures that link to project pages

This means design will be really important