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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                | <!--[if IE 8]><div class="ie8 oldie"><![endif]-->
| <!--[if IE 9]><div class="ie9 oldie"><![endif]-->

.branding-header

  .navbar.navbar-default.global-menu
  
    .container-fluid
    
        h1.talent-logo Talent Impact
      
        ul.nav.navbar-nav.navbar-right
        
          li
            a(href='#') John Smith - SmithCo, Inc.
          
                
          li
            a(href='#')
              i.fa.fa-sign-out
              | 
              | Sign Out
      
    
.app-menu(data-spy="affix", data-offset-top="42")

  .container-fluid

    .row

      .col-xs-6.col-md-4

        h2.talent-tagline.mobilize Mobilize
        h3.app-title
          a(href='#') Authorization



      .navbar-content.col-xs-6.col-md-8

        .navbar-form.navbar-right

          .form-group
            .btn-group
              button.btn.btn-primary.btn-sm.dropdown-toggle(data-toggle="dropdown")
                i.fa.fa-user
                |  
                span.caret 
              ul.dropdown-menu(role='menu')
                li
                  a(href='#') User Action
                li
                  a(href='#') Another user action
                li
                  a(href='#') Something else here
                li.divider
                li
                  a(href='#') Separated user link

        

        


.body.container-fluid

  .row
  
    .col-xs-12.col-md-3.sidebar
    
      ul.nav.nav-pills.nav-stacked
        li.active 
          a.row(href="#one", data-toggle="pill") 
            i.fa.fa-home.col-xs-2.col-md-3
            .col-xs-10.col-md-9 Role Management
        li 
          a.row(href="#two", data-toggle="pill") 
            i.fa.fa-users.col-xs-2.col-md-3
            .col-xs-10.col-md-9 Product Features
        li 
          a.show-form-page.row(href="#three", data-toggle="pill") 
            i.fa.fa-user-md.col-xs-2.col-md-3
            .col-xs-10.col-md-9 Feature Security
        li 
          a.row(href="#four", data-toggle="pill") 
            i.fa.fa-laptop.col-xs-2.col-md-3
            .col-xs-10.col-md-9 Release Manager
        li 
          a.row(href="#five", data-toggle="pill") 
            i.fa.fa-puzzle-piece.col-xs-2.col-md-3
            .col-xs-10.col-md-9 Content Management
          
      
        
          
    .col-xs-12.col-md-9.guts
        
      .tab-content
    
        #one.tab-pane.active

          h2 
            i.fa.fa-home 
            | 
            | Role Management
          
          .row
          
            .col-xs-12.col-md-6

              h3 Sub Heading 1

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 

            .col-xs-12.col-md-6

              h3 Sub Heading 2

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque.
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
                

        #two.tab-pane

          h2 
            i.fa.fa-users 
            | 
            | Product Features
          
          .row
          
            .col-xs-12.col-md-6

              h3 Sub Heading 1

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 

            .col-xs-12.col-md-6

              h3 Sub Heading 2

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque.
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 



        #three.tab-pane

          h2 
            i.fa.fa-user-md 
            | 
            | Feature Security
            
          .row
          
            .col-xs-9.col-md-10
            
              h3 
                | Suzzy Smith 
                small Sales Consultant (Sales)

              h4 Work Dimensions

              p Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            
            .col-xs-3.col-md-2
            
              img.img-thumbnail(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/empl1.jpg", title="Employee Name")
          
          .well
          
            h4 Job Responsibilities

            .row

              .col-xs-12.col-md-4

                h5.well-heading Job Description

                p Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.

              .col-xs-12.col-md-4

                h5.well-heading Skills

                p Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

              .col-xs-12.col-md-4

                h5.well-heading Competencies

                p Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
              
              
          
            
              


        #four.tab-pane

          h2 
            i.fa.fa-laptop 
            | 
            | Release Manager
          
          .row
          
            .col-xs-12.col-md-4

              h3 Sub Heading 1

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 

            .col-xs-12.col-md-4

              h3 Sub Heading 2

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque.
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
              
            .col-xs-12.col-md-4

              h3 Sub Heading 3

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque.
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
              

        #five.tab-pane

          h2 
            i.fa.fa-puzzle-piece 
            | 
            | Content Management

          h3 Lorem ipsum dolor sit amet

          table.table.table-striped.table-bordered
            thead
              tr
                th Table header 1
                th Table header 2
                th Table header 3
                th Table header 4
                th Table header 5
                th Table header 6
                th Table header 7
                th Table header 8
            tbody
              tr
                td Table value 1
                td Table value 2
                td Table value 3
                td Table value 4
                td Table value 5
                td Table value 6
                td Table value 7
                td Table value 8
              tr
                td Table value 9
                td Table value 10
                td Table value 11
                td Table value 12
                td Table value 13
                td Table value 14
                td Table value 15
                td Table value 16
              tr
                td Table value 17
                td Table value 18
                td Table value 19
                td Table value 20
                td Table value 21
                td Table value 22
                td Table value 23
                td Table value 24
              tr
                td Table value 25
                td Table value 26
                td Table value 27
                td Table value 28
                td Table value 29
                td Table value 30
                td Table value 31
                td Table value 32
              tr
                td Table value 33
                td Table value 34
                td Table value 35
                td Table value 36
                td Table value 37
                td Table value 38
                td Table value 39
                td Table value 40
              tr
                td Table value 1
                td Table value 2
                td Table value 3
                td Table value 4
                td Table value 5
                td Table value 6
                td Table value 7
                td Table value 8
              tr
                td Table value 9
                td Table value 10
                td Table value 11
                td Table value 12
                td Table value 13
                td Table value 14
                td Table value 15
                td Table value 16
              tr
                td Table value 17
                td Table value 18
                td Table value 19
                td Table value 20
                td Table value 21
                td Table value 22
                td Table value 23
                td Table value 24
              tr
                td Table value 25
                td Table value 26
                td Table value 27
                td Table value 28
                td Table value 29
                td Table value 30
                td Table value 31
                td Table value 32
              tr
                td Table value 33
                td Table value 34
                td Table value 35
                td Table value 36
                td Table value 37
                td Table value 38
                td Table value 39
                td Table value 40
                
      
            
      .sidebar-collapse
      
        a.sidebar-collapse-control(href="#", title="Collapse / Expand Menu")
          span.fa-stack
            i.fa.fa-stop.fa-stack-2x
            i.fa.fa-compress.fa-stack-1x.fa-inverse
      
 
.footer.container-fluid

  
      
  .row.corporate
  
    .col-xs-12.col-md-3
    
      .mercer-logo Mercer
      
    .col-xs-12.col-md-7
      
      .content
        p &copy; 2002-2014 Mercer LLC, All Rights Reserved. Need help? 1-800-866-7474 Sunday 6:30pm - Friday 8pm EST
        
    .col-xs-12.col-md-2
        
      .social
        ul
          li.facebook
            a(href="#")
              i.fa.fa-facebook
          li.twitter
            a(href="#")
              i.fa.fa-twitter
          li.linkedin
            a(href="#")
              i.fa.fa-linkedin
          li.google-plus
            a(href="#")
              i.fa.fa-google-plus

      
      
| <!--[if lte IE 9]></div><![endif]-->
              
            
!

CSS

              
                @import "compass/css3";


//---------------
// App vars

$clr-primary: $clr-md-mobilize;
$clr-primary-dark: $clr-dk-mobilize;
$clr-primary-bright: $clr-brt-mobilize;
$clr-primary-light: $clr-lt-mobilize;

$clr-background: $clr-white;
$clr-sidebar-background: $clr-brt-gray;
$clr-footer-background: $clr-md-gray;

$clr-text: $clr-md-gray;
$clr-text-dark: $clr-dk-gray;
$clr-text-bright: $clr-brt-gray;
$clr-text-light: $clr-lt-gray;

$clr-alert: $clr-md-assess;



//---------------
// App specific styles

@include body-colors($clr-ph-lt-gray, $clr-text);
@include heading-colors($clr-primary, $clr-text-bright);
@include content-body-colors($clr-sidebar-background, $clr-primary);
@include sidebar-colors($clr-sidebar-background, $clr-background, $clr-primary);
@include guts-colors($clr-background, $clr-text-bright, $clr-primary);
@include footer-colors($clr-footer-background, $clr-text-light);

.btn-default {
  @include button-colors($clr-ph-lt-gray);
}

.btn-primary {
  @include button-colors($clr-primary);
}

.btn-success {
  @include button-colors(adjust-hue($clr-green-bright, -13));
}

.btn-info {
  @include button-colors(lighten($clr-brt-mobilize, 5));
}

.btn-warning {
  @include button-colors($clr-gold);
}

              
            
!

JS

              
                
              
            
!
999px

Console