Good Night!

good-night.markdown

Good Night!

A Pen by Ramesh M on CodePen.

License.

index.pug

.container
  .sky

    -for(var a=0;a<5;a++)
      .bigStar
        .v
        .h
    .stars
      -for(var a=0;a<10;a++)
        .star
    .cloud1
      .bubble
      .bubble
    .cloud2
      .bubble
      .bubble
      .bubble
    .moon
      .cover
  .building
    .top
      .topmost
        .shadow
    .body
      .windows
        -for(var a=0;a<5;a++)
          .window
            .frame
              .bar
            .ledge
              .shadow
      .door
        .glass
        .glass
    .bottom
    .ground
      -for(var a=0;a<6;a++)
        .bush
      .trees
        -for(var a=0;a<2;a++)
          .tree
            .main
            .stem
              .branch
              .branch
      .postBox
        .box
          .inner
        .support

script.js

// Inspired from: https://dribbble.com/shots/2758603-Another-Late-Night

style.scss

* {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
}

$background: #0a2d4b;
$building: #a0daff;
$moon: #fff;
$clouds: #b4e1ff;
$bush: #b3a2cc;
$darkBush: #7658a2;

body {
  background-color: $background;
}
.container {
  // background-color:white;
  top:130px;
  width: 500px;
  height: 500px;
}
.building {
  background-color: $building;
  width: 250px;
  height: 300px;

  .bottom {
    width: 110%;
    height: 20px;
    background-color: white;
    left: -12px;
    top: 100%;
    z-index:1;
  }
  .top {
    width: 110%;
    height: 18px;
    background-color: white;
    top: -110%;
    left: -13px;

    .topmost {
      width: 110%;
      background-color: white;
      top: -100%;
      left: -14px;
      height: 10px;
      
      .shadow{
        background-color:#a0daff;
        width:250px;
        height:7px;
        top:10px;
        
      }
    }
  }
  .body {
    width: 90%;
    height: 90%;

    .door{
      background-color:#23425e;
      width:60px;
      height:130px;
      z-index:1;
      top:150px;
      left:-150px;
      border-radius:5px;
      border:7px solid #fff;
      
      .glass{
        width:70%;
        height:40px;
        top:-60px;
        background-color:#ffed97;
        border:3px solid #fff;
        border-radius:4px;
      }
      
      .glass:nth-child(1){
        height:30px;
      }
      
      .glass:nth-child(2){
        top:50px;
      }
    }
    
    .windows {
      width: 100%;
      height: 300px;
      // background-color: red;
      top:-170px;
     
      .window{
        width:60px;
        height:100px;
        background-color:#fff;
        left:-65%;
        border-radius:5px;
        
        .ledge{
          width:105%;
          height:15px;
          background-color:$darkBush;
          left:-1.6px;
          top:100%;
          border-radius:3px;
          
          .shadow{
            width:70%;
            height:7px;
            background-color:#23425e;
            top:17px;
            
          }
        }
        
        .frame{
          width:70%;
          height:70%;
          background-color:#23425e;
          top:-10px;
          border-radius:3px;
          .bar{
            width:100%;
            height:10px;
            background-color:#fff;
          }
        }
      }
      
      .window:nth-child(2){
        left:0px;
      }
      
      .window:nth-child(3){
        left:70%;
      }
      .window:nth-child(4){
        left:70%;
        top:90%;
      }
      .window:nth-child(5){
        left:5%;
        top:90%;
      }
    
      }
    }
}
 
.ground{
    width:300%;
    height:100px;
    top:75%;
    left:-200px;
    // background-color:red;
    z-index:1;
  
  
  .postBox{
    width:70px;
    height:70px;
    top:30px;
    // background-color:white;
    left:-420px;
    z-index:1;
    
    .support{
      width:10px;
      border-radius:4px 4px 0px 0px;
      background-color:white;
    }
    
    .box{
      width:50px;
      height:30px;
      border-radius:5px;
      background-color:$darkBush;
      top:-40px;
      z-index:1;
      
      .inner{
        width:20px;
        left:-75%;
        background-color:$building;
      }
    }
  }

  .trees{
    width:70%;
    height:70px;
    // background-color:red;
    left:-100px;
    
    .tree{
      left:-80%;
       
      .stem{
        background-color:$background;
        width:10px;
        height:140px;
        top:-40px;
        border-radius:10px;
        
        .branch{
          width:7px;
          height:30px;
          border-radius:5px;
          transform:rotate(45deg);
          background-color:$background;
          top:-100px;
          left:10px;
        }
        .branch:nth-child(2){
          transform:rotate(-45deg);
          left:-15px;
        }
      }
      .main{
        width:70px;
        height:130px;
        border-radius:30px;
        top:-170px;
        background-color:$building;
      }
    }
    
    .tree:nth-child(2){
      left:80%;
      .main{
        background-color:$darkBush;
      }
    }
  }
  
  .bush{
    width:70px;
    height:40px;
    border-top-left-radius:140px;
    border-top-right-radius:140px;
    left:-96%;
    top:60%;
    background-color:#b3a2cc;
  }
  
  .bush:nth-child(2){
    left:-510px;
    width:120px;
    height:60px;
    top:40px;
    z-index:1;
  }
  
  .bush:nth-child(3){
    left:320px;
    width:120px;
    height:60px;
    background-color:#23425e;
    top:40px;
    z-index:1;
  }
  .bush:nth-child(4){
    left:520px;
    width:50px;
    height:30px;
    background-color:#23425e;
    top:70px;
    z-index:1;
  }
  
}
.sky{
  width:100%;
  height:300px;
  // background-color:white;
  z-index:-1;
  top:-500px;

  .stars{
    width:100%;
    height:200px;
    
    // background-color:white;
    
    .star{
      width:10px;
      height:10px;
      background-color:white;
      border-radius:50%;
      left:-300px;
      top:-200px;
     
    }
    .star:nth-child(1){
      left:-380px;
      top:200px;
    }
  
    .star:nth-child(2){
      width:6px;
      height:6px;
      left:-300px;
      top:300px;
    }
    
    .star:nth-child(3){
      left:380px;
      top:-270px;
      background-color:#a1d9ff;
      
    }
    
    .star:nth-child(4){
      left:500px;
      background-color:#a1d9ff;
      top:100px;
    }
    
    .star:nth-child(5){
      width:6px;
      height:6px;
      left:500px;
      background-color:#a1d9ff;
      top:300px;
    }
  }
  
  .moon{
    width:80px;
    height:80px;
    background-color:white;
    border-radius:50%;
    left:400px;
    top:-90px;
    transform:rotate(-30deg);

    .cover{
      width:90%;
      height:90%;
      background-color:$background;
      border-radius:50%;
      left:30px;
    }
  }
  
  .cloud2{
    width:150px;
    height:70px;
    top:60px;
    left:-240px;
   
     .bubble{
      width:70px;
      height:40px;
      background-color:#b4e1ff;
      border-top-left-radius:140px;
      border-top-right-radius:140px;
    }
    
    .bubble:nth-child(2){
      left:70px;
      width:50px;
      height:30px;
      top:10px;
    }
    .bubble:nth-child(3){
      left:-70px;
      width:70px;
      height:50px;
      top:-10px;
    }
  }
  
  .cloud1{
    width:150px;
    height:70px;
    top:-100px;
    left:30px;
    
    .bubble{
      width:70px;
      height:40px;
      background-color:#b4e1ff;
      border-top-left-radius:140px;
      border-top-right-radius:140px;
    }
    
    .bubble:nth-child(2){
      left:70px;
      width:50px;
      height:30px;
      top:10px;
    }
  }
  
  .bigStar{
    width:20px;
    height:20px;
    transform:scale(0.7);
    animation:pulse 1000ms infinite alternate ease-in-out;
    left:-150px;
    top:-100px;
    .v{
      width:6px;
      border-radius:10px;
      background-color:#fff;
    }
    .h{
      
      height:6px;
      border-radius:30px;
      background-color:#fff;
    }
  }
  
  .bigStar:nth-child(2){
    width:18px;
    height:18px;
    left:70px;
    top:30px;
  }
  .bigStar:nth-child(5){
    width:18px;
    height:18px;
    left:150px;
    top:-250px;
    
    .h{
      background-color:#a0dafe;
    }
    .v{
      background-color:#a0dafe;
    }
  }
  
  .bigStar:nth-child(3){
    width:16px;
    height:16px;
    left:400px;
    top:230px;
  }
  
  .bigStar:nth-child(4){
    width:16px;
    height:16px;
    left:-240px;
    top:-45px;
    
    .h{
      background-color:#a0dafe;
    }
    .v{
      background-color:#a0dafe;
    }
  }
  
 
  
}

@keyframes pulse{
  0%{
     transform:scale(1);
  }
  100%{
     transform:scale(1.2);
  }
}