HTML
SCSS
JS
Result
Skip Results Iframe
EDIT ON
Live
Live
Live
This Pen is owned by
Zed Dash
on
CodePen
.
See more by @z- on CodePen
External CSS
https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css
https://static.fontawesome.com/css/fontawesome-app.css
https://pro.fontawesome.com/releases/v5.2.0/css/all.css
https://fonts.googleapis.com/css?family=Roboto:400,700
https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458.scss?theme
External JavaScript
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458.js
{"__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\":\"\\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"}