(22 intermediate revisions by 4 users not shown) | |||
Line 2: | Line 2: | ||
<html lang="en"> | <html lang="en"> | ||
<style type="text/css"> | <style type="text/css"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | #home-img{ | |
− | width: | + | width: 100%; |
+ | height: 100vh; | ||
+ | position: relative; | ||
+ | z-index: 10; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2017/0/02/T--CSMU_NCHU_Taiwan--home_img.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | background-size:cover; | ||
+ | background-attachment: fixed; | ||
} | } | ||
− | + | #home-cover{ | |
− | + | padding: 0 10%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | padding | + | |
} | } | ||
− | . | + | .top { |
− | width:100%; | + | position: fixed; |
− | } | + | right: 50px; |
+ | bottom: 50px; | ||
+ | height: 50px; | ||
+ | width: 50px; | ||
+ | cursor: pointer; } | ||
+ | .top img { | ||
+ | width: 100%; } | ||
</style> | </style> | ||
<body> | <body> | ||
− | + | <div id="home-img"></div> | |
− | <div | + | <div id="home-cover"> |
− | <img src="https://static.igem.org/mediawiki/2017/ | + | <img src="https://static.igem.org/mediawiki/2017/5/5e/T--CSMU_NCHU_Taiwan--home_cover.png" alt="" style="width:100%;"> |
− | < | + | <img src="https://static.igem.org/mediawiki/2017/d/da/T--CSMU_NCHU_Taiwan--sponsors3.png" alt="" style="width:100%" align="right"> |
</div> | </div> | ||
− | + | ||
− | + | <div class="top"> | |
− | < | + | <img src="https://static.igem.org/mediawiki/2017/5/52/T--CSMU_NCHU_Taiwan--top.png" alt=""> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | |||
</body> | </body> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | |||
+ | |||
+ | |||
+ | $('.top').on('click', function(){ | ||
+ | $('html, body').animate({scrollTop: '0px'}, 500); | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | |||
+ | function toggleContainer(i){ | ||
+ | return function(){ | ||
+ | if($('#public-'+i).is(":visible")){ | ||
+ | $('#public-'+i).slideToggle(500); | ||
+ | } | ||
+ | else{ | ||
+ | $('.img-container:visible').slideToggle(500); | ||
+ | $('#public-'+i).slideToggle(500); | ||
+ | } | ||
+ | $('.hp-bg-container').css('max-height','none') | ||
+ | $('.main-content').css('min-height','200vh') | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | </script> | ||
</html> | </html> |
Latest revision as of 08:24, 1 November 2017