Difference between revisions of "Team:ZJU-China"
Line 123: | Line 123: | ||
</nav> | </nav> | ||
</div> | </div> | ||
+ | |||
+ | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> | ||
+ | |||
+ | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:ZJU-China/css/ZJU-bootstrap.min.css?action=raw&ctype=text/css" /> | ||
+ | <style> | ||
+ | .container { | ||
+ | height:100%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .block { | ||
+ | height:300px; | ||
+ | width:300px; | ||
+ | background: blue; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | </style> | ||
+ | <div class="container"> | ||
+ | |||
+ | |||
+ | <h2>Even use cool 3D effects</h2> | ||
+ | |||
+ | <div class="row"> | ||
+ | <div class="col-md-3"><div class="block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px"></div></div> | ||
+ | <div class="col-md-3"><div class="block" data-rotate-x="180deg" data-rotate-y="180deg" data-move-z="-700px"></div></div> | ||
+ | <div class="col-md-3"><div class="block" data-rotate-x="180deg" data-rotate-y="45deg" data-move-z="-500px"></div></div> | ||
+ | <div class="col-md-3"><div class="block" data-rotate-y="180deg" data-move-z="-100px" data-move-x="500px"></div></div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"><div class="block" data-rotate-y="270deg" data-move-x="-150%"></div></div> | ||
+ | <div class="col-md-6"><div class="block" data-rotate-y="270deg" data-move-x="150%"></div></div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | <script type="text/javascript" src="https://2015.igem.org/Team:ZJU-China/js/home/ZJU-jquery.smoove.min.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script>$('.block').smoove({offset:'40%'});</script> | ||
+ | |||
+ | |||
+ | |||
+ | |||
</body></html> | </body></html> |
Revision as of 09:28, 5 September 2015