File: /home/xdas/public_html/oldsite/frontHtml/main-rtl/app-contact-detail.html
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
<title>Elite Admin Template - The Ultimate Multipurpose admin template</title>
<!-- Page CSS -->
<link href="dist/css/pages/contact-app-page.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="dist/css/style.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="skin-blue fixed-layout">
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="loader">
<div class="loader__figure"></div>
<p class="loader__label">Elite admin</p>
</div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper">
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- ============================================================== -->
<header class="topbar">
<nav class="navbar top-navbar navbar-expand-md navbar-dark">
<!-- ============================================================== -->
<!-- Logo -->
<!-- ============================================================== -->
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<!-- Logo icon --><b>
<!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
<!-- Dark Logo icon -->
<img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
<!-- Light Logo icon -->
<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo" />
</b>
<!--End Logo icon -->
<!-- Logo text --><span>
<!-- dark Logo text -->
<img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
<!-- Light Logo text -->
<img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span> </a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<div class="navbar-collapse">
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav mr-auto">
<!-- This is -->
<li class="nav-item"> <a class="nav-link nav-toggler d-block d-sm-none waves-effect waves-dark" href="javascript:void(0)"><i class="ti-menu"></i></a> </li>
<li class="nav-item"> <a class="nav-link sidebartoggler d-none d-lg-block d-md-block waves-effect waves-dark" href="javascript:void(0)"><i class="icon-menu"></i></a> </li>
<!-- ============================================================== -->
<!-- Search -->
<!-- ============================================================== -->
<li class="nav-item">
<form class="app-search d-none d-md-block d-lg-block">
<input type="text" class="form-control" placeholder="Search & enter">
</form>
</li>
</ul>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
<ul class="navbar-nav my-lg-0">
<!-- ============================================================== -->
<!-- Comment -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="ti-email"></i>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
</a>
<div class="dropdown-menu dropdown-menu-right mailbox animated bounceInDown">
<ul>
<li>
<div class="drop-title">Notifications</div>
</li>
<li>
<div class="message-center">
<!-- Message -->
<a href="javascript:void(0)">
<div class="btn btn-danger btn-circle"><i class="fa fa-link"></i></div>
<div class="mail-contnet">
<h5>Luanch Admin</h5> <span class="mail-desc">Just see the my new admin!</span> <span class="time">9:30 AM</span> </div>
</a>
<!-- Message -->
<a href="javascript:void(0)">
<div class="btn btn-success btn-circle"><i class="ti-calendar"></i></div>
<div class="mail-contnet">
<h5>Event today</h5> <span class="mail-desc">Just a reminder that you have event</span> <span class="time">9:10 AM</span> </div>
</a>
<!-- Message -->
<a href="javascript:void(0)">
<div class="btn btn-info btn-circle"><i class="ti-settings"></i></div>
<div class="mail-contnet">
<h5>Settings</h5> <span class="mail-desc">You can customize this template as you want</span> <span class="time">9:08 AM</span> </div>
</a>
<!-- Message -->
<a href="javascript:void(0)">
<div class="btn btn-primary btn-circle"><i class="ti-user"></i></div>
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
</a>
</div>
</li>
<li>
<a class="nav-link text-center link" href="javascript:void(0);"> <strong>Check all notifications</strong> <i class="fa fa-angle-right"></i> </a>
</li>
</ul>
</div>
</li>
<!-- ============================================================== -->
<!-- End Comment -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Messages -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle waves-effect waves-dark" href="" id="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="icon-note"></i>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
</a>
<div class="dropdown-menu mailbox dropdown-menu-right animated bounceInDown" aria-labelledby="2">
<ul>
<li>
<div class="drop-title">You have 4 new messages</div>
</li>
<li>
<div class="message-center">
<!-- Message -->
<a href="javascript:void(0)">
<div class="user-img"> <img src="../assets/images/users/1.jpg" alt="user" class="img-circle"> <span class="profile-status online pull-right"></span> </div>
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:30 AM</span> </div>
</a>
<!-- Message -->
<a href="javascript:void(0)">
<div class="user-img"> <img src="../assets/images/users/2.jpg" alt="user" class="img-circle"> <span class="profile-status busy pull-right"></span> </div>
<div class="mail-contnet">
<h5>Sonu Nigam</h5> <span class="mail-desc">I've sung a song! See you at</span> <span class="time">9:10 AM</span> </div>
</a>
<!-- Message -->
<a href="javascript:void(0)">
<div class="user-img"> <img src="../assets/images/users/3.jpg" alt="user" class="img-circle"> <span class="profile-status away pull-right"></span> </div>
<div class="mail-contnet">
<h5>Arijit Sinh</h5> <span class="mail-desc">I am a singer!</span> <span class="time">9:08 AM</span> </div>
</a>
<!-- Message -->
<a href="javascript:void(0)">
<div class="user-img"> <img src="../assets/images/users/4.jpg" alt="user" class="img-circle"> <span class="profile-status offline pull-right"></span> </div>
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
</a>
</div>
</li>
<li>
<a class="nav-link text-center link" href="javascript:void(0);"> <strong>See all e-Mails</strong> <i class="fa fa-angle-right"></i> </a>
</li>
</ul>
</div>
</li>
<!-- ============================================================== -->
<!-- End Messages -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- mega menu -->
<!-- ============================================================== -->
<li class="nav-item dropdown mega-dropdown"> <a class="nav-link dropdown-toggle waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="ti-layout-width-default"></i></a>
<div class="dropdown-menu animated bounceInDown">
<ul class="mega-dropdown-menu row">
<li class="col-lg-3 col-xlg-2 m-b-30">
<h4 class="m-b-20">CAROUSEL</h4>
<!-- CAROUSEL -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="container"> <img class="d-block img-fluid" src="../assets/images/big/img1.jpg" alt="First slide"></div>
</div>
<div class="carousel-item">
<div class="container"><img class="d-block img-fluid" src="../assets/images/big/img2.jpg" alt="Second slide"></div>
</div>
<div class="carousel-item">
<div class="container"><img class="d-block img-fluid" src="../assets/images/big/img3.jpg" alt="Third slide"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
<!-- End CAROUSEL -->
</li>
<li class="col-lg-3 m-b-30">
<h4 class="m-b-20">ACCORDION</h4>
<!-- Accordian -->
<div id="accordion" class="nav-accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h5> </div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high. </div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h5> </div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h5> </div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>
</div>
</li>
<li class="col-lg-3 m-b-30">
<h4 class="m-b-20">CONTACT US</h4>
<!-- Contact -->
<form>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputname1" placeholder="Enter Name"> </div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email"> </div>
<div class="form-group">
<textarea class="form-control" id="exampleTextarea" rows="3" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-info">Submit</button>
</form>
</li>
<li class="col-lg-3 col-xlg-4 m-b-30">
<h4 class="m-b-20">List style</h4>
<!-- List style -->
<ul class="list-style-none">
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> You can give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Forth link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another fifth link</a></li>
</ul>
</li>
</ul>
</div>
</li>
<!-- ============================================================== -->
<!-- End mega menu -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- User Profile -->
<!-- ============================================================== -->
<li class="nav-item dropdown u-pro">
<a class="nav-link dropdown-toggle waves-effect waves-dark profile-pic" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="../assets/images/users/1.jpg" alt="user" class=""> <span class="hidden-md-down">Mark <i class="fa fa-angle-down"></i></span> </a>
<div class="dropdown-menu dropdown-menu-right animated flipInY">
<!-- text-->
<a href="javascript:void(0)" class="dropdown-item"><i class="ti-user"></i> My Profile</a>
<!-- text-->
<a href="javascript:void(0)" class="dropdown-item"><i class="ti-wallet"></i> My Balance</a>
<!-- text-->
<a href="javascript:void(0)" class="dropdown-item"><i class="ti-email"></i> Inbox</a>
<!-- text-->
<div class="dropdown-divider"></div>
<!-- text-->
<a href="javascript:void(0)" class="dropdown-item"><i class="ti-settings"></i> Account Setting</a>
<!-- text-->
<div class="dropdown-divider"></div>
<!-- text-->
<a href="login.html" class="dropdown-item"><i class="fa fa-power-off"></i> Logout</a>
<!-- text-->
</div>
</li>
<!-- ============================================================== -->
<!-- End User Profile -->
<!-- ============================================================== -->
<li class="nav-item right-side-toggle"> <a class="nav-link waves-effect waves-light" href="javascript:void(0)"><i class="ti-settings"></i></a></li>
</ul>
</div>
</nav>
</header>
<!-- ============================================================== -->
<!-- End Topbar header -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<aside class="left-sidebar">
<!-- Sidebar scroll-->
<div class="scroll-sidebar">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="user-pro"> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><img src="../assets/images/users/1.jpg" alt="user-img" class="img-circle"><span class="hide-menu">Mark Jeckson</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="javascript:void(0)"><i class="ti-user"></i> My Profile</a></li>
<li><a href="javascript:void(0)"><i class="ti-wallet"></i> My Balance</a></li>
<li><a href="javascript:void(0)"><i class="ti-email"></i> Inbox</a></li>
<li><a href="javascript:void(0)"><i class="ti-settings"></i> Account Setting</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-power-off"></i> Logout</a></li>
</ul>
</li>
<li class="nav-small-cap">--- PERSONAL</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="icon-speedometer"></i><span class="hide-menu">Dashboard <span class="badge badge-pill badge-cyan ml-auto">4</span></span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="index.html">Minimal </a></li>
<li><a href="index2.html">Analytical</a></li>
<li><a href="index3.html">Demographical</a></li>
<li><a href="index4.html">Modern</a></li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-layout-grid2"></i><span class="hide-menu">Apps</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="app-calendar.html">Calendar</a></li>
<li><a href="app-chat.html">Chat app</a></li>
<li><a href="app-ticket.html">Support Ticket</a></li>
<li><a href="app-contact.html">Contact / Employee</a></li>
<li><a href="app-contact2.html">Contact Grid</a></li>
<li><a href="app-contact-detail.html">Contact Detail</a></li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-email"></i><span class="hide-menu">Inbox</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="app-email.html">Mailbox</a></li>
<li><a href="app-email-detail.html">Mailbox Detail</a></li>
<li><a href="app-compose.html">Compose Mail</a></li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-palette"></i><span class="hide-menu">Ui Elements <span class="badge badge-pill badge-primary text-white ml-auto">25</span></span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-user-card.html">User Cards</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-tab.html">Tab</a></li>
<li><a href="ui-tooltip-popover.html">Tooltip & Popover</a></li>
<li><a href="ui-tooltip-stylish.html">Tooltip stylish</a></li>
<li><a href="ui-sweetalert.html">Sweet Alert</a></li>
<li><a href="ui-notification.html">Notification</a></li>
<li><a href="ui-progressbar.html">Progressbar</a></li>
<li><a href="ui-nestable.html">Nestable</a></li>
<li><a href="ui-range-slider.html">Range slider</a></li>
<li><a href="ui-timeline.html">Timeline</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-horizontal-timeline.html">Horizontal Timeline</a></li>
<li><a href="ui-session-timeout.html">Session Timeout</a></li>
<li><a href="ui-session-ideal-timeout.html">Session Ideal Timeout</a></li>
<li><a href="ui-bootstrap.html">Bootstrap Ui</a></li>
<li><a href="ui-breadcrumb.html">Breadcrumb</a></li>
<li><a href="ui-bootstrap-switch.html">Bootstrap Switch</a></li>
<li><a href="ui-list-media.html">List Media</a></li>
<li><a href="ui-ribbons.html">Ribbons</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-date-paginator.html">Date-paginator</a></li>
<li><a href="ui-dragable-portlet.html">Dragable Portlet</a></li>
</ul>
</li>
<li class="nav-small-cap">--- FORMS, TABLE & WIDGETS</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-layout-media-right-alt"></i><span class="hide-menu">Forms</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="form-basic.html">Basic Forms</a></li>
<li><a href="form-layout.html">Form Layouts</a></li>
<li><a href="form-addons.html">Form Addons</a></li>
<li><a href="form-material.html">Form Material</a></li>
<li><a href="form-float-input.html">Floating Lable</a></li>
<li><a href="form-pickers.html">Form Pickers</a></li>
<li><a href="form-upload.html">File Upload</a></li>
<li><a href="form-mask.html">Form Mask</a></li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-dropzone.html">File Dropzone</a></li>
<li><a href="form-icheck.html">Icheck control</a></li>
<li><a href="form-img-cropper.html">Image Cropper</a></li>
<li><a href="form-bootstrapwysihtml5.html">HTML5 Editor</a></li>
<li><a href="form-typehead.html">Form Typehead</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-xeditable.html">Xeditable Editor</a></li>
<li><a href="form-summernote.html">Summernote Editor</a></li>
<li><a href="form-tinymce.html">Tinymce Editor</a></li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-layout-accordion-merged"></i><span class="hide-menu">Tables</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="table-basic.html">Basic Tables</a></li>
<li><a href="table-layout.html">Table Layouts</a></li>
<li><a href="table-data-table.html">Data Tables</a></li>
<li><a href="table-footable.html">Footable</a></li>
<li><a href="table-jsgrid.html">Js Grid Table</a></li>
<li><a href="table-responsive.html">Responsive Table</a></li>
<li><a href="table-bootstrap.html">Bootstrap Tables</a></li>
<li><a href="table-editable-table.html">Editable Table</a></li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-settings"></i><span class="hide-menu">Widgets</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="widget-data.html">Data Widgets</a></li>
<li><a href="widget-apps.html">Apps Widgets</a></li>
<li><a href="widget-charts.html">Charts Widgets</a></li>
</ul>
</li>
<li class="nav-small-cap">--- EXTRA COMPONENTS</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-gallery"></i><span class="hide-menu">Page Layout</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="layout-single-column.html">1 Column</a></li>
<li><a href="layout-fix-header.html">Fix header</a></li>
<li><a href="layout-fix-sidebar.html">Fix sidebar</a></li>
<li><a href="layout-fix-header-sidebar.html">Fixe header & Sidebar</a></li>
<li><a href="layout-boxed.html">Boxed Layout</a></li>
<li><a href="layout-logo-center.html">Logo in Center</a></li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-files"></i><span class="hide-menu">Sample Pages <span class="badge badge-pill badge-info">25</span></span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="starter-kit.html">Starter Kit</a></li>
<li><a href="pages-blank.html">Blank page</a></li>
<li><a href="javascript:void(0)" class="has-arrow">Authentication <span class="badge badge-pill badge-success pull-right">6</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="pages-login.html">Login 1</a></li>
<li><a href="pages-login-2.html">Login 2</a></li>
<li><a href="pages-register.html">Register</a></li>
<li><a href="pages-register2.html">Register 2</a></li>
<li><a href="pages-register3.html">Register 3</a></li>
<li><a href="pages-lockscreen.html">Lockscreen</a></li>
<li><a href="pages-recover-password.html">Recover password</a></li>
</ul>
</li>
<li><a href="pages-profile.html">Profile page</a></li>
<li><a href="pages-animation.html">Animation</a></li>
<li><a href="pages-fix-innersidebar.html">Sticky Left sidebar</a></li>
<li><a href="pages-fix-inner-right-sidebar.html">Sticky Right sidebar</a></li>
<li><a href="pages-invoice.html">Invoice</a></li>
<li><a href="pages-treeview.html">Treeview</a></li>
<li><a href="pages-utility-classes.html">Helper Classes</a></li>
<li><a href="pages-search-result.html">Search result</a></li>
<li><a href="pages-scroll.html">Scrollbar</a></li>
<li><a href="pages-pricing.html">Pricing</a></li>
<li><a href="pages-lightbox-popup.html">Lighbox popup</a></li>
<li><a href="pages-gallery.html">Gallery</a></li>
<li><a href="pages-faq.html">Faqs</a></li>
<li><a href="javascript:void(0)" class="has-arrow">Error Pages</a>
<ul aria-expanded="false" class="collapse">
<li><a href="pages-error-400.html">400</a></li>
<li><a href="pages-error-403.html">403</a></li>
<li><a href="pages-error-404.html">404</a></li>
<li><a href="pages-error-500.html">500</a></li>
<li><a href="pages-error-503.html">503</a></li>
</ul>
</li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-pie-chart"></i><span class="hide-menu">Charts</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="chart-morris.html">Morris Chart</a></li>
<li><a href="chart-chartist.html">Chartis Chart</a></li>
<li><a href="chart-echart.html">Echarts</a></li>
<li><a href="chart-flot.html">Flot Chart</a></li>
<li><a href="chart-knob.html">Knob Chart</a></li>
<li><a href="chart-chart-js.html">Chartjs</a></li>
<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
<li><a href="chart-extra-chart.html">Extra chart</a></li>
<li><a href="chart-peity.html">Peity Charts</a></li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-light-bulb"></i><span class="hide-menu">Icons</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="icon-material.html">Material Icons</a></li>
<li><a href="icon-fontawesome.html">Fontawesome Icons</a></li>
<li><a href="icon-themify.html">Themify Icons</a></li>
<li><a href="icon-weather.html">Weather Icons</a></li>
<li><a href="icon-simple-lineicon.html">Simple Line icons</a></li>
<li><a href="icon-flag.html">Flag Icons</a></li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-location-pin"></i><span class="hide-menu">Maps</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="map-google.html">Google Maps</a></li>
<li><a href="map-vector.html">Vector Maps</a></li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="ti-align-left"></i><span class="hide-menu">Multi level dd</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="javascript:void(0)">item 1.1</a></li>
<li><a href="javascript:void(0)">item 1.2</a></li>
<li> <a class="has-arrow" href="javascript:void(0)" aria-expanded="false">Menu 1.3</a>
<ul aria-expanded="false" class="collapse">
<li><a href="javascript:void(0)">item 1.3.1</a></li>
<li><a href="javascript:void(0)">item 1.3.2</a></li>
<li><a href="javascript:void(0)">item 1.3.3</a></li>
<li><a href="javascript:void(0)">item 1.3.4</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">item 1.4</a></li>
</ul>
</li>
<li class="nav-small-cap">--- SUPPORT</li>
<li> <a class="waves-effect waves-dark" href="../documentation/documentation.html" aria-expanded="false"><i class="fa fa-circle-o text-danger"></i><span class="hide-menu">Documentation</span></a></li>
<li> <a class="waves-effect waves-dark" href="pages-login.html" aria-expanded="false"><i class="fa fa-circle-o text-success"></i><span class="hide-menu">Log Out</span></a></li>
<li> <a class="waves-effect waves-dark" href="pages-faq.html" aria-expanded="false"><i class="fa fa-circle-o text-info"></i><span class="hide-menu">FAQs</span></a></li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="container-fluid">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
<div class="col-md-5 align-self-center">
<h4 class="text-themecolor">Contact Details</h4>
</div>
<div class="col-md-7 align-self-center text-right">
<div class="d-flex justify-content-end align-items-center">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item active">Contact Details</li>
</ol>
<button type="button" class="btn btn-info d-none d-lg-block m-l-15"><i class="fa fa-plus-circle"></i> Create New</button>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<!-- Row -->
<div class="row">
<!-- Column -->
<div class="col-lg-4 col-xlg-3 col-md-5">
<div class="card"> <img class="card-img" src="../assets/images/background/socialbg.jpg" height="456" alt="Card image">
<div class="card-img-overlay card-inverse text-white social-profile d-flex justify-content-center">
<div class="align-self-center"> <img src="../assets/images/users/1.jpg" class="img-circle" width="100">
<h4 class="card-title">James Anderson</h4>
<h6 class="card-subtitle">@jamesandre</h6>
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt </p>
</div>
</div>
</div>
<div class="card">
<div class="card-body"> <small class="text-muted">Email address </small>
<h6>hannagover@gmail.com</h6> <small class="text-muted p-t-30 db">Phone</small>
<h6>+91 654 784 547</h6> <small class="text-muted p-t-30 db">Address</small>
<h6>71 Pilgrim Avenue Chevy Chase, MD 20815</h6>
<div class="map-box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d470029.1604841957!2d72.29955005258641!3d23.019996818380896!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395e848aba5bd449%3A0x4fcedd11614f6516!2sAhmedabad%2C+Gujarat!5e0!3m2!1sen!2sin!4v1493204785508" width="100%" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
</div> <small class="text-muted p-t-30 db">Social Profile</small>
<br/>
<button class="btn btn-circle btn-secondary"><i class="fa fa-facebook"></i></button>
<button class="btn btn-circle btn-secondary"><i class="fa fa-twitter"></i></button>
<button class="btn btn-circle btn-secondary"><i class="fa fa-youtube"></i></button>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-8 col-xlg-9 col-md-7">
<div class="card">
<!-- Nav tabs -->
<ul class="nav nav-tabs profile-tab" role="tablist">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Timeline</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">
<div class="card-body">
<div class="profiletimeline">
<div class="sl-item">
<div class="sl-left"> <img src="../assets/images/users/1.jpg" alt="user" class="img-circle" /> </div>
<div class="sl-right">
<div><a href="javascript:void(0)" class="link">John Doe</a> <span class="sl-date">5 minutes ago</span>
<p>assign a new task <a href="javascript:void(0)"> Design weblayout</a></p>
<div class="row">
<div class="col-lg-3 col-md-6 m-b-20"><img src="../assets/images/big/img1.jpg" class="img-responsive radius" /></div>
<div class="col-lg-3 col-md-6 m-b-20"><img src="../assets/images/big/img2.jpg" class="img-responsive radius" /></div>
<div class="col-lg-3 col-md-6 m-b-20"><img src="../assets/images/big/img3.jpg" class="img-responsive radius" /></div>
<div class="col-lg-3 col-md-6 m-b-20"><img src="../assets/images/big/img4.jpg" class="img-responsive radius" /></div>
</div>
<div class="like-comm"> <a href="javascript:void(0)" class="link m-r-10">2 comment</a> <a href="javascript:void(0)" class="link m-r-10"><i class="fa fa-heart text-danger"></i> 5 Love</a> </div>
</div>
</div>
</div>
<hr>
<div class="sl-item">
<div class="sl-left"> <img src="../assets/images/users/2.jpg" alt="user" class="img-circle" /> </div>
<div class="sl-right">
<div> <a href="javascript:void(0)" class="link">John Doe</a> <span class="sl-date">5 minutes ago</span>
<div class="m-t-20 row">
<div class="col-md-3 col-xs-12"><img src="../assets/images/big/img1.jpg" alt="user" class="img-responsive radius" /></div>
<div class="col-md-9 col-xs-12">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </p> <a href="javascript:void(0)" class="btn btn-success"> Design weblayout</a></div>
</div>
<div class="like-comm m-t-20"> <a href="javascript:void(0)" class="link m-r-10">2 comment</a> <a href="javascript:void(0)" class="link m-r-10"><i class="fa fa-heart text-danger"></i> 5 Love</a> </div>
</div>
</div>
</div>
<hr>
<div class="sl-item">
<div class="sl-left"> <img src="../assets/images/users/3.jpg" alt="user" class="img-circle" /> </div>
<div class="sl-right">
<div><a href="javascript:void(0)" class="link">John Doe</a> <span class="sl-date">5 minutes ago</span>
<p class="m-t-10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper </p>
</div>
<div class="like-comm m-t-20"> <a href="javascript:void(0)" class="link m-r-10">2 comment</a> <a href="javascript:void(0)" class="link m-r-10"><i class="fa fa-heart text-danger"></i> 5 Love</a> </div>
</div>
</div>
<hr>
<div class="sl-item">
<div class="sl-left"> <img src="../assets/images/users/4.jpg" alt="user" class="img-circle" /> </div>
<div class="sl-right">
<div><a href="javascript:void(0)" class="link">John Doe</a> <span class="sl-date">5 minutes ago</span>
<blockquote class="m-t-10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<!--second tab-->
<div class="tab-pane" id="profile" role="tabpanel">
<div class="card-body">
<div class="row">
<div class="col-md-3 col-xs-6 b-r"> <strong>Full Name</strong>
<br>
<p class="text-muted">Johnathan Deo</p>
</div>
<div class="col-md-3 col-xs-6 b-r"> <strong>Mobile</strong>
<br>
<p class="text-muted">(123) 456 7890</p>
</div>
<div class="col-md-3 col-xs-6 b-r"> <strong>Email</strong>
<br>
<p class="text-muted">johnathan@admin.com</p>
</div>
<div class="col-md-3 col-xs-6"> <strong>Location</strong>
<br>
<p class="text-muted">London</p>
</div>
</div>
<hr>
<p class="m-t-30">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</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. It has survived not only five centuries </p>
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h4 class="font-medium m-t-30">Skill Set</h4>
<hr>
<h5 class="m-t-30">Wordpress <span class="pull-right">80%</span></h5>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%; height:6px;"> <span class="sr-only">50% Complete</span> </div>
</div>
<h5 class="m-t-30">HTML 5 <span class="pull-right">90%</span></h5>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%; height:6px;"> <span class="sr-only">50% Complete</span> </div>
</div>
<h5 class="m-t-30">jQuery <span class="pull-right">50%</span></h5>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%; height:6px;"> <span class="sr-only">50% Complete</span> </div>
</div>
<h5 class="m-t-30">Photoshop <span class="pull-right">70%</span></h5>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%; height:6px;"> <span class="sr-only">50% Complete</span> </div>
</div>
</div>
</div>
<div class="tab-pane" id="settings" role="tabpanel">
<div class="card-body">
<form class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Full Name</label>
<div class="col-md-12">
<input type="text" placeholder="Johnathan Doe" class="form-control form-control-line">
</div>
</div>
<div class="form-group">
<label for="example-email" class="col-md-12">Email</label>
<div class="col-md-12">
<input type="email" placeholder="johnathan@admin.com" class="form-control form-control-line" name="example-email" id="example-email">
</div>
</div>
<div class="form-group">
<label class="col-md-12">Password</label>
<div class="col-md-12">
<input type="password" value="password" class="form-control form-control-line">
</div>
</div>
<div class="form-group">
<label class="col-md-12">Phone No</label>
<div class="col-md-12">
<input type="text" placeholder="123 456 7890" class="form-control form-control-line">
</div>
</div>
<div class="form-group">
<label class="col-md-12">Message</label>
<div class="col-md-12">
<textarea rows="5" class="form-control form-control-line"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-12">Select Country</label>
<div class="col-sm-12">
<select class="form-control form-control-line">
<option>London</option>
<option>India</option>
<option>Usa</option>
<option>Canada</option>
<option>Thailand</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button class="btn btn-success">Update Profile</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
</div>
<!-- Row -->
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Right sidebar -->
<!-- ============================================================== -->
<!-- .right-sidebar -->
<div class="right-sidebar">
<div class="slimscrollright">
<div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
<div class="r-panel-body">
<ul id="themecolors" class="m-t-20">
<li><b>With Light sidebar</b></li>
<li><a href="javascript:void(0)" data-skin="skin-default" class="default-theme">1</a></li>
<li><a href="javascript:void(0)" data-skin="skin-green" class="green-theme">2</a></li>
<li><a href="javascript:void(0)" data-skin="skin-red" class="red-theme">3</a></li>
<li><a href="javascript:void(0)" data-skin="skin-blue" class="blue-theme working">4</a></li>
<li><a href="javascript:void(0)" data-skin="skin-purple" class="purple-theme">5</a></li>
<li><a href="javascript:void(0)" data-skin="skin-megna" class="megna-theme">6</a></li>
<li class="d-block m-t-30"><b>With Dark sidebar</b></li>
<li><a href="javascript:void(0)" data-skin="skin-default-dark" class="default-dark-theme ">7</a></li>
<li><a href="javascript:void(0)" data-skin="skin-green-dark" class="green-dark-theme">8</a></li>
<li><a href="javascript:void(0)" data-skin="skin-red-dark" class="red-dark-theme">9</a></li>
<li><a href="javascript:void(0)" data-skin="skin-blue-dark" class="blue-dark-theme">10</a></li>
<li><a href="javascript:void(0)" data-skin="skin-purple-dark" class="purple-dark-theme">11</a></li>
<li><a href="javascript:void(0)" data-skin="skin-megna-dark" class="megna-dark-theme ">12</a></li>
</ul>
<ul class="m-t-20 chatonline">
<li><b>Chat option</b></li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/1.jpg" alt="user-img" class="img-circle"> <span>Varun Dhavan <small class="text-success">online</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/2.jpg" alt="user-img" class="img-circle"> <span>Genelia Deshmukh <small class="text-warning">Away</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/3.jpg" alt="user-img" class="img-circle"> <span>Ritesh Deshmukh <small class="text-danger">Busy</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/4.jpg" alt="user-img" class="img-circle"> <span>Arijit Sinh <small class="text-muted">Offline</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/5.jpg" alt="user-img" class="img-circle"> <span>Govinda Star <small class="text-success">online</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/6.jpg" alt="user-img" class="img-circle"> <span>John Abraham<small class="text-success">online</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/7.jpg" alt="user-img" class="img-circle"> <span>Hritik Roshan<small class="text-success">online</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/8.jpg" alt="user-img" class="img-circle"> <span>Pwandeep rajan <small class="text-success">online</small></span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Right sidebar -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<footer class="footer">
© 2018 Eliteadmin by themedesigner.in
</footer>
<!-- ============================================================== -->
<!-- End footer -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="../assets/node_modules/jquery/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="../assets/node_modules/popper/popper.min.js"></script>
<script src="../assets/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="dist/js/perfect-scrollbar.jquery.min.js"></script>
<!--Wave Effects -->
<script src="dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="dist/js/sidebarmenu.js"></script>
<!--stickey kit -->
<script src="../assets/node_modules/sticky-kit-master/dist/sticky-kit.min.js"></script>
<script src="../assets/node_modules/sparkline/jquery.sparkline.min.js"></script>
<!--Custom JavaScript -->
<script src="dist/js/custom.min.js"></script>
</body>
</html>