<html>
    <head>
        <style>
              *,
            *:before,
            *:after {
                box-sizing: border-box;
            }

            html {
                overflow: hidden;
            }
            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(--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(--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;
                --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-base: linear-gradient(rgb(123, 106, 101) 0%, rgb(123, 106, 101) 100%) 0vmin 0vmin / 100% 16vmin 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-two-bg: linear-gradient(#fff 0%, #fff 100%) 42vmin 23vmin / 8vmin 10vmin no-repeat;


                height: 40vmin;
                width: 60vmin;
                position: relative;
                background:
                    var(--base),
                    var(--door),
                    var(--window-one-bg),
                    var(--window-two-bg),
                    var(--roof-base),
                    var(--logs);
                }

            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-skew-1),
                    var(--roof-skew-2);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.