1316 lines
69 KiB
HTML
1316 lines
69 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="">
|
|
<head>
|
|
<!-- Required Meta Tags Always Come First -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Title -->
|
|
<title>Help Desk | Front - Multipurpose Responsive Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="../favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<link rel="stylesheet" href="../assets/css/vendor.min.css">
|
|
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<link rel="stylesheet" href="../assets/css/theme.min.css?v=1.0">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- ========== HEADER ========== -->
|
|
<header id="header" class="navbar navbar-expand-lg navbar-end navbar-light bg-white">
|
|
<!-- Topbar -->
|
|
<div class="container navbar-topbar">
|
|
<nav class="js-mega-menu navbar-nav-wrap">
|
|
<!-- Toggler -->
|
|
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#topbarNavDropdown" aria-controls="topbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="navbar-toggler-text">Topbar</span>
|
|
|
|
<span class="navbar-toggler-default">
|
|
<i class="bi-chevron-down ms-2"></i>
|
|
</span>
|
|
<span class="navbar-toggler-toggled">
|
|
<i class="bi-chevron-up ms-2"></i>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
<!-- End Toggler -->
|
|
|
|
<div id="topbarNavDropdown" class="navbar-nav-wrap-collapse collapse navbar-collapse navbar-topbar-collapse">
|
|
<div class="navbar-toggler-wrapper">
|
|
<div class="navbar-topbar-toggler d-flex justify-content-between align-items-center">
|
|
<span class="navbar-toggler-text small">Topbar</span>
|
|
|
|
<!-- Toggler -->
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#topbarNavDropdown" aria-controls="topbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
|
<i class="bi-x"></i>
|
|
</button>
|
|
<!-- End Toggler -->
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item me-auto">
|
|
<a class="nav-link" href="../landing-classic-corporate.html"><i class="bi-chevron-left small ms-1"></i> Main demo</a>
|
|
</li>
|
|
|
|
<!-- Demos -->
|
|
<li class="hs-has-mega-menu nav-item">
|
|
<a id="demosMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle active" aria-current="page" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Demos</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="demosMegaMenu" style="min-width: 40rem;">
|
|
<!-- Promo -->
|
|
<div class="navbar-dropdown-menu-promo">
|
|
<!-- Promo Item -->
|
|
<div class="navbar-dropdown-menu-promo-item">
|
|
<!-- Promo Link -->
|
|
<a class="navbar-dropdown-menu-promo-link " href="../landing-classic-corporate.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M15.6 5.59998L20.9 10.9C21.3 11.3 21.3 11.9 20.9 12.3L17.6 15.6L11.6 9.59998L15.6 5.59998ZM2.3 12.3L7.59999 17.6L11.6 13.6L5.59999 7.59998L2.3 10.9C1.9 11.3 1.9 11.9 2.3 12.3Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M17.6 15.6L12.3 20.9C11.9 21.3 11.3 21.3 10.9 20.9L7.59998 17.6L13.6 11.6L17.6 15.6ZM10.9 2.3L5.59998 7.6L9.59998 11.6L15.6 5.6L12.3 2.3C11.9 1.9 11.3 1.9 10.9 2.3Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="navbar-dropdown-menu-media-title">Main</span>
|
|
<p class="navbar-dropdown-menu-media-desc">Over 60 corporate, agency, portfolio, account and many more pages.</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Promo Link -->
|
|
</div>
|
|
<!-- End Promo Item -->
|
|
|
|
<!-- Promo Item -->
|
|
<div class="navbar-dropdown-menu-promo-item">
|
|
<!-- Promo Link -->
|
|
<a class="navbar-dropdown-menu-promo-link " href="../demo-real-estate/index.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 3C5.67157 3 5 3.67157 5 4.5V6H3.5C2.67157 6 2 6.67157 2 7.5C2 8.32843 2.67157 9 3.5 9H5V19.5C5 20.3284 5.67157 21 6.5 21C7.32843 21 8 20.3284 8 19.5V9H20.5C21.3284 9 22 8.32843 22 7.5C22 6.67157 21.3284 6 20.5 6H8V4.5C8 3.67157 7.32843 3 6.5 3Z" fill="#035A4B"/>
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M20.5 11H10V17.5C10 18.3284 10.6716 19 11.5 19H15.5C17.3546 19 19.0277 18.2233 20.2119 16.9775C20.1436 16.9922 20.0727 17 20 17C19.4477 17 19 16.5523 19 16V13C19 12.4477 19.4477 12 20 12C20.5523 12 21 12.4477 21 13V15.9657C21.6334 14.9626 22 13.7741 22 12.5C22 11.6716 21.3284 11 20.5 11Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="navbar-dropdown-menu-media-title">Real Estate</span>
|
|
<p class="navbar-dropdown-menu-media-desc">Find the latest homes for sale, real estate market data.</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Promo Link -->
|
|
</div>
|
|
<!-- End Promo Item -->
|
|
|
|
<!-- Promo Item -->
|
|
<div class="navbar-dropdown-menu-promo-item">
|
|
<!-- Promo Link -->
|
|
<a class="navbar-dropdown-menu-promo-link " href="../demo-jobs/index.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M20 15H4C2.9 15 2 14.1 2 13V7C2 6.4 2.4 6 3 6H21C21.6 6 22 6.4 22 7V13C22 14.1 21.1 15 20 15ZM13 12H11C10.5 12 10 12.4 10 13V16C10 16.5 10.4 17 11 17H13C13.6 17 14 16.6 14 16V13C14 12.4 13.6 12 13 12Z" fill="#035A4B"/>
|
|
<path d="M14 6V5H10V6H8V5C8 3.9 8.9 3 10 3H14C15.1 3 16 3.9 16 5V6H14ZM20 15H14V16C14 16.6 13.5 17 13 17H11C10.5 17 10 16.6 10 16V15H4C3.6 15 3.3 14.9 3 14.7V18C3 19.1 3.9 20 5 20H19C20.1 20 21 19.1 21 18V14.7C20.7 14.9 20.4 15 20 15Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="navbar-dropdown-menu-media-title">Jobs <span class="badge bg-success rounded-pill ms-1">Hot</span></span>
|
|
<p class="navbar-dropdown-menu-media-desc">Search millions of jobs online to find the next step in your career.</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Promo Link -->
|
|
</div>
|
|
<!-- End Promo Item -->
|
|
</div>
|
|
<!-- End Promo -->
|
|
|
|
<!-- Promo -->
|
|
<div class="navbar-dropdown-menu-promo">
|
|
<!-- Promo Item -->
|
|
<div class="navbar-dropdown-menu-promo-item">
|
|
<!-- Promo Link -->
|
|
<a class="navbar-dropdown-menu-promo-link " href="../demo-course/index.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 19H4C2.9 19 2 18.1 2 17H22C22 18.1 21.1 19 20 19Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M20 5H4C3.4 5 3 5.4 3 6V17H21V6C21 5.4 20.6 5 20 5Z" fill="#035A4B"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9167 6.83334H9.91666C9.18899 6.83334 8.66666 7.37744 8.66666 8.08334V13.9167C8.66666 14.6226 9.18899 15.1667 9.91666 15.1667H14.9167C15.1841 15.1667 15.3333 15.0112 15.3333 14.75V14.3333H10.3333C10.1032 14.3333 9.91665 14.1468 9.91665 13.9167C9.91665 13.6866 10.1032 13.5 10.3333 13.5H15.3333V7.25001C15.3333 6.9888 15.1841 6.83334 14.9167 6.83334Z" fill="#035A4B"/>
|
|
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="6" width="8" height="10">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9167 6.83334H9.91666C9.18899 6.83334 8.66666 7.37744 8.66666 8.08334V13.9167C8.66666 14.6226 9.18899 15.1667 9.91666 15.1667H14.9167C15.1841 15.1667 15.3333 15.0112 15.3333 14.75V14.3333H10.3333C10.1032 14.3333 9.91665 14.1468 9.91665 13.9167C9.91665 13.6866 10.1032 13.5 10.3333 13.5H15.3333V7.25001C15.3333 6.9888 15.1841 6.83334 14.9167 6.83334Z" fill="white"/>
|
|
</mask>
|
|
<g mask="url(#mask0)">
|
|
</g>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="navbar-dropdown-menu-media-title">Course <span class="badge bg-success rounded-pill ms-1">Hot</span></span>
|
|
<p class="navbar-dropdown-menu-media-desc">Learn on your schedule. An online learning and teaching demo.</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Promo Link -->
|
|
</div>
|
|
<!-- End Promo Item -->
|
|
|
|
<!-- Promo Item -->
|
|
<div class="navbar-dropdown-menu-promo-item">
|
|
<!-- Promo Link -->
|
|
<a class="navbar-dropdown-menu-promo-link " href="../demo-shop/index.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M20 22H4C3.4 22 3 21.6 3 21V2H21V21C21 21.6 20.6 22 20 22Z" fill="#035A4B"/>
|
|
<path d="M12 14C9.2 14 7 11.8 7 9V5C7 4.4 7.4 4 8 4C8.6 4 9 4.4 9 5V9C9 10.7 10.3 12 12 12C13.7 12 15 10.7 15 9V5C15 4.4 15.4 4 16 4C16.6 4 17 4.4 17 5V9C17 11.8 14.8 14 12 14Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="navbar-dropdown-menu-media-title">E-Commerce</span>
|
|
<p class="navbar-dropdown-menu-media-desc">Choose an online store & get your business online today!</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Promo Link -->
|
|
</div>
|
|
<!-- End Promo Item -->
|
|
|
|
<!-- Promo Item -->
|
|
<div class="navbar-dropdown-menu-promo-item">
|
|
<!-- Promo Link -->
|
|
<a class="navbar-dropdown-menu-promo-link " href="../demo-app-marketplace/index.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M18 10V20C18 20.6 18.4 21 19 21C19.6 21 20 20.6 20 20V10H18Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M11 10V17H6V10H4V20C4 20.6 4.4 21 5 21H12C12.6 21 13 20.6 13 20V10H11Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M10 10C10 11.1 9.1 12 8 12C6.9 12 6 11.1 6 10H10Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M18 10C18 11.1 17.1 12 16 12C14.9 12 14 11.1 14 10H18Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M14 4H10V10H14V4Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M17 4H20L22 10H18L17 4Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M7 4H4L2 10H6L7 4Z" fill="#035A4B"/>
|
|
<path d="M6 10C6 11.1 5.1 12 4 12C2.9 12 2 11.1 2 10H6ZM10 10C10 11.1 10.9 12 12 12C13.1 12 14 11.1 14 10H10ZM18 10C18 11.1 18.9 12 20 12C21.1 12 22 11.1 22 10H18ZM19 2H5C4.4 2 4 2.4 4 3V4H20V3C20 2.4 19.6 2 19 2ZM12 17C12 16.4 11.6 16 11 16H6C5.4 16 5 16.4 5 17C5 17.6 5.4 18 6 18H11C11.6 18 12 17.6 12 17Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="navbar-dropdown-menu-media-title">App Marketplace</span>
|
|
<p class="navbar-dropdown-menu-media-desc">Find apps and integrates seamlessly with popular apps.</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Promo Link -->
|
|
</div>
|
|
<!-- End Promo Item -->
|
|
</div>
|
|
<!-- End Promo -->
|
|
|
|
<!-- Promo -->
|
|
<div class="navbar-dropdown-menu-promo">
|
|
<!-- Promo Item -->
|
|
<div class="navbar-dropdown-menu-promo-item">
|
|
<!-- Promo Link -->
|
|
<a class="navbar-dropdown-menu-promo-link active" href="../demo-help-desk/index.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.1671 18.1421C22.4827 18.4577 23.0222 18.2331 23.0206 17.7868L23.0039 13.1053V5.52632C23.0039 4.13107 21.8729 3 20.4776 3H8.68815C7.2929 3 6.16183 4.13107 6.16183 5.52632V9H13C14.6568 9 16 10.3431 16 12V15.6316H19.6565L22.1671 18.1421Z" fill="#035A4B"/>
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M1.98508 18V13C1.98508 11.8954 2.88051 11 3.98508 11H11.9851C13.0896 11 13.9851 11.8954 13.9851 13V18C13.9851 19.1046 13.0896 20 11.9851 20H4.10081L2.85695 21.1905C2.53895 21.4949 2.01123 21.2695 2.01123 20.8293V18.3243C1.99402 18.2187 1.98508 18.1104 1.98508 18ZM5.99999 14.5C5.99999 14.2239 6.22385 14 6.49999 14H11.5C11.7761 14 12 14.2239 12 14.5C12 14.7761 11.7761 15 11.5 15H6.49999C6.22385 15 5.99999 14.7761 5.99999 14.5ZM9.49999 16C9.22385 16 8.99999 16.2239 8.99999 16.5C8.99999 16.7761 9.22385 17 9.49999 17H11.5C11.7761 17 12 16.7761 12 16.5C12 16.2239 11.7761 16 11.5 16H9.49999Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="navbar-dropdown-menu-media-title">Help Desk</span>
|
|
<p class="navbar-dropdown-menu-media-desc">A customer service demo that helps you balance customer needs.</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Promo Link -->
|
|
</div>
|
|
<!-- End Promo Item -->
|
|
|
|
<!-- Promo Item -->
|
|
<div class="navbar-dropdown-menu-promo-item">
|
|
<!-- Promo Link -->
|
|
<a class="navbar-dropdown-menu-promo-link" href="https://htmlstream.com/contact-us" target="_blank">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M12 17C16.4183 17 20 13.4183 20 9C20 4.58172 16.4183 1 12 1C7.58172 1 4 4.58172 4 9C4 13.4183 7.58172 17 12 17Z" fill="#035A4B"/>
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M6.53819 9L10.568 19.3624L11.976 18.8149L13.3745 19.3674L17.4703 9H6.53819ZM9.46188 11H14.5298L11.9759 17.4645L9.46188 11Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M10 22H14V22C14 23.1046 13.1046 24 12 24V24C10.8954 24 10 23.1046 10 22V22Z" fill="#035A4B"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18C15.5523 18 16 18.4477 16 19C16 19.5523 15.5523 20 15 20C15.5523 20 16 20.4477 16 21C16 21.5523 15.5523 22 15 22H9C8.44772 22 8 21.5523 8 21C8 20.4477 8.44772 20 9 20C8.44772 20 8 19.5523 8 19C8 18.4477 8.44772 18 9 18C8.44772 18 8 17.5523 8 17Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="navbar-dropdown-menu-media-title">New demo ideas?</span>
|
|
<p class="navbar-dropdown-menu-media-desc">
|
|
Send us your suggestions <i class="bi-box-arrow-up-right ms-1"></i>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Promo Link -->
|
|
</div>
|
|
<!-- End Promo Item -->
|
|
|
|
<!-- Promo Item -->
|
|
<div class="navbar-dropdown-menu-promo-item">
|
|
</div>
|
|
<!-- End Promo Item -->
|
|
</div>
|
|
<!-- End Promo -->
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Demos -->
|
|
|
|
<!-- Docs -->
|
|
<li class="hs-has-mega-menu nav-item"
|
|
data-hs-mega-menu-item-options='{
|
|
"desktop": {
|
|
"maxWidth": "20rem"
|
|
}
|
|
}'>
|
|
<a id="docsMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Docs</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-mega-menu hs-position-right dropdown-menu" aria-labelledby="docsMegaMenu" style="min-width: 20rem;">
|
|
<!-- Link -->
|
|
<a class="navbar-dropdown-menu-media-link" href="../documentation/index.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M4.85714 1H11.7364C12.0911 1 12.4343 1.12568 12.7051 1.35474L17.4687 5.38394C17.8057 5.66895 18 6.08788 18 6.5292V19.0833C18 20.8739 17.9796 21 16.1429 21H4.85714C3.02045 21 3 20.8739 3 19.0833V2.91667C3 1.12612 3.02045 1 4.85714 1ZM7 13C7 12.4477 7.44772 12 8 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H8C7.44772 14 7 13.5523 7 13ZM8 16C7.44772 16 7 16.4477 7 17C7 17.5523 7.44772 18 8 18H11C11.5523 18 12 17.5523 12 17C12 16.4477 11.5523 16 11 16H8Z" fill="#035A4B"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.85714 3H14.7364C15.0911 3 15.4343 3.12568 15.7051 3.35474L20.4687 7.38394C20.8057 7.66895 21 8.08788 21 8.5292V21.0833C21 22.8739 20.9796 23 19.1429 23H6.85714C5.02045 23 5 22.8739 5 21.0833V4.91667C5 3.12612 5.02045 3 6.85714 3ZM7 13C7 12.4477 7.44772 12 8 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H8C7.44772 14 7 13.5523 7 13ZM8 16C7.44772 16 7 16.4477 7 17C7 17.5523 7.44772 18 8 18H11C11.5523 18 12 17.5523 12 17C12 16.4477 11.5523 16 11 16H8Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="navbar-dropdown-menu-media-title">Documentation <span class="badge bg-primary rounded-pill ms-1">v4.1</span></span>
|
|
<p class="navbar-dropdown-menu-media-desc">Development guides for building projects with Space</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Link -->
|
|
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<!-- Link -->
|
|
<a class="navbar-dropdown-menu-media-link" href="../snippets/index.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M21 2H13C12.4 2 12 2.4 12 3V13C12 13.6 12.4 14 13 14H21C21.6 14 22 13.6 22 13V3C22 2.4 21.6 2 21 2ZM15.7 8L14 10.1V5.80005L15.7 8ZM15.1 4H18.9L17 6.40002L15.1 4ZM17 9.59998L18.9 12H15.1L17 9.59998ZM18.3 8L20 5.90002V10.2L18.3 8ZM9 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H9C9.6 22 10 21.6 10 21V3C10 2.4 9.6 2 9 2ZM4.89999 12L4 14.8V9.09998L4.89999 12ZM4.39999 4H7.60001L6 8.80005L4.39999 4ZM6 15.2L7.60001 20H4.39999L6 15.2ZM7.10001 12L8 9.19995V14.9L7.10001 12Z" fill="#035A4B"/>
|
|
<path d="M21 18H13C12.4 18 12 17.6 12 17C12 16.4 12.4 16 13 16H21C21.6 16 22 16.4 22 17C22 17.6 21.6 18 21 18ZM19 21C19 20.4 18.6 20 18 20H13C12.4 20 12 20.4 12 21C12 21.6 12.4 22 13 22H18C18.6 22 19 21.6 19 21Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="navbar-dropdown-menu-media-title">Snippets</span>
|
|
<p class="navbar-dropdown-menu-media-desc">Move quickly with copy-to-clipboard feature</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Link -->
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Docs -->
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<!-- End Topbar -->
|
|
|
|
<div class="container">
|
|
<nav class="navbar-nav-wrap">
|
|
<!-- Default Logo -->
|
|
<a class="navbar-brand" href="../demo-help-desk/index.html" aria-label="Front">
|
|
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
|
</a>
|
|
<!-- End Default Logo -->
|
|
|
|
<!-- Toggler -->
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-default">
|
|
<i class="bi-list"></i>
|
|
</span>
|
|
<span class="navbar-toggler-toggled">
|
|
<i class="bi-x"></i>
|
|
</span>
|
|
</button>
|
|
<!-- End Toggler -->
|
|
|
|
<!-- Collapse -->
|
|
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="../demo-help-desk/index.html">Help Page</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../demo-help-desk/listing.html">Listing</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../demo-help-desk/article-overview.html">Article Overview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="btn btn-primary btn-transition" type="button" data-bs-toggle="modal" data-bs-target="#loginModal">Log in</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main">
|
|
<!-- Hero -->
|
|
<div class="bg-light">
|
|
<div class="container content-space-2">
|
|
<div class="row justify-content-lg-between align-items-md-center">
|
|
<div class="col-md-6 mb-5 mb-md-0">
|
|
<div class="mb-3">
|
|
<h1>How can we help?</h1>
|
|
</div>
|
|
|
|
<form>
|
|
<!-- Input Card -->
|
|
<div class="input-card mb-3">
|
|
<div class="input-card-form">
|
|
<label for="searchAnswersForm" class="form-label visually-hidden">Search for answers</label>
|
|
<input type="text" class="form-control form-control-lg" id="searchAnswersForm" placeholder="Search for answers" aria-label="Search for answers">
|
|
</div>
|
|
<button type="button" class="btn btn-primary btn-lg">
|
|
<i class="bi-search"></i>
|
|
</button>
|
|
</div>
|
|
<!-- End Input Card -->
|
|
</form>
|
|
|
|
<!-- Links -->
|
|
<div class="d-flex">
|
|
<p class="text-nowrap">Popular help topics:</p>
|
|
|
|
<ul class="list-inline ms-1 mb-0">
|
|
<li class="list-inline-item"><a class="link" href="#">pricing,</a></li>
|
|
<li class="list-inline-item"><a class="link" href="#">upgrade,</a></li>
|
|
<li class="list-inline-item"><a class="link" href="#">hosting</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Links -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-5">
|
|
<img class="img-fluid" src="../assets/svg/illustrations/oc-looking-for-answers.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Hero -->
|
|
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<div class="row mb-5">
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M4.05424 15.1982C8.34524 7.76818 13.5782 3.26318 20.9282 2.01418C21.0729 1.98837 21.2216 1.99789 21.3618 2.04193C21.502 2.08597 21.6294 2.16323 21.7333 2.26712C21.8372 2.37101 21.9144 2.49846 21.9585 2.63863C22.0025 2.7788 22.012 2.92754 21.9862 3.07218C20.7372 10.4222 16.2322 15.6552 8.80224 19.9462L4.05424 15.1982ZM3.81924 17.3372L2.63324 20.4482C2.58427 20.5765 2.5735 20.7163 2.6022 20.8507C2.63091 20.9851 2.69788 21.1082 2.79503 21.2054C2.89218 21.3025 3.01536 21.3695 3.14972 21.3982C3.28408 21.4269 3.42387 21.4161 3.55224 21.3672L6.66524 20.1802L3.81924 17.3372ZM16.5002 5.99818C16.2036 5.99818 15.9136 6.08615 15.6669 6.25097C15.4202 6.41579 15.228 6.65006 15.1144 6.92415C15.0009 7.19824 14.9712 7.49984 15.0291 7.79081C15.0869 8.08178 15.2298 8.34906 15.4396 8.55884C15.6494 8.76862 15.9166 8.91148 16.2076 8.96935C16.4986 9.02723 16.8002 8.99753 17.0743 8.884C17.3484 8.77046 17.5826 8.5782 17.7474 8.33153C17.9123 8.08486 18.0002 7.79485 18.0002 7.49818C18.0002 7.10035 17.8422 6.71882 17.5609 6.43752C17.2796 6.15621 16.8981 5.99818 16.5002 5.99818Z" fill="#035A4B"/>
|
|
<path d="M4.05423 15.1982L2.24723 13.3912C2.15505 13.299 2.08547 13.1867 2.04395 13.0632C2.00243 12.9396 1.9901 12.8081 2.00793 12.679C2.02575 12.5498 2.07325 12.4266 2.14669 12.3189C2.22013 12.2112 2.31752 12.1219 2.43123 12.0582L9.15323 8.28918C7.17353 10.3717 5.4607 12.6926 4.05423 15.1982V15.1982ZM8.80023 19.9442L10.6072 21.7512C10.6994 21.8434 10.8117 21.9129 10.9352 21.9545C11.0588 21.996 11.1903 22.0083 11.3195 21.9905C11.4486 21.9727 11.5718 21.9252 11.6795 21.8517C11.7872 21.7783 11.8765 21.6809 11.9402 21.5672L15.7092 14.8442C13.6269 16.8245 11.3061 18.5377 8.80023 19.9442V19.9442ZM7.04023 18.1832L12.5832 12.6402C12.7381 12.4759 12.8228 12.2577 12.8195 12.032C12.8161 11.8063 12.725 11.5907 12.5653 11.4311C12.4057 11.2714 12.1901 11.1803 11.9644 11.1769C11.7387 11.1736 11.5205 11.2583 11.3562 11.4132L5.81323 16.9562L7.04023 18.1832Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Getting started</h3>
|
|
<p class="card-text text-body">Welcome to Front! We're so glad you're here. Let's get started!</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">1 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Luisa Woodfine
|
|
<span class="text-muted">and</span>
|
|
Neil Galavan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM12 7C10.3 7 9 8.3 9 10C9 11.7 10.3 13 12 13C13.7 13 15 11.7 15 10C15 8.3 13.7 7 12 7Z" fill="#035A4B"/>
|
|
<path d="M12 22C14.6 22 17 21 18.7 19.4C17.9 16.9 15.2 15 12 15C8.8 15 6.09999 16.9 5.29999 19.4C6.99999 21 9.4 22 12 22Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Account</h3>
|
|
<p class="card-text text-body">Adjust your profile and preferences to make Front work just for you!</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">2 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Fiona Burke, Luisa Woodfine
|
|
<span class="text-muted">and</span>
|
|
Neil Galavan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g id="com/com014">
|
|
<path id="vector" opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M4 4L11.6314 2.56911C11.875 2.52343 12.125 2.52343 12.3686 2.56911L20 4V11.9033C20 15.696 18.0462 19.2211 14.83 21.2313L12.53 22.6687C12.2057 22.8714 11.7943 22.8714 11.47 22.6687L9.17001 21.2313C5.95382 19.2211 4 15.696 4 11.9033L4 4Z" fill="#035A4B"/>
|
|
<path id="group" fill-rule="evenodd" clip-rule="evenodd" d="M9.5 10.5C9.5 9.11929 10.6193 8 12 8C13.3807 8 14.5 9.11929 14.5 10.5V11C15.0523 11 15.5 11.4477 15.5 12V15C15.5 15.5523 15.0523 16 14.5 16H9.5C8.94772 16 8.5 15.5523 8.5 15V12C8.5 11.4477 8.94772 11 9.5 11V10.5ZM12 9C11.1716 9 10.5 9.67157 10.5 10.5V11H13.5V10.5C13.5 9.67157 12.8284 9 12 9Z" fill="#035A4B"/>
|
|
</g>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Data security</h3>
|
|
<p class="card-text text-body">Detailed information on how our customer data is securely stored.</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">5 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Fiona Burke, Luisa Woodfine, Neil Galavan
|
|
<span class="text-muted">and</span>
|
|
Monica Garcia
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M18 10V20C18 20.6 18.4 21 19 21C19.6 21 20 20.6 20 20V10H18Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M11 10V17H6V10H4V20C4 20.6 4.4 21 5 21H12C12.6 21 13 20.6 13 20V10H11Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M10 10C10 11.1 9.1 12 8 12C6.9 12 6 11.1 6 10H10Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M18 10C18 11.1 17.1 12 16 12C14.9 12 14 11.1 14 10H18Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M14 4H10V10H14V4Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M17 4H20L22 10H18L17 4Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M7 4H4L2 10H6L7 4Z" fill="#035A4B"/>
|
|
<path d="M6 10C6 11.1 5.1 12 4 12C2.9 12 2 11.1 2 10H6ZM10 10C10 11.1 10.9 12 12 12C13.1 12 14 11.1 14 10H10ZM18 10C18 11.1 18.9 12 20 12C21.1 12 22 11.1 22 10H18ZM19 2H5C4.4 2 4 2.4 4 3V4H20V3C20 2.4 19.6 2 19 2ZM12 17C12 16.4 11.6 16 11 16H6C5.4 16 5 16.4 5 17C5 17.6 5.4 18 6 18H11C11.6 18 12 17.6 12 17Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Market</h3>
|
|
<p class="card-text text-body">Some further explanation on when Front can and cannot be used.</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">3 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Luisa Woodfine
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M22 7H2V11H22V7Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M21 19H3C2.4 19 2 18.6 2 18V6C2 5.4 2.4 5 3 5H21C21.6 5 22 5.4 22 6V18C22 18.6 21.6 19 21 19ZM14 14C14 13.4 13.6 13 13 13H5C4.4 13 4 13.4 4 14C4 14.6 4.4 15 5 15H13C13.6 15 14 14.6 14 14ZM16 15.5C16 16.3 16.7 17 17.5 17H18.5C19.3 17 20 16.3 20 15.5C20 14.7 19.3 14 18.5 14H17.5C16.7 14 16 14.7 16 15.5Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Subscription</h3>
|
|
<p class="card-text text-body">Assistance on how and when you might use the subscription product.</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">2 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Fiona Burke, Luisa Woodfine
|
|
<span class="text-muted">and</span>
|
|
Neil Galavan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M12 17C16.4183 17 20 13.4183 20 9C20 4.58172 16.4183 1 12 1C7.58172 1 4 4.58172 4 9C4 13.4183 7.58172 17 12 17Z" fill="#035A4B"/>
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M6.53819 9L10.568 19.3624L11.976 18.8149L13.3745 19.3674L17.4703 9H6.53819ZM9.46188 11H14.5298L11.9759 17.4645L9.46188 11Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M10 22H14V22C14 23.1046 13.1046 24 12 24V24C10.8954 24 10 23.1046 10 22V22Z" fill="#035A4B"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18C15.5523 18 16 18.4477 16 19C16 19.5523 15.5523 20 15 20C15.5523 20 16 20.4477 16 21C16 21.5523 15.5523 22 15 22H9C8.44772 22 8 21.5523 8 21C8 20.4477 8.44772 20 9 20C8.44772 20 8 19.5523 8 19C8 18.4477 8.44772 18 9 18C8.44772 18 8 17.5523 8 17Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Tips, tricks & more</h3>
|
|
<p class="card-text text-body">Tips and tools for beginners and experts alike.</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">2 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Luisa Woodfine
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="text-center">
|
|
<a class="btn btn-outline-primary btn-transition" href="../demo-help-desk/listing.html">See all topics</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
|
|
<!-- Lists -->
|
|
<div class="container content-space-b-2 content-space-b-lg-3">
|
|
<div class="row">
|
|
<div class="col-sm-6 col-md-4 mb-5 mb-md-0">
|
|
<span class="svg-icon text-primary mb-4">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M12 20.0217L8.47345 21.7285L6.86905 18.1542L3.07048 17.1949L4.13894 13.4256L1.84573 10.249L5.0871 8.04825L5.37225 4.14081L9.2699 4.5385L12 1.72852L14.7301 4.5385L18.6277 4.14081L18.9129 8.04825L22.1542 10.249L19.861 13.4256L20.9295 17.1949L17.1309 18.1542L15.5265 21.7285L12 20.0217Z" fill="#008060"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 15.006L10.0463 16.0332C9.81245 16.1561 9.5232 16.0662 9.40025 15.8324C9.3513 15.7393 9.33445 15.6326 9.3522 15.5289L9.72535 13.3533L8.1447 11.8126C7.9555 11.6282 7.95165 11.3253 8.13605 11.1361C8.2095 11.0608 8.3057 11.0118 8.4098 10.9967L10.5942 10.6792L11.5711 8.69985C11.6881 8.46295 11.9749 8.3657 12.2118 8.4826C12.3061 8.52915 12.3825 8.60555 12.4291 8.69985L13.4059 10.6792L15.5903 10.9967C15.8518 11.0346 16.0329 11.2774 15.9949 11.5388C15.9798 11.6429 15.9308 11.7392 15.8555 11.8126L14.2748 13.3533L14.6479 15.5289C14.6926 15.7893 14.5177 16.0366 14.2573 16.0812C14.1537 16.099 14.047 16.0821 13.9539 16.0332L12.0001 15.006Z" fill="#008060"/>
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<div class="mb-4">
|
|
<h4>Featured articles</h4>
|
|
</div>
|
|
|
|
<!-- List -->
|
|
<ul class="list-unstyled list-pointer">
|
|
<li class="list-pointer-item">
|
|
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">What is Front?</a>
|
|
</li>
|
|
<li class="list-pointer-item">
|
|
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Getting started for workspace creators</a>
|
|
</li>
|
|
<li class="list-pointer-item">
|
|
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Edit your profile</a>
|
|
</li>
|
|
<li class="list-pointer-item">
|
|
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">View and download invoices</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End List -->
|
|
|
|
<a class="link" href="../demo-help-desk/listing.html">See all articles <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-5 mb-md-0">
|
|
<span class="svg-icon text-primary mb-4">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M4 4L11.6314 2.56911C11.875 2.52343 12.125 2.52343 12.3686 2.56911L20 4V11.9033C20 15.696 18.0462 19.2211 14.83 21.2313L12.53 22.6687C12.2057 22.8714 11.7943 22.8714 11.47 22.6687L9.17001 21.2313C5.95382 19.2211 4 15.696 4 11.9033L4 4Z" fill="#035A4B"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.175 14.75C10.9354 14.75 10.6958 14.6542 10.5042 14.4625L8.58749 12.5458C8.20415 12.1625 8.20415 11.5875 8.58749 11.2042C8.97082 10.8208 9.59374 10.8208 9.92915 11.2042L11.175 12.45L14.3375 9.2875C14.7208 8.90417 15.2958 8.90417 15.6792 9.2875C16.0625 9.67083 16.0625 10.2458 15.6792 10.6292L11.8458 14.4625C11.6542 14.6542 11.4146 14.75 11.175 14.75Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<div class="mb-4">
|
|
<h4>Most helpful articles</h4>
|
|
</div>
|
|
|
|
<!-- List -->
|
|
<ul class="list-unstyled list-pointer">
|
|
<li class="list-pointer-item">
|
|
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Working in Front</a>
|
|
</li>
|
|
<li class="list-pointer-item">
|
|
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Delete a page</a>
|
|
</li>
|
|
<li class="list-pointer-item">
|
|
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Add an app to your workspace</a>
|
|
</li>
|
|
<li class="list-pointer-item">
|
|
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">What is Item Support?</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End List -->
|
|
|
|
<a class="link" href="../demo-help-desk/listing.html">See all articles <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4">
|
|
<span class="svg-icon text-primary mb-4">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M5 15L3 21.5L9.5 19.5L5 15Z" fill="#035A4B"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 21C18.7467 21 23 16.7467 23 11.5C23 6.2533 18.7467 2 13.5 2C8.2533 2 4 6.2533 4 11.5C4 16.7467 8.2533 21 13.5 21ZM13.5 14.0061L11.5463 15.0332C11.3124 15.1562 11.0232 15.0663 10.9003 14.8324C10.8513 14.7393 10.8344 14.6326 10.8522 14.5289L11.2254 12.3533L9.6447 10.8126C9.4555 10.6282 9.45165 10.3254 9.63605 10.1362C9.7095 10.0609 9.8057 10.0118 9.9098 9.9967L12.0942 9.67925L13.0711 7.69985C13.1881 7.46295 13.4749 7.3657 13.7118 7.4826C13.8061 7.52915 13.8825 7.60555 13.9291 7.69985L14.9059 9.67925L17.0903 9.9967C17.3517 10.0347 17.5329 10.2774 17.4949 10.5388C17.4798 10.6429 17.4307 10.7392 17.3554 10.8126L15.7748 12.3533L16.1479 14.5289C16.1926 14.7893 16.0177 15.0366 15.7573 15.0813C15.6537 15.0991 15.5469 15.0822 15.4538 15.0332L13.5 14.0061Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<div class="mb-4">
|
|
<h4>Popular forum topics</h4>
|
|
</div>
|
|
|
|
<!-- List -->
|
|
<ul class="list-unstyled list-pointer">
|
|
<li class="list-pointer-item">
|
|
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Getting started for new members</a>
|
|
</li>
|
|
<li class="list-pointer-item">
|
|
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Invite new members to your workspace</a>
|
|
</li>
|
|
<li class="list-pointer-item">
|
|
<a class="link link-secondary" href="../demo-help-desk/article-overview.html">Bundled Plugins</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End List -->
|
|
|
|
<a class="link" href="../demo-help-desk/listing.html">See all articles <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Lists -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== FOOTER ========== -->
|
|
<footer class="bg-dark">
|
|
<div class="container pb-1 pb-lg-5">
|
|
<div class="row content-space-t-2">
|
|
<div class="col-lg-3 mb-7 mb-lg-0">
|
|
<!-- Logo -->
|
|
<div class="mb-5">
|
|
<a class="navbar-brand" href="../index.html" aria-label="Space">
|
|
<img class="navbar-brand-logo" src="../assets/svg/logos/logo-white.svg" alt="Image Description">
|
|
</a>
|
|
</div>
|
|
<!-- End Logo -->
|
|
|
|
<!-- List -->
|
|
<ul class="list-unstyled list-py-1">
|
|
<li><a class="link-sm link-light" href="#"><i class="bi-geo-alt-fill me-1"></i> 153 Williamson Plaza, Maggieberg</a></li>
|
|
<li><a class="link-sm link-light" href="tel:1-062-109-9222"><i class="bi-telephone-inbound-fill me-1"></i> +1 (062) 109-9222</a></li>
|
|
</ul>
|
|
<!-- End List -->
|
|
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm mb-7 mb-sm-0">
|
|
<h5 class="text-white mb-3">Company</h5>
|
|
|
|
<!-- List -->
|
|
<ul class="list-unstyled list-py-1 mb-0">
|
|
<li><a class="link-sm link-light" href="#">About</a></li>
|
|
<li><a class="link-sm link-light" href="#">Careers <span class="badge bg-warning text-dark rounded-pill ms-1">We're hiring</span></a></li>
|
|
<li><a class="link-sm link-light" href="#">Blog</a></li>
|
|
<li><a class="link-sm link-light" href="#">Customers <i class="bi-box-arrow-up-right small ms-1"></i></a></li>
|
|
<li><a class="link-sm link-light" href="#">Hire us</a></li>
|
|
</ul>
|
|
<!-- End List -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm mb-7 mb-sm-0">
|
|
<h5 class="text-white mb-3">Features</h5>
|
|
|
|
<!-- List -->
|
|
<ul class="list-unstyled list-py-1 mb-0">
|
|
<li><a class="link-sm link-light" href="#">Press <i class="bi-box-arrow-up-right small ms-1"></i></a></li>
|
|
<li><a class="link-sm link-light" href="#">Release Notes</a></li>
|
|
<li><a class="link-sm link-light" href="#">Integrations</a></li>
|
|
<li><a class="link-sm link-light" href="#">Pricing</a></li>
|
|
</ul>
|
|
<!-- End List -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm">
|
|
<h5 class="text-white mb-3">Documentation</h5>
|
|
|
|
<!-- List -->
|
|
<ul class="list-unstyled list-py-1 mb-0">
|
|
<li><a class="link-sm link-light" href="#">Support</a></li>
|
|
<li><a class="link-sm link-light" href="#">Docs</a></li>
|
|
<li><a class="link-sm link-light" href="#">Status</a></li>
|
|
<li><a class="link-sm link-light" href="#">API Reference</a></li>
|
|
<li><a class="link-sm link-light" href="#">Tech Requirements</a></li>
|
|
</ul>
|
|
<!-- End List -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm">
|
|
<h5 class="text-white mb-3">Resources</h5>
|
|
|
|
<!-- List -->
|
|
<ul class="list-unstyled list-py-1 mb-5">
|
|
<li><a class="link-sm link-light" href="#"><i class="bi-question-circle-fill me-1"></i> Help</a></li>
|
|
<li><a class="link-sm link-light" href="#"><i class="bi-person-circle me-1"></i> Your Account</a></li>
|
|
</ul>
|
|
<!-- End List -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="border-top border-white-10 my-7"></div>
|
|
|
|
<div class="row mb-7">
|
|
<div class="col-sm mb-3 mb-sm-0">
|
|
<!-- Socials -->
|
|
<ul class="list-inline list-separator list-separator-light mb-0">
|
|
<li class="list-inline-item">
|
|
<a class="link-sm link-light" href="#">Privacy & Policy</a>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<a class="link-sm link-light" href="#">Terms</a>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<a class="link-sm link-light" href="#">Site Map</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Socials -->
|
|
</div>
|
|
|
|
<div class="col-sm-auto">
|
|
<!-- Socials -->
|
|
<ul class="list-inline mb-0">
|
|
<li class="list-inline-item">
|
|
<a class="btn btn-soft-light btn-xs btn-icon" href="#">
|
|
<i class="bi-facebook"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="list-inline-item">
|
|
<a class="btn btn-soft-light btn-xs btn-icon" href="#">
|
|
<i class="bi-google"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="list-inline-item">
|
|
<a class="btn btn-soft-light btn-xs btn-icon" href="#">
|
|
<i class="bi-twitter"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="list-inline-item">
|
|
<a class="btn btn-soft-light btn-xs btn-icon" href="#">
|
|
<i class="bi-github"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="list-inline-item">
|
|
<!-- Button Group -->
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-soft-light btn-xs dropdown-toggle" id="footerSelectLanguage" data-bs-toggle="dropdown" aria-expanded="false" data-bs-dropdown-animation>
|
|
<span class="d-flex align-items-center">
|
|
<img class="avatar avatar-xss avatar-circle me-2" src="../assets/vendor/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/>
|
|
<span>English (US)</span>
|
|
</span>
|
|
</button>
|
|
|
|
<div class="dropdown-menu" aria-labelledby="footerSelectLanguage">
|
|
<a class="dropdown-item d-flex align-items-center active" href="#">
|
|
<img class="avatar avatar-xss avatar-circle me-2" src="../assets/vendor/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/>
|
|
<span>English (US)</span>
|
|
</a>
|
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
|
<img class="avatar avatar-xss avatar-circle me-2" src="../assets/vendor/flag-icon-css/flags/1x1/de.svg" alt="Image description" width="16"/>
|
|
<span>Deutsch</span>
|
|
</a>
|
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
|
<img class="avatar avatar-xss avatar-circle me-2" src="../assets/vendor/flag-icon-css/flags/1x1/es.svg" alt="Image description" width="16"/>
|
|
<span>Español</span>
|
|
</a>
|
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
|
<img class="avatar avatar-xss avatar-circle me-2" src="../assets/vendor/flag-icon-css/flags/1x1/cn.svg" alt="Image description" width="16"/>
|
|
<span>中文 (繁體)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Button Group -->
|
|
</li>
|
|
</ul>
|
|
<!-- End Socials -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Copyright -->
|
|
<div class="w-md-85 text-lg-center mx-lg-auto">
|
|
<p class="text-white-50 small">© Front. 2021 Htmlstream. All rights reserved.</p>
|
|
<p class="text-white-50 small">When you visit or interact with our sites, services or tools, we or our authorised service providers may use cookies for storing information to help provide you with a better, faster and safer experience and for marketing purposes.</p>
|
|
</div>
|
|
<!-- End Copyright -->
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- ========== END FOOTER ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Log In -->
|
|
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<!-- Header -->
|
|
<div class="modal-close">
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="modal-body">
|
|
<!-- Log in -->
|
|
<div id="loginModalFormLogin">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-7">
|
|
<h3 class="modal-title">Log in to Front</h3>
|
|
<p>Login to manage your account</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<form class="js-validate needs-validation" novalidate>
|
|
<!-- Form -->
|
|
<div class="mb-3">
|
|
<label class="form-label" for="loginModalFormLoginEmail">Your email</label>
|
|
<input type="email" class="form-control" name="email" id="loginModalFormLoginEmail" placeholder="email@site.com" aria-label="email@site.com" required>
|
|
<span class="invalid-feedback">Please enter a valid email address.</span>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<label class="form-label" for="loginModalFormLoginPassword">Password</label>
|
|
|
|
<a class="js-animation-link form-label-link" href="javascript:;"
|
|
data-hs-show-animation-options='{
|
|
"targetSelector": "#loginModalFormResetPassword",
|
|
"groupName": "idForm"
|
|
}'>Forgot Password?</a>
|
|
</div>
|
|
|
|
<input type="password" class="form-control form-control-lg" name="password" id="loginModalFormLoginPassword" placeholder="8+ characters required" aria-label="8+ characters required" required minlength="8">
|
|
<span class="invalid-feedback">Please enter a valid password.</span>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-grid gap-3 text-center">
|
|
<button type="submit" class="btn btn-primary btn-lg">Log in</button>
|
|
|
|
<span class="divider-center">OR</span>
|
|
|
|
<button type="submit" class="btn btn-ghost-secondary">
|
|
<span class="d-flex justify-content-center align-items-center">
|
|
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
|
|
Log in with Google
|
|
</span>
|
|
</button>
|
|
|
|
<p>Don't have an account yet?
|
|
<a class="js-animation-link link" href="javascript:;" role="button"
|
|
data-hs-show-animation-options='{
|
|
"targetSelector": "#loginModalFormSignup",
|
|
"groupName": "idForm"
|
|
}'>Sign up</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- End Log in -->
|
|
|
|
<!-- Log in -->
|
|
<div id="loginModalFormSignup" style="display: none; opacity: 0;">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-7">
|
|
<h3 class="modal-title">Sign up</h3>
|
|
<p>Fill out the form to get started</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<form class="js-validate needs-validation" novalidate>
|
|
<!-- Form -->
|
|
<div class="mb-3">
|
|
<label class="form-label" for="loginModalFormSignupEmail">Your email</label>
|
|
<input type="email" class="form-control form-control-lg" name="email" id="loginModalFormSignupEmail" placeholder="email@site.com" aria-label="email@site.com" required>
|
|
<span class="invalid-feedback">Please enter a valid email address.</span>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-3">
|
|
<label class="form-label" for="loginModalFormSignupPassword">Password</label>
|
|
<input type="password" class="form-control form-control-lg" name="password" id="loginModalFormSignupPassword" placeholder="8+ characters required" aria-label="8+ characters required" required>
|
|
<span class="invalid-feedback">Your password is invalid. Please try again.</span>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-3" data-hs-validation-validate-class>
|
|
<label class="form-label" for="loginModalFormSignupConfirmPassword">Confirm password</label>
|
|
<input type="password" class="form-control form-control-lg" name="confirmPassword" id="loginModalFormSignupConfirmPassword" placeholder="8+ characters required" aria-label="8+ characters required" required
|
|
data-hs-validation-equal-field="#loginModalFormSignupPassword">
|
|
<span class="invalid-feedback">Password does not match the confirm password.</span>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="text-center mb-3">
|
|
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
|
|
</div>
|
|
|
|
<div class="d-grid gap-3 text-center">
|
|
<button type="submit" class="btn btn-primary btn-lg">Sign up</button>
|
|
|
|
<span class="divider-center">OR</span>
|
|
|
|
<button type="submit" class="btn btn-ghost-secondary">
|
|
<span class="d-flex justify-content-center align-items-center">
|
|
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
|
|
Sign up with Google
|
|
</span>
|
|
</button>
|
|
|
|
<p>Already have an account?
|
|
<a class="js-animation-link link" href="javascript:;" role="button"
|
|
data-hs-show-animation-options='{
|
|
"targetSelector": "#loginModalFormLogin",
|
|
"groupName": "idForm"
|
|
}'>Log in</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- End Log in -->
|
|
|
|
<!-- Reset Password -->
|
|
<div id="loginModalFormResetPassword" style="display: none; opacity: 0;">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-7">
|
|
<h3 class="modal-title">Forgot password</h3>
|
|
<p>Instructions will be sent to you</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<form class="js-validate needs-validation" novalidate>
|
|
<!-- Form -->
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<label class="form-label" for="signupModalFormResetPasswordEmail" tabindex="0">Your email</label>
|
|
|
|
<a class="js-animation-link form-label-link" href="javascript:;"
|
|
data-hs-show-animation-options='{
|
|
"targetSelector": "#loginModalFormLogin",
|
|
"groupName": "idForm"
|
|
}'>
|
|
<i class="bi-chevron-left small"></i> Back to Log in
|
|
</a>
|
|
</div>
|
|
|
|
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormResetPasswordEmail" tabindex="1" placeholder="Enter your email address" aria-label="Enter your email address" required>
|
|
<span class="invalid-feedback">Please enter a valid email address.</span>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-grid gap-3 text-center">
|
|
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- End Reset Password -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Go To -->
|
|
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
|
data-hs-go-to-options='{
|
|
"offsetTop": 700,
|
|
"position": {
|
|
"init": {
|
|
"right": "2rem"
|
|
},
|
|
"show": {
|
|
"bottom": "2rem"
|
|
},
|
|
"hide": {
|
|
"bottom": "-2rem"
|
|
}
|
|
}
|
|
}'>
|
|
<i class="bi-chevron-up"></i>
|
|
</a>
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../assets/js/vendor.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="../assets/js/theme.min.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF MEGA MENU
|
|
// =======================================================
|
|
new HSMegaMenu('.js-mega-menu', {
|
|
desktop: {
|
|
position: 'left'
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF SHOW ANIMATIONS
|
|
// =======================================================
|
|
new HSShowAnimation('.js-animation-link')
|
|
|
|
|
|
// INITIALIZATION OF BOOTSTRAP VALIDATION
|
|
// =======================================================
|
|
HSBsValidation.init('.js-validate', {
|
|
onSubmit: data => {
|
|
data.event.preventDefault()
|
|
alert('Submited')
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF BOOTSTRAP DROPDOWN
|
|
// =======================================================
|
|
HSBsDropdown.init()
|
|
|
|
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|