1461 lines
77 KiB
HTML
1461 lines
77 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>App Tool | 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">
|
||
<link rel="stylesheet" href="./assets/vendor/aos/dist/aos.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-absolute-top navbar-light navbar-show-hide"
|
||
data-hs-header-options='{
|
||
"fixMoment": 1000,
|
||
"fixEffect": "slide"
|
||
}'>
|
||
<!-- 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 small">
|
||
<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">
|
||
<!-- 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 active" href="./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="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 " 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="js-mega-menu navbar-nav-wrap">
|
||
<!-- Default Logo -->
|
||
<a class="navbar-brand" href="./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">
|
||
<div class="navbar-absolute-top-scroller">
|
||
<ul class="navbar-nav">
|
||
<!-- Landings -->
|
||
<li class="hs-has-mega-menu nav-item">
|
||
<a id="landingsMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle active" aria-current="page" href="#" role="button" aria-expanded="false">Landings</a>
|
||
|
||
<!-- Mega Menu -->
|
||
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="landingsMegaMenu" style="min-width: 30rem;">
|
||
<div class="row">
|
||
<div class="col-lg-6 d-none d-lg-block">
|
||
<!-- Banner Image -->
|
||
<div class="navbar-dropdown-menu-banner" style="background-image: url(./assets/svg/components/shape-3.svg);">
|
||
<div class="navbar-dropdown-menu-banner-content">
|
||
<div class="mb-4">
|
||
<span class="h2 d-block">Branding Works</span>
|
||
<p>Experience a level of our quality in both design & customization works.</p>
|
||
</div>
|
||
<a class="btn btn-primary btn-transition" href="#">Learn more <i class="bi-chevron-right small"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Banner Image -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-6">
|
||
<div class="navbar-dropdown-menu-inner">
|
||
<div class="row">
|
||
<div class="col-sm mb-3 mb-sm-0">
|
||
<span class="dropdown-header">Classic</span>
|
||
<a class="dropdown-item " href="./landing-classic-corporate.html">Corporate</a>
|
||
<a class="dropdown-item " href="./landing-classic-analytics.html">Analytics <span class="badge bg-primary rounded-pill ms-1">Hot</span></a>
|
||
<a class="dropdown-item " href="./landing-classic-studio.html">Studio</a>
|
||
<a class="dropdown-item " href="./landing-classic-marketing.html">Marketing</a>
|
||
<a class="dropdown-item " href="./landing-classic-advertisement.html">Advertisement</a>
|
||
<a class="dropdown-item " href="./landing-classic-consulting.html">Consulting</a>
|
||
<a class="dropdown-item " href="./landing-classic-portfolio.html">Portfolio</a>
|
||
<a class="dropdown-item " href="./landing-classic-software.html">Software</a>
|
||
<a class="dropdown-item " href="./landing-classic-business.html">Business</a>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm">
|
||
<div class="mb-3">
|
||
<span class="dropdown-header">App</span>
|
||
<a class="dropdown-item " href="./landing-app-ui-kit.html">UI Kit</a>
|
||
<a class="dropdown-item " href="./landing-app-saas.html">SaaS</a>
|
||
<a class="dropdown-item " href="./landing-app-workflow.html">Workflow</a>
|
||
<a class="dropdown-item " href="./landing-app-payment.html">Payment</a>
|
||
<a class="dropdown-item active" href="./landing-app-tool.html">Tool</a>
|
||
</div>
|
||
|
||
<span class="dropdown-header">Onepage</span>
|
||
<a class="dropdown-item " href="./landing-onepage-corporate.html">Corporate</a>
|
||
<a class="dropdown-item " href="./landing-onepage-saas.html">SaaS <span class="badge bg-primary rounded-pill ms-1">Hot</span></a>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Mega Menu -->
|
||
</li>
|
||
<!-- End Landings -->
|
||
|
||
<!-- Company -->
|
||
<li class="hs-has-sub-menu nav-item">
|
||
<a id="companyMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Company</a>
|
||
|
||
<!-- Mega Menu -->
|
||
<div class="hs-sub-menu dropdown-menu" aria-labelledby="companyMegaMenu" style="min-width: 14rem;">
|
||
<a class="dropdown-item " href="./page-about.html">About</a>
|
||
<a class="dropdown-item " href="./page-services.html">Services</a>
|
||
<a class="dropdown-item " href="./page-customer-stories.html">Customer Stories</a>
|
||
<a class="dropdown-item " href="./page-customer-story.html">Customer Story</a>
|
||
<a class="dropdown-item " href="./page-careers.html">Careers</a>
|
||
<a class="dropdown-item " href="./page-careers-overview.html">Careers Overview</a>
|
||
<a class="dropdown-item " href="./page-hire-us.html">Hire Us</a>
|
||
<a class="dropdown-item " href="./page-pricing.html">Pricing</a>
|
||
<a class="dropdown-item " href="./page-contacts-agency.html">Contacts: Agency</a>
|
||
<a class="dropdown-item " href="./page-contacts-startup.html">Contacts: Startup</a>
|
||
</div>
|
||
<!-- End Mega Menu -->
|
||
</li>
|
||
<!-- End Company -->
|
||
|
||
<!-- Account -->
|
||
<li class="hs-has-sub-menu nav-item">
|
||
<a id="accountMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Account</a>
|
||
|
||
<!-- Mega Menu -->
|
||
<div class="hs-sub-menu dropdown-menu" aria-labelledby="accountMegaMenu" style="min-width: 14rem;">
|
||
<!-- Authentication -->
|
||
<div class="hs-has-sub-menu nav-item">
|
||
<a id="authenticationMegaMenu" class="hs-mega-menu-invoker dropdown-item dropdown-toggle " href="#" role="button" aria-expanded="false">Authentication</a>
|
||
|
||
<div class="hs-sub-menu dropdown-menu" aria-labelledby="authenticationMegaMenu" style="min-width: 14rem;">
|
||
<a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#signupModal">Signup Modal</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item " href="./page-login.html">Login</a>
|
||
<a class="dropdown-item " href="./page-signup.html">Signup</a>
|
||
<a class="dropdown-item " href="./page-reset-password.html">Reset Password</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item " href="./page-login-simple.html">Login Simple</a>
|
||
<a class="dropdown-item " href="./page-signup-simple.html">Signup Simple</a>
|
||
<a class="dropdown-item " href="./page-reset-password-simple.html">Reset Password Simple</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Authentication -->
|
||
|
||
<a class="dropdown-item " href="./account-overview.html">Personal Info</a>
|
||
<a class="dropdown-item " href="./account-security.html">Security</a>
|
||
<a class="dropdown-item " href="./account-notifications.html">Notifications</a>
|
||
<a class="dropdown-item " href="./account-preferences.html">Preferences</a>
|
||
<a class="dropdown-item " href="./account-orders.html">Orders</a>
|
||
<a class="dropdown-item " href="./account-wishlist.html">Wishlist</a>
|
||
<a class="dropdown-item " href="./account-payments.html">Payments</a>
|
||
<a class="dropdown-item " href="./account-address.html">Address</a>
|
||
<a class="dropdown-item " href="./account-teams.html">Teams</a>
|
||
</div>
|
||
<!-- End Mega Menu -->
|
||
</li>
|
||
<!-- End Account -->
|
||
|
||
<!-- Pages -->
|
||
<li class="hs-has-sub-menu nav-item">
|
||
<a id="pagesMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Pages</a>
|
||
|
||
<!-- Mega Menu -->
|
||
<div class="hs-sub-menu dropdown-menu" aria-labelledby="pagesMegaMenu" style="min-width: 14rem;">
|
||
<a class="dropdown-item " href="./page-faq.html">FAQ</a>
|
||
<a class="dropdown-item " href="./page-terms.html">Terms & Conditions</a>
|
||
<a class="dropdown-item " href="./page-privacy.html">Privacy & Policy</a>
|
||
<a class="dropdown-item " href="./page-coming-soon.html">Coming Soon</a>
|
||
<a class="dropdown-item " href="./page-coming-soon-simple.html">Coming Soon: Simple</a>
|
||
<a class="dropdown-item " href="./page-maintenance-mode.html">Maintenance Mode</a>
|
||
<a class="dropdown-item " href="./page-status.html">Status</a>
|
||
<a class="dropdown-item " href="./page-invoice.html">Invoice</a>
|
||
<a class="dropdown-item " href="./page-error-404.html">Error 404</a>
|
||
</div>
|
||
<!-- End Mega Menu -->
|
||
</li>
|
||
<!-- End Pages -->
|
||
|
||
<!-- Blog -->
|
||
<li class="hs-has-sub-menu nav-item">
|
||
<a id="blogMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Blog</a>
|
||
|
||
<!-- Mega Menu -->
|
||
<div class="hs-sub-menu dropdown-menu" aria-labelledby="blogMegaMenu" style="min-width: 14rem;">
|
||
<a class="dropdown-item " href="./blog-journal.html">Journal</a>
|
||
<a class="dropdown-item " href="./blog-metro.html">Metro</a>
|
||
<a class="dropdown-item " href="./blog-newsroom.html">Newsroom</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item " href="./blog-article.html">Article</a>
|
||
<a class="dropdown-item " href="./blog-author-profile.html">Author Profile</a>
|
||
</div>
|
||
<!-- End Mega Menu -->
|
||
</li>
|
||
<!-- End Blog -->
|
||
|
||
<!-- Portfolio -->
|
||
<li class="hs-has-sub-menu nav-item">
|
||
<a id="portfolioMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Portfolio</a>
|
||
|
||
<!-- Mega Menu -->
|
||
<div class="hs-sub-menu dropdown-menu" aria-labelledby="portfolioMegaMenu" style="min-width: 14rem;">
|
||
<a class="dropdown-item " href="./portfolio-grid.html">Grid</a>
|
||
<a class="dropdown-item " href="./portfolio-product-article.html">Product Article</a>
|
||
<a class="dropdown-item " href="./portfolio-case-studies-branding.html">Case Studies: Branding</a>
|
||
<a class="dropdown-item " href="./portfolio-case-studies-product.html">Case Studies: Product</a>
|
||
</div>
|
||
<!-- End Mega Menu -->
|
||
</li>
|
||
<!-- End Portfolio -->
|
||
|
||
<!-- Button -->
|
||
<li class="nav-item">
|
||
<a class="btn btn-primary btn-transition" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Buy now</a>
|
||
</li>
|
||
<!-- End Button -->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- End Collapse -->
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main">
|
||
<!-- Hero -->
|
||
<div class="gradient-x-overlay-sm-primary position-relative overflow-hidden">
|
||
<div class="container content-space-t-3 content-space-t-lg-4 content-space-b-2">
|
||
<div class="w-lg-65 text-center mx-lg-auto">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h1 class="display-4 mb-3">The <span class="text-primary">#1</span> software development tool.</h1>
|
||
<p class="lead">Front Software is built for every member of your software team to plan, track, and release great software.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="d-grid d-sm-flex justify-content-sm-center align-items-sm-center gap-3">
|
||
<a class="btn btn-primary btn-transition" href="#">Contact sales</a>
|
||
<small>or</small>
|
||
<a class="btn btn-soft-dark btn-transition" href="#">See pricing <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mockup -->
|
||
<div class="container content-space-b-2 content-space-b-lg-3">
|
||
<div class="position-relative w-lg-75 text-center mx-lg-auto">
|
||
<!-- Browser Device -->
|
||
<figure class="device-browser">
|
||
<div class="device-browser-header">
|
||
<div class="device-browser-header-btn-list">
|
||
<span class="device-browser-header-btn-list-btn"></span>
|
||
<span class="device-browser-header-btn-list-btn"></span>
|
||
<span class="device-browser-header-btn-list-btn"></span>
|
||
</div>
|
||
<div class="device-browser-header-browser-bar">www.htmlstream.com/front/</div>
|
||
</div>
|
||
|
||
<div class="device-browser-frame">
|
||
<img class="device-browser-img" src="./assets/img/1618x1010/img1.jpg" alt="Image Description">
|
||
</div>
|
||
</figure>
|
||
<!-- End Browser Device -->
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute top-0 end-0 mt-n10 me-n10" style="width: 12rem;" data-aos="fade-up" data-aos-delay="100" data-aos-offset="-50">
|
||
<img class="img-fluid" src="./assets/svg/components/dots-lg.svg" alt="Image Description">
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute bottom-0 start-0 mb-n7 ms-n7" style="width: 10rem;" data-aos="fade-up">
|
||
<img class="img-fluid" src="./assets/svg/components/dots.svg" alt="Image Description">
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Mockup -->
|
||
|
||
<!-- SVG Background Shape -->
|
||
<figure class="position-absolute top-0 end-0 zi-n1 mt-n10 me-n10" style="width: 32rem;">
|
||
<svg viewBox="0 0 451 902" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M451 820C247.2 820 82 654.8 82 451C82 247.2 247.2 82 451 82" stroke="white" stroke-width="164" stroke-miterlimit="10"/>
|
||
</svg>
|
||
</figure>
|
||
<!-- End SVG Background Shape -->
|
||
|
||
<!-- SVG Background Shape -->
|
||
<figure class="position-absolute bottom-0 start-0 zi-n1 mb-n10 me-n10" style="width: 21rem;">
|
||
<svg viewBox="0 0 451 902" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.125" d="M0 82C203.8 82 369 247.2 369 451C369 654.8 203.8 820 0 820" stroke="url(#paint1_linear)" stroke-width="164" stroke-miterlimit="10"/>
|
||
<defs>
|
||
<linearGradient id="paint1_linear" x1="323.205" y1="785.242" x2="-97.6164" y2="56.3589" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0" stop-color="white" stop-opacity="0"/>
|
||
<stop offset="1" stop-color="#377dff"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</figure>
|
||
<!-- End SVG Background Shape -->
|
||
</div>
|
||
<!-- End Hero -->
|
||
|
||
<!-- Clients -->
|
||
<div class="container content-space-1">
|
||
<div class="w-lg-75 mx-lg-auto">
|
||
<span class="divider-center text-dark mb-4">Trusted by the world's best</span>
|
||
|
||
<div class="row">
|
||
<div class="col text-center py-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="./assets/svg/brands/capsule-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col text-center py-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="./assets/svg/brands/fitbit-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col text-center py-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="./assets/svg/brands/forbes-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col text-center py-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="./assets/svg/brands/mailchimp-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col text-center py-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="./assets/svg/brands/layar-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Clients -->
|
||
|
||
<!-- Features -->
|
||
<div class="container content-space-t-2 content-space-b-2 content-space-b-lg-3">
|
||
<div class="row align-items-md-center">
|
||
<div class="col-md-7 mb-7 mb-md-0">
|
||
<div class="w-sm-75 mx-sm-auto" data-aos="fade-up">
|
||
<!-- Card -->
|
||
<div class="card bg-soft-primary text-center">
|
||
<div class="card-body">
|
||
<div class="w-75 mx-auto">
|
||
<h3>Choose a workflow, or make your own with Front Software</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-75 mx-auto">
|
||
<img class="img-fluid rounded-top-2" src="./assets/img/407x472/img7.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-5 order-md-2">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2 class="mb-3">Lightning-fast development with pre-built solutions</h2>
|
||
<p>Every team has a unique process for shipping software. Use an out-of-the-box workflow, or create one to match the way your team works.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-soft-bg-primary list-checked-lg">
|
||
<li class="list-checked-item">Extensive API documentation</li>
|
||
<li class="list-checked-item">Customizable & open source</li>
|
||
<li class="list-checked-item">Continiously improved</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Features -->
|
||
|
||
<!-- CTA -->
|
||
<div class="container">
|
||
<div class="w-lg-75 mx-lg-auto">
|
||
<div class="card card-sm overflow-hidden">
|
||
<!-- Card -->
|
||
<div class="card-body">
|
||
<div class="row justify-content-md-start align-items-md-center text-center text-md-start">
|
||
<div class="col-md offset-md-3 mb-3 mb-md-0">
|
||
<h4 class="card-title">Revolutionizing the way your team works!</h4>
|
||
</div>
|
||
|
||
<div class="col-md-auto">
|
||
<a class="btn btn-primary btn-transition" href="#">Get started</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="w-25 d-none d-md-block position-absolute top-0 start-0 mt-n2">
|
||
<svg viewBox="0 0 451 902" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.125" d="M0 82C203.8 82 369 247.2 369 451C369 654.8 203.8 820 0 820" stroke="url(#paint2_linear)" stroke-width="164" stroke-miterlimit="10"/>
|
||
<defs>
|
||
<linearGradient id="paint2_linear" x1="323.205" y1="785.242" x2="-97.6164" y2="56.3589" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0" stop-color="white" stop-opacity="0"/>
|
||
<stop offset="1" stop-color="#377dff"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End CTA -->
|
||
|
||
<!-- Features -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<div class="row align-items-md-center">
|
||
<div class="col-md-7 order-md-2 mb-7 mb-md-0">
|
||
<div class="w-sm-75 mx-sm-auto" data-aos="fade-up">
|
||
<!-- Card -->
|
||
<div class="card bg-soft-success text-center">
|
||
<div class="card-body">
|
||
<div class="w-75 mx-auto">
|
||
<h3>Integrate with the tools and workflow you already use</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-75 mx-auto">
|
||
<img class="img-fluid rounded-top-2" src="./assets/img/407x472/img8.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-5">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2 class="mb-3">The best software teams ship early and often</h2>
|
||
<p>Front Software is built for every member of your software team to plan, track, and release great software.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-soft-bg-primary list-checked-lg">
|
||
<li class="list-checked-item">Knowledge management</li>
|
||
<li class="list-checked-item">Development workflow</li>
|
||
<li class="list-checked-item">Continuous integration</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Features -->
|
||
|
||
<!-- Icon Blocks -->
|
||
<div class="position-relative bg-dark" style="background-image: url(./assets/svg/components/wave-pattern-light.svg);">
|
||
<div class="container content-space-2 content-space-lg-3 position-relative zi-2">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2 class="text-white">Go Front with ease</h2>
|
||
<p class="text-white-70">Whether you’re a seasoned agile expert, or just getting started, Jira Software unlocks the power of agile.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Icon Blocks -->
|
||
<div class="row mb-5 mb-sm-9">
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
|
||
<span class="svg-icon text-white mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M17.5 11H6.5C4 11 2 9 2 6.5C2 4 4 2 6.5 2H17.5C20 2 22 4 22 6.5C22 9 20 11 17.5 11ZM15 6.5C15 7.9 16.1 9 17.5 9C18.9 9 20 7.9 20 6.5C20 5.1 18.9 4 17.5 4C16.1 4 15 5.1 15 6.5Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M17.5 22H6.5C4 22 2 20 2 17.5C2 15 4 13 6.5 13H17.5C20 13 22 15 22 17.5C22 20 20 22 17.5 22ZM4 17.5C4 18.9 5.1 20 6.5 20C7.9 20 9 18.9 9 17.5C9 16.1 7.9 15 6.5 15C5.1 15 4 16.1 4 17.5Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4 class="text-white">Flexible planning</h4>
|
||
<p class="text-white-70">Front Software's rich planning features enable your team to flexibly plan.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
|
||
<span class="svg-icon text-white mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M3 3V17H7V21H15V9H20V3H3Z" fill="#035A4B"/>
|
||
<path d="M20 22H3C2.4 22 2 21.6 2 21V3C2 2.4 2.4 2 3 2H20C20.6 2 21 2.4 21 3V21C21 21.6 20.6 22 20 22ZM19 4H4V8H19V4ZM6 18H4V20H6V18ZM6 14H4V16H6V14ZM6 10H4V12H6V10ZM10 18H8V20H10V18ZM10 14H8V16H10V14ZM10 10H8V12H10V10ZM14 18H12V20H14V18ZM14 14H12V16H14V14ZM14 10H12V12H14V10ZM19 14H17V20H19V14ZM19 10H17V12H19V10Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4 class="text-white">Accurate estimations</h4>
|
||
<p class="text-white-70">Use story points, hours, t-shirt sizes, or your own estimation technique.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
|
||
<span class="svg-icon text-white mb-3">
|
||
<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 20.3C20.2091 20.3 22 18.5092 22 16.3C22 14.0909 20.2091 12.3 18 12.3C15.7909 12.3 14 14.0909 14 16.3C14 18.5092 15.7909 20.3 18 20.3Z" fill="#035A4B"/>
|
||
<path d="M18 18.3C17.4 18.3 17 17.9 17 17.3V15.3C17 14.7 17.4 14.3 18 14.3C18.6 14.3 19 14.7 19 15.3V17.3C19 17.9 18.6 18.3 18 18.3Z" fill="#035A4B"/>
|
||
<path d="M14.4 18.1001C14.5 18.5001 14.4 19.0001 14 19.2001C13.8 19.3001 13.7 19.3 13.5 19.3C13.2 19.3 12.8 19.1 12.6 18.8V18.7001C12.1 18.9001 11.6 19.0001 11 19.1001V19.2001C11 19.8001 10.6 20.2001 10 20.2001C9.4 20.2001 9 19.8001 9 19.2001V19.1001C8.4 19.0001 7.89999 18.9001 7.39999 18.7001V18.8C7.19999 19.1 6.9 19.3 6.5 19.3C6.3 19.3 6.2 19.3001 6 19.2001C5.5 18.9001 5.40001 18.3 5.60001 17.8V17.7001C5.20001 17.4001 4.79999 17 4.39999 16.5H4.3C4.1 16.6 4 16.6001 3.8 16.6001C3.5 16.6001 3.09999 16.4001 2.89999 16.1001C2.59999 15.6001 2.8 15.0001 3.3 14.7001H3.39999C3.19999 14.2001 3.1 13.7001 3 13.1001C2.4 13.1001 2 12.7001 2 12.1001C2 11.5001 2.4 11.1001 3 11.1001H3.10001C3.20001 10.5001 3.3 10 3.5 9.5H3.39999C2.89999 9.2 2.8 8.6001 3 8.1001C3.3 7.6001 3.89999 7.50007 4.39999 7.70007H4.5C4.8 7.30007 5.2 6.9 5.7 6.5V6.40002C5.4 5.90002 5.60001 5.3 6.10001 5C6.60001 4.7 7.2 4.90002 7.5 5.40002V5.5C8 5.3 8.50001 5.2001 9.10001 5.1001V5C9.10001 4.4 9.50001 4 10.1 4C10.7 4 11.1 4.4 11.1 5V5.1001C11.7 5.2001 12.2 5.3 12.7 5.5V5.40002C13 4.90002 13.6 4.8 14.1 5C14.6 5.3 14.7 5.90002 14.5 6.40002V6.5C14.9 6.8 15.3 7.20007 15.7 7.70007H15.8C16.3 7.40007 16.9 7.6001 17.2 8.1001C17.5 8.6001 17.3 9.2 16.8 9.5H16.7C16.9 10 17 10.5001 17.1 11.1001H17.2C17.8 11.1001 18.2 11.5001 18.2 12.1001C16 12.1001 14.2 13.9001 14.2 16.1001C14 17.0001 14.2 17.6001 14.4 18.1001ZM11.8 8.40002H8.89999C8.59999 8.40002 8.4 8.5001 8.2 8.6001C8.1 8.7001 7.99999 9.00005 7.89999 9.30005L7.39999 11.9C7.39999 12.1 7.3 12.3 7.3 12.3C7.3 12.5 7.4 12.6001 7.5 12.7001C7.6 12.8001 7.8 12.9 8 12.9C8.2 12.9 8.40001 12.8001 8.60001 12.6001C8.90001 12.4001 9.1 12.3001 9.2 12.2001C9.3 12.1001 9.59999 12.1001 9.89999 12.1001C10.2 12.1001 10.4 12.2 10.6 12.3C10.8 12.4 11 12.6 11.1 12.9C11.2 13.2 11.3 13.5 11.3 13.8C11.3 14.1 11.2 14.4001 11.1 14.7001C11 15.0001 10.8 15.2 10.6 15.3C10.4 15.4 10.1 15.5 9.89999 15.5C9.59999 15.5 9.30001 15.4001 9.10001 15.2001C8.80001 15.0001 8.7 14.8 8.5 14.4C8.3 14 8.1 13.9 7.8 13.9C7.6 13.9 7.5 14.0001 7.3 14.1001C7.2 14.2001 7.10001 14.4 7.10001 14.5C7.10001 14.7 7.19999 15 7.39999 15.3C7.59999 15.6 7.9 15.9001 8.3 16.1001C8.7 16.3001 9.19999 16.5 9.89999 16.5C10.5 16.5 11 16.4001 11.5 16.1001C12 15.8001 12.3 15.5001 12.5 15.1001C12.7 14.7001 12.9 14.2001 12.9 13.6001C12.9 13.2001 12.8 12.9001 12.7 12.6001C12.6 12.3001 12.4 12 12.2 11.8C12 11.6 11.7 11.4 11.4 11.3C11.1 11.2 10.8 11.1001 10.4 11.1001C9.99999 11.1001 9.5 11.2 9 11.5L9.3 9.70007H11.9C12.2 9.70007 12.4 9.6 12.5 9.5C12.6 9.4 12.7 9.2 12.7 9C12.6 8.6 12.3 8.40002 11.8 8.40002Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4 class="text-white">Value-driven prioritization</h4>
|
||
<p class="text-white-70">Order user stories, issues, and bugs in your product backlog with simple dragging.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
|
||
<span class="svg-icon text-white mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M11.8 5.2L17.7 8.6V15.4L11.8 18.8L5.90001 15.4V8.6L11.8 5.2ZM11.8 2C11.5 2 11.2 2.1 11 2.2L3.8 6.4C3.3 6.7 3 7.3 3 7.9V16.2C3 16.8 3.3 17.4 3.8 17.7L11 21.9C11.3 22 11.5 22.1 11.8 22.1C12.1 22.1 12.4 22 12.6 21.9L19.8 17.7C20.3 17.4 20.6 16.8 20.6 16.2V7.9C20.6 7.3 20.3 6.7 19.8 6.4L12.6 2.2C12.4 2.1 12.1 2 11.8 2Z" fill="#035A4B"/>
|
||
<path d="M11.8 8.69995L8.90001 10.3V13.7L11.8 15.3L14.7 13.7V10.3L11.8 8.69995Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4 class="text-white">Transparent execution</h4>
|
||
<p class="text-white-70">Front Software brings a new level of transparency to your team's work.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
|
||
<span class="svg-icon text-white mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M2.10001 10C3.00001 5.6 6.69998 2.3 11.2 2L8.79999 4.39999L11.1 7C9.60001 7.3 8.30001 8.19999 7.60001 9.59999L4.5 12.4L2.10001 10ZM19.3 11.5L16.4 14C15.7 15.5 14.4 16.6 12.7 16.9L15 19.5L12.6 21.9C17.1 21.6 20.8 18.2 21.7 13.9L19.3 11.5Z" fill="#035A4B"/>
|
||
<path d="M13.8 2.09998C18.2 2.99998 21.5 6.69998 21.8 11.2L19.4 8.79997L16.8 11C16.5 9.39998 15.5 8.09998 14 7.39998L11.4 4.39998L13.8 2.09998ZM12.3 19.4L9.69998 16.4C8.29998 15.7 7.3 14.4 7 12.8L4.39999 15.1L2 12.7C2.3 17.2 5.7 20.9 10 21.8L12.3 19.4Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4 class="text-white">Actionable results</h4>
|
||
<p class="text-white-70">Extensive reporting functionality gives your team critical insight into their agile process.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4">
|
||
<span class="svg-icon text-white mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M7 20.5L2 17.6V11.8L7 8.90002L12 11.8V17.6L7 20.5ZM21 20.8V18.5L19 17.3L17 18.5V20.8L19 22L21 20.8Z" fill="#035A4B"/>
|
||
<path d="M22 14.1V6L15 2L8 6V14.1L15 18.2L22 14.1Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4 class="text-white">Scalable evolution <span class="badge bg-warning text-dark rounded-pill ms-1">Coming soon</span></h4>
|
||
<p class="text-white-70">Front Software is agile project management designed for any teams.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<div class="text-center">
|
||
<div class="d-grid d-sm-flex justify-content-sm-center align-items-sm-center gap-3 mb-3">
|
||
<a class="btn btn-light btn-transition" href="#">Sign up and start building</a>
|
||
<small class="text-white-70">or</small>
|
||
<a class="btn btn-dark btn-transition" href="#">Talk to our experts</a>
|
||
</div>
|
||
|
||
<p class="text-white-70 small">Start free trial. * No credit card required.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
|
||
<!-- Pricing -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2>Choose a plan that's right for you.</h2>
|
||
<p>Everything you need. From front to back.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Table -->
|
||
<div class="table-responsive-lg w-lg-75 mx-lg-auto">
|
||
<table class="table table-lg table-striped table-borderless table-nowrap table-vertical-border-striped">
|
||
<thead class="table-text-center">
|
||
<tr>
|
||
<th scope="col" style="width: 40%;"></th>
|
||
|
||
<th scope="col" style="width: 20%;">
|
||
<span class="d-block">Professional</span>
|
||
<span class="d-block text-muted small">$0/mon</span>
|
||
</th>
|
||
|
||
<th scope="col" style="width: 20%;">
|
||
<span class="d-block">Team <span class="badge bg-warning text-dark rounded-pill ms-1">Hot</span></span>
|
||
<span class="d-block text-muted small">$60/mon</span>
|
||
</th>
|
||
|
||
<th scope="col" style="width: 20%;">
|
||
<span class="d-block">Enterprise</span>
|
||
<span class="d-block text-muted small">Custom</span>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row" class="text-dark">Cross-platform UI toolkit</th>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">14-days free trial</th>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">No user limit</th>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Long-term support</th>
|
||
<td></td>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Email support</th>
|
||
<td><span class="badge bg-soft-primary text-primary rounded-pill">Add-on available</span></td>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Developer tools</th>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Removal of Front branding</th>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Active maintenance & support</th>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Data storage for 365 days</th>
|
||
<td></td>
|
||
<td><span class="badge bg-soft-primary text-primary rounded-pill">Add-on available</span></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark"></th>
|
||
<td><button type="button" class="btn btn-soft-dark btn-sm btn-transition">Choose plan</button></td>
|
||
<td><button type="button" class="btn btn-soft-dark btn-sm btn-transition">Choose plan</button></td>
|
||
<td><button type="button" class="btn btn-primary btn-sm btn-transition">Contact us</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</main>
|
||
<!-- ========== END MAIN CONTENT ========== -->
|
||
|
||
<!-- ========== FOOTER ========== -->
|
||
<footer class="gradient-x-overlay-sm-primary overflow-hidden">
|
||
<div class="container content-space-t-2 content-space-b-1">
|
||
<!-- CTA -->
|
||
<div class="row justify-content-md-between align-items-md-center text-center text-md-start">
|
||
<div class="col-md mb-3 mb-md-0">
|
||
<h2 class="text-indigo">One tool for your entire team. Get started now!</h2>
|
||
</div>
|
||
|
||
<div class="col-md-auto">
|
||
<div class="d-grid d-sm-flex justify-content-sm-center align-items-sm-center gap-3">
|
||
<a class="btn btn-primary btn-transition" href="#">Contact sales</a>
|
||
<small>or</small>
|
||
<a class="btn btn-soft-dark btn-transition" href="#">See pricing <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End CTA -->
|
||
|
||
<hr class="my-9">
|
||
|
||
<!-- Content -->
|
||
<div class="row">
|
||
<div class="col-6 col-md-3 order-md-2 mb-7 mb-md-0">
|
||
<h5>Company</h5>
|
||
|
||
<!-- List -->
|
||
<ul class="list-unstyled list-py-1 mb-0">
|
||
<li><a class="link link-sm link-secondary" href="#">About</a></li>
|
||
<li><a class="link link-sm link-secondary" href="#">Services</a></li>
|
||
<li><a class="link link-sm link-secondary" href="#">Careers</a></li>
|
||
<li><a class="link link-sm link-secondary" href="#">Blog</a></li>
|
||
</ul>
|
||
<!-- End List -->
|
||
</div>
|
||
|
||
<div class="col-6 col-md-3 order-md-3 mb-7 mb-md-0">
|
||
<h5>Legal</h5>
|
||
|
||
<!-- List -->
|
||
<ul class="list-unstyled list-py-1 mb-0">
|
||
<li><a class="link link-sm link-secondary" href="#">Help</a></li>
|
||
<li><a class="link link-sm link-secondary" href="#">Terms & Conditions</a></li>
|
||
<li><a class="link link-sm link-secondary" href="#">Privacy & Policy</a></li>
|
||
</ul>
|
||
<!-- End List -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-3 order-md-1 mb-3 mb-md-0">
|
||
<!-- Logo -->
|
||
<a class="d-inline-flex align-items-center" href="index.html" aria-label="Front">
|
||
<img class="brand" src="./assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Logo -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-3 order-md-4 align-self-center align-self-md-start">
|
||
<p class="small">© Front. 2021 Htmlstream</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Content -->
|
||
|
||
<!-- SVG Background Shape -->
|
||
<figure class="position-absolute top-0 end-0 zi-n1 mt-n10 me-n10" style="width: 32rem;">
|
||
<svg viewBox="0 0 451 902" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M451 820C247.2 820 82 654.8 82 451C82 247.2 247.2 82 451 82" stroke="white" stroke-width="164" stroke-miterlimit="10"/>
|
||
</svg>
|
||
</figure>
|
||
<!-- End SVG Background Shape -->
|
||
|
||
<!-- SVG Background Shape -->
|
||
<figure class="position-absolute bottom-0 start-0 zi-n1 mb-n10 me-n10" style="width: 21rem;">
|
||
<svg viewBox="0 0 451 902" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.125" d="M0 82C203.8 82 369 247.2 369 451C369 654.8 203.8 820 0 820" stroke="url(#paint0_linear)" stroke-width="164" stroke-miterlimit="10"/>
|
||
<defs>
|
||
<linearGradient id="paint0_linear" x1="323.205" y1="785.242" x2="-97.6164" y2="56.3589" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0" stop-color="white" stop-opacity="0"/>
|
||
<stop offset="1" stop-color="#377dff"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</figure>
|
||
<!-- End SVG Background Shape -->
|
||
</footer>
|
||
<!-- ========== END FOOTER ========== -->
|
||
|
||
<!-- ========== SECONDARY CONTENTS ========== -->
|
||
<!-- Sign Up -->
|
||
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog 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="signupModalFormLogin" style="display: none; opacity: 0;">
|
||
<!-- Heading -->
|
||
<div class="text-center mb-7">
|
||
<h2>Log in</h2>
|
||
<p>Don't have an account yet?
|
||
<a class="js-animation-link link" href="javascript:;" role="button"
|
||
data-hs-show-animation-options='{
|
||
"targetSelector": "#signupModalFormSignup",
|
||
"groupName": "idForm"
|
||
}'>Sign up</a>
|
||
</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="d-grid gap-2">
|
||
<a class="btn btn-white btn-lg" href="#">
|
||
<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>
|
||
</a>
|
||
|
||
<a class="js-animation-link btn btn-primary btn-lg" href="#"
|
||
data-hs-show-animation-options='{
|
||
"targetSelector": "#signupModalFormLoginWithEmail",
|
||
"groupName": "idForm"
|
||
}'>Log in with Email</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Log in -->
|
||
|
||
<!-- Log in with Modal -->
|
||
<div id="signupModalFormLoginWithEmail" style="display: none; opacity: 0;">
|
||
<!-- Heading -->
|
||
<div class="text-center mb-7">
|
||
<h2>Log in</h2>
|
||
<p>Don't have an account yet?
|
||
<a class="js-animation-link link" href="javascript:;" role="button"
|
||
data-hs-show-animation-options='{
|
||
"targetSelector": "#signupModalFormSignup",
|
||
"groupName": "idForm"
|
||
}'>Sign up</a>
|
||
</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<form class="js-validate needs-validation" novalidate>
|
||
<!-- Form -->
|
||
<div class="mb-3">
|
||
<label class="form-label" for="signupModalFormLoginEmail">Your email</label>
|
||
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormLoginEmail" 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="signupModalFormLoginPassword">Password</label>
|
||
|
||
<a class="js-animation-link form-label-link" href="javascript:;"
|
||
data-hs-show-animation-options='{
|
||
"targetSelector": "#signupModalFormResetPassword",
|
||
"groupName": "idForm"
|
||
}'>Forgot Password?</a>
|
||
</div>
|
||
|
||
<input type="password" class="form-control form-control-lg" name="password" id="signupModalFormLoginPassword" 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 mb-3">
|
||
<button type="submit" class="btn btn-primary form-control-lg">Log in</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!-- End Log in with Modal -->
|
||
|
||
<!-- Sign up -->
|
||
<div id="signupModalFormSignup">
|
||
<!-- Heading -->
|
||
<div class="text-center mb-7">
|
||
<h2>Sign up</h2>
|
||
<p>Already have an account?
|
||
<a class="js-animation-link link" href="javascript:;" role="button"
|
||
data-hs-show-animation-options='{
|
||
"targetSelector": "#signupModalFormLogin",
|
||
"groupName": "idForm"
|
||
}'>Log in</a>
|
||
</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="d-grid gap-3">
|
||
<a class="btn btn-white btn-lg" href="#">
|
||
<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>
|
||
</a>
|
||
|
||
<a class="js-animation-link btn btn-primary btn-lg" href="#"
|
||
data-hs-show-animation-options='{
|
||
"targetSelector": "#signupModalFormSignupWithEmail",
|
||
"groupName": "idForm"
|
||
}'>Sign up with Email</a>
|
||
|
||
<div class="text-center">
|
||
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Sign up -->
|
||
|
||
<!-- Sign up with Modal -->
|
||
<div id="signupModalFormSignupWithEmail" style="display: none; opacity: 0;">
|
||
<!-- Heading -->
|
||
<div class="text-center mb-7">
|
||
<h2>Sign up</h2>
|
||
<p>Already have an account?
|
||
<a class="js-animation-link link" href="javascript:;" role="button"
|
||
data-hs-show-animation-options='{
|
||
"targetSelector": "#signupModalFormLogin",
|
||
"groupName": "idForm"
|
||
}'>Log in</a>
|
||
</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<form class="js-validate need-validate" novalidate>
|
||
<!-- Form -->
|
||
<div class="mb-3">
|
||
<label class="form-label" for="signupModalFormSignupEmail">Your email</label>
|
||
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormSignupEmail" 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="signupModalFormSignupPassword">Password</label>
|
||
<input type="password" class="form-control form-control-lg" name="password" id="signupModalFormSignupPassword" 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="signupModalFormSignupConfirmPassword">Confirm password</label>
|
||
<input type="password" class="form-control form-control-lg" name="confirmPassword" id="signupModalFormSignupConfirmPassword" placeholder="8+ characters required" aria-label="8+ characters required" required
|
||
data-hs-validation-equal-field="#signupModalFormSignupPassword">
|
||
<span class="invalid-feedback">Password does not match the confirm password.</span>
|
||
</div>
|
||
<!-- End Form -->
|
||
|
||
<div class="d-grid mb-3">
|
||
<button type="submit" class="btn btn-primary form-control-lg">Sign up</button>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!-- End Sign up with Modal -->
|
||
|
||
<!-- Reset Password -->
|
||
<div id="signupModalFormResetPassword" style="display: none; opacity: 0;">
|
||
<!-- Heading -->
|
||
<div class="text-center mb-7">
|
||
<h2>Forgot password?</h2>
|
||
<p>Enter the email address you used when you joined and we'll send you instructions to reset your password.</p>
|
||
</div>
|
||
<!-- En dHeading -->
|
||
|
||
<form class="js-validate need-validate" novalidate>
|
||
<div class="mb-3">
|
||
<!-- Form -->
|
||
<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": "#signupModalFormLogin",
|
||
"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>
|
||
<!-- End Form -->
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
<button type="submit" class="btn btn-primary form-control-lg">Submit</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!-- End Reset Password -->
|
||
</div>
|
||
<!-- End Body -->
|
||
|
||
<!-- Footer -->
|
||
<div class="modal-footer d-block text-center py-sm-5">
|
||
<small class="text-cap mb-4">Trusted by the world's best teams</small>
|
||
|
||
<div class="w-85 mx-auto">
|
||
<div class="row justify-content-between">
|
||
<div class="col">
|
||
<img class="img-fluid" src="./assets/svg/brands/gitlab-gray.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<img class="img-fluid" src="./assets/svg/brands/fitbit-gray.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<img class="img-fluid" src="./assets/svg/brands/flow-xo-gray.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<img class="img-fluid" src="./assets/svg/brands/layar-gray.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Footer -->
|
||
</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>
|
||
<script src="./assets/vendor/aos/dist/aos.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<script src="./assets/js/theme.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF HEADER
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
|
||
|
||
// 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 GO TO
|
||
// =======================================================
|
||
new HSGoTo('.js-go-to')
|
||
|
||
|
||
// INITIALIZATION OF AOS
|
||
// =======================================================
|
||
AOS.init({
|
||
duration: 650,
|
||
once: true
|
||
});
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|