<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Starter Template for Bootstrap</title>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="http://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
</head>
<body>
<nav class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#">AdminPanel</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Dashboard</a></li>
<li><a href="pages.html">Pages</a></li>
<li><a href="posts.html">Post</a></li>
<li><a href="users.html">Users</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Welcome, User</a></li>
<li><a href="post.html">Logout</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<header id="header">
<div class="container">
<div class="row">
<div class="col-md-10">
<h1><i class="fas fa-cog"></i>
Dashboard <small>Manage your Site</small>
</h1>
</div>
<div class="col-md-2">
<!-- dropdown -->
<div class="dropdown create">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Create Content
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a type="button" data-toggle="modal" data-target="#addpage">Add Page</a></li>
<li><a href="#">Add Post </a></li>
<li><a href="#">Add User </a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<!-- section breadcrumb -->
<section id="breadcrumb">
<div class="container">
<div class="breadcrumb">
<li class="active">Dashboard</li>
</div>
</div>
</section>
<section id="main">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="list-group">
<a href="#" class="list-group-item active main-color-bg">
<i class="fas fa-cog"></i> Dashboard
</a>
<a href="pages.html" class="list-group-item"> <i class="fas fa-list-alt"></i> Pages <span
class="badge">12</span></a>
<a href="posts.html" class="list-group-item"><i class="fas fa-pencil-alt"></i> Posts <span
class="badge">33</span></a>
<a href="users.html" class="list-group-item"><i class="fas fa-user"></i> Users <span
class="badge">2</span></a>
</div>
<div class="well">
<h4>Disk Space Used</h4>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
<h4>Bandwidth Used</h4>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100" style="width: 20%;">
20%
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading main-color-bg">
<h3 class="panel-title">Panel Title</h3>
</div>
<div class="panel-body">
<div class="col-md-3">
<div class="well dash-box">
<h2><i class="fas fa-user"></i> 203</h2>
<h4>Users</h4>
</div>
</div>
<div class="col-md-3">
<div class="well dash-box">
<h2><i class="fas fa-pencil-alt"></i> 203</h2>
<h4>Posts</h4>
</div>
</div>
<div class="col-md-3">
<div class="well dash-box">
<h2><i class="fas fa-list-alt"></i> 203</h2>
<h4>Pages</h4>
</div>
</div>
<div class="col-md-3">
<div class="well dash-box">
<h2><i class="fas fa-chart-bar"></i> 203</h2>
<h4>Visitors</h4>
</div>
</div>
</div>
</div>
<!-- second panel -->
<div class="panel panel-default ">
<div class="panel-heading main-color-bg">
<h3 class="panel-title">Latest Users</h3>
</div>
<div class="panel-body">
<table class="table table-striped table-hover">
<tr>
<th>Name</th>
<th>Email</th>
<th>Joined</th>
</tr>
<tr>
<td>Qamar ABbas</td>
<td>qmarabbas715@gmail.com</td>
<td>Dec 13,2019</td>
</tr>
<tr>
<td>Kifayat ABbas</td>
<td>kifyatabbas715@gmail.com</td>
<td>Dec 13,2020</td>
</tr>
<tr>
<td>Mjan ABbas</td>
<td>mjantabbas715@gmail.com</td>
<td>Nov 13,2020</td>
</tr>
<tr>
<td>Qamar ABbas</td>
<td>qmarabbas715@gmail.com</td>
<td>Dec 13,2019</td>
</tr>
<tr>
<td>Kifayat ABbas</td>
<td>kifyatabbas715@gmail.com</td>
<td>Dec 13,2020</td>
</tr>
<tr>
<td>Mjan ABbas</td>
<td>mjantabbas715@gmail.com</td>
<td>Nov 13,2020</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<footer id="footer">
<p>Copyright Admin Pane, © 2020</p>
</footer>
<!-- Models -->
<!-- Addpage -->
<div class="modal fade" id="addpage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Page</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="">Page Title</label>
<input type="text" placeholder="Page Body" class="form-control">
</div>
<div class="form-group">
<label for="">Page Body</label>
<textarea name="editor1" id="" cols="30" rows="10" placeholder="Page Body"
class="form-control"></textarea>
</div>
<div class="form-group">
<label for="">
<input type="checkbox">Published
</label>
</div>
<div class="form-group">
<label for="">Meta Tags</label>
<input type="text" class="form-control" placeholder="Add some Tags...">
</div>
<div class="form-group">
<label for="">Meta Description</label>
<input type="text" class="form-control" placeholder="Add Meta Description...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn main-color-bg" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<script>
CKEDITOR.replace('editor1');
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
/* Gradient Color */
:root{
--sky:linear-gradient(180deg, #2af598 0%, #009efd 100%);
}
body{
background:#f4f4f4;
}
.navbar{
min-height: 33px !important;
margin-bottom: 0px;
border-radius:0;
}
.navbar-nav>li>a, .navbar-brand{
padding-top: 6px !important;
padding-bottom: 0!important;
height:33px;
}
.navbar-default .navbar-nav>li>a{
color: white;
}
.navbar {
background:var(--sky);
border:none;
}
.navbar .navbar-brand {
color: #000000;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
color: #ffffff;
}
.navbar .navbar-text {
color: #000000;
}
.navbar .navbar-text a {
color: #ffffff;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
color: #ffffff;
}
.navbar .navbar-nav .nav-link {
color: #000000;
border-radius: .25rem;
margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
color: #ffffff;
}
.navbar .navbar-nav .dropdown-menu {
background: #ff7000;
border-color: #21baa5;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item {
color: #000000;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
color: #ffffff;
background-color: #21baa5;
}
.navbar .navbar-nav .dropdown-menu .dropdown-divider {
border-top-color: #21baa5;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
color: #ffffff;
background-color: #21baa5;
}
.navbar .navbar-toggle {
border-color: #21baa5;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
background-color: #21baa5;
}
.navbar .navbar-toggle .navbar-toggler-icon {
color: #000000;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
border-color: #000000;
}
.navbar .navbar-link {
color: #000000;
}
.navbar .navbar-link:hover {
color: #ffffff;
}
/* custom */
a{
cursor:pointer;
}
.main-color-bg{
background: var(--sky) !important;
border:none;
color:#ffffff !important;
}
.dash-box{
text-align: center;
}
/* header */
#header{
background:#333333;
color:#ffff;
padding-bottom: 10px;
margin-bottom:15px;
}
#header .create{
padding-top:20px;
}
/* section-breadcrumb */
.breadcrumb{
background:#cccc;
columns: #333333;
}
.breadcrumb a{
columns: #333333;
}
/* progress bar */
.progress-bar{
background: var(--sky) !important;
color:white;
}
#footer{
background: #333333;
color:white;
text-align: center;
padding:30px;
margin-top:30px;
}
/* Login */
#login{
margin-top: 30px;
}
/* media queries for navigation */
@media (max-width: 575px) {
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
color: #000000;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffffff;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffffff;
background-color: #21baa5;
}
}
@media (max-width: 767px) {
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
color: #000000;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffffff;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffffff;
background-color: #21baa5;
}
}
@media (max-width: 991px) {
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
color: #000000;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffffff;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffffff;
background-color: #21baa5;
}
}
@media (max-width: 1199px) {
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
color: #000000;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffffff;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffffff;
background-color: #21baa5;
}
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
color: #000000;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffffff;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffffff;
background-color: #21baa5;
}
