Scribd
Upload
56 views26 pages

AdminX: Responsive Bootstrap Admin Template

The document is an HTML template for a premium admin dashboard called AdminX, featuring a modern and responsive design built with Bootstrap 5. It includes various components such as navigation menus, UI kits, charts, forms, and tables, along with links to multiple pages and functionalities. The template is designed for ease of use and flexibility, catering to a wide range of web applications.

Uploaded by

deppt047
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
56 views26 pages

AdminX: Responsive Bootstrap Admin Template

The document is an HTML template for a premium admin dashboard called AdminX, featuring a modern and responsive design built with Bootstrap 5. It includes various components such as navigation menus, UI kits, charts, forms, and tables, along with links to multiple pages and functionalities. The template is designed for ease of use and flexibility, catering to a wide range of web applications.

Uploaded by

deppt047
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Multipurpose, super flexible, powerful, clean modern responsive
bootstrap 5 admin template">
<meta name="keywords"
content="admin template, AdminX admin template, dashboard template, flat admin
template, responsive admin template, web app">
<meta name="author" content="Arteam">
<link rel="icon" href="../assets/images/logo/[Link]" type="image/x-icon">
<link rel="shortcut icon" href="../assets/images/logo/[Link]" type="image/x-
icon">

<title>AdminX - Premium Admin Template</title>

<!--font-awesome-css-->
<link rel="stylesheet" href="../assets/vendor/fontawesome/css/[Link]">

<!-- Fonts -->


<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">

<!-- Data Table css-->


<link rel="stylesheet" type="text/css"
href="../assets/vendor/datatable/[Link]">
<link rel="stylesheet" type="text/css"
href="../assets/vendor/datatable/datatable2/[Link]">

<!-- tabler icons-->


<link rel="stylesheet" type="text/css"
href="../assets/vendor/tabler-icons/[Link]">

<!--flag Icon css-->


<link rel="stylesheet" type="text/css"
href="../assets/vendor/flag-icons-master/[Link]">

<!-- filepond css -->


<link rel="stylesheet" href="../assets/vendor/filepond/[Link]">
<link rel="stylesheet" href="../assets/vendor/filepond/[Link]">

<!-- editor css -->


<link rel="stylesheet" href="../assets/vendor/trumbowyg/[Link]">

<!-- Selecrt css -->


<link href="../assets/vendor/select/[Link]" rel="stylesheet" />

<!-- Bootstrap css-->


<link rel="stylesheet" type="text/css"
href="../assets/vendor/bootstrap/[Link]">
<!-- simplebar css-->
<link rel="stylesheet" type="text/css"
href="../assets/vendor/simplebar/[Link]">

<!-- App css-->


<link rel="stylesheet" type="text/css" href="../assets/css/[Link]">

<!-- Responsive css-->


<link rel="stylesheet" type="text/css" href="../assets/css/[Link]">

</head>

<body>
<div class="app-wrapper">

<div class="loader-wrapper">
<div class="app-loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>

<!-- Menu Navigation starts -->


<nav class="dark-sidebar">
<div class="app-logo">
<a class="logo d-inline-block" href="[Link]">
<img src="../assets/images/logo/[Link]" alt="#" class="dark-logo">
<img src="../assets/images/logo/[Link]" alt="#" class="light-logo">
</a>

<span class="bg-light-primary toggle-semi-nav">


<i class="ti ti-chevrons-right f-s-20"></i>
</span>
</div>
<div class="app-nav" id="app-simple-bar">
<ul class="main-nav p-0 mt-2">
<li class="menu-title"> <span>Dashboard</span></li>
<li>
<a class="" data-bs-toggle="collapse" href="#dashboard" aria-
expanded="false">
<i class="ti ti-home"></i>
dashboard
<span class="badge text-bg-primary badge-notification ms-2">4</span>
</a>
<ul class="collapse" id="dashboard">
<li><a href="[Link]">Analytics</a></li>
<li><a href="project_dashboard.html">Project</a></li>
<li><a href="ecommerce_dashboard.html">Ecommerce</a></li>
<li><a href="[Link]">Education</a></li>
</ul>
</li>
<li>
<a class="" data-bs-toggle="collapse" href="#apps" aria-
expanded="false">
<i class="ti ti-server"></i>
Apps
</a>
<ul class="collapse" id="apps">
<li><a href="[Link]">Calender</a></li>
<li><a href="[Link]">Invoice</a></li>
<li><a href="kanban_board.html">kanban board</a></li>
<li><a href="[Link]">Profile</a></li>
<li><a href="[Link]">Timeline</a></li>
<li><a href="[Link]">FAQ</a></li>
<li><a href="[Link]">Pricing</a></li>
<li><a href="[Link]">Gallery</a></li>
<li><a href="[Link]">Team</a></li>
<li><a href="[Link]">Chat</a></li>
<li class="another-level">
<a class="" data-bs-toggle="collapse" href="#email-page" aria-
expanded="false">
Email Page
</a>
<ul class="collapse" id="email-page">
<li><a href="[Link]"> Email</a></li>
<li><a href="read_email.html">Read Email</a></li>
</ul>
</li>
<li class="another-level">
<a class="" data-bs-toggle="collapse" href="#e-shop" aria-
expanded="false">
E-shop
</a>
<ul class="collapse" id="e-shop">
<li><a href="[Link]">Cart</a></li>
<li><a href="[Link]">Product</a></li>
<li><a href="add_product.html">Add Product</a></li>
<li><a href="product_details.html">Product-Details</a></li>
<li><a href="product_list.html">Product list</a></li>
<li><a href="[Link]">Orders</a></li>
<li><a href="orders_details.html">Orders Details</a></li>
<li><a href="orders_list.html">Orders List</a></li>
<li><a href="[Link]">Checkout</a></li>
<li><a href="[Link]">Wishlist</a></li>
</ul>
</li>
<li class="another-level">
<a class="" data-bs-toggle="collapse" href="#projects-page" aria-
expanded="false">
Projects Page
</a>
<ul class="collapse" id="projects-page">
<li><a href="project_app.html">Projects</a></li>
<li><a href="project_details.html">Projects Details</a></li>
</ul>
</li>
<li><a href="to_do.html">To-Do</a></li>
<li><a href="[Link]">File Manager</a></li>
<li class="another-level">
<a class="" data-bs-toggle="collapse" href="#blog-page" aria-
expanded="false">
Blog Page
</a>
<ul class="collapse" id="blog-page">
<li><a href="[Link]">Blog</a></li>
<li><a href="blog_read_more.html">Blog Details</a></li>
</ul>
</li>

</ul>
</li>
<li class="no-sub">
<a class="" href="[Link]">
<i class="ti ti-chart-treemap"></i> Widgets
</a>
</li>

<li class="menu-title"> <span>Component</span></li>

<li>
<a class="" data-bs-toggle="collapse" href="#ui-kits" aria-
expanded="false">
<i class="ti ti-first-aid-kit"></i> UI kits
</a>
<ul class="collapse" id="ui-kits">
<li><a href="[Link]">Cheatsheet</a></li>
<li><a href="[Link]">Alert</a></li>
<li><a href="[Link]">Badges</a></li>
<li><a href="[Link]">Buttons</a></li>
<li><a href="[Link]">Cards</a></li>
<li><a href="[Link]">Dropdown</a></li>
<li><a href="[Link]">Grid</a></li>
<li><a href="[Link]">Avtar</a></li>
<li><a href="[Link]">Tabs</a></li>
<li><a href="[Link]">Accordions</a></li>
<li><a href="[Link]">Progress</a></li>
<li><a href="[Link]">Notifications</a></li>
<li><a href="[Link]">Lists</a></li>
<li><a href="helper_classes.html">Helper Classes</a></li>
<li><a href="[Link]">Background</a></li>
<li><a href="[Link]">Divider</a></li>
<li><a href="[Link]">Ribbons</a></li>
<li><a href="[Link]">Editor </a></li>
<li><a href="[Link]">Collapse</a></li>
</ul>
</li>

<li>
<a class="" data-bs-toggle="collapse" href="#advance-ui" aria-
expanded="false">
<i class="ti ti-briefcase"></i> Advanvce UI
<span class=" badge rounded-pill bg-success badge-notification ms-2">
12+
<span class="visually-hidden">unread messages</span>
</span>
</a>
<ul class="collapse" id="advance-ui">
<li><a href="[Link]">Modals</a></li>
<li><a href="[Link]">OffCanvas Toggle</a></li>
<li><a href="[Link]">sweet Alert</a></li>
<li><a href="[Link]">Scrollbar</a></li>
<li><a href="[Link]">Spinners</a></li>
<li><a href="[Link]">Animation</a></li>
<li><a href="video_emaded.html">Video Embed</a></li>
<li><a href="[Link]">Tour</a></li>
<li><a href="[Link]">Slider</a></li>
<li><a href="bootstrap_slider.html">Bootstrap Slider</a></li>
<li><a href="[Link]">Scrollpy</a></li>
<li><a href="tooltips_popovers.html">Tooltip & Popovers</a></li>
<li><a href="[Link]">Rating</a></li>
<li><a href="[Link]">Prismjs</a></li>
<li><a href="count_down.html">Count Down</a></li>
<li><a href="[Link]"> Count Up </a></li>
</ul>
</li>
<li>
<a class="" data-bs-toggle="collapse" href="#icons" aria-
expanded="false">
<i class="ti ti-icons"></i> Icons
</a>
<ul class="collapse" id="icons">
<li><a href="[Link]">Fontawesome</a></li>
<li><a href="flag_icons.html">Flag</a></li>
<li><a href="[Link]">Tabler</a></li>
<li><a href="wheather_icon.html">Wheather</a></li>
</ul>
</li>
<li class="no-sub">
<a class="" href="[Link]">
<i class="ti ti-album"></i> Misc
</a>
</li>
<li class="menu-title"> <span>Map & Charts </span></li>
<li>
<a class="" href="#maps" data-bs-toggle="collapse" aria-
expanded="false">
<i class="ti ti-map"></i> Map
</a>
<ul class="collapse" id="maps">
<li><a href="[Link]">Google Maps</a></li>
<li><a href="[Link]">Leaflet map</a></li>
<li><a href="[Link]">Vector map</a></li>
</ul>
</li>
<li>
<a class="" data-bs-toggle="collapse" href="#chart" aria-
expanded="false">
<i class="ti ti-chart-pie"></i> Chart
</a>
<ul class="collapse" id="chart">
<li class="another-level">
<a class="" data-bs-toggle="collapse" href="#chartjs-page" aria-
expanded="false">
Chart js
</a>
<ul class="collapse" id="chartjs-page">
<li><a href="[Link]">Chart js</a></li>
</ul>
</li>
<li class="another-level">
<a class="" data-bs-toggle="collapse" href="#apexcharts-page" aria-
expanded="false">
Apexcharts
</a>
<ul class="collapse" id="apexcharts-page">
<li><a href="[Link]">Line</a></li>
<li><a href="area_charts.html">Area</a></li>
<li><a href="[Link]">Column</a></li>
<li><a href="[Link]">Bar</a></li>
<li><a href="[Link]">Mixed</a></li>
<li><a href="timeline_range_charts.html">Timeline &
Range-Bars</a></li>
<li><a href="candlestick_charts.html">Candlestick</a></li>
<li><a href="[Link]">Boxplot</a></li>
<li><a href="[Link]">Bubble</a></li>
<li><a href="[Link]">Scatter</a></li>
<li><a href="[Link]">Heatmap</a></li>
<li><a href="[Link]">Treemap</a></li>
<li><a href="pie_charts.html">Pie</a></li>
<li><a href="[Link]">Radialbar</a></li>
<li><a href="radar_chart.html">Radar</a></li>
</ul>
</li>
</ul>
</li>

<li class="menu-title"> <span>Table & forms </span></li>

<li>
<a class="" data-bs-toggle="collapse" href="#table" aria-
expanded="false">
<i class="ti ti-table"></i> Table
</a>
<ul class="collapse" id="table">
<li><a href="basic_table.html">BasicTable</a></li>
<li><a href="data_table.html">Data Table</a></li>
<li><a href="list_table.html">List Js</a></li>
<li><a href="advance_table.html">Advance Table</a></li>
</ul>
</li>

<li>
<a class="" data-bs-toggle="collapse" href="#forms" aria-
expanded="false">
<i class="ti ti-forms"></i> Forms elements
</a>
<ul class="collapse" id="forms">
<li><a href="form_validation.html">Form Validation</a></li>
<li><a href="base_inputs.html">Base Input</a></li>
<li><a href="checkbox_radio.html">Checkbox & Radio</a></li>
<li><a href="input_groups.html">Input Groups</a></li>
<li><a href="input_masks.html">Input Masks</a></li>
<li><a href="floating_labels.html">Floating Labels</a></li>
<li><a href="date_picker.html">Datetimepicker</a></li>
<li><a href="[Link]">Touchspin</a></li>
<li><a href="[Link]">Select2</a></li>
<li><a href="[Link]">Switch</a></li>
<li><a href="range_slider.html">Range Slider</a></li>
<li><a href="[Link]">Typeahead</a></li>
<li><a href="[Link]">Textarea</a></li>
<li><a href="[Link]">Clipboard</a></li>
<li><a href="file_upload.html">File Upload</a></li>
<li><a href="dual_listboxes.html">Dual List Boxes</a></li>
<li><a href="default_forms.html">Default Forms</a></li>
</ul>
</li>

<li>
<a class="" data-bs-toggle="collapse" href="#ready_to_use" aria-
expanded="false">
<i class="ti ti-table-import"></i> Ready to use <span
class="badge text-light-success badge-notification ms-2">New</span>
</a>
<ul class="collapse" id="ready_to_use">
<li><a href="form_wizards.html">Form Wizards</a></li>
<li><a href="form_wizard_1.html">Form Wizards 1</a></li>
<li><a href="form_wizard_2.html">Form Wizards 2</a></li>
<li><a href="ready_to_use_form.html">Ready To Use Form</a></li>
<li><a href="ready_to_use_table.html">Ready To Use Tables</a></li>
</ul>
</li>

<li class="menu-title"> <span>Pages</span></li>

<li>
<a class="" data-bs-toggle="collapse" href="#auth_pages" aria-
expanded="false">
<i class="ti ti-news"></i> Auth Pages
</a>
<ul class="collapse" id="auth_pages">
<li><a href="sign_in.html">Sign In</a></li>
<li><a href="sign_in_1.html">Sign In with Bg-image</a></li>
<li><a href="sign_up.html">Sign Up</a></li>
<li><a href="sign_up_1.html">Sign Up with Bg-image</a></li>
<li><a href="pwd_reset.html">Password Reset</a></li>
<li><a href="password_reset_1.html">Password Reset with
Bg-image</a></li>
<li><a href="pwd_create.html">Password Create</a></li>
<li><a href="password_create_1.html">Password Create with
Bg-image</a></li>
<li><a href="lock_screen.html">Lock Screen</a></li>
<li><a href="lock_screen_1.html">Lock Screen with Bg-image</a></li>
<li><a href="two_step_verificathion.html">Two Step
Verification</a></li>
<li><a href="two_step_verificathion_1.html">Two Step Verification
with Bg-image</a></li>
</ul>
</li>
<li>
<a class="" data-bs-toggle="collapse" href="#error_pages" aria-
expanded="false">
<i class="ti ti-article-off"></i> Error pages
</a>
<ul class="collapse" id="error_pages">
<li><a href="error_400.html">Bad Request </a></li>
<li><a href="error_403.html">Forbidden </a></li>
<li><a href="error_404.html">Not Found</a></li>
<li><a href="error_500.html">Internal Server</a></li>
<li><a href="error_503.html">Service Unavailable</a></li>
</ul>
</li>

<li>
<a class="" data-bs-toggle="collapse" href="#other_pages" aria-
expanded="false">
<i class="ti ti-box-multiple"></i> Other pages
</a>
<ul class="collapse" id="other_pages">
<li><a href="[Link]">Blank</a></li>
<li><a href="[Link]">Maintenance</a></li>
<li><a href="[Link]">Landing Page</a></li>
<li><a href="coming_soon.html">Coming Soon</a></li>
<li><a href="[Link]">Sitemap</a></li>
<li><a href="privacy_policy.html">Privacy Policy</a></li>
<li><a href="terms_condition.html">Terms &amp; Condition</a></li>
</ul>
</li>

<li class="menu-title"> <span>Others</span></li>

<li>
<a class="" data-bs-toggle="collapse" href="#level" aria-
expanded="false">
<i class="ti ti-box-multiple-2"></i> 2 level
</a>
<ul class="collapse" id="level">
<li><a href="#">Blank</a></li>
<li class="another-level">
<a class="" data-bs-toggle="collapse" href="#level2" aria-
expanded="false">
Another level
</a>
<ul class="collapse" id="level2">
<li><a href="[Link]">Blank</a></li>
</ul>
</li>

</ul>
</li>
<li class="no-sub">
<a class="" href="[Link]">
<i class="ti ti-file-text"></i> Document
</a>
</li>

<li class="no-sub">
<a class="" href="[Link]
<i class="ti ti-headset"></i> Support
</a>
</li>

</ul>
</div>

<div class="menu-navs">
<span class="menu-previous"><i class="ti ti-chevron-left"></i></span>
<span class="menu-next"><i class="ti ti-chevron-right"></i></span>
</div>
</nav>
<!-- Menu Navigation ends -->

<div class="app-content">
<div class="">
<!-- Header Section starts -->
<header class="header-main">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6 d-flex align-items-center header-left">
<span class="header-toggle me-3">
<i class="ti ti-category"></i>
</span>

<div class="header-searchbar">
<form class="me-3 app-form app-icon-form " action="#">
<div class="position-relative">
<input type="search" class="form-control"
placeholder="Search..." aria-label="Search">
<i class="ti ti-search text-dark"></i>
</div>
</form>
</div>
</div>

<div class="col-6 d-flex align-items-center justify-content-


end header-right">
<ul class="d-flex align-items-center">
<li class="header-search">
<a href="#" class="d-block head-icon" role=button data-
bs-toggle="offcanvas"
data-bs-target="#offcanvasTop" aria-
controls="offcanvasTop">
<i class="ti ti-search"></i>
</a>

<div class="offcanvas offcanvas-top search-canvas"


tabindex="-1" id="offcanvasTop">
<div class="offcanvas-body">
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<form class="me-3 app-form app-icon-form "
action="#">
<div class="position-relative">
<input type="search" class="form-control"
placeholder="Search..."
aria-label="Search">
<i class="ti ti-search f-s-15"></i>
</div>
</form>
</div>
<button type="button" class="btn-close" data-bs-
dismiss="offcanvas"
aria-label="Close"></button>
</div>
</div>
</div>
</li>

<li class="header-language">
<div id="lang_selector" class="flex-shrink-0 dropdown">
<a href="#" class="d-block head-icon ps-0" data-bs-
toggle="dropdown"
aria-expanded="false">
<div class="lang-flag lang-en ">
<span class="flag rounded-circle overflow-
hidden">
<i class=""></i>
</span>
</div>
</a>
<ul class="dropdown-menu language-dropdown dropdown-
menu-end header-card border-0 p-0">
<li>
<div class="card-header bg-dark py-2">
<h5 class="text-white">language <span
class="float-end"><i
class="ti ti-language"></i></span></h5>
</div>
</li>
<li class="lang lang-en selected dropdown-item p-2"
title="US">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-usa flag-icon-
squared b-r-50 f-s-22"></i>
<span class="ps-2 text-secondary">US</span>
</span>
</li>
<li class="lang lang-pt dropdown-item p-2"
title="FR">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-fra flag-icon-
squared b-r-50 f-s-22"></i>
<span class="ps-2
text-secondary">Fracnce</span>
</span>
</li>
<li class="lang lang-es dropdown-item p-2"
title="UK">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-gbr flag-icon-
squared b-r-50 f-s-22"></i>
<span class="ps-2 text-secondary">UK</span>
</span>
</li>
<li class="lang lang-es dropdown-item p-2"
title="IT">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-ita flag-icon-
squared b-r-50 f-s-22"></i>
<span class="ps-2 text-secondary">Italy</span>
</span>
</li>
</ul>
</div>

</li>

<li class="header-apps">
<div class="flex-shrink-0 app-dropdown">
<a href="#" class="d-block head-icon" data-bs-
toggle="dropdown" data-bs-auto-close="true"
aria-expanded="false">
<i class="ti ti-apps"></i>
</a>
<div
class="dropdown-menu headerapp-dropdown dropdown-
menu-center bg-transparent border-0">
<div class="card">
<div class="card-header bg-dark">
<h5 class="text-white">Shortcut
<span><i class="ti ti-apps
text-white"></i></span>
</h5>
</div>
<div class="card-body">
<div class="row row-cols-3">
<div class="d-flex-center text-center mb-3">
<a href="[Link]">
<span class="text-light-success h-60 w-60
d-flex-center b-r-100">
<i class="ti ti-shopping-bag f-s-
26"></i>
</span>
<p class="mt-2 f-w-500 text-muted">E-
shop</p>
</a>
</div>
<div class="d-flex-center text-center mb-3">
<a href="[Link]">
<span class="text-light-primary h-60 w-60
d-flex-center b-r-100">
<i class="ti ti-mail f-s-26"></i>
</span>
<p class="mt-2 f-w-500 text-
muted">Email</p>
</a>
</div>
<div class="d-flex-center text-center mb-3">
<a href="[Link]">
<span class="text-light-info h-60 w-60 d-
flex-center b-r-100">
<i class="ti ti-brand-hipchat f-s-
26"></i>
</span>
<p class="mt-2 f-w-500 text-
muted">Chat</p>
</a>
</div>
<div class="d-flex-center text-center">
<a href="[Link]">
<span class="text-light-warning h-60 w-60
d-flex-center b-r-100">
<i class="ti ti-presentation f-s-
26"></i>
</span>
<p class="mt-2 f-w-500 text-
muted">Project</p>
</a>
</div>
<div class="d-flex-center text-center">
<a href="[Link]">
<span class="text-light-secondary h-60 w-
60 d-flex-center b-r-100">
<i class="ti ti-file-dollar
f-s-26"></i>
</span>
<p class="mt-2 f-w-500 text-
muted">Invoice</p>
</a>
</div>
<div class="d-flex-center text-center">
<a href="[Link]">
<span class="text-light-danger h-60 w-60
d-flex-center b-r-100">
<i class="ti ti-news f-s-26"></i>
</span>
<p class="mt-2 f-w-500 text-
muted">Blog</p>
</a>
</div>
</div>
</div>
<div class="card-footer">
<button type="button" class="btn btn-dark w-
100"><i class="ti ti-plus"></i> View
More</button>
</div>
</div>
</div>
</div>
</li>

<li class="header-cart d-none d-sm-block">


<div class="flex-shrink-0 app-dropdown">
<a href="#" class="d-block head-icon position-
relative" data-bs-toggle="dropdown"
data-bs-auto-close="outside" aria-expanded="false">
<i class="ti ti-shopping-cart"></i>
<span
class="position-absolute translate-middle badge
rounded-pill bg-danger badge-notification">4</span>
</a>
<div class="dropdown-menu dropdown-menu-end bg-
transparent border-0">
<div class="card">
<div class="card-header bg-dark">
<h5 class="text-white">Cart <span class="float-
end"><i
class="ti
ti-shopping-cart"></i></span></h5>
</div>
<div class="card-body p-0">
<div class="head-container app-scroll">
<div class="head-box">
<img
src="../assets/images/ecommerce/[Link]" alt="cart"
class="h-50 me-2 bg-light-secondary p-1
b-r-100">
<div class="flex-grow-1">
<a class="mb-0 text-dark f-w-500"
href="product_details.html"> Headphone
</a>
<p class="text-muted">$95 x 2</p>
</div>
<div class="text-end">
<i class="ti ti-x text-dark f-s-15 close-
btn"></i>
<div>
<i class="ti ti-star-filled text-
warning f-s-12"></i>
<i class="ti ti-star-filled text-
warning f-s-12"></i>
<i class="ti ti-star-filled text-
warning f-s-12 star-filled"></i>
<i class="ti ti-star-filled f-s-12
star-filled"></i>
</div>
</div>
</div>
<div class="head-box">
<img
src="../assets/images/ecommerce/[Link]" alt="cart"
class="h-50 object-fit-cover me-2 bg-
light-dark p-1 b-r-100">
<div class="flex-grow-1">
<a class="mb-0 text-dark f-w-500"
href="product_details.html"> Smart Watch</a>
<p class="text-muted">$50.00</p>
</div>
<div class="text-end">
<i class="ti ti-x text-dark f-s-15 close-
btn"></i>
<div>
<i class="ti ti-star-filled text-
warning f-s-12"></i>
<i class="ti ti-star-filled text-
warning f-s-12"></i>
<i class="ti ti-star-filled text-
warning f-s-12 star-filled"></i>
<i class="ti ti-star-filled f-s-12
star-filled"></i>
</div>
</div>
</div>
<div class="head-box">
<img
src="../assets/images/ecommerce/[Link]" alt="cart"
class="h-50 object-fit-cover me-2 bg-
light-dark p-1 b-r-100">
<div class="flex-grow-1">
<a class="mb-0 text-dark f-w-500"
href="product_details.html">Shoes Black</a>
<p class="text-muted">$150.00</p>
</div>
<div class="text-end">
<i class="ti ti-x text-dark f-s-15 close-
btn"></i>
<div>
<i class="ti ti-star-filled text-
warning f-s-12"></i>
<i class="ti ti-star-filled text-
warning f-s-12"></i>
<i class="ti ti-star-filled f-s-12
star-filled"></i>
<i class="ti ti-star-filled f-s-12
star-filled"></i>
</div>

</div>
</div>
<div class="head-box ">
<img
src="../assets/images/ecommerce/[Link]" alt="cart"
class="h-50 object-fit-cover me-2 bg-
light-dark p-1 b-r-100">
<div class="flex-grow-1">
<a class="mb-0 text-dark f-w-500"
href="product_details.html"> Sports
shoes</a>
<p class="text-muted">$200.00</p>
</div>
<div class="text-end">
<i class="ti ti-x text-dark f-s-15 close-
btn last-box"></i>
<div>
<i class="ti ti-star-filled text-
warning f-s-12"></i>
<i class="ti ti-star-filled text-
warning f-s-12"></i>
<i class="ti ti-star-filled text-
warning f-s-12 star-filled"></i>
<i class="ti ti-star-filled text-
warning f-s-12 star-filled"></i>
</div>

</div>
</div>
<div class="hidden-massage py-4 px-3">
<img src="../assets/images/icons/[Link]"
alt="cart" class="w-50 h-50 mb-3">
<div>
<h6 class="mb-0">Your Cart is Empty</h6>
<p class="text-secondary mb-0">Add some
items :)</p>
<a class="btn btn-light-primary btn-xs
mt-2" href="product_details.html">Shop
Now</a>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="mb-2">
<h6 class="text-muted">Total <span
class="float-end text-dark f-w-600">$495.00
</span></h6>
</div>
<button type="button" class="btn btn-dark w-
100">
<i class="ti ti-shopping-cart"></i>
Checkout</button>
</div>
</div>
</div>
</div>
</li>

<li class="header-dark head-icon">


<div class="sun-logo">
<i class="ti ti-moon-off"></i>
</div>
<div class="moon-logo">
<i class="ti ti-moon-filled"></i>
</div>
</li>

<li class="header-notification">
<div class="flex-shrink-0 app-dropdown">
<a href="#" class="d-block head-icon position-
relative" data-bs-toggle="dropdown"
data-bs-auto-close="outside" aria-expanded="false">
<i class="ti ti-bell"></i>
<span
class="position-absolute translate-middle p-1 bg-
success border border-light rounded-circle animate__animated animate__fadeIn
animate__infinite animate__slower"></span>
</a>
<div class="dropdown-menu dropdown-menu-end bg-
transparent border-0">
<div class="card">
<div class="card-header bg-dark">
<h5 class="text-white">Notification <span
class="float-end">
<i class="ti ti-bell
text-white"></i></span></h5>
</div>
<div class="card-body p-0">
<div class="head-container app-scroll">
<div class="head-box">
<span class="bg-secondary h-35 w-35 d-flex-
center b-r-50 position-relative">
<img
src="../assets/images/ai_avtar/[Link]" alt="" class="img-fluid b-r-50">
<span
class="position-absolute bottom-0 end-0
p-1 bg-secondary border border-light rounded-circle"></span>
</span>
<div class="flex-grow-1 ps-2">
<h6 class="mb-0 ">Gene Hart</h6>
<p class="text-secondary f-s-13"> New
account created</p>
</div>
<div class="text-end">
<i class="ti ti-x text-dark f-s-15 close-
btn"></i>
<p class="f-s-12 text-muted">sep 23</p>
</div>
</div>
<div class="head-box">
<span class="text-light-primary h-40 w-40
d-flex-center b-r-50">
<i class="ti ti-gift text-primary f-s-
22"></i>
</span>
<div class="flex-grow-1 ps-2">
<h6 class="mb-0">Gift-Voucher</h6>
<p class="text-secondary f-s-13">50% sale
active</p>
</div>
<div class="text-end">
<i class="ti ti-x text-dark f-s-15 close-
btn"></i>
<p class="f-s-12 text-muted">min 02</p>
</div>
</div>
<div class="head-box">
<span class="bg-secondary h-35 w-35 d-flex-
center b-r-50 position-relative">
<img
src="../assets/images/ai_avtar/[Link]" alt="" class="img-fluid b-r-50">
<span
class="position-absolute bottom-0 end-0
p-1 bg-success border border-light rounded-circle"></span>
</span>
<div class="flex-grow-1 ps-2">
<h6 class="mb-0">Simon Young</h6>
<p class="text-secondary f-s-
13">Hello ..!</p>
</div>
<div class="text-end">
<i class="ti ti-x text-dark f-s-15 close-
btn"></i>
<p class="f-s-12 text-muted">Oct 10</p>
</div>
</div>
<div class="head-box">
<span class="text-light-success h-40 w-40
d-flex-center b-r-50">
<i class="ti ti-shopping-cart text-
success f-s-22"></i>
</span>
<div class="flex-grow-1 ps-2">
<h6 class="mb-0">Order Massage</h6>
<p class="text-secondary f-s-13">Purchase
ecommerce..</p>
</div>
<div class="text-end">
<i class="ti ti-x text-dark f-s-15 close-
btn"></i>
<p class="f-s-12 text-muted">day 4</p>
</div>
</div>
<div class="hidden-massage py-4 px-3">
<img src="../assets/images/icons/[Link]"
class="w-50 h-50 mb-3 mt-2" alt="">
<div>
<h6 class="mb-0">Notification Not
Found</h6>
<p class="text-secondary">When you have
any notifications added here,will
appear here.
</p>
</div>
</div>
</div>
</div>
<div class="card-footer">
<button type="button" class="btn btn-dark w-
100">
<i class="ti ti-plus"></i> View All</button>
</div>
</div>
</div>
</div>
</li>

<li class="header-profile">
<div class="flex-shrink-0 dropdown">
<a href="#" class="d-block head-icon pe-0" data-bs-
toggle="dropdown"
aria-expanded="false">
<img src="../assets/images/avtar/[Link]"
alt="mdo" class="rounded-circle h-35 w-35">
</a>
<ul class="dropdown-menu dropdown-menu-end header-
card border-0 px-2">
<li class="dropdown-item d-flex align-items-center
p-2">
<span class="h-35 w-35 d-flex-center b-r-50
position-relative">
<img src="../assets/images/avtar/[Link]"
alt="" class="img-fluid b-r-50">
<span
class="position-absolute top-0 end-0 p-1 bg-
success border border-light rounded-circle animate__animated animate__fadeIn
animate__infinite animate__fast"></span>
</span>
<div class="flex-grow-1 ps-2">
<h6 class="mb-0"> Ninja Monaldo</h6>
<p class="f-s-12 mb-0 text-secondary">Web
Designer</p>
</div>
</li>

<li class="app-divider-v dotted my-1"></li>


<li>
<a class="dropdown-item" href="./[Link]">
<i class="ti ti-user-circle pe-1 f-s-18"></i>
Profile Detaiils
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ti ti-notification pe-1 f-s-18"></i>
Notification
</a>
</li>

<li class="app-divider-v dotted my-1"></li>


<li>
<a class="dropdown-item" href="#">
<i class="ti ti-help pe-1 f-s-18"></i> Help
</a>
</li>
<li>
<a class="dropdown-item" href="./[Link]">
<i class="ti ti-file-dollar pe-1 f-s-18"></i>
FAQ
</a>
</li>
<li>
<a class="dropdown-item" href="./[Link]">
<i class="ti ti-currency-dollar pe-1 f-s-
18"></i> Pricing
</a>
</li>
<li class="app-divider-v dotted my-1"></li>
<li class="btn-light-danger b-r-5">
<a class="dropdown-item mb-0 text-danger"
href="./sign_in.html">
<i class="ti ti-logout pe-1 f-s-18 text-
danger"></i> Log Out
</a>
</li>

</ul>
</div>

</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header Section ends -->

<!-- Body main section starts -->

<main>
<div class="container-fluid">
<!-- Add Product start -->
<div class="row">
<div class="col-sm-6">
<h4 class="main-title">Add Product</h4>
</div>
<div class="col-sm-6 mt-sm-2">

<ul class="breadcrumb breadcrumb-start float-sm-end">


<li class="d-flex">
<i class="ti ti-server f-s-16"></i>
<a href="#" class="d-none d-sm-block">Apps</a>
</li>

<li class="d-flex">
<a href="#">e-shop</a>
</li>

<li class="d-flex active">


<a href="#">Add Product</a>
</li>
</ul>

</div>
</div>
<!-- Add Product end -->

<div class="row">
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="app-product-section">
<div class="main-title">
<h6>General Information</h6>
</div>
<div>
<form class="app-form">
<div class="mb-3">
<label class="form-label">Product Title</label>
<input type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Brand Name</label>
<input type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Product Description</label>
<div id="description-editor">
<p>Hello !</p>
</div>
</div>
</form>
</div>

<div class="app-divider-v dashed"></div>

<div class="main-title">
<h6>Category</h6>
</div>
<div>
<form class="app-form">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Product Category</label>
<select class="category-select w-100">
<option value="IN">Industry</option>
<option value="FN">Functionality</option>
<option value="CN">Customer Needs</option>
<option value="CP">Customer Preferences</option>
<option value="DE">Demographics</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Product Tags</label>
<select class="category-select w-100">
<option value="Cl">Clothing</option>
<option value="SH">Shoes</option>
<option value="TO">Toys</option>
<option value="IT">Internet Of Things</option>
<option value="BS">Books & Stationaries</option>
<option value="AS">Art Supplies</option>
</select>
</div>
</div>
</div>
</form>
</div>

<div class="app-divider-v dashed"></div>

<div class="main-title">
<h6>Inventory</h6>
</div>

<div>
<form class="app-form">
<div class="row">
<div class="col-md-3">
<div class="mb-3">
<label class="form-label">SKU(Optional)</label>
<input type="text" class="form-control">
</div>
</div>

<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Barcode</label>
<input type="text" class="form-control">
</div>
</div>

<div class="col-md-3">
<div class="mb-3">
<label class="form-label">Quantity</label>
<input type="text" class="form-control">
</div>
</div>

</div>
</form>
</div>

<div class="app-divider-v dashed"></div>

<div class="main-title">
<h6>Shipping</h6>
</div>

<form class="app-form">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Weight</label>
<input type="text" class="form-control">
<div class="form-text">Package Size(The package you
use to ship your product)</div>
</div>
</div>

<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Shipping Days</label>
<input type="text" class="form-control">
</div>
</div>

<div class="col-md-4">
<div class="mb-3">
<label class="form-label">Length</label>
<input type="text" class="form-control">
</div>
</div>

<div class="col-md-4">
<div class="mb-3">
<label class="form-label">Breadth</label>
<input type="text" class="form-control">
</div>
</div>

<div class="col-md-4">
<div class="mb-3">
<label class="form-label">Width</label>
<input type="text" class="form-control">
</div>
</div>

<div class="col-12">
<div class="mt-4 text-end">
<button type="button" class="btn btn-light-
secondary">Discard</button>
<a href="product_details.html" role="button"
class="btn btn-primary">Add Product</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<div class="app-product-section">
<div class="main-title">
<h6>Product Media</h6>
</div>

<div>
<input class="addproduct" type="file" id="addProduct"
multiple="multiple"
data-allow-reorder="true" />
</div>
<div class="app-divider-v dashed"></div>
<div class="main-title">
<h6>Pricing</h6>
</div>

<form class="app-form">
<div class="row">
<div class="col-12">
<div class="mb-3">
<label class="form-label">Price</label>
<div class="input-group mb-3">
<span class="input-group-text b-r-left" id="basic-
addon1">$</span>
<input type="text" class="form-control b-r-right"
aria-label="Username"
aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="col-12">
<div class="mb-3">
<label class="form-label">Compare at price</label>
<div class="input-group mb-3">
<span class="input-group-text b-r-left" id="basic-
addon2">$</span>
<input type="text" class="form-control b-r-right"
aria-label="Username"
aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="col-12">
<div class="mb-3">
<label class="form-label">Discount(%)</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-12">
<div class="mb-3">
<label class="form-label">Discount Type</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</form>
<div class="app-divider-v dashed"></div>

<div>
<div class="main-title">
<h6>Product Variants</h6>
</div>

<div class="variants-box">
<a role="button" class="text-primary" data-bs-
toggle="modal" data-bs-target="#exampleModal">
<i class="ti ti-plus"></i> Add Variants
</a>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5"
id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-
dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<form class="app-form">
<div class="mb-3">
<label class="form-label">City</label>
<select class="form-select">
<option selected="">select Option</option>
<option value="1">Size</option>
<option value="2">Weight</option>
<option value="3">Color</option>
</select>
</div>

<div class="mb-3">
<label class="form-label">Product Hight</label>
<input type="number" class="form-control"
placeholder="Enter Number">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-
bs-dismiss="modal">Add
Variants</button>
</div>
</div>
</div>
</div>
</div>

<div class="app-divider-v dashed"></div>

<div class="main-title">
<h6>Visibility</h6>
</div>

<div>
<div class="form-check d-flex align-items-center mt-2">
<input class="form-check-input f-s-18 mb-1 m-1"
type="radio" name="flexRadioDefault"
id="Visibility_1">
<label class="form-check-label" for="Visibility_1">
Published
</label>
</div>
<div class="form-check d-flex align-items-center mt-2">
<input class="form-check-input f-s-18 mb-1 m-1"
type="radio" name="flexRadioDefault"
id="Visibility_2">
<label class="form-check-label" for="Visibility_2">
Schedule
</label>
</div>
<div class="form-check d-flex align-items-center mt-2">
<input class="form-check-input f-s-18 mb-1 m-1"
type="radio" name="flexRadioDefault"
id="Visibility_3">
<label class="form-check-label" for="Visibility_3">
Hidden
</label>
</div>
</div>

<form class="app-form mt-4 ">


<div class="mb-3">
<label class="form-label">Publish Date</label>
<input type="text" class="form-control">
<div class="form-text">The category will not be visible
until the specified date.</div>
</div>
</form>

</div>
</div>
</div>
</div>
</div>
</div>
</main>

<!-- Body main section ends -->

<!-- tap on top -->


<div class="go-top">
<span class="progress-value">
<i class="ti ti-arrow-up"></i>
</span>
</div>

<!-- Footer Section starts-->


<footer>
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 col-12">
<ul class="footer-text">
<li>
<p class="mb-0">Copyright © 2024 AdminX. All rights
reserved.</p>
</li>
<li> <a href="#"> V1.0.0 </a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="footer-text text-end">
<li> <a href="[Link]"> Need Help <i class="ti
ti-help"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Footer Section ends-->

</div>
</div>
</div>
<!-- essential -->

<!--customizer-->
<div id="customizer"></div>

<!-- latest jquery-->


<script src="../assets/js/[Link]"></script>

<!-- Bootstrap js-->


<script src="../assets/vendor/bootstrap/[Link]"></script>

<!-- Simple bar js-->


<script src="../assets/vendor/simplebar/[Link]"></script>

<!-- select2 -->


<script src="../assets/vendor/select/[Link]"></script>

<!-- filepond -->


<script src="../assets/vendor/filepond/[Link]"></script>
<script src="../assets/vendor/filepond/[Link]"></script>
<script src="../assets/vendor/filepond/[Link]"></script>
<script src="../assets/vendor/filepond/[Link]"></script>
<script src="../assets/vendor/filepond/[Link]"></script>
<script src="../assets/vendor/filepond/[Link]"></script>

<!-- Trumbowyg js -->


<script src="../assets/vendor/trumbowyg/[Link]"></script>

<!-- add product -->


<script src="../assets/js/add_product.js"></script>

<!-- App js-->


<script src="../assets/js/[Link]"></script>

<!-- Customizer js-->


<script src="../assets/js/[Link]"></script>

</body>

</html>

You might also like