Tag: Angular 17

Angular 17 Upload Multiple Images with Preview Delete Functionality
Angular 17 Upload Multiple Images with Preview Delete Functionality, angular image upload preview delete, Angular File Upload Preview, Angular image upload preview delete multiple, Angular image upload with preview, Image preview angular.
Hello friends, welcome back to my blog. Today this blog post I will tell you, Angular 17 Upload Multiple Images with Preview Delete Functionality.

Live working demo

Angular 17 Upload Multiple Images with Preview Delete Functionality

Angular17 came and if you are new then you must check below two links:
1. Angular17 Basic Tutorials
2. Angular Free Templates
Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system.

Guys with below commands we will get angular latest version demo project setup with ngx dropzone module:
```
npm install -g @angular/cli 

ng new angulardemo //Create new Angular Project

cd angulardemo // Go inside the Angular Project Folder

npm install --save ngx-dropzone --force
```
2. Now guys we need to add below code inside src/app/app.component.ts file:
```
import { Component, ViewChild, ElementRef  } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

import { NgxDropzoneModule } from 'ngx-dropzone';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, NgxDropzoneModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'angular17';
 

  files: File[] = [];
  onSelect(event:any) {
    console.log(event);
    this.files.push(...event.addedFiles);
  }
  onRemove(event:any) {
    console.log(event);
    this.files.splice(this.files.indexOf(event), 1);
  }
}
```
3. Now guys we need to add below code inside src/app/app.component.html file:
```
<ngx-dropzone (change)="onSelect($event)">
  <ngx-dropzone-label>Drop it, baby!</ngx-dropzone-label>
  <ngx-dropzone-preview *ngFor="let f of files" [removable]="true" (removed)="onRemove(f)">
    <ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
  </ngx-dropzone-preview>
</ngx-dropzone>


<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f">
  <ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-image-preview>
```
Friends in the end must run ng serve command into your terminal to run the angular 17 project (localhost:4200).

Guys click here to check the Angular 17 Bootstrap 5 Free Templates.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa the developer’s king

Thanks
April 12, 2024

Angular 17+ Convert HTML into PDF Working Functionality

angular html to pdf, angular generate pdf from html, html to pdf angular, how to convert html to pdf in angular, convert html to pdf in angular, how to generate pdf from html in angular 17.
Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Angular 17+ Convert HTML into PDF Working Functionality.

Live demo

Guy’s Angular 17 came . if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands.

Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new htmltopdf //Create new Angular Project

cd htmltopdf // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. Now friends, here we need to run below commands into our project terminal to install pdfmake modules into our angular application:

npm install --save pdfmake --force

npm install html-to-pdfmake --force

npm install jspdf --save --force

3. Now friends we just need to add below code into src/app/app.component.ts file:

import { Component, ViewChild, ElementRef  } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, MatTableModule, MatButtonModule, MatInputModule, MatFormFieldModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'angular17material';
  pdfTable: any;
  @ViewChild('htmlData') htmlData!: ElementRef;
  public downloadAsPDF(): void {
    let DATA: any = document.getElementById('pdfTable');
    html2canvas(DATA).then((canvas) => {
      let fileWidth = 208;
      let fileHeight = (canvas.height * fileWidth) / canvas.width;
      const FILEURI = canvas.toDataURL('image/png');
      let PDF = new jsPDF('p', 'mm', 'a4');
      let position = 0;
      PDF.addImage(FILEURI, 'PNG', 0, position, fileWidth, fileHeight);
      PDF.save('angular-demo.pdf');
    });
  }
}

4. Now friends we just need to add below code into src/app/app.component.html file:

<div class="container p-5">
  <div id="pdfTable" #pdfTable>
    <h1>Angular 17+ HTML To PDF Generator Example - therichpost.com</h1>
              
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Website</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ajay</td>
          <td>Malhotra</td>
          <td>therichpost.com</td>
        </tr>
        <tr>
          <td>Jassa</td>
          <td>Rich</td>
          <td>therichpost.com</td>
        </tr>
        <tr>
          <td>Ajooni</td>
          <td>Kaur Malhotra</td>
          <td>therichpost.com</td>
        </tr>
      </tbody>
    </table>
  </div>
  <button class="btn btn-primary" (click)="downloadAsPDF()">Export To PDF</button>
</div>

5. Guys in the end for bootstrap 5, I am using direct CDN inside my src/index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular 17</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
 
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

</head>
<body>
  <app-root></app-root>
</body>
</html>

Now guys we need to run ng serve command.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements. For better live working experience, please check the video on the top.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

April 11, 2024

Angular 17 Material Data Table with Custom Button Click Event Functionality Working Demo

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 17 Material Data Table with Custom Button Click Event Functionality Working Demo.

Angular Material Datatable

Post Working
In this post, I am working with material angular datatable with custom button and when I will click on that custom button then I will get popup alert with dynamic row data.

Guy’s Angular 17 came and if you are new in Angular 17 then please check below links:

Here is the working code snippet and please follow carefully:

1. Here are the basics commands to install angular 11 on your system:

npm install -g @angular/cli 

ng new angularpopup //Create new Angular Project

$ cd angularpopup // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. After done with above, you need to run below command to add @angular/material into your angular 8 application:

ng add @angular/material

3. Now you need to add below code into your src/app/app.component.ts file:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import {MatTableModule} from '@angular/material/table';
import {  MatButtonModule } from '@angular/material/button'

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, MatTableModule, MatButtonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'angular17material';
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', "getdetails"];
  dataSource = ELEMENT_DATA;
  getRecord(name: any)
  {
    alert(name);
  }
}

4. Now you need to add below code into src/app/app.component.html file:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

    <!-- Get Details -->
    <ng-container matColumnDef="getdetails">
      <th mat-header-cell *matHeaderCellDef> Details </th>
      <td mat-cell *matCellDef="let element"> <button mat-raised-button color="primary" (click)="getRecord(element.position)">Get Details</button> </td>
    </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

5. Now you need to add below code into src/app/app.component.css file:

table {width: 100%;}

In the end, don’t forgot to run ng serve command. If you have any query then do comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding please watch the above video.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thank you.

April 10, 2024

Angular 17 Best Beauty Salon and Spa Website Template 2024

Hello everyone, if you’re in search of a responsive and user-friendly ecommerce salon template in Angular 17+, then you’ve come to the right place! Today this blog post I will show you Angular 17 Best Beauty Salon and Spa Website Template 2024.

Live Demo

Key Features:

Built on Angular 17 + Bootstrap 5
CSS3 & HTML5
Clean & minimal design
Cross-browser tested & optimized
Full-width layouts
Gulp based workflow
Opinionated code formatter Prettier for a consistent codebase
Modular markup based on Cards & Utility classes
Interactive and functional components and pages
FontAwesome 5 + material icons + feather icon
W3C validated HTML pages

Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:

Guys now here is the complete code snippet with GitHub link following assets(css, js, fonts and images):

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angularadmin //Create new Angular Project

cd angularadmin // Go inside the Angular Project Folder

2. Guys now we need to run below commands to create components to our angular application:

ng g c home

3. Now guys we need to add below code into our scr/app/app.component.html file for main output:

<router-outlet></router-outlet>

4. Now guys we need to add below code into our scr/app/home/home.component.html file:

<div class="page-wraper"> 
       	
    <!-- HEADER START -->
    <header class="site-header header-style-8 mobile-sider-drawer-menu">
    
        <div class="top-bar site-bg-primary">
            <div class="container">
                
                <div class="wt-topbar-left">
                    <ul class="list-unstyled e-p-bx">
                        <li><i class="fa fa-envelope"></i>therichpost.com</li>
                        <li><i class="fa fa-phone"></i>(000) 000-0000</li>
                    </ul>
                </div>
                <div class="wt-topbar-right">
                    <ul class="social-bx list-inline">
                        <li><a href="javascript:void(0);" class="fa fa-facebook"></a></li>
                        <li><a href="javascript:void(0);" class="fa fa-twitter"></a></li>
                        <li><a href="javascript:void(0);" class="fa fa-linkedin"></a></li>
                        <li><a href="javascript:void(0);" class="fa fa-rss"></a></li>
                        <li><a href="javascript:void(0);" class="fa fa-youtube"></a></li>
                        <li><a href="javascript:void(0);" class="fa fa-instagram"></a></li>
                    </ul>
                    
                </div>
                
            </div>
        </div>
        <!-- Search Link -->

        <!-- Search Form -->
        <div class="header-middle bg-white">
            <div class="container">
                <div class="logo-header">
                    <a href="#">
                        <img src="assets/images/logo-7.png" width="216" height="37" alt="" >
                    </a>
                </div>
                <div class="header-info">
                    <ul>
                        <li>
                            <div>
                                <div class="icon-sm">
                                    <span class="icon-cell  site-text-primary"><i class="flaticon-placeholder"></i></span>
                                </div>
                                <div class="icon-content">
                                    <strong>Our Location </strong>
                                    <span>Punjab, LDH</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="icon-sm">
                                    <span class="icon-cell  site-text-primary"><i class="flaticon-smartphone"></i></span>
                                </div>
                                <div class="icon-content">
                                    <strong>Phone Number</strong>
                                    <span>000-0000-0000</span>
                                </div>
                            </div>
                        </li>
                        <li class="btn-col-last">
                            <a class="site-button text-uppercase radius-sm font-weight-700">Requet a Quote</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- Search Form -->
        <div class="sticky-header main-bar-wraper">
            <div class="main-bar header-botton nav-bg-secondry">
                <div class="container">
                    <!-- NAV Toggle Button -->
                    <button id="mobile-side-drawer" data-target=".header-nav" data-toggle="collapse" type="button" class="navbar-toggler collapsed">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar icon-bar-first"></span>
                        <span class="icon-bar icon-bar-two"></span>
                        <span class="icon-bar icon-bar-three"></span>
                    </button>

                    <!-- MAIN Nav -->
                    <div class="header-nav navbar-collapse collapse ">
                        <ul class=" nav navbar-nav">
                            <li class="active">
                                <a href="javascript:;">Home<i class="fa fa-chevron-down"></i></a>
                                <ul class="sub-menu">
                                    <li><a href="#">Home 1</a></li>
                                    <li><a href="#">Home 2</a></li>
                                    <li><a href="#l">Home 3</a></li>
                                    <li><a href="#">Home 4</a></li>
                                    <li><a href="#">Home 5</a></li>
                                </ul>
                            </li>
                        
                            <li>
                                <a href="javascript:;">Pages<i class="fa fa-chevron-down"></i></a>
                                <ul class="sub-menu">
                                    <li>
                                        <a href="javascript:;">About us</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">About us 1</a></li>
                                            <li><a href="#">About us 2</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="javascript:;">FAQ</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">FAQ 1</a></li>
                                            <li><a href="#">FAQ 2</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">Career</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">Portfolio</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Portfolio 1</a></li>
                                            
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="javascript:;">Our Team</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Our Team 1</a></li>
                                            <li><a href="#">Our Team Detail</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="javascript:;">Services</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Services 1</a></li>
                                          
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="javascript:;">Galley</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Galley Grid 1</a></li>
                                           
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="javascript:;">Error</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Error 403</a></li>
                                           
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="javascript:;">Contact us</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Contact us 1</a></li>
                                           
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            
                            <li>
                                <a href="javascript:;">Features<i class="fa fa-chevron-down"></i></a>
                                <ul class="sub-menu">
                                    <li>
                                        <a href="javascript:;">Header</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Header 1</a></li>
                                           
                                        </ul>
                                    </li>
                                    <li><a href="#">Footer Fixed</a></li>
                                   
                                </ul>
                            </li>
                        
                            <li>
                                <a href="javascript:;">Product<i class="fa fa-chevron-down"></i></a>
                                <ul class="sub-menu">
                                    <li><a href="#">Product</a></li>
                                    <li><a href="#">Product Detail</a></li>
                                </ul>
                            </li>
                            
                            <li class="submenu-direction">
                                <a href="javascript:;">Blog<i class="fa fa-chevron-down"></i></a>
                                <ul class="sub-menu">
                                    <li>
                                        <a href="javascript:;">Media</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Media list</a></li>
                                          
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="javascript:;">list</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Half image</a></li>
                                                                                              
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="javascript:;">Grid</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Grid 2</a></li>
                                           
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="javascript:;">Single</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Single full</a></li>
                                           
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            
                            <li class="has-mega-menu ">
                                <a href="javascript:;">Elements<i class="fa fa-chevron-down"></i></a>
                                <ul class="mega-menu">
                                    <li>
                                        
                                        <ul>
                                            <li><a href="#"><i class="fa fa-ravelry"></i> Animations</a></li>
                                            
                                        </ul>
                                    </li>
                        
                                    <li>
                                        
                                        <ul>
                                            <li><a href="#"> <i class="fa fa-calculator"></i>Counters</a></li>
                                           
                                        </ul>
                                    </li>
                        
                                    <li>
                                        
                                        <ul>
                                            <li><a href="#"> <i class="fa fa-photo"></i>Images effects</a></li>
                                           
                                        </ul>
                                    </li>
                                    
                                    <li>
                                        
                                        <ul>
                                            <li><a href="#"> <i class="fa fa-th-list"></i>Tabs</a></li>
                                         
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <!-- ETRA Nav -->
                    <div class="extra-nav">
                        <a href="javascript:;" class="wt-cart cart-btn dropdown-toggle" title="Your Cart" id="ID-MSG_dropdown" data-bs-toggle="dropdown">
                            <span class="link-inner">
                                <span class="woo-cart-total"> </span>
                                <span class="woo-cart-count">
                                    <span class="shopping-bag wcmenucart-count ">4</span>
                                </span>
                            </span>
                        </a>
                        
                        <div class="dropdown-menu cart-dropdown-item-wraper">
                            <div class="nav-cart-content">
                                
                                <div class="nav-cart-items p-a15">
                                    <div class="nav-cart-item clearfix">
                                        <div class="nav-cart-item-image">
                                            <a href="#"><img src="assets/images/cart/pic-1.jpg" alt="p-1"></a>
                                        </div>
                                        <div class="nav-cart-item-desc">
                                            <a href="#">Safety helmet</a>
                                            <span class="nav-cart-item-price"><strong>2</strong> x $19.99</span>
                                            <a href="#" class="nav-cart-item-quantity">x</a>
                                        </div>
                                    </div>
                                    <div class="nav-cart-item clearfix">
                                        <div class="nav-cart-item-image">
                                            <a href="#"><img src="assets/images/cart/pic-2.jpg" alt="p-2"></a>
                                        </div>
                                        <div class="nav-cart-item-desc">
                                            <a href="#">Hammer drill machine</a>
                                            <span class="nav-cart-item-price"><strong>1</strong> x $24.99</span>
                                            <a href="#" class="nav-cart-item-quantity">x</a>
                                        </div>
                                    </div>
                                    <div class="nav-cart-item clearfix">
                                        <div class="nav-cart-item-image">
                                            <a href="#"><img src="assets/images/cart/pic-3.jpg" alt="p-1"></a>
                                        </div>
                                        <div class="nav-cart-item-desc">
                                            <a href="#">Safety helmet</a>
                                            <span class="nav-cart-item-price"><strong>2</strong> x $19.99</span>
                                            <a href="#" class="nav-cart-item-quantity">x</a>
                                        </div>
                                    </div>
                                    <div class="nav-cart-item clearfix">
                                        <div class="nav-cart-item-image">
                                            <a href="#"><img src="assets/images/cart/pic-4.jpg" alt="p-2"></a>
                                        </div>
                                        <div class="nav-cart-item-desc">
                                            <a href="#">Hammer drill machine</a>
                                            <span class="nav-cart-item-price"><strong>1</strong> x $24.99</span>
                                            <a href="#" class="nav-cart-item-quantity">x</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="nav-cart-title p-tb10 p-lr15 clearfix">
                                    <h4  class="pull-left m-a0">Subtotal:</h4>
                                    <h5 class="pull-right m-a0">$114.95</h5>
                                </div>
                                <div class="nav-cart-action p-a15 clearfix">
                                    <button class="site-button  btn-block m-b15 " type="button">View Cart</button>
                                    <button class="site-button  btn-block" type="button">Checkout </button>
                                </div>
                            </div>
                        </div>
                     </div>
                    <!-- SITE Search -->
                    <div id="search"> 
                        <span class="close"></span>
                        <form role="search" id="searchform" action="/search" method="get" class="radius-xl">
                            <div class="input-group">
                                <input value="" name="q" type="search" placeholder="Type to search">
                                <span class="input-group-btn"><button type="button" class="search-btn"><i class="fa fa-search"></i></button></span>
                            </div>   
                        </form>
                    </div>
                    
                    
                </div>
            </div>
        </div>            
        
    </header>
    <!-- HEADER END -->
    
    <!-- CONTENT START -->
    <div class="page-content">
    
        <!-- SLIDER START -->
        <div id="rev_slider_1050_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="webproduct-light" data-source="gallery" style="background-color:transparent;padding:0px;">
            <!-- START REVOLUTION SLIDER 5.4.1 fullscreen mode -->
            <div id="rev_slider_1050_1" class="slider-dots rev_slider fullscreenbanner" style="display:none;" data-version="5.4.1">
                <ul>	
                    <!-- SLIDE  -->
                    <li data-index="rs-2938" data-transition="slideleft" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="default"   data-thumb="assets/images/main-slider/slider2/slide1.jpg"  data-rotate="0"  data-fsslotamount="7" data-saveperformance="off"  data-title="" data-param1="Additional Text" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                        <!-- MAIN IMAGE -->
                        <img src="assets/images/main-slider/slider2/slide1.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
                        <!-- LAYERS -->
                       
                
                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption WebProduct-Title   tp-resizeme" 
                            id="slide-2938-layer-01" 
                            data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']" 
                            data-y="['middle','middle','top','top']" data-voffset="['-80','-80','200','130']" 
                            data-fontsize="['57','55','55','30']"
                            data-lineheight="['65','65','65','65']"
                            data-width="['700','700','700','300']"
                            data-height="none"
                            data-whitespace="nowrap"
                 
                            data-type="text" 
                            data-responsive_offset="on" 
                
                            data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1000,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
                            data-textAlign="['left','left','left','left']"
                            data-paddingtop="[0,0,0,0]"
                            data-paddingright="[0,0,0,0]"
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[0,0,0,0]"
                
                            style="z-index: 11;
                            white-space: nowrap;
                            text-transform:uppercase;">
                            <div class="text-secondry"> Best Place  <span class="site-text-primary"> For you</span></div>
                            </div>
                
                        <!-- LAYER NR. 2 -->
                        <div class="tp-caption WebProduct-SubTitle   tp-resizeme" 
                            id="slide-2938-layer-02" 
                            data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']" 
                            data-y="['middle','middle','top','top']" data-voffset="['0','0','280','180']" 
                            data-fontsize="['55','55','55','30']"
                            data-lineheight="['75','75','75','75']"
                            data-width="['700','700','700','300']"
                            data-height="none"
                            data-whitespace="nowrap"
                 
                            data-type="text" 
                            data-responsive_offset="on" 
                
                            data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1250,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
                            data-textAlign="['left','left','left','left']"
                            data-paddingtop="[0,0,0,0]"
                            data-paddingright="[0,0,0,0]"
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[0,0,0,0]"
                
                            style="z-index: 12; 
                            white-space: nowrap;
                            text-transform:uppercase;
                               font-weight: 700;
                            ">
                            <div class="text-secondry">
                                <span class="site-text-primary">Harbal</span> Treatment
                            </div>
                            </div>
                
                        <!-- LAYER NR. 3 -->
                        <div class="tp-caption WebProduct-Content   tp-resizeme" 
                             id="slide-2938-layer-03" 
                             data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']" 
                             data-y="['middle','middle','top','top']" data-voffset="['80','80','380','250']" 
                            data-fontsize="['21','21','24','18']"
                            data-lineheight="['28','28','32','26']"
                            data-width="['700','700','700','300']"
                            data-height="['none','none','76','68']"
                            data-whitespace="normal"
                 
                            data-type="text" 
                            data-responsive_offset="on" 
                
                            data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
                            data-textAlign="['left','left','left','left']"
                            data-paddingtop="[0,0,0,0]"
                            data-paddingright="[0,0,0,0]"
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[0,0,0,0]"
                
                            style="z-index: 13; white-space: normal;">
                            <div class="text-secondry"> Welcome to beauty lab, where you can relax and enjoy life. A little peace in a crazy world goes a long way.</div>
                            </div>
                
                        <!-- LAYER NR. 4 -->
                        <div class="tp-caption tp-resizeme" 
                            id="slide-2938-layer-04" 
                            data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']" 
                            data-y="['middle','middle','top','top']" data-voffset="['180','180','480','400']" 
                            data-width="none"
                            data-height="none"
                            data-whitespace="nowrap"
                 
                            data-type="button" 
                            data-actions='[{"event":"click","action":"jumptoslide","slide":"rs-2939","delay":""}]'
                            data-responsive_offset="on" 
                            data-responsive="on"
                            data-frames='[ 
                            {"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":2000,"ease":"Power4.easeOut"},
                            {"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.easeInOut"}
                            ]'
                            data-textAlign="['left','left','left','left']"
                            data-paddingtop="[0,0,0,0]"
                            data-paddingright="[40,40,40,40]"
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[0,0,0,0]"
                
                            style="z-index:13; text-transform:uppercase; font-weight:700;">
                           <a href="#" class="site-button radius-sm button-lg">See all Services</a>
                           </div>
                        <!-- LAYER NR. 5 -->
                        
                        <div class="tp-caption tp-resizeme" 
                            id="slide-2938-layer-05" 
                            data-x="['left','left','left','left']" data-hoffset="['240','240','200','200']" 
                            data-y="['middle','middle','top','top']" data-voffset="['180','180','480','400']" 
                            data-width="none"
                            data-height="none"
                            data-whitespace="nowrap"
                 
                            data-type="button" 
                            data-actions='[{"event":"click","action":"jumptoslide","slide":"rs-2939","delay":""}]'
                            data-responsive_offset="on" 
                            data-responsive="on"
                            data-frames='[ 
                            {"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":2000,"ease":"Power4.easeOut"},
                            {"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.easeInOut"}
                            ]'
                            data-textAlign="['left','left','left','left']"
                            data-paddingtop="[0,0,0,0]"
                            data-paddingright="[0,0,0,0]"
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[40,40,40,40]"
                
                            style="z-index:13; text-transform:uppercase; font-weight:700;">
                           <a href="#" class="site-button-secondry radius-sm button-lg">More detail</a>
                           </div>
                                                       
                    </li>
                    <!-- SLIDE  -->
                    <li data-index="rs-2940" data-transition="slideleft" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="default"   data-thumb="assets/images/main-slider/slider2/slide3.jpg"  data-rotate="0"   data-fsslotamount="7" data-saveperformance="off"  data-title="" data-param1="Additional Text" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                        <!-- MAIN IMAGE -->
                        <img src="assets/images/main-slider/slider2/slide3.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
                        <!-- LAYERS -->
                       
                
                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption WebProduct-Title   tp-resizeme" 
                            id="slide-2940-layer-01" 
                            data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']" 
                            data-y="['middle','middle','top','top']" data-voffset="['-80','-80','200','130']" 
                            data-fontsize="['57','55','55','30']"
                            data-lineheight="['65','65','65','65']"
                            data-width="['700','700','700','300']"
                            data-height="none"
                            data-whitespace="nowrap"
                 
                            data-type="text" 
                            data-responsive_offset="on" 
                
                            data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1000,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
                            data-textAlign="['left','left','left','left']"
                            data-paddingtop="[0,0,0,0]"
                            data-paddingright="[0,0,0,0]"
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[0,0,0,0]"
                
                            style="z-index: 11;
                            white-space: nowrap;
                            text-transform:uppercase;">
                            <div class="text-secondry"> Beauty <span class="site-text-primary"> Means</span></div>
                            </div>
                
                        <!-- LAYER NR. 2 -->
                        <div class="tp-caption WebProduct-SubTitle   tp-resizeme" 
                            id="slide-2940-layer-02" 
                            data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']" 
                            data-y="['middle','middle','top','top']" data-voffset="['0','0','280','180']" 
                            data-fontsize="['55','55','55','30']"
                            data-lineheight="['75','75','75','75']"
                            data-width="['700','700','700','300']"
                            data-height="none"
                            data-whitespace="nowrap"
                 
                            data-type="text" 
                            data-responsive_offset="on" 
                
                            data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1250,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
                            data-textAlign="['left','left','left','left']"
                            data-paddingtop="[0,0,0,0]"
                            data-paddingright="[0,0,0,0]"
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[0,0,0,0]"
                
                            style="z-index: 12; 
                            white-space: nowrap;
                            text-transform:uppercase;
                               font-weight: 700;
                            ">
                            <div class="text-secondry">
                                <span class="site-text-primary">Healthy</span> You
                            </div>
                            </div>
                
                        <!-- LAYER NR. 3 -->
                        <div class="tp-caption WebProduct-Content   tp-resizeme" 
                            id="slide-2940-layer-03" 
                            data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']" 
                            data-y="['middle','middle','top','top']" data-voffset="['80','80','380','250']" 
                            data-fontsize="['21','21','24','18']"
                            data-lineheight="['28','28','32','26']"
                            data-width="['700','700','700','300']"
                            data-height="['none','none','76','68']"
                            data-whitespace="normal"
                 
                            data-type="text" 
                            data-responsive_offset="on" 
                
                            data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
                            data-textAlign="['left','left','left','left']"
                            data-paddingtop="[0,0,0,0]"
                            data-paddingright="[0,0,0,0]"
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[0,0,0,0]"
                
                            style="z-index: 13; white-space: normal;">
                            <div class="text-secondry"> Welcome to beauty lab, where you can relax and enjoy life. A little peace in a crazy world goes a long way.</div>
                            </div>
                
                        <!-- LAYER NR. 4 -->
                        <div class="tp-caption tp-resizeme" 
                            id="slide-2940-layer-04" 
                            data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']" 
                            data-y="['middle','middle','top','top']" data-voffset="['180','180','480','400']" 
                            data-width="none"
                            data-height="none"
                            data-whitespace="nowrap"
                 
                            data-type="button" 
                            data-actions='[{"event":"click","action":"jumptoslide","slide":"rs-2939","delay":""}]'
                            data-responsive_offset="on" 
                            data-responsive="on"
                            data-frames='[ 
                            {"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":2000,"ease":"Power4.easeOut"},
                            {"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.easeInOut"}
                            ]'
                            data-textAlign="['left','left','left','left']"
                            data-paddingtop="[0,0,0,0]"
                            data-paddingright="[40,40,40,40]"
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[0,0,0,0]"
                
                            style="z-index:13; text-transform:uppercase; font-weight:700;">
                           <a href="#" class="site-button radius-sm button-lg">See all Services</a>
                           </div>
                        <!-- LAYER NR. 5 -->
                        
                        <div class="tp-caption tp-resizeme" 
                            id="slide-2940-layer-05" 
                            data-x="['left','left','left','left']" data-hoffset="['240','240','200','200']" 
                            data-y="['middle','middle','top','top']" data-voffset="['180','180','480','400']" 
                            data-width="none"
                            data-height="none"
                            data-whitespace="nowrap"
                 
                            data-type="button" 
                            data-actions='[{"event":"click","action":"jumptoslide","slide":"rs-2939","delay":""}]'
                            data-responsive_offset="on" 
                            data-responsive="on"
                            data-frames='[ 
                            {"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":2000,"ease":"Power4.easeOut"},
                            {"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.easeInOut"}
                            ]'
                            data-textAlign="['left','left','left','left']"
                            data-paddingtop="[0,0,0,0]"
                            data-paddingright="[0,0,0,0]"
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[40,40,40,40]"
                
                            style="z-index:13; text-transform:uppercase; font-weight:700;">
                           <a href="#" class="site-button-secondry radius-sm button-lg">More detail</a>
                           </div>
                                                       
                    </li>                                                
                </ul>
                    
            </div>
        </div>
        <!-- SLIDER END -->
        
        <!-- ABOUT SECTION START -->
        <div class="section-full p-t100 p-b70 bg-bottom-center bg-full-width bg-no-repeat">
            <div class="container ">
                <div class="section-content about4-section">
                    <div class="row">
                        <div class="col-md-5 col-sm-5 m-b30">
                            <div class="about4-section-pic ">
                                <div class="wt-media">
                                    <img src="assets/images/slid-2.jpg" alt="">
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-7 col-sm-7 m-b30">
                            <div class="about4-content">
                                <h3 class="text-uppercase text-secondry">We Provide</h3>
                                <h2><span class="site-text-primary">Welcome to </span> Spa Center </h2>
                                <p><strong>Spread over two floors, our beautiful spa offer a soothing environment in which you can rest, relax and feel competely rejuvenated.</strong></p>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy text of the printing and eentially unchanged. </p>
                                <div class="text-left p-b30">
                                    <img src="assets/images/sign.png" alt="">
                                </div>    
                                <div>
                                    <a href="#" class="site-button radius-sm">
                                      <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                    </a>
                                    <a href="#" class="site-button-secondry radius-sm">
                                      <span class="font-weight-700 inline-block text-uppercase p-lr15">Services</span> 
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>	
            </div>
        </div>   
        <!-- ABOUT COMPANY SECTION END -->
        
        <!-- PRICING SECTION START  -->
        <div class="section-full bg-gray p-t100 p-b70">
            <div class="container">
                <!-- TITLE START-->
                <div class="section-head text-center">
                    <h1><span class="site-text-primary">Our</span> Pricing</h1>
                    <div class="wt-separator-outer">
                        <div class="wt-separator style-icon">
                            <i class="fa fa-leaf text-black"></i>
                            <span class="separator-left site-bg-primary"></span>
                            <span class="separator-right site-bg-primary"></span>
                        </div>                            
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </div>
                <!-- TITLE END-->
                <div class="section-content">
                    <div class="owl-carousel our-pricing-carousel owl-btn-vertical-center owl-btn-hover nav nav-tabs">
                        
                        <!-- Block 1 -->
                        <div class="item active-arrow active">
                            <a data-bs-toggle="tab" href="#pricing-item1" class="tab-block">
                                <div class="our-pricing-tab  radius-sm bdr-1 bdr-gray">
                                    <div class="wt-icon-box-wraper center  p-lr10">
                                        <div class="icon-lg m-b5">
                                            <span class="icon-cell  text-black"><i class="flaticon-people"></i></span>
                                        </div>
                                        <div class="icon-content">
                                            <span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Spa</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!-- Block 2 -->
                        <div class="item">
                            <a data-bs-toggle="tab" href="#pricing-item2" class="tab-block">
                                <div class="our-pricing-tab  radius-sm bdr-1 bdr-gray">
                                    <div class="wt-icon-box-wraper center  p-lr10">
                                        <div class="icon-lg m-b5">
                                            <span class="icon-cell  text-black"><i class="flaticon-eye"></i></span>
                                        </div>
                                        <div class="icon-content">
                                            <span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Hair Makeup</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!-- Block 3 -->
                        <div class="item">
                            <a data-bs-toggle="tab" href="#pricing-item3" class="tab-block">
                                <div class="our-pricing-tab  radius-sm bdr-1 bdr-gray">
                                    <div class="wt-icon-box-wraper center  p-lr10">
                                        <div class="icon-lg m-b5">
                                            <span class="icon-cell  text-black"><i class="flaticon-female-hairs"></i></span>
                                        </div>
                                        <div class="icon-content">
                                            <span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Waxing</span>
                                        </div>    
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!-- Block 4 -->
                        <div class="item">
                            <a data-bs-toggle="tab" href="#pricing-item4" class="tab-block">
                                <div class="our-pricing-tab  radius-sm bdr-1 bdr-gray">
                                    <div class="wt-icon-box-wraper center  p-lr10">
                                        <div class="icon-lg m-b5">
                                            <span class="icon-cell  text-black"><i class="flaticon-mirror"></i></span>
                                        </div>
                                        <div class="icon-content">
                                            <span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Facial</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!-- Block 5 -->
                        <div class="item">
                            <a data-bs-toggle="tab" href="#pricing-item5" class="tab-block">
                                <div class="our-pricing-tab  radius-sm bdr-1 bdr-gray">
                                    <div class="wt-icon-box-wraper center  p-lr10">
                                        <div class="icon-lg m-b5">
                                            <span class="icon-cell  text-black"><i class="flaticon-spray-bottle"></i></span>
                                        </div>
                                        <div class="icon-content">
                                            <span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Massage</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!-- Block 6 -->
                        <div class="item">
                            <a data-bs-toggle="tab" href="#pricing-item6" class="tab-block">
                                <div class="our-pricing-tab  radius-sm bdr-1 bdr-gray">
                                    <div class="wt-icon-box-wraper center  p-lr10">
                                        <div class="icon-lg m-b5">
                                            <span class="icon-cell  text-black"><i class="flaticon-people"></i></span>
                                        </div>
                                        <div class="icon-content">
                                            <span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Spa</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!-- Block 7 -->
                        <div class="item">
                            <a data-bs-toggle="tab" href="#pricing-item7" class="tab-block">
                                <div class="our-pricing-tab  radius-sm bdr-1 bdr-gray">
                                    <div class="wt-icon-box-wraper center  p-lr10">
                                        <div class="icon-lg m-b5">
                                            <span class="icon-cell  text-black"><i class="flaticon-eye"></i></span>
                                        </div>
                                        <div class="icon-content">
                                            <span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Hair Makeup</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        
                    </div>

                    <div class="tab-content m-b30">
                        <!-- Block 1 -->
                        <div id="pricing-item1" class="pricing-tab-content-block tab-pane active-arrow">
                            <div class="section-content p-t50">
                                    <!-- TABS DEFAULT NAV LEFT -->
                                    <div class="wt-tabs vertical bg-tabs">
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#pricing-tab1-1">Massage Therapy</a></li>
                                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab1-2">Facials </a></li>
                                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab1-3">Pedicures</a></li>
                                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab1-4">Manicures</a></li>
                                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab1-5">Body Wraps</a></li>
                                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab1-6">Waxing & Cosmetics</a></li>
                                        </ul>
                                        <div class="tab-content p-l50">
                                        
                                            <div id="pricing-tab1-1" class="tab-pane active">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s1.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Massage Therapy </h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab1-2" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s2.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Facials </h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab1-3" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s3.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Pedicures </h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab1-4" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s4.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Manicures</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab1-5" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s5.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Body Wraps</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab1-6" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s6.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Waxing & Cosmetics</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <!-- Block 2 -->
                        <div id="pricing-item2" class="pricing-tab-content-block tab-pane">
                            <div class="section-content p-t50">
                                    <!-- TABS DEFAULT NAV LEFT -->
                                    <div class="wt-tabs vertical bg-tabs">
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#pricing-tab2-1">Hair Color</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab2-2">Braids & Twist</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab2-3">Corrective Color</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab2-4">Hair Extension</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab2-5">Hair Cut</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab2-6">Partial Foil</a></li>
                                        </ul>
                                        <div class="tab-content p-l50">
                                        
                                            <div id="pricing-tab2-1" class="tab-pane active">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s2.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Hair Color </h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab2-2" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s3.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Braids & Twist </h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab2-3" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s4.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Corrective Color</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab2-4" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s5.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Hair Extension</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab2-5" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s6.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Hair Cut</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab2-6" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s1.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Partial Foil</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <!-- Block 3 -->
                        <div id="pricing-item3" class="pricing-tab-content-block tab-pane">
                            <div class="section-content p-t50">
                                    <!-- TABS DEFAULT NAV LEFT -->
                                    <div class="wt-tabs vertical bg-tabs">
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item"><a class="nav-link active"  data-bs-toggle="tab" href="#pricing-tab3-1">Eye Brows </a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab3-2">Lips </a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab3-3">Eye Brow & Lips</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab3-4">Chin & Lips </a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab3-5">Side of Face</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab3-6">Lower Leg</a></li>    
                                        </ul>
                                        <div class="tab-content p-l50">
                                        
                                            <div id="pricing-tab3-1" class="tab-pane active">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s3.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Eye Brows </h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab3-2" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s4.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Lips </h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab3-3" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s5.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Eye Brow & Lips </h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab3-4" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s6.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Chin & Lips </h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab3-5" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s1.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Side of Face</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab3-6" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s2.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Lower Leg</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <!-- Block 4 -->
                        <div id="pricing-item4" class="pricing-tab-content-block tab-pane">
                            <div class="section-content p-t50">
                                    <!-- TABS DEFAULT NAV LEFT -->
                                    <div class="wt-tabs vertical bg-tabs">
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item"><a class="nav-link active"  data-bs-toggle="tab" href="#pricing-tab4-1">Hand-On Facial </a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab4-2">Electrotherapy </a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab4-3">Clean up</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab4-4">Anti Ageing </a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab4-5">Glow & Radiance</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab4-6">Normal Wash</a></li>
                                        </ul>
                                        <div class="tab-content p-l50">
                                        
                                            <div id="pricing-tab4-1" class="tab-pane active">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s4.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Hand-On Facial</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab4-2" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s5.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Electrotherapy </h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab4-3" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s6.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Clean up</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab4-4" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s1.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Anti Ageing </h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab4-5" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s2.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Glow & Radiance</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab4-6" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s3.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Normal Wash</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <!-- Block 5 -->
                        <div id="pricing-item5" class="pricing-tab-content-block tab-pane">
                            <div class="section-content p-t50">
                                    <!-- TABS DEFAULT NAV LEFT -->
                                    <div class="wt-tabs vertical bg-tabs">
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item"><a class="nav-link active"  data-bs-toggle="tab" href="#pricing-tab5-1">Head</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab5-2">Back</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab5-3">Foot</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab5-4">Aromatherapy</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab5-5">Scrub</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab5-6">Tissue</a></li>
                                        </ul>
                                        <div class="tab-content p-l50">
                                        
                                            <div id="pricing-tab5-1" class="tab-pane active">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s5.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Head</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab5-2" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s6.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Back </h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab5-3" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s1.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Foot</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab5-4" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s2.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Aromatherapy</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab5-5" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s3.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Scrub</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab5-6" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s4.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Tissue</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <!-- Block 6 -->
                        <div id="pricing-item6" class="pricing-tab-content-block tab-pane ">
                            <div class="section-content p-t50">
                                    <!-- TABS DEFAULT NAV LEFT -->
                                    <div class="wt-tabs vertical bg-tabs">
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item"><a class="nav-link active"  data-bs-toggle="tab" href="#pricing-tab6-1">Massage Therapy</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab6-2">Facials </a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab6-3">Pedicures</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab6-4">Manicures</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab6-5">Body Wraps</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab6-6">Waxing & Cosmetics</a></li>
                                        </ul>
                                        <div class="tab-content p-l50">
                                        
                                            <div id="pricing-tab6-1" class="tab-pane active">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s6.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Massage Therapy </h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab6-2" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s1.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Facials</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab6-3" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s2.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Pedicures</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab6-4" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s4.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Manicures</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab6-5" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s4.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Body Wraps</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab6-6" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s5.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Waxing & Cosmetics</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <!-- Block 7 -->
                        <div id="pricing-item7" class="pricing-tab-content-block tab-pane">
                            <div class="section-content p-t50">
                                    <!-- TABS DEFAULT NAV LEFT -->
                                    <div class="wt-tabs vertical bg-tabs">
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item"><a class="nav-link active"  data-bs-toggle="tab" href="#pricing-tab7-1">Hair Color</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab7-2">Braids & Twist</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab7-3">Corrective Color</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab7-4">Hair Extension</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab7-5">Hair Cut</a></li>
                                            <li class="nav-item"><a class="nav-link"  data-bs-toggle="tab" href="#pricing-tab7-6">Partial Foil</a></li>
                                        </ul>
                                        <div class="tab-content p-l50">
                                        
                                            <div id="pricing-tab7-1" class="tab-pane active">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s1.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Hair Color</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab7-2" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s2.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Braids & Twist</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab7-3" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s3.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Corrective Color</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab7-4" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s4.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Hair Extension</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab7-5" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s5.jpg" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Hair Cut</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="pricing-tab7-6" class="tab-pane">
                                                <div class="pricing-tab-inner">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-media">
                                                                <img src="assets/images/our-services/large/s6.jpg"  alt="">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-12">
                                                            <div class="wt-tilte">
                                                                <h3 class="font-26 font-weight-400">Partial Foil</h3>
                                                                <h4 class="site-text-primary">$40 - $80</h4>
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                                                                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                                                remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
                                                                text of the printing and eentially unchanged.
                                                                </p>
                                                                <a href="#" class="site-button skew-icon-btn radius-sm">
                                                                  <span class="font-weight-700 inline-block text-uppercase p-lr15">More</span> 
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                        </div>
                        
                    </div>
                </div>

            </div>
        </div>
        <!-- PRICING SECTION END  --> 

                                
        <!-- WELCOME SECTION START -->
        <div class="section-full p-t100 p-b70 bg-bottom-center bg-full-width bg-no-repeat" style="background-image:url(assets/images/background/bg-1.png);">
            <div class="container ">
                <div class="section-head text-center">
                    <h2><span class="site-text-primary">Good for </span> your health </h2>
                    <div class="wt-separator-outer ">
                        <div class="wt-separator style-icon">
                            <i class="fa fa-leaf text-black"></i>
                            <span class="separator-left site-bg-primary"></span>
                            <span class="separator-right site-bg-primary"></span>
                        </div>                            
                    </div>
                    
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                    </p>
                    
                </div>
                <div class="section-content circle-block-outer" data-bs-toggle="tab-hover">
                    <div class="row  nav nav-tab">
                    
                        <div class="col-lg-4 col-md-12 m-b30">
                            <div class="nav-item">
                                <a class="nav-link active wt-icon-box-wraper right p-a10 m-b20" href="#tab1" data-bs-toggle="tab">
                                    <div class="icon-md site-text-primary radius">
                                        <span class="icon-cell  site-text-primary"><img src="assets/images/icon/candle-1.png" alt=""></span>
                                    </div>
                                    <div class="icon-content">
                                        <h4 class="wt-tilte text-uppercase">Naturally Spa</h4>
                                        <p>A wonderful serenity has taken possession of my entire soul.</p>
                                    </div>
                                </a>
                            </div> 
                            <div class="nav-item">
                                <a class="nav-link wt-icon-box-wraper right p-a10 m-r30 m-b20" href="#tab2" data-bs-toggle="tab">
                                    <div class="icon-md site-text-primary radius">
                                        <span class="icon-cell  site-text-primary"><img src="assets/images/icon/leaves.png" alt=""></span>
                                    </div>
                                    <div class="icon-content">
                                        <h4 class="wt-tilte text-uppercase">Herbal & Natural</h4>
                                        <p>A wonderful serenity has taken possession of my entire.</p>
                                    </div>
                                </a>
                            </div>
                            <div class="nav-item">
                                <a class="nav-link wt-icon-box-wraper right p-a10 m-b20" href="#tab3" data-bs-toggle="tab">
                                    <div class="icon-md site-text-primary radius">
                                        <span class="icon-cell  site-text-primary"><img src="assets/images/icon/lotus-position.png" alt=""></span>
                                    </div>
                                    <div class="icon-content">
                                        <h4 class="wt-tilte text-uppercase">Effective Treatments</h4>
                                        <p>A wonderful serenity has taken possession of my entire soul.</p>
                                    </div>
                                </a>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-12 m-b30">
                            <div class="circle-content-pic tab-content ">
                                <div id="tab1" class="tab-pane in active">
                                    <div class="wt-box">
                                        <div class="wt-media site-text-primary m-b20 ">
                                            <img src="assets/images/circle-block/1.jpg" class="radius-bx" alt="">
                                        </div>
                                    </div>
                                </div>
                                 
                                <div id="tab2" class="tab-pane">
                                    <div class="wt-box">
                                        <div class="wt-media site-text-primary m-b20">
                                            <img src="assets/images/circle-block/2.jpg" class="radius-bx" alt="">
                                        </div>
                                    </div>
                                </div>
                                 
                                <div id="tab3" class="tab-pane">
                                    <div class="wt-box">
                                        <div class="wt-media site-text-primary m-b20">
                                            <img src="assets/images/circle-block/3.jpg" class="radius-bx" alt="">
                                        </div>
                                    </div>
                                </div> 
                                
                                <div id="tab4" class="tab-pane">
                                    <div class="wt-box">
                                        <div class="wt-media site-text-primary m-b20">
                                            <img src="assets/images/circle-block/4.jpg" class="radius-bx" alt="">
                                        </div>
                                    </div>
                                </div> 
                                
                                <div id="tab5" class="tab-pane">
                                    <div class="wt-box">
                                        <div class="wt-media site-text-primary m-b20">
                                            <img src="assets/images/circle-block/5.jpg" class="radius-bx" alt="">
                                        </div>
                                    </div>
                                </div>
                                 
                                <div id="tab6" class="tab-pane">
                                    <div class="wt-box">
                                        <div class="wt-media site-text-primary m-b20">
                                            <img src="assets/images/circle-block/6.jpg" class="radius-bx" alt="">
                                        </div>
                                    </div>
                                </div> 
                                
                             </div>  
                        </div>
                        
                        <div class="col-lg-4 col-md-12 m-b30">
                            <div class="nav-item">
                                <a class="nav-link wt-icon-box-wraper left p-a10 m-b20" href="#tab4" data-bs-toggle="tab">
                                    <div class="icon-md site-text-primary radius">
                                        <span class="icon-cell  site-text-primary"><img src="assets/images/icon/bathtub.png" alt=""></span>
                                    </div>
                                    <div class="icon-content">
                                        <h4 class="wt-tilte text-uppercase">Steam Bath</h4>
                                        <p>A wonderful serenity has taken possession of my entire soul.</p>
                                    </div>
                                </a>
                            </div> 
                            <div class="nav-item">
                                <a class="nav-link wt-icon-box-wraper left p-a10 m-l30 m-b20" href="#tab5" data-bs-toggle="tab">
                                    <div class="icon-md site-text-primary radius">
                                        <span class="icon-cell  site-text-primary"><img src="assets/images/icon/jacuzzi.png" alt=""></span>
                                    </div>
                                    <div class="icon-content">
                                        <h4 class="wt-tilte text-uppercase">Trained Professionals</h4>
                                        <p>A wonderful serenity has taken possession of my entire.</p>
                                    </div>
                                </a>
                            </div>
                            <div class="nav-item">
                                <a class="nav-link wt-icon-box-wraper left p-a10 m-b20" href="#tab6" data-bs-toggle="tab">
                                    <div class="icon-md site-text-primary radius">
                                        <span class="icon-cell  site-text-primary"><img src="assets/images/icon/massage.png" alt=""></span>
                                    </div>
                                    <div class="icon-content">
                                        <h4 class="wt-tilte text-uppercase">Complete Detoxification</h4>
                                        <p>A wonderful serenity has taken possession of my entire soul.</p>
                                    </div>
                                </a> 
                            </div>                               
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>   
        <!-- WELCOME COMPANY SECTION END -->

        <!-- OUR EXPERTS SECTION START  -->
        <div class="section-full bg-white p-t100 p-b70">
            <div class="container">
                <!-- TITLE START-->
                <div class="section-head text-center">
                    <h2><span class="site-text-primary">Our</span> Experts</h2>
                    <div class="wt-separator-outer ">
                        <div class="wt-separator style-icon">
                            <i class="fa fa-leaf text-black"></i>
                            <span class="separator-left site-bg-primary"></span>
                            <span class="separator-right site-bg-primary"></span>
                        </div>                            
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </div>
                <!-- TITLE END-->
                <div class="section-content wt-our-team">
                    <div class="row">
                    
                        <!-- COLUMNS 1 -->
                        <div class="col-lg-4 col-md-4 m-b30">
                            <div class="wt-team-one bg-white">
                                <div class="wt-team-media">
                                    <a href="#"><img src="assets/images/our-team4/ex1.jpg" class="" alt=""></a>
                                </div>
                                <div class="wt-team-info text-center bg-white p-a10">
                                    <h4 class="wt-team-title"><a href="#">Camila</a></h4>
                                    <p>Founder, Beauty Spa</p>
                                    <ul class="social-icons social-square social-dark">
                                        <li><a href="javascript:void(0);" class="fa fa-facebook"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-twitter"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-linkedin"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-rss"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-youtube"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-instagram"></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 2 -->
                        <div class="col-lg-4 col-md-4 m-b30">
                            <div class="wt-team-one bg-white">
                                <div class="wt-team-media">
                                    <a href="#"><img src="assets/images/our-team4/ex2.jpg" class="" alt=""></a>
                                </div>
                                <div class="wt-team-info text-center bg-white p-a10">
                                    <h4 class="wt-team-title"><a href="#">Milagros</a></h4>
                                    <p>Founder, Beauty Spa</p>
                                    <ul class="social-icons social-square social-dark">
                                        <li><a href="javascript:void(0);" class="fa fa-facebook"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-twitter"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-linkedin"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-rss"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-youtube"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-instagram"></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 3 -->
                        <div class="col-lg-4 col-md-4 m-b30">
                            <div class="wt-team-one bg-white">
                                <div class="wt-team-media">
                                    <a href="#"><img src="assets/images/our-team4/ex3.jpg" class="" alt=""></a>
                                </div>
                                <div class="wt-team-info text-center bg-white p-a10">
                                    <h4 class="wt-team-title"><a href="#">Agustina.</a></h4>
                                    <p>Founder, Beauty Spa</p>
                                    <ul class="social-icons social-square social-dark">
                                        <li><a href="javascript:void(0);" class="fa fa-facebook"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-twitter"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-linkedin"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-rss"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-youtube"></a></li>
                                        <li><a href="javascript:void(0);" class="fa fa-instagram"></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 4 -->
                        
                        
                    </div>
                </div>
            </div>
        </div>
        <!-- OUR EXPERTS SECTION END  -->     
        
        <!-- OUR SPECIAL OFFER SECTION start  -->         
        <div class="section-full  special-offer-block2 overlay-wraper bg-repeat p-t100 p-b70"  style="background-image:url(assets/images/background/bg-6.jpg);">
            <div class="overlay-main bg-white opacity-01"></div>
            <div class="left-larg-pic">
                <div class="wt-media">
                    <img src="assets/images/stone_flower2.png" alt="">
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-3">
                        
                    </div>
                    <div class="col-md-9 col-sm-9 m-b30">
                        <div class="awesome-counter text-right">
                            <h3 class="font-24 text-secondry">You Owe Yourself This Moment</h3>
                            <h2 class="font-60 font-weight-600"><span class="site-text-primary">Our Special Offer </span></h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a metus pellentesque, scelerisque ex sed, volutpat nisi. Curabitur tortor mi, eleifend ornare lobortis non. Nulla porta purus quis iaculis ultrices. Proin aliquam sem at nibh hendrerit sagittis. Nullam ornare odio eu lacus tincidunt malesuada.</p>
                        </div>
                        <div class="pull-right counter-small-1">
                            <ul class="list-inline">
                                <li>
                                    <div class="wt-icon-box-wraper left p-a10 text-secondry">
                                        <span class="icon-sm">
                                            <span class="flaticon-happy"></span>
                                        </span>
                                        <div class="icon-content">
                                            <div class="font-20 font-weight-600"><span class="counter">458</span><b>+</b></div>
                                            <span class="text-uppercase">Happy Clients</span>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="wt-icon-box-wraper left p-a10 text-secondry">
                                        <span class="icon-sm">
                                            <span class="flaticon-trophy"></span>
                                        </span>
                                        <div class="icon-content">
                                            <div class="font-20 font-weight-600"><span class="counter">698</span><b>+</b></div>
                                            <span class="text-uppercase">Win Awards</span>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="wt-icon-box-wraper left p-a10 text-secondry">
                                        <span class="icon-sm">
                                            <span class="flaticon-female-hairs"></span>
                                        </span>
                                        <div class="icon-content">
                                            <div class="font-20 font-weight-600"><span class="counter">894</span><b>+</b></div>
                                            <span class="text-uppercase">Our Trainer</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                    </div>
                </div>
            </div>
            </div>
        </div> 
        <!-- OUR SPECIAL OFFER SECTION END  -->          
        
        <!-- GALLERY STYLE-2 -->
        <div class="section-full p-t100 p-b70 bg-white" id="content1">
            <div class="container">
                 <!-- TITLE START-->
                 <div class="section-head text-center">
                    <h2><span class="site-text-primary">Our</span> Gallery</h2>
                    <div class="wt-separator-outer ">
                        <div class="wt-separator style-icon">
                            <i class="fa fa-leaf text-black"></i>
                            <span class="separator-left site-bg-primary"></span>
                            <span class="separator-right site-bg-primary"></span>
                        </div>                            
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </div>
                 <!-- TITLE END-->
                                          
                 <!-- PAGINATION START -->
                <div class="filter-wrap p-a15 our-gallery  m-b30">
                    <ul class="masonry-filter link-style  text-uppercase center-block m-t0">
                        <li class="active"><a data-filter="*" href="#">All</a></li>
                        <li><a data-filter=".cat-filter-1" href="#">Hair cut</a></li>
                        <li><a data-filter=".cat-filter-2" href="#">Foot</a></li>
                        <li><a data-filter=".cat-filter-3" href="#">Body</a></li>
                        <li><a data-filter=".cat-filter-4" href="#">Massage</a></li>
                        <li><a data-filter=".cat-filter-5" href="#">Face massage</a></li>
                    </ul>
                </div>
                <!-- PAGINATION END -->
               
                <div class="portfolio-wrap mfp-gallery  no-col-gap m-b30">
                    <div class="row">
                        <div class="masonry-item cat-filter-1 col-lg-4 col-md-4 col-sm-6 col-xs-6">
                            <div class="wt-gallery-bx">
                                <div class="wt-thum-bx wt-img-effect wt-img-overlay7">
                                
                                    <a href="#">
                                        <img src="assets/images/gallery/portrait/pic5.jpg"  alt="">
                                    </a>
                                    
                                    <div class="overlay-bx">
                                        <div class="overlay-icon">
                                            <a href="#">
                                                <i class="fa fa-link wt-icon-box-xs"></i>
                                            </a>
                                            <a href="assets/images/gallery/portrait/pic5.jpg" class="mfp-link">
                                                <i class="fa fa-picture-o wt-icon-box-xs"></i>
                                            </a>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </div>
                        
                        <div class="masonry-item cat-filter-2 col-lg-4 col-md-4 col-sm-6 col-xs-6">
                            <div class="wt-gallery-bx">
                                <div class="wt-thum-bx wt-img-effect wt-img-overlay7">
                                
                                    <a href="#">
                                        <img src="assets/images/gallery/portrait-half/pic1.jpg"  alt="">
                                    </a>
                                    
                                    <div class="overlay-bx">
                                        <div class="overlay-icon">
                                            <a href="#">
                                                <i class="fa fa-link wt-icon-box-xs"></i>
                                            </a>
                                            <a href="assets/images/gallery/portrait-half/pic1.jpg" class="mfp-link">
                                                <i class="fa fa-picture-o wt-icon-box-xs"></i>
                                            </a>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </div>
                        
                        <div class="masonry-item cat-filter-3 col-lg-4 col-md-4 col-sm-6 col-xs-6">
                            <div class="wt-gallery-bx">
                                <div class="wt-thum-bx wt-img-effect wt-img-overlay7">
                                
                                    <a href="#">
                                        <img src="assets/images/gallery/portrait/pic6.jpg"  alt="">
                                    </a>
                                    
                                    <div class="overlay-bx">
                                        <div class="overlay-icon">
                                            <a href="#">
                                                <i class="fa fa-link wt-icon-box-xs"></i>
                                            </a>
                                            <a href="assets/images/gallery/portrait/pic6.jpg" class="mfp-link">
                                                <i class="fa fa-picture-o wt-icon-box-xs"></i>
                                            </a>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </div>
                        
                        <div class="masonry-item cat-filter-4 col-lg-4 col-md-4 col-sm-6 col-xs-6">
                            <div class="wt-gallery-bx">
                                <div class="wt-thum-bx wt-img-effect wt-img-overlay7">
                                
                                    <a href="#">
                                        <img src="assets/images/gallery/portrait-half/pic2.jpg"  alt="">
                                    </a>
                                    
                                    <div class="overlay-bx">
                                        <div class="overlay-icon">
                                            <a href="#">
                                                <i class="fa fa-link wt-icon-box-xs"></i>
                                            </a>
                                            <a href="assets/images/gallery/portrait-half/pic2.jpg" class="mfp-link">
                                                <i class="fa fa-picture-o wt-icon-box-xs"></i>
                                            </a>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </div>
                        
                        <div class="masonry-item cat-filter-5 col-lg-4 col-md-4 col-sm-6 col-xs-6">
                            <div class="wt-gallery-bx">
                                <div class="wt-thum-bx wt-img-effect wt-img-overlay7">
                                
                                    <a href="#">
                                        <img src="assets/images/gallery/portrait-half/pic3.jpg"  alt="">
                                    </a>
                                    
                                    <div class="overlay-bx">
                                        <div class="overlay-icon">
                                            <a href="#">
                                                <i class="fa fa-link wt-icon-box-xs"></i>
                                            </a>
                                            <a href="assets/images/gallery/portrait-half/pic3.jpg" class="mfp-link">
                                                <i class="fa fa-picture-o wt-icon-box-xs"></i>
                                            </a>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </div>
                        
                        <div class="masonry-item cat-filter-1 col-lg-8 col-md-8 col-sm-8 col-xs-6">
                            <div class="wt-gallery-bx">
                                <div class="wt-thum-bx wt-img-effect wt-img-overlay7">
                                
                                    <a href="#">
                                        <img src="assets/images/gallery/landscape-half/pic1.jpg"  alt="">
                                    </a>
                                    
                                    <div class="overlay-bx">
                                        <div class="overlay-icon">
                                            <a href="#">
                                                <i class="fa fa-link wt-icon-box-xs"></i>
                                            </a>
                                            <a href="assets/images/gallery/landscape-half/pic1.jpg" class="mfp-link">
                                                <i class="fa fa-picture-o wt-icon-box-xs"></i>
                                            </a>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        <!-- GALLERY STYLE-2 End --> 
        
        <!-- OUR PRICING TABLE SECTION START  -->
        <div class="section-full  overlay-wraper bg-white bg-parallax  p-t100 p-b70" data-stellar-background-ratio="0.5" style="background-image:url(assets/images/background/bg-12.jpg);">
            <div class="overlay-main bg-white opacity-07"></div>
            <div class="container">
            
                <!-- TITLE START-->
                <div class="section-head text-center">
                    <h2><span class="site-text-primary">Our</span> Pricing</h2>
                    <div class="wt-separator-outer ">
                        <div class="wt-separator style-icon">
                            <i class="fa fa-leaf text-black"></i>
                            <span class="separator-left site-bg-primary"></span>
                            <span class="separator-right site-bg-primary"></span>
                        </div>
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </div>
                <!-- TITLE END-->
             
                <div class="section-content">
                    <div class="pricingtable-row">
                        <div class="row">
                        
                            <div class="col-lg-4 col-md-4 m-b30">
                                <div class="pricingtable-wrapper overlay-wraper  pricing-table-style-3" >
                                    <div class="pricingtable-inner bg-no-repeat bg-cover" style="background-image:url(assets/images/gallery/portrait/pic1.jpg);">
                                        
                                        <div class="pricingtable-title" style="background-color:#42bbc5">
                                            <h3>Basic Plan</h3>
                                        </div>
                                        
                                        <div class="pricingtable-price">
                                            <span class="pricingtable-bx  text-secondry">$29</span>
                                            <span class="pricingtable-type text-secondry">M</span>
                                        </div>
                                        
                                        <ul class="pricingtable-features text-white">
                                            <li><i class="fa fa-check"></i>  Phone & Email Support  </li>
                                            <li><i class="fa fa-times"></i> 3 Social Account </li>
                                            <li><i class="fa fa-check"></i> Branded Reports  </li>
                                            <li><i class="fa fa-check"></i> Unlock rewards</li>
                                            <li><i class="fa fa-times"></i> Support Forum</li>
                                        </ul>
                                        
                                        <div class="pricingtable-footer">
                                            <a href="#" class="site-button white text-uppercase radius-sm">Purchase</a>
                                        </div>
                                        
                                        <div class="overlay-main gradi-green opacity-07"></div>
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <div class="col-lg-4 col-md-4 m-b30">
                                <div class="pricingtable-wrapper overlay-wraper  pricing-table-style-3" >
                                    <div class="pricingtable-inner bg-no-repeat bg-cover" style="background-image:url(assets/images/gallery/portrait/pic2.jpg);">
                                        
                                        <div class="pricingtable-title" style="background-color:#e273a4">
                                            <h3>Pro Plan</h3>
                                        </div>
                                        
                                        <div class="pricingtable-price">
                                            <span class="pricingtable-bx  text-secondry">$49</span>
                                            <span class="pricingtable-type text-secondry">M</span>
                                        </div>
                                        
                                        <ul class="pricingtable-features  text-white">
                                            <li><i class="fa fa-check"></i>  Phone & Email Support  </li>
                                            <li><i class="fa fa-check"></i> 3 Social Account </li>
                                            <li><i class="fa fa-check"></i> Branded Reports  </li>
                                            <li><i class="fa fa-check"></i> Unlock rewards</li>
                                            <li><i class="fa fa-check"></i> Support Forum</li>
                                        </ul>
                                        
                                        <div class="pricingtable-footer">
                                            <a href="#" class="site-button white text-uppercase radius-sm">Purchase</a>
                                        </div>
                                        
                                         <div class="overlay-main gradi-pink opacity-07"></div>
                                    </div>
                                   
                                </div>
                            </div>
                            
                            <div class="col-lg-4 col-md-4 m-b30">
                                <div class="pricingtable-wrapper overlay-wraper  pricing-table-style-3" >
                                    <div class="pricingtable-inner bg-no-repeat bg-cover" style="background-image:url(assets/images/gallery/portrait/pic3.jpg);">
                                        
                                        <div class="pricingtable-title" style="background-color:#8b4795">
                                            <h3>Premium Plan</h3>
                                        </div>
                                        
                                        <div class="pricingtable-price">
                                            <span class="pricingtable-bx  text-secondry">$99</span>
                                            <span class="pricingtable-type text-secondry">M</span>
                                        </div>
                                        
                                        <ul class="pricingtable-features  text-white">
                                            <li><i class="fa fa-check"></i>  Phone & Email Support  </li>
                                            <li><i class="fa fa-check"></i> 3 Social Account </li>
                                            <li><i class="fa fa-check"></i> Branded Reports  </li>
                                            <li><i class="fa fa-check"></i> Unlock rewards</li>
                                            <li><i class="fa fa-check"></i> Support Forum</li>
                                        </ul>
                                        
                                        <div class="pricingtable-footer">
                                            <a href="#" class="site-button white text-uppercase radius-sm">Purchase</a>
                                        </div>
                                        
                                        <div class="overlay-main gradi-purple opacity-07"></div>
                                    </div>
                                    
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            
            </div>
       </div>
       <!-- OUR PRICING TABLEL SECTION END  --> 
                   
        <!-- OUR PRODUCT SECTION START  -->
        <div class="section-full bg-white p-t100 p-b70 bg-bottom-right bg-no-repeat" style="background-image:url(assets/images/stone-spa.png)">
            <div class="container">
                <!-- TITLE START-->
                <div class="section-head text-center">
                    <h2><span class="site-text-primary">Our</span> Products</h2>
                    <div class="wt-separator-outer ">
                        <div class="wt-separator style-icon">
                            <i class="fa fa-leaf text-black"></i>
                            <span class="separator-left site-bg-primary"></span>
                            <span class="separator-right site-bg-primary"></span>
                        </div>                            
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </div>
                <!-- TITLE END-->
                <div class="section-content">
                    <div class="row">
                    
                        <!-- COLUMNS 1 -->
                        <div class="col-lg-3 col-md-6 col-sm-6 m-b30">
                            <div class="wt-box bg-white wt-product-box">
                                <div class="wt-media site-text-primary">
                                    <img src="assets/images/products/pic-8.jpg"  alt="">
                                </div>
                                <div class="wt-info p-a20 text-center">
                                    <h3>Massage Soap</h3>
                                    <span class="price">
                                        <del>
                                             <span><span class="Price-currencySymbol">£</span>3.00</span>
                                        </del> 
                                        <ins>
                                            <span><span class="Price-currencySymbol">£</span>2.00</span>
                                        </ins>
                                    </span>
                                    <div class="rating-bx">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </div>
                                    <div class="p-t10">
                                        <a href="#" class="site-button text-uppercase radius-sm font-weight-700 button-md">Add to cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 2 -->
                        <div class="col-lg-3 col-md-6 col-sm-6 m-b30">
                            <div class="wt-box bg-white wt-product-box">
                                <div class="wt-media site-text-primary">
                                    <img src="assets/images/products/pic-2.jpg"  alt="">
                                </div>
                                <div class="wt-info p-a20 text-center">
                                    <h3>Flower</h3>
                                    <span class="price">
                                        <del>
                                             <span><span class="Price-currencySymbol">£</span>3.00</span>
                                        </del> 
                                        <ins>
                                            <span><span class="Price-currencySymbol">£</span>2.00</span>
                                        </ins>
                                    </span>
                                    <div class="rating-bx">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </div>
                                    <div class="p-t10">
                                        <a href="#"  class="site-button text-uppercase radius-sm font-weight-700 button-md">Add to cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 3 -->
                        <div class="col-lg-3 col-md-6 col-sm-6 m-b30">
                            <div class="wt-box bg-white wt-product-box">
                                <div class="wt-media site-text-primary">
                                    <img src="assets/images/products/pic-9.jpg"  alt="">
                                </div>
                                <div class="wt-info p-a20 text-center">
                                    <h3>Massage Oil.</h3>
                                    <span class="price">
                                        <del>
                                             <span><span class="Price-currencySymbol">£</span>3.00</span>
                                        </del> 
                                        <ins>
                                            <span><span class="Price-currencySymbol">£</span>2.00</span>
                                        </ins>
                                    </span>
                                    <div class="rating-bx">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </div>
                                    <div class="p-t10">
                                        <a href="#"  class="site-button text-uppercase radius-sm font-weight-700 button-md">Add to cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 4 -->
                        <div class="col-lg-3 col-md-6 col-sm-6 m-b30">
                            <div class="wt-box bg-white wt-product-box">
                                <div class="wt-media site-text-primary ">
                                    <img src="assets/images/products/pic-5.jpg"  alt="">
                                </div>
                                <div class="wt-info p-a20 text-center">
                                    <h3>Finnish sauna</h3>
                                    <span class="price">
                                        <del>
                                             <span><span class="Price-currencySymbol">£</span>3.00</span>
                                        </del> 
                                        <ins>
                                            <span><span class="Price-currencySymbol">£</span>2.00</span>
                                        </ins>
                                    </span>
                                    <div class="rating-bx">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </div>
                                    <div class="p-t10">
                                        <a href="#"  class="site-button text-uppercase radius-sm font-weight-700 button-md">Add to cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>                            
                        
                    </div>
                </div>
            </div>
        </div>
        <!-- OUR PRODUCT SECTION END  -->  
        
        <!-- CONTACT US SECTION END  --> 
        <div class="section-full overlay-wraper bg-parallax" data-stellar-background-ratio="0.2" style="background-image:url(assets/images/background/bg-11.jpg);">
            <div class="overlay-main bg-white opacity-07"></div>
            <div class="container">

                    <div class="row conntact-home">
                        <div class="col-lg-5 col-md-5 contact-home4-left">
                            <div class="section-content p-tb30 overlay-wraper">
                                <div class="overlay-main site-bg-primary opacity-09"></div>	
                                  <div class="p-a30" style="z-index:1; position:relative">
                                    <h3 class="font-weight-400 text-white m-b5">Make an</h3>
                                    <h2 class="text-white m-t0"  style="font-family: 'Crete Round', serif;"><i>Appointment</i></h2>
                                      <form  class="cons-contact-form2 form-transparent" method="post" action="form-handler2.php">
                                        <div class="form-group">
                                            <input name="username" type="text" required class="form-control" placeholder="Neme">
                                        </div>
                                        <div class="form-group">
                                            <input name="email" type="text" class="form-control" required placeholder="Email">
                                        </div>
                                        <div class="form-group">
                                            <input name="phone" type="text" class="form-control" required placeholder="Phone">
                                        </div>
                                        <div class="form-group">
                                            <textarea name="message" class="form-control" rows="4" placeholder="Message"></textarea>
                                            </div>
                                        <button type="submit" class="site-button-secondry radius-sm">
                                          <span class="font-weight-700 inline-block text-uppercase p-lr15">Submit</span> 
                                        </button>    
                                    </form>
                                  </div>                             
                            </div>
                        </div>                        
                        <div class="col-lg-7 col-md-7 contact-home4-right p-t50 p-b50" >
                            <div class="section-content">
                                <div class="opening-block bdr-5 bdr-primary p-a40 text-right">
                                    <a href="#" class="site-bg-primary book-now-btn p-tb5 p-lr15 text-uppercase font-16 font-weight-500">All Services</a>
                                    <h2 class="text-uppercase  text-secondry m-tb0">Best Services</h2>
                                    <span class="font-60 font-weight-600 text-uppercase site-text-primary">Open Hours</span>
                                    <p>If you feel tired and stressed after a working day, we are happy to give you an enjoyable and healthy solution to find your balance again.</p>
                                    <div class="clearfix">
                                        <ul class="list-unstyled m-b0">
                                            <li><div class="clearfix"><span class="opening-date">Mon-Fri:</span><span class="opening-time">9 AM - 6 PM</span></div></li>
                                            <li><div class="clearfix"><span class="opening-date">Saturday:</span> <span class="opening-time">9 AM- 6 PM</span></div></li>
                                            <li><div class="clearfix"><span class="opening-date">Sunday:</span> <span class="opening-time">Closed</span></div></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>                               
                        </div>
                    </div>
                
            </div>
            
        </div> 
        <!-- CONTACT US OFFER SECTION END  -->  
        
        <!-- LATEST BLOG SECTION START -->
        <div class="section-full latest-blog bg-gray p-t100 p-b70">
            <div class="container">
                <!-- TITLE -->
                <div class="section-head text-center">
                    <h2><span class="site-text-primary">Latest </span> News</h2>
                    <div class="wt-separator-outer ">
                        <div class="wt-separator style-icon">
                            <i class="fa fa-leaf text-black"></i>
                            <span class="separator-left site-bg-primary"></span>
                            <span class="separator-right site-bg-primary"></span>
                        </div>                            
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </div>
                
                <!-- TITLE -->
                
                <div class="section-content ">
                    <div class="row equal-wraper">
                        <!-- COLUMNS 1 -->
                        <div class="col-lg-6 col-md-12 m-b30">
                        
                            <div class="blog-post latest-blog-3 blog-md date-style-1 clearfix">
                                <div class="wt-post-media wt-img-effect zoom-slow">
                                    <a href="#"><img src="assets/images/blog/blog-small/pic1.jpg" alt=""></a>
                                </div>
                                <div class="wt-post-info">
                                    <div class="wt-post-title ">
                                        <h4 class="post-title font-weight-800"><a href="#">Oil Massage</a></h4>
                                    </div>
                                    <div class="wt-post-meta ">
                                        <ul>
                                            <li class="post-date"> <i class="fa fa-calendar"></i><strong>18 Jan</strong> <span> 2018</span> </li>
                                            <li class="post-author"><i class="fa fa-user"></i><a href="#">By <span>John</span></a> </li>
                                            <li class="post-comment"><i class="fa fa-comments"></i> <a href="#">0</a> </li>
                                        </ul>
                                    </div>
                                    <div class="wt-post-text">
                                        <p>Lorem Ipsum is simply dummy text of printing and typesetting Ipsum has been the industry's dummy</p> 
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <div class="blog-post latest-blog-3 blog-md date-style-1 clearfix">
                                <div class="wt-post-media wt-img-effect zoom-slow">
                                    <a href="#"><img src="assets/images/blog/blog-small/pic2.jpg" alt=""></a>
                                </div>
                                <div class="wt-post-info">
                                    <div class="wt-post-title ">
                                        <h4 class="post-title font-weight-800"><a href="#">Beauty Treatment</a></h4>
                                    </div>
                                    <div class="wt-post-meta ">
                                        <ul>
                                            <li class="post-date"> <i class="fa fa-calendar"></i><strong>20 Jan</strong> <span> 2018</span> </li>
                                            <li class="post-author"><i class="fa fa-user"></i><a href="#">By <span>John</span></a> </li>
                                            <li class="post-comment"><i class="fa fa-comments"></i> <a href="#">0</a> </li>
                                        </ul>
                                    </div>
                                    <div class="wt-post-text">
                                        <p>Lorem Ipsum is simply dummy text of printing and typesetting Ipsum has been the industry's dummy</p> 
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <div class="blog-post latest-blog-3 blog-md date-style-1 clearfix">
                                <div class="wt-post-media wt-img-effect zoom-slow">
                                    <a href="#"><img src="assets/images/blog/blog-small/pic3.jpg" alt=""></a>
                                </div>
                                <div class="wt-post-info">
                                    <div class="wt-post-title ">
                                        <h4 class="post-title font-weight-800"><a href="#">Fairness treatment</a></h4>
                                    </div>
                                    <div class="wt-post-meta ">
                                        <ul>
                                            <li class="post-date"> <i class="fa fa-calendar"></i><strong>22 Jan</strong> <span> 2018</span> </li>
                                            <li class="post-author"><i class="fa fa-user"></i><a href="#">By <span>John</span></a> </li>
                                            <li class="post-comment"><i class="fa fa-comments"></i> <a href="#">0</a> </li>
                                        </ul>
                                    </div>
                                    <div class="wt-post-text">
                                        <p>Lorem Ipsum is simply dummy text of printing and typesetting Ipsum has been the industry's dummy</p> 
                                    </div>
                                    
                                </div>
                            </div>
                            
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <div class="blog-post latest-blog-3 overlay-wraper post-overlay date-style-1 bg-cover bg-no-repeat bg-top-center"  style="background-image:url(assets/images/blog-big.jpg);">
                                <div class="overlay-main opacity-08 primary-gradi"></div>
                                <div class="wt-post-info p-a30 text-white">
                                    <div class="post-overlay-position">
                                        <div class="wt-post-title ">
                                            <h3 class="post-title"><a href="#" class="text-white text-capitalize">Relaxation. No longer beyond your budget. </a></h3>
                                        </div>
                                        <div class="wt-post-meta ">
                                            <ul>
                                                <li class="post-date"><i class="fa fa-calendar"></i><strong>6 Jan</strong> <span> 2018</span></li>
                                                <li class="post-author"><i class="fa fa-user"></i>By <a href="#">Admin</a> </li>
                                                <li class="post-comment"><i class="fa fa-comments"></i> <a href="#">2 comment</a> </li>
                                            </ul>
                                        </div>
                                        <div class="wt-post-text">
                                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p> 
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>                            
                    </div>
                </div>
            </div>
        </div>
        <!-- LATEST BLOG SECTION END -->    
                               
        <!-- OUR CLIENT SLIDER START -->
        <div class="section-full p-t50 p-b10 overlay-wraper site-bg-primary bg-repeat" style="background-image:url(assets/images/background/bg-7.png);">
            <div class="container">
                
                <!-- IMAGE CAROUSEL START -->
                <div class="section-content">
                    <div class="owl-carousel client-logo-carousel">
                    
                        <!-- COLUMNS 1 --> 
                        <div class="item">
                            <div class="ow-client-logo">
                                <div class="client-logo wt-img-effect on-color">
                                    <a href="javascript:;"><img src="assets/images/client-logo/logo1.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 2 --> 
                        <div class="item">
                            <div class="ow-client-logo">
                                <div class="client-logo wt-img-effect on-color">
                                    <a href="javascript:;"><img src="assets/images/client-logo/logo2.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 3 --> 
                        <div class="item">
                            <div class="ow-client-logo">
                                <div class="client-logo wt-img-effect on-color">
                                    <a href="javascript:;"><img src="assets/images/client-logo/logo3.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 4 --> 
                        <div class="item">
                            <div class="ow-client-logo">
                                <div class="client-logo wt-img-effect on-color">
                                    <a href="javascript:;"><img src="assets/images/client-logo/logo4.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 5 --> 
                        <div class="item">
                            <div class="ow-client-logo">
                                <div class="client-logo wt-img-effect on-color">
                                    <a href="javascript:;"><img src="assets/images/client-logo/logo5.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 6 --> 
                        <div class="item">
                            <div class="ow-client-logo">
                                <div class="client-logo wt-img-effect on-color">
                                    <a href="javascript:;"><img src="assets/images/client-logo/logo6.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 7 --> 
                        <div class="item">
                            <div class="ow-client-logo">
                                <div class="client-logo wt-img-effect on-color">
                                    <a href="javascript:;"><img src="assets/images/client-logo/logo7.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 8 --> 
                        <div class="item">
                            <div class="ow-client-logo">
                                <div class="client-logo wt-img-effect on-color">
                                    <a href="javascript:;"><img src="assets/images/client-logo/logo8.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 9 --> 
                        <div class="item">
                            <div class="ow-client-logo">
                                <div class="client-logo wt-img-effect on-color">
                                    <a href="javascript:;"><img src="assets/images/client-logo/logo9.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 10 --> 
                        <div class="item">
                            <div class="ow-client-logo">
                                <div class="client-logo wt-img-effect on-color">
                                    <a href="javascript:;"><img src="assets/images/client-logo/logo10.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 11 --> 
                        <div class="item">
                            <div class="ow-client-logo">
                                <div class="client-logo wt-img-effect on-color">
                                    <a href="javascript:;"><img src="assets/images/client-logo/logo11.png" alt=""></a>
                                </div>
                            </div>
                        </div>
                        <!-- COLUMNS 12 --> 
                        <div class="item">
                            <div class="ow-client-logo">
                                <div class="client-logo wt-img-effect on-color">
                                    <a href="javascript:;"><img src="assets/images/client-logo/logo12.png" alt=""></a>
                                </div>
                            </div>
                        </div>                        
                    
                    </div>
                </div>
                <!-- IMAGE CAROUSEL START -->
            </div>
        </div>
        <!-- OUR CLIENT SLIDER END -->                          
         
    </div>
    <!-- CONTENT END -->


    
    <!-- FOOTER START -->
    <footer class="site-footer footer-light">
        <!-- COLL-TO ACTION START -->
        <div class="section-full overlay-wraper site-bg-primary" style="background-image:url(assets/images/background/bg-7.png);">
            
            <div class="section-content ">
            <!-- COLL-TO ACTION START -->
                <div class="wt-subscribe-box">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-8 col-sm-8">
                                <div class="call-to-action-left p-tb20 p-r50">
                                    <h4 class="text-uppercase m-b10">We are ready to build your dream tell us more about your project</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor.</p>
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="call-to-action-right p-tb30">
                                    <a href="#" class="site-button-secondry text-uppercase radius-sm font-weight-600">
                                        Contact us 
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        
                            
        <!-- FOOTER BLOCKES START -->  
        <div class="footer-top overlay-wraper">
            <div class="overlay-main"></div>
            <div class="container">
                <div class="row">
                    <!-- ABOUT COMPANY -->
                    <div class="col-lg-3 col-md-6">  
                        <div class="widget widget_about">
                            <h4 class="widget-title">About Company</h4>
                            <div class="logo-footer clearfix p-b15">
                                <a href="../fonts/"><img src="assets/images/logo-7.png" width="230" height="67" alt=""></a>
                            </div>
                            <p>Thewebmax ipsum dolor sit amet, interior adipiscing elit, sed diam nonummy nibh is euismod tincidunt ut laoreet dolore are agna aliquam erat. wisi enim ad minim veniam, quis tation. sit amet, consectet. ipsum dolor sit amet, consectetuer and item adipiscing. ipsum dolor sit.
                            </p>  
                        </div>
                    </div> 
                    <!-- RESENT POST -->
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="widget recent-posts-entry-date">
                            <h4 class="widget-title">Resent Post</h4>
                            <div class="widget-post-bx">
                                <div class="bdr-light-blue widget-post clearfix  bdr-b-1 m-b10 p-b10">
                                    <div class="wt-post-date text-center text-uppercase text-white">
                                        <strong>20</strong>
                                        <span>Mar</span>
                                    </div>
                                    <div class="wt-post-info">
                                        <div class="wt-post-header">
                                            <h6 class="post-title"><a href="#">Blog title first </a></h6>
                                        </div>
                                        <div class="wt-post-meta">
                                            <ul>
                                                <li class="post-author"><i class="fa fa-user"></i>By Admin</li>
                                                <li class="post-comment"><i class="fa fa-comments"></i> 28</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="bdr-light-blue widget-post clearfix  bdr-b-1 m-b10 p-b10">
                                    <div class="wt-post-date text-center text-uppercase text-white">
                                        <strong>30</strong>
                                        <span>Mar</span>
                                    </div>
                                    <div class="wt-post-info">
                                        <div class="wt-post-header">
                                            <h6 class="post-title"><a href="#">Blog title first </a></h6>
                                        </div>
                                        <div class="wt-post-meta">
                                            <ul>
                                                <li class="post-author"><i class="fa fa-user"></i>By Admin</li>
                                                <li class="post-comment"><i class="fa fa-comments"></i> 29</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="bdr-light-blue widget-post clearfix  bdr-b-1 m-b10 p-b10">
                                    <div class="wt-post-date text-center text-uppercase text-white">
                                        <strong>31</strong>
                                        <span>Mar</span>
                                    </div>
                                    <div class="wt-post-info">
                                        <div class="wt-post-header">
                                            <h6 class="post-title"><a href="#">Blog title first </a></h6>
                                        </div>
                                        <div class="wt-post-meta">
                                            <ul>
                                                <li class="post-author"><i class="fa fa-user"></i>By Admin</li>
                                                <li class="post-comment"><i class="fa fa-comments"></i> 30</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>      
                    <!-- USEFUL LINKS -->
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="widget widget_services">
                            <h4 class="widget-title">Useful links</h4>
                            <ul>
                                <li><a href="#">About</a></li>
                                <li><a href="#">FAQ</a></li>
                                <li><a href="#">Career</a></li>
                                <li><a href="#">Our Team</a></li>
                                <li><a href="#">Services</a></li>
                                <li><a href="#">Gallery</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- NEWSLETTER -->
                    <div class="col-lg-3 col-md-6">
                        <div class="widget widget_newsletter">
                            <h4 class="widget-title">Newsletter</h4>
                            <div class="newsletter-bx">
                                <form role="search" method="post">
                                    <div class="input-group">
                                    <input name="news-letter" class="form-control" placeholder="ENTER YOUR EMAIL" type="text">
                                    <span class="input-group-btn">
                                        <button type="submit" class="site-button"><i class="fa fa-paper-plane-o"></i></button>
                                    </span>
                                </div>
                                 </form>
                            </div>
                        </div>
                        <!-- SOCIAL LINKS -->
                        <div class="widget widget_social_inks">
                            <h4 class="widget-title">Social Links</h4>
                            <ul class="social-icons social-square social-darkest">
                                <li><a href="javascript:void(0);" class="fa fa-facebook"></a></li>
                                <li><a href="javascript:void(0);" class="fa fa-twitter"></a></li>
                                <li><a href="javascript:void(0);" class="fa fa-linkedin"></a></li>
                                <li><a href="javascript:void(0);" class="fa fa-rss"></a></li>
                                <li><a href="javascript:void(0);" class="fa fa-youtube"></a></li>
                                <li><a href="javascript:void(0);" class="fa fa-instagram"></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- FOOTER COPYRIGHT -->
        <div class="footer-bottom overlay-wraper">
            <div class="overlay-main"></div>
            <div class="constrot-strip"></div>
            <div class="container p-t30">
                <div class="row ftr-btm">
                    <div class="wt-footer-bot-left">
                        <span class="copyrights-text">© 2024 Your Company. All Rights Reserved. Jassa.</span>
                    </div>
                    <div class="wt-footer-bot-right">
                        <ul class="copyrights-nav pull-right"> 
                            <li><a href="javascript:void(0);">Terms  & Condition</a></li>
                            <li><a href="javascript:void(0);">Privacy Policy</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- FOOTER END -->

    
    <!-- BUTTON TOP START -->
    <button class="scroltop"><span class=" iconmoon-house relative" id="btn-vibrate"></span>Top</button>
    
</div>


<!-- LOADING AREA START ===== -->
<div class="loading-area">
<div class="loading-box"></div>
<div class="loading-pic">
    <div class="cssload-container">
        <div class="cssload-progress cssload-float cssload-shadow">
            <div class="cssload-progress-item"></div>
        </div>
    </div>
</div>
</div>
<!-- LOADING AREA  END ====== -->
<!-- STYLE SWITCHER  ======= --> 
<div class="styleswitcher">

<div class="switcher-btn-bx">
    <a class="switch-btn">
        <span class="fa fa-cog fa-spin"></span>
    </a>
</div>

<div class="styleswitcher-inner">

    <h6 class="switcher-title">Color Skin</h6>
    <ul class="color-skins">
        <li><a class="theme-skin skin-1" href="?theme=css/skin/skin-1" title="default Theme"></a></li>
        <li><a class="theme-skin skin-2" href="?theme=css/skin/skin-2" title="pink Theme"></a></li>
        <li><a class="theme-skin skin-3" href="?theme=css/skin/skin-3" title="sky Theme"></a></li>
        <li><a class="theme-skin skin-4" href="?theme=css/skin/skin-4" title="green Theme"></a></li>
        <li><a class="theme-skin skin-5" href="?theme=css/skin/skin-5" title="red Theme"></a></li>
        <li><a class="theme-skin skin-6" href="?theme=css/skin/skin-6" title="orange Theme"></a></li>
        <li><a class="theme-skin skin-7" href="?theme=css/skin/skin-7" title="purple Theme"></a></li>
        <li><a class="theme-skin skin-8" href="?theme=css/skin/skin-8" title="blue Theme"></a></li>
        <li><a class="theme-skin skin-9" href="?theme=css/skin/skin-9" title="gray Theme"></a></li>
        <li><a class="theme-skin skin-10" href="?theme=css/skin/skin-10" title="brown Theme"></a></li>
        <li><a class="theme-skin skin-11" href="?theme=css/skin/skin-11" title="gray Theme"></a></li>
        <li><a class="theme-skin skin-12" href="?theme=css/skin/skin-12" title="golden Theme"></a></li>
    </ul>   
    
    <h6 class="switcher-title">Nav</h6>
    <ul class="nav-view">
        <li class="nav-light active">Light</li>
        <li class="nav-dark">Dark</li>
    </ul>
    
    <h6 class="switcher-title">Nav</h6>
    <ul class="nav-width">
        <li class="nav-boxed active">Boxed</li>
        <li class="nav-wide">Wide</li>
    </ul>   
    
    <h6 class="switcher-title">Header</h6>
    <ul class="header-view">
        <li class="header-fixed active">Fixed</li>
        <li class="header-static">Static</li>
    </ul> 
    
    <h6 class="switcher-title">Layout</h6>
    <ul class="layout-view">
        <li class="wide-layout active">Wide</li>
        <li class="boxed">Boxed</li>
    </ul>   
                
    <h6 class="switcher-title">Background Image</h6>
    <ul class="background-switcher">
        <li><img src="assets/images/switcher/switcher-bg/thum/bg1.jpg" rel="assets/images/switcher/switcher-bg/large/bg1.jpg" alt=""></li>
        <li><img src="assets/images/switcher/switcher-bg/thum/bg2.jpg" rel="assets/images/switcher/switcher-bg/large/bg2.jpg"  alt=""></li>
        <li><img src="assets/images/switcher/switcher-bg/thum/bg3.jpg" rel="assets/images/switcher/switcher-bg/large/bg3.jpg"  alt=""></li>
        <li><img src="assets/images/switcher/switcher-bg/thum/bg4.jpg" rel="assets/images/switcher/switcher-bg/large/bg4.jpg"  alt=""></li>
    </ul>
    
    <h6 class="switcher-title">Background Pattern</h6>
    <ul class="pattern-switcher">
        <li><img src="assets/images/switcher/switcher-patterns/thum/bg1.jpg"  rel="assets/images/switcher/switcher-patterns/large/pt1.jpg" alt=""></li>
        <li><img src="assets/images/switcher/switcher-patterns/thum/bg2.jpg"  rel="assets/images/switcher/switcher-patterns/large/pt2.jpg" alt=""></li>
        <li><img src="assets/images/switcher/switcher-patterns/thum/bg3.jpg"  rel="assets/images/switcher/switcher-patterns/large/pt3.jpg" alt=""></li>
        <li><img src="assets/images/switcher/switcher-patterns/thum/bg4.jpg"  rel="assets/images/switcher/switcher-patterns/large/pt4.jpg" alt=""></li>
        <li><img src="assets/images/switcher/switcher-patterns/thum/bg5.jpg"  rel="assets/images/switcher/switcher-patterns/large/pt5.jpg" alt=""></li>
        <li><img src="assets/images/switcher/switcher-patterns/thum/bg6.jpg"  rel="assets/images/switcher/switcher-patterns/large/pt6.jpg" alt=""></li>
        <li><img src="assets/images/switcher/switcher-patterns/thum/bg7.jpg"  rel="assets/images/switcher/switcher-patterns/large/pt7.jpg" alt=""></li>
        <li><img src="assets/images/switcher/switcher-patterns/thum/bg8.jpg"  rel="assets/images/switcher/switcher-patterns/large/pt8.jpg" alt=""></li>
        <li><img src="assets/images/switcher/switcher-patterns/thum/bg9.jpg"  rel="assets/images/switcher/switcher-patterns/large/pt9.jpg" alt=""></li>
        <li><img src="assets/images/switcher/switcher-patterns/thum/bg10.jpg"  rel="assets/images/switcher/switcher-patterns/large/pt10.jpg" alt=""></li>
        <li><img src="assets/images/switcher/switcher-patterns/thum/bg11.jpg"  rel="assets/images/switcher/switcher-patterns/large/pt11.jpg" alt=""></li>
        <li><img src="assets/images/switcher/switcher-patterns/thum/bg12.jpg"  rel="assets/images/switcher/switcher-patterns/large/pt12.jpg" alt=""></li>
    </ul>
    
    
</div>    
</div>
<!-- STYLE SWITCHER END ==== -->

5. Now guys we need to add below into src/app/app.routes.ts to links components to routes:

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
      {
        path: '', title: 'Home Page', component: HomeComponent,
      },
      
];

7. Now guys we need to add below code into our project/src/index.html file for styles and scripts or we can also call this styles/scripts inside angular.json file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  
  <base href="/">
   <!-- FAVICONS ICON -->
   <link rel="icon" href="images/favicon.ico" type="image/x-icon" >
   <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" >
   
   <!-- PAGE TITLE HERE -->
   <title>Spa Template | Home Page 4</title>
   
   <!-- MOBILE SPECIFIC -->
   <meta name="viewport" content="width=device-width, initial-scale=1">
   
   <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css"><!-- BOOTSTRAP STYLE SHEET -->
   <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css"><!-- FONTAWESOME STYLE SHEET -->
   <link rel="stylesheet" type="text/css" href="assets/css/flaticon.min.css"><!-- FLATICON STYLE SHEET -->
   <link rel="stylesheet" type="text/css" href="assets/css/animate.min.css"><!-- ANIMATE STYLE SHEET --> 
   <link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css"><!-- OWL CAROUSEL STYLE SHEET -->
   <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-select.min.css"><!-- BOOTSTRAP SELECT BOX STYLE SHEET -->
   <link rel="stylesheet" type="text/css" href="assets/css/magnific-popup.min.css"><!-- MAGNIFIC POPUP STYLE SHEET -->
   <link rel="stylesheet" type="text/css" href="assets/css/loader.min.css"><!-- LOADER STYLE SHEET -->   
   <link rel="stylesheet" type="text/css" href="assets/css/style.css"><!-- MAIN STYLE SHEET -->
   <link rel="stylesheet" type="text/css" class="skin" href="assets/css/skin-7.css"><!-- THEME COLOR CHANGE STYLE SHEET -->
   <link rel="stylesheet" type="text/css" href="assets/css/switcher.css"><!-- SIDE SWITCHER STYLE SHEET -->    

   
   <!-- GOOGLE FONTS -->
   <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">   

   
   <!-- REVOLUTION SLIDER CSS -->
   <link rel="stylesheet" type="text/css" href="assets/css/settings.css">
   <!-- REVOLUTION NAVIGATION STYLE -->
   <link rel="stylesheet" type="text/css" href="assets/css/navigation.css">
</head>
<body id="bg">
  <app-root></app-root>
   <!-- JAVASCRIPT  FILES ========================================= --> 
<script   src="assets/js/jquery-3.6.1.min.js"></script><!-- JQUERY.MIN JS -->
<script   src="assets/js/popper.min.js"></script><!-- POPPER.MIN JS -->
<script   src="assets/js/bootstrap.min.js"></script><!-- BOOTSTRAP.MIN JS -->
<script   src="assets/js/bootstrap-select.min.js"></script><!-- FORM JS -->
<script   src="assets/js/jquery.bootstrap-touchspin.min.js"></script><!-- FORM JS -->
<script   src="assets/js/magnific-popup.min.js"></script><!-- MAGNIFIC-POPUP JS -->
<script   src="assets/js/waypoints.min.js"></script><!-- WAYPOINTS JS -->
<script   src="assets/js/counterup.min.js"></script><!-- COUNTERUP JS -->
<script   src="assets/js/waypoints-sticky.min.js"></script><!-- COUNTERUP JS -->
<script   src="assets/js/isotope.pkgd.min.js"></script><!-- MASONRY  -->
<script   src="assets/js/imagesloaded.pkgd.min.js"></script><!-- MASONRY  -->
<script   src="assets/js/owl.carousel.min.js"></script><!-- OWL  SLIDER  -->
<script   src="assets/js/scrolla.min.js"></script><!-- ON SCROLL CONTENT ANIMTE   --> 
<script   src="assets/js/custom.js"></script><!-- CUSTOM FUCTIONS  -->
<script   src="assets/js/shortcode.js"></script><!-- SHORTCODE FUCTIONS  -->
<script   src="assets/js/switcher.js"></script><!-- SWITCHER FUCTIONS  -->



<script>
    $(document).ready(function(){
        $('.circle-block-outer .nav-link').hover(function() {
            $(this).tab('show');
        });
    })
</script>

<!-- REVOLUTION JS FILES -->

<script  src="assets/js/jquery.themepunch.tools.min.js"></script>
<script  src="assets/js/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 5.0 EXTENSIONS  (Load Extensions only on Local File Systems !  The following part can be removed on Server for On Demand Loading) -->	
<script  src="assets/js/revolution-plugin.js"></script>

<!-- REVOLUTION SLIDER FUNCTION  ===== -->
<script   src="assets/js/rev-script-1.js"></script>
</body>
</html>

8. Now guys here is the github link and from where we will get the all the assets like images, css, js and fonts:

GitHub Link

Friends in the end must run ng serve command into your terminal to run the angular 17 project(localhost:4200).

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

April 9, 2024

Angular 17 Chat & Discussion Template Working Demo

Hello everyone, if you’re in search of a responsive and user-friendly chat application template in Angular 17+, then you’ve come to the right place! Today this blog post I will show you Angular 17 Chat & Discussion Template Working Demo.

Live Demo

Multiple views:

Key Features:

Built on Angular 17 + Bootstrap 5
CSS3 & HTML5
Clean & minimal design
Cross-browser tested & optimized
Full-width layouts
Gulp based workflow
Opinionated code formatter Prettier for a consistent codebase
Modular markup based on Cards & Utility classes
Interactive and functional components and pages
FontAwesome 5 + material icons + feather icon
ApexCharts
W3C validated HTML pages

Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:

Guys now here is the complete code snippet with GitHub link following assets(css, js, fonts and images):

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angularadmin //Create new Angular Project

cd angularadmin // Go inside the Angular Project Folder

2. Guys now we need to run below commands to create components to our angular application:

ng g c chat

3. Now guys we need to add below code into our scr/app/app.component.html file for main output:

<router-outlet></router-outlet>

4. Now guys we need to add below code into our scr/app/chat/chat.component.ts file making routing working:

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.css'
})
export class DashboardComponent {

}

5. Now guys we need to add below code into our scr/app/chat/chat.component.html file:

<div class="layout-wrapper d-lg-flex">

    <!-- Start left sidebar-menu -->
    <div class="side-menu flex-lg-column">
        <!-- LOGO -->
        <div class="navbar-brand-box">
            <a href="#" class="logo logo-dark">
                <span class="logo-sm">
                    <img src="assets/images/logo.png" alt="logo" height="30">
                </span>
            </a>

            <a href="#" class="logo logo-light">
                <span class="logo-sm">
                    <span class="logo-sm">
                        <img src="assets/images/logo.png" alt="logo" height="30">
                    </span>
                </span>
            </a>
        </div>
        <!-- end navbar-brand-box -->

        <!-- Start side-menu nav -->
        <div class="flex-lg-column my-0 sidemenu-navigation">
            <ul class="nav nav-pills side-menu-nav" role="tablist">
                <li class="nav-item d-none d-lg-block">
                    <a class="nav-link" id="pills-user-tab" data-bs-toggle="pill" href="#pills-user" role="tab">
                        <i class="ri-user-3-line"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" id="pills-chat-tab" data-bs-toggle="pill" href="#pills-chat" role="tab">
                        <i class="ri-discuss-line"></i>
                        <span class="badge bg-danger fs-11 rounded-pill sidenav-item-badge">9</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-contacts-tab" data-bs-toggle="pill" href="#pills-contacts" role="tab">
                        <i class="ri-contacts-book-line"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-bookmark-tab" data-bs-toggle="pill" href="#pills-bookmark" role="tab">
                        <i class="ri-bookmark-3-line"></i>
                    </a>
                </li>
                <li class="nav-item d-none d-lg-block">
                    <a class="nav-link" id="pills-setting-tab" data-bs-toggle="pill" href="#pills-setting" role="tab">
                        <i class="ri-settings-4-line"></i>
                    </a>
                </li>
                <li class="nav-item mt-lg-auto">
                    <a class="nav-link light-dark-mode" href="#">
                        <i class="ri-moon-line"></i>
                    </a>
                </li>
                <li class="nav-item dropdown profile-user-dropdown">
                    <a class="nav-link dropdown-toggle bg-light" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img src="assets/images/users/avatar-1.jpg" alt="" class="profile-user rounded-circle">
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item d-flex align-items-center justify-content-between" id="pills-user-tab" data-bs-toggle="pill" href="#pills-user" role="tab">Profile <i class="bx bx-user-circle text-muted ms-1"></i></a>
                        <a class="dropdown-item d-flex align-items-center justify-content-between" id="pills-setting-tab" data-bs-toggle="pill" href="#pills-setting" role="tab">Setting <i class="bx bx-cog text-muted ms-1"></i></a>
                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Change Password <i class="bx bx-lock-open text-muted ms-1"></i></a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Log out <i class="bx bx-log-out-circle text-muted ms-1"></i></a>
                    </div>
                </li>
            </ul>
        </div>
        <!-- end side-menu nav -->
    </div>
    <!-- end left sidebar-menu -->

    <!-- start chat-leftsidebar -->
    <div class="chat-leftsidebar">

        <div class="tab-content">
            <!-- Start Profile tab-pane -->
            <div class="tab-pane" id="pills-user" role="tabpanel" aria-labelledby="pills-user-tab">
                <!-- Start profile content -->
                <div>
                    <div class="user-profile-img">
                        <img src="assets/images/4902908.jpg" class="profile-img" style="height: 160px;" alt="">
                        <div class="overlay-content">
                            <div>
                                <div class="user-chat-nav p-2 ps-3">

                                    <div class="d-flex w-100 align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="text-white mb-0">My Profile</h5>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <div class="dropdown">
                                                <button class="btn nav-btn text-white dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class='bx bx-dots-vertical-rounded'></i>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Info <i class="bx bx-info-circle ms-2 text-muted"></i></a>
                                                    <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Setting <i class="bx bx-cog text-muted ms-2"></i></a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Help <i class="bx bx-help-circle ms-2 text-muted"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-center border-bottom border-bottom-dashed pt-2 pb-4 mt-n5 position-relative">
                        <div class="mb-lg-3 mb-2">
                            <img src="assets/images/users/avatar-1.jpg" class="rounded-circle avatar-lg img-thumbnail" alt="">
                        </div>

                        <h5 class="fs-17 mb-1 text-truncate">Jassa Rich</h5>
                        <p class="text-muted fs-14 text-truncate mb-0">Front end Developer</p>
                    </div>
                    <!-- End profile user -->

                    <!-- Start user-profile-desc -->
                    <div class="p-4 profile-desc" data-simplebar>
                        <div class="text-muted">
                            <p class="mb-3">A professional profile is an introductory section on your resume that highlights your
                                relevant qualifications and skills.</p>
                        </div>

                        <div class="border-bottom border-bottom-dashed mb-4 pb-2">
                            <div class="d-flex py-2 align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <i class="bx bx-user align-middle text-muted fs-19"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <p class="mb-0">Jassa Rich</p>
                                </div>
                            </div>

                            <div class="d-flex py-2 align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <i class="ri-phone-line align-middle text-muted fs-19"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <p class="mb-0">+(365) 1456 12584</p>
                                </div>
                            </div>

                            <div class="d-flex py-2 align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <i class="ri-message-2-line align-middle text-muted fs-19"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <p class="fw-medium mb-0">therichpost.com</p>
                                </div>
                            </div>

                            <div class="d-flex py-2 align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <i class="ri-map-pin-2-line align-middle text-muted fs-19"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <p class="mb-0">California, USA</p>
                                </div>
                            </div>
                        </div>

                        <div class="border-bottom border-bottom-dashed mb-4 pb-4">
                            <div class="d-flex align-items-center mb-3">
                                <div class="flex-grow-1">
                                    <h5 class="fs-12 text-muted text-uppercase mb-0">Media</h5>
                                </div>
                                <div class="flex-shrink-0">
                                    <a href="#" class="fw-medium fs-12 d-block">Show all</a>
                                </div>
                            </div>
                            <div class="profile-media-img">
                                <div class="media-img-list">
                                    <a href="#">
                                        <img src="assets/images/small/img-1.jpg" alt="media img" class="img-fluid">
                                    </a>
                                </div>
                                <div class="media-img-list">
                                    <a href="#">
                                        <img src="assets/images/small/img-2.jpg" alt="media img" class="img-fluid">
                                    </a>
                                </div>
                                <div class="media-img-list">
                                    <a href="#">
                                        <img src="assets/images/small/img-4.jpg" alt="media img" class="img-fluid">
                                        <div class="bg-overlay">+ 15</div>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-center mb-3">
                                <div class="flex-grow-1">
                                    <h5 class="fs-12 text-muted text-uppercase mb-0">Attached Files</h5>
                                </div>
                                <div class="flex-shrink-0">
                                    <a href="#" class="fw-medium fs-12 d-block">Show all</a>
                                </div>
                            </div>
                            <div>
                                <div class="card p-2 border border-dashed mb-2">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 ms-1 me-3">
                                            <img src="assets/images/pdf-file.png" alt="" class="avatar-xs">
                                        </div>
                                        <div class="flex-grow-1 overflow-hidden">
                                            <h5 class="fs-14 text-truncate mb-1">design-phase-1-approved.pdf</h5>
                                            <p class="text-muted fs-13 mb-0">12.5 MB</p>
                                        </div>

                                        <div class="flex-shrink-0 ms-3">
                                            <div class="d-flex gap-2">
                                                <div>
                                                    <a href="#" class="text-muted px-1">
                                                        <i class="bx bxs-download"></i>
                                                    </a>
                                                </div>
                                                <div class="dropdown">
                                                    <a class="dropdown-toggle text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <i class="bx bx-dots-horizontal-rounded"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Share <i class="bx bx-share-alt ms-2 text-muted"></i></a>
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Bookmark <i class="bx bx-bookmarks text-muted ms-2"></i></a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card p-2 border border-dashed mb-2">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 ms-1 me-3">
                                            <img src="assets/images/image-file.png" alt="" class="avatar-xs">
                                        </div>
                                        <div class="flex-grow-1 overflow-hidden">
                                            <h5 class="fs-14 text-truncate mb-1">Image-1.jpg</h5>
                                            <p class="text-muted fs-13 mb-0">4.2 MB</p>
                                        </div>

                                        <div class="flex-shrink-0 ms-3">
                                            <div class="d-flex gap-2">
                                                <div>
                                                    <a href="#" class="text-muted px-1">
                                                        <i class="bx bxs-download"></i>
                                                    </a>
                                                </div>
                                                <div class="dropdown">
                                                    <a class="dropdown-toggle text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <i class="bx bx-dots-horizontal-rounded"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Share <i class="bx bx-share-alt ms-2 text-muted"></i></a>
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Bookmark <i class="bx bx-bookmarks text-muted ms-2"></i></a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card p-2 border border-dashed mb-2">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 ms-1 me-3">
                                            <img src="assets/images/image-file.png" alt="" class="avatar-xs">
                                        </div>
                                        <div class="flex-grow-1 overflow-hidden">
                                            <h5 class="fs-14 text-truncate mb-1">Image-2.jpg</h5>
                                            <p class="text-muted fs-13 mb-0">3.1 MB</p>
                                        </div>

                                        <div class="flex-shrink-0 ms-3">
                                            <div class="d-flex gap-2">
                                                <div>
                                                    <a href="#" class="text-muted px-1">
                                                        <i class="bx bxs-download"></i>
                                                    </a>
                                                </div>
                                                <div class="dropdown">
                                                    <a class="dropdown-toggle text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <i class="bx bx-dots-horizontal-rounded"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Share <i class="bx bx-share-alt ms-2 text-muted"></i></a>
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Bookmark <i class="bx bx-bookmarks text-muted ms-2"></i></a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card p-2 border border-dashed mb-0">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 ms-1 me-3">
                                            <img src="assets/images/zip-file.png" alt="" class="avatar-xs">
                                        </div>
                                        <div class="flex-grow-1 overflow-hidden">
                                            <h5 class="fs-14 text-truncate mb-1">Landing-A.zip</h5>
                                            <p class="text-muted fs-13 mb-0">6.7 MB</p>
                                        </div>

                                        <div class="flex-shrink-0 ms-3">
                                            <div class="d-flex gap-2">
                                                <div>
                                                    <a href="#" class="text-muted px-1">
                                                        <i class="bx bxs-download"></i>
                                                    </a>
                                                </div>
                                                <div class="dropdown">
                                                    <a class="dropdown-toggle text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <i class="bx bx-dots-horizontal-rounded"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Share <i class="bx bx-share-alt ms-2 text-muted"></i></a>
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Bookmark <i class="bx bx-bookmarks text-muted ms-2"></i></a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- end user-profile-desc -->
                </div>
                <!-- End profile content -->
            </div>
            <!-- End Profile tab-pane -->

            <!-- Start chats tab-pane -->
            <div class="tab-pane show active" id="pills-chat" role="tabpanel" aria-labelledby="pills-chat-tab">
                <!-- Start chats content -->
                <div>
                    <div class="px-4 pt-4">
                        <div class="d-flex align-items-start">
                            <div class="flex-grow-1">
                                <h4 class="mb-4">Messages <span class="text-primary fs-13">(128)</span></h4>
                            </div>
                        </div>
                        <form>
                            <div class="input-group search-panel mb-3">
                                <input type="text" class="form-control" id="searchChatUser" onkeyup="searchUser()"
                                    placeholder="Search here..." aria-label="Example text with button addon"
                                    aria-describedby="searchbtn-addon" autocomplete="off">
                                <button class="btn p-0" type="button" id="searchbtn-addon"><i
                                        class='bx bx-search align-middle'></i></button>
                            </div>
                        </form>
                    </div> <!-- .p-4 -->

                    <div class="chat-room-list" data-simplebar>
                        <!-- Start chat-message-list -->
                        <h5 class="mb-3 px-4 mt-4 fs-11 text-muted text-uppercase">Favourites</h5>

                        <div class="chat-message-list">
                            <ul class="list-unstyled chat-list chat-user-list" id="favourite-users">
                            </ul>
                        </div>

                        <div class="d-flex align-items-center px-4 mt-5 mb-2">
                            <div class="flex-grow-1">
                                <h4 class="mb-0 fs-11 text-muted text-uppercase">Direct Messages</h4>
                            </div>
                            <div class="flex-shrink-0">
                                <div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="New Message">

                                    <!-- Button trigger modal -->
                                    <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal"
                                        data-bs-target=".contactModal">
                                        <i class="bx bx-plus align-middle"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="chat-message-list">

                            <ul class="list-unstyled chat-list chat-user-list" id="usersList">
                            </ul>
                        </div>

                        <div class="d-flex align-items-center px-4 mt-5 mb-2">
                            <div class="flex-grow-1">
                                <h4 class="mb-0 fs-11 text-muted text-uppercase">Channels</h4>
                            </div>
                            <div class="flex-shrink-0">
                                <div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Create group">

                                    <!-- Button trigger modal -->
                                    <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal"
                                        data-bs-target="#addgroup-exampleModal">
                                        <i class="bx bx-plus align-middle"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="chat-message-list">

                            <ul class="list-unstyled chat-list chat-user-list mb-3" id="channelList">
                            </ul>
                        </div>
                        <!-- End chat-message-list -->
                    </div>

                </div>
                <!-- Start chats content -->
            </div>
            <!-- End chats tab-pane -->

            <!-- Start contacts tab-pane -->
            <div class="tab-pane" id="pills-contacts" role="tabpanel" aria-labelledby="pills-contacts-tab">
                <!-- Start Contact content -->
                <div>
                    <div class="px-4 pt-4">
                        <div class="d-flex align-items-start">
                            <div class="flex-grow-1">
                                <h4 class="mb-4">Contacts</h4>
                            </div>
                            <div class="flex-shrink-0">
                                <div>
                                    <!-- Button trigger modal -->
                                    <button type="button" class="btn btn-soft-success btn-sm" data-bs-toggle="modal" data-bs-target="#addContact-exampleModal">
                                        <i class="bx bx-plus"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <form>
                            <div class="input-group search-panel mb-4">
                                <input type="text" class="form-control bg-light border-0" id="searchContact" onkeyup="searchContacts()" placeholder="Search contacts..." aria-label="Search Contacts..." 
                                aria-describedby="button-searchcontactsaddon" autocomplete="off">
                                <button class="btn btn-light p-0" type="button" id="button-searchcontactsaddon"><i class='bx bx-search align-middle'></i></button>
                            </div>
                        </form>
                    </div>
                    <!-- end p-4 -->

                    <div class="chat-message-list chat-group-list" data-simplebar >
                        <div class="sort-contact">            
                        </div>
                    </div>
                    <!-- end contact lists -->
                </div>
                <!-- Start Contact content -->
            </div>
            <!-- End contacts tab-pane -->

            <!-- Start calls tab-pane -->
            <div class="tab-pane" id="pills-calls" role="tabpanel" aria-labelledby="pills-calls-tab">
                <!-- Start Contact content -->
                <div>
                    <div class="px-4 pt-4">
                        <div class="d-flex align-items-start">
                            <div class="flex-grow-1">
                                <h4 class="mb-3">Calls</h4>
                            </div>
                        </div>
                    </div>
                    <!-- end p-4 -->

                    <!-- Start contact lists -->
                    <div class="chat-message-list chat-call-list" data-simplebar>
                        <ul class="list-unstyled chat-list" id="callList">      
                  
                        </ul>
                    </div>
                    <!-- end contact lists -->
                </div>
                <!-- Start Contact content -->
            </div>
            <!-- End calls tab-pane -->

            <!-- Start bookmark tab-pane -->
            <div class="tab-pane" id="pills-bookmark" role="tabpanel" aria-labelledby="pills-bookmark-tab">
                <!-- Start Contact content -->
                <div>
                    <div class="px-4 pt-4">
                        <div class="d-flex align-items-start">
                            <div class="flex-grow-1">
                                <h4 class="mb-3">Bookmark</h4>
                            </div>
                        </div>
                        <form>
                            <div class="input-group search-panel mb-3">
                                <input type="text" class="form-control bg-light border-0" id="searchbookmark" onkeyup="searchBookmark()" placeholder="Search here..." aria-label="Example text with button addon"
                                    aria-describedby="searchbookmark-addon" autocomplete="off">
                                <button class="btn btn-light p-0" type="button" id="searchbookmark-addon"><i
                                        class='bx bx-search align-middle'></i></button>
                            </div>
                        </form>
                    </div>
                    <!-- end p-4 -->

                    <!-- Start contact lists -->
                    <div class="chat-message-list chat-bookmark-list" id="chat-bookmark-list" data-simplebar>
                        <ul class="list-unstyled chat-list">
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/pdf-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">design-phase-1-approved.pdf</a>
                                        </h5>
                                        <p class="text-muted text-truncate fs-13 mb-0">12.5 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open
                                                    <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit
                                                    <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                    href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/link-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Bg Pattern</a></h5>
                                        <p class="text-muted text-truncate fs-13 mb-0">https://bgpattern.com/</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open
                                                    <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit
                                                    <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                    href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/image-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Image-001.jpg</a></h5>
                                        <p class="text-muted text-truncate fs-13 mb-0">4.2 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open
                                                    <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit
                                                    <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                    href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/link-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Images</a></h5>
                                        <p class="text-muted text-truncate fs-13 mb-0">https://images123.com/</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open
                                                    <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit
                                                    <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                    href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/link-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Bg Gradient</a></h5>
                                        <p class="text-muted text-truncate fs-13 mb-0">https://bggradient.com/</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open
                                                    <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit
                                                    <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                    href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/image-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Image-012.jpg</a></h5>
                                        <p class="text-muted text-truncate fs-13 mb-0">3.1 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open
                                                    <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit
                                                    <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                    href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/zip-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">analytics dashboard.zip</a></h5>
                                        <p class="text-muted text-truncate fs-13 mb-0">6.7 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open
                                                    <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit
                                                    <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                    href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/image-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Image-031.jpg</a></h5>
                                        <p class="text-muted text-truncate fs-13 mb-0">4.2 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open
                                                    <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit
                                                    <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                    href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/txt-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Changelog.txt</a></h5>
                                        <p class="text-muted text-truncate fs-13 mb-0">6.7 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open
                                                    <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit
                                                    <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                    href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/zip-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Widgets.zip</a></h5>
                                        <p class="text-muted text-truncate fs-13 mb-0">6.7 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open
                                                    <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit
                                                    <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                    href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/image-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">logo-light.png</a></h5>
                                        <p class="text-muted text-truncate fs-13 mb-0">4.2 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open
                                                    <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit
                                                    <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                    href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/image-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Image-2.jpg</a></h5>
                                        <p class="text-muted text-truncate fs-13 mb-0">3.1 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open
                                                    <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit
                                                    <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                    href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/zip-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Landing-A.zip</a></h5>
                                        <p class="text-muted text-truncate fs-13 mb-0">6.7 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open
                                                    <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit
                                                    <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                    href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                    <!-- end contact lists -->
                </div>
                <!-- Start Contact content -->
            </div>
            <!-- End bookmark tab-pane -->

            <!-- Start settings tab-pane -->
            <div class="tab-pane" id="pills-setting" role="tabpanel" aria-labelledby="pills-setting-tab">
                <!-- Start Settings content -->
                <div>
                    <div class="user-profile-img">
                        <img src="assets/images/small/img-4.jpg" class="profile-img profile-foreground-img" style="height: 160px;" alt="">
                        <div class="overlay-content">
                            <div>
                                <div class="user-chat-nav p-3">

                                    <div class="d-flex w-100 align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="text-white mb-0">Settings</h5>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <div class="avatar-xs p-0 rounded-circle profile-photo-edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="bottom" title="Change Background">
                                                <input id="profile-foreground-img-file-input" type="file" class="profile-foreground-img-file-input">
                                                <label for="profile-foreground-img-file-input" class="profile-photo-edit avatar-xs">
                                                    <span class="avatar-title rounded-circle bg-light text-body">
                                                        <i class="bx bxs-pencil"></i>
                                                    </span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-center p-3 p-lg-4 border-bottom pt-2 pt-lg-2 mt-n5 position-relative">
                        <div class="mb-3 profile-user">
                            <img src="assets/images/users/avatar-1.jpg" class="rounded-circle avatar-lg img-thumbnail user-profile-image" alt="user-profile-image">
                            <div class="avatar-xs p-0 rounded-circle profile-photo-edit">
                                <input id="profile-img-file-input" type="file" class="profile-img-file-input">
                                <label for="profile-img-file-input" class="profile-photo-edit avatar-xs">
                                    <span class="avatar-title rounded-circle bg-light text-body">
                                        <i class="bx bxs-camera"></i>
                                    </span>
                                </label>
                            </div>
                        </div>

                        <h5 class="fs-16 mb-1 text-truncate"></h5>

                        <div class="dropdown d-inline-block">
                            <a class="text-muted dropdown-toggle d-block" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="bx bxs-circle text-success fs-10 align-middle"></i> Active <i class="mdi mdi-chevron-down"></i>
                            </a>

                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#"><i class="bx bxs-circle text-success fs-10 me-1 align-middle"></i>
                                    Active</a>
                                <a class="dropdown-item" href="#"><i class="bx bxs-circle text-warning fs-10 me-1 align-middle"></i>
                                    Away</a>
                                <a class="dropdown-item" href="#"><i class="bx bxs-circle text-danger fs-10 me-1 align-middle"></i> Do
                                    not disturb</a>
                            </div>
                        </div>


                    </div>
                    <!-- End profile user -->

                    <!-- Start User profile description -->
                    <div class="user-setting" data-simplebar>
                        <div id="settingprofile" class="accordion accordion-flush">
                            <div class="accordion-item">
                                <div class="accordion-header" id="headerpersonalinfo">
                                    <a class="accordion-button fs-14 fw-medium" data-bs-toggle="collapse" href="#personalinfo" aria-expanded="true" aria-controls="personalinfo">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0 me-3 avatar-xs">
                                                <div class="avatar-title bg-info-subtle 
                 text-info text-info rounded">
                                                    <i class="bx bxs-user"></i>
                                                </div>
                                            </div>
                                            Personal Info
                                        </div>
                                    </a>
                                </div>
                                <div id="personalinfo" class="accordion-collapse collapse show" aria-labelledby="headerpersonalinfo" data-bs-parent="#settingprofile">
                                    <div class="accordion-body edit-input">
                                        <div class="float-end">
                                            <a href="#" class="badge bg-light text-muted" id="user-profile-edit-btn"> <i class="bx bxs-pencil align-middle" id="edit-icon"></i>
                                            </a>
                                        </div>

                                        <div>
                                            <label for="exampleInputPassword1" class="form-label text-muted fs-13">Name</label>
                                            <input type="text" class="form-control" id="exampleInputPassword1" value="Jassa Rich" placeholder="Enter name" disabled>
                                        </div>

                                        <div>
                                            <label for="exampleInputPassword1" class="form-label text-muted fs-13">Email</label>
                                            <input type="email" class="form-control" id="exampleInputPassword1" value="therichposts@gmail.com" placeholder="Enter email" disabled>
                                        </div>

                                        <div class="mt-3">
                                            <label for="exampleInputPassword1" class="form-label text-muted fs-13">Phone No</label>
                                            <input type="text" class="form-control" id="exampleInputPassword1" value="+(000) 000 0000" placeholder="Enter phone no" disabled>
                                        </div>

                                        <div class="mt-3">
                                            <label for="exampleInputPassword1" class="form-label text-muted fs-13">Location</label>
                                            <input type="text" class="form-control" id="exampleInputPassword1" value="Punjab, USA" placeholder="Location" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end personal info card -->

                            <div class="accordion-item">
                                <div class="accordion-header" id="privacy1">
                                    <a class="accordion-button fs-14 fw-medium collapsed" data-bs-toggle="collapse" href="#privacy" aria-expanded="false" aria-controls="privacy">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0 me-3 avatar-xs">
                                                <div class="avatar-title bg-info-subtle 
                 text-info text-info rounded">
                                                    <i class="bx bxs-lock"></i>
                                                </div>
                                            </div>
                                            Privacy
                                        </div>
                                    </a>
                                </div>
                                <div id="privacy" class="accordion-collapse collapse" aria-labelledby="privacy1" data-bs-parent="#settingprofile">
                                    <div class="accordion-body">
                                        <h6 class="mb-3">Who can see my personal info</h6>
                                        <ul class="list-unstyled vstack gap-4 mb-0">
                                            <li>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1 overflow-hidden">
                                                        <h5 class="fs-13 mb-0 text-truncate">Profile photo</h5>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-2">
                                                        <select class="form-select form-select-sm">
                                                            <option value="Everyone" selected>Everyone</option>
                                                            <option value="Selected">Selected</option>
                                                            <option value="Nobody">Nobody</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1 overflow-hidden">
                                                        <h5 class="fs-13 mb-0 text-truncate">Status</h5>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-2">
                                                        <select class="form-select form-select-sm">
                                                            <option value="Everyone" selected>Everyone</option>
                                                            <option value="Selected">Selected</option>
                                                            <option value="Nobody">Nobody</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1 overflow-hidden">
                                                        <h5 class="fs-13 mb-0 text-truncate">Groups</h5>

                                                    </div>
                                                    <div class="flex-shrink-0 ms-2">
                                                        <select class="form-select form-select-sm">
                                                            <option value="Everyone" selected>Everyone</option>
                                                            <option value="Selected">Selected</option>
                                                            <option value="Nobody">Nobody</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1 overflow-hidden">
                                                        <h5 class="fs-13 mb-0 text-truncate">Last seen</h5>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-2">
                                                        <div class="form-check form-switch">
                                                            <input type="checkbox" class="form-check-input" id="privacy-lastseenSwitch" checked>
                                                            <label class="form-check-label" for="privacy-lastseenSwitch"></label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1 overflow-hidden">
                                                        <h5 class="fs-13 mb-0 text-truncate">Read receipts</h5>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-2">
                                                        <div class="form-check form-switch">
                                                            <input type="checkbox" class="form-check-input" id="privacy-readreceiptSwitch" checked>
                                                            <label class="form-check-label" for="privacy-readreceiptSwitch"></label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- end privacy card -->

                            <div class="accordion-item">
                                <div class="accordion-header" id="headersecurity">
                                    <a class="accordion-button fs-14 fw-medium collapsed" data-bs-toggle="collapse" href="#collapsesecurity" aria-expanded="false" aria-controls="collapsesecurity">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0 me-3 avatar-xs">
                                                <div class="avatar-title bg-info-subtle 
                 text-info text-info rounded">
                                                    <i class="bx bxs-check-shield"></i>
                                                </div>
                                            </div>
                                            Security
                                        </div>
                                    </a>
                                </div>
                                <div id="collapsesecurity" class="accordion-collapse collapse" aria-labelledby="headersecurity" data-bs-parent="#settingprofile">
                                    <div class="accordion-body">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item p-0">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1 overflow-hidden">
                                                        <h5 class="fs-13 mb-0 text-truncate">Show security notification</h5>

                                                    </div>
                                                    <div class="flex-shrink-0 ms-2">
                                                        <div class="form-check form-switch">
                                                            <input type="checkbox" class="form-check-input" id="security-notificationswitch">
                                                            <label class="form-check-label" for="security-notificationswitch"></label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- end security card -->



                            <div class="accordion-item">
                                <div class="accordion-header" id="headerhelp">
                                    <button class="accordion-button fs-14 fw-medium collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsehelp" aria-expanded="false" aria-controls="collapsehelp">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0 me-3 avatar-xs">
                                                <div class="avatar-title bg-info-subtle 
                 text-info text-info rounded">
                                                    <i class="bx bxs-help-circle"></i>
                                                </div>
                                            </div>
                                            Help
                                        </div>
                                    </button>
                                </div>
                                <div id="collapsehelp" class="accordion-collapse collapse" aria-labelledby="headerhelp" data-bs-parent="#settingprofile">
                                    <div class="accordion-body">
                                        <ul class="list-unstyled vstack gap-4 mb-0">
                                            <li>
                                                <h5 class="fs-13 mb-0"><a href="#" class="text-body d-block">FAQs</a></h5>
                                            </li>
                                            <li>
                                                <h5 class="fs-13 mb-0"><a href="#" class="text-body d-block">Contact</a></h5>
                                            </li>
                                            <li>
                                                <h5 class="fs-13 mb-0"><a href="#" class="text-body d-block">Terms & Privacy policy</a>
                                                </h5>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end profile-setting-accordion -->
                    </div>
                    <!-- End User profile description -->
                </div>
                <!-- Start Settings content -->
            </div>
            <!-- End settings tab-pane -->
        </div>
        <!-- end tab content -->
    </div>
    <!-- end chat-leftsidebar -->

    <!-- Start User chat -->
    <div class="user-chat w-100 overflow-hidden">

        <div class="chat-content d-lg-flex">
            <!-- start chat conversation section -->
            <div class="w-100 overflow-hidden position-relative">
                <!-- conversation user -->
                <div id="users-chat" class="position-relative">
                    <div class="py-3 user-chat-topbar">
                        <div class="row align-items-center">
                            <div class="col-sm-4 col-8">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 d-block d-lg-none me-3">
                                        <a href="javascript: void(0);" class="btn btn-primary user-chat-remove fs-18 p-1"><i class="bx bx-chevron-left align-middle"></i></a>
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0 chat-user-img online user-own-img align-self-center me-3 ms-0">
                                                <img src="assets/images/users/avatar-2.jpg" class="rounded-circle avatar-sm" alt="">
                                                <span class="user-status"></span>
                                            </div>
                                            <div class="flex-grow-1 overflow-hidden">
                                                <h6 class="text-truncate mb-0 fs-18"><a href="#" class="user-profile-show text-reset">Victoria Lane</a></h6>
                                                <p class="text-truncate text-muted mb-0"><small>Online</small></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-8 col-4">
                                <ul class="list-inline user-chat-nav text-end mb-0">
                                    <li class="list-inline-item">
                                        <div class="dropdown">
                                            <button class="btn nav-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class='bx bx-search'></i>
                                            </button>
                                            <div class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-lg">
                                                <div class="search-box p-2">
                                                    <input type="text" class="form-control" placeholder="Search.." id="searchChatMessage">
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0">
                                        <button type="button" class="btn nav-btn" data-bs-toggle="modal" data-bs-target=".audiocallModal">
                                            <i class='bx bxs-phone-call'></i>
                                        </button>
                                    </li>

                                    <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0">
                                        <button type="button" class="btn nav-btn" data-bs-toggle="modal" data-bs-target=".videocallModal">
                                            <i class='bx bx-video'></i>
                                        </button>
                                    </li>

                                    <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0">
                                        <button type="button" class="btn nav-btn" data-bs-toggle="modal" data-bs-target=".pinnedtabModal">
                                            <i class='bx bx-bookmark'></i>
                                        </button>
                                    </li>

                                    <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0">
                                        <button type="button" class="btn nav-btn user-profile-show">
                                            <i class='bx bxs-info-circle'></i>
                                        </button>
                                    </li>

                                    <li class="list-inline-item">
                                        <div class="dropdown">
                                            <button class="btn nav-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class='bx bx-dots-vertical-rounded'></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none user-profile-show" href="#">View Profile <i class="bx bx-user text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none" href="#" data-bs-toggle="modal" data-bs-target=".audiocallModal">Audio <i class="bx bxs-phone-call text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none" href="#" data-bs-toggle="modal" data-bs-target=".videocallModal">Video <i class="bx bx-video text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Archive <i class="bx bx-archive text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Muted <i class="bx bx-microphone-off text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Delete <i class="bx bx-trash text-muted"></i></a>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0">
                                        <!-- Style switcher -->
                                        <a data-bs-toggle="offcanvas" href="#theme-settings-offcanvas" class="settings text-success rounded fs-5 btn nav-btn"><i class="mdi mdi-cog mdi-spin"></i></a>
                                        <!-- end switcher-->


                                        <div class="offcanvas offcanvas-end text-start" tabindex="-1" id="theme-settings-offcanvas" aria-labelledby="offcanvasExampleLabel">
                                            <div class="offcanvas-header bg-info-subtle 
                                         text-info">
                                                <h5 class="offcanvas-title" id="theme-settings-offcanvasLabel">Theme Customizer</h5>
                                                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                            </div>
                                            <div class="offcanvas-body customizer-palettes">
                                                <div class="row g-3">
                                                    <div class="col-lg-12">
                                                        <div class="mt-3">
                                                            <h6 class="text-muted text-uppercase fs-13 mb-0">Select Custom Colors</h6>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="form-check card-radio">
                                                            <input id="customizer-color01" name="bgcolor-radio" type="radio" value="color01" class="form-check-input theme-color">
                                                            <label class="form-check-label customizer-color01 p-0 avatar-md w-100" for="customizer-color01"></label>
                                                        </div>
                                                        <h5 class="fs-13 text-center mt-2">Color-01</h5>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="form-check card-radio">
                                                            <input id="customizer-color02" name="bgcolor-radio" type="radio" value="color02" class="form-check-input theme-color" checked>
                                                            <label class="form-check-label customizer-color02 p-0 avatar-md w-100" for="customizer-color02"></label>
                                                        </div>
                                                        <h5 class="fs-13 text-center mt-2">Color-02</h5>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="form-check card-radio">
                                                            <input id="customizer-color03" name="bgcolor-radio" type="radio" value="color03" class="form-check-input theme-color">
                                                            <label class="form-check-label customizer-color03 p-0 avatar-md w-100" for="customizer-color03"></label>
                                                        </div>
                                                        <h5 class="fs-13 text-center mt-2">Color-03</h5>
                                                    </div>
                                                    <!-- end col -->
                                                    <div class="col-6">
                                                        <div class="form-check card-radio">
                                                            <input id="customizer-color04" name="bgcolor-radio" type="radio" value="color04" class="form-check-input theme-color">
                                                            <label class="form-check-label customizer-color04 p-0 avatar-md w-100" for="customizer-color04"></label>
                                                        </div>
                                                        <h5 class="fs-13 text-center mt-2">Color-04</h5>
                                                    </div>
                                                    <!-- end col -->
                                                    <div class="col-6">
                                                        <div class="form-check card-radio">
                                                            <input id="customizer-color05" name="bgcolor-radio" type="radio" value="color05" class="form-check-input theme-color">
                                                            <label class="form-check-label customizer-color05 p-0 avatar-md w-100" for="customizer-color05"></label>
                                                        </div>
                                                        <h5 class="fs-13 text-center mt-2">Color-05</h5>
                                                    </div>
                                                    <!-- end col -->
                                                    <div class="col-6">
                                                        <div class="form-check card-radio">
                                                            <input id="customizer-color06" name="bgcolor-radio" type="radio" value="color06" class="form-check-input theme-color">
                                                            <label class="form-check-label customizer-color06 p-0 avatar-md w-100" for="customizer-color06"></label>
                                                        </div>
                                                        <h5 class="fs-13 text-center mt-2">Color-06</h5>
                                                    </div>
                                                    <!-- end col -->
                                                    <div class="col-6">
                                                        <div class="form-check card-radio">
                                                            <input id="customizer-color07" name="bgcolor-radio" type="radio" value="color07" class="form-check-input theme-color">
                                                            <label class="form-check-label customizer-color07 p-0 avatar-md w-100" for="customizer-color07"></label>
                                                        </div>
                                                        <h5 class="fs-13 text-center mt-2">Color-07</h5>
                                                    </div>
                                                    <!-- end col -->
                                                </div>
                                                <!--end row-->
                                                <div class="row mt-4">
                                                    <div class="col-lg-12">
                                                        <div class="d-flex mb-3">
                                                            <h6 class="flex-grow-1 text-muted text-uppercase fs-13 mb-0">Select Custome Color</h6>
                                                        </div>
                                                    </div>
                                                    <!--end col-->
                                                    <div class="col-lg-6">
                                                        <div class="custom-colors-picker">
                                                            <div class="colorpicker-primary"></div>
                                                        </div>
                                                        <h5 class="fs-13 text-center mt-2">Select Color</h5>
                                                    </div>
                                                    <!--end col-->
                                                </div>
                                                <!--end row-->
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                    <!-- end chat user head -->

                    <!-- start chat conversation -->

                    <div class="chat-conversation p-3 p-lg-4 " id="chat-conversation" data-simplebar>
                        <ul class="list-unstyled chat-conversation-list" id="users-conversation">
                        </ul>

                        <!-- <div class="chat-list left" id="10">
                            <div class="conversation-list">
                                <div class="chat-avatar">
                                    <img src="assets/images/users/avatar-2.jpg" alt="">
                                </div>
                                <div class="user-chat-content">
                                    <div class="ctext-wrap">
                                        <div class="message-img mb-0">
                                            <div class="message-img-list">
                                                <div>
                                                    <iframe src="https://www.youtube.com/embed/PHcgN1GTjdU" title="YouTube video"
                                                        class="w-100 rounded" autoplay allowfullscreen></iframe>
                                                </div>

                                                <div class="message-img-link">
                                                    <ul class="list-inline mb-0">
                                                        <li class="list-inline-item dropdown">
                                                            <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                                                aria-haspopup="true" aria-expanded="false">
                                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                                            </a>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                                    href="assets/images/small/img-1.jpg" download="">
                                                                    Download <i class="bx bx-download ms-2 text-muted"></i>
                                                                </a>
                                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                                    href="#" data-bs-toggle="collapse" data-bs-target=".replyCollapse">
                                                                    Reply <i class="bx bx-share ms-2 text-muted"></i>
                                                                </a>
                                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                                    href="#" data-bs-toggle="modal" data-bs-target=".forwardModal">
                                                                    Forward <i class="bx bx-share-alt ms-2 text-muted"></i>
                                                                </a>
                                                                <a class="dropdown-item d-flex align-items-center justify-content-between"
                                                                    href="#">
                                                                    Bookmark <i class="bx bx-bookmarks text-muted ms-2"></i>
                                                                </a>
                                                                <a class="dropdown-item d-flex align-items-center justify-content-between delete-image"
                                                                    href="#">
                                                                    Delete <i class="bx bx-trash ms-2 text-muted"></i>
                                                                </a>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="conversation-name">
                                        <small class="text-muted time">11:45 am</small>
                                        <span class="text-success check-message-icon"><i class="bx bx-check-double"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="chat-list left" id="11">
                            <div class="conversation-list">
                                <div class="chat-avatar">
                                    <img src="assets/images/users/avatar-2.jpg" alt="">
                                </div>
                                <div class="user-chat-content">
                                    <div class="ctext-wrap">
                                        <div class="message-img mb-0">
                                            <div class="message-img-list">
                                                <audio controls>
                                                    <source src="http://w3codegenerator.com/audio/audio.mp3" type="audio/mpeg">
                                                </audio>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="conversation-name">
                                        <small class="text-muted time">11:45 am</small>
                                        <span class="text-success check-message-icon"><i class="bx bx-check-double"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                    </div>

                    <div class="alert alert-warning alert-dismissible copyclipboard-alert px-4 fade show" id="copyClipBoard" role="alert">
                        Message copied
                    </div>
                    <!-- end chat conversation end -->
                </div>



                <!-- conversation group -->
                <div id="channel-chat" class="position-relative">
                    <div class="py-3 user-chat-topbar">
                        <div class="row align-items-center">
                            <div class="col-sm-4 col-8">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 d-block d-lg-none me-3">
                                        <a href="javascript: void(0);" class="btn btn-primary user-chat-remove fs-18 p-1"><i class="bx bx-chevron-left align-middle"></i></a>
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0 chat-user-img online user-own-img align-self-center me-3">
                                                <img src="assets/images/users/user-dummy-img.jpg" class="rounded-circle avatar-sm" alt="">
                                            </div>
                                            <div class="flex-grow-1 overflow-hidden">
                                                <h6 class="text-truncate mb-0 fs-18"><a href="#" class="user-profile-show text-reset">Design Phase 2</a></h6>
                                                <p class="text-truncate text-muted mb-0"><small>24 Members</small></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-8 col-4">
                                <ul class="list-inline user-chat-nav text-end mb-0">
                                    <li class="list-inline-item">
                                        <div class="dropdown">
                                            <button class="btn nav-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class='bx bx-search'></i>
                                            </button>
                                            <div class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-lg">
                                                <div class="search-box p-2">
                                                    <input type="text" class="form-control" placeholder="Search..">
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0">
                                        <button type="button" class="btn nav-btn" data-bs-toggle="modal" data-bs-target=".groupvideocallModal">
                                            <i class='bx bx-video'></i>
                                        </button>
                                    </li>

                                    <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0">
                                        <button type="button" class="btn nav-btn user-profile-show">
                                            <i class='bx bxs-info-circle'></i>
                                        </button>
                                    </li>

                                    <li class="list-inline-item">
                                        <div class="dropdown">
                                            <button class="btn nav-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class='bx bx-dots-vertical-rounded'></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none user-profile-show" href="#">View Profile <i class="bx bx-user text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none" href="#" data-bs-toggle="modal" data-bs-target=".audiocallModal">Audio <i class="bx bxs-phone-call text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none" href="#" data-bs-toggle="modal" data-bs-target=".videocallModal">Video <i class="bx bx-video text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Archive <i class="bx bx-archive text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Muted <i class="bx bx-microphone-off text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Delete <i class="bx bx-trash text-muted"></i></a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- end chat user head -->

                    <!-- start chat conversation -->

                    <div class="chat-conversation p-3 p-lg-4" id="chat-conversation" data-simplebar>
                        <ul class="list-unstyled chat-conversation-list" id="channel-conversation">
                        </ul>
                    </div>
                    <div class="alert alert-warning alert-dismissible copyclipboard-alert px-4 fade show " id="copyClipBoardChannel" role="alert">
                        message copied
                    </div>
                    <!-- end chat conversation end -->
                </div>

                <!-- start chat input section -->
                <div class="position-relative">
                    <div class="chat-input-section p-4 border-top">

                        <form id="chatinput-form" enctype="multipart/form-data">
                            <div class="row g-0 align-items-center">
                                <div class="file_Upload"></div>
                                <div class="col-auto">
                                    <div class="chat-input-links me-md-2">
                                        <div class="links-list-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="More">
                                            <button type="button" class="btn btn-link text-decoration-none btn-lg waves-effect" data-bs-toggle="collapse" data-bs-target="#chatinputmorecollapse" aria-expanded="false" aria-controls="chatinputmorecollapse">
                                                <i class="bx bx-dots-horizontal-rounded align-middle"></i>
                                            </button>
                                        </div>
                                        <div class="links-list-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Emoji">
                                            <button type="button" class="btn btn-link text-decoration-none btn-lg waves-effect emoji-btn" id="emoji-btn">
                                                <i class="bx bx-smile align-middle"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="position-relative">
                                        <div class="chat-input-feedback">
                                            Please Enter a Message
                                        </div>
                                        <input autocomplete="off" type="text" class="form-control  bg-light border-0 chat-input" autofocus id="chat-input" placeholder="Type your message...">
                                        <div class="chat-input-typing">
                                            <span class="typing-user d-flex">Victoria Lane
                                                is
                                                typing
                                                <span class="typing ms-2">
                                                    <span class="dot"></span>
                                                    <span class="dot"></span>
                                                    <span class="dot"></span>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <div class="chat-input-links ms-2 gap-md-1">
                                        <div class="links-list-item d-none d-sm-block" data-bs-container=".chat-input-links" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-html="true" data-bs-placement="top" data-bs-content="<div class='loader-line'><div class='line'></div><div class='line'></div><div class='line'></div><div class='line'></div><div class='line'></div></div>">
                                            <button type="button" class="btn btn-link text-decoration-none btn-lg waves-effect" onclick="audioPermission()">
                                                <i class="bx bx-microphone align-middle"></i>
                                            </button>
                                        </div>
                                        <div class="links-list-item">
                                            <button type="submit" class="btn btn-primary btn-lg chat-send waves-effect waves-light" data-bs-toggle="collapse" data-bs-target=".chat-input-collapse1.show">
                                                <i class="bx bxs-send align-middle" id="submit-btn"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="chat-input-collapse chat-input-collapse1 collapse" id="chatinputmorecollapse">
                            <div class="card mb-0">
                                <div class="card-body py-3">
                                    <!-- Swiper -->
                                    <div class="swiper chatinput-links">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <div class="text-center px-2 position-relative">
                                                    <div>
                                                        <input id="attachedfile-input" type="file" class="d-none" accept=".zip,.rar,.7zip,.pdf" multiple>
                                                        <label for="attachedfile-input" class="avatar-sm mx-auto stretched-link">
                                                            <span class="avatar-title fs-18 bg-primary-subtle  text-primary  text-primary rounded-circle">
                                                                <i class="bx bx-paperclip"></i>
                                                            </span>
                                                        </label>
                                                    </div>
                                                    <h5 class="fs-11 text-uppercase mt-3 mb-0 text-body text-truncate">
                                                        Attached</h5>
                                                </div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="text-center px-2">
                                                    <div class="avatar-sm mx-auto">
                                                        <div class="avatar-title fs-18 bg-primary-subtle 
 text-primary  text-primary rounded-circle">
                                                            <i class="bx bxs-camera"></i>
                                                        </div>
                                                    </div>
                                                    <h5 class="fs-11 text-uppercase text-truncate mt-3 mb-0"><a href="#" class="text-body stretched-link" onclick="cameraPermission()">Camera</a></h5>
                                                </div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="text-center px-2 position-relative">
                                                    <div>
                                                        <input id="galleryfile-input" type="file" class="d-none" accept="image/png, image/gif, image/jpeg" multiple>
                                                        <label for="galleryfile-input" class="avatar-sm mx-auto stretched-link">
                                                            <span class="avatar-title fs-18 bg-primary-subtle 
 text-primary  text-primary rounded-circle">
                                                                <i class="bx bx-images"></i>
                                                            </span>
                                                        </label>
                                                    </div>
                                                    <h5 class="fs-11 text-uppercase text-truncate mt-3 mb-0">Gallery
                                                    </h5>
                                                </div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="text-center px-2">
                                                    <div>
                                                        <input id="audiofile-input" type="file" class="d-none" accept="audio/*" multiple>
                                                        <label for="audiofile-input" class="avatar-sm mx-auto stretched-link">
                                                            <span class="avatar-title fs-18 bg-primary-subtle 
 text-primary  text-primary rounded-circle">
                                                                <i class="bx bx-headphone"></i>
                                                            </span>
                                                        </label>
                                                    </div>
                                                    <h5 class="fs-11 text-uppercase text-truncate mt-3 mb-0">Audio</h5>
                                                </div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="text-center px-2">
                                                    <div class="avatar-sm mx-auto">
                                                        <div class="avatar-title fs-18 bg-primary-subtle 
 text-primary  text-primary rounded-circle">
                                                            <i class="bx bx-current-location"></i>
                                                        </div>
                                                    </div>

                                                    <h5 class="fs-11 text-uppercase text-truncate mt-3 mb-0"><a href="#" class="text-body stretched-link" onclick="getLocation()">Location</a></h5>
                                                </div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="text-center px-2">
                                                    <div class="avatar-sm mx-auto">
                                                        <div class="avatar-title fs-18 bg-primary-subtle 
 text-primary  text-primary rounded-circle">
                                                            <i class="bx bxs-user-circle"></i>
                                                        </div>
                                                    </div>
                                                    <h5 class="fs-11 text-uppercase text-truncate mt-3 mb-0"><a href="#" class="text-body stretched-link" data-bs-toggle="modal" data-bs-target=".contactModal">Contacts</a></h5>
                                                </div>
                                            </div>

                                            <div class="swiper-slide d-block d-sm-none">
                                                <div class="text-center px-2">
                                                    <div class="avatar-sm mx-auto">
                                                        <div class="avatar-title fs-18 bg-primary-subtle 
 text-primary  text-primary rounded-circle">
                                                            <i class="bx bx-microphone"></i>
                                                        </div>
                                                    </div>
                                                    <h5 class="fs-11 text-uppercase text-truncate mt-3 mb-0"><a href="#" class="text-body stretched-link">Audio</a></h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="replyCard">
                        <div class="card mb-0">
                            <div class="card-body py-3">
                                <div class="replymessage-block mb-0 d-flex align-items-start">
                                    <div class="flex-grow-1">
                                        <h5 class="conversation-name"></h5>
                                        <p class="mb-0"></p>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <button type="button" id="close_toggle" class="btn btn-sm btn-link mt-n2 me-n3 fs-18">
                                            <i class="bx bx-x align-middle"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end chat input section -->
            </div>
            <!-- end chat conversation section -->

            <!-- start User profile detail sidebar -->
            <div class="user-profile-sidebar">

                <div class="p-3 border-bottom">
                    <div class="user-profile-img">
                        <img src="assets/images/users/avatar-2.jpg" class="profile-img rounded" alt="">
                        <div class="overlay-content rounded">
                            <div class="user-chat-nav p-2">
                                <div class="d-flex w-100">
                                    <div class="flex-grow-1">
                                        <button type="button" class="btn nav-btn text-white user-profile-show d-none d-lg-block">
                                            <i class="bx bx-x"></i>
                                        </button>
                                        <button type="button" class="btn nav-btn text-white user-profile-show d-block d-lg-none">
                                            <i class="bx bx-left-arrow-alt"></i>
                                        </button>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div class="dropdown">
                                            <button class="btn nav-btn text-white dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class='bx bx-dots-vertical-rounded'></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none user-profile-show" href="#">View Profile <i class="bx bx-user text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none" href="#" data-bs-toggle="modal" data-bs-target=".audiocallModal">Audio <i class="bx bxs-phone-call text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none" href="#" data-bs-toggle="modal" data-bs-target=".videocallModal">Video <i class="bx bx-video text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Archive <i class="bx bx-archive text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Muted <i class="bx bx-microphone-off text-muted"></i></a>
                                                <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Delete <i class="bx bx-trash text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-auto p-3">
                                <h5 class="user-name mb-0 text-truncate">Victoria Lane</h5>
                                <p class="fs-14 text-truncate user-profile-status mt-1 mb-0"><i class="bx bxs-circle fs-10 text-success me-1 ms-0"></i>
                                    Online</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End profile user -->

                <!-- Start user-profile-desc -->
                <div class="p-4 user-profile-desc" data-simplebar>
                    <div class="text-center border-bottom border-bottom-dashed">
                        <div class="d-flex gap-2 justify-content-center mb-4">
                            <button type="button" class="btn avatar-sm p-0">
                                <span class="avatar-title rounded bg-info-subtle 
             text-info text-info">
                                    <i class="bx bxs-message-alt-detail"></i>
                                </span>
                            </button>
                            <button type="button" class="btn avatar-sm p-0 favourite-btn">
                                <span class="avatar-title rounded bg-danger-subtle 
             text-danger text-body">
                                    <i class="bx bx-heart"></i>
                                </span>
                            </button>
                            <button type="button" class="btn avatar-sm p-0" data-bs-toggle="modal" data-bs-target=".audiocallModal">
                                <span class="avatar-title rounded bg-success-subtle text-success">
                                    <i class="bx bxs-phone-call"></i>
                                </span>
                            </button>
                            <button type="button" class="btn avatar-sm p-0" data-bs-toggle="modal" data-bs-target=".videocallModal">
                                <span class="avatar-title rounded bg-warning-subtle 
             text-warning text-warning">
                                    <i class="bx bx-video"></i>
                                </span>
                            </button>
                            <div class="dropdown">
                                <button class="btn avatar-sm p-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="avatar-title bg-primary-subtle 
             text-primary  text-primary rounded">
                                        <i class='bx bx-dots-horizontal-rounded'></i>
                                    </span>
                                </button>

                                <div class="dropdown-menu dropdown-menu-end">
                                    <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Archive <i class="bx bx-archive text-muted"></i></a>
                                    <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Muted <i class="bx bx-microphone-off text-muted"></i></a>
                                    <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Delete <i class="bx bx-trash text-muted"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-muted pt-4">
                        <h5 class="fs-12 text-muted text-uppercase">Status :</h5>
                        <p class="mb-4">A professional profile is a brief summary of your skills, strengths, and key experiences.
                        </p>
                    </div>

                    <div class="pb-4 border-bottom border-bottom-dashed mb-4">
                        <h5 class="fs-12 text-muted text-uppercase mb-2">Info :</h5>
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <i class="ri-user-line align-middle fs-15 text-muted"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="fs-14 text-truncate mb-0"> Victoria Lane</h5>
                            </div>
                        </div>

                        <div class="d-flex align-items-center mt-3">
                            <div class="flex-shrink-0">
                                <i class="ri-mail-line align-middle fs-15 text-muted"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="fs-14 text-truncate mb-0">therichpost.com</h5>
                            </div>
                        </div>

                        <div class="d-flex align-items-center mt-3">
                            <div class="flex-shrink-0">
                                <i class="ri-phone-line align-middle fs-15 text-muted"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="fs-14 text-truncate mb-0">+(345) 3216 48751</h5>
                            </div>
                        </div>

                        <div class="d-flex align-items-center mt-3">
                            <div class="flex-shrink-0">
                                <i class="ri-mail-line align-middle fs-15 text-muted"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="fs-14 text-truncate mb-0">California, USA</h5>
                            </div>
                        </div>
                    </div>

                    <div class="pb-4 border-bottom border-bottom-dashed mb-4">
                        <div class="d-flex">
                            <div class="flex-grow-1">
                                <h5 class="fs-12 text-muted text-uppercase">Group in common</h5>
                            </div>
                        </div>

                        <ul class="list-unstyled chat-list mx-n4">
                            <li>
                                <a href="javascript: void(0);">
                                    <div class="d-flex align-items-center">
                                        <img src="assets/images/users/group-img.jpg" alt="" class="avatar-sm rounded-circle me-3">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <h6 class="text-truncate mb-0">Landing Design</h6>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="javascript: void(0);">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 avatar-sm me-3">
                                            <span class="avatar-title rounded-circle bg-light text-reset">
                                                SM
                                            </span>
                                        </div>
                                        <div class="flex-grow-1 overflow-hidden">
                                            <h6 class="text-truncate mb-0">Sales & Marketing</h6>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="pb-4 border-bottom border-bottom-dashed mb-4">
                        <div class="d-flex align-items-center mb-3">
                            <div class="flex-grow-1">
                                <h5 class="fs-12 text-muted text-uppercase mb-0">Shared Images</h5>
                            </div>
                            <div class="flex-shrink-0">
                                <a href="#" class="fs-12 fw-medium d-block">Show all</a>
                            </div>
                        </div>
                        <div class="profile-media-img">
                            <div class="row g-1">
                                <div class="col-lg-4 col-6">
                                    <a href="#">
                                        <img src="assets/images/small/img-1.jpg" alt="media img" class="img-fluid rounded">
                                    </a>
                                </div>
                                <div class="col-lg-4 col-6">
                                    <a href="#">
                                        <img src="assets/images/small/img-2.jpg" alt="media img" class="img-fluid rounded">
                                    </a>
                                </div>
                                <div class="col-lg-4 col-6">
                                    <a href="#">
                                        <img src="assets/images/small/img-3.jpg" alt="media img" class="img-fluid rounded">
                                    </a>
                                </div>
                                <div class="col-lg-4 col-6">
                                    <a href="#">
                                        <img src="assets/images/small/img-4.jpg" alt="media img" class="img-fluid rounded">
                                    </a>
                                </div>
                                <div class="col-lg-4 col-6">
                                    <a href="#">
                                        <img src="assets/images/small/img-5.jpg" alt="media img" class="img-fluid rounded">
                                    </a>
                                </div>
                                <div class="col-lg-4 col-6">
                                    <div class="position-relative rounded overflow-hidden">
                                        <a href="javascript:void(0);" class="d-block">
                                            <img src="assets/images/small/img-6.jpg" alt="media img" class="img-fluid rounded">

                                            <div class="bg-overlay"></div>
                                            <div class="position-absolute top-50 start-50 text-white translate-middle fs-16">
                                                +10
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div>
                            <h5 class="fs-11 text-muted text-uppercase mb-3">Attached Files</h5>
                        </div>

                        <div>
                            <div class="card mb-2 border border-dashed">
                                <div class="card-body p-2">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 ms-1 me-3">
                                            <img src="assets/images/pdf-file.png" alt="" class="avatar-xs">
                                        </div>
                                        <div class="flex-grow-1 overflow-hidden">
                                            <h5 class="fs-14 text-truncate mb-1">design-phase-1-approved.pdf</h5>
                                            <p class="text-muted fs-13 mb-0">12.5 MB</p>
                                        </div>

                                        <div class="flex-shrink-0 ms-3">
                                            <div class="d-flex gap-2">
                                                <div>
                                                    <a href="#" class="text-muted px-1">
                                                        <i class="bx bxs-download"></i>
                                                    </a>
                                                </div>
                                                <div class="dropdown">
                                                    <a class="dropdown-toggle text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <i class="bx bx-dots-horizontal-rounded"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Share <i class="bx bx-share-alt ms-2 text-muted"></i></a>
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Bookmark <i class="bx bx-bookmarks text-muted ms-2"></i></a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card border border-dashed mb-2">
                                <div class="card-body p-2">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 ms-1 me-3">
                                            <img src="assets/images/image-file.png" alt="" class="avatar-xs">
                                        </div>
                                        <div class="flex-grow-1 overflow-hidden">
                                            <h5 class="fs-14 text-truncate mb-1">Image-1.jpg</h5>
                                            <p class="text-muted fs-13 mb-0">4.2 MB</p>
                                        </div>

                                        <div class="flex-shrink-0 ms-3">
                                            <div class="d-flex gap-2">
                                                <div>
                                                    <a href="#" class="text-muted px-1">
                                                        <i class="bx bxs-download"></i>
                                                    </a>
                                                </div>
                                                <div class="dropdown">
                                                    <a class="dropdown-toggle text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <i class="bx bx-dots-horizontal-rounded"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Share <i class="bx bx-share-alt ms-2 text-muted"></i></a>
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Bookmark <i class="bx bx-bookmarks text-muted ms-2"></i></a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card p-2 border border-dashed mb-2">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/image-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 text-truncate mb-1">Image-2.jpg</h5>
                                        <p class="text-muted fs-13 mb-0">3.1 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="d-flex gap-2">
                                            <div>
                                                <a href="#" class="text-muted px-1">
                                                    <i class="bx bxs-download"></i>
                                                </a>
                                            </div>
                                            <div class="dropdown">
                                                <a class="dropdown-toggle text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="bx bx-dots-horizontal-rounded"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Share <i class="bx bx-share-alt ms-2 text-muted"></i></a>
                                                    <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Bookmark <i class="bx bx-bookmarks text-muted ms-2"></i></a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card p-2 border border-dashed mb-0">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/zip-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 text-truncate mb-1">Landing-A.zip</h5>
                                        <p class="text-muted fs-13 mb-0">6.7 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="d-flex gap-2">
                                            <div>
                                                <a href="#" class="text-muted px-1">
                                                    <i class="bx bxs-download"></i>
                                                </a>
                                            </div>
                                            <div class="dropdown">
                                                <a class="dropdown-toggle text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="bx bx-dots-horizontal-rounded"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Share <i class="bx bx-share-alt ms-2 text-muted"></i></a>
                                                    <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Bookmark <i class="bx bx-bookmarks text-muted ms-2"></i></a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end user-profile-desc -->
            </div>
            <!-- end User profile detail sidebar -->
        </div>
        <!-- end user chat content -->
    </div>
    <!-- End User chat -->

    <!-- Start Add contact Modal -->
    <div class="modal fade" id="addContact-exampleModal" tabindex="-1" role="dialog" aria-labelledby="addContact-exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content modal-header-colored shadow-lg border-0">
                <div class="modal-header">
                    <h5 class="modal-title text-white fs-16" id="addContact-exampleModalLabel">Create Contact</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <form>
                        <div class="mb-3">
                            <label for="addcontactemail-input" class="form-label">Email</label>
                            <input type="email" class="form-control" id="addcontactemail-input" placeholder="Enter Email">
                        </div>
                        <div class="mb-3">
                            <label for="addcontactname-input" class="form-label">Name</label>
                            <input type="text" class="form-control" id="addcontactname-input" placeholder="Enter Name">
                        </div>
                        <div class="mb-0">
                            <label for="addcontact-invitemessage-input" class="form-label">Invatation Message</label>
                            <textarea class="form-control" id="addcontact-invitemessage-input" rows="3" placeholder="Enter Message"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Invite</button>
                </div>
            </div>
        </div>
    </div>
    <!-- End Add contact Modal -->

    <!-- audiocall Modal -->
    <div class="modal fade audiocallModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border border-0 overflow-hidden">
                <div class="modal-body p-0">
                    <div class="text-center p-4 pb-0">

                        <div class="avatar-xl mx-auto mb-4">
                            <img src="assets/images/users/avatar-7.jpg" alt="" class="img-thumbnail rounded-circle">
                        </div>
                        <div>
                            <h5 class="fs-22 text-truncate mb-0">Victoria Lane</h5>
                            <p class="text-muted">05:45</p>
                        </div>

                        <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                            <a href="" class="avatar-sm">
                                <div class="avatar-title bg-danger-subtle 
 text-danger text-danger fs-20 rounded-circle">
                                    <i class="bx bx-video-recording"></i>
                                </div>
                            </a>
                            <a href="" class="avatar-sm">
                                <div class="avatar-title bg-success-subtle text-success fs-20 rounded-circle">
                                    <i class="bx bx-volume-full"></i>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="avatar-sm">
                                <div class="avatar-title bg-info-subtle  text-info text-info fs-20 rounded-circle">
                                    <i class="bx bx-user-plus"></i>
                                </div>
                            </a>
                        </div>

                        <div class="mt-4">
                            <button type="button" class="btn btn-danger avatar-md call-close-btn rounded-circle" data-bs-dismiss="modal">
                                <span class="avatar-title bg-transparent fs-24">
                                    <i class="mdi mdi-phone-hangup"></i>
                                </span>
                            </button>
                        </div>
                    </div>

                    <div class="p-4 bg-primary-gradient mt-n4">
                        <div class="d-flex audio-call-menu">
                            <div class="flex-grow-1">
                                <button type="button" class="btn btn-light avatar-sm">
                                    <span class="avatar-title bg-transparent fs-20">
                                        <i class="ri-question-answer-line"></i>
                                    </span>
                                </button>
                            </div>
                            <div class="flex-shrink-0">
                                <button type="button" class="btn btn-light avatar-sm">
                                    <span class="avatar-title bg-transparent fs-20">
                                        <i class="bx bx-microphone-off"></i>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- audiocall Modal -->

    <!-- videocall Modal -->
    <div class="modal fade videocallModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0">
                <div class="modal-body p-0">
                    <div class="videocall-overlay"></div>
                    <div class="video-call-title position-absolute top-0 start-50 translate-middle-x mt-3 text-center">
                        <h5 class="fs-22 text-truncate text-white">Victoria Lane</h5>
                        <span class="badge text-white fs-12">05:27</span>
                    </div>

                    <img src="assets/images/users/avatar-2.jpg" alt="" class="videocallModal-bg">
                    <div>
                        <img src="assets/images/users/avatar-1.jpg" alt="" class="avatar-lg video-call-profile rounded">
                    </div>
                    <div class="position-absolute start-0 end-0 bottom-0">
                        <div class="text-center">
                            <button type="button" class="btn btn-danger avatar-md call-close-btn rounded-circle" data-bs-dismiss="modal">
                                <span class="avatar-title bg-transparent fs-24">
                                    <i class="mdi mdi-phone-hangup"></i>
                                </span>
                            </button>
                        </div>

                        <div class="p-4 bg-primary-gradient mt-n4">
                            <div class="d-flex gap-4 justify-content-center video-call-menu mt-2">
                                <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle">
                                    <span class="avatar-title bg-transparent fs-20">
                                        <i class="bx bx-microphone-off"></i>
                                    </span>
                                </a>
                                <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle me-4">
                                    <span class="avatar-title bg-transparent fs-20">
                                        <i class="bx bx-video-off"></i>
                                    </span>
                                </a>
                                <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle ms-5">
                                    <span class="avatar-title bg-transparent fs-20">
                                        <i class="bx bx-volume-full"></i>
                                    </span>
                                </a>
                                <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle">
                                    <span class="avatar-title bg-transparent fs-20">
                                        <i class="bx bx-refresh"></i>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end modal -->

    <!-- groupvideocall Modal -->
    <div class="modal fade groupvideocallModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0">
                <div class="modal-body p-0 overflow-hidden">
                    <div class="videocall-overlay"></div>
                    <div class="video-call-title position-absolute top-0 start-0 mt-3 ms-3">
                        <h5 class="user-profile-show fs-22 text-truncate text-white">Reporting</h5>
                        <span class="badge text-white fs-11">05:27</span>
                    </div>
                    <img src="assets/images/users/avatar-7.jpg" alt="" class="videocallModal-bg rounded" />
                    <ul class="list-unstyled groud-call-user vstack gap-3 position-absolute end-0 top-0 p-3">
                        <li>
                            <a href="javascript:void(0);"><img src="assets/images/users/avatar-11.jpg" alt="" class="avatar-lg rounded"></a>
                        </li>
                        <li>
                            <a href="javascript:void(0);"><img src="assets/images/users/avatar-6.jpg" alt="" class="avatar-lg rounded" /></a>
                        </li>
                        <li>
                            <a href="javascript:void(0);"><img src="assets/images/users/avatar-3.jpg" alt="" class="avatar-lg rounded" /></a>
                        </li>
                    </ul>
                    <div class="position-absolute video-call-menu start-0 end-0 bottom-0 mb-3">
                        <div class="hstack justify-content-center gap-3">
                            <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle">
                                <span class="avatar-title bg-transparent fs-20">
                                    <i class="bx bx-microphone-off"></i>
                                </span>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle me-4">
                                <span class="avatar-title bg-transparent fs-20">
                                    <i class="bx bx-video-off"></i>
                                </span>
                            </a>
                            <button type="button" class="btn btn-danger avatar-sm call-close-btn shadow-none rounded-circle" data-bs-dismiss="modal">
                                <span class="avatar-title bg-transparent fs-24">
                                    <i class="mdi mdi-phone-hangup"></i>
                                </span>
                            </button>
                            <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle ms-4">
                                <span class="avatar-title bg-transparent fs-20">
                                    <i class="bx bx-volume-full"></i>
                                </span>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle">
                                <span class="avatar-title bg-transparent fs-20">
                                    <i class="bx bx-refresh"></i>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end modal -->

    <!-- Start add group Modal -->
    <div class="modal fade" id="addgroup-exampleModal" tabindex="-1" role="dialog" aria-labelledby="addgroup-exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content modal-header-colored border-0">
                <div class="modal-header">
                    <h5 class="modal-title text-white fs-16" id="addgroup-exampleModalLabel">Create New Group</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body p-4">
                    <form>
                        <div class="mb-4">
                            <label for="addgroupname-input" class="form-label">Group Name</label>
                            <input type="text" class="form-control" id="addgroupname-input" placeholder="Enter Group Name">
                        </div>
                        <div class="mb-4">
                            <label class="form-label">Group Members</label>
                            <div class="mb-3">
                                <button class="btn btn-light btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#groupmembercollapse" aria-expanded="false" aria-controls="groupmembercollapse">
                                    Select Members
                                </button>
                            </div>

                            <div class="collapse" id="groupmembercollapse">
                                <div class="card border">
                                    <div class="card-header">
                                        <h5 class="fs-15 mb-0">Contacts</h5>
                                    </div>
                                    <div class="card-body py-2 px-0">
                                        <div data-simplebar style="max-height: 180px;">
                                            <div>
                                                <div class="contact-list-title">
                                                    A
                                                </div>

                                                <ul class="list-unstyled contact-list">
                                                    <li>
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="memberCheck1" checked>
                                                            <label class="form-check-label" for="memberCheck1">Albert
                                                                Rodarte</label>
                                                        </div>
                                                    </li>

                                                    <li>
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="memberCheck2">
                                                            <label class="form-check-label" for="memberCheck2">Allison
                                                                Etter</label>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>

                                            <div>
                                                <div class="contact-list-title">
                                                    C
                                                </div>

                                                <ul class="list-unstyled contact-list">
                                                    <li>
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="memberCheck3">
                                                            <label class="form-check-label" for="memberCheck3">Craig
                                                                Smiley</label>
                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>

                                            <div>
                                                <div class="contact-list-title">
                                                    D
                                                </div>

                                                <ul class="list-unstyled contact-list">
                                                    <li>
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="memberCheck4">
                                                            <label class="form-check-label" for="memberCheck4">Daniel
                                                                Clay</label>
                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>

                                            <div>
                                                <div class="contact-list-title">
                                                    I
                                                </div>

                                                <ul class="list-unstyled contact-list">
                                                    <li>
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="memberCheck5">
                                                            <label class="form-check-label" for="memberCheck5">Iris
                                                                Wells</label>
                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>

                                            <div>
                                                <div class="contact-list-title">
                                                    J
                                                </div>

                                                <ul class="list-unstyled contact-list">
                                                    <li>
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="memberCheck6">
                                                            <label class="form-check-label" for="memberCheck6">Juan
                                                                Flakes</label>
                                                        </div>
                                                    </li>

                                                    <li>
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="memberCheck7">
                                                            <label class="form-check-label" for="memberCheck7">John
                                                                Hall</label>
                                                        </div>
                                                    </li>

                                                    <li>
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="memberCheck8">
                                                            <label class="form-check-label" for="memberCheck8">Joy
                                                                Southern</label>
                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>

                                            <div>
                                                <div class="contact-list-title">
                                                    M
                                                </div>

                                                <ul class="list-unstyled contact-list">
                                                    <li>
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="memberCheck9">
                                                            <label class="form-check-label" for="memberCheck9">Michael
                                                                Hinton</label>
                                                        </div>
                                                    </li>

                                                    <li>
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="memberCheck10">
                                                            <label class="form-check-label" for="memberCheck10">Mary
                                                                Farmer</label>
                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>

                                            <div>
                                                <div class="contact-list-title">
                                                    P
                                                </div>

                                                <ul class="list-unstyled contact-list">
                                                    <li>
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="memberCheck11">
                                                            <label class="form-check-label" for="memberCheck11">Phillis
                                                                Griffin</label>
                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>

                                            <div>
                                                <div class="contact-list-title">
                                                    R
                                                </div>

                                                <ul class="list-unstyled contact-list">
                                                    <li>
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="memberCheck12">
                                                            <label class="form-check-label" for="memberCheck12">Rocky
                                                                Jackson</label>
                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>

                                            <div>
                                                <div class="contact-list-title">
                                                    S
                                                </div>

                                                <ul class="list-unstyled contact-list">
                                                    <li>
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="memberCheck13">
                                                            <label class="form-check-label" for="memberCheck13">Simon
                                                                Velez</label>
                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="addgroupdescription-input" class="form-label">Description</label>
                            <textarea class="form-control" id="addgroupdescription-input" rows="3" placeholder="Enter Description"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-top-dashed">
                    <button type="button" class="btn btn-link link-danger m-0" data-bs-dismiss="modal"><i class="ri-close-line"></i> Close</button>
                    <button type="button" class="btn btn-primary m-0">Create Groups</button>
                </div>
            </div>
        </div>
    </div>
    <!-- End add group Modal -->

    <!-- Start Add pinned tab Modal -->
    <div class="modal fade pinnedtabModal" tabindex="-1" role="dialog" aria-labelledby="pinnedtabModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content modal-header-colored border-0">
                <div class="modal-header">
                    <h5 class="modal-title text-white fs-16" id="pinnedtabModalLabel">Bookmark</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="flex-grow-1">
                            <div>
                                <h5 class="fs-16 mb-0">10 Pinned tabs</h5>
                            </div>
                        </div>
                        <div class="flex-shrink-0">
                            <div>
                                <button type="button" class="btn btn-sm btn-warning"><i class="bx bx-plus align-middle"></i> Pin</button>
                            </div>
                        </div>
                    </div>
                    <div class="chat-bookmark-list mx-n4" data-simplebar style="max-height: 299px;">
                        <ul class="list-unstyled chat-list">
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/pdf-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 text-truncate mb-1"><a href="#" class="p-0">design-phase-1-approved.pdf</a></h5>
                                        <p class="text-muted fs-13 mb-0">12.5 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/link-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 text-truncate mb-1"><a href="#" class="p-0">Bg Pattern</a></h5>
                                        <p class="text-muted fs-13 mb-0">https://bgpattern.com/</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/image-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 text-truncate mb-1"><a href="#" class="p-0">Image-001.jpg</a>
                                        </h5>
                                        <p class="text-muted fs-13 mb-0">4.2 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/link-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 text-truncate mb-1"><a href="#" class="p-0">Images</a></h5>
                                        <p class="text-muted fs-13 mb-0">https://images123.com/</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/link-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 text-truncate mb-1"><a href="#" class="p-0">Bg Gradient</a>
                                        </h5>
                                        <p class="text-muted fs-13 mb-0">https://bggradient.com/</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/image-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 text-truncate mb-1"><a href="#" class="p-0">Image-012.jpg</a>
                                        </h5>
                                        <p class="text-muted fs-13 mb-0">3.1 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 ms-1 me-3">
                                        <img src="assets/images/zip-file.png" alt="" class="avatar-xs">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="fs-14 text-truncate mb-1"><a href="#" class="p-0">analytics
                                                dashboard.zip</a></h5>
                                        <p class="text-muted fs-13 mb-0">6.7 MB</p>
                                    </div>

                                    <div class="flex-shrink-0 ms-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Open <i class="bx bx-folder-open ms-2 text-muted"></i></a>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Edit <i class="bx bx-pencil ms-2 text-muted"></i></a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete <i class="bx bx-trash ms-2 text-muted"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="text-center">
                            <a href="#pills-bookmark" class="link-success">View All <i class="ri-arrow-right-line ms-2 align-bottom"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Add pinned tab Modal -->

    <!-- forward Modal -->
    <div class="modal fade forwardModal" tabindex="-1" role="dialog" aria-labelledby="forwardModalModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content modal-header-colored border-0">
                <div class="modal-header">
                    <h5 class="modal-title text-white fs-16">Share this Message</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div>
                        <div class="replymessage-block mb-2">
                            <h5 class="conversation-name">Jean Berwick</h5>
                            <p class="mb-0">Yeah everything is fine. Our next meeting tomorrow at 10.00 AM</p>
                        </div>
                        <textarea class="form-control" placeholder="Type your message..." rows="2"></textarea>
                    </div>
                    <hr class="my-4">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control bg-light border-0 pe-0" placeholder="Search here..">
                        <button class="btn btn-light" type="button" id="forwardSearchbtn-addon"><i class='bx bx-search align-middle'></i></button>
                    </div>

                    <div class="d-flex align-items-center px-1">
                        <div class="flex-grow-1">
                            <h4 class="mb-0 fs-11 text-muted text-uppercase">Contacts</h4>
                        </div>
                        <div class="flex-shrink-0">
                            <button type="button" class="btn btn-sm btn-primary">Share All</button>
                        </div>
                    </div>
                    <div data-simplebar style="max-height: 150px;" class="mx-n4 px-1">
                        <div>
                            <div class="contact-list-title">
                                A
                            </div>

                            <ul class="list-unstyled contact-list">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Albert Rodarte</h5>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Allison Etter</h5>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- end contact list A -->

                        <div class="mt-3">
                            <div class="contact-list-title">
                                C
                            </div>

                            <ul class="list-unstyled contact-list">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Craig Smiley</h5>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- end contact list C -->

                        <div class="mt-3">
                            <div class="contact-list-title">
                                D
                            </div>

                            <ul class="list-unstyled contact-list">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Daniel Clay</h5>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Doris Brown</h5>
                                        </div>

                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <!-- end contact list D -->

                        <div class="mt-3">
                            <div class="contact-list-title">
                                I
                            </div>

                            <ul class="list-unstyled contact-list">

                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Iris Wells</h5>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- end contact list I -->

                        <div class="mt-3">
                            <div class="contact-list-title">
                                J
                            </div>

                            <ul class="list-unstyled contact-list">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Juan Flakes</h5>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">John Hall</h5>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Joy Southern</h5>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- end contact list J -->

                        <div class="mt-3">
                            <div class="contact-list-title">
                                M
                            </div>

                            <ul class="list-unstyled contact-list">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Mary Farmer</h5>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Mark Messer</h5>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Michael Hinton</h5>
                                        </div>

                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <!-- end contact list M -->

                        <div class="mt-3">
                            <div class="contact-list-title">
                                O
                            </div>

                            <ul class="list-unstyled contact-list">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Ossie Wilson</h5>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <!-- end contact list O -->

                        <div class="mt-3">
                            <div class="contact-list-title">
                                P
                            </div>

                            <ul class="list-unstyled contact-list">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Phillis Griffin</h5>
                                        </div>

                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Paul Haynes</h5>
                                        </div>

                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <!-- end contact list P -->

                        <div class="mt-3">
                            <div class="contact-list-title">
                                R
                            </div>

                            <ul class="list-unstyled contact-list">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Rocky Jackson</h5>
                                        </div>

                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <!-- end contact list R -->

                        <div class="mt-3">
                            <div class="contact-list-title">
                                S
                            </div>

                            <ul class="list-unstyled contact-list mb-0">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Sara Muller</h5>
                                        </div>

                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Simon Velez</h5>
                                        </div>

                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h5 class="fs-14 m-0">Steve Walker</h5>
                                        </div>

                                        <div class="flex-shrink-0">
                                            <button type="button" class="btn btn-sm btn-primary">Send</button>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <!-- end contact list S -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- forward Modal -->

    <!-- contactModal -->
    <div class="modal fade contactModal" tabindex="-1" role="dialog" aria-labelledby="pinnedtabModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content modal-header-colored border-0">
                <div class="modal-header">
                    <h5 class="modal-title text-white fs-16" id="pinnedtabModalLabel">Contacts</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body p-4">
                    <div class="input-group mb-4">
                        <input type="text" class="form-control" placeholder="Search here.." id="searchContactModal" onkeyup="searchContactOnModal()" aria-label="Example text with button" aria-describedby="contactSearchbtn-addon">
                        <button class="btn btn-danger" type="button" id="contactSearchbtn-addon"><i class='bx bx-search align-middle'></i></button>
                    </div>
                    <div class="d-flex align-items-center px-1">
                        <div class="flex-grow-1">
                            <h4 class=" fs-12 text-muted text-uppercase">Contacts</h4>
                        </div>
                    </div>
                    <div class="contact-modal-list px-1" data-simplebar style="max-height: 258px;">
                        <div>
                            <div class="contact-list-title">
                                A
                            </div>

                            <ul class="list-unstyled contact-list mb-0">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-info rounded-circle">
                                                A
                                            </div>
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Albert Rodarte</h5>
                                    </div>
                                </li>

                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <img src="assets/images/users/avatar-10.jpg" alt="" class="avatar-sm rounded-circle">
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Allison Etter</h5>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- end contact list A -->

                        <div class="mt-2">
                            <div class="contact-list-title">
                                C
                            </div>

                            <ul class="list-unstyled contact-list mb-0">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-danger rounded-circle">
                                                C
                                            </div>
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Craig Smiley</h5>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- end contact list C -->

                        <div class="mt-2">
                            <div class="contact-list-title">
                                D
                            </div>

                            <ul class="list-unstyled contact-list mb-0">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <img src="assets/images/users/avatar-4.jpg" alt="" class="avatar-sm rounded-circle">
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Daniel Clay</h5>
                                    </div>
                                </li>
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <img src="assets/images/users/avatar-8.jpg" alt="" class="avatar-sm rounded-circle">
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Doris Brown</h5>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- end contact list D -->

                        <div class="mt-2">
                            <div class="contact-list-title">
                                I
                            </div>

                            <ul class="list-unstyled contact-list mb-0">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <img src="assets/images/users/avatar-12.jpg" alt="" class="avatar-sm rounded-circle">
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Iris Wells</h5>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- end contact list I -->

                        <div class="mt-2">
                            <div class="contact-list-title">
                                J
                            </div>

                            <ul class="list-unstyled contact-list mb-0">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-success rounded-circle">
                                                J
                                            </div>
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Juan Flakes</h5>
                                    </div>
                                </li>

                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-info rounded-circle">
                                                J
                                            </div>
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">John Hall</h5>
                                    </div>
                                </li>

                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <img src="assets/images/users/avatar-3.jpg" alt="" class="avatar-sm rounded-circle">
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Joy Southern</h5>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- end contact list J -->

                        <div class="mt-2">
                            <div class="contact-list-title">
                                M
                            </div>

                            <ul class="list-unstyled contact-list mb-0">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-primary rounded-circle">
                                                M
                                            </div>
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Mary Farmer</h5>
                                    </div>
                                </li>
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-dark rounded-circle">
                                                M
                                            </div>
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Mark Messer</h5>
                                    </div>
                                    <div>
                                    </div>
                                </li>

                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-warning rounded-circle">
                                                M
                                            </div>
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Michael Hinton</h5>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <!-- end contact list M -->

                        <div class="mt-2">
                            <div class="contact-list-title">
                                O
                            </div>

                            <ul class="list-unstyled contact-list">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <img src="assets/images/users/avatar-6.jpg" alt="" class="avatar-sm rounded-circle">
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Ossie Wilson</h5>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <!-- end contact list O -->

                        <div class="mt-2">
                            <div class="contact-list-title mb-0">
                                P
                            </div>

                            <ul class="list-unstyled contact-list">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <img src="assets/images/users/avatar-10.jpg" alt="" class="avatar-sm rounded-circle">
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Phillis Griffin</h5>
                                    </div>
                                </li>
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-info rounded-circle">
                                                P
                                            </div>
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Paul Haynes</h5>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- end contact list P -->

                        <div class="mt-2">
                            <div class="contact-list-title mb-0">
                                R
                            </div>

                            <ul class="list-unstyled contact-list">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-success rounded-circle">
                                                R
                                            </div>
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Rocky Jackson</h5>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <!-- end contact list R -->

                        <div class="mt-2">
                            <div class="contact-list-title">
                                S
                            </div>

                            <ul class="list-unstyled contact-list mb-0">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <img src="assets/images/users/avatar-11.jpg" alt="" class="avatar-sm rounded-circle">
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Sara Muller</h5>
                                    </div>
                                </li>
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-warning rounded-circle">
                                                S
                                            </div>
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Simon Velez</h5>
                                    </div>
                                </li>
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-danger rounded-circle">
                                                S
                                            </div>
                                        </div>
                                        <h5 class="fs-14 mb-0 ms-2">Steve Walker</h5>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <!-- end contact list S -->
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="javascript:void(0);" class="btn btn-link" data-bs-dismiss="modal"><i class="ri-close-fill align-bottom"></i> Cancel</a>
                    <button type="button" class="btn btn-primary"><i class="bx bxs-send align-middle"></i></button>
                </div>
            </div>
        </div>
    </div>
    <!-- contactModal -->
</div>
<!-- end  layout wrapper -->

6. Now guys we need to add below into src/app/app.routes.ts to links components to routes:

import { Routes } from '@angular/router';
import { ChatComponent } from './chat/chat.component';

export const routes: Routes = [
      {
        path: '', title: 'Chat Page', component: ChatComponent,
      },
      
];

7. Now guys we need to add below code into our project/src/index.html file for styles and scripts or we can also call this styles/scripts inside angular.json file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chat - Responsive Bootstrap 5 Chat App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="assets/images/favicon.ico" id="tabIcon">

  <!-- glightbox css -->
  <link rel="stylesheet" href="assets/css/glightbox.min.css">

  <!-- Nano scroll -->
  <link rel="stylesheet" href="assets/css/nano.min.css" />

  <!-- swiper css -->
  <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">

  <!-- Bootstrap Css -->
  <link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
  <!-- Icons Css -->
  <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
  <!-- App Css-->
  <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
</head>
<body>
  <app-root></app-root>
  <!-- JAVASCRIPT -->
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="assets/js/simplebar.min.js"></script>
  <script src="assets/js/waves.min.js"></script>

  <!-- Modern colorpicker bundle -->
  <script src="assets/js/pickr.min.js"></script>

  <!-- glightbox js -->
  <script src="assets/js/glightbox.min.js"></script>

  <!-- Swiper JS -->
  <script src="assets/js/swiper-bundle.min.js"></script>

  <!-- fg-emoji-picker JS -->
  <script src="assets/js/fgEmojiPicker.js"></script>

  <!-- page init -->
  <script src="assets/js/index.init.js"></script>

  <script src="assets/js/app.js"></script>
</body>
</html>

8. Now guys here is the github link and from where we will get the all the assets like images, css, js and fonts:

GitHub Link

Friends in the end must run ng serve command into your terminal to run the angular 17 project(localhost:4200).

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

April 8, 2024

How to add WOWJS in an Angular 17+ application?

Hello guys, how are you? Welcome to my blog. Guys in this blog post I am going to tell you, How to add WOWJS in an Angular 17+ application?

Angular WOW.JS

Post Working:
Friends, In this post, I am showing you WOW.js animation into my angular 17 application and also I am using bootstrap into my angular application for better looks.

Angular 17 came and if you are new then you must check below two links:

Angular17 Basic Tutorials

Here is the code snippet for Angular 17 Animation with WOWJS and please use carefully:

1. Firstly, we need to run below commands into our terminal to get fresh angular 17 setup and we should have latest node version installed into our system:

npm install -g @angular/cli

ng new angularwow

cd angularwow

ng serve

//Here is the url, you need to run into your browser and see working angular test project
http://localhost:4200/

2. After done with above setup, new we need to run below commands into our project terminal to get wow.js and bootstrap modules into our angular 17 application. I am adding bootstrap for better looks but we can skip that also:

npm install --save wowjs

npm install --save ngx-wow

npm install bootstrap --save

3. Now we need to add below code into our project angular.json files to call the styles and scripts:

"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/wowjs/css/libs/animate.css"
            ],
            "scripts": [
              
              "node_modules/wowjs/dist/wow.js"
            ]

4. Now we need to add below code into our src/app/app.component.ts file:

...
import { NgwWowService } from 'ngx-wow';

export class AppComponent {
...
  constructor(private wowService: NgwWowService) {
    this.wowService.init();
  }
}

5. Finally we need to add below code into our src/app/app.component.html file to get the final output on our browser:

<!--I have done same html working example like wow.js to show you exact working example-->

<div class="jumbotron text-center">
  <h1>Angular 10</h1>
</div>
<div class="container">
  <div class="row text-center" style="display: block;">
       <img class="wow fadeInDown" data-wow-delay="0.5s" src="https://wowjs.uk/img/wow-logo.jpg">    
  </div>
  <div class="container text-center circles">
    <div class="row">
      <div data-wow-delay="0.5s" class="wow rollIn" style="visibility: visible; animation-delay: 0.5s; animation-name: rollIn;">
        <p class="circle bg-green">such easy</p>
      </div>
      <div data-wow-delay="0.5s" class="wow bounceInDown center" style="visibility: visible; animation-delay: 0.5s; animation-name: bounceInDown;"><img src="https://wowjs.uk/img/wow-1.gif" height="200" class="wow animated" style="visibility: visible;"></div>
      <div data-wow-delay="0.5s" class="wow lightSpeedIn" style="visibility: visible; animation-delay: 0.5s; animation-name: lightSpeedIn;">
        <p class="circle bg-yellow">very ES	</p>
      </div>
    </div>
    <div class="row">
      <div class="wow rollIn center" style="visibility: visible; animation-name: rollIn;"><img src="https://wowjs.uk/img/wow-3.gif" height="200"></div>
      <div data-wow-iteration="5" data-wow-duration="0.15s" class="wow pulse" style="visibility: visible; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: pulse;">
        <p class="circle bg-blue">WOW		</p>
      </div>
      <div class="wow bounceInRight center" style="visibility: visible; animation-name: bounceInRight;"><img src="https://wowjs.uk/img/wow-12.gif" height="200"></div>
    </div>
    <div class="row">
      <div class="wow bounceInLeft" style="visibility: visible; animation-name: bounceInLeft;">
        <p class="circle bg-red">no jquery</p>
      </div>
      <div class="wow flipInX center" style="visibility: visible; animation-name: flipInX;"><img src="https://wowjs.uk/img/wow-2.gif" height="200"></div>
      <div class="wow bounceInRight" style="visibility: visible; animation-name: bounceInRight;">
        <p class="circle bg-purple">many anims	</p>
      </div>
    </div>
    <div class="row">
      <div class="wow rollIn center" style="visibility: hidden; animation-name: none;"><img src="https://wowjs.uk/img/wow-5.gif" height="200"></div>
      <div data-wow-iteration="5" data-wow-duration="0.15s" class="wow shake" style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;">
        <p class="circle bg-yellow">aint GPL</p>
      </div>
      <div data-wow-iteration="2" class="wow swing center" style="visibility: hidden; animation-iteration-count: 2; animation-name: none;">	<img src="https://wowjs.uk/img/wow-6.gif" height="200"></div>
    </div>
    <div class="row">
      <div class="wow rollIn" style="visibility: hidden; animation-name: none;">
        <p class="circle bg-purple">how small</p>
      </div>
      <div data-wow-delay="0.5s" class="wow bounceInUp center" style="visibility: hidden; animation-delay: 0.5s; animation-name: none;"><img src="https://wowjs.uk/img/wow-10.gif" height="200"></div>
      <div data-wow-delay="0.5s" data-wow-duration="0.15s" class="wow lightSpeedIn" style="visibility: hidden; animation-duration: 0.15s; animation-delay: 0.5s; animation-name: none;">
        <p class="circle bg-green">3 KiB only	</p>
      </div>
    </div>
    <div class="row">
      <div class="wow rollIn center" style="visibility: hidden; animation-name: none;"><img src="https://wowjs.uk/img/wow-7.gif" height="200"></div>
      <div data-wow-iteration="5" data-wow-duration="0.25s" class="wow pulse" style="visibility: hidden; animation-duration: 0.25s; animation-iteration-count: 5; animation-name: none;">
        <p class="circle bg-blue">just scroll</p>
      </div>
      <div class="wow lightSpeedIn center" style="visibility: hidden; animation-name: none;"><img src="https://wowjs.uk/img/wow-9.gif" height="200"></div>
    </div>
    <div class="row">
      <div data-wow-iteration="5" data-wow-duration="0.15s" class="wow bounce" style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;">
        <p class="circle bg-yellow">reveal now</p>
      </div>
      <div class="wow bounceInUp center" style="visibility: hidden; animation-name: none;"><img src="https://wowjs.uk/img/wow-8.gif" height="200"></div>
      <div class="wow bounceInRight" style="visibility: hidden; animation-name: none;">
        <p class="circle bg-red">so impress</p>
      </div>
    </div>
    <div class="row">
      <div class="wow rollIn center" style="visibility: hidden; animation-name: none;"><img src="https://wowjs.uk/img/wow-4.gif" height="200"></div>
      <div data-wow-iteration="5" data-wow-duration="0.15s" class="wow flip" style="visibility: hidden; animation-duration: 0.15s; animation-iteration-count: 5; animation-name: none;">
        <p class="circle bg-green">WOW</p>
      </div>
      <div class="wow bounceInRight center" style="visibility: hidden; animation-name: none;"><img src="https://wowjs.uk/img/wow-11.gif" height="200"></div>
    </div>
    <div class="row">
      <div data-wow-delay="0.5s" class="wow rollIn" style="visibility: hidden; animation-delay: 0.5s; animation-name: none;">
        <p class="circle bg-red">no jquery?!</p>
      </div>
      <div data-wow-delay="1s" class="wow bounceInDown center" style="visibility: hidden; animation-delay: 1s; animation-name: none;"><img src="https://wowjs.uk/img/grumpy.gif" height="200"></div>
      <div data-wow-delay="1.5s" class="wow bounceInRight" style="visibility: hidden; animation-delay: 1.5s; animation-name: none;">
        <p class="circle bg-purple">that sucks!	</p>
      </div>
    </div>
  </div>
</div>
<style>
  .circle {
    margin: 25px 10px;
    width: 200px;
    color: #fff;
    font-size: 32px;
    line-height: 200px;
    text-align: center;
    height: 200px;
    border-radius: 100px;
}
.bg-green {
    background: #5bd5a0;
}
.bg-yellow {
    background: #ffcc35;
}
.bg-blue {
    background: #1daee9;
}
.bg-red {
    background: #eb3980;
}
.bg-purple {
    background: #c843a5;
}
.row{display:inline-flex;}
</style>

This is it friends and don’t forget to run ng serve command into your terminal to check the final working. If you have any kind of query then please do comment below.

This post is just for to add wowjs into our angular application and we can add more animations into our angular application by following to wowjs animations tricks according our requirements.

Jassa

Thanks

March 28, 2024

Creating a Bootstrap 5 modal pop-up with a reactive form and validation in an Angular 17

Hello guys, how are you? Welcome back on my blog therichpost.com. Today in this blog post we will be Creating a Bootstrap 5 modal pop-up with a reactive form and validation in an Angular 17.

Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:

Guys now here is the complete code snippet for Creating a Bootstrap 5 modal pop-up with a reactive form and validation in an Angular 17:

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angularforms//Create new Angular Project 

cd angularforms// Go inside the Angular Project Folder

2. First, ensure that your Angular project is set up and Bootstrap 5 is integrated. You can add Bootstrap to your project by running:

npm install bootstrap

3. Then, include Bootstrap in your project by adding it to the styles, script array in your angular.json file:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

4. Now guys we need to add below code inside app.component.ts file to define modal form functionality:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { FormBuilder, Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'angularadmin5';
  form = this.fb.group({
    username: ['', [Validators.required, Validators.minLength(4)]],
    email: ['', [Validators.required, Validators.email]],
  });

  constructor(private fb: FormBuilder) { }

  onSubmit() {
    console.log(this.form.value);
  }
}

5. Guys now In your component’s template (e.g., app.component.html), create the Bootstrap modal and include the reactive form with validation feedback:

<!-- Button to trigger modal -->
<div class="container p-5">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Open Form
      </button>
      
      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Form</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form [formGroup]="form" (ngSubmit)="onSubmit()">
                <div class="mb-3">
                  <label for="username" class="form-label">Username</label>
                  <input type="text" id="username" class="form-control" formControlName="username">
                  <div *ngIf="form.get('username')?.invalid && form.get('username')?.touched" class="text-danger">
                    Username is required and must be at least 4 characters.
                  </div>
                </div>
                <div class="mb-3">
                  <label for="email" class="form-label">Email</label>
                  <input type="email" id="email" class="form-control" formControlName="email">
                  <div *ngIf="form.get('email')?.invalid && form.get('email')?.touched" class="text-danger">
                    Please enter a valid email address.
                  </div>
                </div>
                <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Submit</button>
              </form>
            </div>
          </div>
        </div>
      </div>
</div>

This code snippet demonstrates how to create a Bootstrap modal containing a reactive form with simple validation for a username and an email address. The form validation feedback is displayed conditionally based on the state of each form control.

Friends in the end must run ng serve command into your terminal to run the angular 17 project(localhost:4200).

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

March 28, 2024

Angular 17 Free Admin Dashboard Template with Dark, Light Layouts with RTL options

Hello everyone, if you’re in search of a responsive and user-friendly admin dashboard template in Angular 17+, then you’ve come to the right place! Today this blog post I will show you Angular 17 Free Admin Dashboard Template with Dark, Light Layouts with RTL options.

Live Demo

Key Features:

Built on Angular 17 + Bootstrap 5
CSS3 & HTML5
Clean & minimal design
Cross-browser tested & optimized
Full-width layouts
Gulp based workflow
Opinionated code formatter Prettier for a consistent codebase
Modular markup based on Cards & Utility classes
Interactive and functional components and pages
FontAwesome 5 + material icons + feather icon
ApexCharts
W3C validated HTML pages

Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:

Guys now here is the complete code snippet with GitHub link following assets(css, js, fonts and images):

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angularadmin //Create new Angular Project

cd angularadmin // Go inside the Angular Project Folder

2. Guys now we need to run below commands to create components to our angular application:

ng g c dashboard

3. Now guys we need to add below code into our scr/app/app.component.html file for main output:

<router-outlet></router-outlet>

4. Now guys we need to add below code into our scr/app/dashboard/dashboard.component.ts file making routing working:

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.css'
})
export class DashboardComponent {

}

5. Now guys we need to add below code into our scr/app/dashboard/dashboard.component.html file:


        <!-- Begin page -->
        <div id="layout-wrapper">
            <div class="pace-progress"></div>
            <header id="page-topbar">
                <div class="navbar-header">
                    <div class="d-flex">
                        <!-- LOGO -->
                        <div class="navbar-brand-box">
                            <a href="#" class="logo logo-dark">
                                <span class="logo-sm">
                                    <img src="assets/images/logo-sm-dark.png" alt="logo-sm-dark" height="24">
                                </span>
                                <span class="logo-lg">
                                    <img src="assets/images/logo-dark.png" alt="logo-dark" height="25">
                                </span>
                            </a>

                            <a href="#" class="logo logo-light">
                                <span class="logo-sm">
                                    <img src="assets/images/logo-sm-light.png" alt="logo-sm-light" height="24">
                                </span>
                                <span class="logo-lg">
                                    <img src="assets/images/logo-light.png" alt="logo-light" height="25">
                                </span>
                            </a>
                        </div>

                        <button type="button" class="btn btn-sm px-3 font-size-24 header-item waves-effect" id="vertical-menu-btn">
                            <i class="ri-menu-2-line align-middle"></i>
                        </button>

                        <!-- App Search-->
                        <form class="app-search d-none d-lg-block">
                            <div class="position-relative">
                                <input type="text" class="form-control" placeholder="Search...">
                                <span class="ri-search-line"></span>
                            </div>
                        </form>
                    </div>

                    <div class="d-flex">

                        <div class="dropdown d-inline-block d-lg-none ms-2">
                            <button type="button" class="btn header-item noti-icon waves-effect" id="page-header-search-dropdown"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-search-line"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
                                aria-labelledby="page-header-search-dropdown">
                    
                                <form class="p-3">
                                    <div class="mb-3 m-0">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Search ...">
                                            <div class="input-group-append">
                                                <button class="btn btn-primary" type="submit"><i class="ri-search-line"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="dropdown d-none d-sm-inline-block">
                            <button type="button" class="btn header-item waves-effect"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <img class="" src="assets/images/flags/us.jpg" alt="Header Language" height="16">
                            </button>
                            <div class="dropdown-menu dropdown-menu-end">
                    
                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <img src="assets/images/flags/spain.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Spanish</span>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <img src="assets/images/flags/germany.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">German</span>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <img src="assets/images/flags/italy.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Italian</span>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <img src="assets/images/flags/russia.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Russian</span>
                                </a>
                            </div>
                        </div>

                        <div class="dropdown d-none d-lg-inline-block ms-1">
                            <button type="button" class="btn header-item noti-icon waves-effect"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-apps-2-line"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
                                <div class="px-lg-2">
                                    <div class="row g-0">
                                        <div class="col">
                                            <a class="dropdown-icon-item" href="#">
                                                <img src="assets/images/brands/github.png" alt="Github">
                                                <span>GitHub</span>
                                            </a>
                                        </div>
                                        <div class="col">
                                            <a class="dropdown-icon-item" href="#">
                                                <img src="assets/images/brands/bitbucket.png" alt="bitbucket">
                                                <span>Bitbucket</span>
                                            </a>
                                        </div>
                                        <div class="col">
                                            <a class="dropdown-icon-item" href="#">
                                                <img src="assets/images/brands/dribbble.png" alt="dribbble">
                                                <span>Dribbble</span>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="row g-0">
                                        <div class="col">
                                            <a class="dropdown-icon-item" href="#">
                                                <img src="assets/images/brands/dropbox.png" alt="dropbox">
                                                <span>Dropbox</span>
                                            </a>
                                        </div>
                                        <div class="col">
                                            <a class="dropdown-icon-item" href="#">
                                                <img src="assets/images/brands/mail_chimp.png" alt="mail_chimp">
                                                <span>Mail Chimp</span>
                                            </a>
                                        </div>
                                        <div class="col">
                                            <a class="dropdown-icon-item" href="#">
                                                <img src="assets/images/brands/slack.png" alt="slack">
                                                <span>Slack</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="dropdown d-none d-lg-inline-block ms-1">
                            <button type="button" class="btn header-item noti-icon waves-effect" data-toggle="fullscreen">
                                <i class="ri-fullscreen-line"></i>
                            </button>
                        </div>

                        <div class="dropdown d-inline-block">
                            <button type="button" class="btn header-item noti-icon waves-effect" id="page-header-notifications-dropdown"
                                  data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="ri-notification-3-line"></i>
                                <span class="noti-dot"></span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
                                aria-labelledby="page-header-notifications-dropdown">
                                <div class="p-3">
                                    <div class="row align-items-center">
                                        <div class="col">
                                            <h6 class="m-0"> Notifications </h6>
                                        </div>
                                        <div class="col-auto">
                                            <a href="#!" class="small"> View All</a>
                                        </div>
                                    </div>
                                </div>
                                <div data-simplebar style="max-height: 230px;">
                                    <a href="" class="text-reset notification-item">
                                        <div class="d-flex">
                                            <div class="avatar-xs me-3">
                                                <span class="avatar-title bg-primary rounded-circle font-size-16">
                                                    <i class="ri-shopping-cart-line"></i>
                                                </span>
                                            </div>
                                            <div class="flex-1">
                                                <h6 class="mb-1">Your order is placed</h6>
                                                <div class="font-size-12 text-muted">
                                                    <p class="mb-1">If several languages coalesce the grammar</p>
                                                    <p class="mb-0"><i class="mdi mdi-clock-outline"></i> 3 min ago</p>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="" class="text-reset notification-item">
                                        <div class="d-flex">
                                            <img src="assets/images/users/avatar-3.jpg"
                                                class="me-3 rounded-circle avatar-xs" alt="user-pic">
                                            <div class="flex-1">
                                                <h6 class="mb-1">James Lemire</h6>
                                                <div class="font-size-12 text-muted">
                                                    <p class="mb-1">It will seem like simplified English.</p>
                                                    <p class="mb-0"><i class="mdi mdi-clock-outline"></i> 1 hours ago</p>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="" class="text-reset notification-item">
                                        <div class="d-flex">
                                            <div class="avatar-xs me-3">
                                                <span class="avatar-title bg-success rounded-circle font-size-16">
                                                    <i class="ri-checkbox-circle-line"></i>
                                                </span>
                                            </div>
                                            <div class="flex-1">
                                                <h6 class="mb-1">Your item is shipped</h6>
                                                <div class="font-size-12 text-muted">
                                                    <p class="mb-1">If several languages coalesce the grammar</p>
                                                    <p class="mb-0"><i class="mdi mdi-clock-outline"></i> 3 min ago</p>
                                                </div>
                                            </div>
                                        </div>
                                    </a>

                                    <a href="" class="text-reset notification-item">
                                        <div class="d-flex">
                                            <img src="assets/images/users/avatar-4.jpg"
                                                class="me-3 rounded-circle avatar-xs" alt="user-pic">
                                            <div class="flex-1">
                                                <h6 class="mb-1">Salena Layfield</h6>
                                                <div class="font-size-12 text-muted">
                                                    <p class="mb-1">As a skeptical Cambridge friend of mine occidental.</p>
                                                    <p class="mb-0"><i class="mdi mdi-clock-outline"></i> 1 hours ago</p>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="p-2 border-top">
                                    <div class="d-grid">
                                        <a class="btn btn-sm btn-link font-size-14 text-center" href="javascript:void(0)">
                                            <i class="mdi mdi-arrow-right-circle me-1"></i> View More..
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="dropdown d-inline-block">
                            <button type="button" class="btn header-item noti-icon right-bar-toggle waves-effect">
                                <i class="ri-settings-2-line"></i>
                            </button>
                        </div>
            
                    </div>
                </div>
            </header>

            <!-- ========== Left Sidebar Start ========== -->
            <div class="vertical-menu">

                <div data-simplebar class="h-100">

                    <!--- Sidemenu -->
                    <div id="sidebar-menu">

                        <div class="user-info text-center">
                            <div class="dropdown d-inline-block user-dropdown">
                                <a href="" class="btn header-item" id="page-header-user-dropdown"
                                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <img class="rounded-circle header-profile-user" src="assets/images/users/avatar-2.jpg"
                                        alt="Header Avatar">
                                    <h6 class="text-uppercase mb-0 mt-2 pt-1">Jassa Rich</h6>
                                    <p class="text-muted font-size-13">Founder</p>
                                </a>
                                <div class="dropdown-menu">
                                    <!-- item-->
                                    <a class="dropdown-item" href="#"><i class="ri-user-line align-middle me-1"></i> Profile</a>
                                    <a class="dropdown-item" href="#"><i class="ri-wallet-2-line align-middle me-1"></i> My Wallet</a>
                                    <a class="dropdown-item d-block" href="#"><span class="badge bg-success float-end mt-1">11</span><i class="ri-settings-2-line align-middle me-1"></i> Settings</a>
                                    <a class="dropdown-item" href="#"><i class="ri-lock-unlock-line align-middle me-1"></i> Lock screen</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item text-danger" href="#"><i class="ri-shut-down-line align-middle me-1 text-danger"></i> Logout</a>
                                </div>
                            </div>

                            <div class="user-graph mt-5 pt-1">
                                <div id="header-chart" class="apex-charts"></div>
                                <h6 class="mt-1">Budget $34,652</h6>
                            </div>
                        </div>

                        <!-- Left Menu Start -->
                        <ul class="metismenu list-unstyled" id="side-menu">
                            <li class="menu-title">Menu</li>

                            <li>
                                <a href="#" class="waves-effect">
                                    <i class="ri-dashboard-2-line"></i><span class="badge rounded-pill bg-success float-end">3</span>
                                    <span>Dashboard</span>
                                </a>
                            </li>

                           

                         

                           
                
                            

                            

                          
                            

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

                            <li>
                                <a href="javascript: void(0);" class="has-arrow waves-effect">
                                    <i class="ri-account-circle-line"></i>
                                    <span>Authentication</span>
                                </a>
                                <ul class="sub-menu" aria-expanded="false">
                                    <li><a href="#">Login</a></li>
                                    <li><a href="#">Register</a></li>
                                    <li><a href="#">Recover Password</a></li>
                                   
                                </ul>
                            </li>

                            <li>
                                <a href="javascript: void(0);" class="has-arrow waves-effect">
                                    <i class="ri-pages-line"></i>
                                    <span>Extra Pages</span>
                                </a>
                                <ul class="sub-menu" aria-expanded="false">
                                    <li><a href="#">Maintenance</a></li>
                                    <li><a href="#">Coming Soon</a></li>
                                    <li><a href="#">Error 404</a></li>
                                   
                                </ul>
                            </li>

              

                            <li>
                                <a href="javascript: void(0);" class="has-arrow waves-effect">
                                    <i class="ri-share-line"></i>
                                    <span>Multi Level</span>
                                </a>
                                <ul class="sub-menu" aria-expanded="true">
                                    <li><a href="javascript: void(0);">Level 1.1</a></li>
                                    <li><a href="javascript: void(0);" class="has-arrow">Level 1.2</a>
                                        <ul class="sub-menu" aria-expanded="true">
                                            <li><a href="javascript: void(0);">Level 2.1</a></li>
                                            <li><a href="javascript: void(0);">Level 2.2</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                        </ul>
                    </div>
                    <!-- Sidebar -->
                </div>
            </div>
            <!-- Left Sidebar End -->

            

            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="main-content">

                <div class="page-content">
                    <div class="container-fluid">
                        
                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                    <h4 class="mb-sm-0">Dashboard</h4>

                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <li class="breadcrumb-item"><a href="javascript: void(0);">Reactly</a></li>
                                            <li class="breadcrumb-item active">Dashboard</li>
                                        </ol>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- end page title -->

                        <div class="row">
                            <div class="col-lg-12 col-xxl-9">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex flex-wrap pb-3 gap-3">
                                                    <div class="flex-grow-1 overflow-hidden">
                                                        <p class="text-truncate mb-2">Today Orders</p>
                                                        <h4 class="mt-2 mb-0">32,562 <span class="badge bg-subtle-primary text-primary font-size-10 ms-1"><i class="mdi mdi-arrow-up"></i> 10%</span></h4>
                                                    </div>
                                                    <div class="text-primary">
                                                        <div id="chart-mini1" class="apex-chart"></div>
                                                    </div>
                                                </div>
                                                <p class="mb-0 font-size-14 fw-bold mt-2 text-truncate">126<span class="text-muted fw-normal"> ~ vs. previous month</span></p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex flex-wrap pb-3 gap-3">
                                                    <div class="flex-grow-1 overflow-hidden">
                                                        <p class="text-truncate mb-2">Today Visitor</p>
                                                        <h4 class="mt-2 mb-0">26,429 <span class="badge bg-subtle-danger text-danger font-size-10 ms-1"><i class="mdi mdi-arrow-down"></i> 23%</span></h4>
                                                    </div>
                                                    <div class="text-primary">
                                                        <div id="chart-mini2" class="apex-chart"></div>
                                                    </div>
                                                </div>
                                                <p class="mb-0 font-size-14 fw-bold mt-2 text-truncate">568<span class="text-muted fw-normal"> ~ vs. previous month</span></p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex flex-wrap pb-3 gap-3">
                                                    <div class="flex-grow-1 overflow-hidden">
                                                        <p class="text-truncate mb-2">Total Expense</p>
                                                        <h4 class="mt-2 mb-0">64,249 <span class="badge bg-subtle-primary text-primary font-size-10 ms-1"><i class="mdi mdi-arrow-up"></i> 32%</span></h4>
                                                    </div>
                                                    <div class="text-primary">
                                                        <div id="chart-mini3" class="apex-chart"></div>
                                                    </div>
                                                </div>
                                                <p class="mb-0 font-size-14 fw-bold mt-2 text-truncate">232<span class="text-muted fw-normal"> ~ vs. previous month</span></p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex flex-wrap pb-3 gap-3">
                                                    <div class="flex-grow-1 overflow-hidden">
                                                        <p class="text-truncate mb-2">New Users</p>
                                                        <h4 class="mt-2 mb-0">52,653  <span class="badge bg-subtle-danger text-danger font-size-10 ms-1"><i class="mdi mdi-arrow-down"></i> 18%</span></h4>
                                                    </div>
                                                    <div class="text-primary">
                                                        <div id="chart-mini4" class="apex-chart"></div>
                                                    </div>
                                                </div>
                                                <p class="mb-0 font-size-14 fw-bold mt-2 text-truncate">235<span class="text-muted fw-normal"> ~ vs. previous month</span></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- end row -->
    
                                <div class="card">
                                    <div class="card-body p-xl-0">
                                       <div class="p-0 p-xl-3">
                                        <div class="float-end d-none d-md-inline-block">
                                            <div class="dropdown">
                                                <a class="dropdown-toggle text-reset" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="fw-semibold">Sort By:</span> <span class="text-muted">Yearly<i class="mdi mdi-chevron-down ms-1"></i></span>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a class="dropdown-item" href="#">Yearly</a>
                                                    <a class="dropdown-item" href="#">Monthly</a>
                                                    <a class="dropdown-item" href="#">Weekly</a>
                                                </div>
                                            </div>
                                        </div>
                                            <h4 class="card-title">Revenue Analytics</h4>
                                       </div>

                                        <div class="row align-items-center">
                                            <div class="col-xl-9">
                                                <div class="mb-2">
                                                    <div id="multi_chart" data-colors='["--bs-primary", "--bs-info", "--bs-success"]' class="apex-charts" dir="ltr"></div>
                                                </div>
                                            </div>

                                            <div class="col-xl-3">
                                                <div class="ps-4 ps-xl-0">
                                                    <h3>$ 6134.39</h3>
                                                    <p class="text-uppercase text-muted mb-1 mt-3"> From 2016 to 2023</p>
                                                    <h4 class="font-size-18 text-truncate">Sales Statistical Overview</h4>

                                                   
                                                    <div class="row mt-3 pt-1">
                                                        <div class="col-6">
                                                            <div>
                                                                <p class="text-muted mb-2">Income</p>
                                                                <h5>$ 2632.46</h5>
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <div>
                                                                <p class="text-muted mb-2">Expense</p>
                                                                <h5>$ 924.38</h5>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <p class="font-size-15 mt-3"><span class="text-primary fw-bold"> +17% </span>more than last week</p>

                                                    <div class="d-flex mt-4 gap-2">
                                                        <a href="javascript: void(0);" class="btn btn-primary text-truncate">Analytics Sales </a>
                                                        <a href="javascript: void(0);" class="btn btn-success text-truncate">Details</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
    
                            <div class="col-lg-12 col-xxl-3">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="float-end">
                                            <select class="form-select form-select-sm">
                                                <option selected>Apr</option>
                                                <option value="1">Mar</option>
                                                <option value="2">Feb</option>
                                                <option value="3">Jan</option>
                                            </select>
                                        </div>
                                        <h4 class="card-title">Social Source</h4>
    
                                        <div id="pie-chart" style="height: 340px;" class="e-charts"></div>


                                        <div class="border-top social-info">
                                            <div class="row align-items-center g-0 mt-3 pt-3">
                                                <div class="col-sm-4">
                                                    <h6 class="text-truncate mb-0"><i class="mdi mdi-circle font-size-10 text-primary me-2"></i> Facebook </h6>
                                                </div>
                                                <div class="col-sm-8">
                                                    <div class="progress" style="height: 6px;">
                                                        <div class="progress-bar progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="80">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> <!-- end row-->
    
                                            <div class="row align-items-center g-0 mt-3 pt-1">
                                                <div class="col-sm-4">
                                                    <h6 class="text-truncate mb-0"><i class="mdi mdi-circle font-size-10 text-success me-2"></i> Website </h6>
                                                </div>
                                                <div class="col-sm-8">
                                                    <div class="progress" style="height: 6px;">
                                                        <div class="progress-bar progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="65">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> <!-- end row-->
    
                                            <div class="row align-items-center g-0 mt-3 pt-1">
                                                <div class="col-sm-4">
                                                    <h6 class="text-truncate mb-0"><i class="mdi mdi-circle font-size-10 text-purple me-2"></i> E-comme.. </h6>
                                                </div>
                                                <div class="col-sm-8">
                                                    <div class="progress" style="height: 6px;">
                                                        <div class="progress-bar progress-bar progress-bar-striped bg-purple" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="48">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> <!-- end row-->
    
                                            <div class="row align-items-center g-0 mt-3 pt-1">
                                                <div class="col-sm-4">
                                                    <h6 class="text-truncate mb-0"><i class="mdi mdi-circle font-size-10 text-danger me-2"></i> Instagram </h6>
                                                </div>
                                                <div class="col-sm-8">
                                                    <div class="progress" style="height: 6px;">
                                                        <div class="progress-bar progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="78">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> <!-- end row-->
    
                                            <div class="row align-items-center g-0 mt-3 pt-1">
                                                <div class="col-sm-4">
                                                    <h6 class="text-truncate mb-0"><i class="mdi mdi-circle font-size-10 text-warning me-2"></i> Google </h6>
                                                </div>
                                                <div class="col-sm-8">
                                                    <div class="progress" style="height: 6px;">
                                                        <div class="progress-bar progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 63%" aria-valuenow="63" aria-valuemin="0" aria-valuemax="63">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> <!-- end row-->

                                            <div class="mt-4 text-center">
                                                <a href="#" class="text-dark font-size-14 fw-bold">View All Sources <i class="mdi mdi-arrow-right align-middle"></i></a>
                                            </div>
    
                                        </div>
    
                                        
                                    </div>
                                </div>
    
                             
                            </div>
                        </div>
                        <!-- end row -->

                        <div class="row">
                            <div class="col-xl-7">
                                <div class="row">
                                    <div class="col-xl-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="dropdown float-end">
                                                    <a class="dropdown-toggle text-reset" href="#" data-bs-toggle="dropdown"
                                                        aria-haspopup="true" aria-expanded="false">
                                                        <span class="text-muted">Report<i class="mdi mdi-chevron-down ms-1"></i></span>
                                                    </a>
        
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item" href="#">Download Report</a>
                                                        <a class="dropdown-item" href="#">Export</a>
                                                        <a class="dropdown-item" href="#">Import</a>
                                                    </div>
                                                </div>
            
                                                <h4 class="card-title mb-0">Asset Allcation</h4>
        
                                                <div id="chart-radialBar" class="apex-charts"></div>
        
                                                <p class="text-muted text-center">This Week Total Sales And Earning</p>
        
                                                <div class="row mt-4 pt-1">
                                                    <div class="col border-end">
                                                        <div class="text-center">
                                                            <p class="text-muted font-size-15 mb-2">Total Founding</p>
                                                            <h4>$5,574.32</h4>
                                                            <p class="font-size-15 fw-bold text-primary mb-0"><i class="mdi mdi-arrow-up-circle font-size-16 me-1"></i> 9.2%</p>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="text-center">
                                                            <p class="text-muted font-size-15 mb-2">Total Dividends</p>
                                                            <h4>$235.45</h4>
                                                            <p class="font-size-15 fw-bold text-primary mb-0"><i class="mdi mdi-arrow-up-circle font-size-16 me-1"></i> 6.3%</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
        
                                    <div class="col-xl-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="dropdown float-end">
                                                    <a class="dropdown-toggle text-reset" href="#" data-bs-toggle="dropdown"
                                                        aria-haspopup="true" aria-expanded="false">
                                                        <span class="text-muted">Monthly<i class="mdi mdi-chevron-down ms-1"></i></span>
                                                    </a>
        
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item" href="#">Yearly</a>
                                                        <a class="dropdown-item" href="#">Monthly</a>
                                                        <a class="dropdown-item" href="#">Weekly</a>
                                                        <a class="dropdown-item" href="#">Today</a>
                                                    </div>
                                                </div>
            
                                                <h4 class="card-title mb-4">Massages</h4>
        
                                                <div class="chat-message-list widget-chat-list mx-n3" data-simplebar style="max-height: 412px;">
                                                    <div class="px-3">
                                                        <ul class="list-unstyled chat-list">
                                                            <li>
                                                                <a href="#" class="mt-0">
                                                                    <div class="d-flex align-items-center">
                                                                        <div class="flex-shrink-0 me-3">
                                                                            <img src="assets/images/users/avatar-2.jpg" class="rounded-circle header-profile-user" alt="">
                                                                        </div>
                                                                        
                                                                        <div class="flex-grow-1 overflow-hidden">
                                                                            <div class="d-flex">
                                                                                <div class="flex-grow-1 overflow-hidden">
                                                                                    <h6 class="text-truncate font-size-15 mb-1">Steven Jones</h6>
                                                                                    <p class="text-truncate font-size-14 mb-0">Feels like it's been a while! Home are you?</p>
                                                                                </div>
                                                                                <div class="flex-shrink-0">
                                                                                    <div class="font-size-14">02 min</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            </li>
                                                                <!-- end li -->
                                                            <li>
                                                                <a href="#">
                                                                    <div class="d-flex align-items-center">
                                                                        <div class="flex-shrink-0 me-3">
                                                                            <div class="rounded-circle header-profile-user align-self-center">
                                                                                <span class="avatar-title rounded-circle bg-primary bg-gradient">
                                                                                    H
                                                                                </span>
                                                                            </div>
                                                                            <span class="user-status"></span>
                                                                        </div>
        
                                                                        <div class="flex-grow-1 overflow-hidden">
                                                                            <div class="d-flex">
                                                                                <div class="flex-grow-1 overflow-hidden">
                                                                                    <h6 class="text-truncate font-size-15 mb-1">Alex Mulvey</h6>
                                                                                    <p class="text-truncate font-size-14 mb-0">I've finished it! See you so</p>
                                                                                </div>
                                                                                <div class="flex-shrink-0">
                                                                                    <div class="font-size-14">10 min</div>
                                                                                </div>
                                                                                
                                                                                <div class="unread-message">
                                                                                    <span class="badge bg-danger rounded-pill">1</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            </li>
                                                                <!-- end li -->
                                                            <li>
                                                                <a href="#">
                                                                    <div class="d-flex align-items-center">
                                                                        <div class="flex-shrink-0  me-3">
                                                                            <img src="assets/images/users/avatar-3.jpg" class="rounded-circle header-profile-user" alt="">
                                                                            <span class="user-status"></span>
                                                                        </div>
                                                                        <div class="flex-grow-1 overflow-hidden">
                                                                            <div class="d-flex">
                                                                                <div class="flex-grow-1 overflow-hidden">
                                                                                    <h6 class="text-truncate font-size-15 mb-1">Justin Moore</h6>
                                                                                    <p class="text-truncate font-size-14 mb-0">and how it's going with the velocity website?</p>
                                                                                </div>
                                                                                <div class="flex-shrink-0">
                                                                                    <div class="font-size-14">22 min</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        
                                                                    </div>
                                                                </a>
                                                            </li>
                                                                <!-- end li -->
                                                            <li>
                                                                <a href="#">
                                                                    <div class="d-flex align-items-center">
                                                                        
                                                                        <div class="flex-shrink-0 me-3">
                                                                            <img src="assets/images/users/avatar-4.jpg" class="rounded-circle header-profile-user" alt="">
                                                                            <span class="user-status"></span>
                                                                        </div>
        
                                                                        <div class="flex-grow-1 overflow-hidden">
                                                                            <div class="d-flex">
                                                                                <div class="flex-grow-1 overflow-hidden">
                                                                                    <h6 class="text-truncate font-size-15 mb-1">Edith McLain</h6>
                                                                                    <p class="text-truncate font-size-14 mb-0">Super, I will get you the new brief</p>
                                                                                </div>
                                                                                <div class="flex-shrink-0">
                                                                                    <div class="font-size-14">01 Hr</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            </li>
                                                                <!-- end li -->
                                                            <li>
                                                                <a href="#">
                                                                    <div class="d-flex align-items-center">
                                                                        <div class="flex-shrink-0 me-3">
                                                                            <div class="rounded-circle header-profile-user align-self-center">
                                                                                <span class="avatar-title rounded-circle bg-primary bg-gradient">
                                                                                    W
                                                                                </span>
                                                                            </div>
                                                                            <span class="user-status"></span>
                                                                        </div>
        
                                                                        <div class="flex-grow-1 overflow-hidden">
                                                                            <div class="d-flex">
                                                                                <div class="flex-grow-1 overflow-hidden">
                                                                                    <h6 class="text-truncate font-size-15 mb-1">William Declue</h6>
                                                                                    <p class="text-truncate font-size-14 mb-0">just catching up with Steve i'll write it out.</p>
                                                                                </div>
                                                                                <div class="flex-shrink-0">
                                                                                    <div class="font-size-14">04 Hrs</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            </li>
                                                                <!-- end li -->
                                                            <li>
                                                                <a href="#">
                                                                    <div class="d-flex align-items-center">
                                                                        
                                                                        <div class="flex-shrink-0 me-3">
                                                                            <div class="rounded-circle header-profile-user align-self-center">
                                                                                <span class="avatar-title rounded-circle bg-primary bg-gradient">
                                                                                    W
                                                                                </span>
                                                                            </div>
                                                                            <span class="user-status"></span>
                                                                        </div>
                                                                        <div class="flex-grow-1 overflow-hidden">
                                                                            <div class="d-flex">
                                                                                <div class="flex-grow-1 overflow-hidden">
                                                                                    <h6 class="text-truncate font-size-15 mb-1">Wendy Lennox</h6>
                                                                                    <p class="text-truncate font-size-14 mb-0">Hey! there I'm available</p>
                                                                                </div>
                                                                                <div class="flex-shrink-0">
                                                                                    <div class="font-size-14">10 Hrs</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        
                                                                    </div>
                                                                </a>
                                                            </li>
                                                            <!-- end li -->
                                                            <li>
                                                                <a href="#">
                                                                    <div class="d-flex align-items-center">
                                                                        <div class="flex-shrink-0 me-3">
                                                                            <img src="assets/images/users/avatar-3.jpg" class="rounded-circle header-profile-user" alt="">
                                                                            <span class="user-status"></span>
                                                                        </div>
        
                                                                        <div class="flex-grow-1 overflow-hidden">
                                                                            <div class="d-flex">
                                                                                <div class="flex-grow-1 overflow-hidden">
                                                                                    <h6 class="text-truncate font-size-15 mb-1">Mary Welch</h6>
                                                                                    <p class="text-truncate font-size-14 mb-0">This theme is awesome!</p>
                                                                                </div>
                                                                                <div class="flex-shrink-0">
                                                                                    <div class="font-size-14">19 Sept</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            </li>
                                                                <!-- end li -->
                                                        </ul>
                                                        <!-- end ul -->
                                                    </div>
                                                </div>
                                              
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- end row -->
                            </div>

                            <div class="col-xl-5">
                                <div class="card">
                                    <div class="p-3 pb-0">
                                        <div class="float-end d-none d-md-inline-block">
                                            <div class="dropdown">
                                                <a class="dropdown-toggle text-reset" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="fw-semibold">Year:</span> <span class="text-muted">2023<i class="mdi mdi-chevron-down ms-1"></i></span>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a class="dropdown-item" href="#">2021</a>
                                                    <a class="dropdown-item" href="#">2022</a>
                                                    <a class="dropdown-item" href="#">2023</a>
                                                </div>
                                            </div>
                                        </div>
                                        <h4 class="card-title">Sales Statistics</h4>
                                   </div>
                                    <div class="card-body pt-0">

                                        <div id="sales-over" class="apex-chart"></div>

                                        <div class="table-responsive px-1">
                                            <table class="table align-middle table-centered table-nowrap mb-0">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Order Status</th>
                                                        <th scope="col">Orders</th>
                                                        <th scope="col">Retuns</th>
                                                        <th scope="col">Earnings</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <a href="javascript:void(0);" class="text-dark">Product Pending</a>
                                                        </td>
                                                        <td>17,351</td>
                                                        <td>2,123</td>
                                                        <td><span class="badge bg-subtle-primary text-primary font-size-11 ms-1"><i class="mdi mdi-arrow-up"></i> 45.3%</span></td>
                                                    </tr><!-- end -->

                                                    <tr>
                                                        <td>
                                                            <a href="javascript:void(0);" class="text-dark">Product Cancelled</a>
                                                        </td>
                                                        <td>67,356</td>
                                                        <td>3,652</td>
                                                        <td><span class="badge bg-subtle-danger text-danger font-size-11 ms-1"><i class="mdi mdi-arrow-down"></i> 14.6%</span></td>
                                                    </tr><!-- end -->


                                                    <tr>
                                                        <td>
                                                            <a href="javascript:void(0);" class="text-dark">Product Delivered</a>
                                                        </td>
                                                        <td>67,356</td>
                                                        <td>3,652</td>
                                                        <td><span class="badge bg-subtle-primary text-primary font-size-11 ms-1"><i class="mdi mdi-arrow-up"></i> 14.6%</span></td>
                                                    </tr><!-- end -->
                                                </tbody><!-- end tbody -->
                                            </table><!-- end table -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->

                        <div class="row">
                            <div class="col-xl-4">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="float-end d-none d-md-inline-block">
                                            <div class="dropdown">
                                                <a class="dropdown-toggle text-reset" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="fw-semibold">Year:</span> <span class="text-muted">2023<i class="mdi mdi-chevron-down ms-1"></i></span>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a class="dropdown-item" href="#">2021</a>
                                                    <a class="dropdown-item" href="#">2022</a>
                                                    <a class="dropdown-item" href="#">2023</a>
                                                </div>
                                            </div>
                                        </div>

                                        <h4 class="card-title">Top Retail Sales Locations</h4>
                                        <div class="mt-4">
                                            <div id="world-map-markers" style="height: 325px;">
                                            </div>
        
                                            <div class="mt-4 text-center">
                                                <ul class="list-inline mb-0">
                                                    <li class="list-inline-item me-3 fw-medium"><i
                                                            class="mdi mdi-circle font-size-10 text-primary me-1"></i> United
                                                        States</li>
                                                    <li class="list-inline-item me-3 fw-medium"><i
                                                            class="mdi mdi-circle font-size-10 text-success me-1"></i> Canada
                                                        </li>
                                                    <li class="list-inline-item me-3 fw-medium"><i
                                                            class="mdi mdi-circle font-size-10 text-warning me-1"></i> Canada
                                                        </li>
                                                    <li class="list-inline-item me-3 fw-medium"><i
                                                            class="mdi mdi-circle font-size-10 text-danger me-1"></i> Canada
                                                        </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-8">
                                <div class="card">
                                    <div class="card-body">
                                         <div class="float-end d-none d-md-inline-block">
                                            <div class="dropdown">
                                                <a class="dropdown-toggle text-reset" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="fw-semibold">Sort By:</span> <span class="text-muted"> Weekly <i class="mdi mdi-chevron-down ms-1"></i></span>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a class="dropdown-item" href="#">Monthly</a>
                                                    <a class="dropdown-item" href="#">Yearly</a>
                                                </div>
                                            </div>
                                        </div>
                                        <h4 class="card-title mb-3">Manage Orders</h4>


                                        <div class="table-responsive">
                                            <table class="table table-centered align-middle table-nowrap mb-0">
                                                <thead>
                                                    <tr>
                                                        <th style="width: 20px;" class="align-middle">
                                                            <div class="form-check font-size-15">
                                                                <input class="form-check-input" type="checkbox" id="checkAll">
                                                                <label class="form-check-label" for="checkAll"></label>
                                                            </div>
                                                        </th>
                                                        <th>Order ID</th>
                                                        <th>Product's Name</th>
                                                        <th>Variant</th>
                                                        <th>Type</th>
                                                        <th>Stock</th>
                                                        <th>Price</th>
                                                        <th>Sales</th>
                                                        <th>Status</th>
                                                        <th>Edit</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <div class="form-check font-size-15">
                                                                <input class="form-check-input" type="checkbox" id="orderidcheck01">
                                                                <label class="form-check-label" for="orderidcheck01"></label>
                                                            </div>
                                                        </td>
                                                        <td>#52561</td>
                                                        <td><a href="javascript: void(0);" class="text-body">Iphone 12 Max Pro</a> </td>
                                                        <td>
                                                            <i class="mdi mdi-circle font-size-10 me-1 align-middle text-secondary"></i> Gray
                                                        </td>
                                                        <td>
                                                            Electronic
                                                        </td>
                                                        <td>
                                                           1,564 Items
                                                        </td>
                                                        <td>
                                                            $1200
                                                        </td>
                                                        <td>
                                                            900
                                                        </td>
                                                        
                                                        <td style="width: 130px;">
                                                            <div class="progress" style="height: 6px;">
                                                                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="75">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="dropdown">
                                                                <a class="text-muted dropdown-toggle font-size-20" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
                                                                    <i class="mdi mdi-dots-vertical"></i>
                                                                </a>
                        
                                                                <div class="dropdown-menu dropdown-menu-end">
                                                                    <a class="dropdown-item" href="#">Action</a>
                                                                    <a class="dropdown-item" href="#">Another action</a>
                                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                                    <div class="dropdown-divider"></div>
                                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                        
                                                    <tr>
                                                        <td>
                                                            <div class="form-check font-size-15">
                                                                <input class="form-check-input" type="checkbox" id="orderidcheck02">
                                                                <label class="form-check-label" for="orderidcheck02"></label>
                                                            </div>
                                                        </td>
                                                        <td>#52562</td>
                                                        <td><a href="javascript: void(0);" class="text-body">New Red and White jacket </a> </td>
                                                        <td>
                                                            <i class="mdi mdi-circle font-size-10 me-1 align-middle text-danger"></i> Red
                                                        </td>
                                                        <td>
                                                            Fashion
                                                        </td>
                                                        <td>
                                                           568 Items
                                                        </td>
                                                        <td>
                                                            $300
                                                        </td>
                                                        <td>
                                                            650
                                                        </td>
                                                        
                                                        <td style="width: 130px;">
                                                            <div class="progress" style="height: 6px;">
                                                                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="75">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="dropdown">
                                                                <a class="text-muted dropdown-toggle font-size-20" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
                                                                    <i class="mdi mdi-dots-vertical"></i>
                                                                </a>
                        
                                                                <div class="dropdown-menu dropdown-menu-end">
                                                                    <a class="dropdown-item" href="#">Action</a>
                                                                    <a class="dropdown-item" href="#">Another action</a>
                                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                                    <div class="dropdown-divider"></div>
                                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                        
                                                    <tr>
                                                        <td>
                                                            <div class="form-check font-size-15">
                                                                <input class="form-check-input" type="checkbox" id="orderidcheck03">
                                                                <label class="form-check-label" for="orderidcheck03"></label>
                                                            </div>
                                                        </td>
                                                        <td>#52563</td>
                                                        <td><a href="javascript: void(0);" class="text-body">Latest Series Watch OS 8</a> </td>
                                                        <td>
                                                            <i class="mdi mdi-circle font-size-10 me-1 align-middle text-primary"></i> Dark
                                                        </td>
                                                        <td>
                                                            Electronic
                                                        </td>
                                                        <td>
                                                           1,232 Items
                                                        </td>
                                                        <td>
                                                            $250
                                                        </td>
                                                        <td>
                                                            350
                                                        </td>
                                                        
                                                        <td style="width: 130px;">
                                                            <div class="progress" style="height: 6px;">
                                                                <div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="75">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="dropdown">
                                                                <a class="text-muted dropdown-toggle font-size-20" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
                                                                    <i class="mdi mdi-dots-vertical"></i>
                                                                </a>
                        
                                                                <div class="dropdown-menu dropdown-menu-end">
                                                                    <a class="dropdown-item" href="#">Action</a>
                                                                    <a class="dropdown-item" href="#">Another action</a>
                                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                                    <div class="dropdown-divider"></div>
                                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="form-check font-size-15">
                                                                <input class="form-check-input" type="checkbox" id="orderidcheck04">
                                                                <label class="form-check-label" for="orderidcheck04"></label>
                                                            </div>
                                                        </td>
                                                        <td>#52564</td>
                                                        <td><a href="javascript: void(0);" class="text-body">New Horror Book</a> </td>
                                                        <td>
                                                            <i class="mdi mdi-circle font-size-10 me-1 align-middle text-success"></i> Green
                                                        </td>
                                                        <td>
                                                            Book
                                                        </td>
                                                        <td>
                                                           1,564 Items
                                                        </td>
                                                        <td>
                                                            $1200
                                                        </td>
                                                        <td>
                                                            900
                                                        </td>
                                                        
                                                        <td style="width: 130px;">
                                                            <div class="progress" style="height: 6px;">
                                                                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="75">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="dropdown">
                                                                <a class="text-muted dropdown-toggle font-size-20" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
                                                                    <i class="mdi mdi-dots-vertical"></i>
                                                                </a>
                        
                                                                <div class="dropdown-menu dropdown-menu-end">
                                                                    <a class="dropdown-item" href="#">Action</a>
                                                                    <a class="dropdown-item" href="#">Another action</a>
                                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                                    <div class="dropdown-divider"></div>
                                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="form-check font-size-15">
                                                                <input class="form-check-input" type="checkbox" id="orderidcheck05">
                                                                <label class="form-check-label" for="orderidcheck05"></label>
                                                            </div>
                                                        </td>
                                                        <td>#52565</td>
                                                        <td><a href="javascript: void(0);" class="text-body">Smart 4k Android TV</a> </td>
                                                        <td>
                                                            <i class="mdi mdi-circle font-size-10 me-1 align-middle text-primary"></i> Gray
                                                        </td>
                                                        <td>
                                                            Electronic
                                                        </td>
                                                        <td>
                                                           5,632 Items
                                                        </td>
                                                        <td>
                                                            $700
                                                        </td>
                                                        <td>
                                                            600
                                                        </td>
                                                        
                                                        <td style="width: 130px;">
                                                            <div class="progress" style="height: 6px;">
                                                                <div class="progress-bar progress-bar-striped bg-pricing" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="75">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="dropdown">
                                                                <a class="text-muted dropdown-toggle font-size-20" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
                                                                    <i class="mdi mdi-dots-vertical"></i>
                                                                </a>
                        
                                                                <div class="dropdown-menu dropdown-menu-end">
                                                                    <a class="dropdown-item" href="#">Action</a>
                                                                    <a class="dropdown-item" href="#">Another action</a>
                                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                                    <div class="dropdown-divider"></div>
                                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td>
                                                            <div class="form-check font-size-15">
                                                                <input class="form-check-input" type="checkbox" id="orderidcheck06">
                                                                <label class="form-check-label" for="orderidcheck06"></label>
                                                            </div>
                                                        </td>
                                                        <td>#52567</td>
                                                        <td><a href="javascript: void(0);" class="text-body">New Red and White jacket </a> </td>
                                                        <td>
                                                            <i class="mdi mdi-circle font-size-10 me-1 align-middle text-danger"></i> Red
                                                        </td>
                                                        <td>
                                                            Fashion
                                                        </td>
                                                        <td>
                                                           568 Items
                                                        </td>
                                                        <td>
                                                            $300
                                                        </td>
                                                        <td>
                                                            650
                                                        </td>
                                                        
                                                        <td style="width: 130px;">
                                                            <div class="progress" style="height: 6px;">
                                                                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="75">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="dropdown">
                                                                <a class="text-muted dropdown-toggle font-size-20" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
                                                                    <i class="mdi mdi-dots-vertical"></i>
                                                                </a>
                        
                                                                <div class="dropdown-menu dropdown-menu-end">
                                                                    <a class="dropdown-item" href="#">Action</a>
                                                                    <a class="dropdown-item" href="#">Another action</a>
                                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                                    <div class="dropdown-divider"></div>
                                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    
                                                </tbody>
                                            </table>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->

                    </div>
                    <!-- container-fluid -->
                </div>
                <!-- End Page-content -->
               
                <footer class="footer">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-12">
                                <script>document.write(new Date().getFullYear())</script> Jassa.
                            </div>
                            
                        </div>
                    </div>
                </footer>
                
            </div>
            <!-- end main content-->

        </div>
        <!-- END layout-wrapper -->

        <!-- Right Sidebar -->
        <div class="right-bar">
            <div data-simplebar class="h-100">
                <div class="rightbar-title d-flex align-items-center px-3 py-4">
            
                    <h5 class="m-0 me-2">Settings</h5>

                    <a href="javascript:void(0);" class="right-bar-toggle ms-auto">
                        <i class="mdi mdi-close noti-icon"></i>
                    </a>
                </div>

                <!-- Settings -->
                <hr class="mt-0" />
                <h6 class="text-center mb-0">Choose Layouts</h6>

                <div class="p-4">
                    <div class="mb-2">
                        <img src="assets/images/layouts/layout-1.jpg" class="img-fluid img-thumbnail" alt="layout-1">
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input theme-choice" type="checkbox" id="light-mode-switch" checked>
                        <label class="form-check-label" for="light-mode-switch">Light Mode</label>
                    </div>
    
                    <div class="mb-2">
                        <img src="assets/images/layouts/layout-2.jpg" class="img-fluid img-thumbnail" alt="layout-2">
                    </div>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input theme-choice" type="checkbox" id="dark-mode-switch" data-bsStyle="assets/css/bootstrap-dark.min.css" data-appStyle="assets/css/app-dark.min.css">
                        <label class="form-check-label" for="dark-mode-switch">Dark Mode</label>
                    </div>
    
                    <div class="mb-2">
                        <img src="assets/images/layouts/layout-3.jpg" class="img-fluid img-thumbnail" alt="layout-3">
                    </div>
                    <div class="form-check form-switch mb-5">
                        <input class="form-check-input theme-choice" type="checkbox" id="rtl-mode-switch" data-appStyle="assets/css/app-rtl.min.css">
                        <label class="form-check-label" for="rtl-mode-switch">RTL Mode</label>
                    </div>

            
                </div>

            </div> <!-- end slimscroll-menu-->
        </div>
        <!-- /Right-bar -->

        <!-- Right bar overlay-->
        <div class="rightbar-overlay"></div>

6. Now guys we need to add below into src/app/app.routes.ts to links components to routes:

import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

export const routes: Routes = [
      {
        path: '', title: 'Dashboard Page', component: DashboardComponent,
      },
      
];

7. Now guys we need to add below code into our project/src/index.html file for styles and scripts or we can also call this styles/scripts inside angular.json file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dashboard | Reactly - Admin & Dashboard Template</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- App favicon -->
  <link rel="shortcut icon" href="assets/images/favicon.ico">

  <!-- plugin css -->
  <link href="assets/css/jsvectormap.min.css" rel="stylesheet" type="text/css" />

  <!-- Layout Js -->
  <script src="assets/js/layout.js"></script>

  <!-- Bootstrap Css -->
  <link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
  <!-- Icons Css -->
  <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
  <!-- App Css-->
  <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />s
</head>
<body>
  <app-root></app-root>
  <!-- JAVASCRIPT -->
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="assets/js/metisMenu.min.js"></script>
  <script src="assets/js/simplebar.min.js"></script>
  <script src="assets/js/waves.min.js"></script>

  <!-- apexcharts -->
  <script src="assets/js/apexcharts.min.js"></script>

  <!-- Vector map-->
  <script src="assets/js/jsvectormap.min.js"></script>
  <script src="assets/js/world-merc.js"></script>

  <!-- echarts js -->
  <script src="assets/js/echarts.min.js"></script>

  <script src="assets/js/dashboard.init.js"></script>

  <!-- App js -->
  <script src="assets/js/app.js"></script>
</body>
</html>

8. Now guys here is the github link and from where we will get the all the assets like images, css, js and fonts:

GitHub Link

Friends in the end must run ng serve command into your terminal to run the angular 17 project(localhost:4200).

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

March 27, 2024

Shopping Cart using Signals Angular (17+)

Hello everyone, if you’re in search of a shopping cart in Angular 17+, then you’ve come to the right place! Today this blog post I will show you Shopping Cart using Signals Angular (17+).

Live Demo

Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:

Guys now here is the complete code snippet for Shopping Cart using Signals Angular (17+):

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angularcart//Create new Angular Project

cd angularcart// Go inside the Angular Project Folder

2. Guys now we need to run below commands to create components to our angular application:

ng g c shopping-cart

3. Now guys we need to add below code into our scr/app/app.component.html file for main output:

<router-outlet></router-outlet>

4. Guys now we need to create new file `mock.items.ts` inside shopping-cart folder and add below code inside it and we wil have few demo items:

export const mockItems: any[] = [
    {
      icon: '????',
      productName: 'Avocado',
      productId: '001',
      quantity: 2,
      price: 12,
    },
    {
      icon: '????',
      productName: 'Apples',
      productId: '002',
      quantity: 1,
      price: 22,
    },
    {
      icon: '????',
      productName: 'Carrots',
      productId: '003',
      quantity: 1,
      price: 32,
    },
  ];

5. Now guys create new file `item.icons.ts` inside shopping-cart folder and add below code inside that file:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-item-with-icon',
  standalone: true,
  template: `
    <div>
      <span class="item-icon">{{ item.icon }}</span>
      <span class="item-details">
        <b>{{ item.productName }}</b> - {{ item.quantity }} x £{{ item.price }}
      </span>
    </div>
  `,
  styles: [
    `
    .item-icon {
      font-size: 24px;
    }

    .item-details {
      margin-left: 10px;
    }
  `,
  ],
})
export class ItemWithIconComponent {
  @Input() item: any;
}

6. Now guys create new file `cart.service.ts` inside shopping-cart folder and add below code inside it:

import { Injectable, signal } from '@angular/core';
import { CartItem, ShoppingCart } from './cart-item.interface';
import { mockItems } from './mock.items';

@Injectable({
  providedIn: 'root',
})
export class CartService {
  cart = signal<ShoppingCart>({
    items: mockItems,
    totalAmount: this.calculateTotalAmount(mockItems),
  });

  private calculateTotalAmount(items: CartItem[]): number {
    return items.reduce((total, item) => total + item.price * item.quantity, 0);
  }
  addItem(item: CartItem) {
    this.cart.update((currentCart) => {
      const existingItem = currentCart.items.find(
        (i) => i.productId === item.productId
      );

      if (existingItem) {
        // Increment quantity if item already exists
        existingItem.quantity += item.quantity;
      } else {
        // Add the new item if it doesn't exist
        currentCart.items.push(item);
      }

      currentCart.totalAmount += item.price * item.quantity;

      return currentCart;
    });
  }

  removeItem(productId: string) {
    this.cart.update((currentCart) => {
      const item = currentCart.items.find((i) => i.productId === productId);

      if (item) {
        currentCart.totalAmount -= item.price * item.quantity;
        currentCart.items = currentCart.items.filter(
          (i) => i.productId !== productId
        );
      }

      return currentCart;
    });
  }
}

7. Now guys create new file `cart-item.interface.ts` inside shopping-cart folder and add below code inside it:

export interface CartItem {
    productId: string;
    productName: string;
    price: number;
    quantity: number;
  }
  
  export interface ShoppingCart {
    items: CartItem[];
    totalAmount: number;
  }

8. Now guys add below code inside app/app.routes.ts file:

import { Routes } from '@angular/router';

import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
export const routes: Routes = [
      {
        path: '', title: 'Dashboard Page', component: ShoppingCartComponent,
      }
];

9. Now guys add below code inside app/shopping-cart/shopping-cart.component.ts file:

import { Component } from '@angular/core';
import { CartService } from './cart.service';
import { CommonModule } from '@angular/common';
import { ItemWithIconComponent } from './item.icons';
@Component({
  selector: 'app-shopping-cart',
  standalone: true,
  imports: [CommonModule, ItemWithIconComponent],
  styles: [
    `
    div {
      font-family: 'Arial', sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }

    h1 {
      color: #333;
    }

    .cart-item {
      margin-bottom: 15px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .product-info {
      flex-grow: 1;
    }

    .remove-button {
      background-color: #dc3545;
      color: #fff;
      border: none;
      padding: 5px 10px;
      border-radius: 3px;
      cursor: pointer;
    }

    .total-amount {
      margin-top: 15px;
      font-size: 18px;
    }

    .add-button {
      background-color: #28a745;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 3px;
      cursor: pointer;
    }
    .discount {
      margin-left: 15px;
    }
    .discount:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }
  `,
  ],
  template: `
    <div>
      <h1>Shopping Cart using Signals Angular (17+)</h1>

      <div *ngFor="let item of cartItems" class="cart-item">
        <div class="product-info">
         <app-item-with-icon [item]="item"></app-item-with-icon>
        </div>
        <button (click)="removeItem(item.productId)" class="remove-button">Remove</button>
        <!-- <p>{{ item | json }}</p> -->
      </div>

      <hr>

      <div class="total-amount">
        <strong>Total:</strong> £{{ totalAmount }}
      </div>
      <button (click)="addItem()" class="add-button">???? Add Item</button>
      <button (click)="applyDiscount()" [disabled]="isDiscountApplied" class="add-button discount">???? Apply Discount 10%</button>
    </div>
  `,
})
export class ShoppingCartComponent {
  cartItems = this.cartService.cart().items;
  totalAmount = this.cartService.cart().totalAmount;
  isDiscountApplied = false;

  constructor(private cartService: CartService) {}

  addItem() {
    // fixed added product
    const newItem: any = {
      icon: '????',
      productName: 'bananas',
      productId: '004',
      quantity: 1,
      price: 10,
    };

    this.cartService.addItem(newItem);
    this.udpateCart();
  }

  removeItem(productId: string) {
    this.cartService.removeItem(productId);
    this.udpateCart();
  }

  udpateCart() {
    // Update cartItems and totalAmount after removing an item
    this.cartItems = this.cartService.cart().items;
    this.totalAmount = this.cartService.cart().totalAmount;
  }

  applyDiscount() {
    if (!this.isDiscountApplied) {
      //  subtract 10%
      this.totalAmount -= this.totalAmount * 0.1;
      this.isDiscountApplied = true;
    }
  }
}

Friends in the end must run ng serve command into your terminal to run the angular 17 project(localhost:4200).

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

March 26, 2024

Angular 17 Bootstrap 5 Most Downloaded Free Admin Template

Live Demo

Key Features:

Built on Angular 17 + Bootstrap 5
CSS3 & HTML5
Clean & minimal design
Cross-browser tested & optimized
Full-width layouts
Gulp based workflow
Opinionated code formatter Prettier for a consistent codebase
Modular markup based on Cards & Utility classes
Interactive and functional components and pages
FontAwesome 5 + material icons + feather icon
ApexCharts
W3C validated HTML pages

Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:

Guys now here is the complete code snippet with GitHub link following assets(css, js, fonts and images):

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angularadmin //Create new Angular Project

cd angularadmin // Go inside the Angular Project Folder

2. Guys now we need to run below commands to create components to our angular application:

ng g c dashboard

3. Now guys we need to add below code into our scr/app/app.component.html file for main output:

<router-outlet></router-outlet>

4. Now guys we need to add below code into our scr/app/dashboard/dashboard.component.ts file making routing working:

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.css'
})
export class DashboardComponent {

}

5. Now guys we need to add below code into our scr/app/dashboard/dashboard.component.html file:

<div class="loader-bg">
    <div class="loader-track">
    <div class="loader-fill"></div>
    </div>
    </div>
    
    
    <nav class="pc-sidebar">
    <div class="navbar-wrapper">
    <div class="m-header">
    <a href="#" class="b-brand text-primary">
    
    <img src="assets/images/logo-dark.svg" alt class="logo logo-lg">
    </a>
    </div>
    <div class="navbar-content">
    <ul class="pc-navbar">
    <li class="pc-item pc-caption">
    <label>Dashboard</label>
    <i class="ti ti-dashboard"></i>
    </li>
    <li class="pc-item">
    <a href="#" class="pc-link"><span class="pc-micon"><i class="ti ti-dashboard"></i></span><span class="pc-mtext">Default</span></a>
    </li>
    <li class="pc-item pc-caption">
    <label>Pages</label>
    <i class="ti ti-news"></i>
    </li>
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link"><span class="pc-micon"><i class="ti ti-key"></i></span><span class="pc-mtext">Authentication</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link">Authentication 1<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" target="_blank" href="#">Login</a></li>
    <li class="pc-item"><a class="pc-link" target="_blank" href="#">Register</a></li>
    </ul>
    </li>
    </ul>
    </li>
    
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link"><span class="pc-micon"><i class="ti ti-bug"></i></span><span class="pc-mtext">Maintenance</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" target="_blank" href="#">Error 404</a></li>
    </ul>
    </li>
    <li class="pc-item pc-caption">
    <label>Other</label>
    <i class="ti ti-brand-chrome"></i>
    </li>
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link"><span class="pc-micon"><i class="ti ti-menu"></i></span><span class="pc-mtext">Menu
    levels</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="#!">Level 2.1</a></li>
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link">Level 2.2<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="#!">Level 3.1</a></li>
    <li class="pc-item"><a class="pc-link" href="#!">Level 3.2</a></li>
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link">Level 3.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="#!">Level 4.1</a></li>
    <li class="pc-item"><a class="pc-link" href="#!">Level 4.2</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link">Level 2.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="#!">Level 3.1</a></li>
    <li class="pc-item"><a class="pc-link" href="#!">Level 3.2</a></li>
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link">Level 3.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="#!">Level 4.1</a></li>
    <li class="pc-item"><a class="pc-link" href="#!">Level 4.2</a></li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    <li class="pc-item"><a href="#" class="pc-link"><span class="pc-micon"><i class="ti ti-brand-chrome"></i></span><span class="pc-mtext">Sample page</span></a></li>
    </ul>
    <div class="pc-navbar-card bg-primary rounded">
    <h4 class="text-white">More Free Demos</h4>
    <a href="https://therichpost.com/category/free-admin-dashboard-templates/" target="_blank" class="btn btn-light text-primary">Free Admins</a>
    </div>
    <div class="w-100 text-center">
    <div class="badge theme-version badge rounded-pill bg-light text-dark f-12"></div>
    </div>
    </div>
    </div>
    </nav>
     
    <header class="pc-header">
    <div class="header-wrapper"> 
    <div class="me-auto pc-mob-drp">
    <ul class="list-unstyled">
    <li class="pc-h-item header-mobile-collapse">
    <a href="#" class="pc-head-link head-link-secondary ms-0" id="sidebar-hide">
    <i class="ti ti-menu-2"></i>
    </a>
    </li>
    <li class="pc-h-item pc-sidebar-popup">
    <a href="#" class="pc-head-link head-link-secondary ms-0" id="mobile-collapse">
    <i class="ti ti-menu-2"></i>
    </a>
    </li>
    <li class="dropdown pc-h-item d-inline-flex d-md-none">
    <a class="pc-head-link head-link-secondary dropdown-toggle arrow-none m-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
    <i class="ti ti-search"></i>
    </a>
    <div class="dropdown-menu pc-h-dropdown drp-search">
    <form class="px-3">
    <div class="form-group mb-0 d-flex align-items-center">
    <i data-feather="search"></i>
    <input type="search" class="form-control border-0 shadow-none" placeholder="Search here. . .">
    </div>
    </form>
    </div>
    </li>
    <li class="pc-h-item d-none d-md-inline-flex">
    <form class="header-search">
    <i data-feather="search" class="icon-search"></i>
    <input type="search" class="form-control" placeholder="Search here. . .">
    <button class="btn btn-light-secondary btn-search"><i class="ti ti-adjustments-horizontal"></i></button>
    </form>
    </li>
    </ul>
    </div>
    
    <div class="ms-auto">
    <ul class="list-unstyled">
    <li class="dropdown pc-h-item pc-mega-menu">
    <a class="pc-head-link head-link-secondary dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
    <i class="ti ti-access-point"></i>
    </a>
    <div class="dropdown-menu pc-h-dropdown pc-mega-dmenu">
    <div class="row g-0">
    <div class="col text-center image-block">
    <img src="assets/images/pages/img-megamenu.svg" alt="image" class="img-fluid rounded">
    </div>
    <div class="col">
    <h6 class="mega-title">UI Components</h6>
    <ul class="pc-mega-list">
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Alerts</a></li>
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Accordions</a></li>
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Avatars</a></li>
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Badges</a></li>
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Breadcrumbs</a></li>
    </ul>
    </div>
    <div class="col">
    <h6 class="mega-title">UI Components</h6>
    <ul class="pc-mega-list">
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Menus</a></li>
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Modals</a></li>
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Pagination</a></li>
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Search Bar</a></li>
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Tabs</a></li>
    </ul>
    </div>
    <div class="col">
    <h6 class="mega-title">Advance Components</h6>
    <ul class="pc-mega-list">
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Advanced Stats</a></li>
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Advanced Cards</a></li>
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Lightbox</a></li>
    <li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Notification</a></li>
    </ul>
    </div>
    </div>
    </div>
    </li>
    <li class="dropdown pc-h-item">
    <a class="pc-head-link head-link-primary dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
    <i class="ti ti-language"></i>
    </a>
    <div class="dropdown-menu dropdown-menu-end pc-h-dropdown">
    <a href="#!" class="dropdown-item">
    <span>English <small>(UK)</small></span>
    </a>
    <a href="#!" class="dropdown-item">
    <span>français <small>(French)</small></span>
    </a>
    <a href="#!" class="dropdown-item">
    <span>Română <small>(Romanian)</small></span>
    </a>
    <a href="#!" class="dropdown-item">
    <span>中国人 <small>(Chinese)</small></span>
    </a>
    </div>
    </li>
    <li class="dropdown pc-h-item">
    <a class="pc-head-link head-link-secondary dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
    <i class="ti ti-bell"></i>
    </a>
    <div class="dropdown-menu dropdown-notification dropdown-menu-end pc-h-dropdown">
    <div class="dropdown-header">
    <a href="#!" class="link-primary float-end text-decoration-underline">Mark as all read</a>
    <h5>All Notification <span class="badge bg-warning rounded-pill ms-1">01</span></h5>
    </div>
    <div class="dropdown-header px-0 text-wrap header-notification-scroll position-relative" style="max-height: calc(100vh - 215px)">
    <div class="list-group list-group-flush w-100">
    <div class="list-group-item">
    <select class="form-select">
    <option value="all">All Notification</option>
    <option value="new">New</option>
    <option value="unread">Unread</option>
    <option value="other">Other</option>
    </select>
    </div>
    <div class="list-group-item list-group-item-action">
    <div class="d-flex">
    <div class="flex-shrink-0">
    <img src="assets/images/user/avatar-2.jpg" alt="user-image" class="user-avtar">
    </div>
    <div class="flex-grow-1 ms-1">
    <span class="float-end text-muted">2 min ago</span>
    <h5>John Doe</h5>
    <p class="text-body fs-6">It is a long established fact that a reader will be distracted </p>
    <div class="badge rounded-pill bg-light-danger">Unread</div>
    <div class="badge rounded-pill bg-light-warning">New</div>
    </div>
    </div>
    </div>
    <div class="list-group-item list-group-item-action">
    <div class="d-flex">
    <div class="flex-shrink-0">
    <div class="user-avtar bg-light-success"><i class="ti ti-building-store"></i></div>
    </div>
    <div class="flex-grow-1 ms-1">
    <span class="float-end text-muted">3 min ago</span>
    <h5>Store Verification Done</h5>
    <p class="text-body fs-6">We have successfully received your request.</p>
    <div class="badge rounded-pill bg-light-danger">Unread</div>
    </div>
    </div>
    </div>
    <div class="list-group-item list-group-item-action">
    <div class="d-flex">
    <div class="flex-shrink-0">
    <div class="user-avtar bg-light-primary"><i class="ti ti-mailbox"></i></div>
    </div>
    <div class="flex-grow-1 ms-1">
    <span class="float-end text-muted">5 min ago</span>
    <h5>Check Your Mail.</h5>
    <p class="text-body fs-6">All done! Now check your inbox as you're in for a sweet treat! </p>
    <button class="btn btn-sm btn-primary">Mail <i class="ti ti-brand-telegram"></i></button>
    </div>
    </div>
    </div>
    <div class="list-group-item list-group-item-action">
    <div class="d-flex">
    <div class="flex-shrink-0">
    <img src="assets/images/user/avatar-1.jpg" alt="user-image" class="user-avtar">
    </div>
    <div class="flex-grow-1 ms-1">
    <span class="float-end text-muted">8 min ago</span>
    <h5>John Doe</h5>
    <p class="text-body fs-6">Uploaded two file on &nbsp;<strong>21 Jan 2020</strong></p>
    <div class="notification-file d-flex p-3 bg-light-secondary rounded">
    <i class="ti ti-arrow-bar-to-down"></i>
    <h5 class="m-0">demo.jpg</h5>
    </div>
    </div>
    </div>
    </div>
    <div class="list-group-item list-group-item-action">
    <div class="d-flex">
    <div class="flex-shrink-0">
    <img src="assets/images/user/avatar-3.jpg" alt="user-image" class="user-avtar">
    </div>
    <div class="flex-grow-1 ms-1">
    <span class="float-end text-muted">10 min ago</span>
    <h5>Joseph William</h5>
    <p class="text-body fs-6">It is a long established fact that a reader will be distracted </p>
    <div class="badge rounded-pill bg-light-success">Confirmation of Account</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="dropdown-divider"></div>
    <div class="text-center py-2">
    <a href="#!" class="link-primary">Mark as all read</a>
    </div>
    </div>
    </li>
    <li class="dropdown pc-h-item header-user-profile">
    <a class="pc-head-link head-link-primary dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
    <img src="assets/images/user/avatar-2.jpg" alt="user-image" class="user-avtar">
    <span>
    <i class="ti ti-settings"></i>
    </span>
    </a>
    <div class="dropdown-menu dropdown-user-profile dropdown-menu-end pc-h-dropdown">
    <div class="dropdown-header">
    <h4>Good Morning, <span class="small text-muted"> John Doe</span></h4>
    <p class="text-muted">Project Admin</p>
    <form class="header-search">
    <i data-feather="search" class="icon-search"></i>
    <input type="search" class="form-control" placeholder="Search profile options">
    </form>
    <hr>
    <div class="profile-notification-scroll position-relative" style="max-height: calc(100vh - 280px)">
    <div class="upgradeplan-block bg-light-warning rounded">
    <h4>More Free Admins</h4>
    <a href="https://therichpost.com/category/free-admin-dashboard-templates/" target="_blank" class="btn btn-warning">Free Admins</a>
    </div>
    <hr>
    <div class="settings-block bg-light-primary rounded">
    <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
    <label class="form-check-label" for="flexSwitchCheckDefault">Start DND Mode</label>
    </div>
    <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
    <label class="form-check-label" for="flexSwitchCheckChecked">Allow Notifications</label>
    </div>
    </div>
    <hr>
    <a href="#" class="dropdown-item">
    <i class="ti ti-settings"></i>
    <span>Account Settings</span>
    </a>
    <a href="#" class="dropdown-item">
    <i class="ti ti-user"></i>
    <span>Social Profile</span>
    </a>
    <a href="#" class="dropdown-item">
    <i class="ti ti-logout"></i>
    <span>Logout</span>
    </a>
    </div>
    </div>
    </div>
    </li>
    </ul>
    </div> </div>
    </header>
    
    
    <div class="pc-container">
    <div class="pc-content">
    
    <div class="row">
    
    <div class="col-xl-4 col-md-6">
    <div class="card bg-secondary-dark dashnum-card text-white overflow-hidden">
    <span class="round small"></span>
    <span class="round big"></span>
    <div class="card-body">
    <div class="row">
    <div class="col">
    <div class="avtar avtar-lg">
    <i class="text-white ti ti-credit-card"></i>
    </div>
    </div>
    <div class="col-auto">
    <div class="btn-group">
    <a href="#" class="avtar bg-secondary dropdown-toggle arrow-none" data-bs-toggle="dropdown" aria-expanded="false">
    <i class="ti ti-dots"></i>
    </a>
    <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item">Import Card</button></li>
    <li><button class="dropdown-item">Export</button></li>
    </ul>
    </div>
    </div>
    </div>
    <span class="text-white d-block f-34 f-w-500 my-2">1350 <i class="ti ti-arrow-up-right-circle opacity-50"></i></span>
    <p class="mb-0 opacity-50">Total Pending Orders</p>
    </div>
    </div>
    </div>
    <div class="col-xl-4 col-md-6">
    <div class="card bg-primary-dark dashnum-card text-white overflow-hidden">
    <span class="round small"></span>
    <span class="round big"></span>
    <div class="card-body">
    <div class="row">
    <div class="col">
    <div class="avtar avtar-lg">
    <i class="text-white ti ti-credit-card"></i>
    </div>
    </div>
    <div class="col-auto">
    <ul class="nav nav-pills justify-content-end mb-0" id="chart-tab-tab" role="tablist">
    <li class="nav-item" role="presentation">
    <button class="nav-link text-white active" id="chart-tab-home-tab" data-bs-toggle="pill" data-bs-target="#chart-tab-home" role="tab" aria-controls="chart-tab-home" aria-selected="true">Month</button
                            >
    </li>
    <li class="nav-item" role="presentation">
    <button class="nav-link text-white" id="chart-tab-profile-tab" data-bs-toggle="pill" data-bs-target="#chart-tab-profile" role="tab" aria-controls="chart-tab-profile" aria-selected="false">Year</button
                            >
    </li>
    </ul>
    </div>
    </div>
    <div class="tab-content" id="chart-tab-tabContent">
    <div class="tab-pane show active" id="chart-tab-home" role="tabpanel" aria-labelledby="chart-tab-home-tab" tabindex="0">
    <div class="row">
    <div class="col-6">
    <span class="text-white d-block f-34 f-w-500 my-2">$1305 <i class="ti ti-arrow-up-right-circle opacity-50"></i></span>
    <p class="mb-0 opacity-50">Total Earning</p>
    </div>
    <div class="col-6">
    <div id="tab-chart-1"></div>
    </div>
    </div>
    </div>
    <div class="tab-pane" id="chart-tab-profile" role="tabpanel" aria-labelledby="chart-tab-profile-tab" tabindex="0">
    <div class="row">
    <div class="col-6">
    <span class="text-white d-block f-34 f-w-500 my-2">$29961 <i class="ti ti-arrow-down-right-circle opacity-50"></i></span>
    <p class="mb-0 opacity-50">C/W Last Year</p>
    </div>
    <div class="col-6">
    <div id="tab-chart-2"></div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="col-xl-4 col-md-12">
    <div class="card bg-primary-dark dashnum-card dashnum-card-small text-white overflow-hidden">
    <span class="round bg-primary small"></span>
    <span class="round bg-primary big"></span>
    <div class="card-body p-3">
    <div class="d-flex align-items-center">
    <div class="avtar avtar-lg">
    <i class="text-white ti ti-credit-card"></i>
    </div>
    <div class="ms-2">
    <h4 class="text-white mb-1">$203k <i class="ti ti-arrow-up-right-circle opacity-50"></i></h4>
    <p class="mb-0 opacity-50 text-sm">Net Profit</p>
    </div>
    </div>
    </div>
    </div>
    <div class="card dashnum-card dashnum-card-small overflow-hidden">
    <span class="round bg-warning small"></span>
    <span class="round bg-warning big"></span>
    <div class="card-body p-3">
    <div class="d-flex align-items-center">
    <div class="avtar avtar-lg bg-light-warning">
    <i class="text-warning ti ti-credit-card"></i>
    </div>
    <div class="ms-2">
    <h4 class="mb-1">$550K <i class="ti ti-arrow-up-right-circle opacity-50"></i></h4>
    <p class="mb-0 opacity-50 text-sm">Total Revenue</p>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="col-xl-8 col-md-12">
    <div class="card">
    <div class="card-body">
    <div class="row mb-3 align-items-center">
    <div class="col">
    <small>Total Growth</small>
    <h3>$2,324.00</h3>
    </div>
    <div class="col-auto">
    <select class="form-select p-r-35">
    <option>Today</option>
    <option selected>This Month</option>
    <option>This Year</option>
    </select>
    </div>
    </div>
    <div id="growthchart"></div>
    </div>
    </div>
    </div>
    <div class="col-xl-4 col-md-12">
    <div class="card">
    <div class="card-body">
    <div class="row mb-3 align-items-center">
    <div class="col">
    <h4>Popular Stocks</h4>
    </div>
    <div class="col-auto"> </div>
    </div>
    <div class="rounded bg-light-secondary overflow-hidden mb-3">
    <div class="px-3 pt-3">
    <div class="row mb-1 align-items-start">
    <div class="col">
    <h5 class="text-secondary mb-0">Bajaj Finery</h5>
    <small class="text-muted">10% Profit</small>
    </div>
    <div class="col-auto">
    <h4 class="mb-0">$1839.00</h4>
    </div>
    </div>
    </div>
    <div id="bajajchart"></div>
    </div>
    <ul class="list-group list-group-flush">
    <li class="list-group-item px-0">
    <div class="row align-items-start">
    <div class="col">
    <h5 class="mb-0">Bajaj Finery</h5>
    <small class="text-success">10% Profit</small>
    </div>
    <div class="col-auto">
    <h4 class="mb-0">$1839.00<span class="ms-2 align-top avtar avtar-xxs bg-light-success"><i class="ti ti-chevron-up text-success"></i></span
                            ></h4>
    </div>
    </div>
    </li>
    <li class="list-group-item px-0">
    <div class="row align-items-start">
    <div class="col">
    <h5 class="mb-0">TTML</h5>
    <small class="text-danger">10% Profit</small>
    </div>
    <div class="col-auto">
    <h4 class="mb-0">$100.00<span class="ms-2 align-top avtar avtar-xxs bg-light-danger"><i class="ti ti-chevron-down text-danger"></i></span
                            ></h4>
    </div>
    </div>
    </li>
    <li class="list-group-item px-0">
    <div class="row align-items-start">
    <div class="col">
    <h5 class="mb-0">Reliance</h5>
    <small class="text-success">10% Profit</small>
    </div>
    <div class="col-auto">
    <h4 class="mb-0">$200.00<span class="ms-2 align-top avtar avtar-xxs bg-light-success"><i class="ti ti-chevron-up text-success"></i></span
                            ></h4>
    </div>
    </div>
    </li>
    <li class="list-group-item px-0">
    <div class="row align-items-start">
    <div class="col">
    <h5 class="mb-0">TTML</h5>
    <small class="text-danger">10% Profit</small>
    </div>
    <div class="col-auto">
    <h4 class="mb-0">$189.00<span class="ms-2 align-top avtar avtar-xxs bg-light-danger"><i class="ti ti-chevron-down text-danger"></i></span
                            ></h4>
    </div>
    </div>
    </li>
    <li class="list-group-item px-0">
    <div class="row align-items-start">
    <div class="col">
    <h5 class="mb-0">Stolon</h5>
    <small class="text-danger">10% Profit</small>
    </div>
    <div class="col-auto">
    <h4 class="mb-0">$189.00<span class="ms-2 align-top avtar avtar-xxs bg-light-danger"><i class="ti ti-chevron-down text-danger"></i></span
                            ></h4>
    </div>
    </div>
    </li>
    </ul>
    <div class="text-center">
    <a href="#!" class="b-b-primary text-primary">View all <i class="ti ti-chevron-right"></i></a>
    </div>
    </div>
    </div>
    </div>
    
    </div>
    
    </div>
    </div>
    
    <footer class="pc-footer">
    <div class="footer-wrapper container-fluid">
    <div class="row">
    <div class="col-sm-12 my-1">
    <p class="m-0">Jassa &#9829;</p>
    </div>
    </div>
    </div>
    </footer> 
    
    <div class="pct-c-btn">
    <a href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvas_pc_layout">
    <i class="ph-duotone ph-gear-six"></i>
    </a>
    </div>
    <div class="offcanvas border-0 pct-offcanvas offcanvas-end" tabindex="-1" id="offcanvas_pc_layout">
    <div class="offcanvas-header">
    <h5 class="offcanvas-title">Theme Customization</h5>
    <div class="d-inline-flex align-items-center gap-2">
    <button type="button" class="btn btn-sm rounded btn-outline-danger" id="layoutreset">Reset</button>
    <a type="button" class="avtar avtar-s btn-link-danger btn-pc-default " data-bs-dismiss="offcanvas" aria-label="Close"><i class="ti ti-x f-20"></i></a>
    </div>
    </div>
    <ul class="nav nav-tabs nav-fill pct-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation" data-bs-toggle="tooltip" title="Layout Settings">
    <button class="nav-link active" id="pct-1-tab" data-bs-toggle="tab" data-bs-target="#pct-1-tab-pane" type="button" role="tab" aria-controls="pct-1-tab-pane" aria-selected="true"><i class="ti ti-color-swatch"></i></button>
    </li>
    <li class="nav-item" role="presentation" data-bs-toggle="tooltip" title="Font Settings">
    <button class="nav-link" id="pct-2-tab" data-bs-toggle="tab" data-bs-target="#pct-2-tab-pane" type="button" role="tab" aria-controls="pct-2-tab-pane" aria-selected="false"><i class="ti ti-typography"></i></button>
    </li>
    </ul>
    <div class="pct-body customizer-body">
    <div class="offcanvas-body p-0">
    <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="pct-1-tab-pane" role="tabpanel" aria-labelledby="pct-1-tab" tabindex="0">
    <ul class="list-group list-group-flush">
    <li class="list-group-item">
    <div class="pc-dark">
    <div class="d-flex align-items-center">
    <div class="flex-grow-1 me-3">
    <h5 class="mb-1">Theme Mode</h5>
    <p class="text-muted text-sm mb-0">Light / Dark / System</p>
    </div>
    <div class="flex-shrink-0">
    <div class="row g-2 theme-color theme-layout">
    <div class="col-4">
    <div class="d-grid">
    <button class="preset-btn btn active" data-value="true" onclick="layout_change('light');" data-bs-toggle="tooltip" title="Light">
    <span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
    </button>
    </div>
    </div>
    <div class="col-4">
    <div class="d-grid">
    <button class="preset-btn btn" data-value="false" onclick="layout_change('dark');" data-bs-toggle="tooltip" title="Dark">
    <span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
    </button>
    </div>
    </div>
    <div class="col-4">
    <div class="d-grid">
    <button class="preset-btn btn" data-value="default" onclick="layout_change_default();" data-bs-toggle="tooltip" title="Automatically sets the theme based on user's operating system's color scheme.">
    <span class="pc-lay-icon d-flex align-items-center justify-content-center">
    <i class="ph-duotone ph-cpu"></i>
    </span>
    </button>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </li>
    <li class="list-group-item">
    <h5 class="mb-1">Accent color</h5>
    <p class="text-muted text-sm mb-2">Choose your primary theme color</p>
    <div class="theme-color preset-color">
    <a href="#!" class="active" data-value="preset-1"><i class="ti ti-check"></i></a>
    <a href="#!" data-value="preset-2"><i class="ti ti-check"></i></a>
    <a href="#!" data-value="preset-3"><i class="ti ti-check"></i></a>
    <a href="#!" data-value="preset-4"><i class="ti ti-check"></i></a>
    <a href="#!" data-value="preset-5"><i class="ti ti-check"></i></a>
    <a href="#!" data-value="preset-6"><i class="ti ti-check"></i></a>
    <a href="#!" data-value="preset-7"><i class="ti ti-check"></i></a>
    </div>
    </li>
    <li class="list-group-item">
    <div class="d-flex align-items-center">
    <div class="flex-grow-1 me-3">
    <h5 class="mb-1">Sidebar Caption</h5>
    <p class="text-muted text-sm mb-0">Caption Hide / Show</p>
    </div>
    <div class="flex-shrink-0">
    <div class="row g-2 theme-color theme-nav-caption">
    <div class="col-6">
    <div class="d-grid">
    <button class="preset-btn btn active" data-value="true" onclick="layout_caption_change('true');" data-bs-toggle="tooltip" title="Caption Show">
    <span class="pc-lay-icon"><span></span><span></span><span><span></span><span></span></span><span></span></span>
    </button>
    </div>
    </div>
    <div class="col-6">
    <div class="d-grid">
    <button class="preset-btn btn" data-value="false" onclick="layout_caption_change('false');" data-bs-toggle="tooltip" title="Caption Hide">
    <span class="pc-lay-icon"><span></span><span></span><span><span></span><span></span></span><span></span></span>
    </button>
    </div>
    </div>
    </div>
    </div>
    </div>
    </li>
    <li class="list-group-item">
    <div class="pc-rtl">
    <div class="d-flex align-items-center">
    <div class="flex-grow-1 me-3">
    <h5 class="mb-1">Theme Layout</h5>
    <p class="text-muted text-sm">LTR/RTL</p>
    </div>
    <div class="flex-shrink-0">
    <div class="row g-2 theme-color theme-direction">
    <div class="col-6">
    <div class="d-grid">
    <button class="preset-btn btn active" data-value="false" onclick="layout_rtl_change('false');" data-bs-toggle="tooltip" title="LTR">
    <span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
    </button>
    </div>
    </div>
    <div class="col-6">
    <div class="d-grid">
    <button class="preset-btn btn" data-value="true" onclick="layout_rtl_change('true');" data-bs-toggle="tooltip" title="RTL">
    <span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
    </button>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </li>
    <li class="list-group-item pc-box-width">
    <div class="pc-container-width">
    <div class="d-flex align-items-center">
    <div class="flex-grow-1 me-3">
    <h5 class="mb-1">Layout Width</h5>
    <p class="text-muted text-sm">Full / Fixed width</p>
    </div>
    <div class="flex-shrink-0">
    <div class="row g-2 theme-color theme-container">
    <div class="col-6">
    <div class="d-grid">
    <button class="preset-btn btn active" data-value="false" onclick="change_box_container('false')" data-bs-toggle="tooltip" title="Full Width">
    <span class="pc-lay-icon"><span></span><span></span><span></span><span><span></span></span></span>
    </button>
    </div>
    </div>
    <div class="col-6">
    <div class="d-grid">
    <button class="preset-btn btn" data-value="true" onclick="change_box_container('true')" data-bs-toggle="tooltip" title="Fixed Width">
    <span class="pc-lay-icon"><span></span><span></span><span></span><span><span></span></span></span>
    </button>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </li>
    </ul>
    </div>
    <div class="tab-pane fade" id="pct-2-tab-pane" role="tabpanel" aria-labelledby="pct-2-tab" tabindex="0">
    <ul class="list-group list-group-flush">
    <li class="list-group-item">
    <h5 class="mb-1">Font Style</h5>
    <p class="text-muted text-sm">Choose theme font</p>
    <div class="theme-color theme-font-style">
    <div class="form-check">
    <input class="form-check-input" type="radio" name="layout_font" id="layoutfontRoboto" checked onclick="font_change('Roboto')">
    <label class="form-check-label" for="layoutfontRoboto"> Roboto </label>
    </div>
    <div class="form-check">
    <input class="form-check-input" type="radio" name="layout_font" id="layoutfontPoppins" onclick="font_change('Poppins')">
    <label class="form-check-label" for="layoutfontPoppins"> Poppins </label>
    </div>
    <div class="form-check">
    <input class="form-check-input" type="radio" name="layout_font" id="layoutfontInter" onclick="font_change('Inter')">
    <label class="form-check-label" for="layoutfontInter"> Inter </label>
    </div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>

6. Now guys we need to add below into src/app/app.routes.ts to links components to routes:

import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

export const routes: Routes = [
      {
        path: '', title: 'Dashboard Page', component: DashboardComponent,
      },
      
];

7. Now guys we need to add below code into our project/src/index.html file for styles and scripts or we can also call this styles/scripts inside angular.json file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dashboard | Jassa Dashboard Template</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="assets/images/favicon.svg" type="image/x-icon"> 
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" id="main-font-link">

  <link rel="stylesheet" href="assets/fonts/tabler-icons.min.css">

  <link rel="stylesheet" href="assets/fonts/feather.css">

  <link rel="stylesheet" href="assets/fonts/fontawesome.css">

  <link rel="stylesheet" href="assets/fonts/material.css">

  <link rel="stylesheet" href="assets/css/style.css" id="main-style-link">
  <link rel="stylesheet" href="assets/css/style-preset.css">
</head>
<body>
  <app-root></app-root>
  <script src="assets/js/popper.min.js"></script>
  <script src="assets/js/simplebar.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/custom-font.js"></script>
  <script src="assets/js/pcoded.js"></script>
  <script src="assets/js/feather.min.js"></script>
  <script>layout_change('light');</script>
  <script>font_change("Roboto");</script>
  <script>change_box_container('false');</script>
  <script>layout_caption_change('true');</script>
  <script>layout_rtl_change('false');</script>
  <script>preset_change("preset-1");</script>
  <script src="assets/js/apexcharts.min.js"></script>
  <script src="assets/js/dashboard-default.js"></script>
</body>
</html>

8. Now guys here is the github link and from where we will get the all the assets like images, css, js and fonts:

GitHub Link

Friends in the end must run ng serve command into your terminal to run the angular 17 project(localhost:4200).

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

March 25, 2024

Tag: Angular 17

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system.

2. Now guys we need to add below code inside src/app/app.component.ts file:

3. Now guys we need to add below code inside src/app/app.component.html file:

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands.

Secondly we should also have latest node version installed on our system:

2. Now friends, here we need to run below commands into our project terminal to install pdfmake modules into our angular application:

3. Now friends we just need to add below code into src/app/app.component.ts file:

4. Now friends we just need to add below code into src/app/app.component.html file:

5. Guys in the end for bootstrap 5, I am using direct CDN inside my src/index.html file:

1. Here are the basics commands to install angular 11 on your system:

2. After done with above, you need to run below command to add @angular/material into your angular 8 application:

3. Now you need to add below code into your src/app/app.component.ts file:

4. Now you need to add below code into src/app/app.component.html file:

5. Now you need to add below code into src/app/app.component.css file:

Key Features:

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Guys now we need to run below commands to create components to our angular application:

3. Now guys we need to add below code into our scr/app/app.component.html file for main output:

4. Now guys we need to add below code into our scr/app/home/home.component.html file:

5. Now guys we need to add below into src/app/app.routes.ts to links components to routes:

7. Now guys we need to add below code into our project/src/index.html file for styles and scripts or we can also call this styles/scripts inside angular.json file:

8. Now guys here is the github link and from where we will get the all the assets like images, css, js and fonts:

Key Features:

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Guys now we need to run below commands to create components to our angular application:

3. Now guys we need to add below code into our scr/app/app.component.html file for main output:

4. Now guys we need to add below code into our scr/app/chat/chat.component.ts file making routing working:

5. Now guys we need to add below code into our scr/app/chat/chat.component.html file:

6. Now guys we need to add below into src/app/app.routes.ts to links components to routes:

7. Now guys we need to add below code into our project/src/index.html file for styles and scripts or we can also call this styles/scripts inside angular.json file:

8. Now guys here is the github link and from where we will get the all the assets like images, css, js and fonts:

1. Firstly, we need to run below commands into our terminal to get fresh angular 17 setup and we should have latest node version installed into our system:

2. After done with above setup, new we need to run below commands into our project terminal to get wow.js and bootstrap modules into our angular 17 application. I am adding bootstrap for better looks but we can skip that also:

3. Now we need to add below code into our project angular.json files to call the styles and scripts:

4. Now we need to add below code into our src/app/app.component.ts file:

5. Finally we need to add below code into our src/app/app.component.html file to get the final output on our browser:

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. First, ensure that your Angular project is set up and Bootstrap 5 is integrated. You can add Bootstrap to your project by running:

3. Then, include Bootstrap in your project by adding it to the styles, script array in your angular.json file:

4. Now guys we need to add below code inside app.component.ts file to define modal form functionality:

5. Guys now In your component’s template (e.g., app.component.html), create the Bootstrap modal and include the reactive form with validation feedback:

Key Features:

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Guys now we need to run below commands to create components to our angular application:

3. Now guys we need to add below code into our scr/app/app.component.html file for main output:

4. Now guys we need to add below code into our scr/app/dashboard/dashboard.component.ts file making routing working:

5. Now guys we need to add below code into our scr/app/dashboard/dashboard.component.html file:

6. Now guys we need to add below into src/app/app.routes.ts to links components to routes:

7. Now guys we need to add below code into our project/src/index.html file for styles and scripts or we can also call this styles/scripts inside angular.json file:

8. Now guys here is the github link and from where we will get the all the assets like images, css, js and fonts:

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Guys now we need to run below commands to create components to our angular application:

3. Now guys we need to add below code into our scr/app/app.component.html file for main output:

4. Guys now we need to create new file `mock.items.ts` inside shopping-cart folder and add below code inside it and we wil have few demo items:

5. Now guys create new file `item.icons.ts` inside shopping-cart folder and add below code inside that file:

6. Now guys create new file `cart.service.ts` inside shopping-cart folder and add below code inside it:

7. Now guys create new file `cart-item.interface.ts` inside shopping-cart folder and add below code inside it:

8. Now guys add below code inside app/app.routes.ts file:

9. Now guys add below code inside app/shopping-cart/shopping-cart.component.ts file:

Key Features:

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Guys now we need to run below commands to create components to our angular application:

3. Now guys we need to add below code into our scr/app/app.component.html file for main output:

4. Now guys we need to add below code into our scr/app/dashboard/dashboard.component.ts file making routing working:

5. Now guys we need to add below code into our scr/app/dashboard/dashboard.component.html file:

6. Now guys we need to add below into src/app/app.routes.ts to links components to routes:

7. Now guys we need to add below code into our project/src/index.html file for styles and scripts or we can also call this styles/scripts inside angular.json file:

8. Now guys here is the github link and from where we will get the all the assets like images, css, js and fonts: