gallery/public/previews/betacrm-html/help-center.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Help Center</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="theme-color" content="#fff">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="Page description"><!-- Twitter Card data-->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@publisher_handle">
    <meta name="twitter:title" content="Page Title">
    <meta name="twitter:description" content="Page description less than 200 characters">
    <meta name="twitter:creator" content="@author_handle">
    <meta name="twitter:image" content="http://www.example.com/image.jpg"><!-- Open Graph data-->
    <meta property="og:title" content="Title Here">
    <meta property="og:type" content="article">
    <meta property="og:url" content="http://www.example.com/">
    <meta property="og:image" content="http://example.com/image.jpg">
    <meta property="og:description" content="Description Here">
    <meta property="og:site_name" content="Site Name, i.e. Moz">
    <meta property="fb:admins" content="Facebook numeric ID">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" media="all" href="css/app.css"><!-- favicon-->
    <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
    <link rel="manifest" href="img/site.webmanifest">
    <link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
  </head>
  <body>
    <!-- page-->
    <div class="page">
      <!-- sidebar-->
      <div class="sidebar js-sidebar">
        <div class="sidebar__nav">
          <!-- nav-->
          <nav class="nav js-nav"><a class="nav__link nav__link_head" href="/">
              <div class="nav__preview"><img class="nav__pic" src="img/logo.svg" alt="Logo"></div>
              <div class="nav__title"><img class="nav__pic" src="img/betaCRM.svg" alt="betaCRM"></div>
            </a>
            <div class="nav__list">
              <!-- mobile primary menu-->
              <div class="nav__primary js-nav-primary">
                <div class="nav__group"><a class="nav__link active" href="#" title="Dashboard">
                    <div class="nav__preview"><i class="la la-tachometer-alt "></i></div>
                    <div class="nav__title">Dashboard</div>
                  </a><a class="nav__link" href="#" title="Projects">
                    <div class="nav__preview"><i class="la la-toolbox "></i></div>
                    <div class="nav__title">Projects</div>
                  </a><a class="nav__link" href="#" title="Tasks">
                    <div class="nav__preview"><i class="la la-clipboard-check "></i></div>
                    <div class="nav__title">Tasks</div>
                  </a><a class="nav__link" href="#" title="Kanban">
                    <div class="nav__preview"><i class="la la-images "></i></div>
                    <div class="nav__title">Kanban</div>
                  </a><a class="nav__link" href="#" title="Calendar">
                    <div class="nav__preview"><i class="la la-calendar-week "></i></div>
                    <div class="nav__title">Calendar</div>
                  </a><a class="nav__link nav__link_menu js-nav-link-menu" href="#">
                    <div class="nav__preview"><i class="la la-bars "></i></div>
                  </a></div>
              </div><!-- mobile secondary menu-->
              <div class="nav__secondary js-nav-secondary">
                <div class="nav__group"><a class="nav__link" href="#" title="Contacts">
                    <div class="nav__preview"><i class="la la-user-lock "></i></div>
                    <div class="nav__title">Contacts</div>
                  </a><a class="nav__link" href="#" title="Messages">
                    <div class="nav__preview"><i class="la la-comments "></i>
                      <div class="nav__online online"></div>
                    </div>
                    <div class="nav__title">Messages</div>
                  </a><a class="nav__link" href="#" title="Products">
                    <div class="nav__preview"><i class="la la-cube "></i></div>
                    <div class="nav__title">Products</div>
                  </a><a class="nav__link" href="#" title="Invoices">
                    <div class="nav__preview"><i class="la la-calculator "></i></div>
                    <div class="nav__title">Invoices</div>
                  </a><a class="nav__link" href="#" title="File Browser">
                    <div class="nav__preview"><i class="la la-folder-open "></i></div>
                    <div class="nav__title">File Browser</div>
                  </a><a class="nav__link" href="#" title="Notifications">
                    <div class="nav__preview"><i class="la la-bullseye "></i>
                      <div class="nav__online online bg-red-raw"></div>
                    </div>
                    <div class="nav__title">Notifications</div>
                  </a><a class="nav__link" href="#" title="Reports">
                    <div class="nav__preview"><i class="la la-chart-area "></i></div>
                    <div class="nav__title">Reports</div>
                  </a><a class="nav__link" href="#" title="Help Center">
                    <div class="nav__preview"><i class="la la-question "></i></div>
                    <div class="nav__title">Help Center</div>
                  </a><a class="nav__link nav__link_user" href="#" title="John Doe">
                    <div class="nav__preview"><img class="nav__pic" src="img/user-1.jpg" alt="User">
                      <div class="nav__online online"></div>
                    </div>
                    <div class="nav__title">John Doe</div>
                  </a></div>
              </div>
            </div>
          </nav>
        </div>
        <div class="sidebar__container js-sidebar-container">
          <div class="sidebar__head">
            <div class="sidebar__preview"><img class="sidebar__pic" src="img/white-ui-store.png" alt="WhiteUI.store"></div>
            <div class="sidebar__wrap">
              <div class="sidebar__title">WHITEUI.STORE LLC</div>
              <div class="sidebar__text">8484 Ross Wells</div>
            </div><button class="sidebar__action sidebar__action_toggle action js-sidebar-toggle"><i class="la la-angle-left "></i></button>
          </div>
          <div class="sidebar__inner">
            <div class="sidebar__section">
              <!-- widget-->
              <div class="widget">
                <div class="widget__head widget__head_line">
                  <div class="widget__title title">Your recent tickets</div>
                  <div class="widget__badge badge green">5</div><a class="widget__all" href="#">View all</a>
                </div>
                <div class="widget__body">
                  <!-- items-->
                  <div class="items"><a class="items__item" href="#">
                      <div class="items__preview blue"><i class="la la-file-invoice "></i></div>
                      <div class="items__wrap">
                        <div class="items__details">
                          <div class="items__name">Ticket #2020-1021</div>
                        </div>
                        <div class="items__content">Moreover the striking, brilliant and vivid colors</div>
                      </div>
                    </a><a class="items__item" href="#">
                      <div class="items__preview blue"><i class="la la-file-invoice "></i></div>
                      <div class="items__wrap">
                        <div class="items__details">
                          <div class="items__name">Ticket #2020-4359</div>
                        </div>
                        <div class="items__content">In the history of modern astronomy, there is small</div>
                      </div>
                    </a><a class="items__item" href="#">
                      <div class="items__preview blue"><i class="la la-file-invoice "></i></div>
                      <div class="items__wrap">
                        <div class="items__details">
                          <div class="items__name">Ticket #2020-4234</div>
                        </div>
                        <div class="items__content">Advertising on a budget with a monthly frequency </div>
                      </div>
                    </a><a class="items__item" href="#">
                      <div class="items__preview blue"><i class="la la-file-invoice "></i></div>
                      <div class="items__wrap">
                        <div class="items__details">
                          <div class="items__name">Ticket #2020-9838</div>
                        </div>
                        <div class="items__content">Search Engine Optimization And Advertising</div>
                      </div>
                    </a><a class="items__item" href="#">
                      <div class="items__preview blue"><i class="la la-file-invoice "></i></div>
                      <div class="items__wrap">
                        <div class="items__details">
                          <div class="items__name">Ticket #2020-1989</div>
                        </div>
                        <div class="items__content">Moreover the striking, brilliant and vivid colors</div>
                      </div>
                    </a></div>
                </div>
              </div>
            </div>
            <div class="sidebar__section">
              <div class="notice">
                <div class="notice__title title">Do you still need our help?</div>
                <div class="notice__text">Send your request via email</div><button class="notice__btn btn">Contact Us</button>
              </div>
            </div>
          </div>
        </div>
      </div><!-- container-->
      <div class="container js-container">
        <div class="container__head"><button class="container__action container__action_menu action js-container-toggle"><i class="la la-bars "></i></button>
          <div class="container__title title title_md">Help Center</div><!-- search-->
          <div class="container__search search js-search"><button class="search__action action js-search-open"><i class="la la-search "></i></button>
            <div class="search__dropdown js-search-dropdown">
              <div class="search__field"><input class="search__input js-search-input" type="search" placeholder="Start typing…">
                <div class="search__icon"><i class="la la-search "></i></div>
              </div>
              <div class="search__results js-search-results"><a class="search__result" href="#">
                  <div class="search__cell">
                    <div class="search__preview color-red"><i class="lab la-dribbble "></i></div>
                  </div>
                  <div class="search__cell">
                    <div class="search__title">Dribble Redesign</div>
                    <div class="search__text">Webdesign</div>
                  </div>
                  <div class="search__cell mobile-hide">
                    <!-- tag-->
                    <div class="search__tag tag gray">24 Feb 2019</div>
                  </div>
                </a><a class="search__result" href="#">
                  <div class="search__cell">
                    <div class="search__preview color-green"><i class="lab la-evernote "></i></div>
                  </div>
                  <div class="search__cell">
                    <div class="search__title">New HTML Theme</div>
                    <div class="search__text">Theme</div>
                  </div>
                  <div class="search__cell mobile-hide">
                    <!-- tag-->
                    <div class="search__tag tag gray">20 May 2019</div>
                  </div>
                </a><a class="search__result" href="#">
                  <div class="search__cell">
                    <div class="search__preview"><img class="search__pic" src="img/user-1.jpg" alt="User"></div>
                  </div>
                  <div class="search__cell">
                    <div class="search__title">Bradley Wilkins</div>
                    <div class="search__text">[email protected]</div>
                  </div>
                  <div class="search__cell mobile-hide">
                    <!-- tag-->
                    <div class="search__tag tag gray">Designer</div>
                  </div>
                </a></div>
            </div>
            <div class="search__backdrop backdrop js-search-backdrop"></div>
          </div><!-- new-->
          <div class="container__new new js-new"><button class="new__action action js-new-open"><i class="la la-plus-circle "></i></button>
            <div class="new__dropdown js-new-dropdown"><a class="new__item" href="#">
                <div class="new__icon"><i class="la la-toolbox "></i></div>
                <div class="new__title">New Project</div>
              </a><a class="new__item" href="#">
                <div class="new__icon"><i class="la la-clipboard-check "></i></div>
                <div class="new__title">New Task</div>
              </a><a class="new__item" href="#">
                <div class="new__icon"><i class="la la-user-lock "></i></div>
                <div class="new__title">New Contact</div>
              </a><a class="new__item" href="#">
                <div class="new__icon"><i class="la la-calendar-week "></i></div>
                <div class="new__title">New Event</div>
              </a><a class="new__item" href="#">
                <div class="new__icon"><i class="la la-cube "></i></div>
                <div class="new__title">New Product</div>
              </a><a class="new__item" href="#">
                <div class="new__icon"><i class="la la-calculator "></i></div>
                <div class="new__title">New Invoice</div>
              </a></div>
            <div class="new__backdrop backdrop js-new-backdrop"></div>
          </div>
        </div>
        <div class="container__body">
          <!-- help-->
          <div class="help">
            <div class="help__head">
              <form class="help__form" action="">
                <div class="help__title title title_xl">Hello, how can we help?</div>
                <div class="help__text color-gray">Type your question or search keyword</div>
                <div class="field help__field">
                  <div class="field__wrap"><input class="field__input" type="search" placeholder="Start typing…">
                    <div class="field__icon"><i class="la la-search "></i></div>
                  </div>
                </div>
              </form><!-- action group-->
              <div class="help__group action-group"><button class="action action_title active">Personal</button><button class="action action_title">Business</button><button class="action action_title">Payments</button><button class="action action_title">Invoices</button><button class="action action_title">Settings</button></div>
            </div>
            <div class="help__body">
              <div class="help__row">
                <div class="help__col">
                  <div class="help__preview"><img class="help__pic" src="img/help-center-pic-1.png" alt="Help Picture"></div>
                  <div class="help__title title">Getting started</div>
                  <div class="help__list"><a class="help__link" href="#">Account with Card</a><a class="help__link" href="#">Withdraw to Bank</a><a class="help__link" href="#">Bank Accounts</a><a class="help__link" href="#">How Do I Reset My Password?</a><a class="help__link" href="#">How to get paid with Payoneer</a></div>
                </div>
                <div class="help__col">
                  <div class="help__preview"><img class="help__pic" src="img/help-center-pic-2.png" alt="Help Picture"></div>
                  <div class="help__title title">Transactions</div>
                  <div class="help__list"><a class="help__link" href="#">What is the Prepaid Mastercard?</a><a class="help__link" href="#">How do I know if I am eligible</a><a class="help__link" href="#">How do I order a Prepaid Mastercard?</a><a class="help__link" href="#">I have more than one currency balance</a><a class="help__link" href="#">Can I have more than one active card</a></div>
                </div>
                <div class="help__col">
                  <div class="help__preview"><img class="help__pic" src="img/help-center-pic-3.png" alt="Help Picture"></div>
                  <div class="help__title title">Account management</div>
                  <div class="help__list"><a class="help__link" href="#">How can I access Bank Accounts?</a><a class="help__link" href="#">How can I add a new bank account?</a><a class="help__link" href="#">After I added a bank account</a><a class="help__link" href="#">What can I do when I have reached</a><a class="help__link" href="#">How can I remove a bank account?</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- modals-->
    <!-- scripts-->
    <script src="js/lib/jquery.min.js"></script>
    <script src="js/lib/datepicker.min.js"></script>
    <script src="js/lib/datepicker.en.js"></script>
    <script src="js/lib/select2.min.js"></script>
    <script src="js/lib/wNumb.min.js"></script>
    <script src="js/lib/nouislider.min.js"></script>
    <script src="js/lib/apexcharts.min.js"></script>
    <script src="js/charts.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>