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.
.zelda
.head
.hair
.shading
.secondaryshading
.hair2
.shadeface
.shade2chin
.shade3hair
.longhair
.hairstrand1
.hairstrand2
.hairstand3
.neck
.crown
.diamond
.circle1
.circle2
.circle3
.circle4
.circle5
.circle6
.hairzig
.eyebrow
.eyebrow2
.eyebrowsecond2
.eyebrow3higher
.eyebrow4higher
.eyebrow2.left
.eye
.inner
.eye.two
.inner.second
.nose
.smile
.hairbehind
.ear1
.ear2
.necklace1
.necklace2
.necklace3
.body
.arm1
.glove
.hand
.arm2
.glove2
.hand2
.belt
.dress
.seconddress
.footone
.foottwo
.swordtop
.hilttop
.hiltbottom
.sword
.shadesword
.swordtriangle
.shadetriangle
$black: #343436
$skin: #D8B7A6
@mixin yellowbg
background-color: #f2d252
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png")
body
height: 100vh
width: 100%
display: flex
justify-content: center
align-items: center
background: #D9E9FF
overflow: hidden
.zelda
position: relative
margin-bottom: 29%
margin-right: 20%
.head
position: absolute
background: transparent
height: 130px
width: 125px
overflow: hidden
border-bottom-right-radius: 39%
border-bottom-left-radius: 50%
border-top-right-radius: 40%
border-top-left-radius: 40%
z-index: -5
&:after
content: ''
position: absolute
background: $skin
width: 115px
height: 130px
border-radius: 100%
.hair
position: absolute
background: yellow
height: 130px
width: 130px
border-bottom-right-radius: 20%
transform: rotate(70deg)
top: -74px
left: -30px
z-index: 12
overflow: hidden
.secondaryshading
position: absolute
background: darken(rgba(255, 255, 0, 1), 4%)
height: 10px
width: 10px
z-index: 20
top: -5px
left: 120px
.hair2
position: absolute
background: darken(rgba(255, 255, 0, 1), 4%)
height: 95px
width: 30px
right: -5px
z-index: -1
&:after
content: ''
position: absolute
background: $skin
height: 150px
width: 150px
border-radius: 100%
right: 39px
top: -10px
&:before
content: ''
position: absolute
background: darken(rgba(255, 255, 0, 1), 4%)
height: 25px
width: 25px
top: 20px
.hairzig
position: absolute
z-index: 1
background: darken(rgba(255, 255, 0, 1), 4%)
height: 12px
width: 17px
right: -127px
top: 92px
transform: rotate(15deg)
&:after
content: ''
position: absolute
border-left: 10px solid transparent
border-right: 10px solid transparent
border-top: 30px solid darken(rgba(255, 255, 0, 1), 4%)
left: 5px
.eye
position: absolute
height: 28px
width: 25px
background: white
transform: rotate(35deg)
top: 60px
left: 64px
border-top-left-radius: 50%
border-bottom-right-radius: 50%
overflow: hidden
border-right: 1px solid black
border-bottom: 1px solid black
.eyebrow
position: absolute
height: 28px
width: 13px
background: black
transform: rotate(38deg)
top: 58px
left: 68px
border-top-left-radius: 50%
border-bottom-right-radius: 50%
overflow: hidden
.eyebrow2
position: absolute
height: 27px
width: 24px
background: black
transform: rotate(40deg)
top: 57px
left: 64px
border-top-left-radius: 50%
border-bottom-right-radius: 50%
overflow: hidden
.left
position: absolute
left: 10px
top: 61px
transform: rotate(42deg)
animation-delay: 1s
// animation: blink2 .3s linear forwards
// @keyframes blink2
// 90%
// width: 1px
// transform: rotate(42deg) translateY(10px)
.inner
position: absolute
height: 35px
width: 18px
background: black
transform: rotate(-35deg)
border-radius: 100%
left: 5px
top: -5px
.nose
position: absolute
width: 0
height: 0
border-left: 2px solid transparent
border-right: 2px solid transparent
border-bottom: 3px solid black
top: 92px
left: 47px
.smile
position: absolute
background: black
width: 25px
height: 19px
top: 90px
left: 40px
z-index: -1
border-radius: 100%
transform: rotate(-10deg)
&:after
content: ''
position: absolute
background: $skin
height: 20px
width: 35px
top: -3px
left: -4px
border-radius: 100%
.hairbehind
position: absolute
height: 130px
width: 100px
background: yellow
z-index: -10
border-radius: 50px
left: -4px
border-bottom: 1px solid #ddd
.eyebrow3higher
position: absolute
background: #7F7E4F
height: 9px
width: 3px
border-top-left-radius: 50%
border-bottom-right-radius: 50%
transform: rotate(50deg)
top: 45px
left: 71px
&:after
content: ''
position: absolute
background: #7F7E4F
transform: rotate(-110deg)
height: 5px
width: 3px
left: 2px
top: -2px
border-radius: 30%
.two
position: absolute
left: 10px
top: 63px
transform: rotate(50deg) scale(.91)
perspective-origin: 10% 10%
// animation: blink .3s linear forwards
// @keyframes blink
// 50%
// height: 0px
// transform: rotate(0deg) translateY(0px)
.inner
transform: rotate(-50deg)
// animation: blink 1s linear forwards
.eyebrow4higher
position: absolute
background: #7F7E4F
height: 7px
width: 3px
border-top-left-radius: 50%
border-bottom-right-radius: 50%
transform: rotate(50deg)
top: 52px
left: 12px
scale
&:after
content: ''
position: absolute
background: #7F7E4F
transform: rotate(-110deg)
height: 7px
width: 3px
left: 2px
top: -3px
border-radius: 30%
.shadeface
position: absolute
height: 50px
width: 90px
border-radius: 50%
box-shadow: 15px 15px 0 0 rgba(173, 125, 111, .15)
z-index: 15
transform: rotate(-90deg)
left: 30px
top: 58px
z-index: 10
.shade2chin
position: absolute
height: 40px
width: 10px
border-radius: 50%
box-shadow: 6px 6px 0 0 rgba(173, 125, 111, .05)
z-index: 15
transform: rotate(60deg)
left: 86px
top: 78px
z-index: 10
.shade3hair
position: absolute
height: 90px
width: 50px
border-radius: 50%
box-shadow: 15px 15px 0 0 darken(rgba(255, 255, 0, 1), 4%)
z-index: 15
transform: rotate(-15deg)
left: 60px
top: 10px
&:after
content: ''
position: absolute
background: red
height: 15px
width: 10
.shading
position: absolute
height: 90px
width: 15px
border-radius: 50%
box-shadow: 15px 15px 0 0 darken(rgba(255, 255, 0, 1), 4%)
z-index: 15
transform: rotate(-5deg)
left: 99px
top: -30px
z-index: 15
&:after
content: ''
position: absolute
background: darken(rgba(255, 255, 0, 1), 4%)
height: 15px
width: 15px
left: 21px
top: 94px
transform: rotate(-30deg)
.crown
position: absolute
background: gold
height: 22px
width: 22px
z-index: 20
top: 14px
left: 37px
transform: rotate(45deg)
border-radius: 17%
border: 2px solid #555555
overflow: hidden
&:after
content: ''
position: absolute
background: darken(gold, 3%)
height: 20px
width: 20px
left: 8px
top: -5px
.diamond
position: absolute
background: red
height: 10px
width: 10px
z-index: 20
top: 3px
left: 3px
.neck
position: absolute
background: darken($skin, 6%)
width: 21px
height: 35px
top: 120px
left: 56px
z-index: -22
border-bottom-right-radius: 20%
.longhair
position: absolute
height: 100px
width: 75px
background: lighten(yellow, 25%)
left: -10px
top: 110px
z-index: -16
transform: rotate(-45deg)
border-radius: 30%
border-top-left-radius: 50%
.hairstrand1
position: absolute
height: 75px
width: 75px
border-radius: 50%
box-shadow: 15px 15px 0 0 lighten(yellow, 25%)
z-index: 15
transform: rotate(-20deg) scale(-1,-1)
left: 24px
top: 54px
@mixin circles
background: gold
height: 12px
width: 12px
border-radius: 100%
position: absolute
border: 2px solid #555555
.circle1
+circles
left: 20px
top: 15px
z-index: 10
.circle2
+circles
left: 12px
top: 11px
.circle3
+circles
top: 7px
left: 4px
z-index: -1
.circle4
+circles
top: 15px
left: 64px
z-index: 5
.circle5
+circles
top: 9px
left: 73px
z-index: 2
.circle6
+circles
top: 2px
left: 84px
@mixin ears
height: 25px
width: 25px
background: $skin
position: absolute
.ear1
+ears
border-top-left-radius: 100%
border-bottom-right-radius: 75%
left: 116px
top: 45px
border-bottom-left-radius: 5px
z-index: -1
// &:after
// content: ''
// position: absolute
// height: 11px
// width: 6px
// border-radius: 50%
// box-shadow: 2px 2px 0 0 white
// top: 14px
// left: 10px
.ear2
+ears
border-top-right-radius: 100%
border-bottom-left-radius: 75%
top: 44px
left: -20px
z-index: -30
// &:after
// content: ''
// position: absolute
// height: 11px
// width: 6px
// border-radius: 50%
// box-shadow: 2px 2px 0 0 white
// top: 11px
// left: 6px
// transform: scale(-1,1)
@mixin necklaces
background: darken(red, 15%)
border-radius: 100%
height: 22px
width: 22px
position: absolute
.necklace1
+necklaces
top: 134px
left: 53px
z-index: -18
.necklace2
+necklaces
top: 134px
left: 70px
height: 14px
width: 14px
.body
position: absolute
height: 110px
width: 95px
background: darken(pink, 3%)
top: 145px
left: 13px
z-index: -30
border-top-right-radius: 11%
border-bottom-right-radius: 50%
border-bottom-left-radius: 20%
overflow: hidden
&:after
content: ''
position: absolute
height: 110px
width: 80px
background: pink
border-top-right-radius: 30%
border-bottom-right-radius: 50%
.arm1
position: absolute
height: 20px
width: 80px
background: $skin
top: 159px
left: 70px
transform: rotate(30deg)
z-index: -31
.glove
position: absolute
width: 50px
height: 21px
background: white
top: 191px
transform: rotate(30deg)
left: 140px
.hand
position: absolute
width: 34px
height: 34px
background: white
top: 200px
left: 180px
border-bottom-left-radius: 40%
border-top-right-radius: 10%
.arm2
position: absolute
width: 23px
height: 40px
background: $skin
top: 180px
left: -2px
z-index: -40
.glove2
position: absolute
width: 24px
height: 38px
background: white
top: 220px
left: -5px
z-index: -40
.hand2
position: absolute
width: 30px
height: 26px
background: white
top: 240px
left: -10px
border-radius: 32%
.belt
position: absolute
top: 246px
background: gold
height: 20px
width: 80px
left: 12px
z-index: -49
.dress
position: absolute
width: 0
height: 0
border-left: 87px solid transparent
border-right: 87px solid transparent
border-bottom: 150px solid pink
border-radius: 10%
top: 200px
left: -35px
z-index: -51
.seconddress
position: absolute
width: 0
height: 0
border-left: 89px solid transparent
border-right: 89px solid transparent
border-bottom: 158px solid pink
border-radius: 10%
top: 215px
left: -30px
z-index: -50
&:after
content: ''
position: absolute
height: 153px
width: 12px
background: darken(pink, 3%)
transform: rotate(-30deg)
top: 10px
left: 39px
z-index: -50
border-bottom-left-radius: 50%
.footone
position: absolute
top: 350px
background: white
width: 50px
height: 30px
border-bottom-left-radius: 15%
border-bottom-right-radius: 15%
z-index: -60
left: -10px
.foottwo
position: absolute
top: 350px
background: white
width: 50px
height: 30px
border-bottom-left-radius: 15%
border-bottom-right-radius: 15%
z-index: -60
left: 65px
.swordtop
position: absolute
background: gold
height: 22px
width: 22px
border-radius: 100%
top: 154px
left: 186px
.hilttop
position: absolute
background: gold
width: 12px
height: 30px
top: 170px
left: 191px
.hiltbottom
position: absolute
background: gold
width: 48px
height: 19px
top: 228px
left: 176px
&:after
content: ''
position: absolute
background: red
height: 9px
width: 9px
transform: rotate(45deg)
left: 18px
top: 5px
.sword
position: absolute
height: 120px
top: 247px
width: 30px
left: 184px
background: lighten(silver, 7%)
overflow: hidden
.swordtriangle
position: absolute
width: 0
height: 0
border-left: 16px solid transparent
border-right: 16px solid transparent
border-top: 16px solid lighten(silver, 7%)
top: 366px
left: 183px
.shadesword
position: absolute
width: 30px
height: 120px
background: lighten(silver, 2%)
left: 15px
.shadetriangle
position: absolute
height: 20px
width: 12px
background: lighten(silver, 2%)
transform: rotate(45deg)
top: -22px
left: -3px
Also see: Tab Triggers