<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="title"> <p>One Year of</p> <p>Receipts Takes</p> </section> <section class="cards"> <div class="card card--oil"> <div class="card__svg-container"> <div class="card__svg-wrapper"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feBlend in="SourceGraphic" in2="goo" /> </filter> <circle cx="40" cy="40" r="39" fill="#6a7a87"/> <g filter="url(#goo)"> <path id="myTeardrop" fill="#FFFFFF" d="M48.9,43.6c0,4.9-4,8.9-8.9,8.9s-8.9-4-8.9-8.9S40,27.5,40,27.5S48.9,38.7,48.9,43.6z"/> <path id="TopInit" fill="#FFFFFF" d="M13,10.8c5-5.3,10.7-8.5,18.3-9.8c11.2-1.8,9.2-1.4,17.6,0C58.3,2.7,66,6,69,13.1V-2.7L13-2.8V10.8z"/> <path id="TopBulb" fill="#FFFFFF" d="M13,10.8c5-5.3,14.8-4,18.3,2.3c4.3,7.7,13.8,7.6,17.6,0c3.4-7,17.1-7.1,20.1,0V-2.7L13-2.8V10.8z" style="visibility: hidden"/> <path id="TopBulbSm" fill="#FFFFFF" d="M13,10.8c5-5.3,18.5-14,23.3-8.8c3.6,3.9,3.9,4.5,7.6,0c5-6,22.1,3.9,25.1,11V-2.7L13-2.8V10.8z" style="visibility: hidden"/> <path id="TopRound" fill="#FFFFFF" d="M13,10.8c5-5.3,10.6-6,18.3-6.8c6.5-0.7,10.5-0.8,17.6,0C58.4,5.1,66,6,69,13.1V-2.7L13-2.8V10.8z" style="visibility: hidden"/> </g> </svg> </div> </div> <div class="card__count-container"> <div class="card__count-text"> <span class="card__count-text--big">250</span> Million </div> </div> <div class="card__stuff-container"> <div class="card__stuff-icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"> <path fill="#6a7a87" d="M9.4,2L9.2,2.3v0.4v7.6v0.4L9.4,11H3.6l0.3-0.3v-0.4V2.7V2.3L3.6,2H9.4 M12,1H1l1.8,1.7v7.6L1,12h11l-1.8-1.7V2.7L12,1L12,1z"/> <line fill="none" stroke="#6a7a87" class="st0" x1="3" y1="6.5" x2="10" y2="6.5"/> </svg> </div> <div class="card__stuff-text"> Gallons of oil</div> </div> </div> <div class="card card--tree"> <div class="card__svg-container"> <div class="card__svg-wrapper"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"> <circle cx="40" cy="40" r="39" fill="#6abf60"/> <g id="Branches"> <polygon id="topBranches" fill="#FFFFFF" points="40.1,19.8 51.2,43.1 29,43.1"/> <polygon id="botBranches" fill="#FFFFFF" points="40,28 52,54.3 28,54.3"/> </g> <rect id="Trunk" x="37.7" y="53.8" fill="#FFFFFF" width="4.7" height="6"/> <rect id="Particle" x="37.9" y="54.3" fill="#FFFFFF" width="2" height="2"/> <polygon id="Axe" fill="#FFFFFF" points="0.7,5.3 7.3,5.3 7.3,10.2 4,20.3 0.7,10.2"/> </svg> </div> </div> <div class="card__count-container"> <div class="card__count-text"> <span class="card__count-text--big">10</span> Million </div> </div> <div class="card__stuff-container"> <div class="card__stuff-icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"> <polygon fill="none" stroke="#6a7a87" points="3.5,1.5 5.5,1.5 5.5,5 9.5,1.5 9.5,9 11,11.5 2,11.5 3.5,9 "/> </svg> </div> <div class="card__stuff-text"> Trees cut </div> </div> </div> <div class="card card--water"> <div class="card__svg-container"> <div class="card__svg-wrapper"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"> <circle cx="40" cy="40" r="39" fill="#60cbe7"/> <g id="waveGroup"> <path id="waveTop" fill="#FFFFFF" d="M93,34.1c-3.5,0-5.8-1.1-8.1-4.1h0c-1.6,3-4.9,4.3-8.4,4.3c-3.5,0-6.1-1.3-8.4-4.3h0c-1.6,3-5.1,4.1-8.6,4.1 c-3.5,0-6.6-2-8.6-4.6v0c-2,2.6-4.5,4.3-8,4.3c-3.5,0-6-1.7-8-4.3v0c-2,2.6-5.1,4.5-8.6,4.5c-3.5,0-6.3-1.1-8.5-4.1h0 c-1.6,3-4.9,4.3-8.4,4.3C6,34.3,3.3,33,1.1,30h0c-1.6,3-4.5,4.1-8,4.1c-3.5,0-6-2-8-4.6v0c-2,2.6-5.5,4.3-9,4.3c-3.5,0-6-1.7-9-4.3 v6.6c3,1.5,5.6,2.3,8.6,2.3s6.2-0.9,8.5-2.3c2.2,1.5,5.4,2.3,8.5,2.3s6.1-0.9,8.4-2.3c2.2,1.5,5.4,2.3,8.4,2.3s6.1-0.9,8.4-2.3 c2.2,1.5,5.4,2.3,8.4,2.3s6.1-0.9,8.4-2.3c2.2,1.5,5.3,2.3,8.4,2.3s6.1-0.9,8.4-2.3c2.2,1.5,5.3,2.3,8.4,2.3s6.1-0.9,8.4-2.3 c2.2,1.5,5.3,2.3,8.4,2.3s6.1-0.9,8.4-2.3c2.2,1.5,5,2.3,8,2.3s6-0.9,8-2.3v-6.6C100,32.1,96.5,34.1,93,34.1z"/> <path id="waveBot" fill="#FFFFFF" d="M98,46.1c-3.5,0-5.8-1.1-8.1-4.1h0c-1.6,3-4.9,4.3-8.4,4.3c-3.5,0-6.1-1.3-8.4-4.3h0c-1.6,3-5.1,4.1-8.6,4.1 c-3.5,0-6.6-2-8.6-4.6v0c-2,2.6-4.5,4.3-8,4.3c-3.5,0-6-1.7-8-4.3v0c-2,2.6-5.1,4.5-8.6,4.5c-3.5,0-6.3-1.1-8.5-4.1h0 c-1.6,3-4.9,4.3-8.4,4.3C11,46.3,8.3,45,6.1,42h0c-1.6,3-4.5,4.1-8,4.1c-3.5,0-6-2-8-4.6v0c-2,2.6-5.5,4.3-9,4.3c-3.5,0-6-1.7-9-4.3 v6.6c3,1.5,5.6,2.3,8.6,2.3s6.2-0.9,8.5-2.3c2.2,1.5,5.4,2.3,8.5,2.3s6.1-0.9,8.4-2.3c2.2,1.5,5.4,2.3,8.4,2.3s6.1-0.9,8.4-2.3 c2.2,1.5,5.4,2.3,8.4,2.3c3,0,6.1-0.9,8.4-2.3c2.2,1.5,5.3,2.3,8.4,2.3s6.1-0.9,8.4-2.3c2.2,1.5,5.3,2.3,8.4,2.3 c3,0,6.1-0.9,8.4-2.3c2.2,1.5,5.3,2.3,8.4,2.3s6.1-0.9,8.4-2.3c2.2,1.5,5,2.3,8,2.3s6-0.9,8-2.3v-6.6C105,44.1,101.5,46.1,98,46.1z" /> </g> </svg> </div> </div> <div class="card__count-container"> <div class="card__count-text"> <span class="card__count-text--big">One</span> Billion </div> </div> <div class="card__stuff-container"> <div class="card__stuff-icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"> <path fill="none" stroke="#6a7a87" d="M1,1.5c0.9,0,0.9,2,1.8,2c0.9,0,0.9-2,1.8-2c0.9,0,0.9,2,1.8,2c0.9,0,0.9-2,1.8-2c0.9,0,0.9,2,1.8,2s0.9-2,1.8-2"/> <path fill="none" stroke="#6a7a87" d="M1,5.5c0.9,0,0.9,2,1.8,2c0.9,0,0.9-2,1.8-2c0.9,0,0.9,2,1.8,2c0.9,0,0.9-2,1.8-2c0.9,0,0.9,2,1.8,2s0.9-2,1.8-2"/> <path fill="none" stroke="#6a7a87" d="M1,9.5c0.9,0,0.9,2,1.8,2c0.9,0,0.9-2,1.8-2c0.9,0,0.9,2,1.8,2c0.9,0,0.9-2,1.8-2c0.9,0,0.9,2,1.8,2s0.9-2,1.8-2"/> </svg> </div> <div class="card__stuff-text"> Gallons of water</div> </div> </div> </section> <script> "use strict"; function newAnimationObj() { var timeline = arguments.length <= 0 || arguments[0] === undefined ? new TimelineMax() : arguments[0]; var obj = {}; obj.last = false; obj.start = function () { obj.last = false; timeline.resume(); }; obj.stop = function () { obj.last = true; }; return obj; } var newOilAnimation = function newOilAnimation() { var oilTL = new TimelineMax({ repeat: -1, repeatDelay: 0.3 }); var oilObj = newAnimationObj(oilTL); oilTL.to("#myTeardrop", 0.3, { y: 55, ease: Power3.easeIn }).set("#myTeardrop", { y: -53 }).to("#myTeardrop", 0.8, { y: -24, ease: Power4.easeIn }).to("#TopInit", 0.8, { morphSVG: { shape: "#TopBulb" }, ease: Power4.easeIn }, "-=0.8").to("#TopInit", 0.17, { morphSVG: { shape: "#TopBulbSm" }, ease: Power0.easeOut }).to("#TopInit", 0.03, { morphSVG: { shape: "#TopInit" }, ease: Power0.easeOut }).to("#TopInit", 0.05, { morphSVG: { shape: "#TopRound" }, ease: Power0.easeNone }).to("#TopInit", 0.3, { morphSVG: { shape: "#TopInit" }, ease: Bounce.easeOut }).to("#myTeardrop", 1.2, { y: 0, ease: Elastic.easeOut.config(1.2, 0.3), onComplete: function onComplete() { if (oilObj.last == true) oilTL.pause(); } }, "-=0.55").invalidate(); oilTL.pause(); return oilObj; }; var newTreeAnimation = function newTreeAnimation() { var treeTL = new TimelineMax({ repeat: -1, repeatDelay: 0.3 }); var treeObj = newAnimationObj(treeTL); TweenMax.set("#Axe", { transformOrigin: '50% 50%' }); TweenMax.set(["#Branches", "#Trunk", "#topBranches", "#botBranches"], { transformOrigin: '50% 100%' }); treeTL.to("#Axe", 0.3, { bezier: { values: [{ x: 0, y: 0 }, { x: 5, y: 37 }, { x: 30, y: 43 }], autoRotate: -90 }, ease: Power1.easeIn }).to("#Axe", 0.2, { x: -10, ease: Power0.easeNone }).to("#Particle", 0.2, { x: -10, y: 4, ease: Power1.easeIn }, "-=0.2").to("#Branches", 0.05, { rotation: 5, ease: Power0.easeNone }, "-=0.25").to("#Branches", 0.05, { rotation: 0, ease: Power0.easeNone }, "-=0.20").set("#Particle", { autoAlpha: 0 }).set("#Branches", { transformOrigin: '100% 100%' }).to("#Branches", 0.3, { rotation: 90, y: 7, ease: Bounce.easeOut }, "+=0.05").to("#Branches", 0.5, { x: 28, ease: SlowMo.ease.config(0.5, 0.8, false) }, "+=0.1").to("#Trunk", 0.2, { scaleY: 0, ease: SlowMo.ease.config(0.1, 0.7, true) }, "+=0.1").set("#Branches", { x: 0, y: 0, rotation: 0 }).set("#topBranches", { scale: 0.1, y: 10 }).set("#botBranches", { scale: 0.1 }).to("#botBranches", 0.2, { scale: 1, ease: Power2.easeOut }).to("#topBranches", 0.2, { scale: 1, ease: Power2.easeOut }, "-=0.15").to("#topBranches", 0.25, { y: 0, ease: Back.easeOut.config(3), onComplete: function onComplete() { if (treeObj.last == true) treeTL.pause(); } }, "-=0.15").invalidate(); treeTL.pause(); return treeObj; }; var newWaveAnimation = function newWaveAnimation() { var waveTL = new TimelineMax({ repeat: -1, repeatDelay: 0.3 }); var waveObj = newAnimationObj(waveTL); var xDur = 2; var dx = 16.5; TweenMax.set("#waveGroup", { transformOrigin: '50% 50%' }); waveTL.to("#waveGroup", 0.25, { rotation: -3, ease: Power2.easeOut }).to("#waveGroup", 1.5, { rotation: 0, ease: Elastic.easeOut.config(2, 0.2) }).to("#waveTop", xDur, { x: dx, ease: Power0.easeNone }, "0").to("#waveBot", xDur, { x: -dx, ease: Power0.easeNone, onComplete: function onComplete() { if (waveObj.last == true) waveTL.pause(); } }, "0").invalidate(); waveTL.pause(); return waveObj; }; var waveAnimation = newWaveAnimation(); var treeAnimation = newTreeAnimation(); var oilAnimation = newOilAnimation(); setTimeout(function () { treeAnimation.start(); treeAnimation.stop(); }, 300); //TweenMax.globalTimeScale(0.5); $(document).on("mouseenter touchstart", ".card", function (e) { if (e.currentTarget.classList[1] == "card--water") { waveAnimation.start(); } if (e.currentTarget.classList[1] == "card--tree") { treeAnimation.start(); } if (e.currentTarget.classList[1] == "card--oil") { oilAnimation.start(); } }); $(document).on("mouseleave touchend", ".card", function (e) { e.preventDefault(); [waveAnimation, treeAnimation, oilAnimation].forEach(function (obj) { obj.stop(); }); }); </script>

*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-size: 62.5%; font-family: 'Raleway', sans-serif; } @media screen and (max-width: 620px) { html, body { font-size: 45%; } } @media screen and (max-width: 480px) { html, body { font-size: 70%; } } .forhtml { background: -webkit-radial-gradient(bottom, #aac1c7, #f7fbfb 80%) no-repeat center center fixed; background: radial-gradient(to top, #aac1c7, #f7fbfb 80%) no-repeat center center fixed; background-size: cover; } body { color: #686e74; overflow-x: hidden; min-height: 100vh; } section { width: 80vw; max-width: 64rem; min-width: 58.9rem; margin: 0 auto; } @media screen and (max-width: 480px) { section { min-width: 19rem; } } .title { font-size: 4rem; font-weight: 900; padding-top: 10vh; } @media screen and (max-width: 480px) { .title { font-size: 3rem; text-align: center; position: relative; padding-top: 6vh; } } .title:after { content: ""; display: block; height: .3rem; width: 5.4rem; background-color: #fbcd8a; -webkit-transform: translate(0.3rem, 2rem); transform: translate(0.3rem, 2rem); } @media screen and (max-width: 480px) { .title:after { left: 50%; position: absolute; -webkit-transform: translate(-50%, 2rem); transform: translate(-50%, 2rem); } } .cards { padding-top: 6rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 480px) { .cards { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .card { width: 19rem; height: 22.5rem; background-color: #f9fbfb; border-radius: 6px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: #5a6c7a; font-size: 1rem; font-weight: 700; letter-spacing: .05rem; box-shadow: 0 2rem 4rem #aac1c7; } @media screen and (max-width: 480px) { .card { margin-bottom: 2rem; } } .card__svg-container { height: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .card__svg-wrapper { width: 8rem; } .card__count-container { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .card__count-text { -webkit-transform: translate(0, -0.5rem); transform: translate(0, -0.5rem); } .card__count-text--big { text-transform: uppercase; font-size: 5rem; font-weight: 300; } .card__stuff-container { margin: 0 auto; width: 90%; height: 15%; border-top: 2px solid #e7edef; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .card__stuff-icon, .card__stuff-text { display: inline-block; } .card__stuff-icon { width: 1.3rem; height: 1.3rem; -webkit-transform: translate(0, -0.3rem); transform: translate(0, -0.3rem); } .card__stuff-text { text-transform: uppercase; margin-left: .4rem; -webkit-transform: translate(0, -0.2rem); transform: translate(0, -0.2rem); } .card:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 16rem; height: 5.625rem; -webkit-transform: translate(1.5rem, 22.5rem); transform: translate(1.5rem, 22.5rem); } .card--oil:after { background-image: -webkit-radial-gradient(top, rgba(106, 122, 135, 0.5), rgba(0, 0, 0, 0) 70%); background-image: radial-gradient(to bottom, rgba(106, 122, 135, 0.5), rgba(0, 0, 0, 0) 70%); } .card--tree:after { background-image: -webkit-radial-gradient(top, rgba(106, 191, 96, 0.5), rgba(0, 0, 0, 0) 70%); background-image: radial-gradient(to bottom, rgba(106, 191, 96, 0.5), rgba(0, 0, 0, 0) 70%); } .card--water:after { background-image: -webkit-radial-gradient(top, rgba(96, 203, 231, 0.5), rgba(0, 0, 0, 0) 70%); background-image: radial-gradient(to bottom, rgba(96, 203, 231, 0.5), rgba(0, 0, 0, 0) 70%); }