{"__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":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzMzMDgxNjEyLCJpYXQiOjE3MzMwNzgwMTIsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.8JXe28rrWPn4NEVdFXWLa37WzF8xHaiyjzCI0EA-Vk1ItKZmBzivClxP2HPqZ93iLpYWUvyk153va8CV-IzlAwylWGkdpvc0AcTL6GBrmstFSIyokAqIncMQ2MC863mcIWOTatlmCuY22rcMCTxy6DRQIBfwpvo1DRDLaYvebpRbHX6e0rXMMLjlF59oXjmZpOm5ytePCFAPTvQctsdRi9vCPtEJhR2IiHC7xB7V1EnuN8cDdsdmjH2959UFAK-K9ZF3XMwSS9H-kdQ70QqvLZTjHbHdgRW9CAvX64iWOky29888ACazJp26Ol_ZH_7GBiROVR_dpDsNisFKBQwjlQ"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":71057913,\"user_id\":10496725,\"html\":\"<section class=\\\"placeholder\\\">\\n <h2 class=\\\"scroll-text\\\">Scroll Down<\\/h2>\\n<\\/section>\\n<section class=\\\"bento js-bento\\\">\\n <article class=\\\"bento-box-wrapper bento-box-wrapper_main\\\">\\n <div class=\\\"bento__box bento__box_main js-bento__box\\\">\\n <h2 class=\\\"bento__headline\\\">\\n <div class=\\\"reveal-wrapper\\\">A new wave of sustainable footwear<\\/div>\\n <\\/h2>\\n <p class=\\\"bento__text\\\">\\n <span class=\\\"reveal-wrapper\\\">Latest articles covering the trendesetters of the industry<\\/span>\\n <\\/p>\\n <\\/div>\\n <\\/article>\\n <article class=\\\"bento-box-wrapper bento-box-wrapper_one\\\">\\n <div class=\\\"bento__box bento__box_one js-bento__box\\\">\\n <a class=\\\"bento__link\\\">\\n <h3 class=\\\"bento__headline\\\">\\n <div class=\\\"reveal-wrapper\\\">Carbon neutral Yeezys, yes pleezy.<\\/div>\\n <\\/h3>\\n <p class=\\\"bento__text\\\">\\n <span class=\\\"reveal-wrapper\\\">Kanye coming back with shoes that are good for the planet. This is not his dark twisted fantasy.<\\/span>\\n <\\/p>\\n <\\/a>\\n <\\/div>\\n <\\/article>\\n <article class=\\\"bento-box-wrapper bento-box-wrapper_two\\\">\\n <div class=\\\"bento__box bento__box_two js-bento__box\\\">\\n <a class=\\\"bento__link\\\">\\n <h3 class=\\\"bento__headline\\\">\\n <div class=\\\"reveal-wrapper\\\">No studs required.<\\/div>\\n <\\/h3>\\n <p class=\\\"bento__text\\\">\\n <span class=\\\"reveal-wrapper\\\">A revolution in sports shoes.<\\/span>\\n <\\/p>\\n <\\/a>\\n <\\/div>\\n <\\/article>\\n <article class=\\\"bento-box-wrapper bento-box-wrapper_three\\\">\\n <div class=\\\"bento__box bento__box_three js-bento__box\\\">\\n <a class=\\\"bento__link\\\">\\n <h3 class=\\\"bento__headline\\\">\\n <div class=\\\"reveal-wrapper\\\">Recycled and remade.<\\/div>\\n <\\/h3>\\n <p class=\\\"bento__text\\\">\\n <span class=\\\"reveal-wrapper\\\">Nothing but the re-newest in style and material.<\\/span>\\n <\\/p>\\n <\\/a>\\n <\\/div>\\n <\\/article>\\n<\\/section>\",\"css\":\"@import url(\\\"https:\\/\\/fonts.googleapis.com\\/css2?family=Inter:wght@400;700&display=swap\\\");\\n\\n.placeholder {\\n height: 1200px;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n}\\n\\n.scroll-text {\\n font-size: 6rem;\\n font-weight: 900;\\n}\\n\\nsection {\\n margin: 0 auto;\\n padding: 32px;\\n}\\n\\n.bento {\\n font-family: Inter;\\n display: grid;\\n gap: 32px;\\n justify-items: center;\\n max-width: 1340px;\\n}\\n\\n.bento-box-wrapper {\\n border-radius: 1rem;\\n overflow: hidden;\\n}\\n\\n.bento__box {\\n width: 324px;\\n height: 324px;\\n border-radius: 1rem;\\n color: #fff;\\n position: relative;\\n display: flex;\\n flex-direction: column;\\n justify-content: flex-end;\\n}\\n\\n.bento__box::before {\\n content: \\\"\\\";\\n width: 100%;\\n height: 100%;\\n position: absolute;\\n border-radius: 1rem;\\n background: linear-gradient(\\n 180deg,\\n rgba(37, 34, 34, 0.08) 28.13%,\\n rgba(1, 1, 1, 0.8) 79.69%\\n );\\n z-index: 1;\\n}\\n\\n\\/\\/ Added\\n.bento__box:hover {\\n .bento__headline {\\n text-decoration: underline;\\n }\\n}\\n\\n.bento__link {\\n z-index: 2;\\n}\\n\\n.bento__headline,\\n.bento__text {\\n padding-left: 18px;\\n padding-right: 18px;\\n overflow: hidden;\\n}\\n\\n.bento__headline {\\n font-size: 1.5rem;\\n font-weight: 700;\\n margin: 0;\\n}\\n\\n.bento__text {\\n font-size: 1.125rem;\\n margin-top: 8px;\\n}\\n\\n.bento__box_main {\\n background: linear-gradient(\\n 180deg,\\n #01fc38 0%,\\n rgba(26, 255, 76, 0.46) 54.17%,\\n #ffe81a 100%\\n );\\n color: #000;\\n justify-content: center;\\n\\n .bento__headline {\\n font-size: 2rem;\\n line-height: 1;\\n }\\n\\n .bento__text {\\n font-size: 1.25rem;\\n line-height: 1.2;\\n margin-top: 20px;\\n }\\n}\\n\\n.bento__box_main:hover {\\n .bento__headline {\\n text-decoration: none;\\n }\\n}\\n\\n.bento__box_main::before {\\n display: none; \\/\\/ Remove Gradient\\n}\\n\\n.bento__box_one {\\n background-image: url(\\\"https:\\/\\/assets.codepen.io\\/10496725\\/Yeezys+on+wall.jpg\\\");\\n background-size: cover;\\n background-position: bottom;\\n}\\n\\n.bento__box_one:hover.bento__box_one::before {\\n background: linear-gradient(180deg, #0085ff 0%, rgba(1, 9, 17, 0.25) 100%);\\n}\\n\\n.bento__box_two {\\n background-image: url(\\\"https:\\/\\/assets.codepen.io\\/10496725\\/Girl+with+white+sneakers.jpg\\\");\\n background-position: top center;\\n}\\n\\n.bento__box_two:hover.bento__box_two::before {\\n background: linear-gradient(\\n 180deg,\\n rgba(6, 75, 21, 0) 0%,\\n rgba(15, 156, 46, 0.38) 0.01%,\\n rgba(0, 0, 0, 0.6) 100%\\n );\\n}\\n\\n.bento__box_three {\\n background-image: url(\\\"https:\\/\\/assets.codepen.io\\/10496725\\/Girl+with+pink+sneakers.jpg\\\");\\n background-position: top center;\\n}\\n\\n.bento__box_three:hover.bento__box_three::before {\\n background: linear-gradient(\\n 180deg,\\n rgba(217, 217, 217, 0) 0%,\\n rgba(206, 36, 36, 0.4) 0.01%,\\n rgba(0, 0, 0, 0.6) 100%\\n );\\n}\\n\\n@media (min-width: 800px) {\\n .bento {\\n grid-template-columns: repeat(3, 1fr);\\n grid-template-rows: repeat(2, 1fr);\\n justify-items: normal;\\n grid-template-areas:\\n \\\"main main one\\\"\\n \\\"two three one\\\";\\n }\\n\\n .bento-box-wrapper_main {\\n width: 100%;\\n grid-area: main;\\n }\\n\\n .bento-box-wrapper_one {\\n grid-area: one;\\n }\\n\\n .bento-box-wrapper_two {\\n grid-area: two;\\n }\\n\\n .bento-box-wrapper_three {\\n grid-area: three;\\n }\\n\\n .bento__box {\\n width: 100%;\\n background-size: cover;\\n min-height: 420px;\\n }\\n\\n .bento__headline,\\n .bento__text {\\n padding-left: 2rem;\\n }\\n\\n .bento__headline {\\n font-size: 2.25rem;\\n }\\n\\n .bento__text {\\n font-size: 1.125rem;\\n margin-top: 1rem;\\n margin-bottom: 4rem;\\n }\\n\\n .bento__box_main {\\n .bento__headline {\\n font-size: 4rem;\\n max-width: 45.625rem;\\n }\\n\\n .bento__text {\\n max-width: 31.25rem;\\n padding-left: 2rem;\\n font-size: 2.25rem;\\n line-height: 1.3;\\n margin-bottom: 0;\\n margin-top: 1rem;\\n }\\n }\\n\\n .bento__box_one {\\n justify-content: flex-start;\\n height: 100%;\\n background-image: url(\\\"https:\\/\\/assets.codepen.io\\/10496725\\/Yeezys+on+wall.jpg\\\");\\n background-size: cover;\\n\\n .bento__headline {\\n margin-top: 32px;\\n }\\n }\\n\\n .bento__box_one::before {\\n background: linear-gradient(\\n 180deg,\\n rgba(1, 1, 1, 0.8) 28.65%,\\n rgba(37, 34, 34, 0.08) 100%\\n );\\n }\\n}\\n\\n\\/\\/Animations\\n\\n.reveal_hidden {\\n transform: translateY(100%);\\n}\\n\\n.reveal_hidden .reveal-wrapper {\\n transform: translateY(100%);\\n}\\n\\n.reveal {\\n animation: 1.5s 1 normal cubic-bezier(0.65, 0.05, 0.36, 1) reveal forwards;\\n}\\n\\n.reveal .reveal-wrapper {\\n animation: 1s 1 normal cubic-bezier(0.65, 0.05, 0.36, 1) 0.5s reveal forwards;\\n display: block;\\n}\\n\\n@keyframes reveal {\\n from {\\n transform: translateY(100%);\\n }\\n\\n to {\\n transform: translateY(0%);\\n }\\n}\\n\\n@media (prefers-reduced-motion) {\\n .reveal_hidden {\\n transform: none;\\n }\\n\\n .reveal_hidden .reveal-wrapper {\\n transform: none;\\n }\\n\\n .reveal {\\n animation: none;\\n }\\n\\n .reveal .reveal-wrapper {\\n animation: none;\\n }\\n}\\n\",\"js\":\"const bento = document.querySelector(\\\".js-bento\\\");\\nconst boxes = bento.querySelectorAll(\\\".js-bento__box\\\");\\n\\nboxes.forEach((box) => {\\n box.classList.add(\\\"reveal_hidden\\\");\\n});\\n\\nconst observer = new IntersectionObserver(\\n (entries, observer) => {\\n entries.forEach((entry) => {\\n if (entry.isIntersecting) {\\n const bento = entry.target;\\n const boxes = bento.querySelectorAll(\\\".js-bento__box\\\");\\n\\n boxes.forEach((box) => {\\n box.classList.add(\\\"reveal\\\");\\n });\\n }\\n });\\n },\\n {\\n rootMargin: \\\"0px\\\",\\n threshold: 0.8\\n }\\n);\\n\\nobserver.observe(bento);\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"normalize\",\"js_library\":null,\"created_at\":\"2023-10-15T04:52:39.054Z\",\"updated_at\":\"2023-10-18T11:57:50.256Z\",\"title\":\"Bento Layout\",\"description\":\"A bento layout with a scroll triggered reveal created for a blog post.\\n\\nPhotos from:\\nArthur Ogleznev: https:\\/\\/www.pexels.com\\/photo\\/person-wearing-adidas-yeezy-boost-shoes-1102776\\/\\nVova Kras: https:\\/\\/www.pexels.com\\/photo\\/woman-sitting-beside-goalie-net-2726161\\/\\nChristian Diokno: https:\\/\\/www.pexels.com\\/photo\\/eccentric-woman-with-shoes-in-wardrobe-3480353\\/\",\"slug_hash\":\"dywEOeo\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"3c55960aebb4ffdb64026298c2bbebfe\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"018b31ad-da0e-7705-aee9-1fef55c5eece\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"dywEOeo\"}"}