|
|
(23 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | {{Template:Team:Virginia:Test}}
| |
- |
| |
| <html> | | <html> |
| <head> | | <head> |
- |
| + | <script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script> |
- | <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
| + | <script type="text/javascript" src="https://2013.igem.org/Team:UNITN-Trento/JS/Library/modernizr?action=raw&ctype=text/javascript"></script> |
- |
| + | </head> |
- |
| + | <body> |
- | <script type='text/javascript' src="http://www.turnjs.com/lib/turn.min.js"></script>
| + | |
- |
| + | |
- |
| + | |
- | <style type='text/css'>
| + | |
| | | |
| + | <div class="flipbook-viewport"> |
| + | <div class="container"> |
| + | <div class="flipbook"> |
| + | <div style="background-image:url(pages/1.jpg)"></div> |
| + | <div style="background-image:url(pages/2.jpg)"></div> |
| + | </div> |
| + | </div> |
| + | </div> |
| | | |
- | header{
| |
- | background: url("http://4.bp.blogspot.com/-mTlRmTTLCX4/Ti1XPcm6liI/AAAAAAAAAuA/Fa1ne7bMxmU/s1600/TheWallpaperDB.blogspot.com__+misc+%25281%2529.jpg");
| |
- | background-size:120% auto;
| |
- | background-position: -140px -39px;
| |
- | }
| |
| | | |
- | #placeimg{
| + | <script type="text/javascript"> |
- | height:250px;
| + | |
- | }
| + | |
| | | |
| + | function loadApp() { |
| | | |
- | #flipbook .page-wrapper{
| + | // Create the flipbook |
- | -webkit-perspective:2000px;
| + | |
- | -moz-perspective:2000px;
| + | |
- | -ms-perspective:2000px;
| + | |
- | -o-perspective:2000px;
| + | |
- | perspective:2000px;
| + | |
- | }
| + | |
| | | |
- | #flipbook .hard{
| + | $('.flipbook').turn({ |
- | background:#ccc !important;
| + | // Width |
- | color:#333;
| + | |
- | -webkit-box-shadow:inset 0 0 5px #666;
| + | |
- | -moz-box-shadow:inset 0 0 5px #666;
| + | |
- | -o-box-shadow:inset 0 0 5px #666;
| + | |
- | -ms-box-shadow:inset 0 0 5px #666;
| + | |
- | box-shadow:inset 0 0 5px #666;
| + | |
- | font-weight:bold;
| + | |
- | }
| + | |
| | | |
- | #flipbook .odd{
| + | width:922, |
- | background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
| + | |
- | background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
| + | // Height |
- | background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
| + | |
- | background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
| + | |
- | background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
| + | |
- | background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
| + | |
- | -webkit-box-shadow:inset 0 0 5px #666;
| + | |
- | -moz-box-shadow:inset 0 0 5px #666;
| + | |
- | -o-box-shadow:inset 0 0 5px #666;
| + | |
- | -ms-box-shadow:inset 0 0 5px #666;
| + | |
- | box-shadow:inset 0 0 5px #666;
| + | |
- |
| + | |
- | }
| + | |
| | | |
- | #flipbook .even{
| + | height:600, |
- | background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
| + | |
- | background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
| + | |
- | background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
| + | |
- | background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
| + | |
- | background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
| + | |
- | background-image:linear-gradient(left, #fff 95%, #dadada 100%);
| + | |
- | -webkit-box-shadow:inset 0 0 5px #666;
| + | |
- | -moz-box-shadow:inset 0 0 5px #666;
| + | |
- | -o-box-shadow:inset 0 0 5px #666;
| + | |
- | -ms-box-shadow:inset 0 0 5px #666;
| + | |
- | box-shadow:inset 0 0 5px #666;
| + | |
- | }
| + | |
- | </style>
| + | |
- |
| + | |
| | | |
| + | // Elevation |
| | | |
- | <script type='text/javascript'>//<![CDATA[
| + | elevation: 50, |
- | $(function(){
| + | |
- | $("#flipbook").turn({
| + | // Enable gradients |
- | width: 922,
| + | |
- | height: 600,
| + | |
- | autoCenter: true
| + | |
- | });
| + | |
- | });//]]>
| + | |
| | | |
- | </script>
| + | gradients: true, |
| + | |
| + | // Auto center this flipbook |
| | | |
| + | autoCenter: true |
| | | |
- | </head>
| + | }); |
- | <body>
| + | } |
| | | |
- | <header>
| + | // Load the HTML4 version if there's not CSS transform |
| | | |
- | <h1>Attributions</h1><img id="placeimg" src=
| + | yepnope({ |
- | "http://www.pepperminttechnology.co.uk/Images/BlankTransparentImg.gif">
| + | test : Modernizr.csstransforms, |
- | | + | yep: ['../../lib/turn.js'], |
- | <ul id="navbar">
| + | nope: ['../../lib/turn.html4.min.js'], |
- | <li>
| + | both: ['css/basic.css'], |
- | <a href="https://2014.igem.org/Team:Virginia">Home</a>
| + | complete: loadApp |
- | </li>
| + | }); |
| | | |
- | <li>
| + | </script> |
- | <a href="https://2014.igem.org/Team:Virginia/Team">Team</a>
| + | |
| | | |
- | <ul>
| |
- | <li>
| |
- | <a href="https://2014.igem.org/Team:Virginia/Gallery">Gallery</a>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a href="https://igem.org/Team.cgi?year=2014&team_name=Virginia">Official Team Profile</a>
| |
- | </li>
| |
- | </ul>
| |
- | </li>
| |
- |
| |
- |
| |
- | <li>
| |
- | <a href="https://2014.igem.org/Team:Virginia/Project">Project</a>
| |
- |
| |
- | <ul>
| |
- | <li><a href=
| |
- | "https://2014.igem.org/Team:Virginia/Notebook">Notebook</a></li>
| |
- |
| |
- | <li>
| |
- | <a href="https://2014.igem.org/Team:Virginia/Parts">Parts</a>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a href="https://2014.igem.org/Team:Virginia/Modeling">Modeling</a>
| |
- | </li>
| |
- |
| |
- |
| |
- | <li>
| |
- | <a href="https://2014.igem.org/Team:Virginia/Safety">Safety</a>
| |
- | </li>
| |
- | </ul>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a href="https://2014.igem.org/Team:Virginia/HumanPractices">Human Practices</a>
| |
- | </li>
| |
- | <li>
| |
- | <a href="https://2014.igem.org/Team:Virginia/Attributions">Attributions</a>
| |
- | </li>
| |
- |
| |
- | <li><a href="https://2014.igem.org/"><img src = "http://i.imgur.com/rLFTkAP.png" height="17px"></a></li>
| |
- | <div style="clear: both;"></div>
| |
- | </ul>
| |
- | </header>
| |
- | <center><div id="flipbook">
| |
- | <div class="hard"> Turn.js </div>
| |
- | <div class="hard"></div>
| |
- | <div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg)"></div>
| |
- | <div> Page 2 </div>
| |
- | <div> Page 3 </div>
| |
- | <div> Page 4 </div>
| |
- | <div class="hard"></div>
| |
- | <div class="hard"></div>
| |
- | </div></center>
| |
- |
| |
- |
| |
| </body> | | </body> |
- |
| |
- |
| |
| </html> | | </html> |