[
MAINHACK
]
Mail Test
BC
Config Scan
HOME
Create...
New File
New Folder
Viewing / Editing File: pages-elements.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="description" content=""> <meta name="author" content=""> <!-- Favicon icon --> <link rel="icon" type="image/png" sizes="16x16" href="../../assets/images/favicon.png"> <title>Matrix Template - The Ultimate Multipurpose admin template</title> <!-- Custom CSS --> <link href="../../dist/css/style.min.css" rel="stylesheet"> <link href="../../assets/libs/toastr/build/toastr.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"> <!-- ============================================================== --> <!-- Topbar header - style you can find in pages.scss --> <!-- ============================================================== --> <header class="topbar" data-navbarbg="skin5"> <nav class="navbar top-navbar navbar-expand-md navbar-dark"> <div class="navbar-header" data-logobg="skin5"> <!-- This is for the sidebar toggle which is visible on mobile only --> <a class="nav-toggler waves-effect waves-light d-block d-md-none" href="javascript:void(0)"><i class="ti-menu ti-close"></i></a> <!-- ============================================================== --> <!-- Logo --> <!-- ============================================================== --> <a class="navbar-brand" href="index.html"> <!-- Logo icon --> <b class="logo-icon p-l-10"> <!--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="light-logo" /> </b> <!--End Logo icon --> <!-- Logo text --> <span class="logo-text"> <!-- dark Logo text --> <img src="../../assets/images/logo-text.png" alt="homepage" class="light-logo" /> </span> <!-- 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-text.png" alt="homepage" class="light-logo" /> --> <!-- </b> --> <!--End Logo icon --> </a> <!-- ============================================================== --> <!-- End Logo --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- Toggle which is visible on mobile only --> <!-- ============================================================== --> <a class="topbartoggler d-block d-md-none waves-effect waves-light" href="javascript:void(0)" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="ti-more"></i></a> </div> <!-- ============================================================== --> <!-- End Logo --> <!-- ============================================================== --> <div class="navbar-collapse collapse" id="navbarSupportedContent" data-navbarbg="skin5"> <!-- ============================================================== --> <!-- toggle and nav items --> <!-- ============================================================== --> <ul class="navbar-nav float-left mr-auto"> <li class="nav-item d-none d-md-block"><a class="nav-link sidebartoggler waves-effect waves-light" href="javascript:void(0)" data-sidebartype="mini-sidebar"><i class="mdi mdi-menu font-24"></i></a></li> <!-- ============================================================== --> <!-- create new --> <!-- ============================================================== --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="d-none d-md-block">Create New <i class="fa fa-angle-down"></i></span> <span class="d-block d-md-none"><i class="fa fa-plus"></i></span> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <!-- ============================================================== --> <!-- Search --> <!-- ============================================================== --> <li class="nav-item search-box"> <a class="nav-link waves-effect waves-dark" href="javascript:void(0)"><i class="ti-search"></i></a> <form class="app-search position-absolute"> <input type="text" class="form-control" placeholder="Search & enter"> <a class="srh-btn"><i class="ti-close"></i></a> </form> </li> </ul> <!-- ============================================================== --> <!-- Right side toggle and nav items --> <!-- ============================================================== --> <ul class="navbar-nav float-right"> <!-- ============================================================== --> <!-- Comment --> <!-- ============================================================== --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-bell font-24"></i> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <!-- ============================================================== --> <!-- End Comment --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- Messages --> <!-- ============================================================== --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle waves-effect waves-dark" href="" id="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="font-24 mdi mdi-comment-processing"></i> </a> <div class="dropdown-menu dropdown-menu-right mailbox animated bounceInDown" aria-labelledby="2"> <ul class="list-style-none"> <li> <div class=""> <!-- Message --> <a href="javascript:void(0)" class="link border-top"> <div class="d-flex no-block align-items-center p-10"> <span class="btn btn-success btn-circle"><i class="ti-calendar"></i></span> <div class="m-l-10"> <h5 class="m-b-0">Event today</h5> <span class="mail-desc">Just a reminder that event</span> </div> </div> </a> <!-- Message --> <a href="javascript:void(0)" class="link border-top"> <div class="d-flex no-block align-items-center p-10"> <span class="btn btn-info btn-circle"><i class="ti-settings"></i></span> <div class="m-l-10"> <h5 class="m-b-0">Settings</h5> <span class="mail-desc">You can customize this template</span> </div> </div> </a> <!-- Message --> <a href="javascript:void(0)" class="link border-top"> <div class="d-flex no-block align-items-center p-10"> <span class="btn btn-primary btn-circle"><i class="ti-user"></i></span> <div class="m-l-10"> <h5 class="m-b-0">Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> </div> </div> </a> <!-- Message --> <a href="javascript:void(0)" class="link border-top"> <div class="d-flex no-block align-items-center p-10"> <span class="btn btn-danger btn-circle"><i class="fa fa-link"></i></span> <div class="m-l-10"> <h5 class="m-b-0">Luanch Admin</h5> <span class="mail-desc">Just see the my new admin!</span> </div> </div> </a> </div> </li> </ul> </div> </li> <!-- ============================================================== --> <!-- End Messages --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- User profile and search --> <!-- ============================================================== --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark pro-pic" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="../../assets/images/users/1.jpg" alt="user" class="rounded-circle" width="31"></a> <div class="dropdown-menu dropdown-menu-right user-dd animated"> <a class="dropdown-item" href="javascript:void(0)"><i class="ti-user m-r-5 m-l-5"></i> My Profile</a> <a class="dropdown-item" href="javascript:void(0)"><i class="ti-wallet m-r-5 m-l-5"></i> My Balance</a> <a class="dropdown-item" href="javascript:void(0)"><i class="ti-email m-r-5 m-l-5"></i> Inbox</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:void(0)"><i class="ti-settings m-r-5 m-l-5"></i> Account Setting</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:void(0)"><i class="fa fa-power-off m-r-5 m-l-5"></i> Logout</a> <div class="dropdown-divider"></div> <div class="p-l-30 p-10"><a href="javascript:void(0)" class="btn btn-sm btn-success btn-rounded">View Profile</a></div> </div> </li> <!-- ============================================================== --> <!-- User profile and search --> <!-- ============================================================== --> </ul> </div> </nav> </header> <!-- ============================================================== --> <!-- End Topbar header --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- Left Sidebar - style you can find in sidebar.scss --> <!-- ============================================================== --> <aside class="left-sidebar" data-sidebarbg="skin5"> <!-- Sidebar scroll--> <div class="scroll-sidebar"> <!-- Sidebar navigation--> <nav class="sidebar-nav"> <ul id="sidebarnav" class="p-t-30"> <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link" href="index.html" aria-expanded="false"><i class="mdi mdi-view-dashboard"></i><span class="hide-menu">Dashboard</span></a></li> <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link" href="charts.html" aria-expanded="false"><i class="mdi mdi-chart-bar"></i><span class="hide-menu">Charts</span></a></li> <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link" href="widgets.html" aria-expanded="false"><i class="mdi mdi-chart-bubble"></i><span class="hide-menu">Widgets</span></a></li> <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link" href="tables.html" aria-expanded="false"><i class="mdi mdi-border-inside"></i><span class="hide-menu">Tables</span></a></li> <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link" href="grid.html" aria-expanded="false"><i class="mdi mdi-blur-linear"></i><span class="hide-menu">Full Width</span></a></li> <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-receipt"></i><span class="hide-menu">Forms </span></a> <ul aria-expanded="false" class="collapse first-level"> <li class="sidebar-item"><a href="form-basic.html" class="sidebar-link"><i class="mdi mdi-note-outline"></i><span class="hide-menu"> Form Basic </span></a></li> <li class="sidebar-item"><a href="form-wizard.html" class="sidebar-link"><i class="mdi mdi-note-plus"></i><span class="hide-menu"> Form Wizard </span></a></li> </ul> </li> <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link" href="pages-buttons.html" aria-expanded="false"><i class="mdi mdi-relative-scale"></i><span class="hide-menu">Buttons</span></a></li> <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-face"></i><span class="hide-menu">Icons </span></a> <ul aria-expanded="false" class="collapse first-level"> <li class="sidebar-item"><a href="icon-material.html" class="sidebar-link"><i class="mdi mdi-emoticon"></i><span class="hide-menu"> Material Icons </span></a></li> <li class="sidebar-item"><a href="icon-fontawesome.html" class="sidebar-link"><i class="mdi mdi-emoticon-cool"></i><span class="hide-menu"> Font Awesome Icons </span></a></li> </ul> </li> <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link" href="pages-elements.html" aria-expanded="false"><i class="mdi mdi-pencil"></i><span class="hide-menu">Elements</span></a></li> <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-move-resize-variant"></i><span class="hide-menu">Addons </span></a> <ul aria-expanded="false" class="collapse first-level"> <li class="sidebar-item"><a href="index2.html" class="sidebar-link"><i class="mdi mdi-view-dashboard"></i><span class="hide-menu"> Dashboard-2 </span></a></li> <li class="sidebar-item"><a href="pages-gallery.html" class="sidebar-link"><i class="mdi mdi-multiplication-box"></i><span class="hide-menu"> Gallery </span></a></li> <li class="sidebar-item"><a href="pages-calendar.html" class="sidebar-link"><i class="mdi mdi-calendar-check"></i><span class="hide-menu"> Calendar </span></a></li> <li class="sidebar-item"><a href="pages-invoice.html" class="sidebar-link"><i class="mdi mdi-bulletin-board"></i><span class="hide-menu"> Invoice </span></a></li> <li class="sidebar-item"><a href="pages-chat.html" class="sidebar-link"><i class="mdi mdi-message-outline"></i><span class="hide-menu"> Chat Option </span></a></li> </ul> </li> <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-account-key"></i><span class="hide-menu">Authentication </span></a> <ul aria-expanded="false" class="collapse first-level"> <li class="sidebar-item"><a href="authentication-login.html" class="sidebar-link"><i class="mdi mdi-all-inclusive"></i><span class="hide-menu"> Login </span></a></li> <li class="sidebar-item"><a href="authentication-register.html" class="sidebar-link"><i class="mdi mdi-all-inclusive"></i><span class="hide-menu"> Register </span></a></li> </ul> </li> <li class="sidebar-item"> <a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-alert"></i><span class="hide-menu">Errors </span></a> <ul aria-expanded="false" class="collapse first-level"> <li class="sidebar-item"><a href="error-403.html" class="sidebar-link"><i class="mdi mdi-alert-octagon"></i><span class="hide-menu"> Error 403 </span></a></li> <li class="sidebar-item"><a href="error-404.html" class="sidebar-link"><i class="mdi mdi-alert-octagon"></i><span class="hide-menu"> Error 404 </span></a></li> <li class="sidebar-item"><a href="error-405.html" class="sidebar-link"><i class="mdi mdi-alert-octagon"></i><span class="hide-menu"> Error 405 </span></a></li> <li class="sidebar-item"><a href="error-500.html" class="sidebar-link"><i class="mdi mdi-alert-octagon"></i><span class="hide-menu"> Error 500 </span></a></li> </ul> </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"> <div class="col-12 d-flex no-block align-items-center"> <h4 class="page-title">Elements</h4> <div class="ml-auto text-right"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Library</li> </ol> </nav> </div> </div> </div> </div> <!-- ============================================================== --> <!-- End Bread crumb and right sidebar toggle --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- Container fluid --> <!-- ============================================================== --> <div class="container-fluid"> <!-- ============================================================== --> <!-- Start Page Content --> <!-- ============================================================== --> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h5 class="card-title m-b-0">Badges</h5> </div> <table class="table"> <thead> <tr> <th scope="col">Badges</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <td> <span class="badge badge-primary">Primary</span> </td> <td> <code>.badge .badge-primary</code> </td> </tr> <tr> <td> <span class="badge badge-secondary">Secondary</span> </td> <td> <code>.badge .badge-secondary</code> </td> </tr> <tr> <td> <span class="badge badge-success">Success</span> </td> <td> <code>.badge .badge-success</code> </td> </tr> <tr> <td> <span class="badge badge-danger">Danger</span> </td> <td> <code>.badge .badge-danger</code> </td> </tr> <tr> <td> <span class="badge badge-warning">Warning</span> </td> <td> <code>.badge .badge-warning</code> </td> </tr> <tr> <td> <span class="badge badge-info">Info</span> </td> <td> <code>.badge .badge-info</code> </td> </tr> <tr> <td> <span class="badge badge-light">Light</span> </td> <td> <code>.badge .badge-light</code> </td> </tr> <tr> <td> <span class="badge badge-dark">Dark</span> </td> <td> <code>.badge .badge-dark</code> </td> </tr> </tbody> </table> <div class="card-body"> <h5 class="card-title m-b-0">Pills</h5> </div> <table class="table"> <thead> <tr> <th scope="col">Pills</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <td> <span class="badge badge-pill badge-primary">Primary</span> </td> <td> <code>badge badge-pill badge-primary</code> </td> </tr> <tr> <td> <span class="badge badge-pill badge-secondary">Secondary</span> </td> <td> <code>badge badge-pill badge-secondary</code> </td> </tr> <tr> <td> <span class="badge badge-pill badge-success">Success</span> </td> <td> <code>badge badge-pill badge-success</code> </td> </tr> <tr> <td> <span class="badge badge-pill badge-danger">Danger</span> </td> <td> <code>badge badge-pill badge-danger</code> </td> </tr> <tr> <td> <span class="badge badge-pill badge-warning">Warning</span> </td> <td> <code>badge badge-pill badge-warning</code> </td> </tr> <tr> <td> <span class="badge badge-pill badge-info">Info</span> </td> <td> <code>badge badge-pill badge-info</code> </td> </tr> <tr> <td> <span class="badge badge-pill badge-light">Light</span> </td> <td> <code>badge badge-pill badge-light</code> </td> </tr> <tr> <td> <span class="badge badge-pill badge-dark">Dark</span> </td> <td> <code>badge badge-pill badge-dark</code> </td> </tr> </tbody> </table> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h5 class="card-title">Notification</h5> <div class="row"> <div class="col-md-3 col-sm-12"> <button type="button" class="btn btn-lg btn-block btn-outline-success" id="ts-success">Success</button> </div> <div class="col-md-3 col-sm-12"> <button type="button" class="btn btn-lg btn-block btn-outline-info" id="ts-info">Info</button> </div> <div class="col-md-3 col-sm-12"> <button type="button" class="btn btn-lg btn-block btn-outline-warning" id="ts-warning">Warning</button> </div> <div class="col-md-3 col-sm-12"> <button type="button" class="btn btn-lg btn-block btn-outline-danger" id="ts-error">Error</button> </div> </div> </div> </div> </div> </div> <!-- ============================================================== --> <!-- Sales Cards --> <!-- ============================================================== --> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h5 class="card-title">Icon Box</h5> <div class="row"> <!-- Column --> <div class="col-md-6 col-lg-2 col-xlg-3"> <div class="card card-hover"> <div class="box bg-cyan text-center"> <h1 class="font-light text-white"><i class="mdi mdi-view-dashboard"></i></h1> <h6 class="text-white">Dashboard</h6> </div> </div> </div> <!-- Column --> <div class="col-md-6 col-lg-2 col-xlg-3"> <div class="card card-hover"> <div class="box bg-success text-center"> <h1 class="font-light text-white"><i class="mdi mdi-chart-areaspline"></i></h1> <h6 class="text-white">Charts</h6> </div> </div> </div> <!-- Column --> <div class="col-md-6 col-lg-2 col-xlg-3"> <div class="card card-hover"> <div class="box bg-warning text-center"> <h1 class="font-light text-white"><i class="mdi mdi-collage"></i></h1> <h6 class="text-white">Widgets</h6> </div> </div> </div> <!-- Column --> <div class="col-md-6 col-lg-2 col-xlg-3"> <div class="card card-hover"> <div class="box bg-danger text-center"> <h1 class="font-light text-white"><i class="mdi mdi-border-outside"></i></h1> <h6 class="text-white">Tables</h6> </div> </div> </div> <!-- Column --> <div class="col-md-6 col-lg-2 col-xlg-3"> <div class="card card-hover"> <div class="box bg-info text-center"> <h1 class="font-light text-white"><i class="mdi mdi-arrow-all"></i></h1> <h6 class="text-white">Full Width</h6> </div> </div> </div> <!-- Column --> <!-- Column --> <div class="col-md-6 col-lg-2 col-xlg-3"> <div class="card card-hover"> <div class="box bg-danger text-center"> <h1 class="font-light text-white"><i class="mdi mdi-receipt"></i></h1> <h6 class="text-white">Forms</h6> </div> </div> </div> <!-- Column --> <div class="col-md-6 col-lg-2 col-xlg-3"> <div class="card card-hover"> <div class="box bg-info text-center"> <h1 class="font-light text-white"><i class="mdi mdi-relative-scale"></i></h1> <h6 class="text-white">Buttons</h6> </div> </div> </div> <!-- Column --> <div class="col-md-6 col-lg-2 col-xlg-3"> <div class="card card-hover"> <div class="box bg-cyan text-center"> <h1 class="font-light text-white"><i class="mdi mdi-pencil"></i></h1> <h6 class="text-white">Elements</h6> </div> </div> </div> <!-- Column --> <div class="col-md-6 col-lg-2 col-xlg-3"> <div class="card card-hover"> <div class="box bg-success text-center"> <h1 class="font-light text-white"><i class="mdi mdi-calendar-check"></i></h1> <h6 class="text-white">Calnedar</h6> </div> </div> </div> <!-- Column --> <div class="col-md-6 col-lg-2 col-xlg-3"> <div class="card card-hover"> <div class="box bg-info text-center"> <h1 class="font-light text-white"><i class="mdi mdi-arrow-all"></i></h1> <h6 class="text-white">Full Width</h6> </div> </div> </div> <!-- Column --> <!-- Column --> <div class="col-md-6 col-lg-2 col-xlg-3"> <div class="card card-hover"> <div class="box bg-danger text-center"> <h1 class="font-light text-white"><i class="mdi mdi-border-outside"></i></h1> <h6 class="text-white">Tables</h6> </div> </div> </div> <!-- Column --> <div class="col-md-6 col-lg-2 col-xlg-3"> <div class="card card-hover"> <div class="box bg-warning text-center"> <h1 class="font-light text-white"><i class="mdi mdi-alert"></i></h1> <h6 class="text-white">Errors</h6> </div> </div> </div> <!-- Column --> </div> </div> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h5 class="card-title">Progressbar</h5> <div class="progress m-t-15"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress m-t-15"> <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress m-t-15"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress m-t-15"> <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress m-t-15"> <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="m-t-15"> <code> <div class="progress m-t-15"><br/> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div><br/> </div> </code> </div> </div> <div class="card-body border-top"> <h5 class="card-title">Striped Progressbar</h5> <div class="progress m-t-15"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress m-t-15"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress m-t-15"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress m-t-15"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress m-t-15"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="m-t-15"> <code> <div class="progress m-t-15"><br> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div><br/> </div> </code> </div> </div> <div class="card-body border-top"> <h5 class="card-title">Multiple Bars</h5> <div class="progress m-t-15"> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="m-t-15"> <code> <div class="progress m-t-15"><br/> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div><br/> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div><br/> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div><br/> </div> </code> </div> </div> <div class="card-body border-top"> <h5 class="card-title">Animated Progress</h5> <div class="progress m-t-15"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div> </div> <div class="progress m-t-15"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width:50%"></div> </div> <div class="progress m-t-15"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width:60%"></div> </div> <div class="progress m-t-15"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-cyan" style="width:70%"></div> </div> <div class="m-t-15"> <code> <div class="progress m-t-15"><br/> <div class="progress-bar progress-bar-striped progress-bar-animated bg-cyan" style="width:70%"></div><br/> </div> </code> </div> </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Different Models</h5> <!-- Button trigger modal --> <button type="button" class="btn btn-success margin-5" data-toggle="modal" data-target="#Modal1"> View Popup </button> <!-- Button trigger modal --> <button type="button" class="btn btn-warning margin-5 text-white" data-toggle="modal" data-target="#Modal2"> Alert </button> <!-- Button trigger modal --> <button type="button" class="btn btn-info margin-5" data-toggle="modal" data-target="#Modal3"> Image Popup </button> <!-- Modal --> <div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true "> <div class="modal-dialog" role="document "> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Popup Header</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true ">×</span> </button> </div> <div class="modal-body"> Here is the text coming you can put also image if you want… </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Alert Model</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Lorem ipsum dolor sit amet... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="Modal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Image Header</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <img src="../../assets/images/background/img5.jpg" width="100% "> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Tooltips</h5> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button> </div> </div> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-4"> <h5 class="card-title">Default Pagination</h5> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> </div> <div class="col-md-4"> <h5 class="card-title">Pagination with icons</h5> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> </div> <div class="col-md-4"> <h5 class="card-title">Disabled & Active States</h5> <nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"> <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> </div> </div> </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Popovers</h5> <div class="m-t-15"> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button> </div> </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Notificaion</h5> <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert—check it out! </div> <div class="alert alert-success" role="alert"> A simple success alert—check it out! </div> <div class="alert alert-danger" role="alert"> A simple danger alert—check it out! </div> <div class="alert alert-warning" role="alert"> A simple warning alert—check it out! </div> <div class="alert alert-info" role="alert"> A simple info alert—check it out! </div> </div> <div class="card-body border-top"> <h5 class="card-title">Additional Content</h5> <div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-warning" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-danger" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> </div> </div> </div> </div> <!-- ============================================================== --> <!-- End PAge Content --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- Right sidebar --> <!-- ============================================================== --> <!-- .right-sidebar --> <!-- ============================================================== --> <!-- End Right sidebar --> <!-- ============================================================== --> </div> <!-- ============================================================== --> <!-- End Container fluid --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- footer --> <!-- ============================================================== --> <footer class="footer text-center"> All Rights Reserved by Matrix-admin. Designed and Developed by <a href="https://wrappixel.com">WrapPixel</a>. </footer> <!-- ============================================================== --> <!-- End footer --> <!-- ============================================================== --> </div> <!-- ============================================================== --> <!-- End Page wrapper --> <!-- ============================================================== --> </div> <!-- ============================================================== --> <!-- End Wrapper --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- All Jquery --> <!-- ============================================================== --> <script src="../../assets/libs/jquery/dist/jquery.min.js"></script> <!-- Bootstrap tether Core JavaScript --> <script src="../../assets/libs/popper.js/dist/umd/popper.min.js"></script> <script src="../../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script> <!-- slimscrollbar scrollbar JavaScript --> <script src="../../assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script> <script src="../../assets/extra-libs/sparkline/sparkline.js"></script> <!--Wave Effects --> <script src="../../dist/js/waves.js"></script> <!--Menu sidebar --> <script src="../../dist/js/sidebarmenu.js"></script> <!--Custom JavaScript --> <script src="../../dist/js/custom.min.js"></script> <!-- this page js --> <script src="../../assets/libs/toastr/build/toastr.min.js"></script> <script> $(function(){ // Success Type $('#ts-success').on('click', function() { toastr.success('Have fun storming the castle!', 'Miracle Max Says'); }); // Success Type $('#ts-info').on('click', function() { toastr.info('We do have the Kapua suite available.', 'Turtle Bay Resort'); }); // Success Type $('#ts-warning').on('click', function() { toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!'); }); // Success Type $('#ts-error').on('click', function() { toastr.error('I do not think that word means what you think it means.', 'Inconceivable!'); }); }); </script> </body> </html>
Save Changes
Cancel / Back
Close ×
Server Info
Hostname: server05.hostinghome.co.in
Server IP: 192.168.74.40
PHP Version: 7.4.33
Server Software: Apache
System: Linux server05.hostinghome.co.in 3.10.0-962.3.2.lve1.5.81.el7.x86_64 #1 SMP Wed May 31 10:36:47 UTC 2023 x86_64
HDD Total: 1.95 TB
HDD Free: 678.1 GB
Domains on IP: N/A (Requires external lookup)
System Features
Safe Mode:
Off
disable_functions:
None
allow_url_fopen:
On
allow_url_include:
Off
magic_quotes_gpc:
Off
register_globals:
Off
open_basedir:
None
cURL:
Enabled
ZipArchive:
Disabled
MySQLi:
Enabled
PDO:
Enabled
wget:
Yes
curl (cmd):
Yes
perl:
Yes
python:
Yes
gcc:
Yes
pkexec:
No
git:
Yes
User Info
Username: itsweb
User ID (UID): 1619
Group ID (GID): 1621
Script Owner UID: 1619
Current Dir Owner: 1619