#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