Created
July 27, 2018 20:47
-
-
Save samsjchi/8ecb7742bdcc5f1c105cd1b3398f71b2 to your computer and use it in GitHub Desktop.
JPMC Cards Unit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title><%= title="" %=""></%=></title> | |
| <meta name="ad.size" content="width=300,height=250"> | |
| <style> | |
| *{-webkit-tap-highlight-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden}body{margin:0;font-family:Neutral Std,-apple-system,BlinkMacSystemFont,Helvetica Neue,Roboto,Segoe UI,Arial,sans-serif}.c-content{background:#585858;overflow:hidden;position:absolute;width:100%;line-height:1.25}.c-cards{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:0 0 50px 20px;margin:0;list-style-type:none;overflow-x:scroll;overflow-y:visible;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;position:relative;left:90%;transition:left .5s ease-in-out}.c-cards::-webkit-scrollbar,.c-cards::-webkit-scrollbar-thumb,.c-cards::-webkit-scrollbar-track{display:none}.c-cards>li::first-child{margin-left:275px}.c-cards>li::last-child{margin-right:275px}.is-viewable .c-cards{left:0}.non-scrolling .c-cards{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.c-card{height:420px;width:275px;max-width:320px;background:#fff;-ms-flex-negative:0;flex-shrink:0;box-sizing:border-box;margin:20px 20px 0 0;box-shadow:5px 5px 10px rgba(0,0,0,.5);text-align:center;border-radius:5px;overflow:hidden;transition-timing-function:ease-out;transition-duration:.25s;transition-property:-webkit-transform box-shadow;transition-property:transform box-shadow;transition-property:transform box-shadow,-webkit-transform box-shadow;-webkit-transform:scale(.9) translateZ(0);transform:scale(.9) translateZ(0)}.c-card.is-active{-webkit-transform:scale(1.01) translateZ(0);transform:scale(1.01) translateZ(0)}.c-card__image{display:block;width:100%;padding-bottom:70%;background:#333;background-size:cover;background-position:50%;border-bottom:1px solid #f2f2f2;border-radius:5px 5px 0 0}.c-card__meta{display:block;margin:1.5em;font-size:.65rem;color:gray}.c-card__meta b,.c-card__meta span{display:block;line-height:1.5em;text-transform:uppercase;letter-spacing:1px}.c-card__meta b{font-weight:400;color:#e77760}.c-card__title{padding:0 1em;box-sizing:border-box;font-size:1.25rem;line-height:1.2em;font-weight:700;width:100%;margin:0 0 .25em}.c-card__title.is-long{font-size:1.1rem}.c-card__dek{padding:0 1em;box-sizing:border-box;font-size:.85rem;margin:0;margin-top:5px;color:gray}.c-card__read{color:#e77760;background:#f2f2f2;display:inline-block;border-radius:5px;margin:1.25em auto;padding:.95em 1.5em .65em;text-decoration:none;font-size:13px;letter-spacing:.25px}.non-scrolling .c-dots{display:none}.c-dots{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:1em 0;position:absolute;bottom:0}.c-dots__dot{display:block;background:#f2f2f2;border:0;border-radius:50%;height:.75em;width:.75em;margin:0 1em;outline:none;cursor:pointer}.c-dots__dot.is-active{background:#e77760} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="c-content"> | |
| <ul class="c-cards"> | |
| <li> | |
| <div class="c-card is-active"> | |
| <div class="c-card__image" style="background-image: url('https://cdn.theatlantic.com/assets/media/files/rethink/2017/jpmc/june/the-next-episode.jpg')"></div> | |
| <div class="c-card__meta"> | |
| <b>Sponsor Content</b> | |
| <span>JPMorgan Chase & Co.</span> | |
| </div> | |
| <h2 class="c-card__title">The Next Episode</h2> | |
| <p class="c-card__dek">As employers and employees face an ever-changing job market, can nonlinear careers become a new normal?</p> | |
| <a class="c-card__read" target="_blank" href="https://ad.doubleclick.net/ddm/trackclk/N5762.117907.THEATLANTICMONTHLY/B20717574.223979979;dc_trk_aid=422045688;dc_trk_cid=102998020;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=">Read The Article</a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="c-card"> | |
| <div class="c-card__image" style="background-image: url('https://cdn.theatlantic.com/assets/media/files/rethink/2017/jpmc/june/in-good-company.jpg')"></div> | |
| <div class="c-card__meta"> | |
| <b>Sponsor Content</b> | |
| <span>JPMorgan Chase & Co.</span> | |
| </div> | |
| <h2 class="c-card__title">In Good Company</h2> | |
| <p class="c-card__dek">It isn’t just a job—it’s where work and values connect.</p> | |
| <a class="c-card__read" target="_blank" href="https://ad.doubleclick.net/ddm/trackclk/N5762.117907.THEATLANTICMONTHLY/B20717574.223979979;dc_trk_aid=422045688;dc_trk_cid=102997411;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=">Read The Article</a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="c-card"> | |
| <div class="c-card__image" style="background-image: url('https://cdn.theatlantic.com/assets/media/files/rethink/2017/jpmc/june/a-working-education.jpg')"></div> | |
| <div class="c-card__meta"> | |
| <b>Sponsor Content</b> | |
| <span>JPMorgan Chase & Co.</span> | |
| </div> | |
| <h2 class="c-card__title">A Working Education</h2> | |
| <p class="c-card__dek">How students are learning the skills they’ll need to fill the biggest hole in the American job market.</p> | |
| <a class="c-card__read" target="_blank" href="https://ad.doubleclick.net/ddm/trackclk/N5762.117907.THEATLANTICMONTHLY/B20717574.223979979;dc_trk_aid=422045688;dc_trk_cid=102998023;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=">Read The Article</a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="c-card"> | |
| <div class="c-card__image" style="background-image: url('https://cdn.theatlantic.com/assets/media/files/rethink/2017/jpmc/june/jobs-for-americans.jpg')"></div> | |
| <div class="c-card__meta"> | |
| <b>Sponsor Content</b> | |
| <span>JPMorgan Chase & Co.</span> | |
| </div> | |
| <h2 class="c-card__title is-long">Jobs For Americans: A Lesson From Germany</h2> | |
| <p class="c-card__dek">Following in Germany’s footsteps could lead the U.S. to a stronger workforce.</p> | |
| <a class="c-card__read" target="_blank" href="https://ad.doubleclick.net/ddm/trackclk/N5762.117907.THEATLANTICMONTHLY/B20717574.223979979;dc_trk_aid=422045688;dc_trk_cid=102991906;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=">Read The Article</a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="c-card"> | |
| <div class="c-card__image" style="background-image: url('https://cdn.theatlantic.com/assets/media/files/rethink/2017/jpmc/june/startup-world.jpg')"></div> | |
| <div class="c-card__meta"> | |
| <b>Sponsor Content</b> | |
| <span>JPMorgan Chase & Co.</span> | |
| </div> | |
| <h2 class="c-card__title">In the Startup World, Mentorship Drives Greater Success</h2> | |
| <a class="c-card__read" target="_blank" href="https://ad.doubleclick.net/ddm/trackclk/N5762.117907.THEATLANTICMONTHLY/B20717574.223979979;dc_trk_aid=422045688;dc_trk_cid=103139036;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=">Read The Article</a> | |
| </div> | |
| </li> | |
| </ul> | |
| <div class="c-dots"></div> | |
| </div> | |
| </body> | |
| <script type="text/javascript" inline=""> | |
| "use strict";window.helpers=window.helpers||{},function(document,window,top,helpers){helpers.getViewability=function(){var clientRect=window.frameElement.getBoundingClientRect(),height=clientRect.height,elTop=clientRect.top,elBottom=clientRect.top+height,hiddenTop=Math.abs(Math.min(elTop,0)),hiddenBottom=Math.abs(Math.max(elBottom-top.innerHeight,0));return 100*(1-Math.min(hiddenTop+hiddenBottom,height)/height)}}(document,window,window.top,window.helpers); | |
| </script> | |
| <script type="text/javascript" inline=""> | |
| "use strict";!function(document,window,top){function filterForIFrame(event){var id=event.slot.getSlotElementId();return top.document.getElementById(id).contains(window.frameElement)}var $=top.$;window.top.googletag.pubads().addEventListener("slotVisibilityChanged",function(event){filterForIFrame(event)&&$(window).trigger("slotVisibilityChanged",event)}),window.top.googletag.pubads().addEventListener("impressionViewable",function(event){filterForIFrame(event)&&$(window).trigger("impressionViewable",event)})}(document,window,window.top); | |
| </script> | |
| <script type="text/javascript" inline=""> | |
| "use strict";var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target};!function(document,window,top){function loadPixel(src){var img=document.createElement("img");img.src=src,img.width=1,img.height=1,img.setAttribute("style","position: absolute; top: -1px; left: -1px; width:0; height:0; visibility:hidden;"),document.body.appendChild(img)}var $=top.$,gptAd=$(window.frameElement).closest("gpt-ad")[0];window.Analytics=function(options){this.options=options,this.interacted=!1,this.debug=!!top.location.search.match(/debug_custom_ads/),this._queue=[],this._recorded=[],this.bindEvents(),this.options.video&&this.bindVideoEvents(this.options.video),this.loadKeen(),this.device=function(){var ua=window.navigator.userAgent,w=window.screen.width,name="desktop";return w<1e3&&(name="tablet"),w<599&&(name="mobile"),ua.match(/iPad/)?name="tablet":ua.match(/iPhone/)?name="mobile":"desktop"===name&&ua.match("Android")&&(name="tablet"),name}(),window.KeenAsync.ready(function(){this.client=new window.KeenAsync({projectId:"58d28fc995cfc91c2b8e516e",writeKey:"C1F80F8637F4EE4B1272F54358B5517CC551ECA7296CEC2EC23FBD11AC31E1E70BD8527A1D945D9AB128B448FFC6C9BE185244996C6C5D9C82BD966F96506D3AC73E0A427FE8C7F466B6E2E5699DB82E9FF5AFA729CAC36ADE0DA096F936202F"}),this.executeQueue()}.bind(this))},window.Analytics.prototype.bindEvents=function(){function trackImpression(){setTimeout(function(){var metrics=window.performance.timing,init=window.performance.timing.fetchStart;self.record("impression",{perf_dom_interactive:metrics.domInteractive-init,perf_dom_complete:metrics.domComplete-init,perf_response:metrics.responseEnd-init,perf_load:metrics.loadEventEnd-init},!0)},250)}var self=this;window.performance.timing.loadEventEnd>0?trackImpression():$(window).on("load",trackImpression),$(window).one("impressionViewable",function(){self.record("viewable-impression",null,1)}),$(document).on("click",function(){self.record("click",null,!1,!0)}),$(gptAd).on("click",function(){self.record("click",null,!1,!0)}),$(document).on("click","[href]",function(){self.record("click-link",null,!1,!0)}),$(gptAd).on("click","[href]",function(){self.record("click-link",null,!1,!0)}),$(document).one("mouseenter",function(){self.record("hover",null,!1,!0)}),$(gptAd).one("mouseenter",function(){self.record("hover",null,!1,!0)}),$(document).on("submit",function(){self.record("form-submit",null,!1,!0)})},window.Analytics.prototype.executeQueue=function(){for(var i=0;i<this._queue.length;i++)this.record.apply(this,this._queue[i])},window.Analytics.prototype.loadKeen=function(){this.client=null,function(name,path,ctx){var latest,prev=!!window.Keen&&window.Keen;ctx[name]=ctx[name]||{ready:function(fn){var loaded,h=document.getElementsByTagName("head")[0],s=document.createElement("script"),w=window;s.onload=s.onerror=s.onreadystatechange=function(){if(!(s.readyState&&!/^c|loade/.test(s.readyState)||loaded)){if(s.onload=s.onreadystatechange=null,loaded=1,latest=w.Keen,prev)w.Keen=prev;else try{delete w.Keen}catch(e){w.Keen=void 0}ctx[name]=latest,ctx[name].ready(fn)}},s.async=1,s.src="https://d26b395fwzu5fz.cloudfront.net/keen-tracking-1.1.3.min.js",h.parentNode.insertBefore(s,h)}}}("KeenAsync",0,window)},window.Analytics.prototype.record=function(name,data,unique,isInteraction){if(!this.client)return void this._queue.push(arguments);if(!(unique&&this._recorded.indexOf(name)>-1)){var isFirstInteraction=!1;isInteraction&&!this.interacted&&(isFirstInteraction=!0,this.interacted=!0),this._recorded.push(name);var pixelData=_extends({eventName:name,documentTitle:document.title,isInteraction:isInteraction,isFirstInteraction:isFirstInteraction,deviceCategory:this.device,deviceUserAgent:window.navigator.userAgent,gptCreativeId:gptAd.creativeId,gptCampaignId:gptAd.campaignId,gptLineItemId:gptAd.lineItemId,gptAdvertiserId:gptAd.advertiserId},this.options.extra||{},data||{}),params=[];for(var key in pixelData)pixelData[key]&¶ms.push(key+"="+encodeURIComponent(pixelData[key]));params=params.join("&");loadPixel("https://data-cdn.theatlantic.com/custom-ads.gif?"+params),data=_extends({eventName:name,documentTitle:document.title,isInteraction:isInteraction,isFirstInteraction:isFirstInteraction,device:{category:this.device,userAgent:window.navigator.userAgent},gpt:{creativeId:gptAd.creativeId,campaignId:gptAd.campaignId,lineItemId:gptAd.lineItemId,advertiserId:gptAd.advertiserId},extra:this.options.extra||{}},data||{}),this.debug&&(console.debug("Tracking:"),console.debug(data)),void 0===window.___browserSync___&&this.client.recordEvent("custom-ad-event",data)}},window.Analytics.prototype.bindVideoEvents=function(video){var self=this,$el=$(video.el,document);if(0!==$el.length){var getProgressData=function(e){return{sound:e.target.muted,filename:e.target.src}},getVersion=function(){var version="autoplay";return video.expandedCondition&&video.expandedCondition()&&(version="full"),version};$el.one("play",function(e){self.record("video-play",{filename:e.target.src})}),$el.on("stalled",function(e){self.record("video-stalled",{filename:e.target.src})}),$el.on("ended",function(e){self.record(getVersion()+"-video-progess-100",getProgressData(e),!0),$el.one("timeupdate",function(){self.record(getVersion()+"-video-loop",{filename:e.target.src})})}),$el.on("timeupdate",function(e){e.target.muted||self.record("video-unmuted",null,!0,!0);var position=Math.ceil(e.target.currentTime/e.target.duration*100);e.target.duration-e.target.currentTime<1&&(e.target._isLooping=!0);var version=getVersion(),data=getProgressData(e);100===position||position<e.target._isLooping?self.record(version+"-video-progess-100",data,!0):position>90?self.record(version+"-video-progess-90",data,!0):position>75?self.record(version+"-video-progess-75",data,!0):position>50?self.record(version+"-video-progess-50",data,!0):position>25&&self.record(version+"-video-progess-25",data,!0)})}}}(document,window,window.top); | |
| </script> | |
| <script type="text/javascript"> | |
| "use strict";window.requestAnimationFrame=window.requestAnimationFrame||function(callback){window.setTimeout(callback,1e3/60)},function(document,window,top,helpers){function setLayout(){var el=document.getElementsByClassName("c-content")[0],height=el.getBoundingClientRect().height;window.frameElement.style.height=height+"px";var w=document.querySelector(".c-cards").scrollWidth,$body=$("body",document);window.innerWidth>=w?$body.addClass("non-scrolling"):$body.removeClass("non-scrolling")}function setActive(card){var $card=$(card);$card.hasClass("is-active")||requestAnimationFrame(function(){$(".is-active",document).removeClass("is-active"),$card.addClass("is-active");var i=$(".c-card",document).index($card);$(".c-dots__dot",document).eq(i).addClass("is-active")})}function scrollToPosition(el,pos){requestAnimationFrame(function(){var atBeginning=pos<0&&0===el.scrollLeft,atEnd=el.offsetWidth+el.scrollLeft===el.scrollWidth&&pos>=el.scrollLeft;if(el.scrollLeft===pos||atBeginning||atEnd)return void(isScrolling=!1);isScrolling=!0;var distance=Math.abs(el.scrollLeft-pos);distance=Math.min(Math.abs(distance),25),el.scrollLeft>pos?el.scrollLeft-=distance:el.scrollLeft+=distance,scrollToPosition(el,pos)})}var $=top.$;window.frameElement.style.width="100%";var analytics=new window.Analytics({});window.onresize=setLayout,$(window).on("slotVisibilityChanged",function(e,data){var inView=data.inViewPercentage>50,cards=document.querySelector(".c-cards");inView?$("body",document).addClass("is-viewable"):0===cards.scrollLeft&&$("body",document).removeClass("is-viewable")});var _scrolled=!0;$(".c-cards",document).on("scroll",function(){_scrolled=!0}),$(document).on("mouseenter",".c-card",function(e){setActive(e.currentTarget)}),$(document).on("touchstart click touchmove",".c-card",function(e){setActive(e.currentTarget)}),window.onload=function(){setLayout(),helpers.getViewability()>50&&$("body",document).addClass("is-viewable")},$(".c-cards",document).one("scroll",function(){analytics.record("swipe",null,!1,!0)}),window.innerWidth<600&&$(".c-cards",document).on("scroll",function(){for(var cards=this,pos=cards.scrollLeft,leftLimit=cards.scrollLeft-.2*window.innerWidth,rightLimit=pos+.5*window.innerWidth,i=0;i<cards.children.length;i++){var item=cards.children[i],card=item.querySelector(".c-card");item.offsetLeft>leftLimit&&item.offsetLeft<rightLimit&&setActive(card)}});var isScrolling=!1;!function(){var $cards=$(".c-card",document),$dots=$(".c-dots",document);$cards.each(function(){var $dot=$("<div />",{class:"c-dots__dot"});$dots.append($dot);var self=this;$dot.on("click touchstart",function(){if(!isScrolling){setActive(self);var destination=Math.round(self.offsetLeft-window.innerWidth/2+self.offsetWidth/2);scrollToPosition(document.querySelector(".c-cards"),destination)}})})}()}(document,window,window.top,window.helpers||{}); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment