--- a/landingpage/index.html +++ b/landingpage/index.html @@ -217,6 +217,563 @@ <br> <footer> + + <style> + * { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; + } + + + #site-footer { + background: #162a4e; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBjMWQzOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFhMzE1OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0c1d38), color-stop(100%, #1a3158)); + background-image: -moz-linear-gradient(#0c1d38, #1a3158); + background-image: -webkit-linear-gradient(#0c1d38, #1a3158); + background-image: linear-gradient(#0c1d38, #1a3158); + position: relative; + /*width: 182px;*/ + width: 100%; + height: 182px; + margin: 50px auto; + overflow: hidden; + /* iOS hack for border radius bleed with transforms */ + -webkit-mask-image: -webkit-radial-gradient(circle, white, black); + } + #site-footer .ground { + -moz-border-radius-topright: 130px 40px; + -webkit-border-top-right-radius: 130px 40px; + border-top-right-radius: 130px 40px; + position: absolute; + width: 133px; + height: 61px; + left: 0; + bottom: 0; + background: white; + } + #site-footer .ground:before { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + content: " "; + position: absolute; + width: 130px; + height: 100px; + top: 10px; + right: -60px; + background: white; + } + #site-footer .ground:after { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + content: " "; + position: absolute; + width: 70px; + height: 70px; + top: 5px; + right: -75px; + background: white; + } + #site-footer .tree { + position: absolute; + width: 0; + height: 0; + border-style: solid; + border-color: transparent transparent #23915b transparent; + } + #site-footer .tree:before { + content: " "; + position: absolute; + width: 0; + height: 0; + border-style: solid; + border-color: transparent transparent #23915b transparent; + } + #site-footer .tree:after { + content: " "; + position: absolute; + width: 0; + height: 0; + border-style: solid; + border-color: transparent transparent #23915b transparent; + } + #site-footer .tree.left { + left: 28px; + bottom: 78px; + border-width: 0 18px 24px 18px; + } + #site-footer .tree.left:before { + top: 10px; + left: -21px; + border-width: 0 21px 28px 21px; + } + #site-footer .tree.left:after { + top: 22px; + left: -24px; + border-width: 0 24px 32px 24px; + } + #site-footer .tree.left .snow { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + -moz-box-shadow: -2px 2px 0 0 white, 2px 2px 0 0 white, -3px 3px 0 0 white, 3px 3px 0 0 white, -12px 14px 0 0 white, -13px 17px 0 1px white, -16px 19px 0 0 white, -9px 16px 0 0 white, -5px 15px 0 2px white, -9px 13px 0 0 white, 6px 15px 0 2px white, 0 13px 0 1px white, 11px 14px 0 1px white, 13px 17px 0 1px white, 15px 19px 0 0 white; + -webkit-box-shadow: -2px 2px 0 0 white, 2px 2px 0 0 white, -3px 3px 0 0 white, 3px 3px 0 0 white, -12px 14px 0 0 white, -13px 17px 0 1px white, -16px 19px 0 0 white, -9px 16px 0 0 white, -5px 15px 0 2px white, -9px 13px 0 0 white, 6px 15px 0 2px white, 0 13px 0 1px white, 11px 14px 0 1px white, 13px 17px 0 1px white, 15px 19px 0 0 white; + box-shadow: -2px 2px 0 0 white, 2px 2px 0 0 white, -3px 3px 0 0 white, 3px 3px 0 0 white, -12px 14px 0 0 white, -13px 17px 0 1px white, -16px 19px 0 0 white, -9px 16px 0 0 white, -5px 15px 0 2px white, -9px 13px 0 0 white, 6px 15px 0 2px white, 0 13px 0 1px white, 11px 14px 0 1px white, 13px 17px 0 1px white, 15px 19px 0 0 white; + position: absolute; + top: 1px; + left: -3px; + width: 6px; + height: 6px; + background: white; + z-index: 1; + } + #site-footer .tree.left .snow:after { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + -moz-box-shadow: -14px 14px 0 0 white, -15px 17px 0 1px white, -18px 19px 0 0 white, -9px 16px 0 0 white, -5px 15px 0 2px white, -9px 13px 0 0 white, 6px 15px 0 2px white, 0 13px 0 1px white, 12px 17px 0 3px white, 16px 17px 0 1px white, 18px 19px 0 0 white, 11px 20px 0 1px white, 16px 20px 0 1px white, 18px 22px 0 1px white, 21px 25px 0 0 white, -2px 27px 0 1px white; + -webkit-box-shadow: -14px 14px 0 0 white, -15px 17px 0 1px white, -18px 19px 0 0 white, -9px 16px 0 0 white, -5px 15px 0 2px white, -9px 13px 0 0 white, 6px 15px 0 2px white, 0 13px 0 1px white, 12px 17px 0 3px white, 16px 17px 0 1px white, 18px 19px 0 0 white, 11px 20px 0 1px white, 16px 20px 0 1px white, 18px 22px 0 1px white, 21px 25px 0 0 white, -2px 27px 0 1px white; + box-shadow: -14px 14px 0 0 white, -15px 17px 0 1px white, -18px 19px 0 0 white, -9px 16px 0 0 white, -5px 15px 0 2px white, -9px 13px 0 0 white, 6px 15px 0 2px white, 0 13px 0 1px white, 12px 17px 0 3px white, 16px 17px 0 1px white, 18px 19px 0 0 white, 11px 20px 0 1px white, 16px 20px 0 1px white, 18px 22px 0 1px white, 21px 25px 0 0 white, -2px 27px 0 1px white; + content: " "; + position: absolute; + top: 14px; + left: 0px; + width: 6px; + height: 6px; + background: white; + z-index: 1; + } + #site-footer .tree.right { + left: 60px; + bottom: 45px; + border-width: 0 18px 24px 18px; + } + #site-footer .tree.right:before, #site-footer .tree.right:after { + display: none; + } + #site-footer .tree.right .snow { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + -moz-box-shadow: -1px 2px 0 0 white, -2px 3px 0 0 white, 2px 2px 0 0 white, 3px 3px 0 0 white, 4px 4px 0 0 white, 6px 6px 0 0 white, 6px 15px 0 0 white, 8px 16px 0 0 white, 10px 16px 0 0 white, 11px 16px 0 0 white, -5px 13px 0 0 white, -7px 12px 0 0 white; + -webkit-box-shadow: -1px 2px 0 0 white, -2px 3px 0 0 white, 2px 2px 0 0 white, 3px 3px 0 0 white, 4px 4px 0 0 white, 6px 6px 0 0 white, 6px 15px 0 0 white, 8px 16px 0 0 white, 10px 16px 0 0 white, 11px 16px 0 0 white, -5px 13px 0 0 white, -7px 12px 0 0 white; + box-shadow: -1px 2px 0 0 white, -2px 3px 0 0 white, 2px 2px 0 0 white, 3px 3px 0 0 white, 4px 4px 0 0 white, 6px 6px 0 0 white, 6px 15px 0 0 white, 8px 16px 0 0 white, 10px 16px 0 0 white, 11px 16px 0 0 white, -5px 13px 0 0 white, -7px 12px 0 0 white; + position: absolute; + top: 0; + left: -3px; + width: 6px; + height: 6px; + background: white; + } + #site-footer .flake { + -webkit-animation: snow infinite linear 30s; + -moz-animation: snow infinite linear 30s; + -ms-animation: snow infinite linear 30s; + -o-animation: snow infinite linear 30s; + animation: snow infinite linear 30s; + position: absolute; + width: 1px; + height: 1px; + background: white; + } + #site-footer .flake.large { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + width: 4px; + height: 4px; + } + #site-footer .flake.f-1 { + -webkit-animation-duration: 20s; + -moz-animation-duration: 20s; + -ms-animation-duration: 20s; + -o-animation-duration: 20s; + animation-duration: 20s; + left: 15px; + margin-top: 86px; + } + #site-footer .flake.f-2 { + -webkit-animation-duration: 23s; + -moz-animation-duration: 23s; + -ms-animation-duration: 23s; + -o-animation-duration: 23s; + animation-duration: 23s; + left: 32px; + margin-top: 52px; + } + #site-footer .flake.f-3 { + -webkit-animation-duration: 32s; + -moz-animation-duration: 32s; + -ms-animation-duration: 32s; + -o-animation-duration: 32s; + animation-duration: 32s; + left: 64px; + margin-top: 15px; + } + #site-footer .flake.f-4 { + -webkit-animation-duration: 21s; + -moz-animation-duration: 21s; + -ms-animation-duration: 21s; + -o-animation-duration: 21s; + animation-duration: 21s; + left: 69px; + margin-top: 34px; + } + #site-footer .flake.f-5 { + -webkit-animation-duration: 24s; + -moz-animation-duration: 24s; + -ms-animation-duration: 24s; + -o-animation-duration: 24s; + animation-duration: 24s; + left: 70px; + margin-top: 72px; + } + #site-footer .flake.f-6 { + -webkit-animation-duration: 16s; + -moz-animation-duration: 16s; + -ms-animation-duration: 16s; + -o-animation-duration: 16s; + animation-duration: 16s; + left: 90px; + margin-top: 97px; + } + #site-footer .flake.f-7 { + -webkit-animation-duration: 34s; + -moz-animation-duration: 34s; + -ms-animation-duration: 34s; + -o-animation-duration: 34s; + animation-duration: 34s; + left: 102px; + margin-top: 81px; + } + #site-footer .flake.f-8 { + -webkit-animation-duration: 37s; + -moz-animation-duration: 37s; + -ms-animation-duration: 37s; + -o-animation-duration: 37s; + animation-duration: 37s; + left: 102px; + margin-top: 40px; + } + #site-footer .flake.f-9 { + -webkit-animation-duration: 35s; + -moz-animation-duration: 35s; + -ms-animation-duration: 35s; + -o-animation-duration: 35s; + animation-duration: 35s; + left: 108px; + margin-top: 67px; + } + #site-footer .flake.f-10 { + -webkit-animation-duration: 23s; + -moz-animation-duration: 23s; + -ms-animation-duration: 23s; + -o-animation-duration: 23s; + animation-duration: 23s; + left: 90px; + margin-top: 11px; + } + #site-footer .flake.f-11 { + -webkit-animation-duration: 27s; + -moz-animation-duration: 27s; + -ms-animation-duration: 27s; + -o-animation-duration: 27s; + animation-duration: 27s; + left: 126px; + margin-top: 55px; + } + #site-footer .flake.f-12 { + -webkit-animation-duration: 29s; + -moz-animation-duration: 29s; + -ms-animation-duration: 29s; + -o-animation-duration: 29s; + animation-duration: 29s; + left: 131px; + margin-top: 27px; + } + #site-footer .flake.f-13 { + -webkit-animation-duration: 24s; + -moz-animation-duration: 24s; + -ms-animation-duration: 24s; + -o-animation-duration: 24s; + animation-duration: 24s; + left: 128px; + margin-top: 112px; + } + #site-footer .flake.f-14 { + -webkit-animation-duration: 23s; + -moz-animation-duration: 23s; + -ms-animation-duration: 23s; + -o-animation-duration: 23s; + animation-duration: 23s; + left: 146px; + margin-top: 72px; + } + #site-footer .flake.f-15 { + -webkit-animation-duration: 19s; + -moz-animation-duration: 19s; + -ms-animation-duration: 19s; + -o-animation-duration: 19s; + animation-duration: 19s; + left: 147px; + margin-top: 102px; + } + #site-footer .flake.f-16 { + -webkit-animation-duration: 22s; + -moz-animation-duration: 22s; + -ms-animation-duration: 22s; + -o-animation-duration: 22s; + animation-duration: 22s; + left: 166px; + margin-top: 100px; + } + #site-footer .flake.f-17 { + -webkit-animation-duration: 18s; + -moz-animation-duration: 18s; + -ms-animation-duration: 18s; + -o-animation-duration: 18s; + animation-duration: 18s; + left: 177px; + margin-top: 73px; + } + #site-footer .flake.f-18 { + -webkit-animation-duration: 26s; + -moz-animation-duration: 26s; + -ms-animation-duration: 26s; + -o-animation-duration: 26s; + animation-duration: 26s; + left: 22px; + margin-top: 79px; + } + #site-footer .flake.f-19 { + -webkit-animation-duration: 20s; + -moz-animation-duration: 20s; + -ms-animation-duration: 20s; + -o-animation-duration: 20s; + animation-duration: 20s; + left: 31px; + margin-top: 41px; + } + #site-footer .flake.f-20 { + -webkit-animation-duration: 19s; + -moz-animation-duration: 19s; + -ms-animation-duration: 19s; + -o-animation-duration: 19s; + animation-duration: 19s; + left: 38px; + margin-top: 56px; + } + #site-footer .flake.f-21 { + -webkit-animation-duration: 31s; + -moz-animation-duration: 31s; + -ms-animation-duration: 31s; + -o-animation-duration: 31s; + animation-duration: 31s; + left: 56px; + margin-top: 43px; + } + #site-footer .flake.f-22 { + -webkit-animation-duration: 20s; + -moz-animation-duration: 20s; + -ms-animation-duration: 20s; + -o-animation-duration: 20s; + animation-duration: 20s; + left: 89px; + margin-top: 57px; + } + #site-footer .flake.f-23 { + -webkit-animation-duration: 18s; + -moz-animation-duration: 18s; + -ms-animation-duration: 18s; + -o-animation-duration: 18s; + animation-duration: 18s; + left: 90px; + margin-top: 30px; + } + #site-footer .flake.f-24 { + -webkit-animation-duration: 28s; + -moz-animation-duration: 28s; + -ms-animation-duration: 28s; + -o-animation-duration: 28s; + animation-duration: 28s; + left: 100px; + margin-top: 119px; + } + #site-footer .flake.f-25 { + -webkit-animation-duration: 29s; + -moz-animation-duration: 29s; + -ms-animation-duration: 29s; + -o-animation-duration: 29s; + animation-duration: 29s; + left: 114px; + margin-top: 14px; + } + #site-footer .flake.f-26 { + -webkit-animation-duration: 25s; + -moz-animation-duration: 25s; + -ms-animation-duration: 25s; + -o-animation-duration: 25s; + animation-duration: 25s; + left: 127px; + margin-top: 84px; + } + #site-footer .flake.f-27 { + -webkit-animation-duration: 26s; + -moz-animation-duration: 26s; + -ms-animation-duration: 26s; + -o-animation-duration: 26s; + animation-duration: 26s; + left: 134px; + margin-top: 114px; + } + #site-footer .flake.f-28 { + -webkit-animation-duration: 34s; + -moz-animation-duration: 34s; + -ms-animation-duration: 34s; + -o-animation-duration: 34s; + animation-duration: 34s; + left: 145px; + margin-top: 49px; + } + #site-footer .flake.f-29 { + -webkit-animation-duration: 29s; + -moz-animation-duration: 29s; + -ms-animation-duration: 29s; + -o-animation-duration: 29s; + animation-duration: 29s; + left: 148px; + margin-top: 42px; + } + #site-footer .flake.f-30 { + -webkit-animation-duration: 23s; + -moz-animation-duration: 23s; + -ms-animation-duration: 23s; + -o-animation-duration: 23s; + animation-duration: 23s; + left: 157px; + margin-top: 70px; + } + #site-footer .flake.f-31 { + -webkit-animation-duration: 18s; + -moz-animation-duration: 18s; + -ms-animation-duration: 18s; + -o-animation-duration: 18s; + animation-duration: 18s; + left: 165px; + margin-top: 78px; + } + + @-webkit-keyframes snow { + 0% { + -moz-transform: translateY(-110px); + -ms-transform: translateY(-110px); + -webkit-transform: translateY(-110px); + transform: translateY(-110px); + } + 100% { + -moz-transform: translateY(160px); + -ms-transform: translateY(160px); + -webkit-transform: translateY(160px); + transform: translateY(160px); + } + } + @-moz-keyframes snow { + 0% { + -moz-transform: translateY(-110px); + -ms-transform: translateY(-110px); + -webkit-transform: translateY(-110px); + transform: translateY(-110px); + } + 100% { + -moz-transform: translateY(160px); + -ms-transform: translateY(160px); + -webkit-transform: translateY(160px); + transform: translateY(160px); + } + } + @-ms-keyframes snow { + 0% { + -moz-transform: translateY(-110px); + -ms-transform: translateY(-110px); + -webkit-transform: translateY(-110px); + transform: translateY(-110px); + } + 100% { + -moz-transform: translateY(160px); + -ms-transform: translateY(160px); + -webkit-transform: translateY(160px); + transform: translateY(160px); + } + } + @keyframes snow { + 0% { + -moz-transform: translateY(-110px); + -ms-transform: translateY(-110px); + -webkit-transform: translateY(-110px); + transform: translateY(-110px); + } + 100% { + -moz-transform: translateY(160px); + -ms-transform: translateY(160px); + -webkit-transform: translateY(160px); + transform: translateY(160px); + } + } + .footer-claim, + .footer-claim *, + #site-footer > span, + #site-footer > span *, + .tree { + background: transparent !important; + } + </style> + + <div class="flake large f-1"></div> + <div class="flake large f-2"></div> + <div class="flake large f-3"></div> + <div class="flake large f-4"></div> + <div class="flake large f-5"></div> + <div class="flake large f-6"></div> + <div class="flake large f-7"></div> + <div class="flake large f-8"></div> + <div class="flake large f-9"></div> + <div class="flake large f-10"></div> + <div class="flake large f-11"></div> + <div class="flake large f-12"></div> + <div class="flake large f-13"></div> + <div class="flake large f-14"></div> + <div class="flake large f-15"></div> + <div class="flake large f-16"></div> + <div class="flake large f-17"></div> + <div class="flake f-18"></div> + <div class="flake f-19"></div> + <div class="flake f-20"></div> + <div class="flake f-21"></div> + <div class="flake f-22"></div> + <div class="flake f-23"></div> + <div class="flake f-24"></div> + <div class="flake f-25"></div> + <div class="flake f-26"></div> + <div class="flake f-27"></div> + <div class="flake f-28"></div> + <div class="flake f-29"></div> + <div class="flake f-30"></div> + <div class="flake f-31"></div> + <div class="tree left"> + <div class="snow"></div> + </div> + <div class="tree right"> + <div class="snow"></div> + </div> + <div class="ground"></div> + + <div class="container clearfix"> <p class="pull-left"> </p>