JSDM

HTML

 
1
<section class="stage1" id="verytop">
2
  <div id="top"><i class="icon-arrow-down"></i></div>
3
</section>
4
​
5
<section class="stage2">
6
  <div class="shapes">
7
    <svg
8
         data-start="top: -500px; transform: scale(2);"
9
         data-370-start="top: 0px; transform: scale(1);"
10
         data-760-start="top: 0px; transform: scale(1);"
11
         data-end="top: 300px; transform: scale(2);"
12
         x="0" y="0" width="649.5" height="658.5" viewBox="0 0 649.5 658.5" enable-background="new 0 0 649.468 658.467" xml:space="preserve"><rect x="373" y="182.6" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="85.7" height="85.1"/><rect x="349.1" y="66.9" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="16.6" height="19.9"/><rect x="324.1" y="98.1" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="14.3" height="12.7"/><rect x="340.4" y="149.4" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="9.3" height="10.6"/><rect x="458.7" y="154.7" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="27.2" height="28.6"/><rect x="322.1" y="249" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="48.2" height="89.7"/><rect x="496.6" y="127.4" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="22.7" height="19.9"/><rect x="424.6" y="76.9" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="15.3" height="18.6"/><rect x="349.1" y="62.3" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="26.6" height="21.2"/><rect x="189.6" y="182.8" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="85.7" height="85.1"/><rect x="282.6" y="67.2" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="16.6" height="19.9"/><rect x="309.8" y="98.3" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="14.3" height="12.7"/><rect x="298.5" y="149.6" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="9.3" height="10.6"/><rect x="162.3" y="154.9" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="27.2" height="28.6"/><rect x="277.9" y="249.2" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="48.2" height="89.7"/><rect x="129" y="127.6" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="22.7" height="19.9"/><rect x="208.5" y="77.1" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="15.3" height="18.6"/><rect x="272.6" y="62.5" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="26.6" height="21.2"/><rect x="373" y="387.9" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="85.7" height="85.1"/><rect x="349.1" y="568.7" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="16.6" height="19.9"/><rect x="324.1" y="544.8" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="14.3" height="12.7"/><rect x="340.4" y="495.6" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="9.3" height="10.6"/><rect x="458.7" y="472.3" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="27.2" height="28.6"/><rect x="322.1" y="316.9" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="48.2" height="89.7"/><rect x="496.6" y="508.2" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="22.7" height="19.9"/><rect x="424.6" y="560" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="15.3" height="18.6"/><rect x="349.1" y="572.1" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="26.6" height="21.2"/><rect x="189.6" y="387.7" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="85.7" height="85.1"/><rect x="282.6" y="568.5" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="16.6" height="19.9"/><rect x="309.8" y="544.6" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="14.3" height="12.7"/><rect x="298.5" y="495.4" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="9.3" height="10.6"/><rect x="162.3" y="472.1" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="27.2" height="28.6"/><rect x="277.9" y="316.7" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="48.2" height="89.7"/><rect x="129" y="508" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="22.7" height="19.9"/><rect x="208.4" y="559.8" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="15.3" height="18.6"/><rect x="272.6" y="571.9" fill-rule="evenodd" clip-rule="evenodd" fill="#E06548" width="26.6" height="21.2"/></svg>
13
​
14
    <svg
15
         data-start="top: -400px; transform: scale(1.5);"
16
         data-370-start="top: 0px; transform: scale(1);"
17
         data-760-start="top: 0px; transform: scale(1);"
18
         data-end="top: 500px; transform: scale(1.5);"
19
         xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="649.5" height="658.5" viewBox="0 0 649.5 658.5" enable-background="new 0 0 649.468 658.467" xml:space="preserve"><rect x="323.1" y="134.1" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.9" height="31.2"/><rect x="354.4" y="149.4" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="17.8" height="14"/><rect x="373" y="130.7" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="18.6" height="18.6"/><rect x="404.9" y="111.5" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6" height="7.3"/><rect x="417.8" y="225.1" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="40.9" height="42.5"/><rect x="373" y="182.6" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.9" height="17.4"/><rect x="381.6" y="173.9" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="7.3" height="8.6"/><rect x="324.1" y="198" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="19.6" height="22.4"/><rect x="332.4" y="183.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="6"/><rect x="578.3" y="150" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="5.3"/><rect x="612.2" y="19.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="10" height="10"/><rect x="422.8" y="304.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="8" height="9"/><rect x="436.8" y="276.3" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="6.6"/><rect x="458.7" y="267.6" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="17.3" height="19.9"/><rect x="540.5" y="259" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="24.5" height="21.2"/><rect x="418.6" y="192.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="12.8" height="13.6"/><rect x="381.5" y="226" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="10.1" height="12.8"/><rect x="336.4" y="231.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="7.3" height="10"/><rect x="579" y="205.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.3" height="15.3"/><rect x="359.7" y="64.3" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.9" height="19.2"/><rect x="404.9" y="61" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="6.6"/><rect x="339.2" y="19.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="17.9" height="18.6"/><rect x="357" y="267" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="14.4" height="13.2"/><rect x="373" y="267.6" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="33.9" height="36.6"/><rect x="309.2" y="134.3" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.9" height="31.2"/><rect x="276.1" y="149.6" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="17.8" height="14"/><rect x="256.7" y="131" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="18.6" height="18.6"/><rect x="237.4" y="111.7" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6" height="7.3"/><rect x="189.6" y="225.3" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="40.9" height="42.5"/><rect x="259.3" y="182.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.9" height="17.4"/><rect x="259.3" y="174.1" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="7.3" height="8.6"/><rect x="304.5" y="198.3" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="19.6" height="22.4"/><rect x="309.2" y="183.5" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="6"/><rect x="63.3" y="150.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="5.3"/><rect x="26.1" y="20" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="10" height="10"/><rect x="217.5" y="304.4" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="8" height="9"/><rect x="204.8" y="276.5" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="6.6"/><rect x="172.3" y="267.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="17.3" height="19.9"/><rect x="83.3" y="259.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="24.5" height="21.2"/><rect x="216.9" y="192.4" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="12.8" height="13.6"/><rect x="256.7" y="226.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="10.1" height="12.8"/><rect x="304.5" y="232" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="7.3" height="10"/><rect x="54" y="206" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.3" height="15.3"/><rect x="272.6" y="64.5" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.9" height="19.2"/><rect x="236.7" y="61.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="6.6"/><rect x="291.2" y="20" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="17.9" height="18.6"/><rect x="276.9" y="267.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="14.4" height="13.2"/><rect x="241.4" y="267.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="33.9" height="36.6"/><rect x="323.1" y="490.3" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.9" height="31.2"/><rect x="354.4" y="492.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="17.8" height="14"/><rect x="373" y="506.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="18.6" height="18.6"/><rect x="404.9" y="536.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6" height="7.3"/><rect x="417.8" y="387.9" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="40.9" height="42.5"/><rect x="373" y="455.6" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.9" height="17.4"/><rect x="381.6" y="473" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="7.3" height="8.6"/><rect x="324.1" y="435.1" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="19.6" height="22.4"/><rect x="332.4" y="466.3" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="6"/><rect x="578.3" y="500.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="5.3"/><rect x="612.2" y="625.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="10" height="10"/><rect x="422.8" y="342.4" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="8" height="9"/><rect x="436.8" y="372.6" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="6.6"/><rect x="458.7" y="368" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="17.3" height="19.9"/><rect x="540.4" y="375.4" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="24.5" height="21.2"/><rect x="418.6" y="449.7" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="12.8" height="13.6"/><rect x="381.5" y="416.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="10.1" height="12.8"/><rect x="336.4" y="413.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="7.3" height="10"/><rect x="579" y="434.4" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.3" height="15.3"/><rect x="359.7" y="572.1" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.9" height="19.2"/><rect x="404.9" y="588" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="6.6"/><rect x="339.2" y="617.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="17.9" height="18.6"/><rect x="357" y="375.4" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="14.4" height="13.2"/><rect x="373" y="351.4" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="33.9" height="36.6"/><rect x="309.2" y="490.1" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.9" height="31.2"/><rect x="276.1" y="492" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="17.8" height="14"/><rect x="256.7" y="506" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="18.6" height="18.6"/><rect x="237.4" y="536.6" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6" height="7.3"/><rect x="189.6" y="387.7" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="40.9" height="42.5"/><rect x="259.3" y="455.4" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.9" height="17.4"/><rect x="259.3" y="472.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="7.3" height="8.6"/><rect x="304.5" y="434.9" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="19.6" height="22.4"/><rect x="309.2" y="466.1" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="6"/><rect x="63.3" y="500" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="5.3"/><rect x="26.1" y="625.6" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="10" height="10"/><rect x="217.5" y="342.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="8" height="9"/><rect x="204.8" y="372.4" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="6.6"/><rect x="172.3" y="367.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="17.3" height="19.9"/><rect x="83.3" y="375.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="24.5" height="21.2"/><rect x="216.9" y="449.5" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="12.8" height="13.6"/><rect x="256.7" y="416.6" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="10.1" height="12.8"/><rect x="304.5" y="413.6" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="7.3" height="10"/><rect x="54" y="434.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.3" height="15.3"/><rect x="272.6" y="571.9" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="15.9" height="19.2"/><rect x="236.7" y="587.8" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="6.6" height="6.6"/><rect x="291.2" y="617" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="17.9" height="18.6"/><rect x="276.9" y="375.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="14.4" height="13.2"/><rect x="241.4" y="351.2" fill-rule="evenodd" clip-rule="evenodd" fill="#7DA0AA" width="33.9" height="36.6"/></svg>
20
​
21
                  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="649.5" height="658.5" viewBox="0 0 649.5 658.5" enable-background="new 0 0 649.468 658.467" xml:space="preserve"><rect x="338.4" y="110.8" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="23.9" height="22.6"/><rect x="458.7" y="183.2" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="43.9" height="42.5"/><rect x="391.6" y="149.4" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="23.3" height="22.6"/><rect x="341.7" y="248" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="29.6" height="43.8"/><rect x="356.4" y="206.5" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="13.3" height="11.9"/><rect x="435.5" y="120.8" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="8" height="8.6"/><rect x="488.6" y="300.2" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="19.3" height="36.6"/><rect x="422.8" y="304.2" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="12.6" height="29.2"/><rect x="531" y="99.5" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="12.1" height="12"/><rect x="487.3" y="41" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="6.6" height="8"/><rect x="321.6" y="308.9" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="7.5" height="19.4"/><rect x="339.2" y="5.4" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="10.2" height="14.4"/><rect x="323.1" y="64.4" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="5.3" height="15.2"/><rect x="609.6" y="304.9" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="12.6" height="16.6"/><rect x="285.9" y="111" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="23.9" height="22.6"/><rect x="145.7" y="183.5" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="43.9" height="42.5"/><rect x="233.4" y="149.6" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="23.3" height="22.6"/><rect x="276.9" y="248.2" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="29.6" height="43.8"/><rect x="278.6" y="206.7" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="13.3" height="11.9"/><rect x="204.8" y="121" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="8" height="8.6"/><rect x="140.4" y="300.4" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="19.3" height="36.6"/><rect x="212.8" y="304.4" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="12.6" height="29.2"/><rect x="105.2" y="99.7" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="12.1" height="12"/><rect x="154.3" y="41.2" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="6.6" height="8"/><rect x="319.2" y="309.1" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="7.5" height="19.4"/><rect x="298.9" y="5.6" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="10.2" height="14.4"/><rect x="319.8" y="64.6" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="5.3" height="15.2"/><rect x="26.1" y="305.1" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="12.6" height="16.6"/><rect x="338.4" y="522.2" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="23.9" height="22.6"/><rect x="458.7" y="429.8" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="43.9" height="42.5"/><rect x="391.6" y="483.6" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="23.3" height="22.6"/><rect x="341.7" y="363.7" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="29.6" height="43.8"/><rect x="356.4" y="437.1" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="13.3" height="11.9"/><rect x="435.4" y="526.2" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="8" height="8.6"/><rect x="488.6" y="318.8" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="19.3" height="36.6"/><rect x="422.8" y="322.1" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="12.6" height="29.2"/><rect x="531" y="544.1" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="12.1" height="12"/><rect x="487.3" y="606.6" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="6.6" height="8"/><rect x="321.6" y="327.3" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="7.5" height="19.4"/><rect x="339.2" y="635.8" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="10.2" height="14.4"/><rect x="323.1" y="576" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="5.3" height="15.2"/><rect x="609.6" y="334.1" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="12.6" height="16.6"/><rect x="285.9" y="522" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="23.9" height="22.6"/><rect x="145.7" y="429.6" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="43.9" height="42.5"/><rect x="233.4" y="483.4" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="23.3" height="22.6"/><rect x="276.9" y="363.5" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="29.6" height="43.8"/><rect x="278.6" y="436.9" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="13.3" height="11.9"/><rect x="204.8" y="525.9" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="8" height="8.6"/><rect x="140.4" y="318.6" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="19.3" height="36.6"/><rect x="212.8" y="321.9" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="12.6" height="29.2"/><rect x="105.2" y="543.9" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="12.1" height="12"/><rect x="154.3" y="606.4" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="6.6" height="8"/><rect x="319.2" y="327.1" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="7.5" height="19.4"/><rect x="298.9" y="635.6" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="10.2" height="14.4"/><rect x="319.8" y="575.8" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="5.3" height="15.2"/><rect x="26.1" y="333.9" fill-rule="evenodd" clip-rule="evenodd" fill="#D8E8D0" width="12.6" height="16.6"/></svg>
22
​
23
    <svg
24
         data-start="top: -500px; transform: scale(2);"
25
         data-370-start="top: 0px; transform: scale(1);"
26
         data-760-start="top: 0px; transform: scale(1);"
27
         data-end="top: 300px; transform: scale(2);"
28
         xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="649.5" height="658.5" viewBox="0 0 649.5 658.5" enable-background="new 0 0 649.468 658.467" xml:space="preserve"><rect x="357.7" y="166.6" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10" height="10.6"/><rect x="394.3" y="193.2" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10.6" height="9.2"/><rect x="461.8" y="110.8" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10.6" height="16.6"/><rect x="357" y="236.7" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="16" height="20.4"/><rect x="531" y="185.6" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="17.9" height="18.7"/><rect x="480.6" y="204.5" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10" height="11.3"/><rect x="438.3" y="246.4" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="20.4" height="21.3"/><rect x="512.9" y="273.6" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="11.3" height="9.3"/><rect x="498.3" y="311.5" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10.3" height="10"/><rect x="354.4" y="293.9" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="18.6" height="10.3"/><rect x="586.6" y="246.4" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="11.3" height="12.6"/><rect x="552.7" y="261.6" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="12.2" height="12"/><rect x="348.1" y="29.1" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="16.1" height="19.9"/><rect x="430.8" y="171.9" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="27.4" height="14.3"/><rect x="363" y="319.8" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="12.6" height="18.9"/><rect x="280.6" y="166.8" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10" height="10.6"/><rect x="243.4" y="193.4" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10.6" height="9.2"/><rect x="175.9" y="111" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10.6" height="16.6"/><rect x="275.3" y="236.9" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="16" height="20.4"/><rect x="99.4" y="185.8" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="17.9" height="18.7"/><rect x="157.7" y="204.7" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10" height="11.3"/><rect x="189.6" y="246.6" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="20.4" height="21.3"/><rect x="124.1" y="273.8" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="11.3" height="9.3"/><rect x="139.7" y="311.7" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10.3" height="10"/><rect x="275.3" y="294.1" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="18.6" height="10.3"/><rect x="50.4" y="246.6" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="11.3" height="12.6"/><rect x="83.3" y="261.8" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="12.2" height="12"/><rect x="284.1" y="29.3" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="16.1" height="19.9"/><rect x="190" y="172.2" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="27.4" height="14.3"/><rect x="272.6" y="320" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="12.6" height="18.9"/><rect x="357.7" y="478.3" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10" height="10.6"/><rect x="394.2" y="453.2" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10.6" height="9.2"/><rect x="461.8" y="528.1" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10.6" height="16.6"/><rect x="357" y="398.4" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="16" height="20.4"/><rect x="531" y="451.3" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="17.9" height="18.7"/><rect x="480.6" y="439.8" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10" height="11.3"/><rect x="438.3" y="387.9" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="20.4" height="21.3"/><rect x="512.9" y="372.6" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="11.3" height="9.3"/><rect x="498.2" y="334.1" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10.3" height="10"/><rect x="354.4" y="351.4" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="18.6" height="10.3"/><rect x="586.6" y="396.6" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="11.3" height="12.6"/><rect x="552.7" y="382" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="12.2" height="12"/><rect x="348.1" y="606.6" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="16.1" height="19.9"/><rect x="430.8" y="469.3" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="27.4" height="14.3"/><rect x="363" y="316.9" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="12.6" height="18.9"/><rect x="280.6" y="478.1" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10" height="10.6"/><rect x="243.4" y="453" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10.6" height="9.2"/><rect x="175.9" y="527.9" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10.6" height="16.6"/><rect x="275.3" y="398.2" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="16" height="20.4"/><rect x="99.4" y="451.1" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="17.9" height="18.7"/><rect x="157.7" y="439.6" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10" height="11.3"/><rect x="189.6" y="387.7" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="20.4" height="21.3"/><rect x="124.1" y="372.4" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="11.3" height="9.3"/><rect x="139.7" y="333.9" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="10.3" height="10"/><rect x="275.3" y="351.2" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="18.6" height="10.3"/><rect x="50.4" y="396.4" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="11.3" height="12.6"/><rect x="83.3" y="381.8" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="12.2" height="12"/><rect x="284.1" y="606.4" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="16.1" height="19.9"/><rect x="190" y="469.1" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="27.4" height="14.3"/><rect x="272.6" y="316.7" fill-rule="evenodd" clip-rule="evenodd" fill="#F2D7B6" width="12.6" height="18.9"/></svg>
29
​
30
    <svg
31
         data-start="top: -800px; transform: scale(1.7);"
32
         data-370-start="top: 0px; transform: scale(1);"
33
         data-760-start="top: 0px; transform: scale(1);"
34
         data-end="top: 380px; transform: scale(2.2);"
35
         xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="649.5" height="658.5" viewBox="0 0 649.5 658.5" enable-background="new 0 0 649.468 658.467" xml:space="preserve"><rect x="507.2" y="166.6" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="11.3" height="10.6"/><rect x="496.5" y="137.4" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="9.1" height="8.3"/><rect x="340.4" y="149.4" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="14" height="14"/><rect x="324.1" y="220.5" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="19.6" height="21.3"/><rect x="324.1" y="198" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="13.3" height="12.4"/><rect x="325.1" y="150.7" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="14" height="14.6"/><rect x="444.1" y="186.3" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="14.1" height="16.1"/><rect x="347.7" y="252.7" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="7.7" height="8.9"/><rect x="322.1" y="261.6" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.3" height="12"/><rect x="352.4" y="309.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.6" height="9.9"/><rect x="380.6" y="307.2" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="13.6" height="27.6"/><rect x="406.9" y="304.2" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="9.3" height="7.3"/><rect x="520.5" y="303.5" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="7.3" height="6.6"/><rect x="502.6" y="225.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="12" height="12.6"/><rect x="414.9" y="140" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10" height="10.6"/><rect x="429.5" y="153.3" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.6" height="11.3"/><rect x="339.8" y="86.2" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="8.6" height="9.3"/><rect x="400.9" y="204.9" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.3" height="10.9"/><rect x="329.1" y="172.6" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10" height="10.6"/><rect x="345.8" y="185.6" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="5.3" height="7.6"/><rect x="631.7" y="246.4" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="9.3" height="10.1"/><rect x="394.3" y="8.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.6" height="11"/><rect x="129.7" y="166.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="11.3" height="10.6"/><rect x="142.6" y="137.6" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="9.1" height="8.3"/><rect x="293.9" y="149.6" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="14" height="14"/><rect x="304.5" y="220.7" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="19.6" height="21.3"/><rect x="310.8" y="198.3" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="13.3" height="12.4"/><rect x="309.2" y="150.9" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="28.3" height="14.6"/><rect x="190" y="186.5" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="14.1" height="16.1"/><rect x="292.9" y="252.9" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="7.7" height="8.9"/><rect x="315.8" y="261.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.3" height="12"/><rect x="285.3" y="310" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.6" height="9.9"/><rect x="254" y="307.4" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="13.6" height="27.6"/><rect x="232.1" y="304.4" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="9.3" height="7.3"/><rect x="120.4" y="303.7" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="7.3" height="6.6"/><rect x="133.7" y="226" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="12" height="12.6"/><rect x="223.5" y="140.3" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10" height="10.6"/><rect x="208.2" y="153.5" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.6" height="11.3"/><rect x="299.9" y="86.4" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="8.6" height="9.3"/><rect x="237.1" y="205.1" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.3" height="10.9"/><rect x="309.2" y="172.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10" height="10.6"/><rect x="297.2" y="185.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="5.3" height="7.6"/><rect x="7.3" y="246.6" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="9.3" height="10.1"/><rect x="243.4" y="9" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.6" height="11"/><rect x="507.2" y="478.3" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="11.3" height="10.6"/><rect x="496.5" y="509.9" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="9.1" height="8.3"/><rect x="340.4" y="492.2" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="14" height="14"/><rect x="324.1" y="413.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="19.6" height="21.3"/><rect x="324.1" y="445.1" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="13.3" height="12.4"/><rect x="325.1" y="490.3" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="14" height="14.6"/><rect x="444.1" y="453.2" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="14.1" height="16.1"/><rect x="347.7" y="394" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="7.7" height="8.9"/><rect x="322.1" y="382" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.3" height="12"/><rect x="352.4" y="335.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.6" height="9.9"/><rect x="380.6" y="320.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="13.6" height="27.6"/><rect x="406.9" y="344.1" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="9.3" height="7.3"/><rect x="520.5" y="345.4" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="7.3" height="6.6"/><rect x="502.6" y="417.2" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="12" height="12.6"/><rect x="414.8" y="504.9" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10" height="10.6"/><rect x="429.5" y="490.9" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.6" height="11.3"/><rect x="339.8" y="560" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="8.6" height="9.3"/><rect x="400.9" y="439.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.3" height="10.9"/><rect x="329.1" y="472.3" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10" height="10.6"/><rect x="345.8" y="462.4" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="5.3" height="7.6"/><rect x="631.7" y="399.1" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="9.3" height="10.1"/><rect x="394.2" y="635.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.6" height="11"/><rect x="129.7" y="478.1" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="11.3" height="10.6"/><rect x="142.6" y="509.7" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="9.1" height="8.3"/><rect x="293.9" y="492" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="14" height="14"/><rect x="304.5" y="413.6" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="19.6" height="21.3"/><rect x="310.8" y="444.9" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="13.3" height="12.4"/><rect x="309.2" y="490.1" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="28.3" height="14.6"/><rect x="190" y="453" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="14.1" height="16.1"/><rect x="292.9" y="393.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="7.7" height="8.9"/><rect x="315.8" y="381.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.3" height="12"/><rect x="285.3" y="335.6" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.6" height="9.9"/><rect x="254" y="320.6" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="13.6" height="27.6"/><rect x="232.1" y="343.9" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="9.3" height="7.3"/><rect x="120.4" y="345.2" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="7.3" height="6.6"/><rect x="133.7" y="417" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="12" height="12.6"/><rect x="223.4" y="504.7" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10" height="10.6"/><rect x="208.2" y="490.7" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.6" height="11.3"/><rect x="299.9" y="559.8" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="8.6" height="9.3"/><rect x="237.1" y="439.6" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.3" height="10.9"/><rect x="309.2" y="472.1" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10" height="10.6"/><rect x="297.2" y="462.2" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="5.3" height="7.6"/><rect x="7.2" y="398.9" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="9.3" height="10.1"/><rect x="243.4" y="635.6" fill-rule="evenodd" clip-rule="evenodd" fill="#2A2928" width="10.6" height="11"/></svg>
36
  </div><!--shapes-->
37
  <div class="person">
38
    <img
39
         data-start="opacity:0;"
40
         data-369-start="opacity:0;"
41
         data-370-start="opacity:1;"
42
         data-759-start="opacity:1;"
43
         data-760-start="opacity:0;"
44
         src="http://sarahdrasnerdesign.com/medusa/img/person/10.png" />
45
    <img
46
         data-start="top: -500px; left: -20%; filter: contrast(7) invert(1); opacity: 0.4;"
47
         data-370-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
48
         data-760-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
49
         data-end="top: 300px; left: 20%; filter: contrast(7) invert(1); opacity: 0.4;"
50
         src="http://sarahdrasnerdesign.com/medusa/img/person/2.png" />
51
    <img
52
         data-start="top: -300px; left: -10%; filter: contrast(7) invert(1); opacity: 0.4;"
53
         data-370-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
54
         data-760-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
55
         data-end="top: 700px; left: -20%; filter: contrast(7) invert(1); opacity: 0.4;"
56
         src="http://sarahdrasnerdesign.com/medusa/img/person/3.png" />
57
    <img
58
         data-start="top: -800px; left: -30%; filter: contrast(7) invert(1); opacity: 0.4;"
59
         data-370-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
60
         data-760-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
61
         data-end="top: 750px; left: 30%; filter: contrast(7) invert(1); opacity: 0.4;"
62
         src="http://sarahdrasnerdesign.com/medusa/img/person/4.png" />
63
    <img
64
         data-start="top: -550px; left: 5%; filter: contrast(7) invert(1); opacity: 0.4;"
65
         data-370-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
66
         data-760-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
67
         data-end="top: 750px; left: -30%; filter: contrast(7) invert(1); opacity: 0.4;"
68
         src="http://sarahdrasnerdesign.com/medusa/img/person/5.png" />
69
    <img
70
         data-start="top: -600px; left: 70%; filter: contrast(7) invert(1); opacity: 0.4;"
71
         data-370-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
72
         data-760-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
73
         data-end="top: 850px; left: 5%; filter: contrast(7) invert(1); opacity: 0.4;"
74
         src="http://sarahdrasnerdesign.com/medusa/img/person/6.png" />
75
    <img
76
         data-start="top: -200px; left: -25%; filter: contrast(7) invert(1); opacity: 0.4;"
77
         data-370-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
78
         data-760-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
79
         data-end="top: 800px; left: -5%; filter: contrast(7) invert(1); opacity: 0.4;"
80
         src="http://sarahdrasnerdesign.com/medusa/img/person/7.png" />
81
    <img
82
         data-start="top: -100px; left: 40%; filter: contrast(7) invert(1); opacity: 0.4;"
83
         data-370-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
84
         data-760-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
85
         data-end="top: 650px; left: 10%; filter: contrast(7) invert(1); opacity: 0.4;"
86
         src="http://sarahdrasnerdesign.com/medusa/img/person/8.png" />
87
    <img
88
         data-start="top: -900px; left: -70%; filter: contrast(7) invert(1); opacity: 0.4;"
89
         data-370-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
90
         data-760-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
91
         data-end="top: 600px; left: 50%; filter: contrast(7) invert(1); opacity: 0.4;"
92
         src="http://sarahdrasnerdesign.com/medusa/img/person/9.png" />
93
    <img
94
         data-start="top: -500px; left: -20%; filter: contrast(7) invert(1); opacity: 0.4;"
95
         data-370-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
96
         data-760-start="top: 0px; left: 0%; filter: contrast(1) invert(0); opacity: 1;"
97
         data-end="top: 300px; left: 20%; filter: contrast(7) invert(1); opacity: 0.4;"
98
         src="http://sarahdrasnerdesign.com/medusa/img/person/1.png" />
99
  </div><!--person-->
100
</section>
101
​
102
<section class="stage3">
103
  <div id="bottom"><i class="icon-arrow-up"></i></div>
104
</section>

CSS

xxxxxxxxxx
181
 
1
a, a:visited {
2
    color: black;
3
    text-decoration: none;
4
    transition: color 1s ease;
5
}
6
​
7
a:hover {
8
    color: orangered;
9
    transition: color 0.5s ease;
10
}
11
​
12
section {
13
    width: 100%;
14
    height: 700px;
15
}
16
​
17
section.stage1 {
18
    background: #efefef; /* Old browsers */
19
    background: -moz-linear-gradient(-45deg, #efefef 0%, #efefef 50%, #f9f2ed 50%, #f9f2ed 100%); /* FF3.6+ */
20
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#efefef), color-stop(50%,#efefef), color-stop(50%,#f9f2ed), color-stop(100%,#f9f2ed)); /* Chrome,Safari4+ */
21
    background: -webkit-linear-gradient(-45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* Chrome10+,Safari5.1+ */
22
    background: -o-linear-gradient(-45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* Opera 11.10+ */
23
    background: -ms-linear-gradient(-45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* IE10+ */
24
    background: linear-gradient(135deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* W3C */
25
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f9f2ed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
26
}
27
​
28
section.stage2 {
29
    background: #efefef; /* Old browsers */
30
    background: -moz-linear-gradient(45deg, #efefef 0%, #efefef 50%, #f9f2ed 50%, #f9f2ed 100%); /* FF3.6+ */
31
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#efefef), color-stop(50%,#efefef), color-stop(50%,#f9f2ed), color-stop(100%,#f9f2ed)); /* Chrome,Safari4+ */
32
    background: -webkit-linear-gradient(45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* Chrome10+,Safari5.1+ */
33
    background: -o-linear-gradient(45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* Opera 11.10+ */
34
    background: -ms-linear-gradient(45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* IE10+ */
35
    background: linear-gradient(45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* W3C */
36
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f9f2ed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
37
}
38
​
39
section.stage3 {
40
   background: #efefef; /* Old browsers */
41
    background: -moz-linear-gradient(-45deg, #efefef 0%, #efefef 50%, #f9f2ed 50%, #f9f2ed 100%); /* FF3.6+ */
42
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#efefef), color-stop(50%,#efefef), color-stop(50%,#f9f2ed), color-stop(100%,#f9f2ed)); /* Chrome,Safari4+ */
43
    background: -webkit-linear-gradient(-45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* Chrome10+,Safari5.1+ */
44
    background: -o-linear-gradient(-45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* Opera 11.10+ */
45
    background: -ms-linear-gradient(-45deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* IE10+ */
46
    background: linear-gradient(135deg, #efefef 0%,#efefef 50%,#f9f2ed 50%,#f9f2ed 100%); /* W3C */
47
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f9f2ed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
48
}
49
​
50
#top, #bottom {
51
    border-radius: 50%;
52
    background: #fff;
53
    position: absolute;
54
    left: 48%;
55
    z-index:500;
56
    border: 1px solid #ccc;
57
}
58
​
59
#bottom {
60
    top: 1950px;
61
    padding: 20px 21px 18px;
62
}
63
​
64
#top {
65
    padding: 22px 21px 18px;
66
    top: 150px;
67
}
68
​
69
#top i, #bottom i {
70
    font-size: 30px;
71
}
72
​
73
.person {
74
    width: 500px;
75
    height: 513px;
76
    position:absolute;
77
    left: 30%;
78
    transform: translate3d(0,0,0);
79
}
80
​
81
.person img, .shapes svg {
82
    position: absolute;
83
    transform: translate3d(0,0,0);
84
}
85
​
86
.shapes {
87
    width: 650px;
88
    height: 670px;
89
    left: 23.5%;
90
    top: 630px;
91
    position: absolute;
92
    transform: translate3d(0,0,0);
93
}
94
​
95
@media screen and (max-width: 600px) {
96
  .person img, .shapes svg {
97
    width: 100% !important;
98
  }
99
  .person, .shapes {
100
    width: 90% !important;
101
    left: 5% !important;
102
    margin: 0 auto;
103
  }
104
  #top, #bottom {
105
    left: 45% !important;
106
  }
107
  .top-ft .ft1, .top-ft .ft3 {
108
    font-size: 14px !important;
109
  }
110
}
111
​
112
@media screen and (min-width: 431px) {
113
  .top-ft .ft1-mob, .top-ft .ft3-mob {
114
    display: none;
115
  }
116
}
117
​
118
@media screen and (max-width: 430px) {
119
  .top-ft .ft1, .top-ft .ft3 {
120
    display: none;
121
  }
122
  .top-ft .ft1-mob a, .top-ft .ft3-mob a {
123
    color: white;
124
    font-size: 30px;
125
    width: 20%;
126
    float: left;
127
  }
128
  #top, #bottom {
129
    left: 39% !important;
130
  }
131
}
132
​
133
/* font stuff */
134
​
135
@font-face {
136
  font-family: 'icomoon';
137
  src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/icomoon.eot_copy?-8bldvn');
138
  src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/icomoon.eot_copy?#iefix-8bldvn') format('embedded-opentype'),
139
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/icomoon_copy.woff?-8bldvn') format('woff'),
140
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/icomoon.ttf?-8bldvn') format('truetype'),
141
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/icomoon.dev.svg?-8bldvn#icomoon') format('svg');
142
  font-weight: normal;
143
  font-style: normal;
144
}
145
​
146
[class^="icon-"], [class*=" icon-"] {
147
  font-family: 'icomoon';
148
  speak: none;
149
  font-style: normal;
150
  font-weight: normal;
151
  font-variant: normal;
152
  text-transform: none;
153
  line-height: 1;
154
​
155
  /* Better Font Rendering =========== */
156
  -webkit-font-smoothing: antialiased;
157
  -moz-osx-font-smoothing: grayscale;
158
}
159
​
160
.icon-facebook-square:before {
161
  content: "\f082";
162
}
163
.icon-twitter:before {
164
  content: "\f099";
165
}
166
.icon-github:before {
167
  content: "\f09b";
168
}
169
.icon-codepen:before {
170
  content: "\f1cb";
171
}
172
.icon-arrow-down:before {
173
  content: "\e600";
174
}
175
.icon-arrow-up:before {
176
  content: "\e601";
177
}
178
​
179
body {
180
    transform: translate3d(0,0,0);
181
}
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
54
 
1
//skrollr stuff
2
skrollrCheck = function() {
3
   var winWidth        = window.innerWidth;
4
   var winHeight       = window.innerHeight;
5
​
6
   if(winWidth >= 300) {
7
     if(document.body.id !== 'skrollr-body') {
8
       document.body.id = 'skrollr-body';
9
       // Init Skrollr
10
       skrollr.init({
11
         forceHeight: false,//disable setting height on body
12
         mobileDeceleration:0.04,
13
         smoothScrolling:true,
14
         render: function(data) {
15
           //Debugging - Log the current scroll position.
16
           console.log('data.curTop: ' + data.curTop);
17
         }
18
       });
19
     }
20
   } else if (winWidth < 300){
21
     // Destroy skrollr for screens less than 300px
22
     if(document.body.id === 'skrollr-body') {
23
       skrollr.init().destroy();
24
       document.body.id = '';
25
     }
26
   }
27
 };
28
​
29
//Initialize skrollr, but only if it exists.
30
if(typeof skrollr !== typeof undefined){
31
  // INITIALIZE
32
  window.onload = skrollrCheck();
33
  window.addEventListener('resize', skrollrCheck);//listens for resize, and refreshes skrollr
34
  window.addEventListener('orientationchange', skrollrCheck);//listens for orientation change, and refreshes skrollr
35
  console.log('skrollr active!');
36
} else {
37
  console.log('skrollr is did not load.');
38
}
39
​
40
// gsap stuff
41
​
42
$(function() {
43
  $("#top").bind('click', { id: '#bottom' }, scroller);
44
  $("#bottom").bind('click', { id: '#verytop' }, scroller);
45
​
46
  function scroller(event){
47
    var scrollYPos = $(event.data.id).offset().top;
48
    event.preventDefault();
49
    TweenLite.to(window, 5, {scrollTo:{y:scrollYPos, x:0}, ease:Power3.easeInOutCirc})
50
  }
51
});
52
​
53
​
54
​
必须是有效的URL
请输入有效的URL
请输入有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................