<div class="container">
  <div id="frame"></div>
<div class="path-container">
  <svg id="path" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.77 185.7">
   <path class="cls-1" d="m10.75,0h9.77s-3.91,17.27,0,21.83c7.49,11.08,25.74,13.03,60.6,28.67,34.21,15.31,40.07,46.26,27.69,70.7-14.99,29.97-32,46.52-53.1,64.51-13.11,0-40.24-4.24-55.71-10.75,24.43-12.05,61.25-38.12,75.91-56.36,16.36-20.36,12.38-42.68-4.24-53.43-11.03-7.13-40.07-15.31-52.45-23.13C1.63,30.62,5.86,13.68,10.75,0Z" /></svg>
</div>
  <div class="path-container-2">
    <svg id="path-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 164 394 119">
    <path class="cls-2" d="m172.11,279.12c15.29-11.4,29.52-23.67,39.18-40.51,7.83-13.65,5.94-29.67-5.11-40.77-5.79-5.81-13.26-8.71-20.53-11.95-12.11-5.4-24.92-9.2-36.38-16.09-11.04-6.63-15.7-19.24-11.59-31.42.93-2.74,1.65-5.01,2.91-8.18H.14c-.07.27-.11.54-.14.82.01.61,0,1.23.03,1.84.12,1.17.37,2.33.43,3.41,1.03,19.68,4.98,38.78,12.13,57.21,2.84,7.33,6.1,14.43,9.79,21.28,10.62,19.26,24.66,36.54,41.37,51.11.48.41.95.83,1.43,1.24.75.64,1.5,1.27,2.25,1.9.74.61,1.49,1.22,2.23,1.82.59.48,1.18.96,1.78,1.43,1.34,1.05,2.68,2.08,4.05,3.1.42.31.85.62,1.27.93,1.03.75,2.06,1.5,3.1,2.23.55.39,1.1.77,1.66,1.15.94.65,1.9,1.29,2.85,1.93.57.38,1.15.76,1.73,1.14,1.01.65,2.02,1.29,3.04,1.93.52.33,1.04.66,1.57.98,1.4.85,2.81,1.69,4.23,2.51.93.53,1.86,1.05,2.8,1.57.52.29,1.04.58,1.56.87,1.18.64,2.37,1.28,3.57,1.89.12.06.25.13.37.19,8.86,4.56,18.14,8.49,27.76,11.74.17-.09,4.97-2.75,7.35-4.17,11.41-6.8,23.08-13.12,33.78-21.1Z"/>
    <path class="cls-3" d="m393.86,130.2h-243.79c-6.58,14.46-.48,22.9,10.39,29.06,5.23,2.97,10.86,5.02,16.51,7.03,13.45,4.8,27.14,8.95,39.67,16.1,24.65,14.07,33.39,38.53,22.8,64.85-8.71,21.65-23.81,38.64-40.23,54.61-4.22,4.11-9.5,8.83-13.97,12.96,1.99.11,3.99.2,5.99.25.17,0,.34,0,.52.01.7.02,1.39.02,2.09.03.88.01,1.76.03,2.65.03.59,0,1.18,0,1.77-.01.92,0,1.83-.02,2.74-.03.95-.02,1.9-.05,2.85-.08.34-.01.69-.02,1.03-.04,6.91-.28,13.8-.91,20.68-1.84,3.94-.53,7.83-1.18,11.68-1.93,1.16-.23,2.31-.47,3.46-.72.28-.06.57-.12.85-.18,86.55-19.06,151.22-92.33,152.29-180.12Z"/>
    </svg>
  </div>
  <div class="container-shapes">
      <div class="dark-shape shapes"></div>
      <div class="shape-1 shapes"></div>
      <div class="shape-2 shapes"></div>
      <div class="shape-3 shapes"></div>
      <div class="shape-4 shapes"></div>
      <div class="shape-5 shapes"></div>
      <div class="shape-6 shapes"></div>
      <div class="shape-7 shapes"></div>
      <div class="shape-8 shapes"></div>
      <div class="shape-9 shapes"></div>
      <div class="circle-1"></div>
    <div class="trees">
      <div class="tree-1 trees"></div>
      <div class="tree-2 trees"></div>
      <div class="tree-3 trees"></div>
      <div class="tree-4 trees"></div>
      <div class="tree-5 trees"></div>
      <div class="green-tree-1 trees"></div>
      <div class="green-tree-2 trees"></div>
      <div class="green-tree-3 trees"></div>
      <div class="green-tree-4 trees"></div>
      <div class="green-tree-5 trees"></div>
      <div class="green-tree-6 trees"></div>
     </div>
  </div>
</div>
* {
  box-sizing: border-box;
}

#frame{
  display: flex;
  position: absolute;
  left: -40px;
  width: 540px;
  height: 660px;
  background: #f6efe7;
}
.container{
  display: flex;
  position: relative;
  width: 456px;
  height: 60px;
  margin: 0 auto;
}
.cls-2{
  fill: #aac5bf;
}
.cls-3{
  fill: #86ada3;
}
.path-container-2{
  display: flex;
  position: absolute;
  top: 415px;
  width: 456px;
  height: 230px;
}
#path-2{
  display: flex;
  positon: absolute;
  height: 230px;
  width: 456px;
}
/* Container holds the mountain elements*/
.container-shapes{
  display: flex;
  position: absolute;
  top: 22px;
  width: 456px;
  height: 400px;
}

.dark-shape{
  /* space */
  background: black;
  left: 56px;
  clip-path: polygon(
    45% 0,
    59% 43%,
    83% 51%,
    100% 100%,
    26.6% 100%,
    47% 72%,
    35.6% 54%);
  z-index: 12;
}
.shapes{
  width: 400px;
  height: 400px;
  position: absolute;
}
.shape-1{
  /* purple */
  background: #ae3c61;
  left: 56px;
  clip-path: polygon(
    45% 0,
    35.6% 54%,
    29% 38%);
}
.shape-2{
  /* pink */
  background: #e06d8b;
  left: 56px;
  clip-path: polygon(
    29% 38%,
    19% 62%,
    35.6% 54%);
}
.shape-3{
  /* teal */
  background: #399f8a;
  left: 56px;
  clip-path: polygon(
    19% 62%, 
    26.6% 100%, 
    35.6% 54%);
}
.shape-4{
  /* melon */
  background: #f9862a;
  left: 56px;
  clip-path: polygon( 
    35.6% 54%,
    26.6% 100%, 
    47% 72%);
}
.shape-5{
  /* green */
  background: #7eb742;
  left: 56px;
  clip-path: polygon(
    19% 62%, 
    26.6% 100%, 
    10% 83%);
}
.shape-6{
  /* yellow/orange */
  background: #f6b528;
  left: 56px;
  clip-path: polygon(
    3% 100%, 
    26.6% 100%, 
    10% 83%);
}
.shape-7{
  /* purple */
  background: #6e73ab;
  clip-path: polygon(
    0% 100%, 
    17% 100%, 
    24% 83%);
}
.shape-8{
  /* mid purple */
  background: #695f95;
  clip-path: polygon(
    0% 100%, 
    22% 55%, 
    24% 83%);
}
.shape-9{
  /* deep purple */
  background: #225478;
  clip-path: polygon(
    33% 62%, 
    22% 55%, 
    24% 83%);
}
.circle-1{
  width: 90px;
  height: 90px;
  /* red circle */
  background: #d7413c;
  position: absolute;
  left: 16%;
  top: 5px;
  clip-path: circle(50% at 50% 50%);
}
.trees{
  display: flex;
  position: absolute;
  top: 400px;
  width: 456px;
  height: 200px;
}
.tree-1{
  width: 20px;
  height: 30px;
  /* teal triangle */
  background: #399e8e;
  left: 12%;
  top: 20px;
  clip-path: polygon(
    0% 100%,
    50% 0%,
    100% 100%);
}
.tree-2{
  width: 25px;
  height: 40px;
  /* pink triangle */
  background: #f86087;
  position: absolute;
  left: 26%;
  top: 15px;
  clip-path: polygon(
    0% 100%,
    50% 0%,
    100% 100%);
}
.tree-3{
  width: 20px;
  height: 30px;
  /* orange triangle */
  background: #ffae2a;
  position: absolute;
  left: 19%;
  top: 85px;
  clip-path: polygon(
    0% 100%,
    50% 0%,
    100% 100%);
}
.tree-4{
  width: 15px;
  height: 30px;
  /* small orange triangle */
  background: #ff8803;
  position: absolute;
  left: 40%;
  top: 80px;
  clip-path: polygon(
    0% 100%,
    50% 0%,
    100% 100%);
}
.tree-5{
  width: 30px;
  height: 45px;
  /* blue triangle */
  background: #205577;
  position: absolute;
  left: 30%;
  top: 116px;
  clip-path: polygon(
    0% 100%,
    50% 0%,
    100% 100%);
}
.green-tree-1{
  width: 20px;
  height: 30px;
  /* deep green triangle */
  background: #245f1f;
  position: absolute;
  left: 55%;
  top: 15px;
  clip-path: polygon(
    0% 100%,
    50% 0%,
    100% 100%);
}
.green-tree-2{
  width: 20px;
  height: 40px;
  /* deep green triangle */
  background: #245f1f;
  position: absolute;
  left: 67%;
  top: 132px;
  clip-path: polygon(
    0% 100%,
    50% 0%,
    100% 100%);
}
.green-tree-3{
  width: 25px;
  height: 35px;
  /* deep green triangle */
  background: #245f1f;
  position: absolute;
  left: 88%;
  top: 35px;
  clip-path: polygon(
    0% 100%,
    50% 0%,
    100% 100%);
}
.green-tree-4{
  width: 25px;
  height: 40px;
  /* light green triangle */
  background: #398c3a;
  position: absolute;
  left: 66%;
  top: 60px;
  clip-path: polygon(
    0% 100%,
    50% 0%,
    100% 100%);
}
.green-tree-5{
  width: 30px;
  height: 45px;
  /* light green triangle */
  background: #398c3a;
  position: absolute;
  left: 77%;
  top: 10px;
  clip-path: polygon(
    0% 100%,
    50% 0%,
    100% 100%);
}
.green-tree-6{
  width: 20px;
  height: 25px;
  /* light green triangle */
  background: #398c3a;
  position: absolute;
  left: 83%;
  top: 100px;
  clip-path: polygon(
    0% 100%,
    50% 0%,
    100% 100%);
}
/* Bright Side Art Print by AndyWestface

Andy Westface */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.