<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" align="right">
<div class="row" align="right">
<div class="col-lg-5 col-md-5 col-sm-10 col-xs-20>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-9 bhoechie-tab-container">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bhoechie-tab-menu">
<div class="list-group">
<a href="#" class="list-group-item active text-center">
<h4 class="glyphicon glyphicon-plus"></h4><br/>Add Employee
</a>
<a href="#" class="list-group-item text-center">
<h4 class="glyphicon glyphicon-heart"></h4><br/>My Fav
</a>
<a href="#" class="list-group-item text-center">
<h4 class="glyphicon glyphicon-camera"></h4><br/>Camera
</a>
<a href="#" class="list-group-item text-center">
<h4 class="glyphicon glyphicon-cutlery"></h4><br/>Restaurant
</a>
<a href="#" class="list-group-item text-center">
<h4 class="glyphicon glyphicon-user"></h4><br/>Employees
</a>
</div>
</div>
<div class="col-xs-4 col-md-8 bhoechie-tab">
<div class="bhoechie-tab-content active">
<center>
<form role="form" class="form-inline go-right" style="color: Green;background-color:#FAFAFF;border-radius:0px 22px 22px 22px;">
<h2>Profile</h2>
<p>Please update your profile for more security.</p>
<div class="form-group">
<input id="Firstname" name="Firstname" type="text" class="form-control" required>
<label for="Firstname">First Name <span class="glyphicon glyphicon-user"> </span></label>
</div>
<div class="form-group">
<input id="Lastname" name="Lastname" type="text" class="form-control" required>
<label for="Lastname">Last Name <span class="glyphicon glyphicon-user"> </label>
</div>
<div class="form-group">
<input id="Middlename" name="Middlename" type="text" class="form-control" placeholder="Middle Name">
<label for="Middlename">Middle Name <span class="glyphicon glyphicon-user"> </label>
</div>
<br>
<br>
<div class="form-group">
<input id="phone" name="phone" type="tel" class="form-control" required>
<label for="fphone">Primary Phone <span class="glyphicon glyphicon-phone"></label>
</div>
<div class="form-group">
<input id="password" name="phone" type="tel" class="form-control" placeholder="secondary phone">
<label for="sphone">Secondary Phone <span class="glyphicon glyphicon-phone"></label>
</div>
<br><br>
<div class="form-group">
<select class="form-control">
<option id="Male" Value="M" style="color:red" selected>Male</option>
<option id="FeMale" Value="FM" style="color:green">Female</option>
<option id="NotInterested" Value="NI" style="color:blue">Not interested</option>
</select>
</div>
<div class="form-group">
<input id="date" name="date" type="date" class="form-control">
<label for="date">DOB<span class="glyphicon glyphicon-calendar"></label>
</div>
<br><br>
<div class="form-group">
<textarea id="message" name="phone" class="form-control" style="width:400px;height:100px" placeholder="Short Description" ></textarea>
<label for="message">Short Description <span class="glyphicon glyphicon-align-justify"></label>
</div>
<br><br>
<div class="form-group">
<input id="Email1" name="phone" class="form-control" style="width:400px;" placeholder="Registered email" ></textarea>
<label for="Email1">Registered email <span class="glyphicon glyphicon-align-envelope"></label>
</div>
<br><br>
<div class="form-group">
<input id="Email2" name="phone" class="form-control" style="width:400px;" placeholder="Alternate email" ></textarea>
<label for="Email2">Alternate email <span class="glyphicon glyphicon-align-envelope"></label>
</div>
<br><br>
<div class="form-group">
<input id="Vweb" name="phone" class="form-control" style="width:400px;" placeholder="Website" ></textarea>
<label for="Vweb">WebSite <span class="glyphicon glyphicon-align-envelope"></label>
</div>
<br>
<br>
<p1>Address</p1>
<br>
<div class="form-group">
<input id="Address" name="Address" type="tel" class="form-control" required>
<label for="Address">Flat NO/House No</label>
</div>
<div class="form-group">
<input id="LandMark" name="LandMark" type="text" class="form-control" placeHolder="Land Mark">
<label for="LandMark">Land Mark</label>
</div>
<br><br>
<p3>(Enter Pincode/Area to pick your nearest location)<span class="glyphicon glyphicon-map-marker"></p3>
<br><br>
<div class="form-group" style="width: 600px" >
<input input id="autocomplete" name="LocationPicker" type="text" onFocus="geolocate()" style=" moz-border-radius: 22px;border-radius: 7px;" >
<label for="LocationPicker">Location Picker</label>
</div>
<br><br>
<div class="form-group">
<input id="route" name="route" type="tel" class="form-control" required disabled="true">
<label for="route">Route/Locality</label>
</div>
<div class="form-group">
<input id="locality" name="locality" type="tel" class="form-control" required disabled="true">
<label for="locality">City/Town</label>
</div>
<br>
<div class="form-group">
<input id="administrative_area_level_2" name="administrative_area_level_2" type="tel" class="form-control" required disabled="true">
<label for="administrative_area_level_2">District</label>
</div>
<div class="form-group">
<input id="administrative_area_level_1" name="administrative_area_level_1" type="tel" class="form-control" required disabled="true">
<label for="administrative_area_level_1">State</label>
</div>
<br>
<div class="form-group">
<input id="country" name="country" type="text" class="form-control" required disabled="true">
<label for="country">Country</label>
</div>
<div class="form-group">
<input id="postal_code" name="postal_code" type="tel" class="form-control" required disabled="true">
<label for="postal_code">Pin Code</label>
</div>
<br><br>
<button>
Save
</button>
<br>
<br>
</form>
</center>
</div>
<!-- train section -->
<div class="bhoechie-tab-content">
<center>
<h4 class="glyphicon glyphicon-camera"></h4><br/>Camera
</center>
</div>
<!-- hotel search -->
<div class="bhoechie-tab-content">
<center>
<h4 class="glyphicon glyphicon-plus"></h4><br/>Add Employee
</center>
</div>
<div class="bhoechie-tab-content">
<center>
<h4 class="glyphicon glyphicon-camera"></h4><br/>Camera
</center>
</div>
<div class="bhoechie-tab-content">
<center>
<h4 class="glyphicon glyphicon-user"></h4><br/>Employees
</center>
</div>
</div>
</div>
</div>
</div>
</div>
div.bhoechie-tab-container{
z-index: 10;
background-color: #ffffff;
padding: 0 !important;
border-radius: 4px;
-moz-border-radius: 4px;
border:1px solid #ddd;
margin-top: 20px;
margin-left: 50px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
-moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
opacity: 0.97;
filter: alpha(opacity=97);
}
div.bhoechie-tab-menu{
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
}
div.bhoechie-tab-menu div.list-group{
margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a{
margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a .glyphicon,
div.bhoechie-tab-menu div.list-group>a .fa {
color: #5A55A3;
}
div.bhoechie-tab-menu div.list-group>a:first-child{
border-top-right-radius: 0;
-moz-border-top-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a:last-child{
border-bottom-right-radius: 0;
-moz-border-bottom-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a.active,
div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.active .fa{
background-color: #5A55A3;
background-image: #5A55A3;
color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.active:after{
content: '';
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px;
border-left: 0;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
border-left: 10px solid #5A55A3;
}
div.bhoechie-tab-content{
background-color: #ffffff;
/* border: 1px solid #eeeeee; */
padding-left: 20px;
padding-top: 10px;
}
div.bhoechie-tab div.bhoechie-tab-content:not(.active){
display: none;
}
/**************************************************************************************************/
div.bhoechie-tab-container{
z-index: 10;
background-color: #ffffff;
padding: 0 !important;
border-radius: 4px;
-moz-border-radius: 4px;
border:1px solid #ddd;
margin-top: 20px;
margin-left: 50px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
-moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
/* background-clip: padding-box;*/
opacity: 0.97;
filter: alpha(opacity=97);
}
div.bhoechie-tab-menu{
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
}
div.bhoechie-tab-menu div.list-group{
margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a{
margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a .glyphicon,
div.bhoechie-tab-menu div.list-group>a .fa {
color: #5A55A3;
}
div.bhoechie-tab-menu div.list-group>a:first-child{
border-top-right-radius: 0;
-moz-border-top-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a:last-child{
border-bottom-right-radius: 0;
-moz-border-bottom-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a.active,
div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.active .fa{
background-color: #5A55A3;
background-image: #5A55A3;
color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.active:after{
content: '';
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px;
border-left: 0;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
border-left: 10px solid #5A55A3;
}
div.bhoechie-tab-content{
background-color: #ffffff;
}
div.bhoechie-tab div.bhoechie-tab-content:not(.active){
display: none;
}
table { width: 100%;}
table, th, td { border: 1px solid black; border-collapse: collapse;}
th, td { padding: 5px; text-align: left;}
table#t01 tr:nth-child(even) { background-color: #F6E6E3;}
table#t01 tr:nth-child(odd) { background-color: #7E9987;}
table#t01 th { background-color: Green; color: white;}
/*88*****************************************************************************************************************/
.M1{
width: 160%;
height: 100px;
position: absolute;
align:center;
}
.form-control{
background: transparent;
}
form {
width: 320px;
margin: 20px;
}
form > div {
position: relative;
overflow: hidden;
}
form input, form textarea {
width: 100%;
border: 2px solid gray;
background: none;
position: relative;
top: 0;
left: 0;
z-index: 1;
padding: 8px 12px;
outline: 0;
}
form input:valid, form textarea:valid {
background: #F0F7F7;
}
form input:focus, form textarea:focus {
border-color: #357EBD;
}
form input:focus + label, form textarea:focus + label {
background: #FA0;
color: white;
font-size: 70%;
padding: 1px 6px;
z-index: 2;
text-transform: uppercase;
}
form label {
-webkit-transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
position: absolute;
color: #999;
padding: 7px 6px;
font-weight: normal;
}
form textarea {
display: block;
resize: vertical;
}
form.go-bottom input, form.go-bottom textarea {
padding: 12px 12px 12px 12px;
}
form.go-bottom label {
top: 0;
bottom: 0;
left: 0;
width: 100%;
}
form.go-bottom input:focus, form.go-bottom textarea:focus {
padding: 4px 6px 20px 6px;
}
form.go-bottom input:focus + label, form.go-bottom textarea:focus + label {
top: 100%;
margin-top: -16px;
}
form.go-right label {
border-radius: 0 5px 5px 0;
height: 100%;
top: 0;
right: 100%;
width: 100%;
margin-right: -100%;
}
form.go-right input:focus + label, form.go-right textarea:focus + label {
right: 0;
margin-right: 0;
width: 40%;
padding-top: 5px;
}
html,
body {
/*css for full size background image http://p1.pichost.me/i/66/1910857.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: #FA0;
color: #fff;
text-align: left;
text-shadow: 0 2px 6px 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;
}
/* Related to SIde MENU Text */
box-sizing: border-box;
}
body {
background: url(http://habrastorage.org/files/90a/010/3e8/90a0103e8ec749c4843ffdd8697b10e2.jpg);
text-align: right;
padding-top: 40px;
padding-left: 20px;
}
.btn-nav {
color: Green;
background-color: #fff;
border: 1px solid #e0e1db;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.btn-nav:hover {
color: #e92d00;
cursor: pointer;
-webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
transition: color 1s;
}
.btn-nav.active {
color: #e92d00;
padding: 2px;
border-top: 6px solid #e92d00;
border-bottom: 6px solid #e92d00;
border-left: 0;
border-right: 0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-webkit-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
-moz-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
-ms-transition: border 0.3s ease-out, color 0.3s ease 0.5s; /* IE10 is actually unprefixed */
-o-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
transition: border 0.3s ease-out, color 0.3s ease 0.5s;
-webkit-animation: pulsate 1.2s linear infinite;
animation: pulsate 1.2s linear infinite;
}
.btn-nav.active:before {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 6px 0;
border-color: #e92d00 transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -6px;
top: 0;
left: 50%;
}
.btn-nav .glyphicon {
padding-top: 16px;
font-size: 40px;
}
.btn-nav.active p {
margin-bottom: 8px;
}
@-webkit-keyframes pulsate {
50% { color: #000; }
}
@keyframes pulsate {
50% { color: #000; }
}
@media (max-width: 480px) {
.btn-group {
display: block !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 600px) {
.btn-nav .glyphicon {
padding-top: 12px;
font-size: 26px;
}
}
$(document).ready(function() {
$("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
});
});
