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 class="house">
<div class="roof">
<div class="chimney"></div>
<div class="roof-top"></div>
<div class="roof-base"></div>
</div>
<div class="rooms">
<div class="windows">
<div class="window window-last"></div>
<div class="window window-first"></div>
</div>
<div class="windows">
<div class="window window-last"></div>
<div class="window window-first"></div>
</div>
</div>
<div class="entrance-roof hidden">
<div class="shadow"></div>
</div>
<div class="entrance">
<div class="entrance-window"></div>
<div class="entrance-door"></div>
<div class="entrance-stairs">
<div class="stair stair-3"></div>
<div class="stair stair-2"></div>
<div class="stair stair-1"></div>
</div>
</div>
<div class="entrance-roof">
</div>
</div>
<div class="hint">
<svg width="10" height="20" viewBox="0 0 420 503">
<path d="M219.5 352.844C207.887 169.969 155.867 96.0442 0 3.84404C0 3.84404 152.5 -28.656 245.5 95.344C338.5 219.344 332.5 352.844 332.5 352.844H419.5L274.5 502.344L129.5 352.844H219.5Z" fill="#abff62" />
</svg>
resize
</div>
<div class="ground"></div>
<div class="sun">
<svg width="100" height="100" viewBox="0 0 800 800">
<path d="M716.712 400L794.561 300.166C799.882 293.344 801.406 284.482 798.652 276.393C795.897 268.304 789.206 261.991 780.698 259.454L656.225 222.353L657.712 97.9201C657.815 89.4149 653.589 81.3907 646.379 76.3912C639.168 71.3916 629.864 70.0359 621.421 72.7578L497.868 112.56L422.428 11.0592C417.272 4.1214 408.912 0 400 0C391.087 0 382.728 4.1214 377.571 11.0592L302.129 112.562L178.574 72.7596C170.129 70.0394 160.826 71.3933 153.616 76.3929C146.406 81.3925 142.181 89.4166 142.283 97.9218L143.772 222.355L19.2988 259.456C10.7911 261.992 4.10011 268.306 1.34671 276.395C-1.40852 284.484 0.116665 293.344 5.43832 300.168L83.287 400.002L5.43832 499.836C0.116665 506.658 -1.40669 515.52 1.34671 523.609C4.10011 531.698 10.793 538.011 19.2988 540.548L143.772 577.647L142.283 702.08C142.181 710.585 146.406 718.609 153.616 723.609C160.828 728.607 170.127 729.962 178.574 727.242L302.129 687.44L377.571 788.943C382.728 795.88 391.087 800.002 400 800.002C408.912 800.002 417.272 795.88 422.428 788.943L497.87 687.44L621.423 727.242C629.866 729.962 639.17 728.608 646.381 723.609C653.591 718.609 657.816 710.585 657.714 702.082L656.227 577.647L780.7 540.548C789.208 538.011 795.899 531.698 798.654 523.609C801.408 515.52 799.884 506.66 794.563 499.836L716.712 400ZM400 655.343C252.454 655.343 132.417 540.796 132.417 399.998C132.417 259.201 252.454 144.655 400 144.655C547.545 144.655 667.582 259.201 667.582 399.998C667.582 540.796 547.545 655.343 400 655.343Z" />
</svg>
</div>
<div class="cloud"></div>
<div class="cloud cloud-small"></div>
<div class="cloud cloud-bottom"></div>
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
:root {
--min-width: 230px;
--max-width: 460px;
--height: 130px;
--color-blue-50: #d0eefd;
--color-blue-100: #9bcafa;
--color-blue-dark: #494bc6;
--color-blue-light: #6e7cf2;
--color-purple-dark: #6d68f1;
--color-purple-light: #9e9ef5;
--color-pink: #f2a9c6;
}
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
margin: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background: linear-gradient(135deg, #c7b6f4 0%, #838df4 50%);
}
.house {
position: relative;
min-width: var(--min-width);
max-width: var(--max-width);
container: house / inline-size;
resize: horizontal;
overflow: hidden;
height: 300px;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.rooms {
background: linear-gradient(
0deg,
var(--color-blue-dark) 0%,
var(--color-blue-light) 70%
);
height: var(--height);
width: 100%;
display: flex;
justify-content: space-between;
padding: 20px 28px;
box-shadow: inset 0px 16px 0px 0 rgb(73 75 198 / 20%);
}
.roof {
position: relative;
}
.roof-top {
width: 100%;
height: 45px;
background: linear-gradient(
0deg,
var(--color-blue-light) 0%,
var(--color-blue-100) 100%
);
clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}
.roof-base {
width: 100%;
height: 20px;
background: var(--color-blue-dark);
}
.chimney {
height: 45px;
width: 30px;
background: var(--color-blue-light);
position: absolute;
top: -45px;
right: 20%;
transition: right .25s;
}
.chimney:before {
content: '';
background: var(--color-blue-100);
height: 12px;
width: 40px;
position: absolute;
transform: translateX(-50%);
left: 50%;
}
.entrance {
width: 165px;
height: 260px;
background: linear-gradient(
-45deg,
var(--color-purple-dark) 0%,
var(--color-purple-light) 70%
);
position: absolute;
bottom: 0;
transform: translateX(-50%);
left: 50%;
clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%);
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-end;
}
.entrance-roof {
--size: 140px;
width: var(--size);
height: var(--size);
border: solid 20px var(--color-blue-dark);
position: absolute;
bottom: 100px;
transform: rotate(45deg);
left: calc(50% - (var(--size) / 2));
border-bottom: none;
border-right: none;
box-shadow: inset 20px 20px 0px -6px rgb(73 75 198 / 20%);
}
.shadow {
position: absolute;
width: 100%;
transform: rotate(-45deg);
bottom: -64px;
height: 165px;
left: 72px;
box-shadow: 0 0 0px 13px rgb(73 75 198 / 20%);
}
.windows {
display: flex;
}
.windows:last-child {
transform: scaleX(-1);
}
.window {
background: var(--color-pink);
width: 36px;
height: 54px;
opacity: 0;
transition: opacity, transform 0.25s;
position: relative;
transform: translateX(50px);
}
.window:before {
content: '';
position: absolute;
height: 10px;
width: 43px;
background: var(--color-blue-dark);
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
.window:first-child {
margin-right: 20px;
}
.entrance-door {
height: 70px;
width: 38px;
background: var(--color-blue-dark);
}
.entrance-stairs {
width: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.stair {
height: 10px;
width: 100%;
}
.stair-1 {
background: hsl(237deg 82% 77%);
}
.stair-2 {
background: hsl(237deg 82% 80%);
width: 80%;
}
.stair-3 {
background: hsl(237deg 82% 83%);
width: 60%;
}
.entrance-window {
width: 54px;
height: 54px;
background: var(--color-blue-50);
position: relative;
border-radius: 50%;
margin-bottom: 36px;
transition: border-radius 0.25s;
}
.entrance-window:before {
content: '';
position: absolute;
width: 62px;
height: 10px;
background: var(--color-blue-dark);
opacity: 0;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
@container house (min-width: 350px) {
.chimney {
right: 15%;
}
.window-first {
opacity: 1;
transform: translateX(0);
}
.entrance-window {
border-radius: 0;
height: 45px;
}
.entrance-window:before {
opacity: 1;
}
}
@container house (min-width: 250px) {
.window-last {
opacity: 1;
transform: translateX(0);
}
}
/* scene */
.ground {
height: 150px;
width: 100%;
background: #414363;
}
.sun {
position: fixed;
width: 100px;
height: 100px;
top: -10px;
left: -10px;
background: hsl(298deg 70% 92% / 100%);
border-radius: 50%;
box-shadow: 0px 0px 0 10px hsl(298deg 70% 92% / 53%),
0px 0px 0 20px hsl(298deg 70% 92% / 30%);
animation: sunshine 30s linear infinite;
}
.sun svg {
scale: 2;
}
.sun svg path {
fill: #d0bef6;
}
.cloud {
height: 40px;
border-radius: 20px;
width: 360px;
position: absolute;
background: linear-gradient(90deg, #9499f4 0%, #989bf5 100%);
opacity: 0.8;
top: 180px;
left: 0;
animation: windBlow 30s linear infinite;
z-index: -1;
}
.cloud-small {
top: 105px;
height: 20px;
left: 200px;
width: 500px;
animation: windBlow-small 35s linear infinite;
}
.cloud-bottom {
top: 260px;
left: 600px;
width: 400px;
animation: windBlow-bottom 35s linear infinite;
}
.star {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fdfdff;
top: 40px;
left: 45vw;
z-index: -1;
animation: flicker 1.5s linear infinite;
}
.star:nth-child(1) {
scale: 0.6;
animation-delay: 0.3s;
}
.star:nth-child(2) {
top: 96px;
left: 62vw;
animation-delay: 0.5s;
}
.star:nth-child(3) {
top: 159px;
left: 77vw;
scale: 0.6;
animation-delay: 1s;
}
.star:nth-child(4) {
top: 359px;
left: 81vw;
scale: 0.7;
animation-delay: 0.5s;
}
.star:nth-child(5) {
top: 208px;
left: 51vw;
scale: 0.6;
}
.star:nth-child(6) {
top: 290px;
left: 20vw;
scale: 0.6;
animation-delay: 1s;
}
.star:nth-child(7) {
top: 339px;
left: 7vw;
scale: 0.6;
animation-delay: 0.3s;
}
body:hover .hint {
display: none;
}
.hint {
color: #abff62;
position: absolute;
left: calc(50vw + 125px);
bottom: calc(150px - 20px);
font-family: sans-serif;
}
.hint svg {
transform: rotate(130deg) translate(7px, 0px);
}
@keyframes sunshine {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes windBlow {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-360px);
}
}
@keyframes windBlow-small {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-700px);
}
}
@keyframes windBlow-bottom {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-1000px);
}
}
@keyframes flicker {
0% {
opacity: 1;
}
50% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
Also see: Tab Triggers