{"__browser":{"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; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjUzNjYyMjAwLCJpYXQiOjE2NTM2NTg2MDAsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.O-xsgJcneIQG9XmQSC0rS5G9007bXOsd9xo1XOe9RAVhh4enZfnekpXQJkcP5iWTMznnbr7jPAKaAnjeDYa-41gpWoLrzMPjtDi3bOKu-Lf44bl7BLAUSAQJkRXs3_XQVGmONxj90hUmFCJLd8nV3Tyjm4mb1l-vACM2QhT5GWkGy-txTZF6jC4D-rBYGunlx6Gs_aaFqC9vhdcc4eOhHpCFeUsyWekQPN78TJaRLMQJQRFu9VkDMvz3RR3_DGt_JuFlBEvpPRU0p5WU6kVf-fzlzx5_tOEivo1d6tuD7cvXEXLgdyLV_V7vucV9X4hdq3mI7K7TYLVNLaBEk8JpbA"},"__graphql":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar80":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=512&version=0&width=512","currentContext":{"id":"VoDkNZ","baseUrl":"/anon","title":"Captain Anonymous","name":"Captain Anonymous","avatar80":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=512&version=0&width=512","username":"anon","contextType":"User","__typename":"User"},"currentTeamId":null,"baseUrl":"/anon","username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":11399078,\"user_id\":927610,\"html\":\"\\n <header>\\n <h1>CSS Selectors<\\/h1>\\n <p>See how to use various CSS selectors in practice.<\\/p>\\n <nav id=\\\"main-menu\\\" class=\\\"menu\\\">\\n <a href=\\\"#post\\\">Scroll<\\/a>\\n <\\/nav>\\n <\\/header>\\n <section id=\\\"post\\\" role=\\\"main\\\">\\n <article class=\\\"content\\\">\\n <h2> Pure CSS, No JS!<\\/h2>\\n <h3> Subheading<\\/h3>\\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, tempora voluptatum porro. Harum odio, sapiente dicta, eum quidem porro atque quisquam impedit officia ullam minus, laudantium vel eaque doloribus rem.<\\/p>\\n <ul>\\n <li>This is a list item<\\/li>\\n <li>This is a list item<\\/li>\\n <li>This is a list item<\\/li>\\n <\\/ul>\\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, tempora voluptatum porro. Harum odio, sapiente dicta, eum quidem porro atque quisquam impedit officia ullam minus, laudantium vel eaque doloribus rem.<\\/p>\\n \\n<div class=\\\"image-wrap\\\">\\n\\t<figure class=\\\"image-wrap\\\">\\n\\t\\t<img src=\\\"https:\\/\\/placeholdit.imgix.net\\/~text?txtsize=69&txt=740%C3%97350&w=740&h=350\\\">\\n\\t<\\/figure>\\n\\t<div class=\\\"image-caption\\\">\\n\\t\\tThis is an image caption\\n\\t<\\/div>\\n<\\/div>\\n<div class=\\\"image-wrap\\\">\\n\\t<div class=\\\"image-caption\\\">\\n\\t\\tThis is an image caption with no image\\n\\t<\\/div>\\n<\\/div\\n <img src=\\\"\\\" alt=\\\"placeholder\\\" \\/>\\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, tempora voluptatum porro. Harum odio, sapiente dicta, eum quidem porro atque quisquam impedit officia ullam minus, laudantium vel eaque doloribus rem.<\\/p>\\n <blockquote>\\n <p>This is a quote<\\/p>\\n <cite> Someone <\\/cite>\\n <\\/blockquote>\\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, tempora voluptatum porro. Harum odio, sapiente dicta, eum quidem porro atque quisquam impedit officia ullam minus, laudantium vel eaque doloribus rem.<\\/p>\\n <\\/article>\\n <aside class=\\\"content\\\">\\n <h4>heading<\\/h4>\\n <ul class=\\\"menu\\\">\\n <li>Link one<\\/li>\\n <li>Another one<\\/li>\\n <li>Last child<\\/li>\\n <\\/ul>\\n <aside>\\n <\\/section>\\n <section id=\\\"cta\\\">\\n <p> Find more tutorials at Web Designer Wall \\n <\\/p><a href=\\\"http:\\/\\/www.webdesignerwall.com\\/tutorials\\/the-power-of-css-selectors-and-how-to-use-them\\\" alt=\\\"font awesome\\\" target=\\\"_blank\\\">View Tutorial<\\/a> \\n <\\/section>\\n <footer class=\\\"content tiny\\\">\\n <p>Footer Text<\\/p>\\n <\\/footer>\",\"css\":\"html {\\n height: 100%;\\n overflow: hidden;\\n}\\nbody { \\n margin:0;\\n padding:0;\\n\\t-webkit-perspective: 1px;\\n\\tperspective: 1px;\\n\\t-webkit-transform-style: preserve-3d;\\n\\ttransform-style: preserve-3d;\\n height: 100%;\\n overflow-y: scroll;\\n overflow-x: hidden;\\n font-family: 'helvetica', sans-serif;\\n}\\nimg{\\n max-width: 100%;\\n height: auto;\\n}\\nheader {\\n box-sizing: border-box;\\n min-height: 40vw;\\n padding: 30vw 0 5vw;\\n position: relative;\\n -webkit-transform-style: inherit;\\n transform-style: inherit;\\n width: 100vw;\\n}\\nheader, header:before {\\n background: 50% 50% \\/ cover;\\n}\\nheader::before {\\n bottom: 0;\\n content: \\\"\\\";\\n left: 0;\\n position: absolute;\\n right: 0;\\n top: 0;\\n\\tdisplay: block;\\n\\tbackground-color: #8a8;\\n background-image: url(https:\\/\\/images.pexels.com\\/photos\\/65117\\/pexels-photo-65117.jpeg?h=1440&auto=compress);\\n background-size: cover;\\n -webkit-transform-origin: center center 0;\\n -webkit-transform: translateZ(-1px) scale(2);\\n transform-origin: center center 0;\\n transform: translateZ(-1px) scale(2);\\n z-index: -1;\\n min-height: 100vh;\\n}\\nheader *{\\n font-weight: bold;\\n color: #FFF;\\n text-transform: uppercase;\\n letter-spacing: .5rem;\\n text-align: center;\\n margin: 0;\\n\\tpadding: 1rem 0;\\n}\\n\\nheader h1{\\n font-size: 4rem;\\n}\\nheader p {\\n background-color: rgba(255, 255, 255,0.2);\\n padding: 2%;\\n}\\nsection{\\n display: flex;\\n flex-direction: row;\\n justify-content: center;\\n}\\nsection[role=\\\"main\\\"]{\\n background-color: #FFF;\\n padding: 4% calc(50% - 24rem) 10%;\\n position: relative;\\n z-index: 2;\\n}\\nsection:target{\\n background-color: #d5b59e;\\n}\\n.content{\\n background-color: #eee;\\n}\\n.tiny{\\n color: #999;\\n font-size: .7rem;\\n text-transform: uppercase;\\n}\\narticle {\\n font-family: 'georgia', serif;\\n font-size: 1.1rem;\\n width: calc(66% - 0px);\\n color: #333;\\n line-height: 1.5;\\n margin: 0 2% 0 0;\\n padding: 2%;\\n}\\narticle h2{\\n font-family: 'helvetica', sans-serif;\\n font-size: 1.8rem;\\n}\\nh2 + h3 {\\n margin-top: -10px;\\n}\\narticle p{\\n padding: 2%;\\n}\\narticle p:nth-child(3)::first-letter{\\n float: left;\\n font-size: 4.2rem;\\n font-weight: 600;\\n line-height: 1;\\n padding: 0 .15em 0 0; \\n}\\narticle p::first-line{\\n font-style: italic;\\n}\\n.image-wrap {\\n\\tmargin: 0 0 2em;\\n\\tposition: relative;\\n}\\nfigure{margin: 0;}\\n.image-caption {\\n\\tbackground: #333;\\n\\tpadding: 1em;\\n\\tcolor: #fff;\\n}\\n.image-wrap + .image-caption {\\n\\twidth: 100%;\\n\\tbox-sizing: border-box;\\n\\tposition: absolute;\\n\\tbottom: 0;\\n\\tleft: 0;\\n}\\nblockquote p{\\n font-size: 1.4rem;\\n font-style: italic;\\n}\\nblockquote p::before { \\n color: #ccc;\\n content: \\\"«\\\";\\n font-size: 2rem;\\n}\\nblockquote p::after { \\n color: #ccc;\\n content: \\\"»\\\";\\n font-size: 1.6rem;\\n}\\n\\/* draw selected text in a paragraph white on orange *\\/\\np::selection {\\n color: #FFF;\\n background: #e68b63;\\n}\\nsection > p{ \\nfont-weight: bold;\\n}\\naside{\\n width: calc(33% - 0px);\\n padding: 2%;\\n color: #999;\\n font-size: 1rem;\\n}\\n#cta{\\n background-color: #aacbc0;\\n padding: 4%;\\n color: #FFF;\\n font-size: 1.6rem;\\n}\\n#cta a{\\n background-color: rgba(255,255,255,.2);\\n color: #FFF;\\n font-size: 1rem;\\n text-decoration: none;\\n text-transform: uppercase;\\n padding: 10px 20px;\\n margin: 20px;\\n border: 3px solid #FFF;\\n transition: all ease-in-out .3s;\\n max-height: 20px; \\n}\\n#cta a:hover{\\n opacity: .6;\\n}\\nfooter{\\n padding: 2%;\\n text-align: center;\\n}\\nfooter a{\\n color: #777;\\n text-decoration: none;\\n}\\n\\n@media (max-width: 667px) {\\n header h1 {\\n font-size: 2rem;\\n}\\n section{\\n flex-wrap: wrap-reverse;\\n }\\n article, aside{ \\n width: calc(100% - 0px);\\n }\\n #cta a{display: block;}\\n #cta p, aside{display: none;}\\n}\",\"parent\":3542222,\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2016-12-06T18:38:43.000Z\",\"updated_at\":\"2016-12-07T20:16:19.000Z\",\"session_hash\":\"04fd69b41046dbb420571dc59bf5f5c5\",\"title\":\"CSS Selectors: A Demo\",\"description\":\"Parallax scroll effect like Twitter. Pure css, javacsript free.\\n Based on http:\\/\\/codepen.io\\/keithclark\\/pen\\/JycFw?editors=010\",\"slug_hash\":\"oYdxGd\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"db94c9c4155e29392497e791a26929a4\",\"has_animation\":false,\"css_pre_processor_lib\":\"\",\"checksum\":0,\"screenshot_uuid\":\"6757fe5e-7cb3-4683-8267-7c4bff8ede23\",\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"js_module\":null,\"deleted_at\":null,\"deleted_by_user_id\":null,\"hard_delete_at\":null,\"pen_hash\":null,\"hashid\":\"oYdxGd\"}"}