ekoetki/public/template/email.html

2190 lines
157 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Multipurpose, super flexible, powerful, clean modern responsive bootstrap 5 admin template"
name="description">
<meta content="admin template, ki-admin admin template, dashboard template, flat admin template, responsive admin template, web app"
name="keywords">
<meta content="la-themes" name="author">
<link href="../assets/images/logo/favicon.png" rel="icon" type="image/x-icon">
<link href="../assets/images/logo/favicon.png" rel="shortcut icon" type="image/x-icon">
<title>Email | ki-admin - Premium Admin Template</title>
<!--font-awesome-css-->
<link href="../assets/vendor/fontawesome/css/all.css" rel="stylesheet">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
rel="stylesheet">
<!-- tabler icons-->
<link href="../assets/vendor/tabler-icons/tabler-icons.css" rel="stylesheet" type="text/css">
<!--flag Icon css-->
<link href="../assets/vendor/flag-icons-master/flag-icon.css" rel="stylesheet" type="text/css">
<!-- Bootstrap css-->
<link href="../assets/vendor/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- simplebar css-->
<link href="../assets/vendor/simplebar/simplebar.css" rel="stylesheet" type="text/css">
<link href="../assets/vendor/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css">
<!-- App css-->
<link href="../assets/css/style.css" rel="stylesheet" type="text/css">
<!-- Responsive css-->
<link href="../assets/css/responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="app-wrapper">
<div class="loader-wrapper">
<div class="loader_24"></div>
</div>
<!-- Menu Navigation starts -->
<nav>
<div class="app-logo">
<a class="logo d-inline-block" href="index.html">
<img alt="#" src="../assets/images/logo/1.png">
</a>
<span class="bg-light-primary toggle-semi-nav d-flex-center">
<i class="ti ti-chevron-right"></i>
</span>
<div class="d-flex align-items-center nav-profile p-3">
<span class="h-45 w-45 d-flex-center b-r-10 position-relative bg-danger m-auto">
<img alt="avatar" class="img-fluid b-r-10" src="../assets/images/avatar/woman.jpg">
<span class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
</span>
<div class="flex-grow-1 ps-2">
<h6 class="text-primary mb-0"> Ninfa Monaldo</h6>
<p class="text-muted f-s-12 mb-0">Web Developer</p>
</div>
<div class="dropdown profile-menu-dropdown">
<a aria-expanded="false" data-bs-auto-close="true" data-bs-placement="top" data-bs-toggle="dropdown"
role="button">
<i class="ti ti-settings fs-5"></i>
</a>
<ul class="dropdown-menu">
<li class="dropdown-item">
<a class="f-w-500" href="profile.html" target="_blank">
<i class="ph-duotone ph-user-circle pe-1 f-s-20"></i> Profile Details
</a>
</li>
<li class="dropdown-item">
<a class="f-w-500" href="setting.html" target="_blank">
<i class="ph-duotone ph-gear pe-1 f-s-20"></i> Settings
</a>
</li>
<li class="dropdown-item">
<div class="d-flex align-items-center justify-content-between">
<div>
<a class="f-w-500" href="email.html#">
<i class="ph-duotone ph-detective pe-1 f-s-20"></i> Incognito
</a>
</div>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input class="form-check-input form-check-primary" id="incognitoSwitch"
type="checkbox">
</div>
</div>
</div>
</li>
<li class="dropdown-item">
<a class="mb-0 text-secondary f-w-500" href="sign_up.html" target="_blank">
<i class="ph-bold ph-plus pe-1 f-s-20"></i> Add account
</a>
</li>
<li class="app-divider-v dotted py-1"></li>
<li class="dropdown-item">
<a class="mb-0 text-danger" href="sign_in.html" target="_blank">
<i class="ph-duotone ph-sign-out pe-1 f-s-20"></i> Log Out
</a>
</li>
</ul>
</div>
</div>
</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 aria-expanded="false" data-bs-toggle="collapse" href="email.html#dashboard">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#home"></use>
</svg>
dashboard
<span class="badge bg-danger badge-dashboard badge-notification ms-2">New</span>
</a>
<ul class="collapse" id="dashboard">
<li><a href="index.html">Ecommerce</a></li>
<li><a href="project_dashboard.html">Project</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#apps">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#stack"></use>
</svg>
Apps
</a>
<ul class="collapse" id="apps">
<li><a href="calendar.html">Calender</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#Profile-page">
Profile
</a>
<ul class="collapse" id="Profile-page">
<li><a href="profile.html">Profile</a></li>
<li><a href="setting.html">Setting</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#projects-page">
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="team.html">Team</a></li>
<li><a href="api.html">API</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#ticket-page">
Ticket
</a>
<ul class="collapse" id="ticket-page">
<li><a href="ticket.html">Ticket</a></li>
<li><a href="ticket_details.html">Ticket Details</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#email-page">
Email Page
</a>
<ul class="collapse" id="email-page">
<li><a href="email.html"> Email</a></li>
<li><a href="read_email.html">Read Email</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#e-shop">
E-shop
</a>
<ul class="collapse" id="e-shop">
<li><a href="cart.html">Cart</a></li>
<li><a href="product.html">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="orders.html">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="checkout.html">Check out</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
</ul>
</li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="chat.html">Chat</a></li>
<li><a href="file_manager.html">File manager</a></li>
<li><a href="bookmark.html">Bookmark</a></li>
<li><a href="kanban_board.html">Kanban board</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="faq.html">FAQS</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#blog-page">
Blog Page
</a>
<ul class="collapse" id="blog-page">
<li><a href="blog.html">Blog</a></li>
<li><a href="blog_read_more.html">Blog Details</a></li>
<li><a href="add_blog.html">Add Blog</a></li>
</ul>
</li>
</ul>
</li>
<li class="no-sub">
<a href="widget.html">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#squares"></use>
</svg>
Widgets
</a>
</li>
<li class="menu-title"><span>Component</span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#ui-kits">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#briefcase"></use>
</svg>
UI kits
</a>
<ul class="collapse" id="ui-kits">
<li><a href="cheatsheet.html">Cheatsheet</a></li>
<li><a href="alert.html">Alert</a></li>
<li><a href="badges.html">Badges</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="cards.html">Cards</a></li>
<li><a href="dropdown.html">Dropdown</a></li>
<li><a href="grid.html">Grid</a></li>
<li><a href="avatar.html">Avatar</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="accordions.html">Accordions</a></li>
<li><a href="progress.html">Progress</a></li>
<li><a href="notifications.html">Notifications</a></li>
<li><a href="list.html">Lists</a></li>
<li><a href="helper_classes.html">Helper Classes</a></li>
<li><a href="background.html">Background</a></li>
<li><a href="divider.html">Divider</a></li>
<li><a href="ribbons.html">Ribbons</a></li>
<li><a href="editor.html">Editor </a></li>
<li><a href="collapse.html">Collapse</a></li>
<li><a href="footer-page.html">Footer</a></li>
<li><a href="shadow.html">Shadow</a></li>
<li><a href="wrapper.html">Wrapper</a></li>
<li><a href="bullet.html">Bullet</a></li>
<li><a href="placeholder.html">Placeholder</a></li>
<li><a href="alignment.html">Alignment Thing</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#advance-ui">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#briefcase-advance"></use>
</svg>
Advance UI
<span class=" badge rounded-pill bg-warning badge-notification ms-2">
12+
<span class="visually-hidden">unread messages</span>
</span>
</a>
<ul class="collapse" id="advance-ui">
<li><a href="modals.html">Modals</a></li>
<li><a href="offcanvas.html">Offcanvas Toggle</a></li>
<li><a href="sweetalert.html">Sweat Alert</a></li>
<li><a href="scrollbar.html">Scrollbar</a></li>
<li><a href="spinners.html">Spinners</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="video_embed.html">Video Embed</a></li>
<li><a href="tour.html">Tour</a></li>
<li><a href="slick.html">Slider</a></li>
<li><a href="bootstrap_slider.html">Bootstrap Slider</a></li>
<li><a href="scrollpy.html">Scrollpy</a></li>
<li><a href="tooltips_popovers.html">Tooltip & Popovers</a></li>
<li><a href="ratings.html">Rating</a></li>
<li><a href="prismjs.html">Prismjs</a></li>
<li><a href="count_down.html">Count Down</a></li>
<li><a href="count_up.html"> Count up </a></li>
<li><a href="draggable.html">Draggable</a></li>
<li><a href="tree-view.html">Tree View</a></li>
<li><a href="block_ui.html">Block Ui </a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#icons">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#gift"></use>
</svg>
Icons
</a>
<ul class="collapse" id="icons">
<li><a href="fontawesome.html">Fontawesome</a></li>
<li><a href="flag_icons.html">Flag</a></li>
<li><a href="tabler-icons.html">Tabler</a></li>
<li><a href="weather_icon.html">Weather</a></li>
<li><a href="animated_icon.html">Animated</a></li>
<li><a href="iconoir_icon.html">Iconoir</a></li>
<li><a href="phosphor.html">Phosphor</a></li>
</ul>
</li>
<li class="no-sub">
<a href="misc.html">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#rectangle"></use>
</svg>
Misc
</a>
</li>
<li class="menu-title"><span>Map & Charts </span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#maps">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#location"></use>
</svg>
Map
</a>
<ul class="collapse" id="maps">
<li><a href="google-map.html">Google Maps</a></li>
<li><a href="leaflet-map.html">Leaflet map</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#chart">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#chart"></use>
</svg>
Chart
</a>
<ul class="collapse" id="chart">
<li><a href="chart_js.html">Chart js</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#apexcharts-page">
Apexcharts
</a>
<ul class="collapse" id="apexcharts-page">
<li><a href="line.html">Line</a></li>
<li><a href="area_charts.html">Area</a></li>
<li><a href="column.html">Column</a></li>
<li><a href="bar.html">Bar</a></li>
<li><a href="mixed.html">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="boxplot.html">Boxplot</a></li>
<li><a href="bubble.html">Bubble</a></li>
<li><a href="scatter.html">Scatter</a></li>
<li><a href="heatmap.html">Heatmap</a></li>
<li><a href="treemap.html">Treemap</a></li>
<li><a href="pie_charts.html">Pie</a></li>
<li><a href="radial_bar.html">Radial bar</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 aria-expanded="false" data-bs-toggle="collapse" href="email.html#table">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#table"></use>
</svg>
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 aria-expanded="false" data-bs-toggle="collapse" href="email.html#forms">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#wallet"></use>
</svg>
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="touch_spin.html">Touch spin</a></li>
<li><a href="select.html">Select2</a></li>
<li><a href="switch.html">Switch</a></li>
<li><a href="range_slider.html">Range Slider</a></li>
<li><a href="typeahead.html">Typeahead</a></li>
<li><a href="textarea.html">Textarea</a></li>
<li><a href="clipboard.html">Clipboard</a></li>
<li><a href="file_upload.html">File Upload</a></li>
<li><a href="dual_list_boxes.html">Dual List Boxes</a></li>
<li><a href="default_forms.html">Default Forms</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#ready_to_use">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#newspaper"></use>
</svg>
Ready to use
<span class="badge text-bg-success badge-notification ms-2">2</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 aria-expanded="false" data-bs-toggle="collapse" href="email.html#auth_pages">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#window"></use>
</svg>
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="password_reset.html">Password Reset</a></li>
<li><a href="password_reset_1.html">Password Reset with Bg-image</a></li>
<li><a href="password_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_verification.html">Two-Step Verification</a></li>
<li><a href="two_step_verification_1.html">Two-Step Verification with Bg-image</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#error_pages">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#exclamation-circle"></use>
</svg>
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 aria-expanded="false" data-bs-toggle="collapse" href="email.html#other_pages">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#document"></use>
</svg>
Other Pages
</a>
<ul class="collapse" id="other_pages">
<li><a href="blank.html">Blank</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="landing.html">Landing Page</a></li>
<li><a href="coming_soon.html">Coming Soon</a></li>
<li><a href="sitemap.html">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 aria-expanded="false" data-bs-toggle="collapse" href="email.html#level">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#arrow-down"></use>
</svg>
2 level
</a>
<ul class="collapse" id="level">
<li><a href="email.html#">Blank</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="email.html#level2">
Another level
</a>
<ul class="collapse" id="level2">
<li><a href="blank.html">Blank</a></li>
</ul>
</li>
</ul>
</li>
<li class="no-sub">
<a href="https://phpstack-1384472-5121645.cloudwaysapps.com/document/html/ki-admin/index.html">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#document-text"></use>
</svg>
Document
</a>
</li>
<li class="no-sub">
<a href="mailto:teqlathemes@gmail.com">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#chat-bubble"></use>
</svg>
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-8 col-sm-6 d-flex align-items-center header-left p-0">
<span class="header-toggle ">
<i class="ph ph-squares-four"></i>
</span>
<div class="header-searchbar w-100">
<form action="email.html#" class="mx-sm-3 app-form app-icon-form ">
<div class="position-relative">
<input aria-label="Search" class="form-control" placeholder="Search..."
type="search">
<i class="ti ti-search text-dark"></i>
</div>
</form>
</div>
</div>
<div class="col-4 col-sm-6 d-flex align-items-center justify-content-end header-right p-0">
<ul class="d-flex align-items-center">
<li class="header-language">
<div class="flex-shrink-0 dropdown" id="lang_selector">
<a aria-expanded="false" class="d-block head-icon ps-0"
data-bs-toggle="dropdown"
href="email.html#">
<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 header-card border-0">
<li class="lang lang-en selected dropdown-item p-2" data-bs-placement="top"
data-bs-toggle="tooltip" title="US">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-usa flag-icon-squared rounded-circle f-s-20"></i>
<span class="ps-2">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 rounded-circle f-s-20"></i>
<span class="ps-2">France</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 rounded-circle f-s-20"></i>
<span class="ps-2">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 rounded-circle f-s-20"></i>
<span class="ps-2">Italy</span>
</span>
</li>
</ul>
</div>
</li>
<li class="header-apps">
<a aria-controls="appscanvasRights"
class="d-block head-icon bg-light-dark rounded-circle f-s-22 p-2"
data-bs-target="#appscanvasRights" data-bs-toggle="offcanvas"
href="email.html#" role="button">
<i class="ph ph-bounding-box"></i>
</a>
<div aria-labelledby="appscanvasRightsLabel"
class="offcanvas offcanvas-end header-apps-canvas"
id="appscanvasRights"
tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="appscanvasRightsLabel">Shortcut</h5>
<div class="app-dropdown flex-shrink-0">
<a aria-expanded="false" class=" p-1" data-bs-auto-close="outside"
data-bs-toggle="dropdown"
href="email.html#"
role="button">
<i class="ph-bold ph-faders-horizontal f-s-20"></i>
</a>
<ul class="dropdown-menu mb-3">
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Privacy Settings
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Account Settings
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Accessibility
</a>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item border-0">
<a aria-expanded="false" data-bs-toggle="dropdown" href="email.html#"
role="button">
More Settings
</a>
<ul class="dropdown-menu sub-menu">
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Backup and Restore
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
<span>Data Usage</span>
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
<span>Theme</span>
</a>
</li>
<li class="dropdown-item d-flex align-items-center justify-content-between">
<a href="email.html#">
<p class="mb-0">Notification</p>
</a>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input class="form-check-input form-check-primary"
id="notificationSwitch"
type="checkbox">
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="offcanvas-body app-scroll">
<div class="row row-cols-3 g-2">
<div class="d-flex-center text-center">
<a class="text-light-primary w-100 rounded-3 py-3 px-2 "
href="product.html"
target="_blank">
<span>
<i class="ph-light ph-shopping-bag-open f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">E-shop</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-danger w-100 rounded-3 py-3 px-2 "
href="email.html"
target="_blank">
<span>
<i class="ph-light ph-envelope f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Email</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-success w-100 rounded-3 py-3 px-2 "
href="chat.html"
target="_blank">
<span>
<i class="ph-light ph-chat-circle-text f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Chat</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-warning w-100 rounded-3 py-3 px-2 "
href="project_app.html"
target="_blank">
<span>
<i class="ph-light ph-projector-screen-chart f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Project</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-info w-100 rounded-3 py-3 px-2 "
href="invoice.html"
target="_blank">
<span>
<i class="ph-light ph-scroll f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Invoice</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-dark w-100 rounded-3 py-3 px-2 "
href="blog.html"
target="_blank">
<span>
<i class="ph-light ph-notebook f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Blog</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-danger w-100 rounded-3 py-3 px-2 "
href="calendar.html"
target="_blank">
<span>
<i class="ph-light ph-calendar f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Calender</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-warning w-100 rounded-3 py-3 px-2 "
href="file_manager.html"
target="_blank">
<span>
<i class="ph-light ph-folder-open f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark txt-ellipsis-1">File
Manager</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-primary w-100 rounded-3 py-3 px-2 "
href="gallery.html"
target="_blank">
<span>
<i class="ph-light ph-google-photos-logo f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Gallery</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-success w-100 rounded-3 py-3 px-2 "
href="profile.html"
target="_blank">
<span>
<i class="ph-light ph-users-three f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Profile</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-secondary w-100 rounded-3 py-3 px-2 "
href="kanban_board.html"
target="_blank">
<span>
<i class="ph-light ph-selection-foreground f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Task Board</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="d-flex-center text-light-secondary w-100 h-100 rounded-3 p-2 dashed-1-secondary"
href="kanban_board.html"
target="_blank">
<span>
<i class="ph-light ph-plus f-s-30"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="header-cart">
<a aria-controls="cartcanvasRight"
class="d-block head-icon position-relative bg-light-dark rounded-circle f-s-22 p-2"
data-bs-target="#cartcanvasRight"
data-bs-toggle="offcanvas"
href="email.html#" role="button">
<i class="ph ph-shopping-cart-simple"></i>
<span
class="position-absolute translate-middle badge rounded-pill bg-danger badge-notification">4</span>
</a>
<div aria-labelledby="cartcanvasRightLabel"
class="offcanvas offcanvas-end header-cart-canvas"
id="cartcanvasRight"
tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="cartcanvasRightLabel">Cart</h5>
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
type="button"></button>
</div>
<div class="offcanvas-body app-scroll p-0">
<div class="head-container">
<div class="head-box">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/01.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Backpacks (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)
</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : M</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :Pink</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$600.50 x 1</p>
</div>
</div>
<div class="head-box">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/05.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Women's Watch (4<i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : S</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :Rose Gold</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$519.10 x 2</p>
</div>
</div>
<div class="head-box">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/04.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank">Sandals (5 <i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : 8</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :White</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$390 x 2</p>
</div>
</div>
<div class="head-box ">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/03.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Jackets (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : XL</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :Blue</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$300.00 x 2</p>
</div>
</div>
<div class="head-box ">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/02.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Shoes (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : 9</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :White</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$450.00 x 1</p>
</div>
</div>
<div class="hidden-massage py-4 px-3">
<div>
<i class="ph-duotone ph-shopping-bag-open f-s-50 text-primary"></i>
<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="offcanvas-footer">
<div class="head-box-footer p-3">
<div class="mb-4">
<h6 class="text-muted f-w-600">Total <span
class="float-end text-primary">$3,468.00</span></h6>
</div>
<div class="header-cart-btn">
<a class="btn btn-primary" href="cart.html" role="button"
target="_blank">
<i class="ti ti-eye"></i> View Cart</a>
<a class="btn btn-success" href="checkout.html" role="button"
target="_blank">
Checkout <i class="ti ti-shopping-cart"></i></a>
</div>
</div>
</div>
</div>
</li>
<li class="header-dark">
<div class="sun-logo head-icon bg-light-dark rounded-circle f-s-22 p-2">
<i class="ph ph-moon-stars"></i>
</div>
<div class="moon-logo head-icon bg-light-dark rounded-circle f-s-22 p-2">
<i class="ph ph-sun-dim"></i>
</div>
</li>
<li class="header-notification">
<a aria-controls="notificationcanvasRight"
class="d-block head-icon position-relative bg-light-dark rounded-circle f-s-22 p-2"
data-bs-target="#notificationcanvasRight"
data-bs-toggle="offcanvas"
href="email.html#"
role="button">
<i class="ph ph-bell"></i>
<span
class="position-absolute translate-middle p-1 bg-primary border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower"></span>
</a>
<div aria-labelledby="notificationcanvasRightLabel"
class="offcanvas offcanvas-end header-notification-canvas"
id="notificationcanvasRight" tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="notificationcanvasRightLabel">
Notification</h5>
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
type="button"></button>
</div>
<div class="offcanvas-body app-scroll p-0">
<div class="head-container">
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0"
href="read_email.html"><span
class="f-w-500 text-dark">Gene Hart</span> wants to
edit <span
class="f-w-500 text-dark">Report.doc</span></a>
<div>
<a class="d-inline-block f-w-500 text-success me-1"
href="email.html#">Approve</a>
<a class="d-inline-block f-w-500 text-danger"
href="email.html#">Deny</a>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> sep 23 </span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0" href="read_email.html">Hey
<span
class="f-w-500 text-dark">Emery McKenzie</span>,
get ready: Your order from <span
class="f-w-500 text-dark">@Shopper.com</span></a>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> sep 23 </span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0"
href="read_email.html"><span
class="f-w-500 text-dark">Simon Young</span> shared
a file called <span
class="f-w-500 text-dark">Dropdown.pdf</span></a>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> 30 min</span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0"
href="read_email.html"><span
class="f-w-500 text-dark">Becky G. Hayes</span> has
added a comment to <span
class="f-w-500 text-dark">Final_Report.pdf</span></a>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> 45 min</span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0 "
href="read_email.html"><span
class="f-w-600 text-dark">@Romaine</span>
invited you to a meeting
</a>
<div>
<a class="d-inline-block f-w-500 text-success me-1"
href="email.html#">Join</a>
<a class="d-inline-block f-w-500 text-danger" href="email.html#">Decline</a>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> 1 hour ago </span>
</div>
</div>
</div>
<div class="hidden-massage py-4 px-3">
<div>
<i class="ph-duotone ph-bell-ringing f-s-50 text-primary"></i>
</div>
<div>
<h6 class="mb-0">Notification Not Found</h6>
<p class="text-dark">When you have any notifications added
here,will
appear here.
</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
<!-- Header Section ends -->
<!-- Body main section starts -->
<main>
<div class="container-fluid">
<!-- Breadcrumb start -->
<div class="row m-1">
<div class="col-12 ">
<h4 class="main-title">Email</h4>
<ul class="app-line-breadcrumbs mb-3">
<li class="">
<a class="f-s-14 f-w-500" href="email.html#">
<span>
<i class="ph-duotone ph-stack f-s-16"></i> Apps
</span>
</a>
</li>
<li class="active">
<a class="f-s-14 f-w-500" href="email.html#">Email</a>
</li>
</ul>
</div>
</div>
<!-- Breadcrumb end -->
<!-- Email start -->
<div class="row position-relative">
<div class="col-lg-3">
<div class="mailbox">
<div class="card">
<div class="card-body">
<div class="d-flex">
<button class="btn btn-primary w-100" data-bs-target="#emailBox"
data-bs-toggle="modal"
type="button">Compose
</button>
<div class="close-togglebtn">
<a class="ms-2 close-toggle" role="button"><i
class="ti ti-align-justified fs-5"></i></a>
</div>
</div>
<div class="horizontal-tab-wrapper">
<ul class="email-list mt-3 tabs">
<li class="tab-link active" data-tab="1">
<i class="ti ti-mail fs-5 pe-2"></i> <span
class="flex-grow-1">Inbox</span> 10+
</li>
<li class="tab-link" data-tab="2"><i
class="ti ti-send fs-5 pe-2"></i><span
class="flex-grow-1">Sent</span></li>
<li class="tab-link" data-tab="3"><i
class="ti ti-file fs-5 pe-2"></i><span
class="flex-grow-1">Draft</span></li>
<li class="tab-link" data-tab="4"><i
class="ti ti-star fs-5 pe-2"></i><span
class="flex-grow-1">
Starred </span>
2+
</li>
<li class="tab-link" data-tab="5"><i
class="ti ti-alert-octagon fs-5 pe-2"></i><span
class="flex-grow-1">Spam</span></li>
<li class="tab-link" data-tab="6"><i class="ti ti-trash fs-5 pe-2 "></i><span
class="flex-grow-1">Trash</span></li>
</ul>
</div>
<div class="app-divider-v dashed p-2"></div>
<ul class="email-list">
<li>
<h6>Labels</h6>
</li>
<li><i class="ti ti-circle-filled pe-2 text-danger"></i> Social</li>
<li><i class="ti ti-circle-filled pe-2 text-primary"></i> Company</li>
<li><i class="ti ti-circle-filled pe-2 text-success"></i> Important</li>
<li><i class="ti ti-circle-filled pe-2 text-info"></i> Private</li>
</ul>
<div class="app-divider-v dashed p-2"></div>
<ul class="email-list">
<li><i class="ti ti-mail fs-5 pe-2"></i>All Mail</li>
<li><i class="ti ti-album fs-5 pe-2"></i>Primary</li>
<li><i class="ti ti-tag fs-5 pe-2"></i>Promotions</li>
<li><i class="ti ti-users fs-5 pe-2"></i>Social</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="d-lg-none">
<a class="me-3 toggle-btn" role="button"><i
class="ti ti-align-justified"></i></a>
</div>
<div class="flex-grow-1">
<div class="input-group b-r-search">
<span class="input-group-text bg-primary border-0 "><i
class="ti ti-search"></i></span>
<input class="form-control" placeholder="Search..." type="text">
</div>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<a aria-expanded="false" class="icon-btn dropdown-toggle p-2"
data-bs-auto-close="true"
data-bs-toggle="dropdown" role="button">
<i class="ti ti-dots-vertical"></i>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i class="ti ti-album"></i>
Primary </a></li>
<li><a class="dropdown-item" href="email.html#"><i class="ti ti-tag"></i>
Promotions </a></li>
<li><a class="dropdown-item" href="email.html#"><i class="ti ti-users"></i>
Social </a></li>
</ul>
</div>
</div>
</div>
<div class="content-wrapper mt-3">
<div class="tabs-content active" id="tab-1">
<div class="mail-table">
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox1" type="checkbox"
value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-primary position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/14.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Gene Hart</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">This is the content of
the email. It may contain anything the user....</span></a>
</div>
</div>
<div>
<p class="text-center">sep 23</p>
<span class="badge text-light-success">Important</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox21"
type="checkbox" value="option1">
<span class="ms-2 me-2">
<i class="ti text-warning star-icon fs-5 ti-star-filled"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-secondary position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/15.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Neil Fisher</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">It enables users to
easily send and receive documents, images, links and ....</span></a>
</div>
</div>
<div>
<p class="text-center">Oct 23</p>
<span class="badge text-light-primary">Company</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox22"
type="checkbox" value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-dark position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/13.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Simon Young</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">Companies can use email
to convey information to a large number of ....</span></a>
</div>
</div>
<div>
<p class="text-center">Dec 22</p>
<span class="badge text-light-danger">Social</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox23"
type="checkbox" value="option1">
<span class="ms-2 me-2">
<i class="ti text-warning star-icon fs-5 ti-star-filled"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-primary position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/16.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Kylie Wright</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">The domain of Gmail is
xyz@gmail.com where ....</span></a>
</div>
</div>
<div>
<p class="text-center">sep 23</p>
<span class="badge text-light-primary">Company</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox24"
type="checkbox" value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-danger position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/4.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Diana White</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">System Software is
closer to the computer system.....</span></a>
</div>
</div>
<div>
<p class="text-center">sep 23</p>
<span class="badge text-light-success">Important</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox25"
type="checkbox" value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-warning position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/6.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">James Lewis</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">An important feature of
application software is it performs more....</span></a>
</div>
</div>
<div>
<p class="text-center">Nov 16</p>
<span class="badge text-light-info">Private</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox26"
type="checkbox" value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-primary position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/3.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Gene Raynor</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">The application software
is easy to design and understand.....</span></a>
</div>
</div>
<div>
<p class="text-center">Oct 6</p>
<span class="badge text-light-info">Private</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tabs-content" id="tab-2">
<div class="mail-table">
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox2" type="checkbox"
value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-primary position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/15.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Neil Fisher</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">Whether you're preparing
for your first job interview or aiming to upskill....</span></a>
</div>
</div>
<div>
<p class="text-center">Oct 23</p>
<span class="badge text-light-primary">Company</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox3" type="checkbox"
value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-primary position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/3.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">James Lewis</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">A message or messages
sent or received by such a system.....</span></a>
</div>
</div>
<div>
<p class="text-center">Nov 16</p>
<span class="badge text-light-info">Private</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox4" type="checkbox"
value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-primary position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/07.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Neil Fisher</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">E-mail has become one of
the most widely used aspects of the Internet, ....</span></a>
</div>
</div>
<div>
<p class="text-center">Oct 23</p>
<span class="badge text-light-primary">Company</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tabs-content" id="tab-3">
<div class="mail-table">
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox5" type="checkbox"
value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-danger position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/16.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Kylie Wright</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">One of the great things
about it is that its fast, cost-effective, and convenient....</span></a>
</div>
</div>
<div>
<p class="text-center">sep 23</p>
<span class="badge text-light-primary">Company</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox6" type="checkbox"
value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-dark position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/4.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Diana White</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">Email messages are sent
from software programs and web browsers, collectively as email....</span></a>
</div>
</div>
<div>
<p class="text-center">Oct 23</p>
<span class="badge text-light-success">Important</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox7" type="checkbox"
value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star-filled text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-secondary position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/3.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Gene Raynor</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">The senders mail
server, also called a Agent (MTA), initiates a Simple....</span></a>
</div>
</div>
<div>
<p class="text-center">Oct 6</p>
<span class="badge text-light-info">Private</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox8" type="checkbox"
value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-warning position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/14.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Gene Hart</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">The SMTP “envelope” is
the data communicated between servers during the email delivery
process...</span></a>
</div>
</div>
<div>
<p class="text-center">sep 23</p>
<span class="badge text-light-success">Important</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tabs-content" id="tab-4">
<div class="mail-table">
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox9" type="checkbox"
value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star-filled text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-primary position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/16.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Kylie Wright</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">The domain of Gmail is
xyz@gmail.com where ....</span></a>
</div>
</div>
<div>
<p class="text-center">sep 23</p>
<span class="badge text-light-primary">Company</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox10"
type="checkbox" value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star-filled text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-dark position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/15.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Neil Fisher</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">It enables users to
easily send and receive documents, images, links and ....</span></a>
</div>
</div>
<div>
<p class="text-center">Oct 23</p>
<span class="badge text-light-primary">Company</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox11"
type="checkbox" value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star-filled text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-secondary position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/6.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Gene Raynor</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">Computer-based messaging
between users of the same system became possible after...</span></a>
</div>
</div>
<div>
<p class="text-center">Oct 6</p>
<span class="badge text-light-info">Private</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tabs-content" id="tab-5">
<div class="mail-table d-flex align-items-center justify-content-center">
<div class="spam-box text-center">
<img alt="" src="../assets/images/icons/spam..png">
<h5>No spam here</h5>
<p>The MUA formats the message in email format and uses the
submission a profile of the
Simple Mail Transfer Protocol (SMTP), to send the message !</p>
</div>
</div>
</div>
<div class="tabs-content" id="tab-6">
<div class="mail-table">
<div class="mail-box">
<input class="form-check-input" id="inlineCheckbox12"
type="checkbox" value="option1">
<span class="ms-2 me-2">
<i class="ti ti-star text-warning star-icon fs-5"></i>
</span>
<div class="flex-grow-1 position-relative">
<div
class="mail-img h-35 w-35 b-r-50 overflow-hidden text-bg-primary position-absolute mt-1">
<img alt="" class="img-fluid"
src="../assets/images/avatar/13.png">
</div>
<div class="mg-s-45">
<h6 class="mb-0 f-w-600">Simon Young</h6>
<a href="read_email.html"><span
class="f-s-13 text-secondary">Internet email messages
consist of two sections, "header" and "body". These are known as..</span></a>
</div>
</div>
<div>
<p class="text-center">Oct 22</p>
<span class="badge text-light-danger">Social</span>
</div>
<div>
<div class="btn-group dropdown-icon-none">
<button aria-expanded="false"
class="btn border-0 icon-btn b-r-4 dropdown-toggle"
data-bs-auto-close="true" data-bs-toggle="dropdown"
type="button">
<i class="ti ti-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-archive"></i> Archive </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-trash"></i> Delete </a></li>
<li><a class="dropdown-item" href="email.html#"><i
class="ti ti-mail-opened"></i> Read Mali </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Email end -->
</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>
<div aria-hidden="true" aria-labelledby="emailBoxLabel" class="modal fade" data-bs-backdrop="static"
data-bs-keyboard="false"
id="emailBox" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="emailBoxLabel">New Message</h1>
</div>
<div class="modal-body">
<form class="app-form">
<div class="mb-3">
<label class="form-label">To :</label>
<input class="form-control" id="userName" placeholder="@gmail.com" type="email">
</div>
<div class="mb-3">
<label class="form-label">Subject :</label>
<input class="form-control" id="subject" placeholder="type subject..." type="text">
</div>
<div class="status mb-3">
<label class="form-label">status :</label>
<select aria-label="Default select example" class="form-select" id="status">
<option value="">Status</option>
<option value="Important">Important</option>
<option value="Company">Company</option>
<option value="Social">Social</option>
<option value="Private">Private</option>
</select>
</div>
<div class="mb-3">
<label class="form-label" for="exampleFormControlTextarea1">Message</label>
<textarea class="form-control" id="exampleFormControlTextarea1"></textarea>
</div>
<div>
<label class="form-label">Attached File</label>
<input class="form-control" type="file">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" id="addEmail" type="button">Send</button>
</div>
</div>
</div>
</div>
<!-- Footer Section starts-->
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-9 col-12">
<p class="footer-text f-w-600 mb-0">Copyright © 2025 ki-admin. All rights reserved 💖
V1.0.0</p>
</div>
<div class="col-md-3">
<div class="footer-text text-end">
<a class="f-w-500 text-primary" href="mailto:teqlathemes@gmail.com"> Need Help <i
class="ti ti-help"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer Section ends-->
</div>
</div>
</div>
<!-- tap on top -->
<div class="go-top">
<span class="progress-value">
<i class="ti ti-arrow-up"></i>
</span>
</div>
<!--customizer-->
<div id="customizer"></div>
<!-- latest jquery-->
<script src="../assets/js/jquery-3.6.3.min.js"></script>
<!-- Bootstrap js-->
<script src="../assets/vendor/bootstrap/bootstrap.bundle.min.js"></script>
<!-- Simple bar js-->
<script src="../assets/vendor/simplebar/simplebar.js"></script>
<!-- phosphor js -->
<script src="../assets/vendor/phosphor/phosphor.js"></script>
<!-- js -->
<script src="../assets/js/email.js"></script>
<!-- App js-->
<script src="../assets/js/script.js"></script>
<!-- Customizer js-->
<script src="../assets/js/customizer.js"></script>
</body>
</html>