<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 ---------->
<body class="home">
<div class="container-fluid display-table">
<div class="row display-table-row">
<div class="col-md-0 col-sm-0 hidden-xs display-table-cell v-align box" id="navigation">
<div class="logo">
</div>
<div class="navi">
<ul>
<li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li><a href="javascript:void(0);" title="amazon" class="authlog"><span id="amazonnav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/amzn.png);"></span></a></li>
<li><a href="javascript:void(0);" title="google" class="authlog"><span id="googlenav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/google.png);"></span></a></li>
<li><a href="javascript:void(0);" title="one" class="authlog"><span id="onenav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/onenav.png);"></span></a></li>
<li><a href="javascript:void(0);" title="dropbox" class="authlog"><span id="dropboxnav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/dropbox.png);"></span></a></li>
<li><a href="javascript:void(0);" title="facebook" class="authlog"><span id="facebooknav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/facebook.png);"></span></a></li>
<li><a href="javascript:void(0);" title="instagram" class="authlog"><span id="instagramnav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/instagram.png);"></span></a></li>
</ul>
</div>
</div>
<div class="col-sm-12 display-table-cell v-align">
<!--<button type="button" class="slide-toggle">Slide Toggle</button> -->
<div class="row">
<header>
<div class="col-md-7">
<nav class="navbar-default pull-left">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="offcanvas" data-target="#side-menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</nav>
<div class="search hidden-xs hidden-sm">
<input type="text" placeholder="Search" id="search">
</div>
</div>
<div class="col-md-5">
<div class="header-rightside">
<ul class="list-inline header-top pull-right">
</ul>
</div>
</div>
</header>
</div>
<div class="row">
<h1>Hello, JS</h1>
<div class="row">
<!-- main-body -->
<div class="col-sm-12 gutter" id="main-body">
<div class="col-sm-12 bhoechie-tab-container">
<!-- nav- -->
<div class="col-sm-1 bhoechie-tab-menu">
<div class="list-group">
<a href="javascript:void(0);" title="amazon" class="list-group-item text-center authlog"><span id="amazonnav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/amzn.png);"></span></a>
<a href="javascript:void(0);" title="google" class="list-group-item text-center authlog"><span id="googlenav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/google.png);"></span></a>
<a href="javascript:void(0);" title="one" class="list-group-item text-center authlog"><span id="onenav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/onenav.png);"></span></a>
<a href="javascript:void(0);" title="dropbox" class="list-group-item text-center authlog"><span id="dropboxnav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/dropbox.png);"></span></a>
<a href="javascript:void(0);" title="facebook" class="list-group-item text-center authlog active"><span id="facebooknav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/facebook.png);"></span></a>
<a href="javascript:void(0);" title="instagram" class="list-group-item text-center authlog"><span id="instagramnav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/instagram.png);"></span></a>
</div>
</div>
<!-- main-content -->
<div class="col-sm-9 bhoechie-tab">
<div class="bhoechie-tab-content">
<center>
<div class="loginScreen"><div id="AmazonLoginLogo" class="authlog" title="amazon"></div></div>
</center>
</div>
<div class="bhoechie-tab-content">
<center>
<div class="loginScreen"><div id="GoogleLoginLogo" class="authlog" title="google"></div></div>
</center>
</div>
<div class="bhoechie-tab-content">
<center>
<div class="loginScreen"><div id="OneLoginLogo" class="authlog" title="one"></div></div>
</center>
</div>
<div class="bhoechie-tab-content">
<center>
<div class="loginScreen"><div id="DropboxLoginLogo" class="authlog" title="dropbox"></div></div>
</center>
</div>
<div class="bhoechie-tab-content active">
<center>
<div class="loginScreen"><div id="FacebookLoginLogo" class="authlog" title="facebook"></div></div>
</center>
</div>
<div class="bhoechie-tab-content">
<center>
<div class="loginScreen"><div id="InstagramLoginLogo" class="authlog" title="instagram"></div></div>
</center>
</div>
</div>
<!-- ads -->
<div class="col-sm-2" id="ads">
<img src="https://d1rwozpuswnigs.cloudfront.net/Images/test/adtest.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
html {
height: 100%;
overflow: hidden;
}
body{
height: 100%;
overflow: hidden;
}
/* Custom */
#ads{
/*display:none !important;*/
}
#main-body{
/* width:100% !important;*/
}
/*Main CSS*/
/*Login Signup Page*/
a:focus,a:hover,a{
outline:none;
text-decoration: none;
}
li,ul{
list-style: none;
padding: 0;
margin: 0;
}
.header-top i {
font-size: 18px;
}
.bg-image {
background: url(../images/background-login.jpg) no-repeat 0 0 / cover;
position: relative;
width: 100%;
height: 100vh;
display: table;
}
.login-header {
display: inline-block;
width: 100%;
background: #0e1a35;
}
.login-signup {
display: table-cell;
vertical-align: middle;
width: 100%;
}
.login-logo img {
cursor: pointer;
max-width: 171px;
padding: 23px 15px 22px;
width: 100%;
}
.login-header .navbar-right {
margin-right: 0px;
}
.login-header .nav-tabs > li.active > a,
.login-header .nav-tabs > li.active > a:focus,
.login-header .nav-tabs > li.active > a:hover {
background-color: transparent;
border: none;
color: #fff;
}
.login-header .nav-tabs > li > a {
border: medium none;
border-radius: 0;
font-size: 14px;
font-weight: 500;
line-height: 48px;
padding: 15px 30px;
color: #fff;
}
.login-header .nav-tabs {
border-bottom: none;
}
.login-header .nav-tabs > li {
margin-bottom: 0px;
}
.login-header .nav > li > a:focus,
.login-header .nav > li > a:hover {
background: none;
text-decoration: none;
}
.login-header .nav-tabs > li.active {
border-bottom: 6px solid #5584ff;
}
.login-inner h1 {
color: #8492af;
font-size: 48px;
font-weight: 300;
text-align: center;
margin-top: 0;
margin-bottom: 20px;
}
.login-inner h1 span {
color: #5584ff;
}
.login-form {
text-align: center;
}
.login-form input {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-color: -moz-use-text-color -moz-use-text-color #d4d9e3;
border-image: none;
border-style: none none solid;
border-width: medium medium 1px;
font-size: 13px;
font-weight: 300;
width: 100%;
color: #8492af;
padding: 15px 50px;
font-size: 17px;
max-width: 550px;
}
.login-form label {
margin-bottom: 30px;
width: 100%;
}
.user input {
background: rgba(0, 0, 0, 0) url("../images/user.png") no-repeat scroll 7px 12px;
}
.pass input {
background: rgba(0, 0, 0, 0) url("../images/password.png") no-repeat scroll 7px 12px;
}
.mail input {
background: rgba(0, 0, 0, 0) url("../images/mail.png") no-repeat scroll 4px 12px;
}
.login-signup .tab-content {
background: #ffffff none repeat scroll 0 0;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
display: inline-block;
margin-top: -8px;
width: 100%;
}
.form-btn {
background: #5584ff none repeat scroll 0 0;
border: medium none;
border-radius: 100px;
color: #ffffff;
font-weight: 400;
max-width: 250px;
padding: 10px 0;
position: relative;
width: 100%;
margin: 40px 0;
box-shadow: 0 2px 8px #d2d2d2;
-moz-box-shadow: 0 2px 8px #d2d2d2;
-webkit-box-shadow: 0 2px 8px #d2d2d2;
}
.form-btn::before {
content: "?";
font-family: FontAwesome;
position: absolute;
right: 17px;
top: 9px;
}
.form-details {
padding: 35px 0;
}
.tab-content .tab-pane {
padding: 70px 0;
}
/*Login Signup Page*/
/*Home Page*/
.home {
background: #f6f7fa;
}
#navigation {
background: #0e1a35;
}
#navigation {
padding: 0;
}
.display-table {
display: table;
padding: 0;
height: 100%;
width: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
float: none;
height: 100%;
}
.v-align {
vertical-align: top;
}
.logo img {
max-width: 180px;
padding: 16px 0 17px;
width: 100%;
}
.header-top {
margin: 0;
padding-top: 2px;
}
.header-top img {
border-radius: 50%;
max-width: 48px !important;
width: 100%;
}
.add-project {
background: #5584ff none repeat scroll 0 0;
border-radius: 100px;
color: #ffffff;
font-size: 14px;
font-weight: 600;
padding: 10px 27px 10px 45px;
position: relative;
}
.header-rightside .nav > li > a:focus,
.header-rightside .nav > li > a:hover {
background: none;
text-decoration: none;
}
.add-project::before {
background: rgba(0, 0, 0, 0) url("../images/plus.png") no-repeat scroll 0 0;
content: "";
;
height: 12px;
left: 17px;
position: absolute;
top: 12px;
width: 12px;
}
.add-project:hover {
color: #ffffff;
}
.header-top i {
color: #0e1a35;
}
.icon-info {
position: relative;
}
.navi i {
font-size: 20px;
}
.label.label-primary {
border-radius: 50%;
font-size: 9px;
left: 8px;
position: absolute;
top: -9px;
}
.icon-info .label {
border: 2px solid #ffffff;
font-weight: 500;
padding: 3px 5px;
text-align: center;
}
.header-top li {
display: inline-block;
text-align: center;
}
.header-top .dropdown-toggle {
color: #0e1a35;
}
.header-top .dropdown-menu {
border: medium none;
left: -85px;
padding: 17px;
}
.view {
background: #5584ff none repeat scroll 0 0;
border-radius: 100px;
color: #ffffff;
display: inline-block;
font-size: 14px;
font-weight: 600;
margin-top: 10px;
padding: 10px 15px;
}
.navbar-content > span {
font-size: 13px;
font-weight: 700;
}
.img-responsive {
width: 100%;
}
#navigation{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.search input {
border: none;
font-size: 15px;
padding: 15px 9px;
width: 100%;
background: rgba(0, 0, 0, 0) url("../images/search.png") no-repeat scroll 99% 12px;
color: #8492af;
}
header {
background: #ffffff none repeat scroll 0 0;
box-shadow: 0 1px 12px rgba(0, 0, 0, 0.04);
display: inline-block !important;
line-height: 23px;
padding: 15px;
transition: all 0.5s ease 0s;
width: 100%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.logo {
text-align: center;
}
.navi a {
border-bottom: 1px solid #0d172e;
border-top: 1px solid #0d172e;
color: #ffffff;
display: block;
font-size: 17px;
font-weight: 500;
padding: 10px 20px;
text-decoration: none;
}
.navi i {
margin-right: 15px;
color: #5584ff;
}
.navi .active a {
background: #122143;
border-left: 5px solid #5584ff;
padding-left: 15px;
}
.navi a:hover {
background: #122143 none repeat scroll 0 0;
border-left: 5px solid #5584ff;
display: block;
padding-left: 15px;
}
.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
}
.navbar-toggle {
border: none;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background-color: rgba(0, 0, 0, 0);
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #0e1a35;
}
.circle-logo {
margin: 0 auto;
max-width: 30px !important;
text-align: center;
}
.hidden-xs{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display:none;
}
.user-dashboard {
padding: 0 20px;
}
.user-dashboard h1 {
color: #0e1a35;
font-size: 30px;
font-weight: 500;
margin: 0;
padding: 21px 0;
}
.sales {
background: #ffffff none repeat scroll 0 0;
border: 1px solid #d4d9e3;
display: none; /*inline-block;*/
padding: 15px;
width: 100%;
}
.sales button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 1px solid #dadee7;
border-radius: 100px;
font-size: 15px;
letter-spacing: 0.5px;
padding-right: 32px;
color: #0e1a35;
}
.sales button::before {
content: "?";
font-family: FontAwesome;
position: absolute;
right: 12px;
top: 11px;
}
.sales .btn-group {
float: right;
}
.sales h2 {
color: #8492af;
float: left;
font-size: 21px;
font-weight: 600;
margin: 0;
padding: 9px 0 0;
}
.btn.btn-secondary.btn-lg.dropdown-toggle > span {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
}
.sales .dropdown-menu{
margin: 0px;
padding: 0px;
border: 0px;
border-radius: 8px;
width: 100%;
color: #0e1a35;
}
.sales .btn-group.open .dropdown-toggle, .btn.active, .btn:active{
box-shadow: none;
}
.sales .dropdown-menu > a {
color: #0e1a35;
display: inline-block;
font-weight: 800;
padding: 9px 0;
text-align: center;
width: 100%;
}
#my-cool-chart svg {
width: 100%;
}
.sales .dropdown-menu > a:hover{
color: #5584FF;
}
.shield-buttons {
display: none;
}
.close, .close:focus, .close:hover {
color: #fff;;
opacity: 1;
text-shadow: none;
}
.modal-body input {
border: 1px solid #d4d9e3;
font-size: 14px;
font-weight: 300;
margin: 5px 0;
padding: 14px 10px;
width: 100%;
color: #8492af;
}
.modal-body textarea {
border: 1px solid #d4d9e3;
font-size: 14px;
font-weight: 300;
height: 200px;
margin-top: 5px;
padding: 9px 10px;
width: 100%;
color: #8492af;
}
.modal-header.login-header h4 {
color: #ffffff;
}
.modal-footer .add-project {
background: #5584ff none repeat scroll 0 0;
border: medium none;
border-radius: 100px;
color: #ffffff;
font-size: 14px;
font-weight: 600;
padding: 10px 30px;
position: relative;
}
.modal-footer .add-project::before{display: none;}
.modal-footer {
border: 0 none;
padding: 10px 15px 26px;
text-align: right;
}
.cancel {
background: #0E1A35 ;
border: medium none;
border-radius: 100px;
color: #ffffff;
font-size: 14px;
font-weight: 600;
padding: 10px 30px;
position: relative;
}
.modal{
top: 20%;
}
.modal-header .close {
margin-top: 2px;
}
.search input:focus{
border-bottom: 1px solid #BDC4D4;
line-height:22px;
transition: 0.1s all;
}
.modal-header.login-header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/*Main CSS*/
@media only screen and (max-device-width: 767px) {
.login-logo img {
margin: 0 auto;
}
.login-details .nav-tabs > li {
text-align: center;
width: 50%;
}
.login-signup .login-inner h1 {
font-size: 26px;
margin-bottom: 0;
margin-top: 10px;
}
.login-inner .login-form input {
font-size: 15px;
max-width: 100%;
padding: 15px 45px;
}
.login-inner .form-details {
padding: 25px;
}
.login-inner .login-form label {
margin-bottom: 20px;
width: 100%;
}
.login-inner .form-btn {
margin: 0;
max-width: 180px;
}
.tab-content .tab-pane {
padding: 20px 0;
}
#navigation .navi a {
font-size: 14px;
padding: 20px;
text-align: center;
}
#navigation .navi i {
margin-right: 0px;
}
#navigation .navi a:hover,
#navigation .navi .active a {
background: #122143 none repeat scroll 0 0;
border-left: none;
display: block;
padding-left: 20px;
}
header .header-top img {
max-width: 38px !important;
}
.v-align header {
padding: 12px 15px;
}
header .header-top li {
padding-left: 13px;
padding-right: 6px;
}
.navbar-default .navbar-toggle {
border-color: rgba(0, 0, 0, 0);
}
.navbar-header .navbar-toggle {
float: left;
margin: 0;
padding: 0;
/*top: 12px;*/
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
outline: medium none;
}
.user-dashboard .sales h2 {
color: #8492af;
float: left;
font-size: 14px;
font-weight: 600;
margin: 0;
padding: 13px 0 0;
}
.user-dashboard .btn.btn-secondary.btn-lg.dropdown-toggle > span {
font-size: 11px;
}
.user-dashboard .sales button {
font-size: 11px;
padding-right: 23px;
}
.user-dashboard .sales h2 {
font-size: 12px;
}
.gutter{
padding: 0;
}
}
@media only screen and (max-device-width: 992px) {
header .header-top li {
padding-left: 20px !important;
padding-right: 0;
}
header .logo img {
max-width: 125px !important;
}
}
@media only screen and (min-device-width: 767px) and (max-device-width: 998px){
.user-dashboard .header-top {
padding-top: 5px;
}
.user-dashboard .header-rightside {
display: inline-block;
float: left;
width: 100%;
}
.user-dashboard .header-rightside .header-top img {
max-width: 41px !important;
}
.user-dashboard .sales button {
font-size: 10px;
}
.user-dashboard .btn.btn-secondary.btn-lg.dropdown-toggle > span {
font-size: 12px;
}
.user-dashboard .sales h2 {
font-size: 15px;
}
}
@media only screen and (min-device-width:998px) and (max-device-width: 1350px){
#navigation .logo img {
max-width: 130px;
padding: 16px 0 17px;
width: 100%;
}
}
/* ifile */
#amazonnav, #onenav, #googlenav, #facebooknav, #dropboxnav, #instagramnav{
height:40px;
width:40px;
display:inline-block;
background-size:100% 100%;
}
#AmazonLoginLogo{
background-image: url("https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/amazonlogscreen.png");
width:213px;
height:56px;
cursor:pointer;
}
#OneLoginLogo{
background-image: url("https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/onelogscreen.png");
width:213px;
height:56px;
cursor:pointer;
background-size:100%;
}
#GoogleLoginLogo{
background-image: url("https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/googlelogscreen.png");
width:213px;
height:60px;
cursor:pointer;
background-size:100%;
}
#DropboxLoginLogo{
background-image: url("https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/dropboxlogscreen.png");
width:213px;
height:60px;
cursor:pointer;
background-size:100% 100%;
}
#FacebookLoginLogo{
background-image: url("https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/facebooklogscreen.png");
width:213px;
height:60px;
cursor:pointer;
background-size:100% 100%;
}
#InstagramLoginLogo{
background-image: url("https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/instagramlogscreen.png");
width:213px;
height:60px;
cursor:pointer;
background-size:100% 100%;
}
/*-------------------------------*/
/* Body */
/*-------------------------------*/
/* bhoechie tab */
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;
-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);
width:100%;
}
.bhoechie-tab{
/*width:84%;*/
}
div.bhoechie-tab-menu{
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
width:72px;
}
div.bhoechie-tab-menu div.list-group{
margin-bottom: 0;
width:72px;
}
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;
}
$(document).ready(function(){
// mobile nav
$('[data-toggle="offcanvas"]').click(function(){
$("#navigation").toggleClass("hidden-xs");
});
//body tabs script
$("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");
});
});
