"BookMySnapper - NAV"
Bootstrap 3.3.0 Snippet by krishna1217

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"><nav class="navbar navbar-custom"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="#"> <h4 class="textui">BookMySn<span class="glyphicon glyphicon-camera" style="color:#6777DB"></span>pper</h4> </a></div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Location <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Promoted Snappers</li> <div id="menCollection" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"><a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a> <h4><small>Summer dress floral prints</small></h4> <button class="btn btn-primary" type="button">49,99 <i class="fa fa-rupee"></i></button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <!-- End Item --> <div class="item"><a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a> <h4><small>Gold sandals with shiny touch</small></h4> <button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <!-- End Item --> <div class="item"><a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a> <h4><small>Denin jacket stamped</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <!-- End Item --></div> <!-- End Carousel Inner --> <!-- Controls --> <a class="left carousel-control" href="#menCollection" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#menCollection" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a></div> <!-- /.carousel --> <li class="divider"></li> <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Features</li> <li><a href="#">Auto Carousel</a></li> <li class="divider"></li> <li class="dropdown-header">Fonts</li> <li><a href="#">Glyphicon</a></li> <li><a href="#">Google Fonts</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Plus</li> <li><a href="#">Navbar Inverse</a></li> <li><a href="#">Pull Right Elements</a></li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Much more</li> <li><a href="#">Easy to Customize</a></li> <li><a href="#">Calls to action</a></li> <li><a href="#">Custom Fonts</a></li> <li><a href="#">Slide down on Hover</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Event <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Wedding</li> <li><a href="#"> Bengali Wedding </a></li> <li><a href="#"> Bhojpuri Wedding </a></li> <li><a href="#"> Brahmin Wedding </a></li> <li><a href="#"> Bridal Portraits </a></li> <li><a href="#"> Buddhist Wedding </a></li> <li><a href="#"> Candid Wedding </a></li> <li><a href="#"> Catholic Wedding </a></li> <li><a href="#"> Chhattisgarhi Wedding </a></li> <li><a href="#"> Christian Wedding </a></li> <li><a href="#"> Concept Wedding </a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header"></li> <li><a href="#"> Contemporary Wedding </a></li> <li><a href="#"> Couple Portraits </a></li> <li><a href="#"> Destination Wedding </a></li> <li><a href="#"> Engagement </a></li> <li><a href="#"> Gujarati Wedding </a></li> <li><a href="#"> Haryanvi Wedding </a></li> <li><a href="#"> Hindu Wedding </a></li> <li><a href="#"> Indian Wedding </a></li> <li><a href="#"> Jain Wedding </a></li> <li><a href="#"> Kashmiri Wedding </a></li> <li><a href="#"> Maharashtrian Wedding </a></li> <li><a href="#"> Marwadi Wedding </a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header"></li> <li><a href="#"> Muslim Wedding </a></li> <li><a href="#"> North Indian Wedding </a></li> <li><a href="#"> Parsi Wedding </a></li> <li><a href="#"> Pre-wedding Shoots </a></li> <li><a href="#"> Punjabi Wedding </a></li> <li><a href="#"> Rajasthani Wedding </a></li> <li><a href="#"> Reception </a></li> <li><a href="#"> Sikh Wedding </a></li> <li><a href="#"> South Indian Wedding </a></li> <li><a href="#"> Tamil Wedding </a></li> <li><a href="#"> Theme Wedding </a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Wedding Collection</li> <div id="womenCollection" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"><a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a> <h4><small>Summer dress floral prints</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <!-- End Item --> <div class="item"><a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a> <h4><small>Gold sandals with shiny touch</small></h4> <button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <!-- End Item --> <div class="item"><a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a> <h4><small>Denin jacket stamped</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <!-- End Item --></div> <!-- End Carousel Inner --> <!-- Controls --> <a class="left carousel-control" href="#womenCollection" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#womenCollection" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a></div> <!-- /.carousel --> <li class="divider"></li> <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li> </ul> </li> </ul> </li> <li><a href="#">Snapper locator</a></li> <form class="navbar-form navbar-left" role="search"> <div class="form-group"><input type="text" class="form-control" placeholder="Enter location to find a Snapper"> </div> <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> </form> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"></a></a></li> <li class="dropdown"><a href="#nav-collapse4" class="dropdown-toggle" data-toggle="collapse" aria-expanded="false" aria-controls="nav-collapse4" >Login<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><i> <p class="text-center"><a href="#" data-toggle="modal" data-target="#login-modal">User Login</a></p> </i></li> <li class="divider"></li> <li><i> <p class="text-center"><a href="#" data-toggle="modal" data-target="#login-modal">Snapper Login</a></p> </i></li> </ul> </li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About us<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Who we are ?</a></li> <li><a href="#">Who we do ?</a></li> <li><a href="#">Contact us</a></li> <li class="divider"></li> <li><a href="#">Join us</a></li> </ul> </li> <!-- Start of Profile --> <li> <a data-toggle="collapse" href="#nav-collapse4" aria-expanded="false" aria-controls="nav-collapse4">Profile <i class=""></i> </a> </li> <ul class="collapse nav navbar-nav navbar-left nav-collapse slide-down" role="search" id="nav-collapse4"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img class="img-circle" src="https://pbs.twimg.com/profile_images/588909533428322304/Gxuyp46N.jpg" alt="maridlcrmn" width="20" /> Maridlcrmn <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">My profile</a></li> <li><a href="#">Favorited</a></li> <li><a href="#">Settings</a></li> <li class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> </ul> </ul> </div> <!-- /.nav-collapse --> </nav></div> <!-- BEGIN # BOOTSNIP INFO --> <div class="container-fluid"> </div> <!-- END # BOOTSNIP INFO --> <!-- BEGIN # MODAL LOGIN --> <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; border-radius:0px 22px 22px 22px;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header" align="center"><img class="img-circle" id="img_logo" src="https://scontent-sin1-1.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/12193500_1203433986350527_6632076734594190542_n.jpg?oh=729c934414c622bcdce1cd2e7c49addd&oe=56BC327E"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> </div> <!-- Begin # DIV Form --> <div id="div-forms"><!-- Begin # Login Form --> <form id="login-form"> <div class="modal-body"> <div id="div-login-msg"> <div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div> <span id="text-login-msg">Type your username and password.</span></div> <input id="login_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required> <input id="login_password" class="form-control" type="password" placeholder="Password" required> <div class="checkbox"><label> <input type="checkbox"> Remember me </label></div> </div> <div class="modal-footer"> <div> <button type="submit" class="btn btn-primary btn-lg btn-block">Login</button> </div> <div> <button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button> <button id="login_register_btn" type="button" class="btn btn-link">Register</button> </div> </div> </form> <!-- End # Login Form --> <!-- Begin | Lost Password Form --> <form id="lost-form" style="display: none;"> <div class="modal-body"> <div id="div-lost-msg"> <div id="icon-lost-msg" class="glyphicon glyphicon-chevron-right"></div> <span id="text-lost-msg">Type your e-mail.</span></div> <input id="lost_email" class="form-control" type="text" placeholder="E-Mail (type ERROR for error effect)" required> </div> <div class="modal-footer"> <div> <button type="submit" class="btn btn-primary btn-lg btn-block">Send</button> </div> <div> <button id="lost_login_btn" type="button" class="btn btn-link">Log In</button> <button id="lost_register_btn" type="button" class="btn btn-link">Register</button> </div> </div> </form> <!-- End | Lost Password Form --> <!-- Begin | Register Form --> <form id="register-form" style="display: none;"> <div class="modal-body"> <div id="div-register-msg"> <div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div> <span id="text-register-msg">Register an account.</span></div> <input id="register_Firstname" class="form-control" type="text" placeholder="FirstName " required> <input id="register_Lastname" class="form-control" type="text" placeholder="LastName " required> <input id="register_email" class="form-control" type="text" placeholder="E-Mail" required> <input id="register_password" class="form-control" type="password" placeholder="Password" required> <input id="register_password" class="form-control" type="password" placeholder="Password" required> </div> <div class="modal-footer"> <div> <button type="submit" class="btn btn-primary btn-lg btn-block">Register</button> </div> <div> <button id="register_login_btn" type="button" class="btn btn-link">Log In</button> <button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button> </div> </div> </form> <!-- End | Register Form --></div> <!-- End # DIV Form --></div> </div> </div> <!-- END # MODAL LOGIN -->
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; } .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; color: #222; padding: 3px 5px; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; } .mega-dropdown-menu .dropdown-header { font-size: 18px; color: #ff3546; padding: 5px 60px 5px 5px; line-height: 30px; } .carousel-control { width: 30px; height: 30px; top: -35px; } .left.carousel-control { right: 30px; left: inherit; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { font-size: 12px; background-color: #fff; line-height: 30px; text-shadow: none; color: #333; border: 1px solid #ddd; } @import url(http://fonts.googleapis.com/css?family=Roboto); * { font-family: 'Roboto', sans-serif; } #login-modal .modal-dialog { width: 350px; } #login-modal input[type=text],input[type=password] { margin-top: 10px; } #div-login-msg,#div-lost-msg,#div-register-msg { border: 1px solid #dadfe1; height: 30px; line-height: 28px; transition: all ease-in-out 500ms; } #div-login-msg.success,#div-lost-msg.success,#div-register-msg.success { border: 1px solid #68c3a3; background-color: #c8f7c5; } #div-login-msg.error,#div-lost-msg.error,#div-register-msg.error { border: 1px solid #eb575b; background-color: #ffcad1; } #icon-login-msg,#icon-lost-msg,#icon-register-msg { width: 30px; float: left; line-height: 28px; text-align: center; background-color: #dadfe1; margin-right: 5px; transition: all ease-in-out 500ms; } #icon-login-msg.success,#icon-lost-msg.success,#icon-register-msg.success { background-color: #68c3a3 !important; } #icon-login-msg.error,#icon-lost-msg.error,#icon-register-msg.error { background-color: #eb575b !important; } #img_logo { max-height: 100px; max-width: 100px; } /* ######################################### # override the bootstrap configs # ######################################### */ .modal-backdrop.in { filter: alpha(opacity = 50); opacity: .8; } .modal-content { background-color: #ececec; border: 1px solid #bdc3c7; border-radius: 0px; outline: 0; } .modal-header { min-height: 16.43px; padding: 15px 15px 15px 15px; border-bottom: 0px; } .modal-body { position: relative; padding: 5px 15px 5px 15px; } .modal-footer { padding: 15px 15px 15px 15px; text-align: left; border-top: 0px; } .checkbox { margin-bottom: 0px; } .btn { border-radius: 0px; } .btn:focus,.btn:active :focus,.btn.active:focus,.btn.focus,.btn:active .focus,.btn.active.focus { outline: none; } .btn-lg,.btn-group-lg>.btn { border-radius: 0px; } .btn-link { padding: 5px 10px 0px 0px; color: #95a5a6; } .btn-link:hover,.btn-link:focus { color: #2c3e50; text-decoration: none; } .glyphicon { top: 0px; } .form-control { border-radius: 0px; } /* Credits: Code snippet by @maridlcrmn (Follow me on Twitter) Images by Nike.com (http://www.nike.com/us/en_us/) Logo by Sneaker-mission.com (http://www.sneaker-mission.com/) */ .textui { font-family: "Comic Sans MS", cursive, sans-serif; color: #dfeded; border-bottom: none; padding-bottom: 15px; } .textui-li1 { font-family: "Comic Sans MS", cursive, sans-serif; background-color: #c1c1d1; border-bottom: none; } .textui-li2 { font-family: "Comic Sans MS", cursive, sans-serif; background-color: #c1c1d9; border-bottom: none; } .navbar-brand { width: 200px; height: 30px; background: url('') no-repeat center center; background-size: 50px; } .nav-tabs { display: inline-block; border-bottom: none; padding-top: 15px; font-weight: bold; } .nav-tabs>li>a,.nav-tabs>li>a:hover,.nav-tabs>li>a:focus,.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus { border: none; border-radius: 0; } .nav-list { border-bottom: 1px solid #eee; } .nav-list>li { padding: 20px 15px 15px; border-left: 1px solid #eee; } .nav-list>li:last-child { border-right: 1px solid #eee; } .nav-list>li>a:hover { text-decoration: none; } .nav-list>li>a>span { display: block; font-weight: bold; text-transform: uppercase; } .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 20px 15px 15px; text-align: center; width: 100%; } .navbar-custom { background-color: #36a1d6; border-color: #2890c3; background-image: -webkit-gradient(linear, left 0%, left 100%, from(#60b5df), to(#36a1d6) ); background-image: -webkit-linear-gradient(top, #60b5df, 0%, #36a1d6, 100%) ; background-image: -moz-linear-gradient(top, #60b5df 0%, #36a1d6 100%); background-image: linear-gradient(to bottom, #60b5df 0%, #36a1d6 100%); background-repeat: repeat-x; filter: progid : DXImageTransform . Microsoft . gradient(startColorstr = '#ff60b5df', endColorstr = '#ff36a1d6', GradientType = 0); } .navbar-custom .navbar-brand { color: #ffffff; } .navbar-custom .navbar-brand:hover,.navbar-custom .navbar-brand:focus { color: #e6e6e6; background-color: transparent; } .navbar-custom .navbar-text { color: #ffffff; } .navbar-custom .navbar-nav>li:last-child>a { border-right: 1px solid #2890c3; } .navbar-custom .navbar-nav>li>a { color: #ffffff; border-left: 1px solid #2890c3; } .navbar-custom .navbar-nav>li>a:hover,.navbar-custom .navbar-nav>li>a:focus { color: #c0c0c0; background-color: transparent; } .navbar-custom .navbar-nav>.active>a,.navbar-custom .navbar-nav>.active>a:hover,.navbar-custom .navbar-nav>.active>a:focus { color: #c0c0c0; background-color: #2890c3; background-image: -webkit-gradient(linear, left 0%, left 100%, from(#2890c3), to(#45a8d9) ); background-image: -webkit-linear-gradient(top, #2890c3, 0%, #45a8d9, 100%) ; background-image: -moz-linear-gradient(top, #2890c3 0%, #45a8d9 100%); background-image: linear-gradient(to bottom, #2890c3 0%, #45a8d9 100%); background-repeat: repeat-x; filter: progid : DXImageTransform . Microsoft . gradient(startColorstr = '#ff2890c3', endColorstr = '#ff45a8d9', GradientType = 0); } .navbar-custom .navbar-nav>.disabled>a,.navbar-custom .navbar-nav>.disabled>a:hover,.navbar-custom .navbar-nav>.disabled>a:focus { color: #cccccc; background-color: transparent; } .navbar-custom .navbar-toggle { border-color: #dddddd; } .navbar-custom .navbar-toggle:hover,.navbar-custom .navbar-toggle:focus { background-color: #dddddd; } .navbar-custom .navbar-toggle .icon-bar { background-color: #cccccc; } .navbar-custom .navbar-collapse,.navbar-custom .navbar-form { border-color: #278ec1; } .navbar-custom .navbar-nav>.dropdown>a:hover .caret,.navbar-custom .navbar-nav>.dropdown>a:focus .caret { border-top-color: #c0c0c0; border-bottom-color: #c0c0c0; } .navbar-custom .navbar-nav>.open>a,.navbar-custom .navbar-nav>.open>a:hover,.navbar-custom .navbar-nav>.open>a:focus { background-color: #2890c3; color: #c0c0c0; } .navbar-custom .navbar-nav>.open>a .caret,.navbar-custom .navbar-nav>.open>a:hover .caret,.navbar-custom .navbar-nav>.open>a:focus .caret { border-top-color: #c0c0c0; border-bottom-color: #c0c0c0; } .navbar-custom .navbar-nav>.dropdown>a .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; } @media ( max-width : 767) { .navbar-custom .navbar-nav .open .dropdown-menu>li>a { color: #ffffff; } .navbar-custom .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .open .dropdown-menu>li>a:focus { color: #c0c0c0; background-color: transparent; } .navbar-custom .navbar-nav .open .dropdown-menu>.active>a,.navbar-custom .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-custom .navbar-nav .open .dropdown-menu>.active>a:focus { color: #c0c0c0; background-color: #2890c3; } .navbar-custom .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-custom .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-custom .navbar-nav .open .dropdown-menu>.disabled>a:focus { color: #cccccc; background-color: transparent; } } .navbar-custom .navbar-link { color: #ffffff; } .navbar-custom .navbar-link:hover { color: #c0c0c0; } /* */ body { padding-top: 2px; } .panel-login { border-color: #ccc; -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); } .panel-login>.panel-heading { color: #00415d; background-color: #fff; border-color: #fff; text-align:center; } .panel-login>.panel-heading a{ text-decoration: none; color: #666; font-weight: bold; font-size: 15px; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; } .panel-login>.panel-heading a.active{ color: #029f5b; font-size: 18px; } .panel-login>.panel-heading hr{ margin-top: 10px; margin-bottom: 0px; clear: both; border: 0; height: 1px; background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0)); background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0)); background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0)); } .panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] { height: 45px; border: 1px solid #ddd; font-size: 16px; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; } .panel-login input:hover, .panel-login input:focus { outline:none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-color: #ccc; } .btn-login { background-color: #59B2E0; outline: none; color: #fff; font-size: 14px; height: auto; font-weight: normal; padding: 14px 0; text-transform: uppercase; border-color: #59B2E6; } .btn-login:hover, .btn-login:focus { color: #fff; background-color: #53A3CD; border-color: #53A3CD; } .forgot-password { text-decoration: underline; color: #888; } .forgot-password:hover, .forgot-password:focus { text-decoration: underline; color: #666; } .btn-register { background-color: #1CB94E; outline: none; color: #fff; font-size: 14px; height: auto; font-weight: normal; padding: 14px 0; text-transform: uppercase; border-color: #1CB94A; } .btn-register:hover, .btn-register:focus { color: #fff; background-color: #1CA347; border-color: #1CA347; } html, body { /*css for full size background image http://p1.pichost.me/i/66/1910869.jpg */ background: url() no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; background-color: #060; color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.5); } /* Extra markup and styles for table-esque vertical and horizontal centering */ .site-wrapper { display: table; width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); box-shadow: inset 0 0 100px rgba(0,0,0,.5); } .site-wrapper-inner { display: table-cell; vertical-align: top; } .cover-container { margin-right: auto; margin-left: auto; }
$(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400"); $(this).toggleClass('open'); } ); }); /* ##################################################################### # # Project : Modal login version # ##################################################################### */ $(function() { var $formLogin = $('#login-form'); var $formLost = $('#lost-form'); var $formRegister = $('#register-form'); var $divForms = $('#div-forms'); var $modalAnimateTime = 300; var $msgAnimateTime = 150; var $msgShowTime = 2000; $("form").submit(function () { switch(this.id) { case "login-form": var $lg_username=$('#login_username').val(); var $lg_password=$('#login_password').val(); if ($lg_username == "ERROR") { msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Login error"); } else { msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Login OK"); } return false; break; case "lost-form": var $ls_email=$('#lost_email').val(); if ($ls_email == "ERROR") { msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "error", "glyphicon-remove", "Send error"); } else { msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK"); } return false; break; case "register-form": var $rg_username=$('#register_username').val(); var $rg_email=$('#register_email').val(); var $rg_password=$('#register_password').val(); if ($rg_username == "ERROR") { msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "error", "glyphicon-remove", "Register error"); } else { msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "success", "glyphicon-ok", "Register OK"); } return false; break; default: return false; } return false; }); $('#login_register_btn').click( function () { modalAnimate($formLogin, $formRegister) }); $('#register_login_btn').click( function () { modalAnimate($formRegister, $formLogin); }); $('#login_lost_btn').click( function () { modalAnimate($formLogin, $formLost); }); $('#lost_login_btn').click( function () { modalAnimate($formLost, $formLogin); }); $('#lost_register_btn').click( function () { modalAnimate($formLost, $formRegister); }); $('#register_lost_btn').click( function () { modalAnimate($formRegister, $formLost); }); function modalAnimate ($oldForm, $newForm) { var $oldH = $oldForm.height(); var $newH = $newForm.height(); $divForms.css("height",$oldH); $oldForm.fadeToggle($modalAnimateTime, function(){ $divForms.animate({height: $newH}, $modalAnimateTime, function(){ $newForm.fadeToggle($modalAnimateTime); }); }); } function msgFade ($msgId, $msgText) { $msgId.fadeOut($msgAnimateTime, function() { $(this).text($msgText).fadeIn($msgAnimateTime); }); } function msgChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $msgText) { var $msgOld = $divTag.text(); msgFade($textTag, $msgText); $divTag.addClass($divClass); $iconTag.removeClass("glyphicon-chevron-right"); $iconTag.addClass($iconClass + " " + $divClass); setTimeout(function() { msgFade($textTag, $msgOld); $divTag.removeClass($divClass); $iconTag.addClass("glyphicon-chevron-right"); $iconTag.removeClass($iconClass + " " + $divClass); }, $msgShowTime); } });

Related: See More


Questions / Comments: