Flat Responsive Dashboard Design Using Bootstrap
HTML CODE:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"><body class="home">
<div class="container-fluid display-table">
<div class="row display-table-row">
<div class="col-md-2 col-sm-1 hidden-xs display-table-cell v-align box" id="navigation">
<div class="logo">
<a hef="home.html"><img src="http://jskrishna.com/work/merkury/images/logo.png" alt="merkery_logo" class="hidden-xs hidden-sm">
<img src="http://jskrishna.com/work/merkury/images/circle-logo.png" alt="merkery_logo" class="visible-xs visible-sm circle-logo">
</a>
</div>
<div class="navi">
<ul>
<li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Home</span></a></li>
<li><a href="#"><i class="fa fa-tasks" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Workflow</span></a></li>
<li><a href="#"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Statistics</span></a></li>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Calender</span></a></li>
<li><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Users</span></a></li>
<li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Setting</span></a></li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-11 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">
<li class="hidden-xs"><a href="#" class="add-project" data-toggle="modal" data-target="#add_project">Add Project</a></li>
<li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
<li>
<a href="#" class="icon-info">
<i class="fa fa-bell" aria-hidden="true"></i>
<span class="label label-primary">3</span>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="http://jskrishna.com/work/merkury/images/user-pic.jpg" alt="user">
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="navbar-content">
<span>JS Krishna</span>
<p class="text-muted small">
me@jskrishna.com
</p>
<div class="divider">
</div>
<a href="#" class="view btn-sm active">View Profile</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</header>
</div>
<div class="user-dashboard">
<h1>Hello, JS</h1>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-12 gutter">
<div class="sales">
<h2>Your Sale</h2>
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Period:</span> Last Year
</button>
<div class="dropdown-menu">
<a href="#">2012</a>
<a href="#">2014</a>
<a href="#">2015</a>
<a href="#">2016</a>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12 gutter">
<div class="sales report">
<h2>Report</h2>
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Period:</span> Last Year
</button>
<div class="dropdown-menu">
<a href="#">2012</a>
<a href="#">2014</a>
<a href="#">2015</a>
<a href="#">2016</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="add_project" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header login-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Project</h4>
</div>
<div class="modal-body">
<input type="text" placeholder="Project Title" name="name">
<input type="text" placeholder="Post of Post" name="mail">
<input type="text" placeholder="Author" name="passsword">
<textarea placeholder="Desicrption"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="cancel" data-dismiss="modal">Close</button>
<button type="button" class="add-project" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
</body>
CSS CODE:
/*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: 28px 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;
}
.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: 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%;
}
}
JS CODE:
$(document).ready(function(){$('[data-toggle="offcanvas"]').click(function(){
$("#navigation").toggleClass("hidden-xs");
});
});
Flat Responsive Dashboard Design Using Bootstrap
Reviewed by Anonymous
on
February 28, 2017
Rating:
Reviewed by Anonymous
on
February 28, 2017
Rating:
No comments: