ORJrwm

index.html

<div class="app_con">
			<div class="app_base">
				<div class="app_top">
					<div class="top_con">
						<div class="top_base">
							<nav class="navbar navbar-white navbar-fixed-top" role="navigation">
								<div class="container">
									<div class="navbar-header">
										<button class="navbar-toggle collapsed" type="button">
										<!-- data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"--><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="logo">
											Sylable
										</h4></a>
									</div>

									<div class="navbar-collapse collapse" id="navbar">
										<form class="navbar-form navbar-right" role="form">
											<div class="form-group">
												<input class="form-control" placeholder="Email" type="text">
											</div>

											<div class="form-group">
												<input class="form-control" placeholder="Password" type="password">
											</div>
											<button class="btn btn-success" type="submit">Sign in</button>
										</form>
									</div>
									<!-- /.navbar-collapse-->
								</div>
							</nav>

							<ul class="top_nav top_menu" id="tabs_links">
								<li class="active top_menu-item">
									<a class="tabbies" href="tabs_Home"><i class="fa fa-home"></i></a>
								</li>

								<li class="top_menu-item">
									<a class="tabbies" href="tabs_Messages"><i class="fa fa-envelope"></i><span class="badge">2</span></a>
								</li>

								<li class="top_menu-item">
									<a class="tabbies" href="tabs_Contacts"><i class="fa fa-users"></i></a>
								</li>

								<li class="top_menu-item">
									<a class="tabbies" href="tabs_Bells"><i class="fa fa-bell"></i><span class="badge">4</span></a>
								</li>

								<li class="top_menu-item">
									<a class="tabbies" href="tabs_Logout"><i class="fa fa-power-off"></i></a>
								</li>
							</ul>
						</div>
					</div>
				</div>

				<div class="app_field">
					<div class="field_con">
						<div class="field_base tab active" id="tabs_Home">
							<ul class="side_menu move-left">
							</ul>

							<div class="main_ground move-right">
							</div>
						</div>

						<div class="field_base tab" id="tabs_Messages">
							<ul class="side_menu move-left">
							</ul>

							<div class="main_ground move-right">
							</div>
						</div>

						<div class="field_base tab" id="tabs_Contacts">
							<ul class="side_menu move-left">
							</ul>

							<div class="main_ground move-right">
							</div>
						</div>

						<div class="field_base tab" id="tabs_Bells">
							<ul class="side_menu move-left">
							</ul>

							<div class="main_ground move-right">
							</div>
						</div>

						<div class="field_base tab" id="tabs_Logout">
							<ul class="side_menu move-left">
							</ul>

							<div class="main_ground move-right">
							</div>
						</div>
					</div>
				</div>

				<div class="app_root disappear-bb">
					<div class="root_con">
            <h1>Root</h1>
					</div>
				</div>
			</div>
		</div>

orjrwm.markdown

ORJrwm

A Pen by Sylvance on CodePen.

License.

script.js

$(document).ready(function() {
 	$('a.tabbies').on('click', function(e) {
 		var tab_id = $(this).attr('href');
 		console.log(tab_id);
 		jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
 		if (tab_id == 'tabs_Home') {
 			jQuery('div.field_base:eq(0)').addClass('field_base tab active').siblings().removeClass('active');
 			address_counter = 0;
 			jQuery('div.root_base:eq(0)').addClass('root_base active-root-base').siblings().removeClass('active-root-base');
 			// location.href = "#tab_live";
 		}
 		if (tab_id == 'tabs_Messages') {
 			jQuery('div.field_base:eq(1)').addClass('field_base tab active').siblings().removeClass('active');
 			address_counter = 0;
 			jQuery('div.root_base:eq(1)').addClass('root_base active-root-base').siblings().removeClass('active-root-base');
 			// location.href = "#tab_live";
 		}
 		if (tab_id == 'tabs_Contacts') {
 			jQuery('div.field_base:eq(2)').addClass('field_base tab active').siblings().removeClass('active');
 			address_counter = 0;
 			jQuery('div.root_base:eq(2)').addClass('root_base active-root-base').siblings().removeClass('active-root-base');
 			// location.href = "#tab_live";
 		}
 		if (tab_id == 'tabs_Bells') {
 			jQuery('div.field_base:eq(3)').addClass('field_base tab active').siblings().removeClass('active');
 			address_counter = 0;
 			jQuery('div.root_base:eq(3)').addClass('root_base active-root-base').siblings().removeClass('active-root-base');
 			// location.href = "#tab_live";
 		}
 		if (tab_id == 'tabs_Logout') {
 			jQuery('div.field_base:eq(4)').addClass('field_base tab active').siblings().removeClass('active');
 			address_counter = 0;
 			jQuery('div.root_base:eq(4)').addClass('root_base active-root-base').siblings().removeClass('active-root-base');
 			// location.href = "#tab_live";
 		}
 		e.preventDefault();
 	});
 });

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

style.css

@-webikt-keyframes pulse {
  from { opacity: 0; }
  to { opacity: 0.5; }
}

::-webkit-scrollbar {
    min-width: 12px;
    width: 12px;
    max-width: 12px;
    min-height: 12px;
    height: 12px;
    max-height: 12px;
    background: #e5e5e5;
    box-shadow: inset 0px 50px 0px #76b852, inset 0px -52px 0px #fafafa; /* the coolest blue color ever!!!! rgba(82,179,217,0.9)*/
}

::-webkit-scrollbar-thumb {
    background: #bbb;
    border: none;
    border-radius: 100px;
    border: solid 3px #e5e5e5;
    box-shadow: inset 0px 0px 3px #999;
}

::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
  box-shadow: inset 0px 0px 3px #888;
}

::-webkit-scrollbar-thumb:active {
    background: #aaa;
  box-shadow: inset 0px 0px 3px #7f7f7f;
}

::-webkit-scrollbar-button {
    display: block;
    height: 26px;
}

::selection{
  background: rgba(82,179,217,0.3);
  color: inherit;
}


html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.app_con
{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column;
      -ms-flex-flow: column;
          flex-flow: column;
  height: 100%;
}

.app_base
{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column;
      -ms-flex-flow: column;
          flex-flow: column;
  height: 100%;
}

.app_top
{
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 10%;
      -ms-flex: 0 1 10%;
          flex: 0 1 10%;
}

.app_field
{
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 82%;
      -ms-flex: 1 1 82%;
          flex: 1 1 82%;
}

.app_root
{
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 8%;
      -ms-flex: 0 1 8%;
          flex: 0 1 8%;
}

/*nav-bar*/
.navbar-brand {
  padding: 0px;
}

.navbar-white
{
  background-color: white;
  border-color: #e7e7e7;
}

.logo {
  display:block;
  height: 100%;
  width: auto;
  padding:3px;
  background-color:#fff;
  color:#76b852;
  margin:9px;
  margin-right:2px;
  margin-left:15px;
  /*font-family: 'Open Sans', sans-serif;*/
  /*font-family: Verdana, Geneva, sans-serif;*/
  font: 250px/0.5 'Just Another Hand', Helvetica, sans-serif;
  font-size: 30px;
  font-style: normal;
  font-variant: small-caps;
  font-weight: bold;
  text-shadow:0 0 1px;
  line-height: 40px;
}

/*menu*/
ul.top_menu{
    list-style-type: none;
    position: fixed;
    list-style-type: none;
    margin-top: 50px;
    padding: 0;
    overflow: hidden;
    width: 100%;
    background: #76b852; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #76b852 , #8DC26F); /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(right, #76b852 , #8DC26F);
    background: linear-gradient(to left, #76b852 , #8DC26F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/*     -webkit-box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
    -moz-box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
    box-shadow: 10px 10px 91px 0px rgba(193,79,82,1); */
    z-index:10000;
}


li.top_menu-item {
    float: left;
    width: 20%;
}

li.active.top_menu-item {
    color: white;
    background-color: #4CAF50;
}

li.active.top_menu-item a {
    color: white;
}

li:hover:not(.active).top_menu-item {
    background-color: #fff;
}


li.top_menu-item a {
    display: block;
    color: #666;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
}

.tab {
    display:none;
}
 
.tab.active {
    display:block;
}

/*root_menu*/

.root_con
{
  
}

.root_base {
    display:none;
}
 
.root_base.active-root-base {
    display:inline-block;
}

ul.root_menu{
  list-style-type: none;
  position: fixed;
  bottom: 0;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
  width: 100%;
  background: #76b852; 
  background: -webkit-linear-gradient(to left, #76b852 , #8DC26F); 
  background: -webkit-linear-gradient(right, #76b852 , #8DC26F);
  background: linear-gradient(to left, #76b852 , #8DC26F);
  z-index:10000;
}


li.root_menu-item {
  display: none;   
}

li.active-root.root_menu-item {
    display: block;
    color: white;
    background-color: #4CAF50;
    float: left;
    width: 60%;
}

li.active-root.root_menu-item a {
    color: white;
}

li:hover:not(.active).root_menu-item {
    background-color: #fff;
}


li.root_menu-item a {
    display: block;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
}

li.root_nav {
    color: white;
    background-color: #4CAF50;
    float: left;
    width: 20%;
}

li.root_nav a {
    display: block;
    color: #666;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
}

li.root_nav:hover {
    background-color: #76b852;
}

/*side_menu*/
ul.side_menu{
    position: fixed;
    list-style-type: none;
    margin-top: 5px;
    padding: 0;
    overflow: hidden;
    width: 10%;
    font-family: 'Open Sans', sans-serif;
    letter-spacing:1px;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    transition: all 0.1s;
    border-right:1px solid #f0f0f0;
    border-bottom:1px solid #f0f0f0;
    border-top:1px solid #f0f0f0;
    border-left:1px solid #f0f0f0;
    cursor:pointer;
    z-index:10000;
}

.usr-name{
  font-family: 'Open Sans', sans-serif;
  letter-spacing:1px;
}

li.side_menu-item {
    width: 100%;
    padding: 7px;
    border-bottom:1px solid #f0f0f0;
}

li.active.side_menu-item {
    color: #4CAF50;
}

li.active.side_menu-item a {
    color: #4CAF50;
}

li:not(.active).side_menu-item a:hover {
    color: #8DC26F;
}


li.side_menu-item a {
    color: #666;
    padding: 8px 8px;
    text-decoration: none;
}

.badge{
  background-color: red;
  color: white;
}

.head{
  color: white;
  background-color: #8DC26F;
}


.main_ground{
  width: 90%;
  padding-bottom: 60px;
  /*text-align: center;*/
}
.ground {
    display:none;
}
 
.ground.active {
    display:block;
}

.mar-r-5{
  margin-right: 5px;
}

.mar-l-5{
  margin-left: 5px;
}

.mar-r-15{
  margin-right: 15px;
}

.mar-l-15{
  margin-left: 15px;
}
.mar-t-5{
  margin-top: 5px;
}

.mar-b-5{
  margin-bottom: 5px;
}

.mar-t-15{
  margin-top: 15px;
}

.mar-b-15{
  margin-bottom: 15px;
}

.move-right{
  float: right;
  display: inline-block;
}

.be-inline{
  display: inline-block;
}

.move-left{
  float: left;
  display: inline-block;
}

.field_con
{
  padding-top: 89px;
  height : 100%;
}

/* HEADLINES */
.hdln{
  margin: 0 auto;
  margin-top: 15px;
  border-right:1px solid #f0f0f0;
  border-bottom:1px solid #f0f0f0;
  border-top:1px solid #f0f0f0;
  border-left:1px solid #f0f0f0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hdln-top{
  padding: 5px;
}

.hdln-base{
  padding: 5px;
}

.hdln-root{
  padding: 5px;
  color: #8DC26F;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  font-weight: bold;
}

.feed{
  width: 40%;
  height: auto;
  color: #8DC26F;
}

.feed-box{
  display: flex;
}

.hdln-feed-box{
 -webkit-box-flex: 1;
 -moz-box-flex: 1;
 box-flex: 1; 
}

.sign_top-form{
  width: 100%;
  height: 40px;
  background-color: #8DC26F;
}

input.good-input {
    z-index: 99;
    outline: none;
    border: 5px white solid;
    border-radius: 3px;
    display: block;
    padding: 5px 10px;/*
    vertical-align: top;*/
    background-color: #f2f2f2;
    font-family: 'Open Sans', sans-serif;
    letter-spacing:1px;
    -webkit-box-shadow: 5px 5px 30px 0px rgba(144, 144, 144, 1);
     -moz-box-shadow: 5px 5px 30px 0px rgba(144, 144, 144, 1);
    box-shadow: 5px 5px 30px 0px rgba(144, 144, 144, 1);
    color:#333;
    font-weight: 400;
    word-wrap: break-word;
    width: 100%;
    height: 50px;
    margin: 0 auto;
}

.title-form {
  display:block;
  height: 100%;
  width: auto;
  padding:3px;
  color:#fff;
  margin:9px;
  margin-right:2px;
  margin-left:40px;
  font: 'Open Sans', Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant: small-caps;
  font-weight: bold;
  text-shadow:0 0 1px;
  line-height: 40px;
}

.subtitle-form {
  display:block;
  height: 100%;
  width: auto;
  padding:3px;
  color:#8DC26F;
  margin:9px;
  margin-right:2px;
  margin-left:40px;
  font: 'Open Sans', Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-variant: small-caps;
  font-weight: bold;
  text-shadow:0 0 1px;
  line-height: 25px;
}

.sbmt-btn {
    background:none!important;
    border:none; 
    padding:0!important;
    /*border is optional*/
    border-bottom:1px solid #444; 
}


.black{
  color: black;
}

.green{
  color: green;
}

.blue{
  color: blue;
}

.red{
  color: red;
}

.usr-pic {
    display:block;
    width:45px;
    height:45px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border:5px solid #eee;
    background-color:#eee;
}

.lgout_usr-pic{
  display:block;
  width:100%;
  height:auto;
  border:5px solid #eee;
  background-color:#eee;
}

.bdr-pic{
  display:block;
  width:100%;
  height:auto;
  border:5px solid #eee;
  background-color:#eee;
}

.h-sib{
  margin: 0;
  padding: 5px;
}

/*.hdln-input {
    border: 5px solid white; 
    -webkit-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    padding: 15px;
    background: rgba(255,255,255,0.5);
    margin: 0 auto;
    width: 100%;
    height: 100%;
}*/


.hyt-50{
  height: 50px;
}

.hyt-70{
  height: 70px;
}

.v-70{
  height: 70%;
}

.algn-cntr{
  margin: 0 auto;
}

.algn-cntr-self{
  margin-top: 20px;
  margin-left: 15px;
}

.algn-cntr-other{
  margin-top: 20px;
}

.wid-10{
  width: 10%;
  height: auto;
}

.wid-20{
  width: 20%;
  height: auto;
}

.wid-30{
  width: 30%;
  height: auto;
}

.wid-40{
  width: 40%;
  height: auto;
}

.wid-50{
  width: 50%;
  height: auto;
}

.wid-60{
  width: 60%;
  height: auto;
}

.wid-70{
  width: 70%;
  height: auto;
}

.wid-80{
  width: 80%;
  height: auto;
}

.wid-90{
  width: 90%;
  height: auto;
}

.wid-100{
  width: 100%;
  height: auto;
}

/* BUTTONS */
.button-success,
.button-error,
.button-warning,
.button-secondary {
  color: white;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {
  background: rgb(28, 184, 65); /* this is a green */
}

.button-success:hover {
  background: rgb(202, 60, 60); /* this is a maroon */ /* IE 9 */
  /*-webkit-transform: scale(1.1,1.1);  Safari 
  transform: scale(1.1,1.1);*/
}

.button-success:visited {
  background: rgb(66, 184, 221); /* this is a light blue */
}

.button-error {
  background: rgb(202, 60, 60); /* this is a maroon */
}

.button-warning {
  background: rgb(223, 117, 20); /* this is an orange */
}

.button-secondary {
  background: rgb(66, 184, 221); /* this is a light blue */
}

.btn-block{
  display: block;
}

.rnd-btn {
  color: white;
  border-radius: 50%;
  background: #76b852; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #76b852 , #8DC26F); /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(right, #76b852 , #8DC26F);
  background: linear-gradient(to left, #76b852 , #8DC26F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}


/* CHAT BAR*/
.back {
  width: 90px;
  height: 50px;
  /*top: 0px;
  left: 0px;*/
  color: white;
  line-height: 50px;
  font-size: 30px;
  /*padding-left: 10px;*/
  cursor: pointer;
}

.back img {
  /*top: 5px;*/
  left: 30px;
  width: 40px;
  height: 40px;
  background-color: rgba(255,255,255,0.98);
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  margin-left: 15px;
}

.back:hover {
  background: rgba(255,255,255,0.2);
}

.name{
  color: rgba(255,255,255,0.98);
  cursor: default;
}

.last{
  color: rgba(255,255,255,0.6);
  cursor: default;
}

.menu_chat {
    width: 100%;
    height: 50px;
    background-color: #4CAF50;
    /*background: rgba(82,179,217,0.9);*/
    z-index: 100;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


/* M E S S A G E S */
.chat{
  width: 100%;
  height: 400px;
  margin: 0;
  padding: 0;
  margin-top: 20px;
  margin-bottom: 10px;
  overflow-y: scroll;
}

.msg {
    background: white;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.07);
}

.msg p {
    font-size: 1.2rem;
    color: #777;
}

time{
  font-size: 0.9rem;
}

input.textarea {
    z-index: 99;
    outline: none;
    border: 5px white solid;
    border-radius: 3px;
    display: block;
    padding: 5px 10px;
    vertical-align: top;
    background-color: #f2f2f2;
    font-family: 'Open Sans', sans-serif;
    letter-spacing:1px;
    -webkit-box-shadow: 5px 5px 30px 0px rgba(144, 144, 144, 1);
     -moz-box-shadow: 5px 5px 30px 0px rgba(144, 144, 144, 1);
    box-shadow: 5px 5px 30px 0px rgba(144, 144, 144, 1);
    color:#333;
    font-weight: 400;
    word-wrap: break-word;
    width: 100%;
    height: 50px;
    margin: 0 auto;
}

input.sign-input {
    z-index: 99;
    outline: none;
    border: 5px white solid;
    border-radius: 3px;
    display: block;
    padding: 5px 10px;/*
    vertical-align: top;*/
    background-color: #f2f2f2;
    font-family: 'Open Sans', sans-serif;
    letter-spacing:1px;
    -webkit-box-shadow: 5px 5px 30px 0px rgba(144, 144, 144, 1);
     -moz-box-shadow: 5px 5px 30px 0px rgba(144, 144, 144, 1);
    box-shadow: 5px 5px 30px 0px rgba(144, 144, 144, 1);
    color:#333;
    font-weight: 400;
    word-wrap: break-word;
    width: 100%;
    height: 50px;
    margin: 0 auto;
    margin-top: 15px;
    margin-left: 30px;
}

/* RESPONSIVE*/

@media (max-width: 568px) {
  .feed{
    width: 100%;    
  }
  .side_menu{
    display: none;
  }
  .main_ground{
    width: 100%;
  }
  .top-det-pic{
    width: 20%;
  }
  .top-det-usr{
    width: 70%;
  }
}

@media (max-height: 568px) {
  .chat{
    height: 220px;
    margin-top: 0px;
  }
}

@media (max-height: 500px) {
  .chat{
    height: 230px;
    margin-top: 0px;
  }
}

@media (max-height: 468px) {
  .chat{
    height: 160px;
    margin-top: 0px;
  }
}

@media (max-height: 368px) {
  .chat{
    height: 100px;
    margin-top: 0px;
  }
}

@media (max-width: 1000px) {
  .top-det-pic{
    width: 20%;
  }
  .top-det-usr{
    width: 70%;
  }
}

@media (max-width: 768px) {
  .disappear-n{
    display: none;
  }
}

@media (max-width: 568px) {
  .disappear-s{
    display: none;
  }
  .wid-70{
    width: 100%;
  }
  .wid-60{
    width: 100%;
  }
}

@media (max-width: 380px) {
  .disappear-vs{
    display: 
  }
}

@media (min-width: 768px) {
  .disappear-bbb{
    display: none;
  }
}

@media (min-width: 568px) {
  .disappear-bb{
    display: none;
  }
}

@media (min-width: 380px) {
  .disappear-b{
    display: none;
  }
}

a.tabbies {font-size: 14px;}
@media only screen and (min-width: 800px){
   a.tabbies {font-size: 18px;}
}

.rsztabbies {
  font-size: 14px;
}
@media only screen and (min-width: 800px){
  .rsztabbies {
    font-size: 18px;
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Just+Another+Hand" rel="stylesheet" />