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></div>

<!-- Inspiration -> https://i.pinimg.com/originals/cc/d7/f7/ccd7f7517b5e7f77742302f637d0922e.jpg -->
              
            
!

CSS

              
                  *,
*: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);
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console