{"__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"},"__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,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"live_fullpage"}},"__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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjc1NjE1NDIwLCJpYXQiOjE2NzU2MTE4MjAsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.A25Y-WXj0mg08ArFb9CKa3yBQ-3uagv31kyetBd7ATmowGfwg6-NEESU8U8KPwW1isJw5mbhPhxoH6jv8_yA8V1X3qh3I5Z3N7jL3-84Nx0jnCkTuEQtAqZ7hszSfuMTUnagQzEZ2y6scULueJWC8cSwliX1r27JYGpME40XkcWSUWlkE5bIddTnjFOIE6059fyFbz7fGVwaS2_4shH7V9qFaJ5I5ju1_Fr17RAvk3PgxOVcmbtTdJqfUHF9fBED7yO1HEXwcBbwyCJEe-Y33v9W8E3mo6ZTu-xCnMKfgAtPqPppty_lmb6L9Cg0pZSYGQxqL59B2uR1mwFnbGy_Bw"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":12685209,\"user_id\":265602,\"html\":\"<p class=\\\"date1\\\">A building is alive,<\\/p>\\n\\n<p class=\\\"date2\\\">like a man<\\/p>\\n\\n\\n<a id=\\\"infos\\\" href=\\\"#openModal\\\">?<\\/a>\\n\\n\\n\\n<div class=\\\"conteneur-flexbox\\\">\\n <div class=\\\"colonne-une\\\">\\n\\t\\t<a href=\\\"https:\\/\\/twitter.com\\/BrutalistEngine\\/status\\/828986031278084096\\\" target=\\\"_blank\\\"><img src=\\\"https:\\/\\/s3-us-west-2.amazonaws.com\\/s.cdpn.io\\/265602\\/web-concrete01.jpg\\\"><\\/a>\\n <\\/div>\\n\\n\\t\\n <div class=\\\"colonne-deux\\\">\\n <div class=\\\"deux-a\\\">\\n\\t\\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero magnam hic quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto ullam error reiciendis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero magnam hic quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto ullam error reiciendis.<\\/p>\\n\\t\\t<\\/div>\\n <div class=\\\"deux-b\\\">\\n\\t\\t\\t<div id=\\\"circle\\\"><\\/div>\\n\\t\\t<\\/div>\\n <\\/div>\\n<\\/div>\\n\\n\\n\\n\\n<div class=\\\"conteneur-flexbox\\\">\\n <div class=\\\"colonne-une\\\">\\n\\t\\t<a href=\\\"https:\\/\\/twitter.com\\/BrutalistEngine\\/status\\/828986031278084096\\\" target=\\\"_blank\\\"><img src=\\\"https:\\/\\/s3-us-west-2.amazonaws.com\\/s.cdpn.io\\/265602\\/web-concrete02.jpg\\\"><\\/a>\\n <\\/div>\\n\\n\\t\\n <div class=\\\"colonne-deux\\\">\\n <div class=\\\"deux-a\\\">\\n\\t\\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero magnam hic quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto ullam error reiciendis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero magnam hic quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto ullam error reiciendis.<\\/p>\\n\\t\\t<\\/div>\\n <div class=\\\"deux-b\\\">\\n<div id=\\\"square\\\"><\\/div>\\n\\t\\t<\\/div>\\n <\\/div>\\n<\\/div>\\n\\n\\n\\n<div class=\\\"conteneur-flexbox\\\">\\n <div class=\\\"colonne-une\\\">\\n\\t\\t<a href=\\\"https:\\/\\/twitter.com\\/BrutalistEngine\\/status\\/828986031278084096\\\" target=\\\"_blank\\\"><img src=\\\"https:\\/\\/s3-us-west-2.amazonaws.com\\/s.cdpn.io\\/265602\\/web-concrete03.jpg\\\"><\\/a>\\n <\\/div>\\n\\n\\t\\n <div class=\\\"colonne-deux\\\">\\n <div class=\\\"deux-a\\\">\\n\\t\\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero magnam hic quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto ullam error reiciendis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero magnam hic quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto ullam error reiciendis.<\\/p>\\n\\t\\t<\\/div>\\n <div class=\\\"deux-b\\\">\\n<div id=\\\"circle\\\"><\\/div>\\n\\t\\t<\\/div>\\n <\\/div>\\n<\\/div>\\n\\n\\n\\n\\n<div class=\\\"conteneur-flexbox\\\">\\n <div class=\\\"colonne-une\\\">\\n\\t\\t<a href=\\\"https:\\/\\/twitter.com\\/BrutalistEngine\\/status\\/828986031278084096\\\" target=\\\"_blank\\\"><img src=\\\"https:\\/\\/s3-us-west-2.amazonaws.com\\/s.cdpn.io\\/265602\\/web-concrete04.jpg\\\"><\\/a>\\n <\\/div>\\n\\n\\t\\n <div class=\\\"colonne-deux\\\">\\n <div class=\\\"deux-a\\\">\\n\\t\\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero magnam hic quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto ullam error reiciendis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero magnam hic quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto ullam error reiciendis.<\\/p>\\n\\t\\t<\\/div>\\n <div class=\\\"deux-b\\\">\\n<div id=\\\"square\\\"><\\/div>\\n\\t\\t<\\/div>\\n <\\/div>\\n<\\/div>\\n\\n\\n\\n\\n<div class=\\\"conteneur-flexbox\\\">\\n <div class=\\\"colonne-une\\\">\\n\\t\\t<a href=\\\"https:\\/\\/twitter.com\\/BrutalistEngine\\/status\\/828986031278084096\\\" target=\\\"_blank\\\"><img src=\\\"https:\\/\\/s3-us-west-2.amazonaws.com\\/s.cdpn.io\\/265602\\/web-concrete05.jpg\\\"><\\/a>\\n <\\/div>\\n\\n\\t\\n <div class=\\\"colonne-deux\\\">\\n <div class=\\\"deux-a\\\">\\n\\t\\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero magnam hic quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto ullam error reiciendis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero magnam hic quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto ullam error reiciendis.<\\/p>\\n\\t\\t<\\/div>\\n <div class=\\\"deux-b\\\">\\n<div id=\\\"circle\\\"><\\/div>\\n\\t\\t<\\/div>\\n <\\/div>\\n<\\/div>\\n\\n\\n\\n\\n\\n\\n<div id=\\\"openModal\\\" class=\\\"modalDialog\\\">\\n <div>\\t<a href=\\\"#close\\\" title=\\\"Close\\\" class=\\\"close\\\">X<\\/a>\\n\\n \\t<h2>A BUILDING IS ALIVE, LIKE A MAN<\\/h2>\\n\\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. <\\/p>\\n <\\/div>\\n<\\/div>\",\"css\":\"html,\\nbody {\\n padding: 0;\\n margin: 0;\\n}\\nbody {\\n background: white;\\n font-family: Hack, monospace;\\n font-weight: 300;\\n color: #272725;\\n}\\n\\n\\/*\\nh2,\\nh3 {\\n margin: 0 0 .75em 0;\\n}\\n*\\/\\n\\n#circle {\\n width: 100px;\\n height: 100px;\\n background: white;\\n -moz-border-radius: 50px;\\n -webkit-border-radius: 50px;\\n border-radius: 50px;\\n position: relative;\\n left: 0;\\n right: 0;\\n margin: auto;\\n}\\n#square {\\n width: 100px;\\n height: 100px;\\n background: white;\\n position: relative;\\n left: 0;\\n right: 0;\\n margin: auto;\\n}\\n.date1 {\\n position: fixed;\\n left: -5px;\\n top: -3px;\\n margin: auto;\\n text-align: center;\\n font-weight: 900;\\n font-size: 1.8em;\\n writing-mode: vertical-rl;\\n text-orientation: upright;\\n text-transform: uppercase;\\n z-index: 10;\\n}\\n.date2 {\\n position: fixed;\\n right: 0px;\\n bottom: -4px;\\n margin: auto;\\n text-align: center;\\n font-weight: 900;\\n font-size: 1.5em;\\n writing-mode: vertical-rl;\\n text-orientation: upright;\\n text-transform: uppercase;\\n}\\n#infos {\\n position: fixed;\\n bottom: 15px;\\n left: 5px;\\n opacity: 0.3;\\n color: black;\\n}\\na:link {\\n text-decoration: none;\\n \\/*color: #272725;*\\/\\n}\\na:hover {\\n color: black;\\n opacity: 1;\\n}\\n.date {\\n writing-mode: vertical-rl;\\n text-orientation: upright;\\n}\\n#technos {\\n padding-top: 20px;\\n font-family: Hack, monospace;\\n color: #FFF;\\n font-size: 0.7em;\\n}\\n#version {\\n font-family: Hack, monospace;\\n color: #FFF;\\n font-size: 0.7em;\\n}\\n\\n\\/*FLEXBOX*\\/\\n\\n.conteneur-flexbox {\\n max-width: 1000px;\\n margin: 100px auto;\\n border: 3px solid #272725;\\n}\\n.colonne-une {\\n \\/*background-color: #FFF;*\\/\\n padding: 20px;\\n flex: 1;\\n}\\n.colonne-une img {\\n width: 100%;\\n padding-top: 20px;\\n}\\n.colonne-une img:hover {\\n opacity: 0.7;\\n}\\n.colonne-une p {\\n font-weight: 100;\\n font-size: 0.75em;\\n}\\n.colonne-deux {\\n \\/*background-color: yellow;*\\/\\n flex: 1;\\n display: flex;\\n \\/*on paramètre le conteneur pour devenir un conteneur flexbox. Du flexbox dans du flexbox : deux lignes dans une colonne*\\/\\n flex-direction: column;\\n \\/*les lignes 2 et 3 sont disposées l'une en dessous de l'autre car l'espace est distribué de façon vertical et non horizontal*\\/\\n border-left: 3px solid #272725;\\n}\\n.deux-a {\\n \\/*background-color: #c0dbe2;*\\/\\n padding: 20px;\\n flex: 1;\\n border-bottom: 3px solid #272725;\\n}\\n.deux-b {\\n background: #272725;\\n color: white;\\n text-align: center;\\n font-size: 1.8em;\\n padding: 20px;\\n flex: 1;\\n}\\n\\n\\/*VERSION RESPONSIVE*\\/\\n\\n@media (min-width: 900px) {\\n .conteneur-flexbox {\\n display: flex;\\n }\\n}\\n@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {\\n html,\\n body {\\n padding: 0;\\n margin: 10px;\\n }\\n .date1 {\\n position: fixed;\\n left: 5px;\\n top: -3px;\\n margin: auto;\\n text-align: center;\\n font-weight: 900;\\n writing-mode: horizontal-tb;\\n text-transform: uppercase;\\n }\\n .date2 {\\n position: fixed;\\n right: 0px;\\n bottom: -4px;\\n margin: auto;\\n text-align: center;\\n font-weight: 900;\\n text-transform: uppercase;\\n z-index: 10;\\n }\\n .colonne-deux {\\n border-left: 0px;\\n }\\n .colonne-une {\\n border-bottom: 3px solid black;\\n }\\n}\\n.modalDialog {\\n position: fixed;\\n font-family: Hack, monospace;\\n color: #FFF;\\n top: 0;\\n right: 0;\\n bottom: 0;\\n left: 0;\\n background: rgba(255, 255, 255, 0.95);\\n z-index: 99999;\\n opacity: 0;\\n -webkit-transition: opacity 400ms ease-in;\\n -moz-transition: opacity 400ms ease-in;\\n transition: opacity 400ms ease-in;\\n pointer-events: none;\\n}\\n.modalDialog:target {\\n opacity: 1;\\n pointer-events: auto;\\n}\\n.modalDialog > div {\\n width: 45%;\\n position: relative;\\n margin: 10% auto;\\n padding: 5px 20px 13px 20px;\\n background: #000;\\n}\\n.close {\\n color: black;\\n font-size: 30px;\\n line-height: 25px;\\n position: absolute;\\n right: -12px;\\n text-align: center;\\n top: -10px;\\n width: 24px;\\n text-decoration: none;\\n font-weight: bold;\\n -webkit-border-radius: 12px;\\n -moz-border-radius: 12px;\\n border-radius: 12px;\\n}\\n.close:hover {\\n color: #ddd;\\n \\/*background: #000;*\\/\\n}\",\"js\":\"\\/\\/window.sr = ScrollReveal({ reset: true });\\n\\/\\/sr.reveal('.top', { duration: 900 });\\n\\/\\/sr.reveal('.bottom', {origin: 'right', distance: '300px', duration: 2000});\\n\\n\\nwindow.sr = ScrollReveal();\\nsr.reveal('.conteneur-flexbox', {origin: 'right', distance: '100px', duration: 400});\\n\\/\\/sr.reveal('h6');\\n\\n\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2017-02-07T15:58:25.000Z\",\"updated_at\":\"2017-02-21T11:33:55.000Z\",\"title\":\"A building is alive, like a man.\",\"description\":\"\",\"slug_hash\":\"JEBgOb\",\"head\":\"<script src=\\\"https:\\/\\/unpkg.com\\/scrollreveal@3.3.2\\/dist\\/scrollreveal.min.js\\\"><\\/script>\\n\\n<link rel=\\\"stylesheet\\\" href=\\\"\\/\\/cdn.jsdelivr.net\\/font-hack\\/2.020\\/css\\/hack.min.css\\\">\\n\\n\\n<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\",\"private\":true,\"slug_hash_private\":\"1c469a04afdffed7749e2234df0b0cb1\",\"has_animation\":false,\"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\":\"2022-11-08T22:42:55.128Z\",\"pen_hash\":null,\"hashid\":\"JEBgOb\"}"}