Difference between revisions of "Team:Hong Kong-CUHK"
| Line 311: | Line 311: | ||
.prev, .next,.text {font-size: 11px} | .prev, .next,.text {font-size: 11px} | ||
} | } | ||
| + | |||
| + | |||
| + | |||
| + | @import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400); | ||
| + | * { | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | } | ||
| + | html, body { | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | .demo a { | ||
| + | position: absolute; | ||
| + | bottom: 20px; | ||
| + | left: 50%; | ||
| + | z-index: 2; | ||
| + | display: inline-block; | ||
| + | -webkit-transform: translate(0, -50%); | ||
| + | transform: translate(0, -50%); | ||
| + | color: #fff; | ||
| + | font : normal 400 20px/1 'Josefin Sans', sans-serif; | ||
| + | letter-spacing: .1em; | ||
| + | text-decoration: none; | ||
| + | transition: opacity .3s; | ||
| + | } | ||
| + | .demo a:hover { | ||
| + | opacity: .5; | ||
| + | } | ||
| + | |||
| + | |||
| + | section { | ||
| + | position: relative; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | background-color:#fff; | ||
| + | } | ||
| + | |||
| + | |||
| + | #section02 a { | ||
| + | padding-top: 60px; | ||
| + | } | ||
| + | |||
| + | #section02 a span { | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | left: 50%; | ||
| + | width: 46px; | ||
| + | height: 46px; | ||
| + | margin-left: -23px; | ||
| + | border: 1px solid #fff; | ||
| + | border-radius: 100%; | ||
| + | box-sizing: border-box; | ||
| + | } | ||
| + | |||
| + | |||
| Line 375: | Line 431: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | |||
| − | |||
</div> | </div> | ||
| − | + | <section id="section01" class="demo"> | |
<div class="splash" id="mainsplash"> | <div class="splash" id="mainsplash"> | ||
<div class="row splashyla"> | <div class="row splashyla"> | ||
| Line 389: | Line 443: | ||
</div> | </div> | ||
| − | + | <a href="#section02"><span></span>Scroll</a> | |
| − | <div class="slideshow-container"> | + | </section> |
| + | <section id="section02" class="demo"> | ||
| + | <div class="slideshow-container"> | ||
| Line 460: | Line 516: | ||
} | } | ||
</script> | </script> | ||
| + | |||
| + | |||
| + | </section> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <script> | ||
| + | |||
| + | $(function() { | ||
| + | $('a[href*=#]').on('click', function(e) { | ||
| + | e.preventDefault(); | ||
| + | $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear'); | ||
| + | }); | ||
| + | }); | ||
| + | |||
| + | </script> | ||
| + | |||
| + | |||
Revision as of 16:25, 19 July 2017