CodePen Embed - Expanding flex cards

Live

This Pen is owned by Zed Dash 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 *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups 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\":false,\"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\":\"spaces\",\"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\":\"OBPJKK\",\"auto_save\":false},\"hashid\":\"OBPJKK\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://static.fontawesome.com/css/fontawesome-app.css\",\"order\":1,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://pro.fontawesome.com/releases/v5.2.0/css/all.css\",\"order\":2,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://fonts.googleapis.com/css?family=Roboto:400,700\",\"order\":3,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458.js\",\"order\":1,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458.scss?theme\",\"order\":4,\"resource_type\":\"css\",\"par_content\":\"@import url(https://pro.fontawesome.com/releases/v5.11.2/css/all.css);\\n:root {\\n\\t//--user-button-main: #EC87C0;\\n\\t//--user-button-background: #FFFFFF;\\n\\t--user-button-circle: rgba(0,0,0,0.025);\\n\\t--user-button-cardborder: rgba(255,255,255,0.25);\\n\\t--user-button-text:#323133;\\n\\t--user-button-shadow:rgba(0,0,0,0.1);\\n}\\n\\n@mixin dark {\\n   &.dark {\\n      @content;\\n   }\\n   @media (prefers-color-scheme: dark) {\\n      &:not(.light) {\\n         @content;\\n      }\\n   }\\n}\\nbody {\\n\\t#user-button {\\n\\t\\t//position: fixed;\\n\\t\\tz-index:1000;\\n\\t\\tbottom:1rem !important;\\n\\t\\tright:1rem !important;\\n\\t\\tcolor:var(--user-button-text);\\n\\t\\ttransition:1s 0s ease-out;\\n\\t\\tanimation:slide 3s ease-out forwards;\\n\\t\\t//display:block !important;\\n\\t\\t@keyframes slide {\\n\\t\\t\\t0%, 50% {\\n\\t\\t\\t\\topacity:0;\\n\\t\\t\\t\\tdisplay:block !important;\\n\\t\\t\\t}\\n\\t\\t\\t100% {\\n\\t\\t\\t\\topacity:1;\\n\\t\\t\\t\\tdisplay:block !important;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t.u-card {\\n\\t\\t\\t//background:var(--user-button-background, #FFFFFF);\\n\\t\\t\\tborder-radius:100%;\\n\\t\\t\\tbox-shadow:0 0 1rem -.25rem var(--user-button-shadow), inset 0 0 1rem -.75rem var(--user-button-shadow);\\n\\t\\t}\\n\\t\\t.u-main {\\n\\t\\t\\t//position: relative;\\n\\t\\t\\t//z-index:1000;\\n\\t\\t\\t//display:grid;\\n\\t\\t\\t//place-items:center;\\n\\t\\t\\t//width:4rem;\\n\\t\\t\\t//height:4rem;\\n\\t\\t\\tcursor: pointer;\\n         --user-button-background:var(--user-button-main, #EC87C0);\\n\\t\\t\\timg {\\n\\t\\t\\t\\t//height:50%;\\n\\t\\t\\t\\t//width:50%;\\n\\t\\t\\t\\theight:100%;\\n\\t\\t\\t\\twidth:100%;\\n\\t\\t\\t}\\n\\t\\t\\tiframe {\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\ttop:0;\\n\\t\\t\\t\\tleft:0;\\n\\t\\t\\t\\twidth:4rem;\\n\\t\\t\\t\\theight:4rem;\\n\\t\\t\\t\\topacity:1;\\n\\t\\t\\t\\ttransition:0s 4s;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t.u-icons {\\n         position:relative;\\n\\t\\t\\tz-index:950;\\n\\t\\t\\t//position: absolute;\\n\\t\\t\\t//top:50%;\\n\\t\\t\\t//left:50%;\\n\\t\\t\\ttransform:translate(-50%, -50%);\\n\\t\\t\\t//width:0%;\\n\\t\\t\\t//height:0%;\\n\\t\\t\\tbackground:var(--user-button-circle);\\n\\t\\t\\tbox-shadow:0 0 0 0.125rem var(--user-button-cardborder);\\n\\t\\t\\tborder-radius:100%;\\n\\t\\t\\ttransition:.25s;\\n\\t\\t\\topacity:1 !important;\\n         backdrop-filter: blur(10px);\\n         /*&:before {\\n            z-index:-1;\\n            position:absolute;\\n            top:0; right:0; bottom:0; left:0;\\n            content:'';\\n            \\n            backdrop-filter: blur(10px);\\n         }*/\\n\\t\\t\\ta {\\n\\t\\t\\t\\tcolor:inherit;\\n\\t\\t\\t\\tdisplay:grid;\\n\\t\\t\\t\\tplace-items:center;\\n\\t\\t\\t\\twidth:30px;\\n\\t\\t\\t\\theight:30px;\\n\\t\\t\\t\\ttext-decoration:none;\\n\\t\\t\\t\\tdiv {\\n\\t\\t\\t\\t\\tpadding:.5rem;\\n\\t\\t\\t\\t\\t//box-shadow: 0 0 0 0rem transparent;\\n\\t\\t\\t\\t\\t//box-shadow:0 0 .5rem -.25rem var(--user-button-shadow);\\n\\t\\t\\t\\t\\ttransition:0s;\\n\\t\\t\\t\\t}\\n            &[href=\\\"https://twitter.com/zed_dash\\\"] {\\n               position:relative;\\n               &:before {\\n                  content:'Middle Click';\\n                  position:absolute;\\n                  top:-1.5rem;\\n                  left:50%;\\n                  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\\n                  white-space:pre;\\n                  transform:translateX(-50%);\\n                  opacity:0;\\n                  pointer-events:none;\\n                  transition:.25s ease-in;\\n                  background:#fffc;\\n                  padding:.25rem .5rem;\\n                  border-radius:.25rem;\\n               }\\n               &.show {\\n                  &:before {\\n                     opacity:1;\\n                     transition:.25s ease-out;\\n                  }\\n               }\\n               div {\\n\\t\\t\\t\\t\\t   color:#1da1f2;\\n               }\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&[href=\\\"https://codepen.io/z-\\\"] div {\\n\\t\\t\\t\\t\\tbackground:black;\\n\\t\\t\\t\\t\\tcolor:white;\\n\\t\\t\\t\\t\\t//--user-button-cardborder:var(--user-button-text);\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&:hover {\\n\\t\\t\\t\\t\\t//box-shadow: 0 0 0rem 0.125rem var(--user-button-cardborder);\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&.u-random {\\n\\t\\t\\t\\t\\tdiv {\\n                  position:relative;\\n                  top:-1px;\\n\\t\\t\\t\\t\\t\\tanimation:diespin 2s linear infinite;\\n\\t\\t\\t\\t\\t\\t@keyframes diespin {\\n\\t\\t\\t\\t\\t\\t\\t0% {\\n\\t\\t\\t\\t\\t\\t\\t\\ttransform:rotate(0deg);\\n\\t\\t\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t\\t\\t100% {\\n\\t\\t\\t\\t\\t\\t\\t\\ttransform:rotate(360deg);\\n\\t\\t\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t&:not(:hover) div {\\n\\t\\t\\t\\t\\t\\tanimation-play-state:paused;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t\\t>* {\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\twidth:30px;\\n\\t\\t\\t\\theight:30px;\\n\\t\\t\\t\\t\\n\\t\\t\\t\\tbackground:var(--singlecolour);\\n\\t\\t\\t\\tborder-radius:100%;\\n\\t\\t\\t\\t\\n\\t\\t\\t\\tcursor: pointer;\\n\\t\\t\\t\\t\\n\\t\\t\\t\\ttransform:translate(-50%,-50%);\\n\\t\\t\\t\\ttransition:.25s -.05s;\\n\\t\\t\\t\\t&:before {\\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\\t\\t\\t\\t}\\n\\t\\t\\t\\t&:hover, &:focus-within {\\n\\t\\t\\t\\t\\tbackground:var(--hcolour);\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&:first-child:nth-last-child(1),\\n\\t\\t\\t\\t&:first-child:nth-last-child(1) ~ * { //If there are 3 children\\n\\t\\t\\t\\t\\t&:nth-child(1) {\\n\\t\\t\\t\\t\\t\\tleft:25%;\\n\\t\\t\\t\\t\\t\\ttop:25%;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&:first-child:nth-last-child(2),\\n\\t\\t\\t\\t&:first-child:nth-last-child(2) ~ * { //If there are 4 children\\n\\t\\t\\t\\t\\t&:nth-child(1) {\\n\\t\\t\\t\\t\\t\\tleft:37.5%;\\n\\t\\t\\t\\t\\t\\ttop:18.75%;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t&:nth-child(2) {\\n\\t\\t\\t\\t\\t\\tleft:18.75%;\\n\\t\\t\\t\\t\\t\\ttop:37.5%;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&:first-child:nth-last-child(3),\\n\\t\\t\\t\\t&:first-child:nth-last-child(3) ~ * { //If there are 3 children\\n\\t\\t\\t\\t\\t&:nth-child(1) {\\n\\t\\t\\t\\t\\t\\tleft:50%;\\n\\t\\t\\t\\t\\t\\ttop:15.625%;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t&:nth-child(2) {\\n\\t\\t\\t\\t\\t\\tleft:25%;\\n\\t\\t\\t\\t\\t\\ttop:25%;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t&:nth-child(3) {\\n\\t\\t\\t\\t\\t\\tleft:15.625%;\\n\\t\\t\\t\\t\\t\\ttop:50%;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&:first-child:nth-last-child(4),\\n\\t\\t\\t\\t&:first-child:nth-last-child(4) ~ * { //If there are 4 children\\n\\t\\t\\t\\t\\t&:nth-child(1) {\\n\\t\\t\\t\\t\\t\\tleft:62.5%;\\n\\t\\t\\t\\t\\t\\ttop:18.75%;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t&:nth-child(2) {\\n\\t\\t\\t\\t\\t\\tleft:37.5%;\\n\\t\\t\\t\\t\\t\\ttop:18.75%;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t&:nth-child(3) {\\n\\t\\t\\t\\t\\t\\tleft:18.75%;\\n\\t\\t\\t\\t\\t\\ttop:37.5%;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t&:nth-child(4) {\\n\\t\\t\\t\\t\\t\\tleft:18.75%;\\n\\t\\t\\t\\t\\t\\ttop:62.5%;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t&:hover, &:focus-within {\\n\\t\\t\\t.u-icons {\\n\\t\\t\\t\\twidth:300% !important;\\n\\t\\t\\t\\theight:300% !important;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n}\"}],\"tags\":[\"css\",\"css-variables\",\"flex-box\",\"card\",\"image\"],\"id\":28536155,\"user_id\":199011,\"html\":\"<div class=\\\"options\\\">\\n   <div class=\\\"option active\\\" style=\\\"--optionBackground:url(https://66.media.tumblr.com/6fb397d822f4f9f4596dff2085b18f2e/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg);\\\">\\n      <div class=\\\"shadow\\\"></div>\\n      <div class=\\\"label\\\">\\n         <div class=\\\"icon\\\">\\n            <i class=\\\"fas fa-walking\\\"></i>\\n         </div>\\n         <div class=\\\"info\\\">\\n            <div class=\\\"main\\\">Blonkisoaz</div>\\n            <div class=\\\"sub\\\">Omuke trughte a otufta</div>\\n         </div>\\n      </div>\\n   </div>\\n   <div class=\\\"option\\\" style=\\\"--optionBackground:url(https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg);\\\">\\n      <div class=\\\"shadow\\\"></div>\\n      <div class=\\\"label\\\">\\n         <div class=\\\"icon\\\">\\n            <i class=\\\"fas fa-snowflake\\\"></i>\\n         </div>\\n         <div class=\\\"info\\\">\\n            <div class=\\\"main\\\">Oretemauw</div>\\n            <div class=\\\"sub\\\">Omuke trughte a otufta</div>\\n         </div>\\n      </div>\\n   </div>\\n   <div class=\\\"option\\\" style=\\\"--optionBackground:url(https://66.media.tumblr.com/5af3f8303456e376ceda1517553ba786/tumblr_o4986gakjh1qho82wo1_1280.jpg);\\\">\\n      <div class=\\\"shadow\\\"></div>\\n      <div class=\\\"label\\\">\\n         <div class=\\\"icon\\\">\\n            <i class=\\\"fas fa-tree\\\"></i>\\n         </div>\\n         <div class=\\\"info\\\">\\n            <div class=\\\"main\\\">Iteresuselle</div>\\n            <div class=\\\"sub\\\">Omuke trughte a otufta</div>\\n         </div>\\n      </div>\\n   </div>\\n   <div class=\\\"option\\\" style=\\\"--optionBackground:url(https://66.media.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg);\\\">\\n      <div class=\\\"shadow\\\"></div>\\n      <div class=\\\"label\\\">\\n         <div class=\\\"icon\\\">\\n            <i class=\\\"fas fa-tint\\\"></i>\\n         </div>\\n         <div class=\\\"info\\\">\\n            <div class=\\\"main\\\">Idiefe</div>\\n            <div class=\\\"sub\\\">Omuke trughte a otufta</div>\\n         </div>\\n      </div>\\n   </div>\\n   <div class=\\\"option\\\" style=\\\"--optionBackground:url(https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg);\\\">\\n      <div class=\\\"shadow\\\"></div>\\n      <div class=\\\"label\\\">\\n         <div class=\\\"icon\\\">\\n            <i class=\\\"fas fa-sun\\\"></i>\\n         </div>\\n         <div class=\\\"info\\\">\\n            <div class=\\\"main\\\">Inatethi</div>\\n            <div class=\\\"sub\\\">Omuke trughte a otufta</div>\\n         </div>\\n      </div>\\n   </div>\\n</div>\\n\\n<a href=\\\"http://victorofvalencia-blog.tumblr.com\\\" target=\\\"_blank\\\" class=\\\"credit\\\">Photos from Victor of Valencia on tumblr</a>\",\"css\":\"$optionDefaultColours: #ED5565,#FC6E51,#FFCE54,#2ECC71,#5D9CEC,#AC92EC;\\n\\nbody {\\n   display:flex;\\n   flex-direction:row;\\n   justify-content:center;\\n   align-items:center;\\n   overflow:hidden;\\n   height:100vh;\\n   \\n   font-family: 'Roboto', sans-serif;\\n   transition:.25s;\\n   @include dark {\\n      background: #232223;\\n      color:white;\\n   }\\n   .credit {\\n      position: absolute;\\n      bottom:20px;\\n      left:20px;\\n      \\n      color:inherit;\\n   }\\n   .options {\\n      display:flex;\\n      flex-direction:row;\\n      align-items:stretch;\\n      overflow:hidden;\\n\\n      min-width:600px;\\n      max-width:900px;\\n      width:calc(100% - 100px);\\n      \\n      height:400px;\\n      \\n      @for $i from 1 through 4 {\\n         @media screen and (max-width:798px - $i*80) {\\n            min-width:600px - $i*80;\\n            .option:nth-child(#{6-$i}) {\\n               display:none;\\n            }\\n         }\\n      }\\n      \\n      .option {\\n         position: relative;\\n         overflow:hidden;\\n\\n         min-width:60px;\\n         margin:10px;\\n         //border:0px solid --defaultColor;\\n\\n         background:var(--optionBackground, var(--defaultBackground, #E6E9ED));\\n         background-size:auto 120%;\\n         background-position:center;\\n\\n         cursor: pointer;\\n\\n         transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\\n\\n         @for $i from 1 through length($optionDefaultColours) {\\n            &:nth-child(#{$i}) {\\n               --defaultBackground:#{nth($optionDefaultColours, $i)};\\n            }\\n         }\\n         &.active {\\n            flex-grow:10000;\\n            transform:scale(1);\\n            \\n            max-width:600px;\\n            margin:0px;\\n            border-radius:40px;\\n            \\n            background-size:auto 100%;\\n            .shadow {\\n               box-shadow:inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;\\n            }\\n            .label {\\n               bottom:20px;\\n               left:20px;\\n               .info >div {\\n                  left:0px;\\n                  opacity:1;\\n               }\\n            }\\n            /*&:active {\\n               transform:scale(0.9);\\n            }*/\\n         }\\n         &:not(.active) {\\n            flex-grow:1;\\n            \\n            border-radius:30px;\\n            .shadow {\\n               bottom:-40px;\\n               box-shadow:inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;\\n            }\\n            .label {\\n               bottom:10px;\\n               left:10px;\\n               .info >div {\\n                  left:20px;\\n                  opacity:0;\\n               }\\n            }\\n         }\\n         .shadow {\\n            position: absolute;\\n            bottom:0px;\\n            left:0px;\\n            right:0px;\\n            \\n            height:120px;\\n            \\n            transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\\n         }\\n         .label {\\n            display:flex;\\n            position: absolute;\\n            right:0px;\\n\\n            height:40px;\\n            transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\\n            .icon {\\n               display:flex;\\n               flex-direction:row;\\n               justify-content:center;\\n               align-items:center;\\n               \\n               min-width:40px;\\n               max-width:40px;\\n               height:40px;\\n               border-radius:100%;\\n\\n               background-color:white;\\n               color:var(--defaultBackground);\\n            }\\n            .info {\\n               display:flex;\\n               flex-direction:column;\\n               justify-content:center;\\n               \\n               margin-left:10px;\\n               \\n               color:white;\\n               \\n               white-space: pre;\\n               >div {\\n                  position: relative;\\n                  \\n                  transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity .5s ease-out;\\n               }\\n               .main {\\n                  font-weight:bold;\\n                  font-size:1.2rem;\\n               }\\n               .sub {\\n                  transition-delay:.1s;\\n               }\\n            }\\n         }\\n      }\\n   }\\n}\",\"js\":\"$(\\\".option\\\").click(function(){\\n   $(\\\".option\\\").removeClass(\\\"active\\\");\\n   $(this).addClass(\\\"active\\\");\\n   \\n});\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"theme_switchable\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2018-09-28T20:48:52.000Z\",\"updated_at\":\"2021-10-09T22:10:03.130Z\",\"title\":\"Expanding flex cards\",\"description\":\"![](https://i.imgur.com/W6mroTN.gif)\\n\\nEdit 9th October 2021: Added theme switcher\",\"slug_hash\":\"OBPJKK\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":0,\"comments_count\":57,\"custom_screenshot_filename\":null,\"loves_count\":21009,\"pick\":false,\"popularity\":143490,\"views_count\":378745,\"pick_visible_at\":null,\"cpid\":\"016621f0-f720-748d-a98b-67547991340c\",\"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"}