Scribd
Upload
12 views31 pages

Tabler Admin Template Overview

The document is an HTML template for a premium admin dashboard called AdminX, designed with Bootstrap 5. It includes various sections for navigation, components, maps, charts, tables, and forms, providing links to different functionalities and pages. The template is responsive and features a modern design suitable for 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
12 views31 pages

Tabler Admin Template Overview

The document is an HTML template for a premium admin dashboard called AdminX, designed with Bootstrap 5. It includes various sections for navigation, components, maps, charts, tables, and forms, providing links to different functionalities and pages. The template is responsive and features a modern design suitable for 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>
<!-- 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">

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

<!-- tabler icons-->


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

<!-- simplebar css-->


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

<!--flag Icon css-->


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

<!-- Bootstrap css-->


<link rel="stylesheet" type="text/css"
href="../assets/vendor/bootstrap/[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">
<!-- 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">
<!-- 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">
<!-- Animation start -->
<div class="row">
<div class="col-sm-6">
<h4 class="main-title">Animation</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="f-s-14"> <span class="d-none d-md-
block">Advance UI</span></a>
</li>
<li class="d-flex active">
<a href="#" class="f-s-14">Animation</a>
</li>
</ul>
</div>
</div>
<!-- Animation end -->

<div class="row">
<!-- example start -->
<div class="col-12">
<div class="card">
<div class="card-header">
<h5>Where can use? some example ..!</h5>
</div>
<div class="card-body">
<div>
<div class="row">
<div class="col-12">
<div class="d-flex flex-wrap gap-3">
<div class="h-45 w-45 d-flex-center b-r-50 overflow-
hidden text-bg-primary">
<img src="../assets/images/avtar/[Link]" alt=""
class="img-fluid animate__pulse animate__animated
animate__infinite animate__faster">
</div>
<span class="bg-secondary h-45 w-45 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__zoomIn
animate__infinite animate__fast"></span>
</span>
<span class="bg-secondary h-45 w-45 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-10 start-40 translate-
middle d-flex-center bg-danger border border-light rounded-circle text-center h-20
w-20 f-s-10">
<i
class="ti ti-message-circle animate__animated
animate__heartBeat animate__infinite animate__fast"></i>
</span>
</span>
<span class="text-outline-primary h-45 w-45 d-flex-center
b-r-50">
<i
class="ti ti-bell-ringing animate__animated
animate__rubberBand animate__infinite animate__fast"></i>
</span>
<button type="button" class="btn btn-success btn-lg">
Submit <i
class="ti ti-chevrons-right animate__animated
animate__fadeOutRight animate__infinite animate__fast"></i>
</button>
<button type="button" class="btn btn-danger btn-lg">
<i
class="ti ti-trash animate__animated
animate__bounceIn animate__infinite animate__fast"></i>
Delete </button>
<button type="button" class="btn btn-primary btn-lg">
<i
class="ti ti-download animate__animated
animate__bounceInDown animate__infinite animate__slow"></i>
Download </button>
<button type="button" class="btn btn-warning btn-lg">
Upload <i
class="ti ti-upload animate__animated
animate__fadeOutRight animate__infinite animate__fast"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- example end -->
<div class="col-12">
<div class="animation-blocks" data-masonry='{"percentPosition":
true }'>
<!-- Attention seekers start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#attention-seekers" aria-
expanded="false">Attention seekers</a>
</div>
<div class="collapse card-body show px-4" id="attention-
seekers">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="bounce"> bounce</a>
<a href="#" class="btn btn-light-primary" data-
ani="flash"> flash</a>
<a href="#" class="btn btn-light-primary" data-
ani="pulse"> pulse</a>
<a href="#" class="btn btn-light-primary" data-
ani="rubberBand"> rubberBand</a>
<a href="#" class="btn btn-light-primary" data-
ani="shakeX"> shakeX</a>
<a href="#" class="btn btn-light-primary" data-
ani="shakeY"> shakeY</a>
<a href="#" class="btn btn-light-primary" data-
ani="headShake"> headShake</a>
<a href="#" class="btn btn-light-primary" data-
ani="swing"> swing</a>
<a href="#" class="btn btn-light-primary" data-
ani="tada"> tada</a>
<a href="#" class="btn btn-light-primary" data-
ani="wobble"> wobble</a>
<a href="#" class="btn btn-light-primary" data-
ani="jello"> jello</a>
<a href="#" class="btn btn-light-primary" data-
ani="heartBeat"> heartBeat</a>
</div>
</li>

</ul>
</div>
</div>
<!-- Attention seekers end -->
<!-- Back entrances start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#back-entrances" aria-
expanded="false">
Back entrances
</a>
</div>
<div class="collapse card-body show" id="back-entrances">
<ul>
<li class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="backInDown"> backInDown</a>
<a href="#" class="btn btn-light-primary" data-
ani="backInLeft"> backInLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="backInRight"> backInRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="backInUp"> backInUp</a>
</li>
</ul>
</div>
</div>
<!-- Back entrances end -->
<!-- Back exits strat -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#back-exits" aria-
expanded="false">
Back exits
</a>
</div>
<div class="collapse card-body show" id="back-exits">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="backOutDown"> backOutDown</a>
<a href="#" class="btn btn-light-primary" data-
ani="backOutLeft"> backOutLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="backOutRight"> backOutRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="backOutUp"> backOutUp</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Back exits end -->
<!-- Bouncing entrances start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#bouncing-entrances" aria-
expanded="false">
Bouncing entrances
</a>
</div>
<div class="collapse card-body show" id="bouncing-entrances">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="bounceIn"> bounceIn</a>
<a href="#" class="btn btn-light-primary" data-
ani="bounceInDown"> bounceInDown</a>
<a href="#" class="btn btn-light-primary" data-
ani="bounceInLeft"> bounceInLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="bounceInRight"> bounceInRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="bounceInUp"> bounceInUp</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Bouncing entrances end -->
<!-- Bouncing exits start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#bouncing-exits" aria-
expanded="false">
Bouncing exits
</a>
</div>
<div class="collapse card-body show" id="bouncing-exits">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="bounceOut"> bounceOut</a>
<a href="#" class="btn btn-light-primary" data-
ani="bounceOutDown"> bounceOutDown</a>
<a href="#" class="btn btn-light-primary" data-
ani="bounceOutLeft"> bounceOutLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="bounceOutRight"> bounceOutRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="bounceOutUp"> bounceOutUp</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Bouncing exits end -->
<!-- Fading entrances start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#fading-entrances" aria-
expanded="false">
Fading entrances
</a>
</div>
<div class="collapse card-body show" id="fading-entrances">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="fadeIn"> fadeIn</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeInDown"> fadeInDown</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeInDownBig"> fadeInDownBig</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeInLeft"> fadeInLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeInLeftBig"> fadeInLeftBig</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeInRight"> fadeInRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeInRightBig"> fadeInRightBig</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeInUp"> fadeInUp</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeInUpBig"> fadeInUpBig</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeInTopLeft"> fadeInTopLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeInTopRight"> fadeInTopRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeInBottomLeft"> fadeInBottomLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeInBottomRight">
fadeInBottomRight</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Fading entrances end -->
<!-- Fading exits start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#fading-exits" aria-
expanded="false">
Fading exits
</a>
</div>
<div class="collapse card-body show" id="fading-exits">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="fadeOut"> fadeOut</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeOutDown"> fadeOutDown</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeOutDownBig"> fadeOutDownBig</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeOutLeft"> fadeOutLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeOutLeftBig"> fadeOutLeftBig</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeOutRight"> fadeOutRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeOutRightBig"> fadeOutRightBig</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeOutUp"> fadeOutUp</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeOutUpBig"> fadeOutUpBig</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeOutTopLeft"> fadeOutTopLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeOutTopRight"> fadeOutTopRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeOutBottomRight">
fadeOutBottomRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="fadeOutBottomLeft">
fadeOutBottomLeft</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Fading exits end -->
<!-- Flippers start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#flippers" aria-
expanded="false">
Flippers
</a>
</div>
<div class="collapse card-body show" id="flippers">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="flip"> flip</a>
<a href="#" class="btn btn-light-primary" data-
ani="flipInX"> flipInX</a>
<a href="#" class="btn btn-light-primary" data-
ani="flipInY"> flipInY</a>
<a href="#" class="btn btn-light-primary" data-
ani="flipOutX"> flipOutX</a>
<a href="#" class="btn btn-light-primary" data-
ani="flipOutY"> flipOutY</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Flippers end -->
<!-- Lightspeed start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#lightspeed" aria-
expanded="false">
Lightspeed
</a>
</div>
<div class="collapse card-body show" id="lightspeed">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="lightSpeedInRight">
lightSpeedInRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="lightSpeedInLeft"> lightSpeedInLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="lightSpeedOutRight">
lightSpeedOutRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="lightSpeedOutLeft">
lightSpeedOutLeft</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Lightspeed end -->
<!-- Rotating entrances start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#rotating-entrances" aria-
expanded="false">
Rotating entrances
</a>
</div>
<div class="collapse card-body show" id="rotating-entrances">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="rotateIn"> rotateIn</a>
<a href="#" class="btn btn-light-primary" data-
ani="rotateInDownLeft"> rotateInDownLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="rotateInDownRight">
rotateInDownRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="rotateInUpLeft"> rotateInUpLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="rotateInUpRight"> rotateInUpRight</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Rotating entrances end -->
<!-- Rotating exits start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#rotating-exits" aria-
expanded="false">
Rotating exits
</a>
</div>
<div class="collapse card-body show" id="rotating-exits">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="rotateOut"> rotateOut</a>
<a href="#" class="btn btn-light-primary" data-
ani="rotateOutDownLeft">
rotateOutDownLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="rotateOutDownRight">
rotateOutDownRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="rotateOutUpLeft"> rotateOutUpLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="rotateOutUpRight"> rotateOutUpRight</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Rotating exits end -->
<!-- Specials start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#specials" aria-
expanded="false">
Specials
</a>
</div>
<div class="collapse card-body show" id="specials">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="hinge"> hinge</a>
<a href="#" class="btn btn-light-primary" data-
ani="jackInTheBox"> jackInTheBox</a>
<a href="#" class="btn btn-light-primary" data-
ani="rollIn"> rollIn</a>
<a href="#" class="btn btn-light-primary" data-
ani="rollOut"> rollOut</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Specials end -->
<!-- Zooming entrances start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#zooming-entrances" aria-
expanded="false">
Zooming entrances
</a>
</div>
<div class="collapse card-body show" id="zooming-entrances">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="zoomIn"> zoomIn</a>
<a href="#" class="btn btn-light-primary" data-
ani="zoomInDown"> zoomInDown</a>
<a href="#" class="btn btn-light-primary" data-
ani="zoomInLeft"> zoomInLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="zoomInRight"> zoomInRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="zoomInUp"> zoomInUp</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#zooming-exits" aria-
expanded="false">
Zooming entrances
</a>
</div>
<div class="collapse card-body show" id="zooming-exits">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="zoomOut"> zoomOut</a>
<a href="#" class="btn btn-light-primary" data-
ani="zoomOutDown"> zoomOutDown</a>
<a href="#" class="btn btn-light-primary" data-
ani="zoomOutLeft"> zoomOutLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="zoomOutRight"> zoomOutRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="zoomOutUp"> zoomOutUp</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Zooming entrances end -->
<!-- Sliding entrances start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#sliding-entrances" aria-
expanded="false">
Sliding entrances
</a>
</div>
<div class="collapse card-body show" id="sliding-entrances">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="slideInDown"> slideInDown</a>
<a href="#" class="btn btn-light-primary" data-
ani="slideInLeft"> slideInLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="slideInRight"> slideInRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="slideInUp"> slideInUp</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Sliding entrances end -->
<!-- Sliding exits start -->
<div class="card cheatsheet-card animation-card">
<div class="card-header p-0">
<a class="btn btn-primary w-100 text-center f-s-18 f-w-500
rounded-bottom-0 py-2"
data-bs-toggle="collapse" href="#sliding-exits" aria-
expanded="false">
Sliding exits
</a>
</div>
<div class="collapse card-body show" id="sliding-exits">
<ul>
<li>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-light-primary" data-
ani="slideOutDown"> slideOutDown</a>
<a href="#" class="btn btn-light-primary" data-
ani="slideOutLeft"> slideOutLeft</a>
<a href="#" class="btn btn-light-primary" data-
ani="slideOutRight"> slideOutRight</a>
<a href="#" class="btn btn-light-primary" data-
ani="slideOutUp"> slideOutUp</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Sliding exits end -->
</div>
</div>
<!-- How to use start -->
<div class="col-12">
<div class="card">
<div class="card-header">
<h5>How to use</h5>
</div>
<div class="card-body">
<div>
<div class="row">
<div class="col-12">
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between
align-items-start">
<div class="ms-2 me-auto">
<h6> By adding clases </h6>
<p>Add the class <code>animate__animated</code> to an
element, along with any of the
animation names (don't forget the
<code>animate__</code> prefix!): </p>
<p>
<code> &lt;h5&gt; class="animate__animated
animate__bounce">An animated element &lt;/h5&gt; </code>
</p>
<p class="fw-600 ms-3 mt-3">Utility Classes </p>
<div class="ms-4">
<p>[Link] provides the following delays:</p>
<code>animate__delay-2s, animate__delay-3s,
animate__delay-4s, animate__delay-5s</code>
<p class="mt-2">Slow, slower, fast, and Faster
classes</p>
<code>animate__slow, animate__slower,
animate__fast, animate__faster</code>
<p class="mt-2">Repeating classes</p>
<code>animate__repeat-1, animate__repeat-2,
animate__repeat-3, animate__infinite</code>
</div>
</div>
</li>
<li class="list-group-item d-flex justify-content-between
align-items-start">
<div class="ms-2 me-auto">
<h6> Using @keyframes</h6>
<p>Even though the library provides you a few helper
classes like the
<code>animated</code> class to get you up running
quickly, you can directly use the
provided animations <code>keyframes</code>. This
provides a flexible way to use
[Link] with your current projects without
having to refactor your HTML code.
</p>
<p class="fw-500">Example:</p>
<p>
<code
class="d-flex flex-column"> .my-element { <span>
display: inline-block; </span><span> margin: 0 0.5rem; </span><span> animation:
bounce; /* referring directly to the animation's @keyframe declaration */
</span><span> animation-duration: 2s; /* don't forget to set a duration! */
</span>} </code>
</p>
</div>
</li>
<li class="list-group-item d-sm-flex justify-content-
between align-items-start">
<div class="ms-2 me-auto">
<h6> CSS Custom Properties (CSS Variables) </h6>
<p>[Link] uses custom properties (also known as
CSS variables) to define the
animation's duration, delay, and iterations. This
makes [Link] very flexible and
customizable. Need to change an animation duration?
Just set a new value globally or
locally.</p>
<p class="fw-500">Example:</p>
<p>
<code class="d-flex flex-column"> /* This only
changes this particular animation duration */
<span> .animate__animated.animate__bounce { </span><span> --animate-duration: 2s;
</span> }
<span> </span><span> /* This changes all the
animations globally */ </span><span> :root { </span><span> --animate-duration:
800ms; </span><span> --animate-delay: 0.9s; </span><span> } </span>
</code>
</p>
</div>
</li>
</ol>
</div>
<div class="col-6"></div>
</div>
</div>
</div>
</div>
</div>
<!-- How to use end -->

</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>

<!--customizer-->
<div id="customizer"></div>
<!-- latest jquery-->
<script src="../assets/js/[Link]"></script>

<!-- Simple bar js-->


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

<!-- Bootstrap js-->


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

<!-- masonry js-->


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

<!-- animation page js-->


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

<!-- App js -->


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

<!-- Customizer js-->


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

</body>

</html>

You might also like