HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<img class="icon" width="160" alt="easter-egg-collection" src="https://weichiachang.github.io/Easter-egg/images/easter-egg-collection-icon.png">
<p class="intro">Type keyword and something special will show up</p>
<div class="intro">
<a target="_blank" href="https://github.com/WeiChiaChang/easter-egg-collection"><img src="https://img.shields.io/github/stars/WeiChiaChang/easter-egg-collection.svg?style=social&label=Star" alt="github stars"> </a>
<a target="_blank" href="https://github.com/WeiChiaChang/easter-egg-collection" title="Follow @WeiChiaChang on GitHub"><img src="https://img.shields.io/github/followers/WeiChiaChang.svg?style=social&label=Follow" alt="GitHub followers">
</a>
</div>
<a target="_blank" href="https://github.com/WeiChiaChang/easter-egg-collection" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
Easter Egg | Descrption
---------- | -----
hi | Set your goals high, and don't stop till you get there ๐
wink | Wink and shut their apprehensions up ๐
unicorn | I wish I were a unicorn, so I could stab idiots with my head ๐ฆ
kumamon | But people who really know me, know that I am not a bad boy at heart... I am a big teddy bear ๐ป
haha | Behind every great man is a woman rolling her eyes โบ๏ธ
travel | Wherever you go, go with all your heart ๐
bat | You gotta keep the ball off the fat part of the bat โฐ
robot | We're fascinated with robots because they are reflections of ourselves ๐ค
hiphop | That's what hip-hop is: It's sociology and English put to a beat, you know ๐ถ
hippo | You Deserve A Hippo Today ๐
pokeball | Keep Calm And Go ๐
pie | So the pie isn't perfect? Cut it into wedges. Stay in control, and never panic ๐
ufo | From 1961 to 1965 Barney and I had not seen another UFO ๐ฝ
walk | I am a slow walker, but I never walk back ๐ถ
cool | My key to dealing with stress is simple: just stay cool and stay focused ๐
balloon | What is success? It is a toy balloon among children armed with pins ๐
hangover | What in the world is a hangover cure? ๐ท
kirby | "This grass feels funny," Kirby thought. "It feels like... pants." เผผ ใค โ_โ เผฝใค
no | No smoking ๐ฌ
onmyway | Stressed? Why not walk it off ๐ถ
haters | When there's so many haters and negative things, I really don't care ๐ค
board | Skate or die ๐พ
snorlax | Just do it, later ๐
fly | I can't stop moving. I'm like this weird insect. I can't sit still in real life ๐
earth | Save earth to save life ๐
thankyou | You can do anything, but not everything ๐
swim | H2O = 2 parts heart, one part obsession ๐
penguin | Easy, breezy, beautiful penguin ๐ง
handsome | I'm a handsome man with a charming personality ๐
winner | Without losers, where would the winners be? ๐
tank | If the tanks succeed, then victory follows โคต
jump | The only exercise I excel at is jumping to conclusions ๐
fox | The fox changes his fur but not his habits ๐บ
mario | Life is a game, kid! It all depends on how you play! ๐ฎ
joker | I can't wait to show you my toys ๐
rabbit | Maybe She's Born With It, Maybe It's Rabbit ๐
sensei | wa ka ri ma shi ta ๐ซ
piggy | Here comes wild boar knight ๐ท
psyduck | Psyduck with Big Bang ๐ฃ
dragon | If you can't take the heat, don't tickle the dragon ๐ฒ
salamander | Are salamanders dangerous to humans? ๐ค
airguitar | Just be like a guitar hero dude ๐ธ
pikachu | A pikachu will show up from the bottom with ligntning sound โก
bravo | A man's clapping with funny smile ๐
ghost | A ghost's floating from the right to the left ๐ป
britney | A beauty called Britney will blink at you ๐
pikarun | A lovely pikachu's running like a flash ๐ธ
catrun | I love cat, so let the cat out ๐
koggy | No koggy, no happiness
sonic | Classic Super Sonic with vivid animation
doggy | Lovely doggy with vivid animation
spongebob | Spongebob is your best friend ๐
gun | Where is your gun? ๐ซ
money | Pay money to my pain ๐ธ
homer | Wise man Homer ๐
dog | Dogs are human best friends ๐ถ
bird | Stupid birds fly slowly ๐ฆ
piqiu | A piqiu a day keeps worries away
lol | Haha, you're funny ๐
ohhh | Mordecai & Rigby with OHHHHHHHHHHHHHH sound ๐ฎ
nyancat | Nyan nyan nyan nyan nyan nyan nyan nyan ๐ฑ
<div class="elevator">
<svg class="sweet-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px">
<path d="M70,47.5H30c-1.4,0-2.5,1.1-2.5,2.5v40c0,1.4,1.1,2.5,2.5,2.5h40c1.4,0,2.5-1.1,2.5-2.5V50C72.5,48.6,71.4,47.5,70,47.5z M47.5,87.5h-5v-25h5V87.5z M57.5,87.5h-5v-25h5V87.5z M67.5,87.5h-5V60c0-1.4-1.1-2.5-2.5-2.5H40c-1.4,0-2.5,1.1-2.5,2.5v27.5h-5 v-35h35V87.5z"></path>
<path d="M50,42.5c1.4,0,2.5-1.1,2.5-2.5V16l5.7,5.7c0.5,0.5,1.1,0.7,1.8,0.7s1.3-0.2,1.8-0.7c1-1,1-2.6,0-3.5l-10-10 c-1-1-2.6-1-3.5,0l-10,10c-1,1-1,2.6,0,3.5c1,1,2.6,1,3.5,0l5.7-5.7v24C47.5,41.4,48.6,42.5,50,42.5z"></path>
</svg>
Back to Top
</div>
/* Markdown with CSS styling thanks to andyferra! */
/* The original source comes from here: */
/* https://gist.github.com/andyferra/2554919 */
body {
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
line-height: 1.6;
padding-top: 10px;
padding-bottom: 10px;
background-color: white;
padding: 30px; }
body > *:first-child {
margin-top: 0 !important; }
body > *:last-child {
margin-bottom: 0 !important; }
a {
color: #4183C4; }
a.absent {
color: #cc0000; }
a.anchor {
display: block;
padding-left: 30px;
margin-left: -30px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0; }
h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
cursor: text;
position: relative; }
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
background: url("../../images/modules/styleguide/para.png") no-repeat 10px center;
text-decoration: none; }
h1 tt, h1 code {
font-size: inherit; }
h2 tt, h2 code {
font-size: inherit; }
h3 tt, h3 code {
font-size: inherit; }
h4 tt, h4 code {
font-size: inherit; }
h5 tt, h5 code {
font-size: inherit; }
h6 tt, h6 code {
font-size: inherit; }
h1 {
font-size: 28px;
color: black; }
h2 {
font-size: 24px;
border-bottom: 1px solid #cccccc;
color: black; }
h3 {
font-size: 18px; }
h4 {
font-size: 16px; }
h5 {
font-size: 14px; }
h6 {
color: #777777;
font-size: 14px; }
p, blockquote, ul, ol, dl, li, table, pre {
margin: 15px 0; }
hr {
background: transparent url("../../images/modules/pulls/dirty-shade.png") repeat-x 0 0;
border: 0 none;
color: #cccccc;
height: 4px;
padding: 0; }
body > h2:first-child {
margin-top: 0;
padding-top: 0; }
body > h1:first-child {
margin-top: 0;
padding-top: 0; }
body > h1:first-child + h2 {
margin-top: 0;
padding-top: 0; }
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
margin-top: 0;
padding-top: 0; }
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0; }
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
margin-top: 0; }
li p.first {
display: inline-block; }
ul, ol {
padding-left: 30px; }
ul :first-child, ol :first-child {
margin-top: 0; }
ul :last-child, ol :last-child {
margin-bottom: 0; }
dl {
padding: 0; }
dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px; }
dl dt:first-child {
padding: 0; }
dl dt > :first-child {
margin-top: 0; }
dl dt > :last-child {
margin-bottom: 0; }
dl dd {
margin: 0 0 15px;
padding: 0 15px; }
dl dd > :first-child {
margin-top: 0; }
dl dd > :last-child {
margin-bottom: 0; }
blockquote {
border-left: 4px solid #dddddd;
padding: 0 15px;
color: #777777; }
blockquote > :first-child {
margin-top: 0; }
blockquote > :last-child {
margin-bottom: 0; }
table {
padding: 0; }
table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0; }
table tr:nth-child(2n) {
background-color: #f8f8f8; }
table tr th {
font-weight: bold;
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px; }
table tr td {
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px; }
table tr th :first-child, table tr td :first-child {
margin-top: 0; }
table tr th :last-child, table tr td :last-child {
margin-bottom: 0; }
img {
max-width: 100%; }
span.frame {
display: block;
overflow: hidden; }
span.frame > span {
border: 1px solid #dddddd;
display: block;
float: left;
overflow: hidden;
margin: 13px 0 0;
padding: 7px;
width: auto; }
span.frame span img {
display: block;
float: left; }
span.frame span span {
clear: both;
color: #333333;
display: block;
padding: 5px 0 0; }
span.align-center {
display: block;
overflow: hidden;
clear: both; }
span.align-center > span {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: center; }
span.align-center span img {
margin: 0 auto;
text-align: center; }
span.align-right {
display: block;
overflow: hidden;
clear: both; }
span.align-right > span {
display: block;
overflow: hidden;
margin: 13px 0 0;
text-align: right; }
span.align-right span img {
margin: 0;
text-align: right; }
span.float-left {
display: block;
margin-right: 13px;
overflow: hidden;
float: left; }
span.float-left span {
margin: 13px 0 0; }
span.float-right {
display: block;
margin-left: 13px;
overflow: hidden;
float: right; }
span.float-right > span {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: right; }
code, tt {
margin: 0 2px;
padding: 0 5px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px; }
pre code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent; }
.highlight pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px; }
pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px; }
pre code, pre tt {
background-color: transparent;
border: none; }
/* github octocat icon */
/* Original source from here: */
/* https://github.com/tholman/github-corners */
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%, 100% {
transform: rotate(0)
}
20%, 60% {
transform: rotate(-25deg)
}
40%, 80% {
transform: rotate(10deg)
}
}
@media (max-width:500px){
.github-corner:hover .octo-arm {
animation:none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
/* Custom styling */
table {
margin: 0 auto;
font-size: 16px;
}
.intro {
text-align: center;
}
p.intro {
font-size: 40px;
font-family: 'Amatic SC', cursive;
}
a {
text-decoration: none;
}
.elevator {
text-align: center;
cursor: pointer;
width: 140px;
margin: auto;
margin-top: 10%;
}
.elevator svg {
width: 40px;
height: 40px;
display: block;
margin: auto;
margin-bottom: 5px;
}
body {
/* images comes from: */
/* https://www.toptal.com/designers/subtlepatterns/page/7/ */
background: silver url('https://weichiachang.github.io/Easter-egg/images/background-codepen.png') fixed;
}
.icon {
display: block;
margin: 0 auto;
}
// Original source from here:
// https://github.com/tholman/elevator.js
/*!
* Elevator.js
*
* MIT licensed
* Copyright (C) 2015 Tim Holman, http://tholman.com
*/
/*********************************************
* Elevator.js
*********************************************/
var Elevator = (function() {
'use strict';
// Elements
var body = null;
// Scroll vars
var animation = null;
var duration = null; // ms
var customDuration = false;
var startTime = null;
var startPosition = null;
var elevating = false;
var mainAudio;
var endAudio;
/**
* Utils
*/
// Soft object augmentation
function extend( target, source ) {
for ( var key in source ) {
if ( !( key in target ) ) {
target[ key ] = source[ key ];
}
}
return target;
};
// Thanks Mr Penner - http://robertpenner.com/easing/
function easeInOutQuad( t, b, c, d ) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
};
function extendParameters(options, defaults){
for(var option in defaults){
var t = options[option] === undefined && typeof option !== "function";
if(t){
options[option] = defaults[option];
}
}
return options;
}
/**
* Main
*/
// Time is passed through requestAnimationFrame, what a world!
function animateLoop( time ) {
if (!startTime) {
startTime = time;
}
var timeSoFar = time - startTime;
var easedPosition = easeInOutQuad(timeSoFar, startPosition, -startPosition, duration);
window.scrollTo(0, easedPosition);
if( timeSoFar < duration ) {
animation = requestAnimationFrame(animateLoop);
} else {
animationFinished();
}
};
// ELEVATE!
// /
// ____
// .' '=====<0
// |======|
// |======|
// [IIIIII[\--()
// |_______|
// C O O O D
// C O O O D
// C O O O D
// C__O__O__O__D
// [_____________]
function elevate() {
if( elevating ) {
return;
}
elevating = true;
startPosition = (document.documentElement.scrollTop || body.scrollTop);
// No custom duration set, so we travel at pixels per millisecond. (0.75px per ms)
if( !customDuration ) {
duration = (startPosition * 1.5);
}
requestAnimationFrame( animateLoop );
// Start music!
if( mainAudio ) {
mainAudio.play();
}
}
function resetPositions() {
startTime = null;
startPosition = null;
elevating = false;
}
function animationFinished() {
resetPositions();
// Stop music!
if( mainAudio ) {
mainAudio.pause();
mainAudio.currentTime = 0;
}
if( endAudio ) {
endAudio.play();
}
}
function onWindowBlur() {
// If animating, go straight to the top. And play no more music.
if( elevating ) {
cancelAnimationFrame( animation );
resetPositions();
if( mainAudio ) {
mainAudio.pause();
mainAudio.currentTime = 0;
}
window.scrollTo(0, 0);
}
}
//@TODO: Does this need tap bindings too?
function bindElevateToElement( element ) {
element.addEventListener('click', elevate, false);
}
function main( options ) {
// Bind to element click event, if need be.
body = document.body;
var defaults = {
duration: undefined,
mainAudio: false,
endAudio: false,
preloadAudio: true,
loopAudio: true,
};
options = extendParameters(options, defaults);
if( options.element ) {
bindElevateToElement( options.element );
}
if( options.duration ) {
customDuration = true;
duration = options.duration;
}
window.addEventListener('blur', onWindowBlur, false);
// If the browser doesn't support audio, stop here!
if ( !window.Audio ) {
return;
}
if( options.mainAudio ) {
mainAudio = new Audio( options.mainAudio );
mainAudio.setAttribute( 'preload', options.preloadAudio );
mainAudio.setAttribute( 'loop', options.loopAudio );
}
if( options.endAudio ) {
endAudio = new Audio( options.endAudio );
endAudio.setAttribute( 'preload', 'true' );
}
}
return extend(main, {
elevate: elevate
});
})();
// trigger it
var elementButton = document.querySelector('.elevator');
var elevator = new Elevator({
element: elementButton,
// mainAudio from here:
// https://github.com/tholman/elevator.js
// Audio in the Demo (sourced from BenSound) is licenced under Creative Commons.
mainAudio: 'https://weichiachang.github.io/Easter-egg/images/music/elevator.mp3',
// endAudio from here:
// https://www.findsounds.com/ISAPI/search.dll?keywords=ding+dinging
endAudio: 'https://inventwithpython.com/pickup.wav'
});
Also see: Tab Triggers