<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");
});
