Team:Cornell/sandbox
From 2013.igem.org
(Difference between revisions)
Line 185: | Line 185: | ||
div.wrapper { | div.wrapper { | ||
- | margin: 0 204px; | + | //margin: 0 204px; |
height: 100%; | height: 100%; | ||
} | } | ||
Line 382: | Line 382: | ||
<div class="wrapper"> | <div class="wrapper"> | ||
<header> | <header> | ||
- | <h1> Parallax Design 1 </h1> | + | <h1> Parallax Design 1.2 </h1> |
</header> | </header> | ||
- | |||
- | + | <!-- NOTE: first-screen and second-last-screen have to be manually set if layout is changed --> | |
- | + | <!-- Screen 1 --> | |
- | + | <div id="first-screen" class="par-wrapper parallax" data-speed="50"> | |
- | + | <div data-speed="110" style="left: 22%; padding-top: 7%"> | |
- | + | <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> | ||
- | <div data-speed="100" style="left: | + | <!-- Screen 2 --> |
- | <h2> | + | <div id="second-last-screen" class="par-wrapper parallax" data-speed="50" style="top: -100%; left: 100%"> |
+ | <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> | ||
- | <div data-speed="100" style="left: 80%; padding-top: 500px"> | + | <!-- 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> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 04:09, 31 December 2013