Skip to content

Instantly share code, notes, and snippets.

@esironal

esironal/index.html

Last active March 9, 2022 06:01
Show Gist options
  • Save esironal/958317a43de6d23fcf7d to your computer and use it in GitHub Desktop.
Save esironal/958317a43de6d23fcf7d to your computer and use it in GitHub Desktop.
Download ZIP
rOdYKX
Raw
index.html
<html class="ie" lang="en">
<![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en" class="cookie_used_true">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<script src="http://assets.codepen.io/assets/common/cookie_used_reload-81ec504e4e90af045a89fa3f46728a6c.js" type="text/javascript"></script>
<title>CodePen - A Pen by Jonah H</title>
<link href="http://assets.codepen.io/assets/global/global-NoMQ-b60dfa1518801f921c09e1433e3d4c57.css" media="all" rel="stylesheet" type="text/css" />
<link href="http://assets.codepen.io/assets/editor/editor-dd10947178fc8f8144487c9a9028b5a2.css" media="all" rel="stylesheet" type="text/css" />
<meta name="description" content="...">
<link href="http://assets.codepen.io/assets/editor/themes/solarized-light-98e40a0670b6444ab3daefa723876308.css" id="cm-theme" media="screen" rel="stylesheet" type="text/css" />
<link href="http://assets.codepen.io/assets/editor/layouts/top-5ede9b3ea9b62336d56e48b3dea60371.css" media="screen" rel="stylesheet" type="text/css" />
<style id="cm-font-family">
.CodeMirror {
font-family: Monaco, MonoSpace;
}
</style>
<style id="cm-font-size">
.CodeMirror {
font-size: 13px;
}
</style>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@CodePen">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="...">
<meta name="twitter:image" content="http://s3-us-west-2.amazonaws.com/m.cdpn.io/screenshot-coming-soon-large.png">
<meta property="og:image" content="http://s3-us-west-2.amazonaws.com/m.cdpn.io/screenshot-coming-soon-large.png" itemprop="thumbnailUrl">
<meta property="og:title" content="">
<meta property="og:url" content="http://codepen.io/nar/details/">
<meta property="og:site_name" content="CodePen">
<link rel="alternate" type="application/json+oembed"
href="http://codepen.io/api/oembed?url=http%3A%2F%2Fcodepen.io%2Fnar%2Fpen%2F&format=json"
title="" />
<link rel="shortcut icon" href="/favicon.ico">
<meta content="authenticity_token" name="csrf-param" />
<meta content="5qU8Etf6I/ChAjTv9IUmjIw/Mz0/KZRGgygDmEJwN2Y=" name="csrf-token" />
</head>
<body class="editor state-htmlOn-cssOn-jsOff
preload prelayout
layout-
logged-in
">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100" style="enable-background: new 0 0 100 100; display: none;" xml:space="preserve">
<defs>
<path id="icon-heart" d="M99.866,26.199C98.533,13.167,87.456,3,73.988,3C63.193,3,53.938,9.532,50,18.832C46.062,9.532,36.807,3,26.013,3
C12.544,3,1.466,13.167,0.134,26.199C0.045,27.067,0,27.95,0,28.842C0,60.24,38.788,75.059,50,96l0,0
c11.212-20.94,50-35.759,50-67.158C100,27.95,99.955,27.067,99.866,26.199z"/>
<path id="icon-codepen-box" d="M99.961,34.205c-0.009-0.063-0.025-0.124-0.035-0.187c-0.021-0.121-0.043-0.242-0.075-0.36
c-0.019-0.071-0.044-0.14-0.067-0.208c-0.034-0.105-0.068-0.21-0.11-0.312c-0.029-0.071-0.063-0.142-0.096-0.21
c-0.045-0.097-0.092-0.192-0.146-0.284c-0.04-0.068-0.082-0.134-0.122-0.2c-0.058-0.089-0.117-0.176-0.182-0.26
c-0.047-0.063-0.097-0.126-0.147-0.187c-0.068-0.079-0.139-0.158-0.214-0.232c-0.056-0.058-0.112-0.115-0.171-0.168
c-0.079-0.071-0.161-0.14-0.243-0.205c-0.064-0.05-0.128-0.1-0.195-0.147c-0.025-0.016-0.047-0.037-0.071-0.053L52.383,0.722
c-1.444-0.962-3.323-0.962-4.767,0L1.914,31.19c-0.024,0.016-0.046,0.037-0.071,0.053c-0.067,0.047-0.13,0.098-0.193,0.147
c-0.084,0.065-0.166,0.134-0.243,0.205c-0.061,0.053-0.116,0.11-0.172,0.168c-0.075,0.074-0.146,0.153-0.213,0.232
c-0.051,0.061-0.101,0.124-0.148,0.187c-0.063,0.084-0.124,0.171-0.18,0.26c-0.043,0.066-0.084,0.132-0.124,0.2
c-0.053,0.092-0.1,0.187-0.146,0.284c-0.033,0.068-0.067,0.139-0.096,0.21c-0.042,0.103-0.076,0.208-0.11,0.312
c-0.022,0.068-0.047,0.137-0.067,0.208c-0.031,0.119-0.052,0.239-0.075,0.36c-0.011,0.063-0.026,0.124-0.034,0.187
C0.014,34.389,0,34.576,0,34.765v30.468c0,0.189,0.014,0.376,0.04,0.563c0.008,0.061,0.023,0.124,0.034,0.184
c0.022,0.121,0.043,0.242,0.075,0.36c0.02,0.071,0.045,0.14,0.067,0.208c0.034,0.105,0.068,0.21,0.11,0.315
c0.029,0.071,0.063,0.14,0.096,0.208c0.046,0.097,0.094,0.191,0.146,0.287c0.039,0.066,0.08,0.131,0.124,0.197
c0.056,0.089,0.117,0.176,0.18,0.261c0.047,0.065,0.097,0.126,0.148,0.187c0.067,0.079,0.138,0.158,0.213,0.231
c0.057,0.058,0.112,0.115,0.172,0.168c0.078,0.071,0.159,0.14,0.243,0.206c0.063,0.05,0.126,0.1,0.193,0.147
c0.025,0.016,0.047,0.037,0.071,0.053l45.703,30.469C48.338,99.758,49.169,100,50,100c0.83,0,1.661-0.242,2.383-0.723
l45.703-30.469c0.024-0.016,0.045-0.037,0.071-0.053c0.067-0.047,0.13-0.097,0.195-0.147c0.083-0.066,0.164-0.134,0.243-0.206
c0.059-0.053,0.115-0.11,0.171-0.168c0.075-0.074,0.146-0.153,0.214-0.231c0.05-0.061,0.1-0.121,0.147-0.187
c0.065-0.084,0.124-0.171,0.182-0.261c0.041-0.066,0.083-0.131,0.122-0.197c0.054-0.095,0.101-0.189,0.146-0.287
c0.033-0.068,0.067-0.137,0.096-0.208c0.042-0.105,0.076-0.21,0.11-0.315c0.022-0.068,0.048-0.137,0.067-0.208
c0.032-0.118,0.054-0.239,0.075-0.36c0.01-0.061,0.026-0.124,0.035-0.184C99.985,65.61,100,65.423,100,65.233V34.765
C100,34.576,99.985,34.389,99.961,34.205z M54.297,12.327l33.668,22.444L72.927,44.831L54.297,32.369V12.327z M45.703,12.327
v20.042L27.074,44.831l-15.04-10.061L45.703,12.327z M8.594,42.809L19.345,50L8.594,57.19V42.809z M45.703,87.672L12.035,65.228
l15.04-10.058L45.703,67.63V87.672z M50,60.165L34.802,50L50,39.833L65.198,50L50,60.165z M54.297,87.672V67.63L72.927,55.17
l15.039,10.058L54.297,87.672z M91.405,57.19L80.656,50l10.75-7.191V57.19z"/>
<path id="icon-code" d="M28.871,21.5L0,50.004L28.874,78.5l10.497-10.349L20.998,50.004l18.373-18.13L28.871,21.5z M71.129,21.5
L60.633,31.865l18.378,18.131L60.633,68.122l10.496,10.365L100,49.974L71.129,21.5z"/>
<path id="icon-key" d="M84,0H16C7.164,0,0,7.164,0,16v68c0,8.836,7.164,16,16,16h68c8.836,0,16-7.164,16-16V16C100,7.164,92.836,0,84,0z
M85,70.167c0,5.154-3.583,9.333-8.001,9.333H23c-4.418,0-8-4.179-8-9.333V18.833c0-5.155,3.582-9.333,8-9.333h53.999
C81.417,9.5,85,13.679,85,18.833V70.167z"/>
<path id="icon-help" d="M75,0H25C11.19,0,0,11.193,0,25v50c0,13.802,11.19,25,25,25h50c13.811,0,25-11.198,25-25V25C100,11.193,88.811,0,75,0z
M57.203,85.067H41.504V72.542h15.699V85.067L57.203,85.067z M73.357,42.041c-0.84,2.066-1.873,3.834-3.102,5.298
c-1.235,1.474-2.604,2.718-4.101,3.751c-1.498,1.035-2.922,2.066-4.249,3.101c-1.333,1.034-1.553,2.214-2.596,3.547
c-1.025,1.335-0.977,3.004-0.977,5.006v3.924H41.668v-4.623c0-2.864,1.366-5.265,2.27-7.202c0.896-1.935,2.255-3.581,3.459-4.947
c1.196-1.367,2.62-2.556,3.955-3.557c1.327-0.993,2.637-1.993,3.776-2.995c1.123-1.001,2.083-2.1,2.783-3.304
c0.7-1.197,1.043-2.694,0.977-4.5c0-3.06-0.74-5.33-2.245-6.795c-1.498-1.465-3.582-2.206-6.25-2.206c-1.8,0-3.337,0.351-4.639,1.05
c-1.303,0.7-2.369,1.635-3.199,2.808c-0.837,1.163-1.448,3.593-1.847,5.156c-0.407,1.57-0.602,6.115-0.602,6.115H25.399
c0.073-8.333,0.684-7.963,1.855-10.965c1.164-2.995,2.8-6.132,4.899-8.33c2.099-2.197,4.63-4.179,7.601-5.417
c2.962-1.228,6.283-1.977,9.945-1.977c4.736,0,8.683,0.581,11.856,1.876c3.167,1.302,5.713,2.889,7.65,4.817
c1.929,1.937,3.312,4.004,4.149,6.234c0.831,2.237,1.245,4.313,1.245,6.242C74.601,37.354,74.187,39.975,73.357,42.041z"/>
<g id="icon-logout">
<rect x="40.403" width="17.919" height="62.191"/>
<path d="M67.811,12.449v16.909c8.432,5.818,12.691,14.664,12.691,24.572c0,17.518-13.682,31.717-31.199,31.717
c-17.512,0-30.335-14.199-30.335-31.717c0-9.886,3.516-18.723,13.002-24.537V12.47C14.051,19.929,4.864,35.692,4.864,53.93
c0,25.444,20.072,46.07,45.51,46.07c25.445,0,44.763-20.626,44.763-46.07C95.137,35.675,85.729,19.904,67.811,12.449z"/>
</g>
<g id="icon-menu">
<rect y="3.415" width="100" height="22.532"/>
<rect y="38.734" width="100" height="22.532"/>
<rect y="74.053" width="100" height="22.532"/>
</g>
<g id="icon-eye">
<path d="M50,12.548c-27.612,0-50,37.012-50,37.012s22.388,37.989,50,37.989c27.611,0,50-37.989,50-37.989S77.611,12.548,50,12.548z
M50,75.049c-13.807,0-25-11.193-25-25s11.193-25,25-25c13.807,0,25,11.193,25,25S63.807,75.049,50,75.049z"/>
<path d="M62.5,50.097c0,6.909-5.598,12.5-12.5,12.5c-6.903,0-12.5-5.593-12.5-12.5c0-6.908,5.597-12.5,12.5-12.5
C56.902,37.597,62.5,43.189,62.5,50.097z"/>
</g>
<polygon id="icon-x" points="100,78.905 78.735,100 49.608,71.094 21.263,99.217 0,78.123 28.344,50 0,21.877 21.263,0.78 49.608,28.905
78.735,0 100,21.094 70.862,50"/>
<path id="icon-gear" d="M87.687,45.077c-0.313-2.433-0.816-4.807-1.542-7.079l8.145-11.73l-5.827-7.515l-0.094-0.123l-5.824-7.514
l-12.955,5.577c-2.041-1.265-4.192-2.362-6.459-3.219L59.42,0h-9.34h-0.153h-9.341l-3.709,13.474
c-2.27,0.857-4.421,1.955-6.463,3.222l-12.957-5.577l-5.825,7.514l-0.097,0.124l-5.822,7.517l8.146,11.731
c-0.726,2.271-1.233,4.645-1.544,7.079L0,52.032l2.08,9.375l0.033,0.15l2.08,9.375l14.001,0.761c1.295,2.028,2.771,3.926,4.4,5.668
l-2.396,14.227l8.416,4.173l0.138,0.067L37.169,100l9.309-10.796c1.161,0.109,2.335,0.173,3.524,0.173s2.358-0.074,3.52-0.184
l9.317,10.804l8.415-4.173l0.141-0.066l8.413-4.172l-2.396-14.228c1.628-1.741,3.104-3.64,4.4-5.672l14-0.759l2.078-9.375
l0.035-0.154L100,52.025L87.687,45.077z M50.003,34.51c8.435,0,15.272,7.035,15.272,15.719c0,8.679-6.839,15.717-15.272,15.717
c-8.436,0-15.272-7.038-15.272-15.717C34.731,41.545,41.569,34.51,50.003,34.51z"/>
<path id="icon-arrow-right" d="M59.469,9.429L45.096,23.812c0,0,8.063,8.063,16.006,16.007H0v20.355h61.103L45.086,76.189l14.383,14.382
L100,50L59.469,9.429z"/>
<polygon id="icon-arrow-down-mini" points="0,21.113 100,21.113 50,78.887 "/>
<g id="icon-fork">
<path d="M84.339,62.504c-4.454,0-8.463,1.818-11.313,4.721c-0.519-0.49-1.041-1.006-1.578-1.572
c-6.965-7.211-14.451-19.189-22.311-29.678C41.16,25.766,32.941,15.562,20.125,15.069H0v14.37h20.126
c2.555-0.111,6.556,1.993,11.208,6.914c6.961,7.197,14.454,19.171,22.315,29.662c4.822,6.164,9.759,12.293,15.741,16.289
c1.99,6.191,7.93,10.688,14.949,10.688c8.648,0,15.661-6.824,15.661-15.244C100,69.328,92.987,62.504,84.339,62.504z"/>
<path d="M51.541,29.438h18.986c2.637,4.795,7.831,8.059,13.811,8.059c8.648,0,15.661-6.824,15.661-15.243S92.986,7.01,84.338,7.01
c-5.979,0-11.174,3.264-13.811,8.058H36.3C42.307,18.619,47.161,23.992,51.541,29.438z"/>
</g>
<path id="icon-run" d="M55.702,50.002L77.85,72.324L100,50.002l-9.173-9.249l-6.611,6.668C82.878,25.187,64.56,7.5,42.169,7.5
C18.916,7.5,0,26.567,0,50.002C0,73.436,18.917,92.5,42.169,92.5h16.218V79.424H42.169c-16.102,0-29.193-13.197-29.193-29.421
c0-16.229,13.092-29.426,29.193-29.426c15.08,0,27.37,11.615,28.892,26.41l-6.184-6.233L55.702,50.002z"/>
<path id="icon-save" d="M84.187,44.046c0.084-0.753,0.114-1.52,0.114-2.289c0-13.402-10.814-24.257-24.154-24.257
c-10.354,0-19.161,6.551-22.599,15.754c-2.274-2.508-5.521-4.111-9.166-4.111c-6.872,0-12.439,5.59-12.439,12.493
c0,0.816,0.084,1.606,0.239,2.38C7.014,45.534,0,53.472,0,63.095C0,73.824,8.648,82.5,19.323,82.5h61.354
C91.351,82.5,100,73.824,100,63.095C100,53.59,93.177,45.715,84.187,44.046z"/>
<g id="icon-edit">
<path d="M24.56,92.536L0,100l7.453-24.583C13.809,75.173,24.775,86.209,24.56,92.536z"/>
<path d="M96.617,32.082l-0.475,0.471L67.383,3.766l0.472-0.472C80.782-9.646,109.871,18.811,96.617,32.082z"/>
<path d="M61.64,9.516l28.758,28.785L44.095,84.646c-1.222,1.221-2.234,0.884-2.234,0.884l2.314-15.356l-14.454,0.074l0.072-14.468
l-15.342,2.312c0,0-0.34-1.011,0.883-2.234L61.64,9.516z"/>
</g>
<path id="icon-share" d="M75,46.226v15.096l25-25.161L75,11v12.581c-38.25,0.25-37.5,37.742-37.5,37.742S51.126,42.477,75,46.226z M55,13.516H7.5
c-6.15,0-7.5,1.761-7.5,7.549v60.387C0,87.718,1.499,89,7.5,89H80c6.025,0,7.5-1.133,7.5-7.548v-20.13L75,72.117v4.302H12.5V26.097
h30L55,13.516z"/>
<g id="icon-text">
<polygon points="44.937,10 0,10 0,55.171 24.117,90 41.296,77.165 26.218,55.171 44.937,55.171"/>
<polygon points="100,10 55.062,10 55.062,55.171 79.183,90 96.361,77.165 81.284,55.171 100,55.171"/>
</g>
<path id="icon-check" d="M34.357,91.176L0,56.604L16.687,39.81l18.157,18.264l48.954-49.25L100,25.125L34.357,91.176z"/>
<g id="icon-user">
<circle cx="50" cy="25" r="25"/>
<path d="M75,62.5H25c-6.903,0-12.5,5.597-12.5,12.5v25H25h50h12.5V75C87.5,68.097,81.903,62.5,75,62.5z"/>
</g>
<path id="icon-file" d="M56.2,0H12.5v100h75V31.2L56.2,0z M25,87.5v-75h25v25h25v50H25z"/>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="display: none;">
<defs>
<g id="icon-editor-top">
<rect x="72.521" width="27.479" height="48.365"/>
<rect y="55.952" width="100" height="44.048"/>
<rect x="36.26" width="27.479" height="48.365"/>
<rect width="27.479" height="48.365"/>
</g>
<g id="icon-editor-left">
<rect width="48.365" height="27.479"/>
<rect x="55.951" width="44.049" height="100"/>
<rect y="36.262" width="48.365" height="27.479"/>
<rect y="72.521" width="48.365" height="27.479"/>
</g>
<g id="icon-editor-right">
<rect x="51.637" y="72.521" width="48.363" height="27.479"/>
<rect width="44.048" height="100"/>
<rect x="51.637" y="36.261" width="48.363" height="27.479"/>
<rect x="51.637" width="48.363" height="27.479"/>
</g>
</defs>
</svg>
<header class="main-header group" id="main-header">
<div class="header-left">
<h1 class="logo header-chunk">
<a href="http://codepen.io/">
CodePen
</a>
</h1>
<button id="run" class="top-button button run">
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-run"></use>
</svg>
Run
</button>
<button id="save" class="top-button button">
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-save"></use>
</svg>
Save
</button>
</div>
<div class="header-right">
<div class="user-stuff header-chunk">
<div class="logged-in-user-stuff">
<a href="/nar/">
<img id="mini-personal-avatar" src="//gravatar.com/avatar/e9b32a5e5090c79ac94b160c3b302249?s=80" width="36" height="36" alt="User Gravatar">
</a>
<svg viewBox="0 0 100 100" class="dropdown-arrow">
<use xlink:href="#icon-arrow-down-mini"></use>
</svg>
<ul class="dropdown group">
<li class="dropdown-newpen">
<a href="/pen/">
<svg viewBox="0 0 100 100" class="icon-codepen-box">
<use xlink:href="#icon-codepen-box"></use>
</svg>
New Pen
</a>
</li>
<li class="dropdown-newpost sep-after">
<div class="has-submenu">
<a href="/write/">
<svg viewBox="0 0 100 100" class="icon-edit">
<use xlink:href="#icon-edit"></use>
</svg>
New Post
</a>
<ul class="submenu">
<li><a href="/write/manage/">Manage Posts</a></li>
<li>
<a href="/nar/blog/">
View Blog
</a>
</li>
</ul>
</div>
</li>
<li class="dropdown-embedbuilder">
<a href="/nar/embed/builder/public/">
<svg viewBox="0 0 100 100" class="icon-code">
<use xlink:href="#icon-code"></use>
</svg>
Embed Builder
</a>
</li>
<li class="dropdown-yourprofile">
<div class="has-submenu">
<a href="/nar/">
<svg viewBox="0 0 100 100" class="icon-user">
<use xlink:href="#icon-user"></use>
</svg>
Your Profile
</a>
<ul class="submenu">
<li><a href="/nar/public/">Public Pens</a></li>
<li><a href="/nar/forked/">Forked Pens</a></li>
<li><a href="/nar/loved/">Loved Pens</a></li>
<li><a href="/nar/activity/">Recent Activity</a></li>
</ul>
</div>
</li>
<li class="dropdown-yoursettings">
<div class="has-submenu">
<a href="/nar/settings/">
<svg viewBox="0 0 100 100" class="icon-gear">
<use xlink:href="#icon-gear"></use>
</svg>
Your Settings
</a>
<ul class="submenu">
<li><a href="/nar/settings#editor">Editor Settings</a></li>
<li><a href="/nar/settings#profile">Profile Settings</a></li>
<li><a href="/nar/settings#blog">Blog Settings</a></li>
<li><a href="/nar/settings#notifications">Email Settings</a></li>
<li><a href="/nar/settings#pro">Account Settings</a></li>
</ul>
</div>
</li>
<li class="dropdown-help sep-after">
<a href="http://blog.codepen.io/documentation/">
<svg viewBox="0 0 100 100" class="icon-help">
<use xlink:href="#icon-help"></use>
</svg>
Help
</a>
</li>
<li class="dropdown-logout sep-after">
<a href="/login/logout" id="logout">
<svg viewBox="0 0 100 100" class="icon-logout">
<use xlink:href="#icon-logout"></use>
</svg>
Log Out
</a> </li>
</ul>
</div>
</div>
</div>
</header>
<div id="pen-details" class="pen-details">
<form id="pen-details-form" class="pen-details-form">
<div>
<label for="pen-details-title" class="screen-reader-text">Title</label>
<input type="text" id="pen-details-title" class="pen-details-title" name="pen-details-title"
value="" placeholder="Pen Title" maxlength="255" >
</div>
<div>
<label for="pen-details-description" class="screen-reader-text">Description</label>
<textarea type="text" id="pen-details-description" placeholder="Explain what’s going on in your Pen here. This text is searchable, so it can also help others find your work. Remember to credit others where credit is due. Markdown supported."class="pen-details-description"></textarea>
</div>
<div>
<div class="tags">
<label for="pen-tags" class="tags-label">Tags <em>comma separated, <span id="max-tags-label">max of five</span></em></label>
<input type="text" id="pen-tags" class="pen-tags">
<div class="active-tags" id="active-tags">
</div>
</div>
<div class="right-button">
<input type="submit" class="button" value="Save Details" id="save-details">
</div>
</div>
</form>
</div>
<div class="page-wrap solarized-light">
<div class="boxes">
<div class="top-boxes editor-parent">
<div id="box-html" class="box box-html" data-type="html">
<div class="powers">
<div class="editor-actions-left">
<button id="settings-pane-html" class="settings-nub editor-title-button" data-type="html"
title="Open Settings">
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-gear"></use>
</svg>
</button>
<h2>HTML</h2>
</div>
<div class="editor-actions-right">
<button data-type="HTML" class="editor-title-button view-compiled-button" title="Toggle Compiled View" id="HTML-view-compiled">
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-eye"></use>
</svg>
</button>
<button class="editor-title-button close-editor-button" data-type="HTML">
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-x"></use>
</svg>
</button>
</div>
</div>
<div class="code-wrap">
<pre id="html" class="code-box">
<code>
</code>
</pre>
<div class="error-bar" id="error-bar-html">
<span class="error-icon" data-type="html">
!
</span>
</div>
</div>
<div class="settings" id="settings-html">
<form class="settings-row settings-row-1 preprocessor-choice group">
<div class="full-width">
<input type="radio" class="hidden" id="html-none" checked name="html-preprocessor" value="none">
<label class="button" for="html-none">None</label>
</div>
<div>
<input type="radio" class="hidden" id="haml" name="html-preprocessor" value="haml">
<label class="button" for="haml">Haml <a class="inline-q" target="_blank" href="http://haml.info/">?</a></label>
</div>
<div>
<input type="radio" class="hidden" id="markdown" name="html-preprocessor" value="markdown">
<label class="button" for="markdown">Markdown <a class="inline-q" target="_blank" href="http://daringfireball.net/projects/markdown/">?</a></label>
</div>
<div>
<input type="radio" class="hidden" id="slim" name="html-preprocessor" value="slim">
<label class="button" for="slim">Slim <a class="inline-q" target="_blank" href="http://slim-lang.com/">?</a></label>
</div>
<div>
<input type="radio" class="hidden" id="jade" name="html-preprocessor" value="jade">
<label class="button" for="jade">Jade <a class="inline-q" target="_blank" href="http://jade-lang.com/">?</a></label>
</div>
</form>
<form class="settings-row settings-row-2 prevent-form-submit">
<label for="html-classes" class="small">Add Class(es) to &lt;html></label>
<input type="text" id="html-classes" name="html-classes" class="fullwidth" placeholder="e.g. single post post-1234">
<input style="position: fixed; top: 500px; right: 500px;" id="tcolor" type="hidden">
</form>
<form class="settings-row settings-row-3">
<label for="head-content" class="small">Stuff for &lt;head></label>
<textarea id="head-content" name="head-content" class="fullwidth" placeholder="e.g. &lt;meta name='viewport' content='width=device-width'>"></textarea>
</form>
</div>
</div>
<div class="editor-resizer" id="editor-resizer-html"></div>
<div id="box-css" class="box box-css" data-type="css">
<div class="powers">
<div class="editor-actions-left">
<button id="settings-pane-css" class="settings-nub editor-title-button" data-type="css">
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-gear"></use>
</svg>
</button>
<h2>CSS</h2>
</div>
<div class="editor-actions-right">
<button data-type="CSS" class="editor-title-button view-compiled-button" title="Toggle Compiled View" id="CSS-view-compiled">
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-eye"></use>
</svg>
</button>
<button class="editor-title-button close-editor-button" data-type="CSS">
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-x"></use>
</svg>
</button>
</div>
</div>
<div class="code-wrap">
<pre id="css" class="code-box">
<code>
</code>
</pre>
<div class="error-bar" id="error-bar-css">
<span class="error-icon" data-type="css">
!
</span>
</div>
</div>
<div class="settings" id="settings-css">
<form class="settings-row settings-row-1 preprocessor-choice group">
<div class="full-width">
<input type="radio" class="hidden" id="css-none" checked name="css-preprocessor" value="none">
<label class="button" for="css-none">None</label>
</div>
<div>
<input type="radio" class="hidden" id="sass" name="css-preprocessor" value="sass">
<label class="button" for="sass">
Sass <small>(.sass)</small>
<a class="inline-q" target="_blank" href="http://sass-lang.com/">?</a>
<br>
<select id="sass-options" class="css-pre-processor-libs" data-css-pre-processor="sass">
<option value=''>No Add-ons</option>
<option value='compass'>with Compass</option>
<option value='bourbon'>with Bourbon</option>
</select>
</label>
</div>
<div>
<input type="radio" class="hidden" id="scss" name="css-preprocessor" value="scss">
<label class="button" for="scss">
Sass <small>(.scss)</small>
<a class="inline-q" target="_blank" href="http://sass-lang.com/">?</a>
<br>
<select id="scss-options" class="css-pre-processor-libs" data-css-pre-processor="scss">
<option value=''>No Add-ons</option>
<option value='compass'>with Compass</option>
<option value='bourbon'>with Bourbon</option>
</select>
</label>
</div>
<div>
<input type="radio" class="hidden" id="less" name="css-preprocessor" value="less">
<label class="button" for="less">
LESS
<a class="inline-q" target="_blank" href="http://lesscss.org/">?</a>
<br>
<select id="less-options" class="css-pre-processor-libs" data-css-pre-processor="less">
<option value=''>No Add-ons</option>
<option value='lesshat'>with LESS Hat</option>
</select>
</label>
</div>
<div>
<input type="radio" class="hidden" id="stylus" name="css-preprocessor" value="stylus">
<label class="button" for="stylus">
Stylus
<a class="inline-q" target="_blank" href="http://learnboost.github.io/stylus/">?</a>
<br>
<select id="stylus-options" class="css-pre-processor-libs" data-css-pre-processor="stylus">
<option value=''>No Add-ons</option>
<option value='nib'>with Nib</option>
</select>
</label>
</div>
</form>
<form id="startercss-options-form" class="settings-row settings-row-2 prevent-form-submit">
<input type="radio" id="startercss-normalize" name="startercss" checked value="normalize">
<label for="startercss-normalize" class="small-inline">Normalize</label>
<a class="inline-q" target="_blank" href="http://necolas.github.com/normalize.css/">?</a>
&ensp;
<input type="radio" id="startercss-reset" name="startercss" value="reset">
<label for="startercss-reset" class="small-inline">Reset</label>
<a class="inline-q" target="_blank" href="http://meyerweb.com/eric/tools/css/reset/">?</a>
&ensp;
<input type="radio" id="startercss-neither" name="startercss" value="neither">
<label for="startercss-neither" class="small-inline">Neither</label>
</form>
<form id="prefix-options-form" class="settings-row settings-row-3">
<input type="radio" id="prefix-prefixfree" name="prefix" value="prefixfree">
<label for="prefix-prefixfree" class="small-inline">-prefix-free</label>
<a class="inline-q" target="_blank" href="http://leaverou.github.com/prefixfree/">?</a>
&ensp;
<input type="radio" id="prefix-autoprefixer" name="prefix" value="autoprefixer">
<label for="prefix-autoprefixer" class="small-inline">Autoprefixer</label>
<a class="inline-q" target="_blank" href="https://github.com/ai/autoprefixer">?</a>
&ensp;
<input type="radio" id="prefix-neither" name="prefix" value="neither">
<label for="prefix-neither" class="small-inline">Neither</label>
</form>
<form id="external-css-resources" class="settings-row settings-row-4 prevent-form-submit">
<label class="small" for="external-css">
External CSS File or Another Pen&nbsp;
<a target="_blank" class="inline-q" href="http://blog.codepen.io/documentation/editor/adding-external-resources/">?</a></label>
<div class="external-resource-wrapper">
<input class="fullwidth css-resource external-resource" type="url" id="external-css"
name="external-css" placeholder="https://yourwebsite.com/style.css">
<small class="error">Must be a valid URL.</small>
</div>
<span id="add-css-resource" class="add-resource" data-type="css">
<a data-type="css">+ add another resource</a>
</span>
</form>
<form class="settings-row settings-row-5" id="css-settings-row-5">
<button class="button mini-button" id="analyze-css">Analyze CSS
</button>
<small>via <a target="_blank" href="http://csslint.net/">CSS Lint</a></small>
</form>
</div>
</div>
<div class="editor-resizer" id="editor-resizer-css"></div>
<div id="box-js" class="box box-js " data-type="js">
<div class="powers">
<div class="editor-actions-left">
<button id="settings-pane-js" class="settings-nub editor-title-button" data-type="js">
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-gear"></use>
</svg>
</button>
<h2>JS</h2>
</div>
<div class="editor-actions-right">
<button data-type="JS" class="editor-title-button view-compiled-button" title="Toggle Compiled View" id="JS-view-compiled">
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-eye"></use>
</svg>
</button>
<button class="editor-title-button close-editor-button" data-type="JS">
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-x"></use>
</svg>
</button>
</div>
</div>
<div class="code-wrap">
<pre id="js" class="code-box">
<code>
</code>
</pre>
<div class="error-bar" id="error-bar-js">
<span class="error-icon" data-type="js">
!
</span>
</div>
</div>
<div class="settings" id="settings-js">
<form class="settings-row settings-row-1 preprocessor-choice group">
<div class="full-width">
<input type="radio" class="hidden" id="js-none" checked name="js-preprocessor" value="none">
<label class="button" for="js-none">None</label>
</div>
<div>
<input type="radio" class="hidden" id="coffeescript" name="js-preprocessor" value="coffeescript">
<label class="button" for="coffeescript">CoffeeScript <a class="inline-q" target="_blank" href="http://coffeescript.org/">?</a></label>
</div>
<div>
<input type="radio" class="hidden" id="livescript" name="js-preprocessor" value="livescript">
<label class="button" for="livescript">LiveScript <a class="inline-q" target="_blank" href="http://livescript.net/">?</a></label>
</div>
<div>
<input type="radio" class="hidden" id="traceur" name="js-preprocessor" value="traceur">
<label class="button" for="traceur">Traceur <a class="inline-q" target="_blank" href="https://github.com/google/traceur-compiler">?</a></label>
</div>
</form>
<form class="settings-row settings-row-2">
<label class="small" for="js-select">Latest Version of...</label>
<select data-placeholder="JavaScript Library" id="js-select" class="js-library-select">
<option value="">No Library</option>
<option value="jquery">jQuery</option>
<option value="jquery_and_jqueryui">jQuery &amp; jQuery UI (Base Theme)</option>
<option value="angular">Angular</option>
<option value="zepto">Zepto</option>
<option value="mootools">MooTools</option>
<option value="prototype">Prototype</option>
<option value="yui">YUI</option>
<option value="extjs">Ext JS</option>
<option value="dojo">Dojo</option>
</select>
</form>
<form id="external-js-resources" class="settings-row external-js-resources settings-row-3 prevent-form-submit">
<label class="small" for="external-js">
External JS File or Another Pen&nbsp;
<a target="_blank" class="inline-q" href="http://blog.codepen.io/documentation/editor/adding-external-resources/">?</a>
<span><a target="_blank" href="http://cdnjs.com/">cdnjs.com &rarr;</a>
</label>
<div class="external-resource-wrapper">
<input class="js-resource fullwidth external-resource" type="url" id="external-js" name="external-js" placeholder="https://yourwebsite.com/script.js">
<small class="error">Must be a valid URL.</small>
</div>
<span class="add-resource" id="add-js-resource" data-type="js">
<a data-type="js">+ add another resource</a>
</span>
</form>
<form class="settings-row settings-row-4 group">
<div style="float: left;">
<input type="checkbox" id="modernizr" name="modernizr">
<label for="modernizr" class="small-inline">Modernizr</label>
</div>
<div style="float: right;">
<input type="checkbox" id="auto-run" name="auto-run" checked="checked">
<label for="auto-run" class="small-inline">Auto Update Preview</label>
</div>
</form>
<form class="settings-row settings-row-5" id="js-settings-row-5">
<button class="button mini-button" id="analyze-js">Analyze JS
</button>
<small>via <a target="_blank" href="http://www.jshint.com/">JS Hint</a></small>
</form>
</div>
</div>
</div>
<div id="resizer" class="resizer"><span></span></div>
<div id="result_div" class="result">
<iframe id="result"
name="CodePen"
src=""
sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms"
scrolling="auto" allowTransparency="true" allowfullscreen="true" class="result-iframe iframe-empty">
</iframe>
<div id="loading-text" class="loading-text">
Loading
<span>
..................
</span>
</div>
<div id="editor-drag-cover" class="drag-cover"></div>
</div>
</div>
</div>
<footer class="site-footer editor-footer">
<div class="footer-left">
CodePen PRO is <a href="/login/pro/">pretty sweet</a>. Just saying.
<a href="#0" class="keyboard-commands-button button mini-button">Keyboard</a>
</div>
<div class="footer-right">
&nbsp;
<div class="multi-button mini-multi-button">
<button class="button mini-button editor-toggle-button active" data-type="html" id="editor-toggle-button-html">
HTML
</button>
<button class="button mini-button editor-toggle-button active" data-type="css" id="editor-toggle-button-css">
CSS
</button>
<button class="button mini-button editor-toggle-button" data-type="js" id="editor-toggle-button-js">
JS
</button>
</div>
<a id="left-layout" href="/pen/left/" class=" footer-icon footer-icon-editor layout-change-icon">
<span class="screen-reader-text">Use Left Layout</span>
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-editor-left"></use>
</svg>
</a>
<a id="top-layout" href="/pen/top/" class="active footer-icon footer-icon-editor layout-change-icon">
<span class="screen-reader-text">Use Top Layout</span>
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-editor-top"></use>
</svg>
</a>
<a id="right-layout" href="/pen/right/" class=" footer-icon footer-icon-editor layout-change-icon">
<span class="screen-reader-text">Use Right Layout</span>
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-editor-right"></use>
</svg>
</a>
</div>
</footer>
<div id="keycommands" class="modal-message modal-neutral">
<section class="editor-commands" style="padding-right: 10px;">
<h2>Pen Actions</h2>
<div class="key-group">
<kbr class="command">P</kbr>
Create New Pen
</div>
<div class="key-group">
<kbr class="command">S</kbr>
Save
</div>
<div class="key-group">
<kbr class="command">I</kbr>
Info Panel (if owned)
</div>
<div class="key-group">
<kbr class="command">⇧5</kbr>
Re-Run Code
</div>
<h2>Editor Commands</h2>
<div class="key-group">
<kbr class="command">[</kbr>
Indent Code Right
</div>
<div class="key-group">
<kbr class="command">]</kbr>
Indent Code Left
</div>
<div class="key-group">
<kbr class="command">/</kbr>
Block Comment
</div>
<div class="key-group">
<kbr class="command-no-mod">⇧ Tab</kbr>
Tidy Up Code
</div>
<div class="key-group">
<kbr class="command">L</kbr>
Select Current Line
</div>
<div class="key-group">
<kbr class="command">⇧ .</kbr>
Select Next Important Thing
</div>
<div class="key-group">
<kbr class="command">J</kbr>
Join This & Next Line
</div>
<div class="key-group">
<kbr class="command-no-mod">Ctrl Shift D</kbr>
Duplicate Line
</div>
<div class="key-group">
<kbr class="command-no-mod">Ctrl Shift K</kbr>
Delete Line
</div>
</section>
<section class="editor-commands">
<h2>HTML Specific</h2>
<div class="key-group">
<kbr class="command">D</kbr>
Select Outward Matching Pair
</div>
<div class="key-group">
<kbr class="command">⇧A</kbr>
Wrap With...
</div>
<div class="key-group">
<kbr class="command">Alt .</kbr>
Close Tags
</div>
<h2>CSS Specific</h2>
<div class="key-group">
<kbr class="command">⇧Y</kbr>
Evaluate Simple Math
</div>
<div class="key-group">
<kbr class="command-no-mod">⌥ ↑</kbr>
Increment Number 0.1
</div>
<div class="key-group">
<kbr class="command-no-mod">⌥ ↓</kbr>
Decrement Number 0.1
</div>
<h2>Misc</h2>
<div class="key-group">
<kbr class="command">⇧8</kbr>
Clear All Analyze Errors
</div>
<div class="key-group">
<kbr class="command">⇧9</kbr>
Open This Dialog
</div>
<div class="key-group">
<kbr class="command no-mod">ESC</kbr>
Close Dialogs / Collapse Editors
</div>
<p style="margin: 20px 0 0 0;">Also see: <a href="http://blog.codepen.io/documentation/features/tab-triggers/" target="_blank">Tab Triggers</a></p>
</section>
</div>
<div id="overlay" class="overlay"></div>
<script async="async" src="http://assets.codepen.io/assets/common/ga-ac8218b2362c19ef4a3a1a27835742c0.js" type="text/javascript"></script>
<noscript>
<input type="checkbox" class="modal-closing-trick" id="modal-closing-trick">
<div class="noscript-overlay" style="display: block;"></div>
<div class="modal-message group modal-warning">
<div class="modal-title">CodePen doesn't work very well without JavaScript.</div>
<p>We're all for progressive enhancement, but CodePen is a bit unique in that it's all about writing and showing front end code, including JavaScript. It's required to use most of the features of CodePen.</p>
<p>Need to know how to enable it? <a href="http://enable-javascript.com/" target="_blank">Go here.</a></p>
<label class="button" for="modal-closing-trick">Close this, use anyway.</label>
</div>
</noscript>
<input type="hidden" id="init-data" value="{&quot;__mobile&quot;:false,&quot;__cookieUsed&quot;:true,&quot;__turnOffJS&quot;:false,&quot;__keyBindings&quot;:&quot;normal&quot;,&quot;__phkPrefix&quot;:&quot;747889168b385a86d3f4227ede22647d&quot;,&quot;__sandboxVal&quot;:&quot;allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms&quot;,&quot;__pageType&quot;:&quot;pen&quot;,&quot;__layoutType&quot;:null,&quot;__rtData&quot;:&quot;{\&quot;roomType\&quot;:\&quot;live\&quot;,\&quot;rtClientID\&quot;:\&quot;\&quot;,\&quot;clientRoomID\&quot;:\&quot;:live::\&quot;,\&quot;clientRoleID\&quot;:\&quot;:live:::role\&quot;,\&quot;roomID\&quot;:\&quot;live:\&quot;,\&quot;role\&quot;:\&quot;quot;\&quot;,\&quot;usesRoomData\&quot;:false,\&quot;maxMembers\&quot;:0,\&quot;pen\&quot;:{\&quot;slugHash\&quot;:\&quot;\&quot;},\&quot;user\&quot;:{\&quot;id\&quot;:180958,\&quot;name\&quot;:\&quot;Jonah H\&quot;,\&quot;username\&quot;:\&quot;nar\&quot;,\&quot;paid\&quot;:false,\&quot;planType\&quot;:\&quot;free\&quot;,\&quot;role\&quot;:\&quot;\&quot;}}&quot;,&quot;__tags&quot;:&quot;[]&quot;,&quot;__user&quot;:&quot;{\&quot;current_team_id\&quot;:0,\&quot;id\&quot;:180958,\&quot;name\&quot;:\&quot;Jonah H\&quot;,\&quot;username\&quot;:\&quot;nar\&quot;,\&quot;paid\&quot;:false,\&quot;plan_type\&quot;:\&quot;free\&quot;}&quot;,&quot;__pen&quot;:&quot;{\&quot;auto_run\&quot;:true,\&quot;checksum\&quot;:0,\&quot;created_at\&quot;:null,\&quot;css\&quot;:\&quot;\&quot;,\&quot;css_external\&quot;:\&quot;\&quot;,\&quot;css_pre_processor\&quot;:\&quot;none\&quot;,\&quot;css_pre_processor_lib\&quot;:\&quot;\&quot;,\&quot;css_prefix\&quot;:\&quot;neither\&quot;,\&quot;css_prefix_free\&quot;:null,\&quot;css_starter\&quot;:\&quot;neither\&quot;,\&quot;description\&quot;:\&quot;\&quot;,\&quot;has_animation\&quot;:false,\&quot;head\&quot;:\&quot;\&quot;,\&quot;html\&quot;:\&quot;\&quot;,\&quot;html_classes\&quot;:\&quot;\&quot;,\&quot;html_pre_processor\&quot;:\&quot;none\&quot;,\&quot;id\&quot;:0,\&quot;js\&quot;:\&quot;\&quot;,\&quot;js_external\&quot;:\&quot;\&quot;,\&quot;js_library\&quot;:\&quot;none\&quot;,\&quot;js_modernizr\&quot;:false,\&quot;js_pre_processor\&quot;:\&quot;none\&quot;,\&quot;parent\&quot;:0,\&quot;private\&quot;:false,\&quot;screenshot_md5\&quot;:\&quot;\&quot;,\&quot;screenshot_uuid\&quot;:null,\&quot;session_hash\&quot;:null,\&quot;slug_hash\&quot;:\&quot;\&quot;,\&quot;slug_hash_private\&quot;:null,\&quot;team_id\&quot;:0,\&quot;title\&quot;:\&quot;\&quot;,\&quot;updated_at\&quot;:null,\&quot;user_id\&quot;:180958}&quot;,&quot;__lastUpdated&quot;:0,&quot;__profiled&quot;:{&quot;id&quot;:180958,&quot;name&quot;:&quot;Jonah H&quot;,&quot;username&quot;:&quot;nar&quot;,&quot;type&quot;:&quot;user&quot;,&quot;is_team&quot;:false,&quot;base_url&quot;:&quot;/nar&quot;},&quot;__profileURLS&quot;:[&quot;showcase&quot;,&quot;tag&quot;,&quot;followers&quot;,&quot;following&quot;,&quot;popular&quot;,&quot;popular-list&quot;,&quot;popular-list-asc&quot;,&quot;public&quot;,&quot;public-list&quot;,&quot;public-list-asc&quot;,&quot;public-titles&quot;,&quot;public-titles-asc&quot;,&quot;private&quot;,&quot;private-list&quot;,&quot;private-list-asc&quot;,&quot;private-titles&quot;,&quot;private-titles-asc&quot;,&quot;forked&quot;,&quot;forked-list&quot;,&quot;forked-list-asc&quot;,&quot;forked-titles&quot;,&quot;forked-titles-asc&quot;,&quot;loved&quot;,&quot;gamma&quot;,&quot;beta&quot;,&quot;alpha&quot;,&quot;members&quot;]}">
<script src="http://assets.codepen.io/assets/common/everypage-4d9888b4621dc8c1a7cc6e2f40c4ed41.js" type="text/javascript"></script>
<script src="http://assets.codepen.io/assets/editor/pen/libs-ec314490592b92a3af29d2771fd19514.js" type="text/javascript"></script>
<script src="http://assets.codepen.io/assets/editor/other/layout/layout-top-477df105a7ed15ed80db2d88189a24c5.js" type="text/javascript"></script>
<script src="http://assets.codepen.io/assets/editor/pen/index-a4cbd5c7c902c5ca1ea5a3ef1659e4f7.js" type="text/javascript"></script>
</body>
</html>
Raw
style.css
.inline-spinner,
.spinner {
-webkit-animation: spinner-animation 1s step-end infinite;
background-image: url('chrome://resources/images/spinner.svg');
background-size: 100%;
}
.inline-spinner {
display: inline-block;
height: 16px;
width: 16px;
}
.spinner {
height: 22px;
width: 22px;
}
@-webkit-keyframes spinner-animation {
0% {
-webkit-transform: rotate(0deg);
}
8.33% {
-webkit-transform: rotate(30deg);
}
16.67% {
-webkit-transform: rotate(60deg);
}
25% {
-webkit-transform: rotate(90deg);
}
33.33% {
-webkit-transform: rotate(120deg);
}
41.67% {
-webkit-transform: rotate(150deg);
}
50% {
-webkit-transform: rotate(180deg);
}
58.33% {
-webkit-transform: rotate(210deg);
}
66.67% {
-webkit-transform: rotate(240deg);
}
75% {
-webkit-transform: rotate(270deg);
}
83.33% {
-webkit-transform: rotate(300deg);
}
91.67% {
-webkit-transform: rotate(330deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment