Portfolio : css grid #3 Live Preview

{"__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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjc1NDQ4MTQ4LCJpYXQiOjE2NzU0NDQ1NDgsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.c8I_iF_-dKoZsymye5zcq3GiKyEyJ97DRb6NI12b1vHAPtAhpgbWvyrYqPyhFbIhgtDi1DPEVMly1ytuOGFllpRoVcBztVHv-zlskaOfNYGN0kqEu6s7ec1d14chAatFijRJGoRUFcN-eqthFtDltSa4Ff1R5MsU2gH67WlaQajh1OpWiyXHNv5JuQvpQ7b47Q8Vo-1rgJpp471DXrnhyc36H7XnuaecFHzp09if5FolLrcOx2xAxFUSlnswQ1X0kYXR2KLEL7ydedIvk3Z9rlwDxkBUDZghcUb3mnIydvv8c9h3d391EPFb3Ii_ucI7wabJnvLgVnoG0712RHDXmg"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":48867239,\"user_id\":265602,\"html\":\"\\n\\n<div class=\\\"container\\\">\\n\\t\\n\\t<div class=\\\"bloc1\\\"><\\/div>\\n\\t<div class=\\\"bloc2\\\"><\\/div>\\n\\t<div class=\\\"bloc3\\\"><\\/div>\\n\\t<div class=\\\"bloc4\\\"><\\/div>\\n\\t<div class=\\\"bloc5\\\"><\\/div>\\n\\t<div class=\\\"align bloc6\\\"><h1>CSS GRID<\\/h1><\\/div>\\n\\t<div class=\\\"bloc7\\\"><\\/div>\\n\\t<div class=\\\"bloc8\\\"><\\/div>\\n\\t<div class=\\\"bloc9\\\"><\\/div>\\n\\t<div class=\\\"bloc10\\\"><\\/div>\\n\\t<div class=\\\"bloc11\\\"><\\/div>\\n\\t<div class=\\\"bloc12\\\"><\\/div>\\n\\t<div class=\\\"bloc13\\\"><\\/div>\\n\\t<div class=\\\"align bloc14\\\"><h1>& PATTERNS<\\/h1><\\/div>\\n\\t<div class=\\\"bloc15\\\"><\\/div>\\n\\t<div class=\\\"bloc16\\\"><\\/div>\\n\\n<\\/div>\",\"css\":\"@import url(\\\"https:\\/\\/fonts.googleapis.com\\/css2?family=JetBrains+Mono:ital,wght@1,800&display=swap\\\");\\n\\n* {\\n\\tmargin: 0;\\n\\tpadding: 0;\\n}\\n\\nbody {\\n\\tbackground-color: #dfdfe9;\\n\\t\\/*margin:3rem;*\\/\\n}\\n\\n\\/*le titre*\\/\\nh1 {\\n\\tfont-family: \\\"JetBrains Mono\\\", monospace;\\n\\tfont-size: 3em;\\n\\ttext-align:center;\\n}\\n\\n\\/*le centrage du titre dans le bloc*\\/\\n.align {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n}\\n\\n\\/*la grille*\\/\\n.container {\\n\\theight: 100vh;\\n\\tdisplay: grid;\\n\\tgrid-template-columns: 1fr 1fr 1fr 1fr;\\n\\tgrid-template-rows: 1fr 1fr 1fr 1fr;\\n\\tgrid-template-areas:\\n\\t\\t\\\"bloc1 bloc4 bloc3 bloc2\\\"\\n\\t\\t\\\"bloc5 bloc6 bloc3 bloc8\\\"\\n\\t\\t\\\"bloc9 bloc9 bloc7 bloc12\\\"\\n\\t\\t\\\"bloc13 bloc14 bloc14 bloc16\\\";\\n}\\n\\n\\/*Tous les blocs et les patterns*\\/\\n.bloc1 {\\n\\tgrid-area: bloc1;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground: repeating-linear-gradient(\\n\\t\\t45deg,\\n\\t\\t#161617,\\n\\t\\t#161617 6px,\\n\\t\\t#dfdfe9 6px,\\n\\t\\t#dfdfe9 30px\\n\\t);\\n}\\n.bloc2 {\\n\\tgrid-area: bloc2;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground: repeating-linear-gradient(\\n\\t\\t-45deg,\\n\\t\\t#161617,\\n\\t\\t#161617 6px,\\n\\t\\t#dfdfe9 6px,\\n\\t\\t#dfdfe9 30px\\n\\t);\\n}\\n.bloc3 {\\n\\tgrid-area: bloc3;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground-image: linear-gradient(\\n\\t\\t\\t#161617 2.4000000000000004px,\\n\\t\\t\\ttransparent 2.4000000000000004px\\n\\t\\t),\\n\\t\\tlinear-gradient(\\n\\t\\t\\t90deg,\\n\\t\\t\\t#161617 2.4000000000000004px,\\n\\t\\t\\ttransparent 2.4000000000000004px\\n\\t\\t),\\n\\t\\tlinear-gradient(\\n\\t\\t\\t#161617 1.2000000000000002px,\\n\\t\\t\\ttransparent 1.2000000000000002px\\n\\t\\t),\\n\\t\\tlinear-gradient(\\n\\t\\t\\t90deg,\\n\\t\\t\\t#161617 1.2000000000000002px,\\n\\t\\t\\t#dfdfe9 1.2000000000000002px\\n\\t\\t);\\n\\tbackground-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;\\n\\tbackground-position: -2.4000000000000004px -2.4000000000000004px,\\n\\t\\t-2.4000000000000004px -2.4000000000000004px,\\n\\t\\t-1.2000000000000002px -1.2000000000000002px,\\n\\t\\t-1.2000000000000002px -1.2000000000000002px;\\n}\\n.bloc4 {\\n\\tgrid-area: bloc4;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground-image: radial-gradient(\\n\\t\\t#161617 0.6000000000000001px,\\n\\t\\t#dfdfe9 0.6000000000000001px\\n\\t);\\n\\tbackground-size: 12px 12px;\\n}\\n.bloc5 {\\n\\tgrid-area: bloc5;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground-size: 12px 12px;\\n\\tbackground-image: repeating-linear-gradient(\\n\\t\\t45deg,\\n\\t\\t#161617 0,\\n\\t\\t#161617 1.2000000000000002px,\\n\\t\\t#dfdfe9 0,\\n\\t\\t#dfdfe9 50%\\n\\t);\\n}\\n.bloc6 {\\n\\tgrid-area: bloc6;\\n\\tjustify-content: center;\\n\\talign-content: center;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground-image: linear-gradient(\\n\\t\\t\\t#161617 1.2000000000000002px,\\n\\t\\t\\ttransparent 1.2000000000000002px\\n\\t\\t),\\n\\t\\tlinear-gradient(\\n\\t\\t\\tto right,\\n\\t\\t\\t#161617 1.2000000000000002px,\\n\\t\\t\\t#dfdfe9 1.2000000000000002px\\n\\t\\t);\\n\\tbackground-size: 24px 24px;\\n}\\n.bloc7 {\\n\\tgrid-area: bloc7;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground-size: 24px 24px;\\n\\tbackground-image: repeating-linear-gradient(\\n\\t\\t0deg,\\n\\t\\t#161617,\\n\\t\\t#161617 1.2000000000000002px,\\n\\t\\t#dfdfe9 1.2000000000000002px,\\n\\t\\t#dfdfe9\\n\\t);\\n}\\n.bloc8 {\\n\\tgrid-area: bloc8;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground-size: 24px 24px;\\n\\tbackground-image: repeating-linear-gradient(\\n\\t\\tto right,\\n\\t\\t#161617,\\n\\t\\t#161617 1.2000000000000002px,\\n\\t\\t#dfdfe9 1.2000000000000002px,\\n\\t\\t#dfdfe9\\n\\t);\\n}\\n.bloc9 {\\n\\tgrid-area: bloc9;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground: radial-gradient(\\n\\t\\t\\tcircle,\\n\\t\\t\\ttransparent 20%,\\n\\t\\t\\t#dfdfe9 20%,\\n\\t\\t\\t#dfdfe9 80%,\\n\\t\\t\\ttransparent 80%,\\n\\t\\t\\ttransparent\\n\\t\\t),\\n\\t\\tradial-gradient(\\n\\t\\t\\t\\tcircle,\\n\\t\\t\\t\\ttransparent 20%,\\n\\t\\t\\t\\t#dfdfe9 20%,\\n\\t\\t\\t\\t#dfdfe9 80%,\\n\\t\\t\\t\\ttransparent 80%,\\n\\t\\t\\t\\ttransparent\\n\\t\\t\\t)\\n\\t\\t\\t30px 30px,\\n\\t\\tlinear-gradient(\\n\\t\\t\\t\\t#161617 2.4000000000000004px,\\n\\t\\t\\t\\ttransparent 2.4000000000000004px\\n\\t\\t\\t)\\n\\t\\t\\t0 -1.2000000000000002px,\\n\\t\\tlinear-gradient(\\n\\t\\t\\t\\t90deg,\\n\\t\\t\\t\\t#161617 2.4000000000000004px,\\n\\t\\t\\t\\t#dfdfe9 2.4000000000000004px\\n\\t\\t\\t) -1.2000000000000002px 0;\\n\\tbackground-size: 60px 60px, 60px 60px, 30px 30px, 30px 30px;\\n}\\n.bloc10 {\\n\\tgrid-area: bloc10;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground-image: linear-gradient(135deg, #161617 25%, transparent 25%),\\n\\t\\tlinear-gradient(225deg, #161617 25%, transparent 25%),\\n\\t\\tlinear-gradient(45deg, #161617 25%, transparent 25%),\\n\\t\\tlinear-gradient(315deg, #161617 25%, #dfdfe9 25%);\\n\\tbackground-position: 12px 0, 12px 0, 0 0, 0 0;\\n\\tbackground-size: 24px 24px;\\n\\tbackground-repeat: repeat;\\n}\\n.bloc11 {\\n\\tgrid-area: bloc11;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground-image: linear-gradient(135deg, #161617 25%, transparent 25%),\\n\\t\\tlinear-gradient(225deg, #161617 25%, transparent 25%),\\n\\t\\tlinear-gradient(45deg, #161617 25%, transparent 25%),\\n\\t\\tlinear-gradient(315deg, #161617 25%, #dfdfe9 25%);\\n\\tbackground-position: 12px 0, 12px 0, 0 0, 0 0;\\n\\tbackground-size: 12px 12px;\\n\\tbackground-repeat: repeat;\\n}\\n.bloc12 {\\n\\tgrid-area: bloc12;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground-image: linear-gradient(45deg, #161617 50%, #dfdfe9 50%);\\n\\tbackground-size: 12px 12px;\\n}\\n.bloc13 {\\n\\tgrid-area: bloc13;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground-image: repeating-linear-gradient(\\n\\t\\t\\t45deg,\\n\\t\\t\\t#161617 25%,\\n\\t\\t\\ttransparent 25%,\\n\\t\\t\\ttransparent 75%,\\n\\t\\t\\t#161617 75%,\\n\\t\\t\\t#161617\\n\\t\\t),\\n\\t\\trepeating-linear-gradient(\\n\\t\\t\\t45deg,\\n\\t\\t\\t#161617 25%,\\n\\t\\t\\t#dfdfe9 25%,\\n\\t\\t\\t#dfdfe9 75%,\\n\\t\\t\\t#161617 75%,\\n\\t\\t\\t#161617\\n\\t\\t);\\n\\tbackground-position: 0 0, 12px 12px;\\n\\tbackground-size: 24px 24px;\\n}\\n.bloc14 {\\n\\tgrid-area: bloc14;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground-image: radial-gradient(\\n\\t\\t\\t#161617 0.6000000000000001px,\\n\\t\\t\\ttransparent 0.6000000000000001px\\n\\t\\t),\\n\\t\\tradial-gradient(#161617 0.6000000000000001px, #dfdfe9 0.6000000000000001px);\\n\\tbackground-size: 24px 24px;\\n\\tbackground-position: 0 0, 12px 12px;\\n}\\n.bloc15 {\\n\\tgrid-area: bloc15;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground-image: repeating-radial-gradient(\\n\\t\\t\\tcircle at 0 0,\\n\\t\\t\\ttransparent 0,\\n\\t\\t\\t#dfdfe9 12px\\n\\t\\t),\\n\\t\\trepeating-linear-gradient(#16161755, #161617);\\n}\\n.bloc16 {\\n\\tgrid-area: bloc16;\\n\\tbackground-color: #dfdfe9;\\n\\tbackground-image: linear-gradient(\\n\\t\\t\\t30deg,\\n\\t\\t\\t#161617 12%,\\n\\t\\t\\ttransparent 12.5%,\\n\\t\\t\\ttransparent 87%,\\n\\t\\t\\t#161617 87.5%,\\n\\t\\t\\t#161617\\n\\t\\t),\\n\\t\\tlinear-gradient(\\n\\t\\t\\t150deg,\\n\\t\\t\\t#161617 12%,\\n\\t\\t\\ttransparent 12.5%,\\n\\t\\t\\ttransparent 87%,\\n\\t\\t\\t#161617 87.5%,\\n\\t\\t\\t#161617\\n\\t\\t),\\n\\t\\tlinear-gradient(\\n\\t\\t\\t30deg,\\n\\t\\t\\t#161617 12%,\\n\\t\\t\\ttransparent 12.5%,\\n\\t\\t\\ttransparent 87%,\\n\\t\\t\\t#161617 87.5%,\\n\\t\\t\\t#161617\\n\\t\\t),\\n\\t\\tlinear-gradient(\\n\\t\\t\\t150deg,\\n\\t\\t\\t#161617 12%,\\n\\t\\t\\ttransparent 12.5%,\\n\\t\\t\\ttransparent 87%,\\n\\t\\t\\t#161617 87.5%,\\n\\t\\t\\t#161617\\n\\t\\t),\\n\\t\\tlinear-gradient(\\n\\t\\t\\t60deg,\\n\\t\\t\\t#16161777 25%,\\n\\t\\t\\ttransparent 25.5%,\\n\\t\\t\\ttransparent 75%,\\n\\t\\t\\t#16161777 75%,\\n\\t\\t\\t#16161777\\n\\t\\t),\\n\\t\\tlinear-gradient(\\n\\t\\t\\t60deg,\\n\\t\\t\\t#16161777 25%,\\n\\t\\t\\ttransparent 25.5%,\\n\\t\\t\\ttransparent 75%,\\n\\t\\t\\t#16161777 75%,\\n\\t\\t\\t#16161777\\n\\t\\t);\\n\\tbackground-size: 24px 42px;\\n\\tbackground-position: 0 0, 0 0, 12px 21px, 12px 21px, 0 0, 12px 21px;\\n}\\n\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2020-12-06T20:37:58.000Z\",\"updated_at\":\"2020-12-07T12:04:46.000Z\",\"title\":\"Portfolio : css grid #3\",\"description\":\"\",\"slug_hash\":\"ExgKGbv\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"501fa535938b411f73f9deddca918a69\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":48499102,\"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\":\"ExgKGbv\"}"}