Team:Cornell/sandbox/design1
From 2013.igem.org
(Difference between revisions)
(Created page with "<html> <head> <!-- Inspired by http://hotdot.pro/en/# --> <title> Parallax Test </title> <meta name="Description" content="2014 Parallax Down" /> <meta name="Keywords" ...") |
|||
Line 185: | Line 185: | ||
div.wrapper { | div.wrapper { | ||
margin: 0 204px; | margin: 0 204px; | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 384: | Line 380: | ||
<!-- 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="parallax layer1" data-speed="110" style="left: 22%; padding-top: 7%"> | |
- | + | <h4> Inspired by this site ---> </h4> | |
- | + | </div> | |
- | + | <div class="parallax layer1" 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 class="parallax layer1" data-speed="115" style="left: 24%; padding-top: 10%"> | |
- | + | <h6>(Yeah I stole the background) </h6> | |
- | + | </div> | |
- | + | <div class="parallax layer1" data-speed="110" style="left: 58%; padding-top: 26%"> | |
- | + | <h2> Use the arrow keys to navigate --> </h2> | |
- | + | ||
- | + | ||
</div> | </div> | ||
<!-- Screen 2 --> | <!-- Screen 2 --> | ||
- | + | <div id="second-last-screen" class="parallax layer1" data-speed="100" style="left: 230%; padding-top: 4%;"> | |
- | + | <h2> These pages replace sliders </h2> | |
- | + | </div> | |
- | + | <div class="parallax layer1" data-speed="130" style="left: 240%; padding-top: 10%;"> | |
- | + | <h4> And have pretty pictures that link to project pages </h2> | |
- | + | </div> | |
- | + | <div class="parallax layer1" data-speed="125" style="left: 234%; padding-top: 15%;"> | |
- | + | <h5> This means design will be really important </h2> | |
- | + | ||
- | + | ||
</div> | </div> | ||
<!-- Screen 3 --> | <!-- Screen 3 --> | ||
- | + | <div class="parallax layer1" data-speed="90" style="left: 108%;"> | |
- | + | <h6> Whee! </h6> | |
- | + | </div> | |
- | + | <div class="parallax layer1" data-speed="100" style="left: 150%; padding-top: 100px"> | |
- | + | <h2> Yay! Parallax </h2> | |
- | + | </div> | |
- | + | <div class="parallax layer1" data-speed="100" style="left: 180%; padding-top: 500px"> | |
- | + | <h2> (Nupur's awesome) </h2> | |
- | + | ||
- | + | ||
</div> | </div> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 02:30, 31 December 2013