landscape

In this example below you will see how to do a landscape with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mahsaa, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mahsaa ©
  • HTML
  • CSS
  • JavaScript
      <body>
       <div class="main">
          <div class="rect1"></div>
          <div class="rect2">
              <div class="rect3">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div class="car1">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div class="car2">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
              </div>
              <div class="building1"></div>
              <div class="building2"></div>
              <div class="building3">
                  <div></div>
                  <div></div> 
                  <div></div>        
                  <div></div>        
                  <div></div>        
                  <div></div>        
              </div>
              <div class="tree1">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
              <div class="building4">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
               <div class="building5">
                  <div></div>
                  <div></div> 
                  <div></div>        
                  <div></div>        
                  <div></div>        
                  <div></div>        
                  <div></div>        
                  <div></div>        
                  <div></div>        
                  <div></div>        
              </div>
                <div class="building6">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
               <div class="tree2">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
              <div class="carousel ">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
              <div class="building7">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
               <div class="building8">
                  <div></div>
                  <div></div> 
                  <div></div>        
                  <div></div>        
                  <div></div>        
                  <div></div>        
                  <div></div>        
                  <div></div>        
                  <div></div>        
                  <div></div>        
                  <div></div>        
              </div>
              <div class="tree3">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
               <div class="tree4">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
              <div class="sun"></div>
              <div class="cloud1">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
               <div class="cloud2">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
              <div class="cloud3">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
              <div class="cloud4">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
              <div class="balloon">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>

          </div>
       </div>
                      

        <script src=scripts/script.js></script>
    </body>

/*Downloaded from https://www.codeseek.co/mahsaa/landscape-eEbZWe */
    body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.main{
    width:900px;
    height:550px;
    top:50%;
    left: 50%;
    transform: translate(-50% , -50%);
    background: #56b1a8;
    position: absolute;
}
.rect1{
     width:600px;
    height:10px;
    background: #71c10a;
    bottom: 0;
    left: 50%;
    transform:translate(-50%);
    position: absolute;
   
}
.rect2{
     width:650px;
    height:85px;
    background: #51776a;
    bottom: 10px;
    left: 50%;
    transform:translate(-50%);
    position: absolute;
    z-index: 5;
   
}
.rect3{
    width:709px;
    height:63px;
    background: #455854;
    bottom: 10px;
    left: 50%;
    transform:translate(-50%);
    position: absolute; 
}
.rect3 > div:nth-child(1){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:20px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(2){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:43px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(3){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:66px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(4){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:89px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(5){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:112px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(6){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:135px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(7){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:158px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(8){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:181px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(9){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:204px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(10){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:227px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(11){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:250px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(12){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:273px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(13){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:296px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(14){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:319px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(15){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:342px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(16){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:365px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(17){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:388px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(18){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:411px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(19){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:434px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(20){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:457px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(21){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:480px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(22){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:503px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(23){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:526px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(24){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:549px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(25){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:572px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(26){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:595px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(27){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:618px;
    transform:translate(-50%);
    position: absolute; 
}
.rect3 > div:nth-child(28){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:641px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(29){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:664px;
    transform:translate(-50%);
    position: absolute; 

}
.rect3 > div:nth-child(30){
    width:15px;
    height:3px;
    background: white;
    bottom: 50%;
    left:687px;
    transform:translate(-50%);
    position: absolute; 

}
/*---------------------car1------------------------*/
.car1{
    width:70px;
    height:50px;
    /*background: seagreen;*/
    bottom: 50%;
    left:50px;
    transform:translate(-50%);
    position: absolute; 

}
.car1> div:nth-child(1){
    width:61px;
    height:16px;
    background: red;
    bottom:12px;
    left:5px;
    position: absolute; 
    border-top-left-radius:10px;
    border-top-right-radius: 17px;

}
.car1> div:nth-child(2){
    width:47px;
    height:19px;
    background:red;
    bottom:24px;
    left:7px;
    position: absolute; 
    border-top-left-radius:10px;
    border-top-right-radius: 17px;
}
.car1> div:nth-child(3){
    width:39px;
    height:11px;
    background:white;
    bottom:29px;
    left:11px;
    position: absolute; 
    border-top-left-radius:10px;
    border-top-right-radius: 17px;
}
.car1> div:nth-child(4){
    width:1px;
    height:27px;
    background:black;
    bottom:13px;
    left:30px;
    position: absolute; 
}
.car1> div:nth-child(5){
    width:5px;
    height:1px;
    background:black;
    bottom:24px;
    left:34px;
    position: absolute; 
}
.car1> div:nth-child(6){
    width:5px;
    height:1px;
    background:black;
    bottom:24px;
    left:15px;
    position: absolute; 
}
.car1> div:nth-child(7){
    width:16px;
    height:16px;
    background:black;
    bottom:1px;
    left:9px;
    position: absolute; 
    border-radius: 50%;
}
.car1> div:nth-child(8){
    width:16px;
    height:16px;
    background:black;
    bottom:1px;
    left:41px;
    position: absolute; 
    border-radius: 50%;
}
.car1> div:nth-child(9){
    width:5px;
    height:5px;
    background:#787389;
    bottom:7px;
    left:46px;
    position: absolute; 
    border-radius: 50%;
}
.car1> div:nth-child(10){
    width:5px;
    height:5px;
    background:#787389;
    bottom:7px;
    left:14px;
    position: absolute; 
    border-radius: 50%;
}
.car1> div:nth-child(11){
    width:8px;
    height:6px;
    background:yellow;
    bottom:17px;
    left:58px;
    position: absolute; 
    border-radius: 50%;
}
/*-------------------car2-------------------------*/
.car2{
    width:85px;
    height:50px;
    /*background: seagreen;*/
    bottom:0;
    left:200px;
    position: absolute; 
}
.car2> div:nth-child(1){
    width:76px;
    height:17px;
    background: #91ebcf;
    bottom:12px;
    left:5px;
    position: absolute; 
    border-top-left-radius:17px;
    border-top-right-radius: 20px;
}
.car2> div:nth-child(2){
    width:50px;
    height:19px;
    background: #91ebcf;
    bottom:29px;
    left:16px;
    position: absolute; 
    border-top-left-radius:17px;
    border-top-right-radius: 20px;
}
.car2> div:nth-child(3){
    width:40px;
    height:15px;
    background: white;
    bottom:30px;
    left:21px;
    position: absolute; 
    border-top-left-radius:17px;
    border-top-right-radius: 20px;
}
.car2> div:nth-child(4){
    width:1px;
    height:32px;
    background: black;
    bottom:13px;
    left:40px;
    position: absolute; 
    border-top-left-radius:17px;
    border-top-right-radius: 20px;
}
.car2> div:nth-child(5){
    width:5px;
    height:2px;
    background: black;
    bottom:24px;
    left:21px;
    position: absolute; 
    border-top-left-radius:17px;
    border-top-right-radius: 20px;
}
.car2> div:nth-child(6){
    width:5px;
    height:2px;
    background: black;
    bottom:24px;
    left:46px;
    position: absolute; 
    border-top-left-radius:17px;
    border-top-right-radius: 20px;
}
.car2> div:nth-child(7){
    width:18px;
    height:18px;
    background: black;
    bottom:3px;
    left:52px;
    position: absolute; 
   border-radius: 50%;
}
.car2> div:nth-child(8){
    width:10px;
    height:10px;
    background: #435853;
    bottom:7px;
    left:56px;
    position: absolute; 
   border-radius: 50%;
}
.car2> div:nth-child(9){
    width:18px;
    height:18px;
    background: black;
    bottom:3px;
    left:13px;
    position: absolute; 
   border-radius: 50%;
}
.car2> div:nth-child(10){
    width:10px;
    height:10px;
    background: #435853;
    bottom:7px;
    left:17px;
    position: absolute; 
   border-radius: 50%;
}
.car2> div:nth-child(11){
    width:10px;
    height:10px;
    background: yellowgreen;
    bottom:18px;
    left:72px;
    position: absolute; 
    border-radius: 50%;
}
/*---------------------building-----------------*/
.building1{
    width:100px;
    height:223px;
    background:#435853;
    bottom:85px;
    left:396px;
    position: absolute; 
   
}
.building2{
    width:100px;
    height:257px;
    background:#435853;
    bottom:85px;
    left:279px;
    position: absolute; 
   
}
.building3{
    width:104px;
    height:81px;
    /*background:white;*/
    bottom:85px;
    left:507px;
    position: absolute; 
}
.building3 > div:nth-child(1){
    width:34px;
    height:34px;
    background:#95e7d8;
    bottom:39px;
    right:7px;
    position: absolute;
    transform:rotate(45deg) ;
}
.building3 > div:nth-child(2){
    width:46px;
    height:56px;
    background:#95e7d8;
    bottom:0px;
    right:1px;
    position: absolute; 
}
.building3 > div:nth-child(3){
    width:45px;
    height:21px;
    background:#8c5455;
    bottom:55px;
    right:37px;
    position: absolute; 
    transform: skew(-45deg);
    border:2px solid #514132;
}
.building3 > div:nth-child(4){
    width:51px;
    height:56px;
    background:#76dab6;
    bottom:0px;
    right:47px;
    position: absolute;  
}

.building3 > div:nth-child(5){
    width:14px;
    height:29px;
    background:#648479;
    bottom:16px;
    right:54px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building3 > div:nth-child(6){
    width:14px;
    height:29px;
    background:#648479;
    bottom:16px;
    right:74px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
/*----------------------tree1-------------------------*/
.tree1{
    width:61px;
    height:50px;
    /*background:sandybrown;*/
    bottom:85px;
    right:9px;
    position: absolute;  
}


.tree1 > div:nth-child(1){
     width:25px;
    height:25px;
    background:#6dc000;
    bottom:19px;
    right:33px;
    position: absolute; 
    border-radius: 50%;    
}
.tree1 > div:nth-child(2){
     width:4px;
    height:28px;
    background:#7a3f1f;
    bottom:0px;
    right:43px;
    position: absolute;     
}
.tree1 > div:nth-child(3){
     width:30px;
    height:30px;
    background:#6dc000;
    bottom:19px;
    right:2px;
    position: absolute; 
    border-radius: 50%;    
}
.tree1 > div:nth-child(4){
     width:5px;
    height:33px;
    background:#7a3f1f;
    bottom:0px;
    right:14px;
    position: absolute;     
}
.tree1 > div:nth-child(5){
     width:27px;
    height:12px;
    background:#76c700;
    bottom:0px;
    right:34px;
    position: absolute;  
    border-top-left-radius: 50%;
    border-top-right-radius: 50%
}
.tree1 > div:nth-child(6){
     width:31px;
    height:12px;
    background:#76c700;
    bottom:0px;
    right:5px;
    position: absolute;  
    border-top-left-radius: 50%;
    border-top-right-radius: 50%
}
/*-----------------------building4--------------------*/
.building4{
    width:100px;
    height:150px;
    /*background:floralwhite;*/
    bottom:85px;
    right:118px;
    position: absolute; 
}
.building4 > div:nth-child(1){
    width:100px;
    height:43px;
    background:#fec083;
    bottom:0px;
    right:0px;
    position: absolute;  
}
.building4 > div:nth-child(2){
    width:100px;
    height:43px;
    background:#fffeff;
    bottom:43px;
    right:0px;
    position: absolute;
     
}
.building4 > div:nth-child(3){
    width:100px;
    height:43px;
    background:#704e32;
    bottom:86px;
    right:0px;
    position: absolute;
    border-bottom: 5px solid #4f4231;  
}
.building4> div:nth-child(4){
    width:14px;
    height:29px;
    background:#667973;
    bottom:7px;
    right:11px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building4> div:nth-child(5){
    width:14px;
    height:29px;
    background:#667973;
    bottom:7px;
    right:32px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building4> div:nth-child(6){
    width:14px;
    height:29px;
    background:#667973;
    bottom:7px;
    right:54px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building4> div:nth-child(7){
    width:14px;
    height:29px;
    background:#667973;
    bottom:50px;
    right:11px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building4> div:nth-child(8){
    width:14px;
    height:29px;
    background:#667973;
    bottom:50px;
    right:32px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building4> div:nth-child(9){
    width:14px;
    height:29px;
    background:#667973;
    bottom:50px;
    right:54px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building4> div:nth-child(10){
    width:5px;
    height:49px;
    background:#4e3e2f;
    bottom:91px;
    right:95px;
    position: absolute;    
}
.building4> div:nth-child(11){
    width:5px;
    height:49px;
    background:#4e3e2f;
    bottom:91px;
    right:0px;
    position: absolute; 
}
.building4> div:nth-child(12){
    width:10px;
    height:25px;
    background:white;
    bottom:124px;
    right:21px;
    position: absolute; 
}
/*----------------------building5------------------------*/
.building5{
    width:98px;
    height:101px;
    /*background:black;*/
    bottom:85px;
    left:363px;
    position: absolute; 
}
.building5 > div:nth-child(1){
    width:34px;
    height:34px;
    background:#fbae90;
    bottom:59px;
    right:7px;
    position: absolute;
    transform:rotate(45deg) ;
}
.building5 > div:nth-child(2){
    width:46px;
    height:75px;
    background:#fbae90;
    bottom:0px;
    right:1px;
    position: absolute; 
}
.building5 > div:nth-child(3){
    width:45px;
    height:21px;
    background:#735f56;
    bottom:76px;
    right:36px;
    position: absolute; 
    transform: skew(-45deg);
    border:2px solid #574b3d;
}
.building5 > div:nth-child(4){
    width:51px;
    height:77px;
    background:#ed8e58;
    bottom:0px;
    right:47px;
    position: absolute;  
}

.building5 > div:nth-child(5){
    width:13px;
    height:27px;
    background:#698078;
    bottom:41px;
    right:54px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building5 > div:nth-child(6){
    width:13px;
    height:27px;
    background:#698078;
    bottom:41px;
    right:78px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building5 > div:nth-child(7){
    width:13px;
    height:27px;
    background:#698078;
    bottom:8px;
    right:54px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building5 > div:nth-child(8){
    width:13px;
    height:27px;
    background:#698078;
    bottom:8px;
    right:78px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building5 > div:nth-child(9){
    width:4px;
    height:13px;
    background:#fea78c;
    bottom:87px;
    right:54px;
    position: absolute; 
}
.building5 > div:nth-child(10){
    width:4px;
    height:13px;
    background:#fea78c;
    bottom:87px;
    right:60px;
    position: absolute; 
}
/*--------------------building6---------------------*/
.building6{
    width:100px;
    height:190px;
    /*background:black;*/
    bottom:85px;
    left:274px;
    position: absolute; 
}
.building6 > div:nth-child(1){
    width:100px;
    height:43px;
    background:#8eebcc;
    bottom:0px;
    right:0px;
    position: absolute;  
}
.building6 > div:nth-child(2){
    width:100px;
    height:43px;
    background:#8eebcc;
    bottom:43px;
    right:0px;
    position: absolute;
     
}
.building6 > div:nth-child(3){
    width:100px;
    height:43px;
    background:#8eebcc;
    bottom:86px;
    right:0px;
    position: absolute;
   
}
.building6 > div:nth-child(4){
    width:100px;
    height:43px;
    background:#704e32;
    bottom:129px;
    right:0px;
    position: absolute;
    border-bottom: 5px solid #4f4231;  
}
.building6> div:nth-child(5){
    width:14px;
    height:25px;
    background:#667973;
    bottom:12px;
    right:11px;
    position: absolute; 
    
}
.building6> div:nth-child(6){
    width:14px;
    height:25px;
    background:#667973;
    bottom:12px;
    right:32px;
    position: absolute; 
    
}
.building6> div:nth-child(7){
    width:14px;
    height:25px;
    background:#667973;
    bottom:12px;
    right:54px;
    position: absolute;  
}
.building6> div:nth-child(8){
    width:14px;
    height:25px;
    background:#667973;
    bottom:12px;
    right:75px;
    position: absolute;  
}
.building6> div:nth-child(9){
    width:14px;
    height:25px;
    background:#667973;
    bottom:90px;
    right:11px;
    position: absolute;
    border-top-right-radius:50% ;  
    border-top-left-radius:50%;  
    
}
.building6> div:nth-child(10){
    width:14px;
    height:25px;
    background:#667973;
    bottom:90px;
    right:32px;
    position: absolute;
    border-top-right-radius:50% ;  
    border-top-left-radius:50%;  
    
}
.building6> div:nth-child(11){
    width:14px;
    height:25px;
    background:#667973;
    bottom:90px;
    right:54px;
    position: absolute;  
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building6> div:nth-child(12){
    width:14px;
    height:25px;
    background:#667973;
    bottom:90px;
    right:75px;
    position: absolute;  
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building6> div:nth-child(13){
    width:14px;
    height:25px;
    background:#667973;
    bottom:52px;
    right:11px;
    position: absolute;
    border-top-right-radius:50% ;  
    border-top-left-radius:50%;  
    
}
.building6> div:nth-child(14){
    width:14px;
    height:25px;
    background:#667973;
    bottom:52px;
    right:32px;
    position: absolute;
    border-top-right-radius:50% ;  
    border-top-left-radius:50%;  
    
}
.building6> div:nth-child(15){
    width:14px;
    height:25px;
    background:#667973;
    bottom:52px;
    right:54px;
    position: absolute;  
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building6> div:nth-child(16){
    width:14px;
    height:25px;
    background:#667973;
    bottom:52px;
    right:75px;
    position: absolute;  
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}


.building6> div:nth-child(17){
    width:5px;
    height:49px;
    background:#4e3e2f;
    bottom:134px;
    right:95px;
    position: absolute;    
}
.building6> div:nth-child(18){
    width:5px;
    height:49px;
    background:#4e3e2f;
    bottom:134px;
    right:0px;
    position: absolute; 
}
.building6> div:nth-child(19){
    width:10px;
    height:25px;
    background:#4e3e2f;
    bottom:163px;
    right:29px;
    position: absolute; 
}
/*-------------------tree2------------------*/
.tree2{
    width:61px;
    height:50px;
    /*background:sandybrown;*/
    bottom:85px;
    right:173px;
    position: absolute;  
}

.tree2 > div:nth-child(1){
     width:40px;
    height:40px;
    background:#6dc000;
    bottom:19px;
    right:2px;
    position: absolute; 
    border-radius: 50%;    
}
.tree2 > div:nth-child(2){
     width:5px;
    height:33px;
    background:#7a3f1f;
    bottom:0px;
    right:20px;
    position: absolute;     
}
.tree2 > div:nth-child(3){
     width:27px;
    height:17px;
    background:#76c700;
    bottom:0px;
    right:25px;
    position: absolute;  
    border-top-left-radius: 50%;
    border-top-right-radius: 50%
}
.tree2 > div:nth-child(4){
     width:31px;
    height:12px;
    background:#76c700;
    bottom:0px;
    right:5px;
    position: absolute;  
    border-top-left-radius: 50%;
    border-top-right-radius: 50%
}
/*-----------------carousel-------------------------*/
.carousel{
    width:240px;
    height:240px;
    /*background:red;*/
    bottom:122px;
    right:404px;
    position: absolute;  
    border-radius: 50%;
    animation:rotatecircle 30s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear; 
}

.carousel> div:nth-child(1){
    width:200px;
    height:200px;
    background:#56b1a8;
    bottom:15px;
    left:50%;
    transform: translate(-50% );
     position: absolute;
    border-radius: 50%;
    border:4px solid #435853;
}
.carousel> div:nth-child(2){
    width:170px;
    height:170px;
    background:#56b1a8;
    bottom:30px;
    left:50%;
    transform: translate(-50% );
     position: absolute;
    border-radius: 50%;
    border:4px solid #435853;
}
.carousel> div:nth-child(3){
    width:2px;
    height:174px;
    background:#435853;
    bottom:30px;
    left:50%;
    transform: translate(-50% );
    position: absolute;  
}
.carousel> div:nth-child(4){
    width:174px;
    height:2px;
    background:#435853;
    bottom:117px;
    left:50%;
    transform: translate(-50% );
    position: absolute;  
}
.carousel> div:nth-child(5){
    width:174px;
    height:2px;
    background:#435853;
    bottom:116px;
    left:33px;
    position: absolute; 
    transform: rotate(45deg); 
}
.carousel> div:nth-child(6){
    width:174px;
    height:2px;
    background:#435853;
    bottom:116px;
    left:33px;
    position: absolute; 
    transform: rotate(-45deg); 
}
.carousel> div:nth-child(7){
    width:20px;
    height:20px;
    background:#435853;
    bottom:109px;
    left:110px;
    position: absolute; 
    border-radius: 50%;
}
.carousel> div:nth-child(8){
    width:17px;
    height:17px;
    background:#435853;
    bottom:110px;
    left:0px;
    position: absolute; 
    border-radius: 50%;
}
.carousel> div:nth-child(9){
    width:17px;
    height:17px;
    background:#435853;
    bottom:189px;
    left:32px;
    position: absolute; 
    border-radius: 50%;
}
.carousel> div:nth-child(10){
    width:17px;
    height:17px;
    background:#435853;
    bottom:222px;
    left:111px;
    position: absolute; 
    border-radius: 50%;
}
.carousel> div:nth-child(11){
    width:17px;
    height:17px;
    background:#435853;
    bottom:110px;
    left:223px;
    position: absolute; 
    border-radius: 50%;
}
.carousel> div:nth-child(12){
    width:17px;
    height:17px;
    background:#435853;
    bottom:189px;
    left:191px;
    position: absolute; 
    border-radius: 50%;
}
.carousel> div:nth-child(13){
    width:17px;
    height:17px;
    background:#435853;
    bottom:34px;
    left:191px;
    position: absolute; 
    border-radius: 50%;
}
.carousel> div:nth-child(14){
    width:17px;
    height:17px;
    background:#435853;
    bottom:34px;
    left:30px;
    position: absolute; 
    border-radius: 50%;
}
.carousel> div:nth-child(15){
    width:17px;
    height:17px;
    background:#435853;
    bottom:-1px;
    left:111px;
    position: absolute; 
    border-radius: 50%;
}
@keyframes rotatecircle{
  
 0%{
     transform: rotate(0deg);
 }
    
  100%{
     transform: rotate(360deg);   
 }
}
/*-------------------building7-------------------*/
.building7{
    width:106px;
    height:155px;
    /*background:black;*/
    bottom:85px;
    left:182px;
    position: absolute; 
}
.building7 > div:nth-child(1){
    width:106px;
    height:51px;
    background:#ffe6b3;
    bottom:0px;
    left:0px;
    position: absolute;  
}
.building7 > div:nth-child(2){
    width:106px;
    height:51px;
    background:#fde5c3;
    bottom:50px;
    left:0px;
    position: absolute;
     
}
.building7 > div:nth-child(3){
    width:106px;
    height:51px;
    background:#fde5c3;
    bottom:100px;
    left:0px;
    position: absolute;
}

.building7> div:nth-child(4){
    width:111px;
    height:13px;
    background:#8f8e72;
    bottom:-1px;
    right:-2px;
    position: absolute; 
    
}
.building7> div:nth-child(5){
    width:87px;
    height:6px;
    background:#738182;
    bottom:20px;
    right:10px;
    position: absolute;   
}
.building7> div:nth-child(6){
    width:98px;
    height:19px;
    background:#fbe11b;
    bottom:28px;
    right:4px;
    position: absolute; 
    transform: skew(-10deg);  
}
.building7> div:nth-child(7){
    width:8px;
    height:8px;
    background:#fbe11b;
    bottom:26px;
    right:5px;
    position: absolute; 
   border-radius: 50%;  
}
.building7> div:nth-child(8){
    width:8px;
    height:8px;
    background:#fbe11b;
    bottom:26px;
    right:13px;
    position: absolute; 
   border-radius: 50%;  
}
.building7> div:nth-child(9){
    width:8px;
    height:8px;
    background:#fbe11b;
    bottom:26px;
    right:21px;
    position: absolute; 
   border-radius: 50%;  
}
.building7> div:nth-child(10){
    width:8px;
    height:8px;
    background:#fbe11b;
    bottom:26px;
    right:29px;
    position: absolute; 
   border-radius: 50%;  
}
.building7> div:nth-child(11){
    width:8px;
    height:8px;
    background:#fbe11b;
    bottom:26px;
    right:38px;
    position: absolute; 
   border-radius: 50%;  
}
.building7> div:nth-child(12){
    width:8px;
    height:8px;
    background:#fbe11b;
    bottom:26px;
    right:46px;
    position: absolute; 
   border-radius: 50%;  
}
.building7> div:nth-child(13){
    width:8px;
    height:8px;
    background:#fbe11b;
    bottom:26px;
    right:55px;
    position: absolute; 
   border-radius: 50%;  
}
.building7> div:nth-child(14){
    width:8px;
    height:8px;
    background:#fbe11b;
    bottom:26px;
    right:63px;
    position: absolute; 
   border-radius: 50%;  
}
.building7> div:nth-child(15){
    width:8px;
    height:8px;
    background:#fbe11b;
    bottom:26px;
    right:72px;
    position: absolute; 
   border-radius: 50%;  
}
.building7> div:nth-child(16){
    width:8px;
    height:8px;
    background:#fbe11b;
    bottom:26px;
    right:80px;
    position: absolute; 
   border-radius: 50%;  
}
.building7> div:nth-child(17){
    width:8px;
    height:8px;
    background:#fbe11b;
    bottom:26px;
    right:88px;
    position: absolute; 
   border-radius: 50%;  
}
.building7> div:nth-child(18){
    width:8px;
    height:8px;
    background:#fbe11b;
    bottom:26px;
    right:95px;
    position: absolute; 
   border-radius: 50%;  
}
.building7 > div:nth-child(19){
    width:14px;
    height:25px;
    background:#667973;
    bottom:62px;
    right:11px;
    position: absolute;
    border-top-right-radius:50% ;  
    border-top-left-radius:50%;  
    
}
.building7 > div:nth-child(20){
    width:14px;
    height:25px;
    background:#667973;
    bottom:62px;
    right:34px;
    position: absolute;
    border-top-right-radius:50% ;  
    border-top-left-radius:50%;  
    
}
.building7 > div:nth-child(21){
    width:14px;
    height:25px;
    background:#667973;
    bottom:62px;
    right:58px;
    position: absolute;  
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building7 > div:nth-child(22){
    width:14px;
    height:25px;
    background:#667973;
    bottom:62px;
    right:81px;
    position: absolute;  
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building7 > div:nth-child(23){
    width:110px;
    height:4px;
    background:#8f8e72;
    bottom:99px;
    right:-2px;
    position: absolute;  
    
}
.building7 > div:nth-child(24){
    width:110px;
    height:10px;
    background:#8f8e72;
    bottom:141px;
    right:-2px;
    position: absolute;     
}
.building7 > div:nth-child(25){
    width:14px;
    height:25px;
    background:#667973;
    bottom:110px;
    right:11px;
    position: absolute;
    border-top-right-radius:50% ;  
    border-top-left-radius:50%;  
    
}
.building7 > div:nth-child(26){
    width:14px;
    height:25px;
    background:#667973;
    bottom:110px;
    right:34px;
    position: absolute;
    border-top-right-radius:50% ;  
    border-top-left-radius:50%;  
    
}
.building7 > div:nth-child(27){
    width:14px;
    height:25px;
    background:#667973;
    bottom:110px;
    right:58px;
    position: absolute;  
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building7 > div:nth-child(28){
    width:14px;
    height:25px;
    background:#667973;
    bottom:110px;
    right:81px;
    position: absolute;  
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building7 > div:nth-child(29){
    width:9px;
    height:12px;
    background:#4e4943;
    bottom:151px;
    right:29px;
    position: absolute;  
}
.building7 > div:nth-child(30){
    width:11px;
    height:20px;
    background:#564939;
    bottom:151px;
    right:40px;
    position: absolute;   
}
/*-------------------building8-----------------------*/
.building8{
    width:98px;
    height:101px;
    /*background:black;*/
    bottom:85px;
    left:62px;
    position: absolute; 
}
.building8 > div:nth-child(1){
    width:34px;
    height:34px;
    background:#fefefe;
    bottom:59px;
    right:7px;
    position: absolute;
    transform:rotate(45deg) ;
}
.building8 > div:nth-child(2){
    width:49px;
    height:76px;
    background:#fefefe;
    bottom:0px;
    right:0px;
    position: absolute; 
}
.building8 > div:nth-child(3){
    width:45px;
    height:21px;
    background:#735f56;
    bottom:76px;
    right:36px;
    position: absolute; 
    transform: skew(-45deg);
    border:2px solid #574b3d;
}
.building8 > div:nth-child(4){
    width:49px;
    height:77px;
    background:#e6e5e3;
    bottom:0px;
    right:47px;
    position: absolute;  
}

.building8 > div:nth-child(5){
    width:13px;
    height:27px;
    background:#698078;
    bottom:41px;
    right:54px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building8 > div:nth-child(6){
    width:13px;
    height:27px;
    background:#698078;
    bottom:41px;
    right:78px;
    position: absolute; 
    border-top-right-radius:50% ;  
    border-top-left-radius:50%; 
}
.building8 > div:nth-child(7){
    width:13px;
    height:27px;
    background:#698078;
    bottom:8px;
    right:54px;
    position: absolute; 
   
}
.building8 > div:nth-child(8){
    width:13px;
    height:27px;
    background:#698078;
    bottom:8px;
    right:78px;
    position: absolute; 
  
}
.building8 > div:nth-child(9){
    width:4px;
    height:22px;
    background:#e6e5e3;
    bottom:87px;
    right:54px;
    position: absolute; 
}
.building8 > div:nth-child(10){
    width:4px;
    height:22px;
    background:#e6e5e3;
    bottom:87px;
    right:60px;
    position: absolute; 
}
.building8 > div:nth-child(11){
    width:12px;
    height:12px;
    background:#7a9187;
    bottom:73px;
    right:16px;
    position: absolute; 
    border-radius: 50%;
}
/*---------------------tree3--------------------*/
.tree3{
    width:65px;
    height:92px;
    /*background:black;*/
    bottom:85px;
    left:119px;
    position: absolute; 
}
.tree3 > div:nth-child(1){
    width:40px;
    height:69px;
    background:#7ab618;
    bottom:22px;
    right:0px;
    position: absolute; 
    border-radius: 50%;
}
.tree3 > div:nth-child(2){
    width:5px;
    height:40px;
    background:#5f3424;
    bottom:0px;
    right:18px;
    position: absolute;   
}
.tree3 > div:nth-child(3){
    width:35px;
    height:35px;
    background:#7ab618;
    bottom:22px;
    right:30px;
    position: absolute; 
    border-radius: 50%;
}
.tree3 > div:nth-child(4){
    width:5px;
    height:31px;
    background:#5f3424;
    bottom:0px;
    right:46px;
    position: absolute;   
}
.tree3 > div:nth-child(5){
    width:35px;
    height:9px;
    background:#7ab618;
    bottom:0px;
    right:5px;
    position: absolute; 
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}
/*---------------tree4---------------------*/
.tree4{
    width:65px;
    height:92px;
    /*background:black;*/
    bottom:85px;
    left:3px;
    position: absolute; 
}
.tree4 > div:nth-child(1){
    width:50px;
    height:110px;
    background:#7ab618;
    bottom:22px;
    right:0px;
    position: absolute; 
    border-radius: 50%;
}
.tree4 > div:nth-child(2){
    width:5px;
    height:51px;
    background:#5f3424;
    bottom:0px;
    right:22px;
    position: absolute;   
}
.tree4 > div:nth-child(3){
    width:50px;
    height:78px;
    background:#7ab618;
    bottom:22px;
    right:30px;
    position: absolute; 
    border-radius: 50%;
}
.tree4 > div:nth-child(4){
    width:5px;
    height:39px;
    background:#5f3424;
    bottom:0px;
    right:53px;
    position: absolute;   
}
.tree4 > div:nth-child(5){
    width:62px;
    height:9px;
    background:#7ab618;
    bottom:0px;
    right:5px;
    position: absolute; 
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}
/*----------------------sun-------------------------*/
.sun{
    width:60px;
    height:60px;
    background:#f5d535;
    bottom:447px;
    right:469px;
    position: absolute; 
    border-radius: 50%;
    box-shadow:-1px 0px 14px  5px #f5d535 ;
}
/*------------------could1-----------------------------*/
.cloud1{
    width:100px;
    height:60px;
    /*background:#f5d535;*/
    bottom:409px;
   left:33px;
    position: absolute;  
}
.cloud1 > div:nth-child(1){
     width:99px;
    height:17px;
    background:white;
    top:42px;
    left:0px;
    position: absolute;
    border-radius: 10px; 
}
.cloud1 > div:nth-child(2){
     width:60px;
    height:46px;
    background:white;
    top:11px;
    left:24px;
    position: absolute;
    border-radius: 50%; 
}
.cloud1 > div:nth-child(3){
     width:25px;
    height:25px;
    background:white;
    top:25px;
    left:11px;
    position: absolute;
    border-radius: 50%; 
}
.cloud1 > div:nth-child(4){
     width:12px;
    height:12px;
    background:white;
    top:32px;
    left:80px;
    position: absolute;
    border-radius: 50%; 
}
/*------------------could2------------------------*/
.cloud2{
    width:130px;
    height:60px;
    /*background:#f5d535;*/
    bottom:351px;
    right:81px;
    position: absolute;  
}
.cloud2 > div:nth-child(1){
     width:129px;
    height:19px;
    background:white;
    top:41px;
    left:0px;
    position: absolute;
    border-radius: 10px; 
}
.cloud2 > div:nth-child(2){
     width:73px;
    height:58px;
    background:white;
    top:1px;
    left:29px;
    position: absolute;
    border-radius: 50%; 
}
.cloud2 > div:nth-child(3){
     width:29px;
    height:29px;
    background:white;
    top:25px;
    left:11px;
    position: absolute;
    border-radius: 50%; 
}
.cloud2 > div:nth-child(4){
     width:40px;
    height:40px;
    background:white;
    top:16px;
    left:80px;
    position: absolute;
    border-radius: 50%; 
}
/*----------------------could3----------------------*/
.cloud3{
    width:77px;
    height:46px;
    /*background:#f5d535;*/
    bottom:325px;
    left:-76px;
    position: absolute;  
}
.cloud3 > div:nth-child(1){
     width:75px;
    height:17px;
    background:white;
    top:28px;
    left:2px;
    position: absolute;
    border-radius: 10px; 
}
.cloud3 > div:nth-child(2){
     width:45px;
    height:41px;
    background:white;
    top:1px;
    left:24px;
    position: absolute;
    border-radius: 50%; 
}
.cloud3 > div:nth-child(3){
     width:25px;
    height:26px;
    background:white;
    top:14px;
    left:9px;
    position: absolute;
    border-radius: 50%; 
}
/*-------------------could4----------------------*/
.cloud4{
    width:77px;
    height:46px;
    /*background:#f5d535;*/
    bottom:243px;
    right:-32px;
    position: absolute;  
}
.cloud4 > div:nth-child(1){
    width:75px;
    height:17px;
    background:white;
    top:28px;
    left:2px;
    position: absolute;
    border-radius: 10px; 
}
.cloud4 > div:nth-child(2){
    width:45px;
    height:41px;
    background:white;
    top:1px;
    left:24px;
    position: absolute;
    border-radius: 50%; 
}
.cloud4 > div:nth-child(3){
    width:25px;
    height:26px;
    background:white;
    top:14px;
    left:9px;
    position: absolute;
    border-radius: 50%; 
}
/*---------------------balloon----------------------*/
.balloon{
    width:123px;
    height:240px;
    /*background:white;*/
    top:-453px;
    right:-80px;
    position: absolute;
}
.balloon > div:nth-child(1){
    width:109px;
    height:128px;
    background:#ffc823;
    top:1px;
    left:0px;
    position: absolute;
    border-radius: 50%; 
}
.balloon > div:nth-child(2){
    width:57px;
    height:58px;
    background:#ffc823;
    top:80px;
    left:26px;
    position: absolute;
    border-radius:11px; 
    transform: rotate(-45deg);
}
.balloon > div:nth-child(3){
    width:60px;
    height:141px;
    background:white;
    top:1px;
    left:25px;
    position: absolute;
    border-radius:50%; 
}
.balloon > div:nth-child(4){
    width:34px;
    height:141px;
    background:#ffc823;
    top:1px;
    left:39px;
    position: absolute;
    border-radius:50%; 
}
.balloon > div:nth-child(5){
    width:25px;
    height:14px;
    background:#fea203;
    top:139px;
    left:43px;
    position: absolute;
    border-radius:5px; 
}
.balloon > div:nth-child(6){
    width:83px;
    height:3px;
    background:#5f3421;
    top:101px;
    left:13px;
    position: absolute;
    border-radius: 5px;
}
.balloon > div:nth-child(7){
    width:83px;
    height:3px;
    background:#5f3421;
    top:139px;
    left:39px;
    position: absolute;
    border-radius: 5px;
    transform: rotate(113deg);
}
.balloon > div:nth-child(8){
    width:83px;
    height:3px;
    background:#5f3421;
    top:139px;
    left:-12px;
    position: absolute;
    border-radius: 5px;
    transform: rotate(-113deg);
}
.balloon > div:nth-child(9){
    width:78px;
    height:3px;
    background:#5f3421;
    top:141px;
    left:26px;
    position: absolute;
    border-radius: 5px;
    transform: rotate(97deg);
}
.balloon > div:nth-child(10){
    width:78px;
    height:3px;
    background:#5f3421;
    top:141px;
    left:7px;
    position: absolute;
    border-radius: 5px;
    transform: rotate(-97deg);
}
.balloon > div:nth-child(11){
    width:36px;
    height:29px;
    background:#874511;
    top:178px;
    left:37px;
    position: absolute;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.balloon > div:nth-child(12){
    width:39px;
    height:9px;
    background:#5f3421;
    top:178px;
    left:35px;
    position: absolute;
    border-radius: 5px;
    
}


/*Downloaded from https://www.codeseek.co/mahsaa/landscape-eEbZWe */
    var car = document.getElementsByClassName("car1");
var car2 = document.getElementsByClassName("car2");
var cloud1 = document.getElementsByClassName("cloud1");
var cloud2 = document.getElementsByClassName("cloud2");
var cloud3 = document.getElementsByClassName("cloud3");
var cloud4 = document.getElementsByClassName("cloud4");
var balloon = document.getElementsByClassName("balloon");

var leftOffset = 0;
function move(){
car[0].style.marginLeft = leftOffset+"px";
 leftOffset +=1;
 if(leftOffset > 600){
  	leftOffset = 0; 
 }
};
setInterval(move,30);

var left= 0;
function move1(){
car2[0].style.marginLeft = left+"px";
left +=1;
 if(left > 420){
  	left = -150; 
 }
};
setInterval(move1,60);

var left2=-150;
function move2(){
cloud1[0].style.marginLeft = left2+"px";
left2 +=1
 if(left2>-63){
    left2 = -63; 
 }
};
 setInterval(move2,150);

 var right=-150;
 function move3(){
 cloud2[0].style.marginRight = right+"px";
 right +=3
  if(right >29){
     right =29; 
  }
};
 setInterval(move3,160);

  var left3=-80;
 function move4(){
 cloud3[0].style.marginLeft = left3+"px";
 left3 +=1
  if(left3 >1){
     left3 =1; 
  }
};
 setInterval(move4,100);

 var right2=-120;
 function move5(){
 cloud4[0].style.marginRight = right2+"px";
 right2 +=2
  if(right2 >29){
     right2 =29; 
  }
};
 setInterval(move5,80);
 var r = Math.floor(Math.random()*600);
  var right3=-50;
 function move6(){
 balloon[0].style.marginRight = right3+"px";
 right3 +=1

  if(right3 >r){
     right3 = r; 
  }
};
 setInterval(move6,30);



Comments