"Admin Panel"
Bootstrap 3.3.0 Snippet by detain

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="sumit kumar"> <title>admin-template</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/font-awesome.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src="https://use.fontawesome.com/07b0ce5d10.js"></script> </head> <body> <!--============================= NAVIGATION =============================--> <!--top nav start=======--> <nav class="navbar navbar-inverse top-navbar" id="top-nav"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><img class="img-responsive" src="https://lh3.googleusercontent.com/-N4NB2F966TU/WM7V1KYusRI/AAAAAAAADtA/fPvGVNzOkCo7ZMqLI6pPITE9ZF7NONmawCJoC/w185-h40-p-rw/logo.png" width="150" height="20"></a> <a href="javascript:;" class="sidebar-toggle"> <i class="fa fa-bars"></i></a> <span class="close-btn" id="hide-btn"><i class="fa fa-times" aria-hidden="true"></i></span> </div> <ul class="social-icon pull-right list-inline"> <li class="dropdown"> <a class="messages-link dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-envelope"></span> <span class="number">4</span> <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 class="dropdown"> <a class="alerts-link dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-bell"></span> <span class="number">6</span> <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 class="dropdown"> <a class="tasks-link dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-th-list"></span> <span class="number">11</span> <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 class="dropdown"> <a class="user-link dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span> <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> <!-- top nav end===========--> <!-- begin SIDE NAV USER PANEL --> <div class="container-1" id="user-profil"> <ul id="side" class="nav navbar-nav-1 side-nav"> <li class="side-user"> <img class="img-circle" src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg" alt="sumit kumar"> <p class="welcome"><i class="fa fa-key"></i> Logged in as</p> <p class="name tooltip-sidebar-logout"> Sumit <span class="last-name">Kumar</span> <a href="#"><i class="fa fa-sign-out"></i></a> </p> </li> <li class="nav-search"> <form class="navbar-form"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form> </li> <li class="dashboard"> <a class="active" href="#"><i class="fa fa-dashboard"></i> Dashboard</a> </li> <li class="panel"> <a href="javascript:;" data-toggle="collapse" data-target="#charts"> <i class="fa fa-bar-chart-o"></i> Charts <i class="fa fa-caret-down pull-right"></i> </a> <ul class="collapse nav" id="charts"> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Flot Charts</a> </li> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Morris.js</a> </li> </ul> </li> <li class="panel"> <a href="javascript:;" data-toggle="collapse" data-target="#calendar"> <i class="fa fa-calendar"></i> calendar <i class="fa fa-caret-down pull-right"></i> </a> <ul class="collapse nav" id="calendar"> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Flot Charts</a> </li> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Morris.js</a> </li> </ul> </li> <li class="panel"> <a href="javascript:;" data-toggle="collapse" data-target="#clipboard"> <i class="fa fa-clipboard"></i> clipboard <i class="fa fa-caret-down pull-right"></i> </a> <ul class="collapse nav" id="clipboard"> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Flot Charts</a> </li> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Morris.js</a> </li> </ul> </li> <li class="panel"> <a href="javascript:;" data-toggle="collapse" data-target="#edit"> <i class="fa fa-edit"></i> edit <i class="fa fa-caret-down pull-right"></i> </a> <ul class="collapse nav" id="edit"> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Flot Charts</a> </li> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Morris.js</a> </li> </ul> </li> <li class="panel"> <a href="javascript:;" data-toggle="collapse" data-target="#inbox"> <i class="fa fa-inbox"></i> inbox <i class="fa fa-caret-down pull-right"></i> </a> <ul class="collapse nav" id="inbox"> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Flot Charts</a> </li> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Morris.js</a> </li> </ul> </li> <li class="panel"> <a href="javascript:;" data-toggle="collapse" data-target="#cogs"> <i class="fa fa-cogs"></i> cogs <i class="fa fa-caret-down pull-right"></i> </a> <ul class="collapse nav" id="cogs"> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Flot Charts</a> </li> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Morris.js</a> </li> </ul> </li> <li class="panel"> <a href="javascript:;" data-toggle="collapse" data-target="#paper"> <i class="fa fa-paper-plane"></i> paper <i class="fa fa-caret-down pull-right"></i> </a> <ul class="collapse nav" id="paper"> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Flot Charts</a> </li> <li> <a href="#"><i class="fa fa-angle-double-right"></i> Morris.js</a> </li> </ul> </li> </ul> </div> <div class="container-2"> <div id="page-wrapper"> <div class="row"> <div class="col-md-12"> <div class="page-title"> <h2>Dashboard<small>Content Overview</small></h2> <ol class="breadcrumb"> <li class="active"><i class="fa fa-dashboard"></i> Dashboard</li> <li class="pull-right"> <div id="reportrange" class="btn btn-green btn-square date-picker"> <i class="fa fa-calendar"></i> <span class="date-range">February 15, 2017 - March 16, 2017</span> <i class="fa fa-caret-down"></i> </div> </li> </ol> </div> </div> </div> <div class="row" > <div class="col-lg-2 col-sm-6"> <div class="circle-tile"> <a href="#"> <div class="circle-tile-heading dark-blue"> <i class="fa fa-users fa-fw fa-3x"></i> </div> </a> <div class="circle-tile-content dark-blue"> <div class="circle-tile-description text-faded"> Users </div> <div class="circle-tile-number text-faded"> 265 <span id="sparklineA"></span> </div> <a href="#" class="circle-tile-footer">More Info <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="col-lg-2 col-sm-6"> <div class="circle-tile"> <a href="#"> <div class="circle-tile-heading green"> <i class="fa fa-money fa-fw fa-3x"></i> </div> </a> <div class="circle-tile-content green"> <div class="circle-tile-description text-faded"> Revenue </div> <div class="circle-tile-number text-faded"> $32,384 </div> <a href="#" class="circle-tile-footer">More Info <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="col-lg-2 col-sm-6"> <div class="circle-tile"> <a href="#"> <div class="circle-tile-heading orange"> <i class="fa fa-bell fa-fw fa-3x"></i> </div> </a> <div class="circle-tile-content orange"> <div class="circle-tile-description text-faded"> Alerts </div> <div class="circle-tile-number text-faded"> 9 New </div> <a href="#" class="circle-tile-footer">More Info <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="col-lg-2 col-sm-6"> <div class="circle-tile"> <a href="#"> <div class="circle-tile-heading blue"> <i class="fa fa-tasks fa-fw fa-3x"></i> </div> </a> <div class="circle-tile-content blue"> <div class="circle-tile-description text-faded"> Tasks </div> <div class="circle-tile-number text-faded"> 10 <span id="sparklineB"></span> </div> <a href="#" class="circle-tile-footer">More Info <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="col-lg-2 col-sm-6"> <div class="circle-tile"> <a href="#"> <div class="circle-tile-heading red"> <i class="fa fa-shopping-cart fa-fw fa-3x"></i> </div> </a> <div class="circle-tile-content red"> <div class="circle-tile-description text-faded"> Orders </div> <div class="circle-tile-number text-faded"> 24 <span id="sparklineC"></span> </div> <a href="#" class="circle-tile-footer">More Info <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="col-lg-2 col-sm-6"> <div class="circle-tile"> <a href="#"> <div class="circle-tile-heading purple"> <i class="fa fa-comments fa-fw fa-3x"></i> </div> </a> <div class="circle-tile-content purple"> <div class="circle-tile-description text-faded"> Mentions </div> <div class="circle-tile-number text-faded"> 96 <span id="sparklineD"></span> </div> <a href="#" class="circle-tile-footer">More Info <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> </div> <div class="row"> <div class="col-lg-3"> <div class="tile tile-img tile-time morning" style="height: 200px"> <p class="time-widget"> <span class="time-widget-heading">It Is Currently</span> <br> <strong><span id="datetime">Friday<br>March 17th, 2017<br>12:43:17 PM</span></strong> </p> </div> </div> <div class="col-lg-9"></div> </div> </div><!-- page-wrapper END--> </div><!-- container-1 END--> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".sidebar-toggle").click(function(){ $(this).hide(); $("#user-profil").show(); $("#hide-btn").show(); $(".container-2").css("width", "85%"); }); $("#hide-btn").click(function(){ $(this).hide(); $("#user-profil").hide(); $(".sidebar-toggle").show(); $(".container-2").css("width", "100%"); }); }); </script> </body> </html>
body{background-color: #ecf0f1;} .navbar-inverse { background-color: #2C3E50; border-color: #2C3E50; } .navbar { position: relative; min-height: 50px; margin-bottom: 0px; border: 0px solid transparent; } .navbar-nav > li > a { padding-top: 20px; padding-bottom: 10px; line-height: 20px; } @media (min-width: 768px){ .navbar { border-radius: 0px; }} .navbar-brand { float: left; height: auto; padding: 15px 15px; font-size: 18px; line-height: 20px; } .sidebar-toggle { color: #fff; font-size: 28px; display: inline-block; padding: 3px 22px; } @media (min-width:768px){ .container-1{width:15%;float:left;} .container-2{width:100%;float: left;} } @media (max-width:768px){ .container-1{width:100%;} .container-2{width:100%;} } .container-1:after, .container-2:before, { display: table; content: " "; } .container-1:after, .container-2:after, {clear: both;} .container-1{display: none;} /*navbar-right=====START==========*/ .social-icon{margin:0px;padding:0px;} .social-icon li {margin: 0px;padding: 0px;list-style-type: none;} .social-icon li a { display: block; padding: 15px 14px; text-decoration:none; } .social-icon li a:focus{ color:#fff; text-decoration:none; } .messages-link{ color: #fff !important; background: #16a085 !important; } .alerts-link{ color: #fff !important; background: #f39c12 !important; } .tasks-link{ color: #fff !important; background: #2980b9 !important; } .user-link{ color: #fff !important; background: #E74C3C !important; } .number { position: absolute; bottom: 25px; left: 3px; width: 20px; height: 20px; padding-right: 1px; border-radius: 50%; text-align: center; font-size: 11px; line-height: 20px; background-color: #2c3e50; } .dropdown-menu { position: absolute; top: 100%; left: -105px; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } /*navbar-right=======END========*/ /*sidebar-toggle=============*/ .sidebar-toggle:hover, .sidebar-toggle:focus { color: #fff; text-decoration: underline; } /*sidr-NAVBAR=======START========*/ .navbar-nav-1{width: 100%;background-color:#34495E;height:auto;overflow: hidden;z-index: 1020;position: relative;} .side-user { display: block; width: 100%; padding: 15px; border-top: none !important; border-bottom: 1px solid #142638; text-align: center; } .close-btn { position: absolute; z-index: 99; color: #fff; font-size: 31px; top: 0px; left: 223px; display: none; padding: 0px; cursor: pointer; } .close-btn .fa-window-close{color:#fff;font-size: 25px;} .welcome { margin: 0; font-style: italic; color: #9aa4af; } .name { margin: 0; font-family: "Ubuntu","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 20px; font-weight: 300; color: #ccd1d7; } .side-user a{ color:#fff; } .nav-search{border-top: 1px solid #54677a;} .nav-search .form-control{border: 1px solid #000;border-radius: 0px;} .nav-search .btn{border: 1px solid #000;border-radius: 0px;} .dashboard>a{ color:#fff; } .side-nav li { border-top: 1px solid #54677a; border-bottom: 1px solid #142638; } .side-nav>li>a:active { text-shadow: 1px 1px 1px rgba(0,0,0,0.1); outline: none; color: #fff; background-color: #34495e; } .panel { margin-bottom: 0; border: none; border-radius: 0; background-color: transparent; box-shadow: none; } .panel>a{ position: relative; display: block; padding: 10px 15px; color: #fff; } .panel>ul>li>a { position: relative; display: block; padding: 10px 15px; color: darkcyan; background: black; } .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #3d566e; } /*sidr-NAVBAR=======END========*/ @media (min-width: 768px){ #page-wrapper { padding: 0 30px; min-height: 1300px; border-left: 1px solid #2c3e50; } } #page-wrapper { padding: 0 15px; border: none; } .date-picker{ border-color: #138871; color: #fff; background-color: #149077; margin-top: -7px; border-radius: 0px; margin-right: -15px; } #page-wrapper .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #e0e7e8; border-radius: 0px; } @media (min-width: 768px){ .circle-tile { margin-bottom: 30px; } } .circle-tile { margin-bottom: 15px; text-align: center; } .circle-tile-heading { position: relative; width: 80px; height: 80px; margin: 0 auto -40px; border: 3px solid rgba(255,255,255,0.3); border-radius: 100%; color: #fff; transition: all ease-in-out .3s; } /* -- Background Helper Classes */ /* Use these to cuztomize the background color of a div. These are used along with tiles, or any other div you want to customize. */ .dark-blue { background-color: #34495e; } .green { background-color: #16a085; } .blue { background-color: #2980b9; } .orange { background-color: #f39c12; } .red { background-color: #e74c3c; } .purple { background-color: #8e44ad; } .dark-gray { background-color: #7f8c8d; } .gray { background-color: #95a5a6; } .light-gray { background-color: #bdc3c7; } .yellow { background-color: #f1c40f; } /* -- Text Color Helper Classes */ .text-dark-blue { color: #34495e; } .text-green { color: #16a085; } .text-blue { color: #2980b9; } .text-orange { color: #f39c12; } .text-red { color: #e74c3c; } .text-purple { color: #8e44ad; } .text-faded { color: rgba(255,255,255,0.7); } .circle-tile-heading .fa { line-height: 80px; } .circle-tile-content { padding-top: 50px; } .circle-tile-description { text-transform: uppercase; } .text-faded { color: rgba(255,255,255,0.7); } .circle-tile-number { padding: 5px 0 15px; font-size: 26px; font-weight: 700; line-height: 1; } .circle-tile-footer { display: block; padding: 5px; color: rgba(255,255,255,0.5); background-color: rgba(0,0,0,0.1); transition: all ease-in-out .3s; } .circle-tile-footer:hover { text-decoration: none; color: rgba(255,255,255,0.5); background-color: rgba(0,0,0,0.2); } .morning { background: url(https://lh3.googleusercontent.com/-1YbV7nsVnX8/WMugaq-6BEI/AAAAAAAADSg/0wPfQ84vMUcCle_SkgiUDOumUKscMaA8QCL0B/w530-d-h353-p-rw/widget-bg-morning.jpg) center bottom no-repeat; background-size: cover; } .time-widget { margin-top: 5px; overflow: hidden; text-align: center; font-size: 1.75em; } .time-widget-heading { text-transform: uppercase; font-size: .5em; font-weight: 400; color: #fff; } #datetime{color:#fff;} .tile-img { text-shadow: 2px 2px 3px rgba(0,0,0,0.9); } .tile { margin-bottom: 15px; padding: 15px; overflow: hidden; color: #fff; }

Related: See More


Questions / Comments: