#particles-js
  nav.navbar.navbar-default.navbar-inverse(role='navigation')
    .container-fluid
      .navbar-header
        button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
          span.sr-only navigation
          span.icon-bar
          span.icon-bar
          span.icon-bar
        a.navbar-brand(href='#') Site
      // Collect the nav links, forms, and other content for toggling
      #bs-example-navbar-collapse-1.collapse.navbar-collapse
        ul.nav.navbar-nav
          li.active
            a(href='#') Link
          li
            a(href='#') Link
          li.dropdown
            a.dropdown-toggle(href='#', data-toggle='dropdown')
              | Dropdown 
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Link
              li
                a(href='#') Link
              li
                a(href='#') Link
              li.divider
              li
                a(href='#') Link
              li.divider
              li
                a(href='#') Link
        form.navbar-form.navbar-left(role='search')
          .form-group
            input.form-control(type='text', placeholder='Search')
          button.btn.btn-default(type='submit') Submit
        ul.nav.navbar-nav.navbar-right
          li
            p.navbar-text Already have an account?
          li.dropdown
            a.dropdown-toggle(href='#', data-toggle='dropdown')
              b Login
              span.caret
            ul#login-dp.dropdown-menu
              li
                .row
                  .col-md-12
                    | Login via
                    .social-buttons
                      a.btn.btn-fb(href='#')
                        i.fa.fa-facebook
                        |  Facebook
                      a.btn.btn-tw(href='#')
                        i.fa.fa-twitter
                        |  Twitter
                    | or
                    form#login-nav.form(role='form', method='post', action='login', accept-charset='UTF-8')
                      .form-group
                        label.sr-only(for='exampleInputEmail2') Email address
                        input#exampleInputEmail2.form-control(type='email', placeholder='Email address', required='')
                      .form-group
                        label.sr-only(for='exampleInputPassword2') Password
                        input#exampleInputPassword2.form-control(type='password', placeholder='Password', required='')
                        .help-block.text-right
                          a(href='') Forget the password ?
                      .form-group
                        button.btn.btn-primary.btn-block(type='submit') Sign in
                      .checkbox
                        label
                          input(type='checkbox')
                          |  keep me logged-in
                  .bottom.text-center
                    | New here ? 
                    a(href='#')
                      b Join Us
View Compiled
html,
body
    height 100%
    margin 0px
    padding 0px

body
    background linear-gradient(145deg, #fff, #767676)
    background-size 400% 400%
    -webkit-animation AnimationName 3s ease infinite
    -moz-animation AnimationName 3s ease infinite
    animation AnimationName 3s ease infinite

.navbar
    border-radius 0

.form-control
    border-radius 0

#login-dp
    min-width 250px
    padding 14px 14px 0
    overflow hidden
    background-color rgba(255,255,255,0.8)
    .help-block
        font-size 12px
    .bottom
        background-color rgba(255,255,255,0.8)
        border-top 1px solid #ddd
        clear both
        padding 14px
    .social-buttons
        margin 12px 0
        a
            width 49%
    .form-group
        margin-bottom 10px

.btn-fb
    color #fff
    background-color #3b5998
    &:hover
        color #fff
        background-color #496ebc

.btn-tw
    color #fff
    background-color #55acee
    &:hover
        color #fff
        background-color #59b5fa

@media (max-width: 768px)
    #login-dp
        background-color inherit
        color #fff
        .bottom
            background-color inherit
            border-top 0 none

#particles-js
    width 100%
    height 100%
    margin-bottom 0

::-webkit-scrollbar
    z-index 30
    width 5px
    height 0
    y-index hidden

::-webkit-scrollbar-track
    background-color #111

::-webkit-scrollbar-thumb
    background-color #2b2e33
    &:hover
        background-color transparent
        
@keyframes AnimationName
  0%
    background-position: 0% 50%
  50%
    background-position: 100% 50%
  100%
    background-position: 0% 50%
@keyframes AnimationName
  0%
    background-position: 0% 50%
  50%
    background-position: 100% 50%
  100%
    background-position: 0% 50%
@keyframes AnimationName
  0%
    background-position: 0% 50%
  50%
    background-position: 100% 50%
  100%
    background-position: 0% 50%
View Compiled
particlesJS 'particles-js',
  'particles':
    'number':
      'value': 100
      'density':
        'enable': true
        'value_area': 1000
    'color': 'value': [
      '#111111'
      '#222222'
    ]
    'shape':
      'type': 'circle'
      'stroke':
        'width': 0
        'color': '#fff'
      'polygon': 'nb_sides': 5
    'opacity':
      'value': 0.6
      'random': false
      'anim':
        'enable': false
        'speed': 1
        'opacity_min': 0.1
        'sync': false
    'size':
      'value': 2
      'random': true
      'anim':
        'enable': false
        'speed': 40
        'size_min': 0.1
        'sync': false
    'line_linked':
      'enable': true
      'distance': 80
      'color': '#111'
      'opacity': 0.9
      'width': 1
  'interactivity':
    'detect_on': 'canvas'
    'events':
      'onhover':
        'enable': true
        'mode': 'grab'
      'onclick': 'enable': false
      'resize': true
    'modes':
      'grab':
        'distance': 240
        'line_linked': 'opacity': 1
      'bubble':
        'distance': 600
        'size': 80
        'duration': 8
        'opacity': 6
        'speed': 3
      'repulse':
        'distance': 300
        'duration': 0.4
      'push': 'particles_nb': 2
      'remove': 'particles_nb': 4
  'retina_detect': true
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
  3. https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js