Line 12,579: | Line 12,579: | ||
} | } | ||
/*# sourceMappingURL=bootstrap.css.map */ | /*# sourceMappingURL=bootstrap.css.map */ | ||
+ | |||
+ | </style> | ||
+ | <style> | ||
+ | /* -------------------------------- | ||
+ | |||
+ | Primary style | ||
+ | |||
+ | -------------------------------- */ | ||
+ | html * { | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
+ | } | ||
+ | |||
+ | *, *:after, *:before { | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | font-size: 100%; | ||
+ | font-family: "Bitter", sans-serif; | ||
+ | color: #f5f4ed; | ||
+ | background-color: #795d6b; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | color: #e86256; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /* -------------------------------- | ||
+ | |||
+ | Modules - reusable parts of our design | ||
+ | |||
+ | -------------------------------- */ | ||
+ | .cd-container { | ||
+ | width: 90%; | ||
+ | max-width: 768px; | ||
+ | height:3000px; | ||
+ | margin: 2em auto; | ||
+ | display:block | ||
+ | } | ||
+ | .cd-container::after { | ||
+ | /* clearfix */ | ||
+ | content: ''; | ||
+ | display: table; | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | /* -------------------------------- | ||
+ | |||
+ | Main components | ||
+ | |||
+ | -------------------------------- */ | ||
+ | header { | ||
+ | background: #5c4751; | ||
+ | height: 100px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | header h1 { | ||
+ | font-size: 20px; | ||
+ | font-size: 1.25rem; | ||
+ | font-weight: bold; | ||
+ | font-family: "Open Sans", sans-serif; | ||
+ | text-transform: uppercase; | ||
+ | font-weight: bold; | ||
+ | padding-top: 1.6em; | ||
+ | margin-bottom: .2em; | ||
+ | } | ||
+ | header p { | ||
+ | font-size: 13px; | ||
+ | font-size: 0.8125rem; | ||
+ | color: #957484; | ||
+ | } | ||
+ | @media only screen and (min-width: 1024px) { | ||
+ | header { | ||
+ | height: 200px; | ||
+ | } | ||
+ | header h1 { | ||
+ | font-size: 30px; | ||
+ | font-size: 1.875rem; | ||
+ | padding-top: 2.6em; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | main p { | ||
+ | font-size: 14px; | ||
+ | font-size: 1rem; | ||
+ | line-height: 22px; | ||
+ | } | ||
+ | @media only screen and (min-width: 1024px) { | ||
+ | main p { | ||
+ | font-size: 14px; | ||
+ | font-size: 1rem; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .cd-top { | ||
+ | display: inline-block; | ||
+ | height: 40px; | ||
+ | width: 40px; | ||
+ | position: fixed; | ||
+ | bottom: 40px; | ||
+ | right: 10px; | ||
+ | box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); | ||
+ | /* image replacement properties */ | ||
+ | overflow: hidden; | ||
+ | text-indent: 100%; | ||
+ | white-space: nowrap; | ||
+ | background: rgba(232, 98, 86, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%; | ||
+ | visibility: hidden; | ||
+ | opacity: 0; | ||
+ | -webkit-transition: all 0.3s; | ||
+ | -moz-transition: all 0.3s; | ||
+ | transition: all 0.3s; | ||
+ | } | ||
+ | .cd-top.cd-is-visible { | ||
+ | /* the button becomes visible */ | ||
+ | visibility: visible; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .cd-top.cd-fade-out { | ||
+ | /* Èç¹ûÓû§¼ÌÐøÏòϹö¶¯,Õâ¸ö°´Å¥µÄ͸Ã÷¶È»á±äµÃ¸üµÍ */ | ||
+ | opacity: .5; | ||
+ | } | ||
+ | .no-touch .cd-top:hover { | ||
+ | background-color: #e86256; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | @media only screen and (min-width: 768px) { | ||
+ | .cd-top { | ||
+ | right: 20px; | ||
+ | bottom: 20px; | ||
+ | } | ||
+ | } | ||
+ | @media only screen and (min-width: 1024px) { | ||
+ | .cd-top { | ||
+ | height: 60px; | ||
+ | width: 60px; | ||
+ | right: 30px; | ||
+ | bottom: 30px; | ||
+ | } | ||
+ | } | ||
</style> | </style> | ||
+ | <script language="javascript"> | ||
+ | jQuery(document).ready(function($){ | ||
+ | // browser window scroll (in pixels) after which the "back to top" link is shown | ||
+ | var offset = 300, | ||
+ | //browser window scroll (in pixels) after which the "back to top" link opacity is reduced | ||
+ | offset_opacity = 1200, | ||
+ | //duration of the top scrolling animation (in ms) | ||
+ | scroll_top_duration = 700, | ||
+ | //grab the "back to top" link | ||
+ | $back_to_top = $('.cd-top'); | ||
+ | |||
+ | //hide or show the "back to top" link | ||
+ | $(window).scroll(function(){ | ||
+ | ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out'); | ||
+ | if( $(this).scrollTop() > offset_opacity ) { | ||
+ | $back_to_top.addClass('cd-fade-out'); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | //smooth scroll to top | ||
+ | $back_to_top.on('click', function(event){ | ||
+ | event.preventDefault(); | ||
+ | $('body,html').animate({ | ||
+ | scrollTop: 0 , | ||
+ | }, scroll_top_duration | ||
+ | ); | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | </script> | ||
<script language="javascript"> | <script language="javascript"> | ||
/*! jQuery v1.11.3 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */ | /*! jQuery v1.11.3 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */ |
Revision as of 18:53, 14 October 2016