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.
<div></div>
<!-- Inspiration -> https://i.pinimg.com/originals/cc/d7/f7/ccd7f7517b5e7f77742302f637d0922e.jpg -->
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
overflow: hidden;
}
:root {
--dark-brown: rgb(103, 76, 54);
--log-light: rgb(251, 207, 107);
--log-dark: rgb(231, 175, 86);
--door-light: #b5a68b;
--door-dark: #b5a68b;
--door-frame: rgb(103, 76, 54);
}
#in-page-channel-node-id {
display: none;
}
body {
--sky: #CCF2FF;
--grass-dark: linear-gradient(rgb(107, 128, 48) 0%, rgb(107, 128, 48) 100%) 0vmin 90vh / 100% 20vmin no-repeat;
--grass-light: linear-gradient(rgb(126, 155, 51) 0%, rgb(126, 155, 51) 100%) 0vmin 90vh / 100% 5vmin no-repeat;
--cloud-one-1: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 20vmin 20vmin / 10vmin 10vmin no-repeat;
--cloud-one-2: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 23vmin 20vmin / 10vmin 10vmin no-repeat;
--cloud-one-3: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 26vmin 20vmin / 10vmin 10vmin no-repeat;
--cloud-one-4: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 21.5vmin 18vmin / 10vmin 10vmin no-repeat;
--cloud-one-5: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 24.5vmin 18vmin / 10vmin 10vmin no-repeat;
--cloud-two-1: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 30vmin 30vmin / 10vmin 10vmin no-repeat;
--cloud-two-2: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 33vmin 30vmin / 10vmin 10vmin no-repeat;
--cloud-two-3: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 36vmin 30vmin / 10vmin 10vmin no-repeat;
--cloud-two-4: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 31.5vmin 28vmin / 10vmin 10vmin no-repeat;
--cloud-two-5: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 34.5vmin 28vmin / 10vmin 10vmin no-repeat;
--trunk-big-1: linear-gradient(-80deg, #855726 5%, transparent 5.5%) 7vmin 75vmin / 80vmin 15vmin no-repeat;
--trunk-big-2: linear-gradient(80deg, #855726 5%, transparent 5.5%) 87vmin 75vmin / 80vmin 15vmin no-repeat;
--tree-big-top-1: linear-gradient(-60deg, #5f8333 12%, transparent 12.5%) 27vmin 51vmin / 60vmin 18vmin no-repeat;
--tree-big-top-2: linear-gradient(60deg, #5f8333 12%, transparent 12.5%) 87vmin 51vmin / 60vmin 18vmin no-repeat;
--tree-big-middle-1: linear-gradient(-60deg, #5f8333 12%, transparent 12.5%) 7vmin 68vmin / 80vmin 8vmin no-repeat;
--tree-big-middle-2: linear-gradient(60deg, #5f8333 12%, transparent 12.5%) 87vmin 68vmin / 80vmin 8vmin no-repeat;
--tree-big-bottom-1: linear-gradient(-60deg, #5f8333 12%, transparent 12.5%) -13vmin 75vmin / 100vmin 10vmin no-repeat;
--tree-big-bottom-2:linear-gradient(60deg, #5f8333 12%, transparent 12.5%) 87vmin 75vmin / 100vmin 10vmin no-repeat;
--mountain-one-1: linear-gradient(-35deg, #ccc 12%, transparent 12.5%) 0vmin 12vh / 250vmin 78vmin no-repeat;
--mountain-one-2: linear-gradient(35deg, #ccc 12%, transparent 12.5%) 250vmin 12vh / 250vmin 78vmin no-repeat;
--mountain-two-1: linear-gradient(-35deg, #cac7c7 12%, transparent 12.5%) -200vmin 12vh / 250vmin 78vmin no-repeat;
--mountain-two-2: linear-gradient(35deg, #cac7c7 12%, transparent 12.5%) 50vmin 12vh / 250vmin 78vmin no-repeat;
--mountain-three-1: linear-gradient(-35deg, #eee 12%, transparent 12.5%) -400vmin 12vh / 570vmin 78vmin no-repeat;
--mountain-three-2: linear-gradient(35deg, #eee 12%, transparent 12.5%) 170vmin 12vh / 570vmin 78vmin no-repeat;
min-height: 100vh;
background:
var(--cloud-one-5),
var(--cloud-one-4),
var(--cloud-one-3),
var(--cloud-one-2),
var(--cloud-one-1),
var(--cloud-two-5),
var(--cloud-two-4),
var(--cloud-two-3),
var(--cloud-two-2),
var(--cloud-two-1),
var(--tree-big-top-1),
var(--tree-big-top-2),
var(--tree-big-middle-1),
var(--tree-big-middle-2),
var(--tree-big-bottom-1),
var(--tree-big-bottom-2),
var(--trunk-big-2),
var(--trunk-big-1),
var(--mountain-one-1),
var(--mountain-one-2),
var(--mountain-two-1),
var(--mountain-two-2),
var(--mountain-three-1),
var(--mountain-three-2),
var(--grass-light),
var(--grass-dark),
var(--sky);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
margin: 0;
padding-bottom: 10vmin;
}
div {
--base: linear-gradient(rgb(123, 106, 100) 0%, rgb(123, 106, 100) 100%) 0vmin 39vmin / 100% 1vmin no-repeat;
--terrace-1: linear-gradient(rgb(188, 152, 115) 0%, rgb(188, 152, 115) 100%) 23vmin 39vmin / 14vmin 1vmin no-repeat;
--terrace-2: linear-gradient(rgb(232, 216, 193) 0%, rgb(232, 216, 193) 100%) 22.5vmin 38vmin / 15vmin 1vmin no-repeat;
--logs: linear-gradient(180deg, rgb(251, 207, 107) 25%, rgb(231, 175, 86) 25%, rgb(231, 175, 86) 50%, rgb(251, 207, 107) 50%, rgb(251, 207, 107) 75%, rgb(231, 175, 86) 75%, rgb(231, 175, 86) 100%) 0vmin 25vmin / 4vmin 4vmin;
--roof-beam: linear-gradient(rgb(171, 130, 78) 0%, rgb(171, 130, 78) 100%) 0vmin 16vmin / 100% 1vmin no-repeat;
--roof-base: linear-gradient(rgb(123, 106, 101) 0%, rgb(123, 106, 101) 100%) 0vmin 0vmin / 100% 16vmin no-repeat;
--roof-boarding-1: linear-gradient(#4F4139 0%, #4F4139 100%) 0vmin 0vmin / 100% 1vmin no-repeat;
--roof-boarding-2: linear-gradient(#4F4139 0%, #4F4139 100%) 0vmin 16vmin / 100% 1vmin no-repeat;
--roof-boarding-3: linear-gradient(#4F4139 0%, #4F4139 100%) 4vmin 4vmin / 30vmin 1vmin no-repeat;
--roof-boarding-4: linear-gradient(#4F4139 0%, #4F4139 100%) 35vmin 8vmin / 22vmin 1vmin no-repeat;
--roof-boarding-5: linear-gradient(#4F4139 0%, #4F4139 100%) 20vmin 8vmin / 5vmin 1vmin no-repeat;
--roof-boarding-6: linear-gradient(#4F4139 0%, #4F4139 100%) 30vmin 12vmin / 12vmin 1vmin no-repeat;
--roof-boarding-7: linear-gradient(#4F4139 0%, #4F4139 100%) 5vmin 12vmin / 20vmin 1vmin no-repeat;
--roof-boarding-8: linear-gradient(#4F4139 0%, #4F4139 100%) 44vmin 4vmin / 10vmin 1vmin no-repeat;
--roof-boarding-9: linear-gradient(#4F4139 0%, #4F4139 100%) 2vmin 8vmin / 9vmin 1vmin no-repeat;
--roof-boarding-10: linear-gradient(#4F4139 0%, #4F4139 100%) 50vmin 12vmin / 7vmin 1vmin no-repeat;
--minor-roof-1: linear-gradient(150deg, transparent 34.21%, #A88352 34.21%, #A88352 50%, transparent 50%) 22.5vmin 14vmin / 8vmin 8vmin no-repeat;
--minor-roof-2: linear-gradient(-150deg, transparent 34.21%, #A88352 34.21%, #A88352 50%, transparent 50%) 29.5vmin 14vmin / 8vmin 8vmin no-repeat;
--minor-roof-3: linear-gradient(150deg, transparent 34.21%, #8C6F43 34.21%, #8C6F43 50%, transparent 50%) 23.5vmin 15vmin / 8vmin 7vmin no-repeat;
--minor-roof-4: linear-gradient(-150deg, transparent 34.21%, #8C6F43 34.21%, #8C6F43 50%, transparent 50%) 28.5vmin 15vmin / 8vmin 7vmin no-repeat;
--minor-roof-5: linear-gradient(#4F4139, #4F4139) 24.5vmin 17vmin / 11vmin 3vmin no-repeat;
--minor-roof-6: linear-gradient(#8C6F43, #8C6F43) 23.5vmin 20vmin / 13vmin 1vmin no-repeat;
--minor-roof-7: linear-gradient(#8C6F43, #8C6F43) 29.5vmin 17vmin / 1vmin 4vmin no-repeat;
--minor-roof-8: linear-gradient(#8C6F43, #8C6F43) 35.5vmin 20vmin / 1vmin 4vmin no-repeat;
--minor-roof-9: linear-gradient(#8C6F43, #8C6F43) 23.5vmin 20vmin / 1vmin 4vmin no-repeat;
--door-knob: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 33vmin 30vmin / 0.5vmin 1.5vmin no-repeat;
--door-frame: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 25vmin 23vmin / 10vmin 17vmin no-repeat;
--door: linear-gradient(90deg, #b5a68b 15%, #827d6b 15%, #827d6b 25%, #b5a68b 25%, #b5a68b 45%, #827d6b 45%, #827d6b 55%, #b5a68b 55%, #b5a68b 75%, #827d6b 75%, #827d6b 85%, #b5a68b 85%, #b5a68b 100%) 25.9vmin 24vmin / 8vmin 16vmin no-repeat;
--window-one-bg: linear-gradient(#fff 0%, #fff 100%) 10vmin 23vmin / 8vmin 10vmin no-repeat;
--window-one-shutter-1-1: linear-gradient(rgb(85, 132, 90) 0%, rgb(85, 132, 90) 100%) 6vmin 23vmin / 4vmin 10vmin no-repeat;
--window-one-shutter-1-2: linear-gradient(rgb(85, 132, 90) 0%, rgb(85, 132, 90) 100%) 18vmin 23vmin / 4vmin 10vmin no-repeat;
--window-one-shutter-2-1: linear-gradient(rgb(62, 112, 77) 0%, rgb(62, 112, 77) 100%) 7vmin 24vmin / 2vmin 8vmin no-repeat;
--window-one-shutter-2-2: linear-gradient(rgb(62, 112, 77) 0%, rgb(62, 112, 77) 100%) 19vmin 24vmin / 2vmin 8vmin no-repeat;
--window-one-glass-1: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 11vmin 24vmin / 1.5vmin 3vmin no-repeat;
--window-one-glass-2: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 13vmin 24vmin / 1.5vmin 3vmin no-repeat;
--window-one-glass-3: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 15vmin 24vmin / 1.5vmin 3vmin no-repeat;
--window-one-glass-4: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 11vmin 28vmin / 5.5vmin 4vmin no-repeat;
--window-two-bg: linear-gradient(#fff 0%, #fff 100%) 42vmin 23vmin / 8vmin 10vmin no-repeat;
--window-two-shutter-1-1: linear-gradient(rgb(85, 132, 90) 0%, rgb(85, 132, 90) 100%) 38vmin 23vmin / 4vmin 10vmin no-repeat;
--window-two-shutter-1-2: linear-gradient(rgb(85, 132, 90) 0%, rgb(85, 132, 90) 100%) 50vmin 23vmin / 4vmin 10vmin no-repeat;
--window-two-shutter-2-1: linear-gradient(rgb(62, 112, 77) 0%, rgb(62, 112, 77) 100%) 39vmin 24vmin / 2vmin 8vmin no-repeat;
--window-two-shutter-2-2: linear-gradient(rgb(62, 112, 77) 0%, rgb(62, 112, 77) 100%) 51vmin 24vmin / 2vmin 8vmin no-repeat;
--window-two-glass-1: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 43vmin 24vmin / 1.5vmin 3vmin no-repeat;
--window-two-glass-2: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 45vmin 24vmin / 1.5vmin 3vmin no-repeat;
--window-two-glass-3: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 47vmin 24vmin / 1.5vmin 3vmin no-repeat;
--window-two-glass-4: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 43vmin 28vmin / 5.5vmin 4vmin no-repeat;
--pot-1: linear-gradient(#7D6D61, #7D6D61) 23vmin 36vmin / 2vmin 2vmin no-repeat;
--pot-2: linear-gradient(#7D6D61, #7D6D61) 35vmin 36vmin / 2vmin 2vmin no-repeat;
--pot-plant-1: radial-gradient(rgb(126, 155, 51) 50%, transparent 50%) 21.5vmin 32.5vmin / 5vmin 5vmin no-repeat;
--pot-plant-2: radial-gradient(rgb(126, 155, 51) 50%, transparent 50%) 33.5vmin 32.5vmin / 5vmin 5vmin no-repeat;
height: 40vmin;
width: 60vmin;
position: relative;
background:
var(--pot-1),
var(--pot-2),
var(--pot-plant-1),
var(--pot-plant-2),
var(--terrace-2),
var(--terrace-1),
var(--base),
var(--door-knob),
var(--door),
var(--door-frame),
var(--window-one-glass-1),
var(--window-one-glass-2),
var(--window-one-glass-3),
var(--window-one-glass-4),
var(--window-one-shutter-2-1),
var(--window-one-shutter-2-2),
var(--window-one-shutter-1-1),
var(--window-one-shutter-1-2),
var(--window-one-bg),
var(--window-two-glass-1),
var(--window-two-glass-2),
var(--window-two-glass-3),
var(--window-two-glass-4),
var(--window-two-shutter-2-1),
var(--window-two-shutter-2-2),
var(--window-two-shutter-1-1),
var(--window-two-shutter-1-2),
var(--window-two-bg),
var(--minor-roof-7),
var(--minor-roof-1),
var(--minor-roof-2),
var(--minor-roof-3),
var(--minor-roof-4),
var(--minor-roof-5),
var(--minor-roof-6),
var(--minor-roof-8),
var(--minor-roof-9),
var(--roof-boarding-1),
var(--roof-boarding-2),
var(--roof-boarding-3),
var(--roof-boarding-4),
var(--roof-boarding-5),
var(--roof-boarding-6),
var(--roof-boarding-7),
var(--roof-boarding-8),
var(--roof-boarding-9),
var(--roof-boarding-10),
var(--roof-beam),
var(--roof-base),
var(--logs);
}
div::after {
--bush-1: radial-gradient(#667761 0%, #667761 30%, #667761 40%, transparent 40%) 23% 43vmin / 3vmin 18vmin no-repeat;
--bush-2: radial-gradient(#392F5A 0%, #392F5A 30%, #392F5A 40%, transparent 40%) 21% 46vmin / 3vmin 12vmin no-repeat;
--bush-3: radial-gradient(#E396DF 0%, #E396DF 30%, #E396DF 40%, transparent 40%) 25% 48vmin / 3vmin 8vmin no-repeat;
--bush-4: radial-gradient(#E365C1 0%, #E365C1 30%, #E365C1 40%, transparent 40%) 60% 45vmin / 3vmin 15vmin no-repeat;
--bush-5: radial-gradient(#EDB230 0%, #EDB230 30%, #EDB230 40%, transparent 40%) 63% 48vmin / 3vmin 15vmin no-repeat;
--bush-6: radial-gradient(#E77728 0%, #E77728 30%, #E77728 40%, transparent 40%) 62% 40vmin / 5vmin 20vmin no-repeat;
--trunk-1: linear-gradient(-80deg, #855726 5%, transparent 5.5%) -33vmin 40vmin / 40vmin 15vmin no-repeat;
--trunk-2: linear-gradient(80deg, #855726 5%, transparent 5.5%) 7vmin 40vmin / 40vmin 15vmin no-repeat;
--tree-top-1: linear-gradient(-60deg, #6d9839 12%, transparent 12.5%) -25vmin 36vmin / 32vmin 8vmin no-repeat;
--tree-top-2: linear-gradient(60deg, #6d9839 12%, transparent 12.5%) 7vmin 36vmin / 32vmin 8vmin no-repeat;
--tree-middle-1: linear-gradient(-60deg, #6d9839 12%, transparent 12.5%) -31vmin 40vmin / 38vmin 8vmin no-repeat;
--tree-middle-2: linear-gradient(60deg, #6d9839 12%, transparent 12.5%) 7vmin 40vmin / 38vmin 8vmin no-repeat;
--tree-bottom-1: linear-gradient(-60deg, #6d9839 12%, transparent 12.5%) -33vmin 42vmin / 40vmin 10vmin no-repeat;
--tree-bottom-2: linear-gradient(60deg, #6d9839 12%, transparent 12.5%) 7vmin 42vmin / 40vmin 10vmin no-repeat;
--chimney-1: linear-gradient(180deg, #e0764c 10%, #ab4a0a 10%, #ab4a0a 20%, #e0764c 20%, #e0764c 30%, #ab4a0a 30%, #ab4a0a 40%, #e0764c 40%, #e0764c 50%, #ab4a0a 50%, #ab4a0a 60%, #e0764c 60%, #e0764c 70%, #ab4a0a 70%, #ab4a0a 80%, #e0764c 80%, #e0764c 90%, #ab4a0a 90%, #ab4a0a 100%) 40vmin 7vmin / 5vmin 8vmin no-repeat;
--chimney-2: linear-gradient(90deg, #e0764c 50%, #ab4a0a 50%) 39.5vmin 7vmin / 6vmin 2vmin no-repeat;
content: '';
position: absolute;
z-index: 2;
top: -15vmin;
left: -25vmin;
bottom: 0;
right: -25vmin;
background:
var(--bush-1),
var(--bush-2),
var(--bush-3),
var(--bush-4),
var(--bush-5),
var(--bush-6),
var(--chimney-2),
var(--chimney-1),
var(--tree-top-1),
var(--tree-top-2),
var(--tree-middle-1),
var(--tree-middle-2),
var(--tree-bottom-1),
var(--tree-bottom-2),
var(--trunk-2),
var(--trunk-1);
}
div:before {
--roof-skew-1: linear-gradient(105deg, transparent 34.21%, #7B6B65 34.21%, #7B6B65 50%, transparent 50%) -7vmin 0vmin / 30vmin 17vmin no-repeat;
--roof-skew-2: linear-gradient(-105deg, transparent 34.21%, #7B6B65 34.21%, #7B6B65 50%, transparent 50%) 48vmin 0vmin / 30vmin 17vmin no-repeat;
--roof-boarding-11: linear-gradient(#4F4139 0%, #4F4139 100%) 5vmin 0vmin / calc(100% - 10vmin) 1vmin no-repeat;
--roof-boarding-12: linear-gradient(#4F4139 0%, #4F4139 100%) 0vmin 16vmin / 10vmin 1vmin no-repeat;
--roof-boarding-13: linear-gradient(#4F4139 0%, #4F4139 100%) 61vmin 16vmin / 10vmin 1vmin no-repeat;
content: '';
position: absolute;
z-index: 2;
top: 0px;
left: -6vmin;
bottom: 0px;
right: -6vmin;
background:
var(--roof-boarding-11),
var(--roof-boarding-12),
var(--roof-boarding-13),
var(--roof-skew-1),
var(--roof-skew-2);
}
/* Disable mountain and big tree on mobile/tablet */
@media (max-width: 767px) {
body {
background:
var(--cloud-one-5),
var(--cloud-one-4),
var(--cloud-one-3),
var(--cloud-one-2),
var(--cloud-one-1),
var(--cloud-two-5),
var(--cloud-two-4),
var(--cloud-two-3),
var(--cloud-two-2),
var(--cloud-two-1),
var(--grass-light),
var(--grass-dark),
var(--sky);
}
}
Also see: Tab Triggers