Skip to content

Instantly share code, notes, and snippets.

@alishahab
Created April 15, 2015 04:20
Show Gist options
  • Save alishahab/dee38b67602f7696a50b to your computer and use it in GitHub Desktop.
Save alishahab/dee38b67602f7696a50b to your computer and use it in GitHub Desktop.
This page does not use JS
<p>This page does not use JS.</p>
<style class="onPage" contenteditable>body {
background: #eee;
text-align: center;
}
style.onPage {
background: #ffffff;
border: 2px solid #aaa;
width: 600px;
}
p {
font-size: 20px;
font-weight: bold;
font-family: Monaco, monospace;
}
</style>
<p>What you see above is &lt;style&gt;. You can edit it.</p>
<p>We forget that it&rsquo;s just another HTML element.</p>
<p>Fun fact by <a href="http://twitter.com/notdetails" target="_blank">Joel</a>.</p>
style, head {
display: block;
}
head {
opacity: 0;
}
style.onPage {
display: block;
margin: 40px auto;
max-width: 100%;
padding: 14px;
text-align: left;
background: #FFF;
color: #444;
white-space: pre;
font-family: Monaco, monospace;
}
.onPage:focus {
outline: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment