CodePen Embed

Anonymous Pens can't be embedded.

{"__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 *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"indent_with\":\"spaces\",\"tab_size\":2,\"auto_save\":true,\"format_on_save\":false,\"auto_run\":true,\"id\":\"VoDkNZ\",\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"html_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"theme\":\"twilight\"},\"hashid\":\"rPeWJd\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":32245903,\"user_id\":1,\"html\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n\\t<meta charset=\\\"UTF-8\\\">\\n\\t<title>Document</title>\\n\\t<link rel=\\\"stylesheet\\\" href=\\\"https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css\\\">\\n</head>\\n<body>\\n\\n<div class=\\\"slider\\\">\\n\\t\\n\\t  <div class=\\\"swiper-container\\\">\\n\\t    <div class=\\\"swiper-wrapper\\\">\\n\\n\\t\\t\\t\\t\\n\\t      <div class=\\\"swiper-slide\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"flex\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"slider_image\\\" style=\\\"background-image: url('https://picsum.photos/600/800/?gravity7');\\\">\\n\\t    \\t\\t\\t  \\n\\t    \\t\\t\\t\\t<div class=\\\"swiper-button-next\\\"></div>\\n\\t    \\t\\t\\t\\t<div class=\\\"swiper-button-prev\\\"></div>\\n\\t\\t\\t\\t\\t\\t</div> \\n\\t\\t\\t\\t\\t\\t<div class=\\\"slider_text\\\">\\n\\t\\t\\t\\t\\t\\t\\t<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, quasi.</h1>\\n\\t\\t\\t\\t\\t\\t\\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In temporibus tempora ratione facere, ut esse iusto reprehenderit perspiciatis sunt, maiores voluptates numquam! Cumque, sapiente aliquid error consectetur minus! Recusandae aspernatur at dolor. Molestiae minus distinctio, eaque recusandae incidunt vel. Itaque, quasi, repellendus! Laboriosam iusto architecto aspernatur consequuntur neque, rem iure sed obcaecati nam officia delectus ducimus cupiditate facilis, temporibus sint dolores optio velit. Magnam dolor obcaecati repudiandae, minima deserunt sed accusamus, ipsam. Consequatur soluta eveniet dolore voluptatum numquam non sequi, temporibus eos odit! Consectetur molestiae dicta illum non earum distinctio tempore ipsum ipsam, voluptas voluptatum.</p>\\n\\t\\t\\t\\t\\t\\t</div> \\n\\t\\t\\t\\t\\t</div> \\n\\t      </div> \\n\\n\\t\\t\\t\\t\\n\\t      <div class=\\\"swiper-slide\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"flex\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"slider_image\\\" style=\\\"background-image: url('https://picsum.photos/600/800/?gravity5');\\\">\\n\\t    \\t\\t\\t  \\n\\t    \\t\\t\\t\\t<div class=\\\"swiper-button-next\\\"></div>\\n\\t    \\t\\t\\t\\t<div class=\\\"swiper-button-prev\\\"></div>\\n\\t\\t\\t\\t\\t\\t</div> \\n\\t\\t\\t\\t\\t\\t<div class=\\\"slider_text\\\">\\n\\t\\t\\t\\t\\t\\t\\t<h1>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</h1>\\n\\t\\t\\t\\t\\t\\t\\t<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Последний повстречался предупредила текст переписали заманивший он города, все вопроса толку, предложения встретил? За, инициал страну текстов. Подзаголовок но, вопроса это языком. Вскоре которой переписывается знаках предложения собрал имени, приставка однажды толку которое семантика путь пунктуация что домах о над бросил всеми рукопись большой свой живет, рекламных журчит обеспечивает составитель, дал!</p>\\n\\t\\t\\t\\t\\t\\t</div> \\n\\t\\t\\t\\t\\t</div> \\n\\t      </div> \\n\\n\\n\\t    </div> \\n\\n\\t  </div> \\n\\t</div> \\n\\n\\n\\t<script src=\\\"https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js\\\"></script>\\n  \\n  <script>\\n    var swiper = new Swiper('.swiper-container', {\\n\\n      keyboard: {\\t\\n        enabled: true,\\n      },\\n      centeredSlides: true,\\n      loop: true,\\n      autoplay: {\\n        delay: 15000,\\n        disableOnInteraction: false,\\n      },\\n      navigation: {\\t\\t\\t/* Навигация */\\n        nextEl: '.swiper-button-next',\\n        prevEl: '.swiper-button-prev',\\n      },\\n    });\\n  </script>\\n</body>\\n</html>\\n\\n\",\"css\":\"html, body {padding: 0; margin: 0; font-family: \\\"Arial\\\"; color: #333;width: 100%;height: 100%;}\\n\\n.swiper-container {\\n\\twidth: 800px;\\n\\theight: 100%;\\n\\tbackground-color: #eee;\\n}\\n\\n.flex {\\n\\tdisplay: flex;\\n  height: 100%; \\n}\\n\\n.swiper-slide {\\n\\tbackground-color: #eee;\\n    height: auto!important;\\n}\\n\\n.slider_image {\\n\\tflex: 0 0 40%;\\n\\tposition: relative;\\n\\toverflow: hidden; }\\n\\n.slider_image img {\\n\\twidth: 100%;\\n\\theight: 100%;\\n\\toverflow: hidden; }\\n\\n.slider_text {\\n\\tflex: 1 1 auto;\\n\\tmargin-left: 2rem; }\\n\\n.slider_text h1 {\\tfont-size: 23px; }\\n.slider p {\\tfont-size: 18px; }\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2019-01-27T03:23:01.000Z\",\"updated_at\":\"2019-01-27T03:23:01.000Z\",\"title\":\"Untitled\",\"description\":\"\",\"slug_hash\":\"rPeWJd\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":null,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:57.485Z\",\"cpid\":null,\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}