Admin templates are a set of web pages, built with HTML, CSS, and JavaScript or any JavaScript libraries used to create the user interface of the backend of a web application. These pre-built pages are integrated with the web application for doing backend tasks like maintaining the website, user and content management, installation and configuration of website software, and tracking data like network traffic and user visits to the website, to improve the performance of the website. Admin template makes your work easy it saves developer time and effort. You don’t need to work from scratch.
In this article, we will get know-how HTML admin templates used in PHP? Before we start let’s take a brief idea of what is PHP? And why admin template uses?
What is PHP? And why admin template uses?
PHP stands for Hypertext Preprocessor; It is a server-side scripting language. It is used to develop Static websites or Dynamic websites or Web applications. PHP stands for Hypertext Pre-processor, which earlier stood for Personal Home Pages.
Admin template helps you to make development easier because it contains ready-to-use pages and elements (like widgets, charts, and icons) that you can push to prod in almost no time instead of getting bogged down in development from scratch. That’s what templates are. Time-saving at its finest. .With the time saved come reduced costs.
How to Use the HTML Admin template in PHP?
For understanding this concept via example. Let’s take an admin template. I have a gradient able.
Step 1: Create an index.php page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient Able bootstrap admin template by codedthemes </title>
<!-- Meta -->
<?php ecoh include 'include/meta-tag.php' ?>
<!-- Favicon, Google Font, Icons, Common Style -->
<?php ecoh include 'include/common-style.php' ?>
</head>
<body>
<!-- Pro Button -->
<div class="fixed-button">
<a href="https://codedthemes.com/item/gradient-able-admin-template" target="_blank" class="btn btn-md btn-primary">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> Upgrade To Pro
</a>
</div>
<!-- Loader -->
<?php ecoh include 'include/loader.php' ?>
<!-- Basic Layout -->
<div id="pcoded" class="pcoded">
<div class="pcoded-overlay-box"></div>
<div class="pcoded-container navbar-wrapper">
<!-- Theme Header -->
<?php ecoh include 'include/header.php' ?>
<div class="pcoded-main-container">
<div class="pcoded-wrapper">
<!-- Theme Sidebar -->
<?php ecoh include 'include/sidebar.php' ?>
<div class="pcoded-content">
<div class="pcoded-inner-content">
<div class="main-body">
<div class="page-wrapper">
<!-- Page Main Content -->
<?php ecoh include 'views/dashboard.php' ?>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Theme Footer -->
<?php ecoh include 'include/footer.php' ?>
</div>
</div>
<!-- Common & Custom Js -->
<?php ecoh include 'include/common-js.php' ?>
</body>
</html>
NOTE: Save the file with the .php extension.
Step 2: After creating a page add a header section in the page.
In header section contain 2 pages first for the common style sheet and 2nd for the meta tag and external stylesheet.
Create a common style sheet via the following code.
<!-- Favicon icon -->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- Google font-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<!-- Required Fremwork -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap/css/bootstrap.min.css">
<!-- themify-icons line icon -->
<link rel="stylesheet" type="text/css" href="assets/icon/themify-icons/themify-icons.css">
<link rel="stylesheet" type="text/css" href="assets/icon/font-awesome/css/font-awesome.min.css">
<!-- ico font -->
<link rel="stylesheet" type="text/css" href="assets/icon/icofont/css/icofont.css">
<!-- Style.css -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/jquery.mCustomScrollbar.css">
Create a meta.php page. It contains the information of Meta title, Meta description; in header section also include the link of the stylesheet. Refer to below code for this:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Gradient Able Bootstrap admin template made using Bootstrap 4. The starter version of Gradient Able is completely free for personal project." />
<meta name="keywords" content="free dashboard template, free admin, free bootstrap template, bootstrap admin template, admin theme, admin dashboard, dashboard template, admin template, responsive" />
<meta name="author" content="codedthemes">
Step 3: Include loader.php page. It loads the pre-loader normally when you visit a website, your browser starts downloading different parts of the content. To include loader put following code.
<div class="theme-loader">
<div class="loader-track">
<div class="loader-bar"></div>
</div>
</div>
Step 4: Create header.php page.
In the header section, there are two different sections:
1)Include siderbar.php. Add following code.
<nav class="pcoded-navbar">
<div class="sidebar_toggle"><a href="#"><i class="icon-close icons"></i></a></div>
<div class="pcoded-inner-navbar main-menu">
<div class="pcoded-navigatio-lavel" data-i18n="nav.category.navigation">Layout</div>
<ul class="pcoded-item pcoded-left-item">
<li class="active">
<a href="index.html">
<span class="pcoded-micon"><i class="ti-home"></i><b>D</b></span>
<span class="pcoded-mtext" data-i18n="nav.dash.main">Dashboard</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-layout-grid2-alt"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.main">Components</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="accordion.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Accordion</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="breadcrumb.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Breadcrumbs</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="button.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Button</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="tabs.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Tabs</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="color.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Color</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="label-badge.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Label Badge</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="tooltip.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Tooltip</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="typography.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Typography</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="notification.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Notification</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-themify.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Themify</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigatio-lavel" data-i18n="nav.category.forms">Forms & Tables</div>
<ul class="pcoded-item pcoded-left-item">
<li>
<a href="form-elements-component.html">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext" data-i18n="nav.form-components.main">Form Components</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li>
<a href="bs-basic-table.html">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext" data-i18n="nav.form-components.main">Basic Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
<div class="pcoded-navigatio-lavel" data-i18n="nav.category.forms">Chart & Maps</div>
<ul class="pcoded-item pcoded-left-item">
<li>
<a href="chart.html">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext" data-i18n="nav.form-components.main">Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li>
<a href="map-google.html">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext" data-i18n="nav.form-components.main">Maps</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-layout-grid2-alt"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.main">Pages</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="auth-normal-sign-in.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Login</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="auth-sign-up.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Register</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="sample-page.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Sample Page</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigatio-lavel" data-i18n="nav.category.other">Other</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-direction-alt"></i><b>M</b></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.main">Menu Levels</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.menu-level-21">Menu Level 2.1</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-direction-alt"></i></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.menu-level-22.main">Menu Level 2.2</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.menu-level-22.menu-level-31">Menu Level 3.1</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.menu-level-23">Menu Level 2.3</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
2)The second section contains a dynamic container page. Add following code.
<div class="page-body">
<div class="row">
<!-- order-card start -->
<div class="col-md-6 col-xl-3">
<div class="card bg-c-blue order-card">
<div class="card-block">
<h6 class="m-b-20">Orders Received</h6>
<h2 class="text-right"><i class="ti-shopping-cart f-left"></i><span>486</span></h2>
<p class="m-b-0">Completed Orders<span class="f-right">351</span></p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="card bg-c-green order-card">
<div class="card-block">
<h6 class="m-b-20">Total Sales</h6>
<h2 class="text-right"><i class="ti-tag f-left"></i><span>1641</span></h2>
<p class="m-b-0">This Month<span class="f-right">213</span></p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="card bg-c-yellow order-card">
<div class="card-block">
<h6 class="m-b-20">Revenue</h6>
<h2 class="text-right"><i class="ti-reload f-left"></i><span>$42,562</span></h2>
<p class="m-b-0">This Month<span class="f-right">$5,032</span></p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="card bg-c-pink order-card">
<div class="card-block">
<h6 class="m-b-20">Total Profit</h6>
<h2 class="text-right"><i class="ti-wallet f-left"></i><span>$9,562</span></h2>
<p class="m-b-0">This Month<span class="f-right">$542</span></p>
</div>
</div>
</div>
<!-- order-card end -->
<!-- statustic and process start -->
<div class="col-lg-8 col-md-12">
<div class="card">
<div class="card-header">
<h5>Statistics</h5>
<div class="card-header-right">
<ul class="list-unstyled card-option">
<li><i class="fa fa-chevron-left"></i></li>
<li><i class="fa fa-window-maximize full-card"></i></li>
<li><i class="fa fa-minus minimize-card"></i></li>
<li><i class="fa fa-refresh reload-card"></i></li>
<li><i class="fa fa-times close-card"></i></li>
</ul>
</div>
</div>
<div class="card-block">
<canvas id="Statistics-chart" height="200"></canvas>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="card">
<div class="card-header">
<h5>Customer Feedback</h5>
</div>
<div class="card-block">
<span class="d-block text-c-blue f-24 f-w-600 text-center">365247</span>
<canvas id="feedback-chart" height="100"></canvas>
<div class="row justify-content-center m-t-15">
<div class="col-auto b-r-default m-t-5 m-b-5">
<h4>83%</h4>
<p class="text-success m-b-0"><i class="ti-hand-point-up m-r-5"></i>Positive</p>
</div>
<div class="col-auto m-t-5 m-b-5">
<h4>17%</h4>
<p class="text-danger m-b-0"><i class="ti-hand-point-down m-r-5"></i>Negative</p>
</div>
</div>
</div>
</div>
</div>
<!-- statustic and process end -->
<!-- tabs card start -->
<div class="col-sm-12">
<div class="card tabs-card">
<div class="card-block p-0">
<!-- Nav tabs -->
<ul class="nav nav-tabs md-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home3" role="tab"><i class="fa fa-home"></i>Home</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile3" role="tab"><i class="fa fa-key"></i>Security</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages3" role="tab"><i class="fa fa-play-circle"></i>Entertainment</a>
<div class="slide"></div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings3" role="tab"><i class="fa fa-database"></i>Big Data</a>
<div class="slide"></div>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content card-block">
<div class="tab-pane active" id="home3" role="tabpanel">
<div class="table-responsive">
<table class="table">
<tr>
<th>Image</th>
<th>Product Code</th>
<th>Customer</th>
<th>Purchased On</th>
<th>Status</th>
<th>Transaction ID</th>
</tr>
<tr>
<td><img src="assets/images/product/prod2.jpg" alt="prod img" class="img-fluid"></td>
<td>PNG002344</td>
<td>John Deo</td>
<td>05-01-2017</td>
<td><span class="label label-danger">Faild</span></td>
<td>#7234486</td>
</tr>
<tr>
<td><img src="assets/images/product/prod3.jpg" alt="prod img" class="img-fluid"></td>
<td>PNG002653</td>
<td>Eugine Turner</td>
<td>04-01-2017</td>
<td><span class="label label-success">Delivered</span></td>
<td>#7234417</td>
</tr>
<tr>
<td><img src="assets/images/product/prod4.jpg" alt="prod img" class="img-fluid"></td>
<td>PNG002156</td>
<td>Jacqueline Howell</td>
<td>03-01-2017</td>
<td><span class="label label-warning">Pending</span></td>
<td>#7234454</td>
</tr>
</table>
</div>
<div class="text-center">
<button class="btn btn-outline-primary btn-round btn-sm">Load More</button>
</div>
</div>
<div class="tab-pane" id="profile3" role="tabpanel">
<div class="table-responsive">
<table class="table">
<tr>
<th>Image</th>
<th>Product Code</th>
<th>Customer</th>
<th>Purchased On</th>
<th>Status</th>
<th>Transaction ID</th>
</tr>
<tr>
<td><img src="assets/images/product/prod3.jpg" alt="prod img" class="img-fluid"></td>
<td>PNG002653</td>
<td>Eugine Turner</td>
<td>04-01-2017</td>
<td><span class="label label-success">Delivered</span></td>
<td>#7234417</td>
</tr>
<tr>
<td><img src="assets/images/product/prod4.jpg" alt="prod img" class="img-fluid"></td>
<td>PNG002156</td>
<td>Jacqueline Howell</td>
<td>03-01-2017</td>
<td><span class="label label-warning">Pending</span></td>
<td>#7234454</td>
</tr>
</table>
</div>
<div class="text-center">
<button class="btn btn-outline-primary btn-round btn-sm">Load More</button>
</div>
</div>
<div class="tab-pane" id="messages3" role="tabpanel">
<div class="table-responsive">
<table class="table">
<tr>
<th>Image</th>
<th>Product Code</th>
<th>Customer</th>
<th>Purchased On</th>
<th>Status</th>
<th>Transaction ID</th>
</tr>
<tr>
<td><img src="assets/images/product/prod1.jpg" alt="prod img" class="img-fluid"></td>
<td>PNG002413</td>
<td>Jane Elliott</td>
<td>06-01-2017</td>
<td><span class="label label-primary">Shipping</span></td>
<td>#7234421</td>
</tr>
<tr>
<td><img src="assets/images/product/prod4.jpg" alt="prod img" class="img-fluid"></td>
<td>PNG002156</td>
<td>Jacqueline Howell</td>
<td>03-01-2017</td>
<td><span class="label label-warning">Pending</span></td>
<td>#7234454</td>
</tr>
</table>
</div>
<div class="text-center">
<button class="btn btn-outline-primary btn-round btn-sm">Load More</button>
</div>
</div>
<div class="tab-pane" id="settings3" role="tabpanel">
<div class="table-responsive">
<table class="table">
<tr>
<th>Image</th>
<th>Product Code</th>
<th>Customer</th>
<th>Purchased On</th>
<th>Status</th>
<th>Transaction ID</th>
</tr>
<tr>
<td><img src="assets/images/product/prod1.jpg" alt="prod img" class="img-fluid"></td>
<td>PNG002413</td>
<td>Jane Elliott</td>
<td>06-01-2017</td>
<td><span class="label label-primary">Shipping</span></td>
<td>#7234421</td>
</tr>
<tr>
<td><img src="assets/images/product/prod2.jpg" alt="prod img" class="img-fluid"></td>
<td>PNG002344</td>
<td>John Deo</td>
<td>05-01-2017</td>
<td><span class="label label-danger">Faild</span></td>
<td>#7234486</td>
</tr>
</table>
</div>
<div class="text-center">
<button class="btn btn-outline-primary btn-round btn-sm">Load More</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- tabs card end -->
<!-- social statustic start -->
<div class="col-md-12 col-lg-4">
<div class="card">
<div class="card-block text-center">
<i class="fa fa-envelope-open text-c-blue d-block f-40"></i>
<h4 class="m-t-20"><span class="text-c-blue">8.62k</span> Subscribers</h4>
<p class="m-b-20">Your main list is growing</p>
<button class="btn btn-primary btn-sm btn-round">Manage List</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-block text-center">
<i class="fa fa-twitter text-c-green d-block f-40"></i>
<h4 class="m-t-20"><span class="text-c-blgreenue">+40</span> Followers</h4>
<p class="m-b-20">Your main list is growing</p>
<button class="btn btn-success btn-sm btn-round">Check them out</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-block text-center">
<i class="fa fa-puzzle-piece text-c-pink d-block f-40"></i>
<h4 class="m-t-20">Business Plan</h4>
<p class="m-b-20">This is your current active plan</p>
<button class="btn btn-danger btn-sm btn-round">Upgrade to VIP</button>
</div>
</div>
</div>
<!-- social statustic end -->
<!-- users visite and profile start -->
<div class="col-md-4">
<div class="card user-card">
<div class="card-header">
<h5>Profile</h5>
</div>
<div class="card-block">
<div class="usre-image">
<img src="assets/images/avatar-4.jpg" class="img-radius" alt="User-Profile-Image">
</div>
<h6 class="f-w-600 m-t-25 m-b-10">Alessa Robert</h6>
<p class="text-muted">Active | Male | Born 23.05.1992</p>
<hr/>
<p class="text-muted m-t-15">Activity Level: 87%</p>
<ul class="list-unstyled activity-leval">
<li class="active"></li>
<li class="active"></li>
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="bg-c-blue counter-block m-t-10 p-20">
<div class="row">
<div class="col-4">
<i class="ti-comments"></i>
<p>1256</p>
</div>
<div class="col-4">
<i class="ti-user"></i>
<p>8562</p>
</div>
<div class="col-4">
<i class="ti-bag"></i>
<p>189</p>
</div>
</div>
</div>
<p class="m-t-15 text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<hr/>
<div class="row justify-content-center user-social-link">
<div class="col-auto"><a href="#!"><i class="fa fa-facebook text-facebook"></i></a></div>
<div class="col-auto"><a href="#!"><i class="fa fa-twitter text-twitter"></i></a></div>
<div class="col-auto"><a href="#!"><i class="fa fa-dribbble text-dribbble"></i></a></div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h5>Activity Feed</h5>
<div class="card-header-right">
<ul class="list-unstyled card-option">
<li><i class="fa fa-chevron-left"></i></li>
<li><i class="fa fa-window-maximize full-card"></i></li>
<li><i class="fa fa-minus minimize-card"></i></li>
<li><i class="fa fa-refresh reload-card"></i></li>
<li><i class="fa fa-times close-card"></i></li>
</ul>
</div>
</div>
<div class="card-block">
<ul class="feed-blog">
<li class="active-feed">
<div class="feed-user-img">
<img src="assets/images/avatar-3.jpg" class="img-radius " alt="User-Profile-Image">
</div>
<h6><span class="label label-danger">File</span> Eddie uploaded new files: <small class="text-muted">2 hours ago</small></h6>
<p class="m-b-15 m-t-15">hii <b> @everone</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="row">
<div class="col-auto text-center">
<img src="assets/images/blog/blog-r-1.jpg" alt="img" class="img-fluid img-100">
<h6 class="m-t-15 m-b-0">Old Scooter</h6>
<p class="text-muted m-b-0"><small>PNG-100KB</small></p>
</div>
<div class="col-auto text-center">
<img src="assets/images/blog/blog-r-2.jpg" alt="img" class="img-fluid img-100">
<h6 class="m-t-15 m-b-0">Wall Art</h6>
<p class="text-muted m-b-0"><small>PNG-150KB</small></p>
</div>
<div class="col-auto text-center">
<img src="assets/images/blog/blog-r-3.jpg" alt="img" class="img-fluid img-100">
<h6 class="m-t-15 m-b-0">Microphone</h6>
<p class="text-muted m-b-0"><small>PNG-150KB</small></p>
</div>
</div>
</li>
<li class="diactive-feed">
<div class="feed-user-img">
<img src="assets/images/avatar-4.jpg" class="img-radius " alt="User-Profile-Image">
</div>
<h6><span class="label label-success">Task</span>Sarah marked the Pending Review: <span class="text-c-green"> Trash Can Icon Design</span><small class="text-muted">2 hours ago</small></h6>
</li>
<li class="diactive-feed">
<div class="feed-user-img">
<img src="assets/images/avatar-2.jpg" class="img-radius " alt="User-Profile-Image">
</div>
<h6><span class="label label-primary">comment</span> abc posted a task: <span class="text-c-green">Design a new Homepage</span> <small class="text-muted">6 hours ago</small></h6>
<p class="m-b-15 m-t-15"hii <b> @everone</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
<li class="active-feed">
<div class="feed-user-img">
<img src="assets/images/avatar-3.jpg" class="img-radius " alt="User-Profile-Image">
</div>
<h6><span class="label label-warning">Task</span>Sarah marked : <span class="text-c-green"> do Icon Design</span><small class="text-muted">10 hours ago</small></h6>
</li>
</ul>
</div>
</div>
</div>
<!-- users visite and profile end -->
</div>
</div>
Step 5: In a footer section include custom javascript and third party javascript.
<script type="text/javascript" src="assets/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/popper.js/popper.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap/js/bootstrap.min.js"></script>
<!-- jquery slimscroll js -->
<script type="text/javascript" src="assets/js/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- modernizr js -->
<script type="text/javascript" src="assets/js/modernizr/modernizr.js"></script>
<!-- am chart -->
<script src="assets/pages/widget/amchart/amcharts.min.js"></script>
<script src="assets/pages/widget/amchart/serial.min.js"></script>
<!-- Chart js -->
<script type="text/javascript" src="assets/js/chart.js/Chart.js"></script>
<!-- Todo js -->
<script type="text/javascript " src="assets/pages/todo/todo.js "></script>
<!-- Custom js -->
<script type="text/javascript" src="assets/pages/dashboard/custom-dashboard.min.js"></script>
<script type="text/javascript" src="assets/js/script.js"></script>
<script type="text/javascript " src="assets/js/SmoothScroll.js"></script>
<script src="assets/js/pcoded.min.js"></script>
<script src="assets/js/vartical-demo.js"></script>
<script src="assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
Top comments (0)