Files
Booking-App/ui-pagination.html
2025-09-21 12:14:02 -04:00

1291 lines
70 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from travl-html.vercel.app/ui-pagination.html by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 21 Sep 2025 15:56:43 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="robots" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Travl : Hotel Admin Dashboard Bootstrap 5 Template" />
<meta property="og:title" content="Travl : Hotel Admin Dashboard Bootstrap 5 Template" />
<meta property="og:description" content="Travl : Hotel Admin Dashboard Bootstrap 5 Template" />
<meta property="og:image" content="../travl.dexignlab.com/xhtml/social-image.png" />
<meta name="format-detection" content="telephone=no">
<!-- PAGE TITLE HERE -->
<title>Travl Hotel Admin Dashboard</title>
<!-- FAVICONS ICON -->
<link rel="shortcut icon" type="image/png" href="images/favicon.png" />
<link href="vendor/jquery-nice-select/css/nice-select.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!--*******************
Preloader start
********************-->
<div id="preloader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
<!--*******************
Preloader end
********************-->
<!--**********************************
Main wrapper start
***********************************-->
<div id="main-wrapper">
<!--**********************************
Nav header start
***********************************-->
<div class="nav-header">
<a href="index.html" class="brand-logo">
<svg class="logo-abbr" xmlns="http://www.w3.org/2000/svg" width="47.426" height="56.91" viewBox="0 0 47.426 56.91">
<g id="Group_25" data-name="Group 25" transform="translate(-56 -32)">
<path id="hotel" d="M49.737,55.935a.948.948,0,0,1-.948.976h-5A3.794,3.794,0,0,1,40,53.116V34.146a3.794,3.794,0,0,1,3.794-3.794h4.98a.949.949,0,0,1,.949.949C49.717,49.164,49.687,54.3,49.737,55.935Zm-3.22-16.1a.949.949,0,1,0-1.9,0v4.031a.949.949,0,0,0,1.9,0Zm40.9-5.691v18.97a3.794,3.794,0,0,1-3.794,3.794h-5a.948.948,0,0,1-.948-.976c.05-1.634.019-6.76.018-24.633a.949.949,0,0,1,.949-.949h4.98A3.794,3.794,0,0,1,87.422,34.146ZM82.8,39.837a.949.949,0,1,0-1.9,0v4.031a.949.949,0,0,0,1.9,0ZM61.338,56.91H66.08a.949.949,0,0,0,.949-.949V47.07a.949.949,0,0,0-.949-.949H61.338a.949.949,0,0,0-.949.949v8.892A.949.949,0,0,0,61.338,56.91ZM75.8,20.63V55.962a.949.949,0,0,1-.949.949h-4.98a.949.949,0,0,1-.949-.949V45.172a.949.949,0,0,0-.949-.949H59.441a.949.949,0,0,0-.949.949V55.962a.949.949,0,0,1-.949.949h-4.98a.949.949,0,0,1-.949-.949V20.63a3.794,3.794,0,0,1,3.794-3.794h16.6A3.794,3.794,0,0,1,75.8,20.63ZM68.452,36.517a.949.949,0,0,0-.949-.949H59.915a.949.949,0,0,0,0,1.9H67.5A.948.948,0,0,0,68.452,36.517Zm1.66-9.129a.949.949,0,0,0-.949-.949H58.255a.949.949,0,1,0,0,1.9H69.163A.948.948,0,0,0,70.111,27.388Z" transform="translate(16.004 32)" fill="#135846"/>
<path id="hotel-2" data-name="hotel" d="M70.2,5.874l-2.557,2.5.6,3.533a.949.949,0,0,1-.935,1.109c-.321,0-.154.043-3.6-1.776l-3.159,1.667a.95.95,0,0,1-1.378-1l.6-3.533-2.557-2.5a.949.949,0,0,1,.526-1.617l3.531-.515L62.858.529a.949.949,0,0,1,1.7,0l1.58,3.213,3.531.515A.949.949,0,0,1,70.2,5.874ZM53.812,10.728l-.112-.653c.439-.428.93-.772.715-1.435s-.82-.653-1.422-.741L52.7,7.3a.949.949,0,0,0-1.7,0l-.293.594c-.606.088-1.206.078-1.422.741s.279,1.011.715,1.435l-.112.653a.949.949,0,0,0,1.376,1l.587-.309c.6.316.732.417,1.028.417A.949.949,0,0,0,53.812,10.728Zm-8.3,4.743-.112-.653c.439-.428.93-.772.715-1.435s-.82-.653-1.422-.741l-.293-.594a.949.949,0,0,0-1.7,0l-.293.594c-.606.088-1.206.078-1.422.741s.279,1.011.715,1.435l-.112.653a.949.949,0,0,0,1.376,1l.587-.309c.6.316.732.417,1.028.417a.949.949,0,0,0,.935-1.109Zm32.02-4.743-.112-.653c.439-.428.93-.772.715-1.435s-.82-.653-1.422-.741c-.271-.55-.447-1.123-1.144-1.123s-.875.578-1.144,1.123l-.656.1a.949.949,0,0,0-.526,1.618l.475.463c-.1.6-.3,1.171.265,1.581s1.047.047,1.586-.236c.6.316.732.417,1.028.417a.949.949,0,0,0,.935-1.109Zm8.3,4.743-.112-.653c.439-.428.93-.772.715-1.435s-.82-.653-1.422-.741c-.271-.55-.447-1.123-1.144-1.123s-.875.578-1.144,1.123l-.656.1a.949.949,0,0,0-.526,1.618l.475.463c-.1.6-.3,1.171.265,1.581s1.047.047,1.586-.236c.6.316.732.417,1.028.417A.949.949,0,0,0,85.831,15.471Z" transform="translate(16.004 32)" fill="#e23428"/>
</g>
</svg>
<svg class="brand-title" xmlns="http://www.w3.org/2000/svg" width="143" height="46.359" viewBox="0 0 143 46.359">
<g id="Group_26" data-name="Group 26" transform="translate(-134 -40.641)">
<text id="Hotel_Admin_Dashboard" data-name="Hotel Admin Dashboard" transform="translate(134 83)" fill="#5d5449" font-size="12" font-family="Poppins-Light, Poppins" font-weight="300"><tspan x="0" y="0">Hotel Admin Dashboard</tspan></text>
<path id="Path_1948" data-name="Path 1948" d="M9.836,4.961a8.554,8.554,0,0,0,2.78-.574V8.579a11.32,11.32,0,0,1-2.214.713,12.526,12.526,0,0,1-2.464.213A5.382,5.382,0,0,1,3.761,8.087a6.357,6.357,0,0,1-1.28-4.361V-3.144H.466V-5.483L3.025-7.292l1.486-3.5H8.276v3.339h4.089v4.31H8.276V3.343Q8.276,4.961,9.836,4.961ZM25.589-7.748a8.321,8.321,0,0,1,1.427.118l.324.059-.515,5.428a8.461,8.461,0,0,0-1.956-.177,3.728,3.728,0,0,0-2.736.86,3.372,3.372,0,0,0-.853,2.479V9.212H15.528V-7.454h4.28l.9,2.662h.279a5.759,5.759,0,0,1,2.008-2.14A4.806,4.806,0,0,1,25.589-7.748ZM40.534,9.212l-1.1-2.206h-.118a6.55,6.55,0,0,1-2.368,1.971,7.822,7.822,0,0,1-3.118.53A4.892,4.892,0,0,1,30.12,8.094a5.508,5.508,0,0,1-1.353-3.972A4.518,4.518,0,0,1,30.62.158a10.133,10.133,0,0,1,5.369-1.464l2.78-.088v-.235a1.807,1.807,0,0,0-2.03-2.059,12.139,12.139,0,0,0-4.633,1.236l-1.662-3.8a15.987,15.987,0,0,1,7.355-1.5,7.146,7.146,0,0,1,4.964,1.589A5.682,5.682,0,0,1,44.52-1.717V9.212ZM36.268,5.446a2.594,2.594,0,0,0,1.787-.662A2.2,2.2,0,0,0,38.8,3.063V1.769l-1.324.059q-2.839.1-2.839,2.089Q34.636,5.446,36.268,5.446ZM52.8,9.212,46.447-7.454h6L55.273,2.4q.015.074.059.25t.088.419q.044.243.081.515a3.8,3.8,0,0,1,.037.507h.1a5.9,5.9,0,0,1,.265-1.662l2.957-9.885h5.987L58.494,9.212Zm19.784,0H66.834V-13.676h5.751Z" transform="translate(134 54.316)" fill="#212121"/>
</g>
</svg>
</a>
<div class="nav-control">
<div class="hamburger">
<span class="line"></span><span class="line"></span><span class="line"></span>
</div>
</div>
</div>
<!--**********************************
Nav header end
***********************************-->
<!--**********************************
Chat box start
***********************************-->
<div class="chatbox">
<div class="chatbox-close"></div>
<div class="custom-tab-1">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#notes">Notes</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#alerts">Alerts</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#chat">Chat</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active show" id="chat" role="tabpanel">
<div class="card mb-sm-3 mb-md-0 contacts_card dlab-chat-user-box">
<div class="card-header chat-list-header text-center">
<a href="javascript:void(0);"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"/><rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"/></g></svg></a>
<div>
<h6 class="mb-1">Chat List</h6>
<p class="mb-0">Show All</p>
</div>
<a href="javascript:void(0);"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg></a>
</div>
<div class="card-body contacts_body p-0 dlab-scroll " id="DLAB_W_Contacts_Body">
<ul class="contacts">
<li class="name-first-letter">A</li>
<li class="active dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/1.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon"></span>
</div>
<div class="user_info">
<span>Archie Parker</span>
<p>Kalid is online</p>
</div>
</div>
</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/2.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon offline"></span>
</div>
<div class="user_info">
<span>Alfie Mason</span>
<p>Taherah left 7 mins ago</p>
</div>
</div>
</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/3.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon"></span>
</div>
<div class="user_info">
<span>AharlieKane</span>
<p>Sami is online</p>
</div>
</div>
</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/4.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon offline"></span>
</div>
<div class="user_info">
<span>Athan Jacoby</span>
<p>Nargis left 30 mins ago</p>
</div>
</div>
</li>
<li class="name-first-letter">B</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/5.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon offline"></span>
</div>
<div class="user_info">
<span>Bashid Samim</span>
<p>Rashid left 50 mins ago</p>
</div>
</div>
</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/1.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon"></span>
</div>
<div class="user_info">
<span>Breddie Ronan</span>
<p>Kalid is online</p>
</div>
</div>
</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/2.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon offline"></span>
</div>
<div class="user_info">
<span>Ceorge Carson</span>
<p>Taherah left 7 mins ago</p>
</div>
</div>
</li>
<li class="name-first-letter">D</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/3.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon"></span>
</div>
<div class="user_info">
<span>Darry Parker</span>
<p>Sami is online</p>
</div>
</div>
</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/4.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon offline"></span>
</div>
<div class="user_info">
<span>Denry Hunter</span>
<p>Nargis left 30 mins ago</p>
</div>
</div>
</li>
<li class="name-first-letter">J</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/5.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon offline"></span>
</div>
<div class="user_info">
<span>Jack Ronan</span>
<p>Rashid left 50 mins ago</p>
</div>
</div>
</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/1.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon"></span>
</div>
<div class="user_info">
<span>Jacob Tucker</span>
<p>Kalid is online</p>
</div>
</div>
</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/2.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon offline"></span>
</div>
<div class="user_info">
<span>James Logan</span>
<p>Taherah left 7 mins ago</p>
</div>
</div>
</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/3.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon"></span>
</div>
<div class="user_info">
<span>Joshua Weston</span>
<p>Sami is online</p>
</div>
</div>
</li>
<li class="name-first-letter">O</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/4.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon offline"></span>
</div>
<div class="user_info">
<span>Oliver Acker</span>
<p>Nargis left 30 mins ago</p>
</div>
</div>
</li>
<li class="dlab-chat-user">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="images/avatar/5.jpg" class="rounded-circle user_img" alt=""/>
<span class="online_icon offline"></span>
</div>
<div class="user_info">
<span>Oscar Weston</span>
<p>Rashid left 50 mins ago</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="card chat dlab-chat-history-box d-none">
<div class="card-header chat-list-header text-center">
<a href="javascript:void(0);" class="dlab-chat-history-back">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon points="0 0 24 0 24 24 0 24"/><rect fill="#000000" opacity="0.3" transform="translate(15.000000, 12.000000) scale(-1, 1) rotate(-90.000000) translate(-15.000000, -12.000000) " x="14" y="7" width="2" height="10" rx="1"/><path d="M3.7071045,15.7071045 C3.3165802,16.0976288 2.68341522,16.0976288 2.29289093,15.7071045 C1.90236664,15.3165802 1.90236664,14.6834152 2.29289093,14.2928909 L8.29289093,8.29289093 C8.67146987,7.914312 9.28105631,7.90106637 9.67572234,8.26284357 L15.6757223,13.7628436 C16.0828413,14.136036 16.1103443,14.7686034 15.7371519,15.1757223 C15.3639594,15.5828413 14.7313921,15.6103443 14.3242731,15.2371519 L9.03007346,10.3841355 L3.7071045,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(9.000001, 11.999997) scale(-1, -1) rotate(90.000000) translate(-9.000001, -11.999997) "/></g></svg>
</a>
<div>
<h6 class="mb-1">Chat with Khelesh</h6>
<p class="mb-0 text-success">Online</p>
</div>
<div class="dropdown">
<a href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg></a>
<ul class="dropdown-menu dropdown-menu-end">
<li class="dropdown-item"><i class="fa fa-user-circle text-primary me-2"></i> View profile</li>
<li class="dropdown-item"><i class="fa fa-users text-primary me-2"></i> Add to btn-close friends</li>
<li class="dropdown-item"><i class="fa fa-plus text-primary me-2"></i> Add to group</li>
<li class="dropdown-item"><i class="fa fa-ban text-primary me-2"></i> Block</li>
</ul>
</div>
</div>
<div class="card-body msg_card_body dlab-scroll" id="DLAB_W_Contacts_Body3">
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<img src="images/avatar/1.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
<div class="msg_cotainer">
Hi, how are you samim?
<span class="msg_time">8:40 AM, Today</span>
</div>
</div>
<div class="d-flex justify-content-end mb-4">
<div class="msg_cotainer_send">
Hi Khalid i am good tnx how about you?
<span class="msg_time_send">8:55 AM, Today</span>
</div>
<div class="img_cont_msg">
<img src="images/avatar/2.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
</div>
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<img src="images/avatar/1.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
<div class="msg_cotainer">
I am good too, thank you for your chat template
<span class="msg_time">9:00 AM, Today</span>
</div>
</div>
<div class="d-flex justify-content-end mb-4">
<div class="msg_cotainer_send">
You are welcome
<span class="msg_time_send">9:05 AM, Today</span>
</div>
<div class="img_cont_msg">
<img src="images/avatar/2.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
</div>
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<img src="images/avatar/1.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
<div class="msg_cotainer">
I am looking for your next templates
<span class="msg_time">9:07 AM, Today</span>
</div>
</div>
<div class="d-flex justify-content-end mb-4">
<div class="msg_cotainer_send">
Ok, thank you have a good day
<span class="msg_time_send">9:10 AM, Today</span>
</div>
<div class="img_cont_msg">
<img src="images/avatar/2.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
</div>
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<img src="images/avatar/1.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
<div class="msg_cotainer">
Bye, see you
<span class="msg_time">9:12 AM, Today</span>
</div>
</div>
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<img src="images/avatar/1.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
<div class="msg_cotainer">
Hi, how are you samim?
<span class="msg_time">8:40 AM, Today</span>
</div>
</div>
<div class="d-flex justify-content-end mb-4">
<div class="msg_cotainer_send">
Hi Khalid i am good tnx how about you?
<span class="msg_time_send">8:55 AM, Today</span>
</div>
<div class="img_cont_msg">
<img src="images/avatar/2.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
</div>
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<img src="images/avatar/1.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
<div class="msg_cotainer">
I am good too, thank you for your chat template
<span class="msg_time">9:00 AM, Today</span>
</div>
</div>
<div class="d-flex justify-content-end mb-4">
<div class="msg_cotainer_send">
You are welcome
<span class="msg_time_send">9:05 AM, Today</span>
</div>
<div class="img_cont_msg">
<img src="images/avatar/2.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
</div>
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<img src="images/avatar/1.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
<div class="msg_cotainer">
I am looking for your next templates
<span class="msg_time">9:07 AM, Today</span>
</div>
</div>
<div class="d-flex justify-content-end mb-4">
<div class="msg_cotainer_send">
Ok, thank you have a good day
<span class="msg_time_send">9:10 AM, Today</span>
</div>
<div class="img_cont_msg">
<img src="images/avatar/2.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
</div>
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<img src="images/avatar/1.jpg" class="rounded-circle user_img_msg" alt=""/>
</div>
<div class="msg_cotainer">
Bye, see you
<span class="msg_time">9:12 AM, Today</span>
</div>
</div>
</div>
<div class="card-footer type_msg">
<div class="input-group">
<textarea class="form-control" placeholder="Type your message..."></textarea>
<div class="input-group-append">
<button type="button" class="btn btn-primary"><i class="fa fa-location-arrow"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="alerts" role="tabpanel">
<div class="card mb-sm-3 mb-md-0 contacts_card">
<div class="card-header chat-list-header text-center">
<a href="javascript:void(0);"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg></a>
<div>
<h6 class="mb-1">Notications</h6>
<p class="mb-0">Show All</p>
</div>
<a href="javascript:void(0);"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/><path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero"/></g></svg></a>
</div>
<div class="card-body contacts_body p-0 dlab-scroll" id="DLAB_W_Contacts_Body1">
<ul class="contacts">
<li class="name-first-letter">SEVER STATUS</li>
<li class="active">
<div class="d-flex bd-highlight">
<div class="img_cont primary">KK</div>
<div class="user_info">
<span>David Nester Birthday</span>
<p class="text-primary">Today</p>
</div>
</div>
</li>
<li class="name-first-letter">SOCIAL</li>
<li>
<div class="d-flex bd-highlight">
<div class="img_cont success">RU</div>
<div class="user_info">
<span>Perfection Simplified</span>
<p>Jame Smith commented on your status</p>
</div>
</div>
</li>
<li class="name-first-letter">SEVER STATUS</li>
<li>
<div class="d-flex bd-highlight">
<div class="img_cont primary">AU</div>
<div class="user_info">
<span>AharlieKane</span>
<p>Sami is online</p>
</div>
</div>
</li>
<li>
<div class="d-flex bd-highlight">
<div class="img_cont info">MO</div>
<div class="user_info">
<span>Athan Jacoby</span>
<p>Nargis left 30 mins ago</p>
</div>
</div>
</li>
</ul>
</div>
<div class="card-footer"></div>
</div>
</div>
<div class="tab-pane fade" id="notes">
<div class="card mb-sm-3 mb-md-0 note_card">
<div class="card-header chat-list-header text-center">
<a href="javascript:void(0);"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"/><rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"/></g></svg></a>
<div>
<h6 class="mb-1">Notes</h6>
<p class="mb-0">Add New Nots</p>
</div>
<a href="javascript:void(0);"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/><path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero"/></g></svg></a>
</div>
<div class="card-body contacts_body p-0 dlab-scroll" id="DLAB_W_Contacts_Body2">
<ul class="contacts">
<li class="active">
<div class="d-flex bd-highlight">
<div class="user_info">
<span>New order placed..</span>
<p>10 Aug 2020</p>
</div>
<div class="ms-auto">
<a href="javascript:void(0);" class="btn btn-primary btn-xs sharp me-1"><i class="fas fa-pencil-alt"></i></a>
<a href="javascript:void(0);" class="btn btn-danger btn-xs sharp"><i class="fa fa-trash"></i></a>
</div>
</div>
</li>
<li>
<div class="d-flex bd-highlight">
<div class="user_info">
<span>Youtube, a video-sharing website..</span>
<p>10 Aug 2020</p>
</div>
<div class="ms-auto">
<a href="javascript:void(0);" class="btn btn-primary btn-xs sharp me-1"><i class="fas fa-pencil-alt"></i></a>
<a href="javascript:void(0);" class="btn btn-danger btn-xs sharp"><i class="fa fa-trash"></i></a>
</div>
</div>
</li>
<li>
<div class="d-flex bd-highlight">
<div class="user_info">
<span>john just buy your product..</span>
<p>10 Aug 2020</p>
</div>
<div class="ms-auto">
<a href="javascript:void(0);" class="btn btn-primary btn-xs sharp me-1"><i class="fas fa-pencil-alt"></i></a>
<a href="javascript:void(0);" class="btn btn-danger btn-xs sharp"><i class="fa fa-trash"></i></a>
</div>
</div>
</li>
<li>
<div class="d-flex bd-highlight">
<div class="user_info">
<span>Athan Jacoby</span>
<p>10 Aug 2020</p>
</div>
<div class="ms-auto">
<a href="javascript:void(0);" class="btn btn-primary btn-xs sharp me-1"><i class="fas fa-pencil-alt"></i></a>
<a href="javascript:void(0);" class="btn btn-danger btn-xs sharp"><i class="fa fa-trash"></i></a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--**********************************
Chat box End
***********************************-->
<!--**********************************
Header start
***********************************-->
<div class="header">
<div class="header-content">
<nav class="navbar navbar-expand">
<div class="collapse navbar-collapse justify-content-between">
<div class="header-left">
<div class="dashboard_bar">
Pagination
</div>
</div>
<div class="nav-item d-flex align-items-center">
<div class="input-group search-area">
<input type="text" class="form-control" placeholder="">
<span class="input-group-text"><a href="javascript:void(0)"><i class="flaticon-381-search-2"></i></a></span>
</div>
</div>
<ul class="navbar-nav header-right">
<li class="nav-item dropdown notification_dropdown">
<a class="nav-link" href="javascript:void(0);">
<svg xmlns="http://www.w3.org/2000/svg" width="26.309" height="23.678" viewBox="0 0 26.309 23.678">
<path id="Path_1955" data-name="Path 1955" d="M163.217,78.043a7.409,7.409,0,0,1,10.5-10.454l.506.506.507-.506a7.409,7.409,0,0,1,10.5,10.454L175.181,88.686a1.316,1.316,0,0,1-1.912,0Zm11.008,7.823,9.1-9.632.027-.027a4.779,4.779,0,1,0-6.759-6.757l-1.435,1.437a1.317,1.317,0,0,1-1.861,0l-1.437-1.437a4.778,4.778,0,0,0-6.758,6.757l.026.027Z" transform="translate(-161.07 -65.42)" fill="#135846" fill-rule="evenodd"/>
</svg>
</a>
</li>
<li class="nav-item dropdown notification_dropdown">
<a class="nav-link bell-link " href="javascript:void(0);">
<svg xmlns="http://www.w3.org/2000/svg" width="26.667" height="24" viewBox="0 0 26.667 24">
<g id="_014-mail" data-name="014-mail" transform="translate(0 -21.833)">
<path id="Path_1962" data-name="Path 1962" d="M26.373,26.526A6.667,6.667,0,0,0,20,21.833H6.667A6.667,6.667,0,0,0,.293,26.526,6.931,6.931,0,0,0,0,28.5V39.166a6.669,6.669,0,0,0,6.667,6.667H20a6.669,6.669,0,0,0,6.667-6.667V28.5A6.928,6.928,0,0,0,26.373,26.526ZM6.667,24.5H20a4.011,4.011,0,0,1,3.947,3.36L13.333,33.646,2.72,27.86A4.011,4.011,0,0,1,6.667,24.5ZM24,39.166a4.012,4.012,0,0,1-4,4H6.667a4.012,4.012,0,0,1-4-4V30.873L12.693,36.34a1.357,1.357,0,0,0,1.28,0L24,30.873Z" transform="translate(0 0)" fill="#135846"/>
</g>
</svg>
<span class="badge light text-white bg-primary rounded-circle">76</span>
</a>
</li>
<li class="nav-item dropdown notification_dropdown">
<a class="nav-link" href="javascript:void(0);" role="button" data-bs-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="19.375" height="24" viewBox="0 0 19.375 24">
<g id="_006-notification" data-name="006-notification" transform="translate(-341.252 -61.547)">
<path id="Path_1954" data-name="Path 1954" d="M349.741,65.233V62.747a1.2,1.2,0,1,1,2.4,0v2.486a8.4,8.4,0,0,1,7.2,8.314v4.517l.971,1.942a3,3,0,0,1-2.683,4.342h-5.488a1.2,1.2,0,1,1-2.4,0h-5.488a3,3,0,0,1-2.683-4.342l.971-1.942V73.547a8.4,8.4,0,0,1,7.2-8.314Zm1.2,2.314a6,6,0,0,0-6,6v4.8a1.208,1.208,0,0,1-.127.536l-1.1,2.195a.6.6,0,0,0,.538.869h13.375a.6.6,0,0,0,.536-.869l-1.1-2.195a1.206,1.206,0,0,1-.126-.536v-4.8a6,6,0,0,0-6-6Z" transform="translate(0 0)" fill="#135846" fill-rule="evenodd"/>
</g>
</svg>
<span class="badge light text-white bg-primary rounded-circle">4</span>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div id="DZ_W_Notification1" class="widget-media dlab-scroll p-3" style="height:380px;">
<ul class="timeline">
<li>
<div class="timeline-panel">
<div class="media me-2">
<img alt="image" width="50" src="images/avatar/1.jpg">
</div>
<div class="media-body">
<h6 class="mb-1">Dr sultads Send you Photo</h6>
<small class="d-block">29 July 2020 - 02:26 PM</small>
</div>
</div>
</li>
<li>
<div class="timeline-panel">
<div class="media me-2 media-info">
KG
</div>
<div class="media-body">
<h6 class="mb-1">Resport created successfully</h6>
<small class="d-block">29 July 2020 - 02:26 PM</small>
</div>
</div>
</li>
<li>
<div class="timeline-panel">
<div class="media me-2 media-success">
<i class="fa fa-home"></i>
</div>
<div class="media-body">
<h6 class="mb-1">Reminder : Treatment Time!</h6>
<small class="d-block">29 July 2020 - 02:26 PM</small>
</div>
</div>
</li>
<li>
<div class="timeline-panel">
<div class="media me-2">
<img alt="image" width="50" src="images/avatar/1.jpg">
</div>
<div class="media-body">
<h6 class="mb-1">Dr sultads Send you Photo</h6>
<small class="d-block">29 July 2020 - 02:26 PM</small>
</div>
</div>
</li>
<li>
<div class="timeline-panel">
<div class="media me-2 media-danger">
KG
</div>
<div class="media-body">
<h6 class="mb-1">Resport created successfully</h6>
<small class="d-block">29 July 2020 - 02:26 PM</small>
</div>
</div>
</li>
<li>
<div class="timeline-panel">
<div class="media me-2 media-primary">
<i class="fa fa-home"></i>
</div>
<div class="media-body">
<h6 class="mb-1">Reminder : Treatment Time!</h6>
<small class="d-block">29 July 2020 - 02:26 PM</small>
</div>
</div>
</li>
</ul>
</div>
<a class="all-notification" href="javascript:void(0);">See all notifications <i class="ti-arrow-end"></i></a>
</div>
</li>
<li class="nav-item dropdown notification_dropdown">
<a class="nav-link " href="javascript:void(0);" data-bs-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="21.6" viewBox="0 0 24 21.6">
<g id="_008-chat" data-name="008-chat" transform="translate(-250.397 -62.547)">
<path id="Path_1956" data-name="Path 1956" d="M274.4,67.347a4.8,4.8,0,0,0-4.8-4.8H255.2a4.8,4.8,0,0,0-4.8,4.8v15.6a1.2,1.2,0,0,0,2.048.848l3.746-3.745a2.4,2.4,0,0,1,1.7-.7H269.6a4.8,4.8,0,0,0,4.8-4.8Zm-2.4,0a2.4,2.4,0,0,0-2.4-2.4H255.2a2.4,2.4,0,0,0-2.4,2.4v12.7l1.7-1.7a4.8,4.8,0,0,1,3.395-1.406H269.6a2.4,2.4,0,0,0,2.4-2.4Zm-15.6,7.2H266a1.2,1.2,0,1,0,0-2.4h-9.6a1.2,1.2,0,0,0,0,2.4Zm0-4.8h12a1.2,1.2,0,1,0,0-2.4h-12a1.2,1.2,0,0,0,0,2.4Z" fill="#135846" fill-rule="evenodd"/>
</g>
</svg>
<span class="badge light text-white bg-primary rounded-circle">15</span>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div id="DZ_W_TimeLine02" class="widget-timeline dlab-scroll style-1 ps ps--active-y p-3 height370">
<ul class="timeline">
<li>
<div class="timeline-badge primary"></div>
<a class="timeline-panel text-muted" href="javascript:void(0);">
<span>10 minutes ago</span>
<h6 class="mb-0">Youtube, a video-sharing website, goes live <strong class="text-primary">$500</strong>.</h6>
</a>
</li>
<li>
<div class="timeline-badge info">
</div>
<a class="timeline-panel text-muted" href="javascript:void(0);">
<span>20 minutes ago</span>
<h6 class="mb-0">New order placed <strong class="text-info">#XF-2356.</strong></h6>
<p class="mb-0">Quisque a consequat ante Sit amet magna at volutapt...</p>
</a>
</li>
<li>
<div class="timeline-badge danger">
</div>
<a class="timeline-panel text-muted" href="javascript:void(0);">
<span>30 minutes ago</span>
<h6 class="mb-0">john just buy your product <strong class="text-warning">Sell $250</strong></h6>
</a>
</li>
<li>
<div class="timeline-badge success">
</div>
<a class="timeline-panel text-muted" href="javascript:void(0);">
<span>15 minutes ago</span>
<h6 class="mb-0">StumbleUpon is acquired by eBay. </h6>
</a>
</li>
<li>
<div class="timeline-badge warning">
</div>
<a class="timeline-panel text-muted" href="javascript:void(0);">
<span>20 minutes ago</span>
<h6 class="mb-0">Mashable, a news website and blog, goes live.</h6>
</a>
</li>
<li>
<div class="timeline-badge dark">
</div>
<a class="timeline-panel text-muted" href="javascript:void(0);">
<span>20 minutes ago</span>
<h6 class="mb-0">Mashable, a news website and blog, goes live.</h6>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown header-profile">
<a class="nav-link" href="javascript:void(0);" role="button" data-bs-toggle="dropdown">
<img src="images/profile/pic1.jpg" width="20" alt=""/>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a href="app-profile.html" class="dropdown-item ai-icon">
<svg id="icon-user2" xmlns="http://www.w3.org/2000/svg" class="text-primary" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
<span class="ms-2">Profile </span>
</a>
<a href="email-inbox.html" class="dropdown-item ai-icon">
<svg id="icon-inbox1" xmlns="http://www.w3.org/2000/svg" class="text-success" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<span class="ms-2">Inbox </span>
</a>
<a href="login.html" class="dropdown-item ai-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="text-danger" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
<span class="ms-2">Logout </span>
</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!--**********************************
Header end ti-comment-alt
***********************************-->
<!--**********************************
Sidebar start
***********************************-->
<div class="dlabnav">
<div class="dlabnav-scroll">
<ul class="metismenu" id="menu">
<li><a class="has-arrow " href="javascript:void()" aria-expanded="false">
<i class="flaticon-025-dashboard"></i>
<span class="nav-text">Dashboard</span>
</a>
<ul aria-expanded="false">
<li><a href="index.html">Dashboard Light</a></li>
<li><a href="index-2.html">Dashboard Dark</a></li>
<li><a href="guest-list.html">Guest List</a></li>
<li><a href="guest-details.html">Guest Details</a></li>
<li><a href="concierge-list.html">Concierge List</a></li>
<li><a href="room-list.html">Room List</a></li>
<li><a href="reviews.html">Reviews</a></li>
</ul>
</li>
<li><a class="has-arrow " href="javascript:void()" aria-expanded="false">
<i class="flaticon-050-info"></i>
<span class="nav-text">Apps</span>
</a>
<ul aria-expanded="false">
<li><a href="app-profile.html">Profile</a></li>
<li><a href="post-details.html">Post Details</a></li>
<li><a class="has-arrow" href="javascript:void()" aria-expanded="false">Email</a>
<ul aria-expanded="false">
<li><a href="email-compose.html">Compose</a></li>
<li><a href="email-inbox.html">Inbox</a></li>
<li><a href="email-read.html">Read</a></li>
</ul>
</li>
<li><a href="app-calender.html">Calendar</a></li>
<li><a class="has-arrow" href="javascript:void()" aria-expanded="false">Shop</a>
<ul aria-expanded="false">
<li><a href="ecom-product-grid.html">Product Grid</a></li>
<li><a href="ecom-product-list.html">Product List</a></li>
<li><a href="ecom-product-detail.html">Product Details</a></li>
<li><a href="ecom-product-order.html">Order</a></li>
<li><a href="ecom-checkout.html">Checkout</a></li>
<li><a href="ecom-invoice.html">Invoice</a></li>
<li><a href="ecom-customers.html">Customers</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="has-arrow " href="javascript:void()" aria-expanded="false">
<i class="flaticon-041-graph"></i>
<span class="nav-text">Charts</span>
</a>
<ul aria-expanded="false">
<li><a href="chart-flot.html">Flot</a></li>
<li><a href="chart-morris.html">Morris</a></li>
<li><a href="chart-chartjs.html">Chartjs</a></li>
<li><a href="chart-chartist.html">Chartist</a></li>
<li><a href="chart-sparkline.html">Sparkline</a></li>
<li><a href="chart-peity.html">Peity</a></li>
</ul>
</li>
<li><a class="has-arrow " href="javascript:void()" aria-expanded="false">
<i class="flaticon-086-star"></i>
<span class="nav-text">Bootstrap</span>
</a>
<ul aria-expanded="false">
<li><a href="ui-accordion.html">Accordion</a></li>
<li><a href="ui-alert.html">Alert</a></li>
<li><a href="ui-badge.html">Badge</a></li>
<li><a href="ui-button.html">Button</a></li>
<li><a href="ui-modal.html">Modal</a></li>
<li><a href="ui-button-group.html">Button Group</a></li>
<li><a href="ui-list-group.html">List Group</a></li>
<li><a href="ui-card.html">Cards</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-dropdown.html">Dropdown</a></li>
<li><a href="ui-popover.html">Popover</a></li>
<li><a href="ui-progressbar.html">Progressbar</a></li>
<li><a href="ui-tab.html">Tab</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-pagination.html">Pagination</a></li>
<li><a href="ui-grid.html">Grid</a></li>
</ul>
</li>
<li><a class="has-arrow " href="javascript:void()" aria-expanded="false">
<i class="flaticon-045-heart"></i>
<span class="nav-text">Plugins</span>
</a>
<ul aria-expanded="false">
<li><a href="uc-select2.html">Select 2</a></li>
<li><a href="uc-nestable.html">Nestedable</a></li>
<li><a href="uc-noui-slider.html">Noui Slider</a></li>
<li><a href="uc-sweetalert.html">Sweet Alert</a></li>
<li><a href="uc-toastr.html">Toastr</a></li>
<li><a href="map-jqvmap.html">Jqv Map</a></li>
<li><a href="uc-lightgallery.html">Light Gallery</a></li>
</ul>
</li>
<li><a href="widget-basic.html" class="" aria-expanded="false">
<i class="flaticon-013-checkmark"></i>
<span class="nav-text">Widget</span>
</a>
</li>
<li><a class="has-arrow " href="javascript:void()" aria-expanded="false">
<i class="flaticon-072-printer"></i>
<span class="nav-text">Forms</span>
</a>
<ul aria-expanded="false">
<li><a href="form-element.html">Form Elements</a></li>
<li><a href="form-wizard.html">Wizard</a></li>
<li><a href="form-ckeditor.html">CkEditor</a></li>
<li><a href="form-pickers.html">Pickers</a></li>
<li><a href="form-validation.html">Form Validate</a></li>
</ul>
</li>
<li><a class="has-arrow " href="javascript:void()" aria-expanded="false">
<i class="flaticon-043-menu"></i>
<span class="nav-text">Table</span>
</a>
<ul aria-expanded="false">
<li><a href="table-bootstrap-basic.html">Bootstrap</a></li>
<li><a href="table-datatable-basic.html">Datatable</a></li>
</ul>
</li>
<li><a class="has-arrow " href="javascript:void()" aria-expanded="false">
<i class="flaticon-022-copy"></i>
<span class="nav-text">Pages</span>
</a>
<ul aria-expanded="false">
<li><a href="page-login.html">Login</a></li>
<li><a href="page-register.html">Register</a></li>
<li><a class="has-arrow" href="javascript:void()" aria-expanded="false">Error</a>
<ul aria-expanded="false">
<li><a href="page-error-400.html">Error 400</a></li>
<li><a href="page-error-403.html">Error 403</a></li>
<li><a href="page-error-404.html">Error 404</a></li>
<li><a href="page-error-500.html">Error 500</a></li>
<li><a href="page-error-503.html">Error 503</a></li>
</ul>
</li>
<li><a href="page-lock-screen.html">Lock Screen</a></li>
<li><a href="empty-page.html">Empty Page</a></li>
</ul>
</li>
</ul>
<div class="dropdown header-profile2 ">
<div class="header-info2 text-center">
<img src="images/profile/pic1.jpg" alt=""/>
<div class="sidebar-info">
<div>
<h5 class="font-w500 mb-0">William Johanson</h5>
<span class="fs-12">williamjohn@mail.com</span>
</div>
</div>
<div>
<a href="javascript:void(0);" class="btn btn-md text-secondary">Contact Us</a>
</div>
</div>
</div>
<div class="copyright">
<p class="text-center"><strong>Travl Hotel Admin Dashboard</strong> © 2021 All Rights Reserved</p>
<p class="fs-12 text-center">Made with <span class="heart"></span> by DexignLab</p>
</div>
</div>
</div>
<!--**********************************
Sidebar end
***********************************-->
<!--**********************************
Content body start
***********************************-->
<div class="content-body">
<div class="container-fluid">
<div class="row page-titles">
<ol class="breadcrumb">
<li class="breadcrumb-item active"><a href="javascript:void(0)">Bootstrap</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Pagination</a></li>
</ol>
</div>
<div class="row">
<div class="col-xl-6 col-lg-6">
<div class="card">
<div class="card-header d-block">
<h4 class="card-title">Pagination</h4>
<p class="mb-0 subtitle">Default pagination style</p>
</div>
<div class="card-body">
<nav>
<ul class="pagination">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-xs">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="card">
<div class="card-header d-block">
<h4 class="card-title">Pagination Gutter</h4>
<p class="mb-0 subtitle">add <code>.pagination-gutter</code> to change the style</p>
</div>
<div class="card-body">
<nav>
<ul class="pagination pagination-gutter">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm pagination-gutter">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-xs pagination-gutter">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="card">
<div class="card-header d-block">
<h4 class="card-title">Pagination Color</h4>
<p class="mb-0 subtitle">add <code>.pagination-gutter</code> to change the style</p>
</div>
<div class="card-body">
<nav>
<ul class="pagination pagination-gutter pagination-primary no-bg">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item "><a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-gutter pagination-danger">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm pagination-gutter pagination-info">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-xs pagination-gutter pagination-warning">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="card">
<div class="card-header d-block">
<h4 class="card-title">Pagination Circle</h4>
<p class="mb-0 subtitle">add <code>.pagination-circle</code> to change the style</p>
</div>
<div class="card-body">
<nav>
<ul class="pagination pagination-circle">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm pagination-circle">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-xs pagination-circle">
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item page-indicator">
<a class="page-link" href="javascript:void(0)">
<i class="la la-angle-right"></i></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!--**********************************
Content body end
***********************************-->
<!--**********************************
Footer start
***********************************-->
<div class="footer">
<div class="copyright">
<p>Copyright © Designed &amp; Developed by <a href="https://dexignlab.com/" target="_blank">DexignLab</a> 2021</p>
</div>
</div>
<!--**********************************
Footer end
***********************************-->
<!--**********************************
Support ticket button start
***********************************-->
<!--**********************************
Support ticket button end
***********************************-->
</div>
<!--**********************************
Main wrapper end
***********************************-->
<!--**********************************
Scripts
***********************************-->
<!-- Required vendors -->
<script src="vendor/global/global.min.js"></script>
<script src="vendor/jquery-nice-select/js/jquery.nice-select.min.js"></script>
<script src="js/custom.min.js"></script>
<script src="js/dlabnav-init.js"></script>
<script src="js/demo.js"></script>
<script src="js/styleSwitcher.js"></script>
</body>
<!-- Mirrored from travl-html.vercel.app/ui-pagination.html by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 21 Sep 2025 15:56:43 GMT -->
</html>