Good Admin Html Template for Back End Developers
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="utf-8" /> <title> ADMIN Portal HTML TEMPLATE</title> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <!-- bootstrap & fontawesome --> <link rel="stylesheet" href="assets/css/bootstrap.min.css" /> <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" /> <!-- page specific plugin styles --> <!-- text fonts --> <link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" /> <!-- ace styles --> <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" /> <!--[if lte IE 9]> <link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" /> <![endif]--> <!--[if lte IE 9]> <link rel="stylesheet" href="assets/css/ace-ie.min.css" /> <![endif]--> <!-- inline styles related to this page --> <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries --> <!--[if lte IE 8]> <script src="assets/js/html5shiv.min.js"></script> <script src="assets/js/respond.min.js"></script> <![endif]--> </head> <body class="no-skin"> <div id="navbar" class="navbar navbar-default ace-save-state"> <div class="navbar-container ace-save-state" id="navbar-container"> <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar"> <span class="sr-only">Toggle sidebar</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-header pull-left"> <a href="index.html" class="navbar-brand"> <small> <i class="fa fa-leaf"></i> ADMIN Portal HTML TEMPLATE </small> </a> </div> <div class="navbar-buttons navbar-header pull-right" role="navigation"> <ul class="nav ace-nav"> <li class="light-blue dropdown-modal"> <a data-toggle="dropdown" href="#" class="dropdown-toggle"> <span class="user-info"> <small>Welcome,</small> Wilson </span> <i class="ace-icon fa fa-caret-down"></i> </a> <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close"> <li> <a href="profile.html"> <i class="ace-icon fa fa-user"></i> Profile </a> </li> <li class="divider"></li> <li> <a href="#"> <i class="ace-icon fa fa-power-off"></i> Logout </a> </li> </ul> </li> </ul> </div> </div><!-- /.navbar-container --> </div> <div class="main-container ace-save-state" id="main-container"> <script type="text/javascript"> try{ace.settings.loadState('main-container')}catch(e){} </script> <div id="sidebar" class="sidebar responsive ace-save-state"> <script type="text/javascript"> try{ace.settings.loadState('sidebar')}catch(e){} </script> <ul class="nav nav-list"> <li class=""> <a href="#"> <i class="menu-icon fa fa-tachometer"></i> <span class="menu-text"> Dashboard </span> </a> <b class="arrow"></b> </li> <li class="active open"> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-file-o"></i> <span class="menu-text"> Tab One <span class="badge badge-primary">5</span> </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a href="#"> <i class="menu-icon fa fa-caret-right"></i> Page One </a> <b class="arrow"></b> </li> <li class="active"> <a href="#"> <i class="menu-icon fa fa-caret-right"></i> Page Two </a> <b class="arrow"></b> </li> </ul> </li> <li class=""> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-file-o"></i> <span class="menu-text"> Tab Two <span class="badge badge-primary">5</span> </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a href="#"> <i class="menu-icon fa fa-caret-right"></i> Page Three </a> <b class="arrow"></b> </li> <li class=""> <a href="#"> <i class="menu-icon fa fa-caret-right"></i> Page Four </a> <b class="arrow"></b> </li> </ul> </li> </ul><!-- /.nav-list --> <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse"> <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i> </div> </div> <div class="main-content"> <div class="main-content-inner"> <div class="breadcrumbs ace-save-state" id="breadcrumbs"> <ul class="breadcrumb"> <li> <i class="ace-icon fa fa-home home-icon"></i> <a href="#">Home</a> </li> <li> <a href="#">Other Pages</a> </li> <li class="active">Blank Page</li> </ul><!-- /.breadcrumb --> <div class="nav-search" id="nav-search"> <form class="form-search"> <span class="input-icon"> <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" /> <i class="ace-icon fa fa-search nav-search-icon"></i> </span> </form> </div><!-- /.nav-search --> </div> <div class="page-content"> <div class="row"> <div class="col-xs-12"> <!-- PAGE CONTENT BEGINS --> <!-- PAGE CONTENT ENDS --> </div><!-- /.col --> </div><!-- /.row --> </div><!-- /.page-content --> </div> </div><!-- /.main-content --> <div class="footer"> <div class="footer-inner"> <div class="footer-content"> <span class="bigger-120"> <span class="blue bolder">XXX</span> Application © 2013-2014 </span> </div> </div> </div> <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"> <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i> </a> </div><!-- /.main-container --> <!-- basic scripts --> <!--[if !IE]> --> <script src="assets/js/jquery-2.1.4.min.js"></script> <!-- <![endif]--> <!--[if IE]> <script src="assets/js/jquery-1.11.3.min.js"></script> <![endif]--> <script type="text/javascript"> if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>"); </script> <script src="assets/js/bootstrap.min.js"></script> <!-- page specific plugin scripts --> <!-- ace scripts --> <script src="assets/js/ace.min.js"></script> <!-- inline scripts related to this page --> </body> </html>
CSS/JS/Font reference resource
https://github.com/bopoda/ace/tree/master/assets