CodePen Embed - Animated Bootstrap card deck

Live

This Pen is owned by Chiel Reijnen on CodePen.

External CSS

External JavaScript

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"tabs\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":3,\"theme\":\"twilight\",\"id\":\"YzyPqBw\",\"auto_save\":true},\"hashid\":\"YzyPqBw\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css\",\"order\":1,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/popper.min.js\",\"order\":1,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js\",\"order\":2,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://fonts.googleapis.com/css?family=Montserrat:400,700,800,900&amp;display=swap\",\"order\":2,\"resource_type\":\"css\",\"par_content\":\"\"}],\"tags\":[\"bootstrap cards\",\"card\",\"slideshow\",\"display\",\"card-deck\"],\"id\":43958381,\"user_id\":551018,\"html\":\"<div class=\\\"card-sliders \\\">\\n\\t<div class=\\\"container \\\">\\n\\t\\t<div class=\\\"row align-items-center\\\">\\n\\t\\t\\t<div class=\\\"col-md\\\">\\n\\t\\t\\t\\t<h3>Animated Bootstrap card decks</h3>\\n\\t\\t\\t\\t<p class=\\\"lead\\\">Using Bootstrap, Animate.css and jQuery</p>\\n\\t\\t\\t\\t\\n\\t\\t\\t\\t<div class=\\\"row mt-5\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"col-lg\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"card-decks\\\">\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"card-deck deck-active\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"card\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t  <img class=\\\"card-img\\\" src=\\\"https://images.pexels.com/photos/1660995/pexels-photo-1660995.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260\\\" alt=\\\"Card image\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t  <div class=\\\"card-img-overlay\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t <h5 class=\\\"card-title\\\">An awesome title</h5>\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t <p class=\\\"card-text\\\">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t <p class=\\\"card-text\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t Photo taken by\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t <a href=\\\"https://www.pexels.com/nl-nl/foto/architectuur-ijsland-toren-vuurtoren-1660995/\\\">Tomáš Malík</a>\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t</p>\\n\\t\\t\\t\\t\\t\\t\\t\\t  </div>\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"card\\\">\\n\\t\\t\\t\\t\\t\\t\\t  <img class=\\\"card-img\\\" src=\\\"https://images.pexels.com/photos/2501968/pexels-photo-2501968.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260\\\" alt=\\\"Card image\\\">\\n\\t\\t\\t\\t\\t\\t\\t  <div class=\\\"card-img-overlay\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t <h5 class=\\\"card-title\\\">An awesome title</h5>\\n\\t\\t\\t\\t\\t\\t\\t\\t <p class=\\\"card-text\\\">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>\\n\\t\\t\\t\\t\\t\\t\\t\\t <p class=\\\"card-text\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t Photo taken by\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t <a href=\\\"https://www.pexels.com/nl-nl/@jeffrey-czum-254391\\\">Jeffrey Czum</a>\\n\\t\\t\\t\\t\\t\\t\\t\\t</p>\\n\\t\\t\\t\\t\\t\\t\\t  </div>\\n\\t\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"card\\\">\\n\\t\\t\\t\\t\\t\\t\\t  <img class=\\\"card-img\\\" src=\\\"https://images.pexels.com/photos/96932/pexels-photo-96932.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260\\\" alt=\\\"Card image\\\">\\n\\t\\t\\t\\t\\t\\t\\t  <div class=\\\"card-img-overlay\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t <h5 class=\\\"card-title\\\">An awesome title</h5>\\n\\t\\t\\t\\t\\t\\t\\t\\t <p class=\\\"card-text\\\">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>\\n\\t\\t\\t\\t\\t\\t\\t\\t <p class=\\\"card-text\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t Photo taken by\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t <a href=\\\"https://www.pexels.com/nl-nl/@francesco-ungaro\\\">Francesco Ungaro</a>\\n\\t\\t\\t\\t\\t\\t\\t\\t</p>\\n\\t\\t\\t\\t\\t\\t\\t  </div>\\n\\t\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"card-deck\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"card\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t  <img class=\\\"card-img\\\" src=\\\"https://images.pexels.com/photos/3715436/pexels-photo-3715436.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260\\\" alt=\\\"Card image\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t  <div class=\\\"card-img-overlay\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t <h5 class=\\\"card-title\\\">An awesome title</h5>\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t <p class=\\\"card-text\\\">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t <p class=\\\"card-text\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t Photo taken by\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t <a href=\\\"https://www.pexels.com/nl-nl/@aleksey-kuprikov-1883853\\\">\\nAleksey Kuprikov</a>\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t</p>\\n\\t\\t\\t\\t\\t\\t\\t\\t  </div>\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"card\\\">\\n\\t\\t\\t\\t\\t\\t\\t  <img class=\\\"card-img\\\" src=\\\"https://images.pexels.com/photos/1829191/pexels-photo-1829191.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260\\\" alt=\\\"Card image\\\">\\n\\t\\t\\t\\t\\t\\t\\t  <div class=\\\"card-img-overlay\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t <h5 class=\\\"card-title\\\">An awesome title</h5>\\n\\t\\t\\t\\t\\t\\t\\t\\t <p class=\\\"card-text\\\">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>\\n\\t\\t\\t\\t\\t\\t\\t\\t <p class=\\\"card-text\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t Photo taken by\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t <a href=\\\"https://www.pexels.com/nl-nl/@braydenlaw\\\">Brayden Law</a>\\n\\t\\t\\t\\t\\t\\t\\t\\t</p>\\n\\t\\t\\t\\t\\t\\t\\t  </div>\\n\\t\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"card\\\">\\n\\t\\t\\t\\t\\t\\t\\t  <img class=\\\"card-img\\\" src=\\\"https://images.pexels.com/photos/2096698/pexels-photo-2096698.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260\\\" alt=\\\"Card image\\\">\\n\\t\\t\\t\\t\\t\\t\\t  <div class=\\\"card-img-overlay\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t <h5 class=\\\"card-title\\\">An awesome title</h5>\\n\\t\\t\\t\\t\\t\\t\\t\\t <p class=\\\"card-text\\\">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>\\n\\t\\t\\t\\t\\t\\t\\t\\t <p class=\\\"card-text\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t Photo taken by\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t <a href=\\\"https://www.pexels.com/nl-nl/@braydenlaw\\\">Brayden Law</a>\\n\\t\\t\\t\\t\\t\\t\\t\\t</p>\\n\\t\\t\\t\\t\\t\\t\\t  </div>\\n\\t\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t</div>\\n\\n\\t\\t\\t\\t</div>\\n\\t\\t\\t\\n\\t\\t\\t\\t\\n\\t\\t\\t</div>\\n\\t\\t</div>\\n\\t\\t\\n\\t</div>\\n</div>\\n\",\"css\":\"$extraDark: #181A28;\\n$dark: #2A2E45;\\n$light: #343956;\\n$green: #3BCEAC;\\n\\n\\n\\nbody{\\n\\theight:100%;\\n\\tbackground:$dark;\\n\\tcolor:#FFF;\\n\\tfont-family: \\\"montserrat\\\";\\n\\n\\t&:before{\\n\\t\\tcontent: '';\\n\\t\\theight:  100%;\\n\\t\\twidth:   100%;\\n\\t\\tbackground: repeating-linear-gradient(120deg, $light, $light 2px, transparent 2px, transparent 17.5vw);\\n\\t\\tposition:absolute;\\n\\t}\\n}\\n\\n.card-sliders{\\n\\toverflow:hidden;\\n\\theight:95vh;\\n\\t\\n\\t.container{\\n\\t\\theight:100%!important;\\n\\t\\t.row{\\n\\t\\t\\theight:100%;\\n\\t\\t}\\n\\t}\\n\\t\\n\\t.card-decks{\\n\\t\\t.card-deck{\\n\\t\\t\\tdisplay:none;\\n\\t\\t\\t&.deck-active{\\n\\t\\t\\t\\tdisplay:flex;\\n\\t\\t\\t}\\n\\t\\t\\t\\n\\t\\t\\t.card{\\n\\t\\t\\t\\tfont-size: 0.8rem;\\n\\t\\t\\t\\tborder:0;\\n\\t\\t\\t\\tborder-radius: 1.25rem;\\n\\t\\t\\t\\tbox-shadow: 0 10px 20px 2px $extraDark; \\n\\t\\t\\t\\tcolor: #FFF;\\t\\t\\t\\n\\t\\t\\t\\t\\n\\t\\t\\t\\theight: 300px;\\n\\t\\t\\t\\toverflow:hidden;\\n\\t\\t\\t\\n\\t\\t\\t\\th1,h2,h3,h4,h5,h6{\\n\\t\\t\\t\\t\\tfont-weight:bold;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\ta{\\n\\t\\t\\t\\t\\tcolor:$green;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\timg{\\n\\t\\t\\t\\t\\twidth:200%;\\n\\t\\t\\t\\t\\theight:200%;\\n\\t\\t\\t\\t\\tobject-fit:cover;\\n\\t\\t\\t\\t\\t\\n\\t\\t\\t\\t\\tposition:absolute;\\n\\t\\t\\t\\t\\ttop:50%;\\n\\t\\t\\t\\t\\tleft:50%;\\n\\t\\t\\t\\t\\ttransform: translate(-50%,-50%);\\n\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t.card-img-overlay{\\n\\t\\t\\t\\t\\tbackground: rgba(0,0,0,0.5)\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t\\t\\n\\t\\t}\\n\\t}\\n\\t\\n}\\n\\n/* Custom animate.css delay */\\n.animated.delay-02s {\\n  -webkit-animation-delay: .2s;\\n  animation-delay: .2s;\\n}\\n.animated.delay-04s {\\n  -webkit-animation-delay: .4s;\\n  animation-delay: .4s;\\n}\",\"js\":\"// The current slide\\nvar slideOrder = 0;\\n\\n// Pause between slides in miliseconds\\nvar slidePause = 8000;\\n\\n// The slides array\\nvar slides = $(\\\".card-decks .card-deck\\\");\\n\\n$(document).ready(function(){\\n\\tnextSlide(slideOrder)\\n})\\n\\nfunction autoSlide(){\\n\\tautoSlideTimeout = setTimeout(function() {\\n\\t\\t\\n\\t\\t// Check if the slideOrder is not bigger\\n\\t\\t// than the available amount of slides\\n\\t\\tif(slides.length <= slideOrder){\\n\\t\\t\\tslideOrder = 0;\\n\\t\\t}\\n\\n\\t\\t// Give us the next slide\\n\\t\\tnextSlide(slideOrder);\\n\\t\\t\\n\\t\\t\\n\\t\\tslideOrder++;\\n\\t}, slidePause);\\n}\\n\\nfunction theDelay(index){\\n\\t// Maybe a bit dirty but we need to get the exact\\n\\t// pause between all the slides and we dont want a\\n\\t// point in the variable because of css\\n\\tvar delay = (0.2 * index)\\n\\tvar delayClass = parseInt(delay.toString().replace(\\\".\\\", \\\"\\\"));\\n\\t\\n\\treturn \\\"0\\\" + delayClass\\n}\\n\\nfunction nextSlide(deck){\\n\\t//\\tFind the current active deck\\n\\tvar currentDeck = slides.closest(\\\".deck-active\\\")\\n\\tvar currentCards = currentDeck.find(\\\".card\\\");\\n\\t\\n\\t// Find the target deck we want to load in\\n\\tvar nextDeck = slides.eq(deck);\\n\\t\\n\\tcurrentCards.each(function(index){\\n\\t\\tvar delay = theDelay(index);\\n\\t\\tvar card =$(this)\\n\\t\\t// Remove all the animate.css classess\\n\\t\\tcard.removeClass().attr('class', 'card');\\n\\n\\t\\t\\n\\t\\t\\n\\t\\tcard.addClass(\\\"animated flipOutY fast delay-\\\" + delay + \\\"s\\\");\\n\\t\\tsetTimeout(function(){\\n\\t\\t\\tcard.find(\\\".card-img-overlay\\\").fadeOut();\\n\\t\\t\\tcard.find(\\\".card-img\\\").removeAttr('style');\\n\\t\\t}, ((delay + 8) * 50))\\n\\t\\t\\n\\t\\t\\n\\t});\\n\\t\\n\\t//\\tAnimate.css class \\\"fast\\\" is timed for 0.8s\\n\\t//\\twe delay each CARD (not card-deck) intro by 0.2s \\n\\t// so 0.8 + 0.2 = 1s\\n\\t//\\n\\t// 1 times each card without the first one * 1000\\n\\t// = the amount of seconds we have to wait before the new\\n\\t// we end this function\\n\\t//\\n\\t// I didn't remove the 1 because of the explanation\\n\\tvar timeout = ((1 * (currentCards.length - 1)) * 1000)\\n\\t\\n\\tsetTimeout(function(){\\n\\t\\tif(nextDeck.length){\\n\\t\\t\\t// Hide the current deck so the new deck\\n\\t\\t\\t// gets the right position then clean the\\n\\t\\t\\t// current deck\\n\\t\\t\\tcurrentDeck.removeClass(\\\"deck-active\\\");\\n\\t\\t\\tcurrentDeck.find(\\\".card\\\").each(function(){\\n\\t\\t\\t\\t$(this).removeClass().attr('class', 'card');\\n\\t\\t\\t})\\n\\n\\t\\t\\tnextDeck.find(\\\".card\\\").each(function(index){\\n\\t\\t\\t\\tvar delay = theDelay(index);\\n\\t\\t\\t\\t\\n\\t\\t\\t\\tvar card = $(this);\\n\\t\\t\\t\\tsetTimeout(function(){\\n\\t\\t\\t\\t\\tcard.find(\\\".card-img-overlay\\\").stop().fadeIn();\\n\\t\\t\\t\\t\\tcard.find(\\\".card-img\\\").animate({height: '110%', width: '110%'}, {duration:(slidePause / 2), easing: 'swing', queue: false });\\n\\t\\t\\t\\n\\t\\t\\t\\t}, ((delay + 8) * 10))\\n\\t\\t\\t\\tcard.addClass(\\\"animated flipInY fast delay-\\\" + delay + \\\"s\\\");\\n\\t\\t\\t\\n\\t\\t\\t\\t\\n\\t\\t\\t\\t\\n\\t\\t\\t\\t\\n\\t\\t\\t})\\n\\t\\t\\tnextDeck.addClass(\\\"deck-active\\\");\\n\\t\\t\\tautoSlide();\\n\\t\\t}else{\\n\\t\\t\\t// Try to reset the process\\n\\t\\t\\tconsole.error(\\\"Card flipper, did not find the target deck. Did you remove it?\\\")\\n\\t\\t\\tslideOrder = 0;\\n\\t\\t\\tautoSlide();\\n\\t\\t}\\n\\t\\t\\n\\t}, timeout)\\n}\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2020-04-10T15:40:10.000Z\",\"updated_at\":\"2021-01-04T12:40:40.000Z\",\"title\":\"Animated Bootstrap card deck\",\"description\":\"I was wondering if I could create a slideshow animation with the Bootstrap card deck class. I think I did it.\\n\\nThis is a concept, use with caution.  \",\"slug_hash\":\"YzyPqBw\",\"head\":\"<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":51,\"pick\":false,\"popularity\":2032,\"views_count\":17770,\"pick_visible_at\":null,\"cpid\":\"017164bf-9790-75fc-ab27-a29b37b4e346\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}