"LCHAT-ADMIN"
Bootstrap 3.3.0 Snippet by nanthagopal

<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 ----------> <!-- fixed navigation bar --> <div class="navbar navbar-fixed-top navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#b-menu-1">--> <a id="menu-toggle" href="#" class="navbar-toggle"><i class="fa fa-bars"></i></a> <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="Index">LiveCamChat</a> </div> <div class="collapse navbar-collapse" id="b-menu-1"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="Index">Home</a></li> <li><a href="#">AboutUs</a></li> <li><a href="#">FAQ's</a></li> </ul> </div> </div> </div> <!-- Navigation Mobile and Tablets--> <div class="visible-xs-* hidden-sm hidden-lg"> <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a> <nav id="sidebar-wrapper"> <ul class="sidebar-nav"> <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-bars"></i></a> <li class="sidebar-brand"> <a href="#top">Start Bootstrap</a> </li> <li> <a href="Index">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#contact">Contact</a> </li> <li> <a href="logout">Logout</a> </li> <hr/> <li> <a href="profile">Profile</a> </li> <li> <a href="credits">Credits</a> </li> <li> <a href="history">History</a> </li> </ul> </nav> </div> <!-- Navigation Mobile and Tablets END-->
/*Style.css*/ Index Panel design -->.col-xs-12 { . height: 40%; } .panel-heading { text-align: center; } .panel-footer { text-align: center; } <!-- Carousel Slider-->.carousel { height: 300px; margin-bottom: 50px; } .carousel-caption { z-index: 10; } .carousel .item { background-color: rgba(0, 0, 0, 0.8); height: 300px; } <!-- Login page design -->body { padding-top: 40px; padding-bottom: 40px; background-color: #eee; } .form-signin { max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-signin-heading,.form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; padding-left: 16px; } .form-signin .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="text"] { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } <!-- Modal dialogbox --> .modal-body { padding: 0px; } .err-dialog { background: #fce7e7; border: 1px solid #b00; color: #b00; padding: 5px; text-align: left; margin-top: 10px; } .error-msg-c { /*background: #fce7e7;*/ color: #b00; padding: 5px; text-align: left; } /*SideBar*/ /*! * Start Bootstrap - Stylish Portfolio Bootstrap Theme (http://startbootstrap.com) * Code licensed under the Apache License v2.0. * For details, see http://www.apache.org/licenses/LICENSE-2.0. */ /* Global Styles */ html, body { width: 100%; height: 100%; } body { font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif; } .text-vertical-center { display: table-cell; text-align: center; vertical-align: middle; } .text-vertical-center h1 { margin: 0; padding: 0; font-size: 4.5em; font-weight: 700; } /* Custom Button Styles */ .btn-dark { border-radius: 0; color: #fff; background-color: rgba(0,0,0,0.4); } .btn-dark:hover, .btn-dark:focus, .btn-dark:active { color: #fff; background-color: rgba(0,0,0,0.7); } .btn-light { border-radius: 0; color: #333; background-color: rgb(255,255,255); } .btn-light:hover, .btn-light:focus, .btn-light:active { color: #333; background-color: rgba(255,255,255,0.8); } /* Custom Horizontal Rule */ hr.small { max-width: 100px; } /* Side Menu */ #sidebar-wrapper { z-index: 1000; position: fixed; right: 0; width: 250px; height: 100%; margin-right: -250px; overflow-y: auto; background: #222; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .sidebar-nav { position: absolute; top: 0; width: 250px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { text-indent: 20px; line-height: 40px; } .sidebar-nav li a { display: block; text-decoration: none; color: #999; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,0.2); } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 55px; font-size: 18px; line-height: 55px; } .sidebar-nav > .sidebar-brand a { color: #999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } #menu-toggle { z-index: 1; position: fixed; top: 0; right: 0; } #sidebar-wrapper.active { right: 250px; width: 250px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .toggle { margin: 5px 5px 0 0; } /* Header */ .header { display: table; position: relative; width: 100%; height: 100%; background: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } /* About */ .about { padding: 50px 0; } /* Services */ .services { padding: 50px 0; } .service-item { margin-bottom: 30px; } /* Callout */ .callout { display: table; width: 100%; height: 400px; color: #fff; background: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } /* Portfolio */ .portfolio { padding: 50px 0; } .portfolio-item { margin-bottom: 30px; } .img-portfolio { margin: 0 auto; } .img-portfolio:hover { opacity: 0.8; } /* Call to Action */ .call-to-action { padding: 50px 0; } .call-to-action .btn { margin: 10px; } /* Map */ .map { height: 500px; } @media(max-width:768px) { .map { height: 75%; } } /* Footer */ footer { padding: 100px 0; } /*Scrollbar.css*/ @CHARSET "UTF-8"; .scrollbar.light::-webkit-scrollbar { width:7px; background-color:rgba(0,0,0,.05); } .scrollbar.light::-webkit-scrollbar:horizontal { height:7px; } .scrollbar.light::-webkit-scrollbar:hover { background-color:rgba(0,0,0,.19); } .scrollbar.light::-webkit-scrollbar-thumb:horizontal, .scrollbar.light::-webkit-scrollbar-thumb:vertical { background:rgba(0,0,0,.5); } .scrollbar.light::-webkit-scrollbar-thumb:horizontal:active, .scrollbar.light::-webkit-scrollbar-thumb:vertical:active { background:rgba(0,0,0,.61); } .basic_richtext::-webkit-scrollbar-thumb:horizontal, .basic_richtext::-webkit-scrollbar:horizontal { height:4px; } .scrollbar.dark::-webkit-scrollbar { width:7px; background-color:#1F1F22; } .scrollbar.dark::-webkit-scrollbar:before { background:red; width:7px; } .scrollbar.dark::-webkit-scrollbar:hover { background-color:rgba(0,0,0,.19); } .scrollbar.dark::-webkit-scrollbar:horizontal { height:7px; } .scrollbar.dark::-webkit-scrollbar-thumb:horizontal, .scrollbar.dark::-webkit-scrollbar-thumb:vertical { background:#323438; } .scrollbar.dark::-webkit-scrollbar-thumb:horizontal:active, .scrollbar.dark::-webkit-scrollbar-thumb:vertical:active { background:rgba(255,255,255,.3); }
// Closes the sidebar menu $("#menu-close").click(function(e) { e.preventDefault(); $("#sidebar-wrapper").toggleClass("active"); }); // Opens the sidebar menu $("#menu-toggle").click(function(e) { e.preventDefault(); $("#sidebar-wrapper").toggleClass("active"); });

Related: See More


Questions / Comments: