Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .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:&quot;Open Sans&quot;;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:&quot;Open Sans&quot;;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  
              
            
!

CSS

              
                *
  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))

              
            
!

JS

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

              
            
!
999px

Console