Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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.

+ add another resource

Packages

Add Packages

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.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                :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;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console