{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{"gridIframeSandboxAttributes":"allow-forms allow-modals allow-pointer-lock allow-presentation allow-same-origin allow-scripts"},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjI3Njk2NTkwLCJpYXQiOjE2Mjc2OTI5OTAsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.t9t1gRsYAV_41CQcTruIaafQexplx05qu6MMiBQOMB-531_AR9rYsFpPFTl9Uqk8Wf5Q-Fl6kIEFXrW3p-363tlNkggTB20oNi1Pd86A5bIGyzqn1ew1hMPUOLoq7I6MEqfMOpDKa1w8cdwRFS7ffGQyybY2UmakFUOi3T29gGTQ_83H2uJhgzsMuv77HCy5n4Ws04nXQq5oAPQpMR6_zJj9pd1mKcM22Kqaa_oQ88NrlSnOUSKSDsfp9rXqa48u_PF1biDeOa7IrzfOOh8zaGX8BPImbIz5KtJZYh-OAbyRMXNWNzNU0xa8mddeAPqdSyefo5OdQmQCu90v8dgzmw"},"__graphql":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","avatar80":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=512&version=0&width=512","currentContext":{"id":"VoDkNZ","baseUrl":"/anon","title":"Captain Anonymous","name":"Captain Anonymous","avatar80":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=512&version=0&width=512","username":"anon","contextType":"USER","projectLimitations":{"id":"VoDkNZ","projects":0,"usedProjects":0,"__typename":"ProjectLimitations"},"privateByDefault":false,"__typename":"User"},"currentTeamId":null,"baseUrl":"/anon","username":"anon","admin":false,"anon":true,"pro":false,"verified":null,"teams":[],"permissions":{"id":"1","canCreatePrivate":false,"canUploadAssets":false,"__typename":"UserPermissions"},"__typename":"User"}}},"__pay_stripe_public":"pk_NgCjQmQs7wXOFmfNC0LKMgEkmlThn","__pay_braintree_env":"production","__item":"{\"id\":27369299,\"user_id\":1159990,\"html\":\"<nav class=\\\"flex-nav\\\">\\n <div class=\\\"container\\\">\\n <div class=\\\"grid\\\">\\n <div class=\\\"column-xs-9 column-md-8\\\">\\n <p id=\\\"logo\\\">Japan<span id=\\\"highlight\\\">.<\\/span><\\/p>\\n <\\/div>\\n <div class=\\\"column-xs-3 column-md-4\\\">\\n <a href=\\\"#\\\" class=\\\"toggle-nav\\\">Menu <i class=\\\"ion-navicon-round\\\"><\\/i><\\/a>\\n <ul>\\n <li><a href=\\\"#\\\">About<\\/a><\\/li>\\n <li><a href=\\\"#\\\">Discover<\\/a><\\/li>\\n <li><a href=\\\"#\\\">Plan Your Trip<\\/a><\\/li>\\n <\\/ul>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n<\\/nav>\\n<main class=\\\"intro-section\\\">\\n <div class=\\\"container\\\">\\n <div class=\\\"grid\\\">\\n <div class=\\\"column-xs-12\\\">\\n <ul class=\\\"slider\\\">\\n <li class=\\\"slider-item active\\\">\\n <div class=\\\"grid vertical\\\">\\n <div class=\\\"column-xs-12 column-md-2 hide-mobile\\\">\\n <div class=\\\"intro\\\">\\n <a href=\\\"#\\\">\\n <h1 class=\\\"title\\\"><span class=\\\"underline\\\">Explore Tokyo<\\/span><\\/h1>\\n <\\/a>\\n <\\/div>\\n <\\/div>\\n <div class=\\\"column-xs-12 column-md-10\\\">\\n <div class=\\\"image-holder\\\">\\n <img src=\\\"https:\\/\\/source.unsplash.com\\/cddaZDt6uRw\\\">\\n <\\/div>\\n <div class=\\\"grid\\\">\\n <div class=\\\"column-xs-12 column-md-9\\\">\\n <div class=\\\"intro show-mobile\\\">\\n <a href=\\\"#\\\">\\n <h1 class=\\\"title\\\"><span class=\\\"underline\\\">Explore Tokyo<\\/span><\\/h1>\\n <\\/a>\\n <\\/div>\\n <p class=\\\"description\\\">Tokyo, Japan’s busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples.<\\/p>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/li>\\n <li class=\\\"slider-item\\\">\\n <div class=\\\"grid vertical\\\">\\n <div class=\\\"column-xs-12 column-md-2 hide-mobile\\\">\\n <div class=\\\"intro\\\">\\n <a href=\\\"#\\\">\\n <h1 class=\\\"title\\\"><span class=\\\"underline\\\">Explore Kyoto<\\/span><\\/h1>\\n <\\/a>\\n <\\/div>\\n <\\/div>\\n <div class=\\\"column-xs-12 column-md-10\\\">\\n <div class=\\\"image-holder\\\">\\n <img src=\\\"https:\\/\\/source.unsplash.com\\/Pz3EHf-KJfc\\\">\\n <\\/div>\\n <div class=\\\"grid\\\">\\n <div class=\\\"column-xs-12 column-md-9\\\">\\n <div class=\\\"intro show-mobile\\\">\\n <a href=\\\"#\\\">\\n <h1 class=\\\"title\\\"><span class=\\\"underline\\\">Explore Kyoto<\\/span><\\/h1>\\n <\\/a>\\n <\\/div>\\n <p class=\\\"description\\\">Kyoto is famous for its numerous classical Buddhist temples, gardens, imperial palaces, Shinto shrines and traditional wooden houses.<\\/p>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/li>\\n <li class=\\\"slider-item\\\">\\n <div class=\\\"grid vertical\\\">\\n <div class=\\\"column-xs-12 column-md-2 hide-mobile\\\">\\n <div class=\\\"intro\\\">\\n <a href=\\\"#\\\">\\n <h1 class=\\\"title\\\"><span class=\\\"underline\\\">Explore Osaka<\\/span><\\/h1>\\n <\\/a>\\n <\\/div>\\n <\\/div>\\n <div class=\\\"column-xs-12 column-md-10\\\">\\n <div class=\\\"image-holder\\\">\\n <img src=\\\"https:\\/\\/source.unsplash.com\\/peYW3VwICpE\\\">\\n <\\/div>\\n <div class=\\\"grid\\\">\\n <div class=\\\"column-xs-12 column-md-9\\\">\\n <div class=\\\"intro show-mobile\\\">\\n <a href=\\\"#\\\">\\n <h1 class=\\\"title\\\"><span class=\\\"underline\\\">Explore Osaka<\\/span><\\/h1>\\n <\\/a>\\n <\\/div>\\n <p class=\\\"description\\\">Osaka is a large port city and commercial center known for its modern architecture, nightlife and hearty street food.<\\/p>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/li>\\n <li class=\\\"slider-item\\\">\\n <div class=\\\"grid vertical\\\">\\n <div class=\\\"column-xs-12 column-md-2 hide-mobile\\\">\\n <div class=\\\"intro\\\">\\n <a href=\\\"#\\\">\\n <h1 class=\\\"title\\\"><span class=\\\"underline\\\">Explore Hokkaido<\\/span><\\/h1>\\n <\\/a>\\n <\\/div>\\n <\\/div>\\n <div class=\\\"column-xs-12 column-md-10\\\">\\n <div class=\\\"image-holder\\\">\\n <img src=\\\"https:\\/\\/source.unsplash.com\\/VmeOZQjTVGE\\\">\\n <\\/div>\\n <div class=\\\"grid\\\">\\n <div class=\\\"column-xs-12 column-md-9\\\">\\n <div class=\\\"intro show-mobile\\\">\\n <a href=\\\"#\\\">\\n <h1 class=\\\"title\\\"><span class=\\\"underline\\\">Explore Hokkaido<\\/span><\\/h1>\\n <\\/a>\\n <\\/div>\\n <p class=\\\"description\\\">Hokkaido, the northernmost of Japan’s main islands, is known for its volcanoes, natural hot springs (\\\"onsen\\\") and ski areas.<\\/p>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/li>\\n <\\/ul>\\n <div class=\\\"grid\\\">\\n <div class=\\\"column-xs-12\\\">\\n <div class=\\\"controls\\\">\\n <button class=\\\"previous\\\">\\n <span class=\\\"visually-hidden\\\">Previous<\\/span>\\n <span class=\\\"icon arrow-left\\\" aria-hidden=\\\"true\\\"><\\/span>\\n <\\/a>\\n <button class=\\\"next\\\">\\n <span class=\\\"visually-hidden\\\">Next<\\/span>\\n <span class=\\\"icon arrow-right\\\" aria-hidden=\\\"true\\\"><\\/span>\\n <\\/a>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n<\\/main>\",\"css\":\"@import url('https:\\/\\/fonts.googleapis.com\\/css?family=Barlow:400,500,700');\\n\\n$white: #fff;\\n$black: #232323;\\n$gray: #8d8d8d;\\n$red: #e83f43;\\n\\n* {\\n box-sizing: border-box;\\n &::before, &::after {\\n box-sizing: border-box;\\n }\\n}\\n\\nbody {\\n font-family: 'Barlow', sans-serif;\\n font-size: 1.125rem;\\n font-weight: 400;\\n line-height: 1.6;\\n color: $gray;\\n background: $white;\\n text-rendering: optimizeLegibility;\\n overflow-x: hidden;\\n}\\n\\na {\\n color: $gray;\\n text-decoration: none;\\n &:hover {\\n color: $black;\\n }\\n}\\n\\nnav {\\n position: relative;\\n z-index: 2;\\n padding: 1.25rem 0 1.25rem 0;\\n ul {\\n line-height: 2.2;\\n display: flex;\\n justify-content: flex-start;\\n li {\\n margin: 0.325rem 0;\\n }\\n }\\n}\\n\\n#logo {\\n color: $black;\\n font-weight: 700;\\n font-size: 1.125rem;\\n}\\n\\n#highlight {\\n color: $red;\\n}\\n\\nimg {\\n\\twidth: 100%;\\n height: 43vh;\\n\\tobject-fit: cover;\\n}\\n\\n.vertical {\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n}\\n\\n.intro {\\n position: relative;\\n z-index: 2;\\n opacity: 0;\\n animation: fadeIn 0.8s 0.4s ease forwards;\\n .title {\\n display: inline-block;\\n font-size: 2rem;\\n font-weight: 500;\\n line-height: 1.1;\\n text-decoration: underline;\\n color: $red;\\n .underline {\\n color: $black;\\n }\\n }\\n}\\n\\n.description {\\n position: relative;\\n z-index: 1;\\n margin: 1rem 0 1.5rem 0;\\n font-size: 1rem;\\n opacity: 0;\\n animation: fadeIn 0.8s 0.6s ease forwards;\\n}\\n\\n.slider-item {\\n display: none;\\n &.active {\\n display: block;\\n .hide-mobile {\\n display: none;\\n }\\n .show-mobile {\\n display: block;\\n margin: 1rem 0;\\n }\\n }\\n}\\n\\nbutton {\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n outline: none;\\n border: 0;\\n vertical-align: middle;\\n text-decoration: none;\\n background: transparent;\\n margin: 0;\\n padding: 0;\\n font-size: 100%;\\n font: inherit;\\n font-size: inherit;\\n width: 55px;\\n height: 55px;\\n}\\n\\n.controls {\\n position: relative;\\n z-index: 1;\\n display: flex;\\n justify-content: flex-end;\\n padding: 0.25rem 0 0.25rem 0;\\n .previous {\\n border: 1px solid $black;\\n }\\n .next {\\n border-top: 1px solid $black;\\n border-right: 1px solid $black;\\n border-bottom: 1px solid $black;\\n }\\n .icon {\\n position: relative;\\n margin: auto;\\n width: 20px;\\n height: 1px;\\n background-color: currentColor;\\n &.arrow-left {\\n &::before {\\n content: '';\\n position: absolute;\\n left: 1px;\\n top: -4px;\\n width: 9px;\\n height: 9px;\\n border-top: solid 1px currentColor;\\n border-right: solid 1px currentColor;\\n transform: rotate(-135deg);\\n }\\n }\\n &.arrow-right {\\n &::before {\\n content: '';\\n position: absolute;\\n right: 1px;\\n top: -4px;\\n width: 9px;\\n height: 9px;\\n border-top: solid 1px currentColor;\\n border-right: solid 1px currentColor;\\n transform: rotate(45deg);\\n }\\n }\\n }\\n}\\n\\n.previous, .next {\\n display: flex;\\n align-content: center;\\n justify-content: center;\\n flex-basis: 15%;\\n font-size: 2rem;\\n color: $black;\\n &:hover .icon {\\n transform: scale(1.5);\\n }\\n .icon {\\n transition: transform 0.1s ease;\\n }\\n}\\n\\n.active .image-holder::before {\\n position: absolute;\\n content: '';\\n z-index: 1;\\n display: block;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background: $white;\\n transform-origin: 100% 50%;\\n animation: revealRight 1s cubic-bezier(0.23,1,0.75,1) forwards;\\n}\\n\\n@keyframes revealRight {\\n 0% {\\n transform: scaleX(1);\\n }\\n 100% {\\n transform: scaleX(0);\\n }\\n}\\n\\n@keyframes fadeIn {\\n 0% {\\n opacity: 0;\\n }\\n 100% {\\n opacity: 1;\\n }\\n}\\n\\n@keyframes fadeInLeft {\\n 0% {\\n opacity: 0;\\n transform: translateX(20%);\\n }\\n 100% {\\n opacity: 1;\\n transform: translate(0);\\n }\\n}\\n\\n.toggle-nav {\\n display: flex;\\n justify-content: flex-end;\\n font-size: 1rem;\\n line-height: 1.9;\\n i {\\n font-size: 1.5rem;\\n line-height: 1.3;\\n margin: 0 0 0 0.5rem;\\n }\\n}\\n\\n.flex-nav ul {\\n position: absolute;\\n z-index: 1;\\n list-style: none;\\n margin: 0;\\n padding: 0;\\n display: flex;\\n flex-wrap: wrap;\\n flex-direction: column;\\n display: none;\\n width: 100%;\\n left: 0;\\n padding: 1rem;\\n background: $white;\\n text-align: center;\\n &.active {\\n display: flex;\\n }\\n}\\n\\n@media (min-width: $md) {\\n nav ul {\\n justify-content: flex-end;\\n }\\n \\n #logo {\\n font-size: 1.25rem;\\n }\\n \\n .controls {\\n padding: 1.75rem 0 1.75rem 0;\\n }\\n\\n .intro {\\n animation: fadeInLeft 0.8s 0.4s ease forwards;\\n .title {\\n font-size: 4.25rem;\\n padding: 2.5rem 2.5rem 3rem 2.5rem;\\n background: $white;\\n }\\n }\\n \\n img {\\n height: 60vh;\\n }\\n \\n .description {\\n font-size: 1.25rem;\\n margin: 1rem 0 0 0;\\n }\\n \\n .previous, .next {\\n flex-basis: 8.33%;\\n }\\n \\n .slider-item.active .hide-mobile {\\n display: block;\\n }\\n \\n .slider-item.active .show-mobile {\\n display: none;\\n }\\n \\n .toggle-nav {\\n display: none;\\n }\\n \\n .flex-nav ul {\\n display: flex;\\n flex-direction: row;\\n position: relative;\\n padding: 0;\\n justify-content: flex-end;\\n }\\n \\n nav {\\n padding: 1.75rem 0 1.75rem 0;\\n ul {\\n line-height: 2.2;\\n display: flex;\\n justify-content: flex-start;\\n li {\\n font-size: 1rem;\\n text-transform: uppercase;\\n margin: 0 2rem 0 0;\\n &:nth-child(3) {\\n margin: 0;\\n }\\n }\\n }\\n }\\n}\\n\\n.visually-hidden {\\n clip: rect(0 0 0 0);\\n clip-path: inset(50%);\\n height: 1px;\\n overflow: hidden;\\n position: absolute;\\n white-space: nowrap;\\n width: 1px;\\n}\",\"parent\":0,\"js\":\"const items = document.querySelectorAll('.slider-item');\\nconst itemCount = items.length;\\nconst nextItem = document.querySelector('.next');\\nconst previousItem = document.querySelector('.previous');\\nconst navItem = document.querySelector('a.toggle-nav');\\nlet count = 0;\\n\\nfunction showNextItem() {\\n items[count].classList.remove('active');\\n\\n if(count < itemCount - 1) {\\n count++;\\n } else {\\n count = 0;\\n }\\n\\n items[count].classList.add('active');\\n console.log(count);\\n}\\n\\nfunction showPreviousItem() {\\n items[count].classList.remove('active');\\n\\n if(count > 0) {\\n count--;\\n } else {\\n count = itemCount - 1;\\n }\\n\\n items[count].classList.add('active');\\n \\/\\/ Check if working...\\n console.log(count);\\n}\\n\\nfunction toggleNavigation(){\\n this.nextElementSibling.classList.toggle('active');\\n}\\n\\nfunction keyPress(e) {\\n e = e || window.event;\\n \\n if (e.keyCode == '37') {\\n showPreviousItem();\\n } else if (e.keyCode == '39') {\\n showNextItem();\\n }\\n}\\n\\nnextItem.addEventListener('click', showNextItem);\\npreviousItem.addEventListener('click', showPreviousItem);\\ndocument.addEventListener('keydown', keyPress);\\nnavItem.addEventListener('click', toggleNavigation);\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"reset\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2018-08-22T02:28:52.000Z\",\"updated_at\":\"2020-10-01T21:27:38.000Z\",\"session_hash\":\"3a723e81335ceca6e93695c51461002f\",\"title\":\"Travel\",\"description\":\"Travel landing page made with Flexbox and CSS Grid.\",\"slug_hash\":\"MqYVOq\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"fb0030de692cc09221515ec2a00321f4\",\"has_animation\":true,\"css_pre_processor_lib\":\"\",\"checksum\":0,\"screenshot_uuid\":\"16d36585-6367-454d-bcfe-d6222cc8a2ac\",\"team_id\":0,\"css_prefix\":\"prefixfree\",\"template\":false,\"js_module\":false,\"pen_hash\":null,\"hashid\":\"MqYVOq\"}"}