<!DOCTYPE html>
<html lang="en">
<head>
<title>
Ribbon
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
.removeBtm {
margin-bottom: 0px;
}
.projClr {
border-color: #69cee6;
background: #70ddf7;
}
.navbar-default .navbar-brand {
color: #FFFFFF;
}
.iconNav li a {
text-align: center;
font-size: 12px;
width: 80px;
}
.forHover .navbar-nav > li > a:focus, .forHover .navbar-nav > li > a:hover {
color: orange;
}
.navbar {
border-radius: 0px;
}
.leftBorder {
padding-right: 5px;
border-right: 4px solid white;
height: 127px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default removeBtm projClr">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
EVALUTION
</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Page 1-1
</a>
</li>
<li>
<a href="#">
Page 1-2
</a>
</li>
<li>
<a href="#">
Page 1-3
</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right ">
<li>
<a href="#">
Demo Liceance
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-cog "></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Page 1-1
</a>
</li>
<li>
<a href="#">
Page 1-2
</a>
</li>
<li>
<a href="#">
Page 1-3
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse removeBtm">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>
<a href="#">
File
</a>
</li>
<li class="active">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Patient
</a>
</li>
<li>
<a href="#">
Account
</a>
</li>
<li>
<a href="#">
Claims
</a>
</li>
<li>
<a href="#">
Tools
</a>
</li>
<li>
<a href="#">
Utilities
</a>
</li>
<li>
<a href="#">
Reports
</a>
</li>
<li>
<a href="#">
ManageMyHealth
</a>
</li>
<li>
<a href="#">
ConnectedCare
</a>
</li>
<li>
<a href="#">
CBIT
</a>
</li>
<li>
<a href="#">
ToolBar
</a>
</li>
<li>
<a href="#">
Help
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Page 1-1
</a>
</li>
<li>
<a href="#">
Page 1-2
</a>
</li>
<li>
<a href="#">
Page 1-3
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<table class="buttonHolderTable" style="height: auto !important;overflow:hidden;">
<tr>
<th colspan="4" style="background-color: #FFFFFF;font-weight: normal;text-align: left;padding-right: 293px;padding-top: 6px;padding-bottom: 6px;">
PATIENT
</th>
<th colspan="4" style="background-color: #FFFFFF;font-weight: normal;text-align: left;padding-right: 557px;">
APPOINMENT
</th>
<th colspan="4" style="background-color: #FFFFFF;font-weight: normal;text-align: left;padding-right: 57px;">
TASK MANAGER
</th>
<th colspan="4" style="background-color: #FFFFFF;font-weight: normal;text-align: left;padding-right: 364px;">
INBOX
</th>
<th colspan="4" style="background-color: #FFFFFF;font-weight: normal;text-align: left;padding-right: 61px;">
SMS
</th>
<th colspan="4" style="background-color: #FFFFFF;font-weight: normal;text-align: left;padding-right: 146px;">
MISC
</th>
</tr>
</table>
<nav class="navbar navbar-default removeBtm forHover">
<div class="container-fluid">
<ul class="nav navbar-nav iconNav">
<li class="dropdown">
<a class="dropdown-toggle fa fa-plus-circle fa-2x" data-toggle="dropdown" href="#">
<p>
New
</p>
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Page 1-1
</a>
</li>
<li>
<a href="#">
Page 1-2
</a>
</li>
<li>
<a href="#">
Page 1-3
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="fa fa-search fa-2x">
</span>
<p>
Search
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-address-card fa-2x">
</span>
<p>
Patient Register
</p>
</a>
</li>
<li class="leftBorder">
<a href="#">
<span class="fa fa-desktop fa-2x">
</span>
<p>
Kiosk Action
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-calendar fa-2x">
</span>
<p>
Apponment Books
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-book fa-2x">
</span>
<p>
Apponment pad
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-sign-out fa-2x">
</span>
<p>
Queue Workflow
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-credit-card fa-2x">
</span>
<p>
Status Screen
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-bell-o fa-2x">
</span>
<p>
Waiting List
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-user-secret fa-2x">
</span>
<p>
Admin Notes
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-newspaper-o fa-2x">
</span>
<p>
Worklist
</p>
</a>
</li>
<li class="leftBorder">
<a href="#">
<span class="fa fa-clipboard fa-2x">
</span>
<p>
Widget
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-plus-circle fa-2x">
</span>
<p>
Staff Task
</p>
</a>
</li>
<li class="leftBorder">
<a href="#">
<span class="fa fa-user-plus fa-2x">
</span>
<p>
Patient Task
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-inbox fa-2x">
</span>
<p>
Provider Inbox
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-eraser fa-2x">
</span>
<p>
Scanning
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-paperclip fa-2x">
</span>
<p>
Attachment Manager
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-id-card-o fa-2x">
</span>
<p>
Recall Contact
</p>
</a>
</li>
<li class="leftBorder">
<a href="#">
<span class="fa fa-bullhorn fa-2x">
</span>
<p>
Notifications Inbox
</p>
</a>
</li>
<li class="leftBorder">
<a href="#">
<span class="fa fa-mobile fa-2x">
</span>
<p>
Compose SMS
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-tag fa-2x">
</span>
<p>
Label
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-television fa-2x">
</span>
<p>
Open User Workspace
</p>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-users fa-2x">
</span>
<p>
Search Address Book
</p>
</a>
</li>
</ul>
</div>
</nav>
<div class="container"></div>
</body>
</html>