.center
  .left
    .logo
      svg(viewBox="0 0 200 400" width="100" height="100")
        path(d=" M 174.627 77.683 C 173.776 78.815 142.411 133.739 129.968 166.414 C 129.34 168.064 128.78 169.45 128.204 171.119 C 127.727 172.503 127.488 173.714 126.933 175.086 C 126.212 176.871 126.006 177.829 125.667 179.358 C 125.301 181.008 124.477 184.693 124.121 187.63 C 123.856 189.808 123.741 191.662 123.663 193.853 C 123.462 199.472 123.876 204.233 124.636 209.8 C 127.42 230.202 135.691 246.266 147.665 262.895 C 148.73 264.375 149.618 265.639 150.777 267.047 C 152.739 269.432 154.445 271.444 156.857 273.381 C 159.729 275.688 162.496 277.205 165.903 278.596 C 168.996 279.859 171.753 280.586 175.056 281.078 C 178.597 281.605 181.659 281.725 185.216 281.306 C 188.955 280.865 192.024 279.892 195.522 278.517 C 197.728 277.65 199.557 276.802 201.61 275.62 C 204.662 273.863 225.417 262.219 236.258 252.224 C 239.451 249.28 244.212 243.928 244.962 243.452 C 245.712 242.977 264.83 213.834 259.473 198.687 Q 256.513 190.317 211.583 109.026 Q 196.037 82.262 193.522 78.637 C 191.452 75.653 188.937 70.289 183.683 70.278 C 178.429 70.267 175.231 76.89 175.106 76.877 M 236.638 249.594" fill-rule="evenodd" fill="rgb(219,223,255)")
        linearGradient(id="_lgradient_0" x1="93.56120204019503%" y1="13.017241572786997%" x2="89.84577303569424%" y2="99.2065293458878%")
          stop(offset="21%" stop-opacity="1" style="stop-color:rgb(185,193,255)")
          stop(offset="100%" stop-opacity="1" style="stop-color:rgb(133,158,255)")
          stop(offset="100%" stop-opacity="1" style="stop-color:rgb(185,193,255)")
        
        path(d=" M 257.964 96.772 C 256.66 97.325 201.992 129.135 174.849 151.174 C 173.478 152.287 172.299 153.205 170.965 154.361 C 169.858 155.319 169.044 156.248 167.877 157.157 C 166.358 158.34 165.7 159.066 164.64 160.219 C 163.496 161.464 160.937 164.24 159.156 166.603 C 157.836 168.354 156.807 169.901 155.641 171.758 C 152.652 176.52 150.624 180.847 148.491 186.045 C 140.676 205.095 139.782 223.141 141.81 243.533 C 141.99 245.347 142.125 246.886 142.422 248.685 C 142.924 251.732 143.393 254.328 144.509 257.213 C 145.838 260.649 147.472 263.349 149.723 266.26 C 151.767 268.902 153.788 270.914 156.4 272.995 C 159.2 275.226 161.798 276.845 165.078 278.284 C 170.601 280.707 175.792 281.319 181.797 281.467 C 194.524 281.78 204.4 276.078 215.486 270.231 C 227.384 263.956 237.187 257.466 245.557 246.856 C 251.368 239.49 255.506 232.649 258.295 223.53 Q 265.443 200.163 271.169 142.865 Q 274.197 111.464 273.837 107.067 C 273.54 103.447 274.053 97.545 269.512 94.902 C 264.971 92.26 258.884 96.388 258.782 96.315 M 211.637 266.477" fill-rule="evenodd" fill="url(#_lgradient_0)")
       
    .company
      .company-name TradeNinja
      .company-description Stock trading app for everyone
      
    .navigation
      ul
        li
          i.material-icons store
          span Market
        li 
          i.material-icons track_changes
          span Explore
        li 
          i.material-icons loyalty
          span Portfolio
        li 
          i.material-icons forum
          span Message
        li 
          i.material-icons library_books
          span News
        li
          i.material-icons account_box
          span Account
      
    
  .right
    .title Market
    .description Browse stocks that are always available
    
    .row
      .graph
        svg(viewBox="0 0 250 60" width="250" height="90")
          path(d="M 209.328 17.34 C 221.956 17.588 235.264 32.599 250 22.328" fill="none" vector-effect="non-scaling-stroke" stroke-width="2" stroke="rgb(243,243,250)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="3")
          
          linearGradient(id="_lgradient_1" x1="0%" y1="50%" x2="100%" y2="50%")
            stop(offset="0%" stop-opacity="1" style="stop-color:rgb(120,113,255)")
            stop(offset="100%" stop-opacity="1" style="stop-color:rgb(111,234,255)")
          
          path(d=" M 0 43.634 C 5.934 43.634 11.318 51.209 17.462 51.342 C 33.219 51.683 30.603 59.567 39.187 59.868 C 46.963 60.141 50.44 44.192 60.537 43.77 C 69.126 43.77 72.129 52.461 79.739 52.433 C 90.904 52.433 94.93 38.455 106.648 39.78 C 129.082 42.317 124.556 27.606 139.157 27.177 C 153.758 26.747 158.235 44.485 171.96 44.725 C 196.438 45.155 189.782 17.1 208.248 17.1" fill="none" vector-effect="non-scaling-stroke" stroke-width="2" stroke="url(#_lgradient_1)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="3")
          
          path(d="M 206.649 17.218 C 206.649 15.739 207.85 14.538 209.328 14.538 C 210.807 14.538 212.008 15.739 212.008 17.218 C 212.008 18.696 210.807 19.897 209.328 19.897 C 207.85 19.897 206.649 18.696 206.649 17.218 Z" fill="rgb(111,232,255)")
          
          text(transform="matrix(1,0,0,1,195,5)" style="font-family:"Open Sans";font-weight:700;font-size:12px;font-style:normal;fill:#6fe8ff;stroke:none;") +14%
          
          .stock
            .stock-logo.paperpillar
              i.fa.fa-inverse.fa-angle-double-up
            .stock-info
              .stock-name PPRPLR
              .stock-fullname Paperpillar Studio
        
      .graph
        svg(viewBox="0 0 250 60" width="250" height="90")
          path(d="M 209.328 17.34 C 221.956 17.588 235.264 32.599 250 22.328" fill="none" vector-effect="non-scaling-stroke" stroke-width="2" stroke="rgb(243,243,250)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="3")
          
          linearGradient(id="_lgradient_2" x1="0%" y1="50%" x2="100%" y2="50%")
            stop(offset="0%" stop-opacity="1" style="stop-color:rgb(248, 135, 129)")
            stop(offset="100%" stop-opacity="1" style="stop-color:rgb(247, 198, 130)")
          
          path(d=" M 0 43.634 C 5.934 43.634 11.318 51.209 17.462 51.342 C 33.219 51.683 30.603 59.567 39.187 59.868 C 46.963 60.141 50.44 44.192 60.537 43.77 C 69.126 43.77 72.129 52.461 79.739 52.433 C 90.904 52.433 94.93 38.455 106.648 39.78 C 129.082 42.317 124.556 27.606 139.157 27.177 C 153.758 26.747 158.235 44.485 171.96 44.725 C 196.438 45.155 189.782 17.1 208.248 17.1" fill="none" vector-effect="non-scaling-stroke" stroke-width="2" stroke="url(#_lgradient_2)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="3")
          
          path(d="M 206.649 17.218 C 206.649 15.739 207.85 14.538 209.328 14.538 C 210.807 14.538 212.008 15.739 212.008 17.218 C 212.008 18.696 210.807 19.897 209.328 19.897 C 207.85 19.897 206.649 18.696 206.649 17.218 Z" fill="rgb(247, 198, 130)")
          
          text(transform="matrix(1,0,0,1,195,5)" style="font-family:"Open Sans";font-weight:700;font-size:12px;font-style:normal;fill:rgb(247, 198, 130);stroke:none;") +14%
      
        .stock
          .stock-logo.dandruft
            i.fa.fa-inverse.fa-circle-thin
          .stock-info
            .stock-name DDFT
            .stock-fullname Dandruft Craft

    .row.column
        .sub-title Goods
        .asset-category
          .category
            .asset
              .asset-logo
                i.fa.fa-bolt
            .asset-name Energy

          .category
            .asset
              .asset-logo
                i.fa.fa-inbox
            .asset-name Gold

          .category
            .asset
              .asset-logo
                i.fa.fa-clone
            .asset-name Metals

          .category
            .asset
              .asset-logo
                i.fa.fa-pagelines
            .asset-name Grains

          .category
            .asset
              .asset-logo
                i.fa.fa-adjust
            .asset-name Livestock

          .category
            .asset
              .asset-logo
                i.fa.fa-tencent-weibo
            .asset-name Cotton

          .category
            .asset
              .asset-logo
                i.fa.fa-leaf
            .asset-name Corn

          .category
            .asset
              .asset-logo
                i.fa.fa-tint
            .asset-name Oil
            
    .row
      .half
        .sub-title Today Gainers
        
        .stock
          .stock-logo.apple
            i.fa.fa-inverse.fa-apple
          .stock-info
            .stock-name APPL
            .stock-fullname Apple Inc.
          .stock-value +14.5%
        
        .stock
          .stock-logo.facebook
            i.fa.fa-inverse.fa-facebook
          .stock-info
            .stock-name FB
            .stock-fullname Facebook, Inc.
          .stock-value +12.9%
        
        .stock
          .stock-logo.amazon
            i.fa.fa-inverse.fa-amazon
          .stock-info
            .stock-name AMZN
            .stock-fullname Amazon.com, Inc.
          .stock-value +10.2%
        
      .half
        .sub-title Popular this week
        
        .stock
          .stock-logo.twitter
            i.fa.fa-inverse.fa-twitter
          .stock-info
            .stock-name TWTR
            .stock-fullname Twitter Inc.
          .stock-value +14.5%
        
        .stock
          .stock-logo.paypal
            i.fa.fa-inverse.fa-paypal
          .stock-info
            .stock-name PYPL
            .stock-fullname Paypal Holdings Inc.
          .stock-value +12.9%
        
        .stock
          .stock-logo.google
            i.fa.fa-inverse.fa-google
          .stock-info
            .stock-name GOOGL
            .stock-fullname Alphabet Inc.
          .stock-value +10.2%
  
  
  
a(href="https://dribbble.com/shots/3875272-Stock-App-Dashboard" class="inspiration" target="_blank") inspiration  

*
  box-sizing: border-box
  
body
  height: 100vh
  font-family: 'Roboto', sans-serif
  background: linear-gradient(to top right, #7c89d5, #f599a5)
  font-size: 12px

.center
  position: absolute
  display: block
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  width: 80vw
  height: 88vh
  max-width: 800px
  display: flex
  
.inspiration
  position: fixed
  bottom: 0
  right: 0
  padding: 10px
  text-align: center
  text-decoration: none
  font-family: 'Gill Sans', sans-serif
  color: white
  
.left
  flex: 0 0 150px
  width: 150px
  height: 100%
  background-color: white
  color: #848697
  border-radius: 3px 0 0 3px
  
.logo
  position: relative
  top: 10px
  height: 100px
  
.company  
  text-align: center

  .company-name
    font-weight: bold
    color: #333
  
  .company-description
    position: relative
    margin: 10px auto
    width: 100px
    font-size: 10px
  
.navigation
  position: relative
  display: block
  margin-top: 50px
  
  li
    padding: 0px 25px
    margin: 10px 0
    display: flex
    align-items: center
    cursor: pointer
    
    i
      font-size: 20px
    span
      padding-left: 15px
      vertical-align: super
    
    
.right
  flex: 1 1 auto
  background-color: #f6f6fc
  padding: 30px
  border-radius: 0 3px 3px 0
  overflow-x: hidden
  overflow-y: auto
  
  .title
    font-size: 25px
    font-weight: bold
    
  .description
    margin-top: 5px
    margin-bottom: 20px
    color: gray
  
  .row
    display: flex
    margin: 10px 0 40px
    
    &:last-child
      margin: 10px 0 0
  
  .column
    flex-direction: column

  .graph
    display: inline-block
    width: 250px
    height: 150px
    background-color: white
    border-radius: 10px
    box-shadow: 0px 0px 22px -8px #808080
    
    .stock
      margin: 0
      margin-left: 20px
      top: 5px
  
  .graph + .graph
    margin-left: 10px
  
  .asset-category
    display: flex
  
  .category
    flex: 1
    display: flex
    flex-direction: column
    align-items: center
    
  .asset
    position: relative
    display: flex
    flex-direction: row
    margin: 10px 0
  
  .asset-logo
    position: relative
    display: flex
    justify-content: center
    flex: 0
    
  .asset-logo:before
    content: ''
    width: 40px
    height: 40px
    background-color: #fff
    transform: rotate(45deg)
    border-radius: 10px
    
  .asset-logo i
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
  
  .asset-name
    color: gray
    
    
  .sub-title
    margin-bottom: 10px
    color: darkblue
    
  .half
    flex: 1
    
  .stock
    position: relative
    display: flex
    flex-direction: row
    align-items: center
    height: 40px
    padding: 5px 0
    margin: 8px 0
  
  .stock-logo
    position: relative
    display: flex
    justify-content: center
    flex: 0
    margin-right: 10px
    
  .stock-logo:before
    content: ''
    width: 30px
    height: 30px
    background-color: #555
    transform: rotate(45deg)
    border-radius: 7px
    
  .stock-logo i
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
      
  .stock-info
    margin-left: 5px
    flex: 1
    
  .stock-name
    color: darkblue

  .stock-fullname
    color: gray
    
  .stock-value
    flex: 1
    font-weight: bold
    color: gray
    
    
  .stock-logo
    &.apple:before
      background: gray
    &.facebook:before
      background: #3b5998
    &.amazon:before
      background: #ff9b24
    &.twitter:before
      background: #55acee
    &.paypal:before
      background: #003087
    &.google:before
      background: #d62d20
      
    &.paperpillar:before
      background: linear-gradient(to top right, rgb(120,113,255), rgb(111,234,255))
      
    &.dandruft:before
      background: linear-gradient(to top right, rgb(248, 135, 129), rgb(247, 198, 130))

/*
  Inspired by: "Stock App Dashboard"
  By: Ghani Pradita
  Link: https://dribbble.com/shots/3875272-Stock-App-Dashboard
*/