343 lines
21 KiB
HTML
343 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="ltr" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<!-- Tell the browser to be responsive to screen width -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="keywords"
|
|
content="wrappixel, admin dashboard, html css dashboard, web dashboard, bootstrap 5 admin, bootstrap 5, css3 dashboard, bootstrap 5 dashboard, Monsterlite admin bootstrap 5 dashboard, frontend, responsive bootstrap 5 admin template, Monster admin lite design, Monster admin lite dashboard bootstrap 5 dashboard template">
|
|
<meta name="description"
|
|
content="Monster Lite is powerful and clean admin dashboard template, inpired from Bootstrap Framework">
|
|
<meta name="robots" content="noindex,nofollow">
|
|
<title>Monster Lite Template by WrapPixel</title>
|
|
<link rel="canonical" href="https://www.wrappixel.com/templates/monster-admin-lite/" />
|
|
<!-- Favicon icon -->
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
|
|
<!-- Custom CSS -->
|
|
<link href="css/style.min.css" rel="stylesheet">
|
|
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
<body>
|
|
<!-- ============================================================== -->
|
|
<!-- Preloader - style you can find in spinners.css -->
|
|
<!-- ============================================================== -->
|
|
<div class="preloader">
|
|
<div class="lds-ripple">
|
|
<div class="lds-pos"></div>
|
|
<div class="lds-pos"></div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- Main wrapper - style you can find in pages.scss -->
|
|
<!-- ============================================================== -->
|
|
<div id="main-wrapper" data-layout="vertical" data-navbarbg="skin5" data-sidebartype="full"
|
|
data-sidebar-position="absolute" data-header-position="absolute" data-boxed-layout="full">
|
|
<!-- ============================================================== -->
|
|
<!-- Topbar header - style you can find in pages.scss -->
|
|
<!-- ============================================================== -->
|
|
<header class="topbar" data-navbarbg="skin6">
|
|
<nav class="navbar top-navbar navbar-expand-md navbar-dark">
|
|
<div class="navbar-header" data-logobg="skin6">
|
|
<!-- ============================================================== -->
|
|
<!-- Logo -->
|
|
<!-- ============================================================== -->
|
|
<a class="navbar-brand" href="index.html">
|
|
<!-- Logo icon -->
|
|
<b class="logo-icon">
|
|
<!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
|
|
<!-- Dark Logo icon -->
|
|
<img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
|
|
|
|
</b>
|
|
<!--End Logo icon -->
|
|
<!-- Logo text -->
|
|
<span class="logo-text">
|
|
<!-- dark Logo text -->
|
|
<img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
|
|
|
|
</span>
|
|
</a>
|
|
<!-- ============================================================== -->
|
|
<!-- End Logo -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- toggle and nav items -->
|
|
<!-- ============================================================== -->
|
|
<a class="nav-toggler waves-effect waves-light text-dark d-block d-md-none"
|
|
href="javascript:void(0)"><i class="ti-menu ti-close"></i></a>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Logo -->
|
|
<!-- ============================================================== -->
|
|
<div class="navbar-collapse collapse" id="navbarSupportedContent" data-navbarbg="skin5">
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- toggle and nav items -->
|
|
<!-- ============================================================== -->
|
|
<ul class="navbar-nav me-auto mt-md-0 ">
|
|
<!-- ============================================================== -->
|
|
<!-- Search -->
|
|
<!-- ============================================================== -->
|
|
|
|
<li class="nav-item hidden-sm-down">
|
|
<form class="app-search ps-3">
|
|
<input type="text" class="form-control" placeholder="Search for..."> <a
|
|
class="srh-btn"><i class="ti-search"></i></a>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Right side toggle and nav items -->
|
|
<!-- ============================================================== -->
|
|
<ul class="navbar-nav">
|
|
<!-- ============================================================== -->
|
|
<!-- User profile and search -->
|
|
<!-- ============================================================== -->
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle waves-effect waves-dark" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<img src="../assets/images/users/1.jpg" alt="user" class="profile-pic me-2">Markarn Doe
|
|
</a>
|
|
<ul class="dropdown-menu show" aria-labelledby="navbarDropdown"></ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<!-- ============================================================== -->
|
|
<!-- End Topbar header -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Left Sidebar - style you can find in sidebar.scss -->
|
|
<!-- ============================================================== -->
|
|
<aside class="left-sidebar" data-sidebarbg="skin6">
|
|
<!-- Sidebar scroll-->
|
|
<div class="scroll-sidebar">
|
|
<!-- Sidebar navigation-->
|
|
<nav class="sidebar-nav">
|
|
<ul id="sidebarnav">
|
|
<!-- User Profile-->
|
|
<li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link"
|
|
href="index.html" aria-expanded="false"><i class="me-3 far fa-clock fa-fw"
|
|
aria-hidden="true"></i><span class="hide-menu">Dashboard</span></a></li>
|
|
<li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link"
|
|
href="pages-profile.html" aria-expanded="false">
|
|
<i class="me-3 fa fa-user" aria-hidden="true"></i><span
|
|
class="hide-menu">Profile</span></a>
|
|
</li>
|
|
<li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link"
|
|
href="table-basic.html" aria-expanded="false"><i class="me-3 fa fa-table"
|
|
aria-hidden="true"></i><span class="hide-menu">Table</span></a></li>
|
|
<li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link"
|
|
href="icon-fontawesome.html" aria-expanded="false"><i class="me-3 fa fa-font"
|
|
aria-hidden="true"></i><span class="hide-menu">Icon</span></a></li>
|
|
<li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link"
|
|
href="map-google.html" aria-expanded="false"><i class="me-3 fa fa-globe"
|
|
aria-hidden="true"></i><span class="hide-menu">Google Map</span></a></li>
|
|
<li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link"
|
|
href="pages-blank.html" aria-expanded="false"><i class="me-3 fa fa-columns"
|
|
aria-hidden="true"></i><span class="hide-menu">Blank</span></a></li>
|
|
<li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link"
|
|
href="pages-error-404.html" aria-expanded="false"><i class="me-3 fa fa-info-circle"
|
|
aria-hidden="true"></i><span class="hide-menu">Error 404</span></a></li>
|
|
<li class="text-center p-20 upgrade-btn">
|
|
<a href="https://www.wrappixel.com/templates/monsteradmin/"
|
|
class="btn btn-danger text-white mt-4" target="_blank">Upgrade to
|
|
Pro</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</nav>
|
|
<!-- End Sidebar navigation -->
|
|
</div>
|
|
<!-- End Sidebar scroll-->
|
|
</aside>
|
|
<!-- ============================================================== -->
|
|
<!-- End Left Sidebar - style you can find in sidebar.scss -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Page wrapper -->
|
|
<!-- ============================================================== -->
|
|
<div class="page-wrapper">
|
|
<!-- ============================================================== -->
|
|
<!-- Bread crumb and right sidebar toggle -->
|
|
<!-- ============================================================== -->
|
|
<div class="page-breadcrumb">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6 col-8 align-self-center">
|
|
<h3 class="page-title mb-0 p-0">Profile</h3>
|
|
<div class="d-flex align-items-center">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Profile</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-4 align-self-center">
|
|
<div class="text-end upgrade-btn">
|
|
<a href="https://www.wrappixel.com/templates/monsteradmin/"
|
|
class="btn btn-success d-none d-md-inline-block text-white" target="_blank">Upgrade to
|
|
Pro</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Bread crumb and right sidebar toggle -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Container fluid -->
|
|
<!-- ============================================================== -->
|
|
<div class="container-fluid">
|
|
<!-- ============================================================== -->
|
|
<!-- Start Page Content -->
|
|
<!-- ============================================================== -->
|
|
<!-- Row -->
|
|
<div class="row">
|
|
<!-- Column -->
|
|
<div class="col-lg-4 col-xlg-3 col-md-5">
|
|
<div class="card">
|
|
<div class="card-body profile-card">
|
|
<center class="mt-4"> <img src="../assets/images/users/5.jpg"
|
|
class="rounded-circle" width="150" />
|
|
<h4 class="card-title mt-2">Hanna Gover</h4>
|
|
<h6 class="card-subtitle">Accoubts Manager Amix corp</h6>
|
|
<div class="row justify-content-center">
|
|
<div class="col-4">
|
|
<a href="javascript:void(0)" class="link">
|
|
<i class="icon-people" aria-hidden="true"></i>
|
|
<span class="font-normal">254</span>
|
|
</a></div>
|
|
<div class="col-4">
|
|
<a href="javascript:void(0)" class="link">
|
|
<i class="icon-picture" aria-hidden="true"></i>
|
|
<span class="font-normal">54</span>
|
|
</a></div>
|
|
</div>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Column -->
|
|
<!-- Column -->
|
|
<div class="col-lg-8 col-xlg-9 col-md-7">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<form class="form-horizontal form-material mx-2">
|
|
<div class="form-group">
|
|
<label class="col-md-12 mb-0">Full Name</label>
|
|
<div class="col-md-12">
|
|
<input type="text" placeholder="Johnathan Doe"
|
|
class="form-control ps-0 form-control-line">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="example-email" class="col-md-12">Email</label>
|
|
<div class="col-md-12">
|
|
<input type="email" placeholder="johnathan@admin.com"
|
|
class="form-control ps-0 form-control-line" name="example-email"
|
|
id="example-email">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-md-12 mb-0">Password</label>
|
|
<div class="col-md-12">
|
|
<input type="password" value="password"
|
|
class="form-control ps-0 form-control-line">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-md-12 mb-0">Phone No</label>
|
|
<div class="col-md-12">
|
|
<input type="text" placeholder="123 456 7890"
|
|
class="form-control ps-0 form-control-line">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-md-12 mb-0">Message</label>
|
|
<div class="col-md-12">
|
|
<textarea rows="5" class="form-control ps-0 form-control-line"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-sm-12">Select Country</label>
|
|
<div class="col-sm-12 border-bottom">
|
|
<select class="form-select shadow-none border-0 ps-0 form-control-line">
|
|
<option>London</option>
|
|
<option>India</option>
|
|
<option>Usa</option>
|
|
<option>Canada</option>
|
|
<option>Thailand</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-12 d-flex">
|
|
<button class="btn btn-success mx-auto mx-md-0 text-white">Update
|
|
Profile</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Column -->
|
|
</div>
|
|
<!-- Row -->
|
|
<!-- ============================================================== -->
|
|
<!-- End PAge Content -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Right sidebar -->
|
|
<!-- ============================================================== -->
|
|
<!-- .right-sidebar -->
|
|
<!-- ============================================================== -->
|
|
<!-- End Right sidebar -->
|
|
<!-- ============================================================== -->
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Container fluid -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- footer -->
|
|
<!-- ============================================================== -->
|
|
<footer class="footer text-center">
|
|
© 2021 Monster Admin by <a href="https://www.wrappixel.com/">wrappixel.com</a>
|
|
</footer>
|
|
<!-- ============================================================== -->
|
|
<!-- End footer -->
|
|
<!-- ============================================================== -->
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Page wrapper -->
|
|
<!-- ============================================================== -->
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Wrapper -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- All Jquery -->
|
|
<!-- ============================================================== -->
|
|
<script src="../assets/plugins/jquery/dist/jquery.min.js"></script>
|
|
<!-- Bootstrap tether Core JavaScript -->
|
|
<script src="../assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="js/app-style-switcher.js"></script>
|
|
<!--Wave Effects -->
|
|
<script src="js/waves.js"></script>
|
|
<!--Menu sidebar -->
|
|
<script src="js/sidebarmenu.js"></script>
|
|
<!--Custom JavaScript -->
|
|
<script src="js/custom.js"></script>
|
|
</body>
|
|
|
|
</html> |