Dad's Birthday CodeCard 2018 Live Preview

{"__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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzI4MjAyNTAyLCJpYXQiOjE3MjgxOTg5MDIsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.yckb74HMbcHijreX6e2zySQl2TLfMzc6IQL-rSEW6RwyJ-Upgwo8NGfDnz4dJX16b7l-c26-MWQr3rjMa4oJS9e-TAX-9cSAQi1v0wGroBAA-4zmaRzRMfnvKbrZzTJrZjcDmn4dY36Us19WoqGSAsuuWZ7VLO45jOZZzT8s6IQxoPWJyRnAENXPW8cZzP-EeecvRiXeGB1kY8_IYI8zipCy1SbrlioityPosI1RhS7EIYhtfeqTowOs9fJFSlFNW9PxXiCpJ3EpbOfno2ebt_huw8L9X-onyNf6ZpdTI56yygK7-bJLjuiHrYBnqDzPVSBvAPX9B-GSlCCGy1E7xw"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":28671724,\"user_id\":219932,\"html\":\"\\n<div class=\\\"wrapper\\\">\\n a message for you...<\\/p>\\n <div class=\\\"animate-text-compressa\\\">\\n h<\\/span>a<\\/span>p<\\/span>p<\\/span>y<\\/span> <\\/span>b<\\/span>i<\\/span>r<\\/span>t<\\/span>h<\\/span>d<\\/span>a<\\/span>y<\\/span>\\n <\\/div>\\n <div class=\\\"animate-text-compressa\\\">\\n d<\\/span>a<\\/span>d<\\/span>\\n <\\/div>\\n<\\/div>\",\"css\":\"\\/* Fonts are embedded through external CSS and for testing purpose on Codepen only. Please consult each fonts licensing info for other usages. *\\/ \\n\\n$grid-color: darkblue;\\n$time: 2s;\\n$moreTime: 3s;\\n$wayMoreTime: 5s;\\n\\nbody { \\n -webkit-font-smoothing: antialiased; \\n -moz-osx-font-smoothing: grayscale; \\n font-smoothing: antialiased; \\n}\\n\\n.wrapper {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n flex-direction: column;\\n width: 100%;\\n height: 100vh;\\n background-color: blue;\\n\\tbackground-image: linear-gradient($grid-color 1px, transparent 1px), linear-gradient(90deg, $grid-color 1px, transparent 1px), linear-gradient($grid-color 1px, transparent 1px), linear-gradient(90deg, $grid-color 1px, transparent 1px);\\n\\tbackground-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;\\n\\tbackground-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;\\n}\\n\\n.animate-text-compressa {\\n font-family: 'Compressa';\\n font-size: 100px; \\n color: MediumSpringGreen;\\n opacity: 0;\\n animation: fadeIn $wayMoreTime ease forwards;\\n span {\\n animation: wave $time ease-in-out infinite alternate;\\n }\\n span:nth-child(1) {\\n animation-delay: 1 \\/ 10 * $time;\\n }\\n span:nth-child(2) {\\n animation-delay: 2 \\/ 10 * $time;\\n }\\n span:nth-child(3) {\\n animation-delay: 3 \\/ 10 * $time;\\n }\\n span:nth-child(4) {\\n animation-delay: 4 \\/ 10 * $time;\\n }\\n span:nth-child(5) {\\n animation-delay: 5 \\/ 10 * $time;\\n }\\n span:nth-child(6) {\\n animation-delay: 6 \\/ 10 * $time;\\n }\\n span:nth-child(7) {\\n animation-delay: 7 \\/ 10 * $time;\\n }\\n span:nth-child(8) {\\n animation-delay: 8 \\/ 10 * $time;\\n }\\n span:nth-child(9) {\\n animation-delay: 9 \\/ 10 * $time;\\n }\\n span:nth-child(10) {\\n animation-delay: 10 \\/ 10 * $time;\\n }\\n span:nth-child(10) {\\n animation-delay: 11 \\/ 10 * $time;\\n }\\n span:nth-child(10) {\\n animation-delay: 12 \\/ 10 * $time;\\n }\\n}\\n\\n@keyframes wave {\\n 0% {\\n font-variation-settings:\\n 'wght' 100,\\n 'wdth' 10,\\n 'ital' 10;\\n color: Aqua;\\n }\\n 50% {\\n color: MediumSpringGreen;\\n }\\n 100% {\\n font-variation-settings:\\n 'wght' 1000,\\n 'wdth' 200,\\n 'ital' 10; \\n color: Moccasin;\\n }\\n}\\n\\n@keyframes fadeIn {\\n 0% {\\n opacity: 0;\\n }\\n 50% {\\n opacity: 0;\\n }\\n 100% {\\n opacity: 1;\\n }\\n}\\n\\n\\/\\/ intro\\n\\np {\\n font-family: monaco;\\n font-size: 20px;\\n color: white;\\n animation: fadeOut $moreTime ease forwards;\\n}\\n\\n@keyframes fadeOut {\\n 0% {\\n opacity: 1;\\n }\\n 75% {\\n opacity: 1;\\n }\\n 100% {\\n opacity: 0;\\n }\\n}\",\"js\":\"[{\\\"type\\\":\\\"point type\\\",\\\"isSelected\\\":true,\\\"id\\\":\\\"text3\\\",\\\"properties\\\":{\\\"left\\\":35,\\\"top\\\":58,\\\"cssCodeName\\\":\\\"Compressa\\\",\\\"isVariableFont\\\":true,\\\"text\\\":\\\"Typography\\\\n\\\",\\\"fontSize\\\":100,\\\"variableOptions\\\":{\\\"axes\\\":[{\\\"tag\\\":\\\"wght\\\",\\\"name\\\":\\\"Weight\\\",\\\"minValue\\\":100,\\\"defaultValue\\\":100,\\\"maxValue\\\":1000,\\\"isSelected\\\":1},{\\\"tag\\\":\\\"wdth\\\",\\\"name\\\":\\\"Width\\\",\\\"minValue\\\":10,\\\"defaultValue\\\":\\\"10.00\\\",\\\"maxValue\\\":200,\\\"isSelected\\\":2},{\\\"tag\\\":\\\"ital\\\",\\\"name\\\":\\\"Italic\\\",\\\"minValue\\\":0,\\\"defaultValue\\\":0,\\\"maxValue\\\":1,\\\"isSelected\\\":0,\\\"minAngle\\\":0,\\\"maxAngle\\\":10}]}}}]\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"reset\",\"js_library\":null,\"created_at\":\"2018-10-03T14:38:47.000Z\",\"updated_at\":\"2019-11-12T14:33:34.000Z\",\"title\":\"Dad's Birthday CodeCard 2018\",\"description\":\"This composition is created via [Font Playground](https:\\/\\/play.typedetail.com\\/). \\n\\n In order to open this composition in Font Playground: go to https:\\/\\/play.typedetail.com\\/, go to `File` > `Open`, copy & paste in the URL of this CodePen, click `OK`. \\n\\n Browse more compositions created via Font Playground, visit https:\\/\\/codepen.io\\/tag\\/font_playground\\/.\",\"slug_hash\":\"wYMNPK\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"a5b80216f3b40a141875e3900da0c6b3\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":27209008,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"01663a5d-f0d8-7ac0-957f-2c891156c1d2\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"wYMNPK\"}"}