1417 lines
76 KiB
HTML
1417 lines
76 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>Services | 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-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 " 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 " 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 active" 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 active" 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">
|
|
<!-- Gallery -->
|
|
<div class="container content-space-t-3 content-space-t-lg-5">
|
|
<!-- Heading -->
|
|
<div class="w-lg-65 text-center mx-lg-auto mb-5 mb-md-9">
|
|
<h1>Design-led and user-centric strategies can impact people's life.</h1>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row gx-3 gx-lg-4">
|
|
<div class="col-5 align-self-end">
|
|
<img class="img-fluid rounded-2" src="./assets/img/750x750/img6.jpg" alt="Image Description">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-7">
|
|
<div class="ms-lg-4">
|
|
<img class="img-fluid rounded-2" src="./assets/img/750x750/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Gallery -->
|
|
|
|
<!-- Icon Blocks -->
|
|
<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">
|
|
<span class="text-cap">What we do</span>
|
|
<h2>Since 2007, we have helped 25 companies launch over 1k incredible products</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row justify-content-lg-center">
|
|
<div class="col-md-6 col-lg-5 mb-3 mb-md-5 mb-lg-7">
|
|
<!-- Icon Blocks -->
|
|
<div class="d-flex pe-md-5">
|
|
<div class="flex-shrink-0">
|
|
<div class="svg-icon 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.335 15.537C21.725 14.425 21.57 12.812 21.553 11.224C21.4407 9.50899 20.742 7.88483 19.574 6.624C18.5503 5.40102 17.2668 4.4216 15.817 3.757C14.4297 3.26981 12.9703 3.01966 11.5 3.01701C8.79576 2.83108 6.11997 3.66483 4 5.35398C2.289 6.72498 1.23101 9.12497 2.68601 11.089C3.22897 11.6881 3.93029 12.1214 4.709 12.339C5.44803 12.6142 6.24681 12.6888 7.024 12.555C6.88513 12.9965 6.85078 13.4644 6.92367 13.9215C6.99656 14.3786 7.17469 14.8125 7.444 15.189C7.73891 15.5299 8.10631 15.8006 8.51931 15.9812C8.93232 16.1619 9.38047 16.2478 9.831 16.233C10.0739 16.2296 10.3141 16.1807 10.539 16.089C10.7371 15.9871 10.9288 15.8732 11.113 15.748C12.1594 15.2831 13.3275 15.1668 14.445 15.416C15.7795 15.7213 17.1299 15.952 18.49 16.107C18.7927 16.1438 19.0993 16.1313 19.398 16.07C19.7445 15.9606 20.0639 15.7789 20.335 15.537V15.537Z" fill="#035A4B"/>
|
|
<path d="M19.008 16.114C18.9486 16.6061 18.7934 17.0817 18.551 17.514C18.229 18.114 17.581 18.314 17.103 18.752C16.457 19.343 16.595 20.38 16.632 21.164C16.6522 21.3437 16.621 21.5254 16.542 21.688C16.4335 21.835 16.2751 21.9373 16.0965 21.9758C15.9179 22.0143 15.7314 21.9863 15.572 21.897C15.2577 21.7083 15.0072 21.4296 14.853 21.097C14.581 20.607 14.362 20.085 14.053 19.612C13.3182 18.7548 12.4201 18.0525 11.411 17.546C10.9334 17.1942 10.5857 16.6942 10.422 16.124C10.459 16.111 10.499 16.106 10.536 16.09C10.7336 15.9879 10.925 15.8741 11.109 15.749C12.1554 15.2842 13.3234 15.1678 14.441 15.417C15.7754 15.7223 17.1259 15.953 18.486 16.108C18.6598 16.1191 18.834 16.1211 19.008 16.114V16.114ZM18.8 10.278V3C18.8 2.73478 18.6946 2.48044 18.5071 2.29291C18.3196 2.10537 18.0652 2 17.8 2C17.5348 2 17.2804 2.10537 17.0929 2.29291C16.9053 2.48044 16.8 2.73478 16.8 3V10.278C16.4187 10.4981 16.1207 10.8379 15.9522 11.2447C15.7838 11.6514 15.7542 12.1024 15.8681 12.5277C15.9821 12.953 16.2332 13.3287 16.5825 13.5967C16.9318 13.8648 17.3597 14.0101 17.8 14.0101C18.2403 14.0101 18.6682 13.8648 19.0175 13.5967C19.3668 13.3287 19.6179 12.953 19.7318 12.5277C19.8458 12.1024 19.8162 11.6514 19.6477 11.2447C19.4793 10.8379 19.1813 10.4981 18.8 10.278V10.278ZM13.8 2C13.5348 2 13.2804 2.10537 13.0929 2.29291C12.9053 2.48044 12.8 2.73478 12.8 3V8.586L12.312 9.07397C11.8792 8.95363 11.4188 8.98004 11.0026 9.14899C10.5864 9.31794 10.2379 9.61994 10.0115 10.0079C9.78508 10.3958 9.69351 10.8478 9.75109 11.2933C9.80867 11.7387 10.0122 12.1526 10.3298 12.4702C10.6474 12.7878 11.0612 12.9913 11.5067 13.0489C11.9522 13.1065 12.4042 13.0149 12.7921 12.7885C13.18 12.5621 13.4821 12.2136 13.651 11.7974C13.82 11.3812 13.8463 10.9207 13.726 10.488L14.507 9.70697C14.6945 9.51948 14.7999 9.26519 14.8 9V3C14.8 2.73478 14.6946 2.48044 14.5071 2.29291C14.3196 2.10537 14.0652 2 13.8 2ZM9.79999 2C9.53478 2 9.28042 2.10537 9.09289 2.29291C8.90535 2.48044 8.79999 2.73478 8.79999 3V4.586L7.31199 6.07397C6.87924 5.95363 6.41882 5.98004 6.00263 6.14899C5.58644 6.31794 5.23792 6.61994 5.0115 7.00787C4.78508 7.39581 4.69351 7.84781 4.75109 8.29327C4.80867 8.73874 5.01216 9.1526 5.32977 9.47021C5.64739 9.78783 6.06124 9.99131 6.50671 10.0489C6.95218 10.1065 7.40417 10.0149 7.7921 9.78851C8.18004 9.56209 8.48207 9.21355 8.65102 8.79736C8.81997 8.38117 8.84634 7.92073 8.726 7.48798L10.507 5.70697C10.6945 5.51948 10.7999 5.26519 10.8 5V3C10.8 2.73478 10.6946 2.48044 10.5071 2.29291C10.3196 2.10537 10.0652 2 9.79999 2Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4>Creative minds</h4>
|
|
<p>We choose our teams carefully. Our people are the secret to great work.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Blocks -->
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-5 mb-3 mb-md-5 mb-lg-7">
|
|
<!-- Icon Blocks -->
|
|
<div class="d-flex ps-md-5">
|
|
<div class="flex-shrink-0">
|
|
<div class="svg-icon text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M14 18V16H10V18L9 20H15L14 18Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M20 4H17V3C17 2.4 16.6 2 16 2H8C7.4 2 7 2.4 7 3V4H4C3.4 4 3 4.4 3 5V9C3 11.2 4.8 13 7 13C8.2 14.2 8.8 14.8 10 16H14C15.2 14.8 15.8 14.2 17 13C19.2 13 21 11.2 21 9V5C21 4.4 20.6 4 20 4ZM5 9V6H7V11C5.9 11 5 10.1 5 9ZM19 9C19 10.1 18.1 11 17 11V6H19V9ZM17 21V22H7V21C7 20.4 7.4 20 8 20H16C16.6 20 17 20.4 17 21ZM10 9C9.4 9 9 8.6 9 8V5C9 4.4 9.4 4 10 4C10.6 4 11 4.4 11 5V8C11 8.6 10.6 9 10 9ZM10 13C9.4 13 9 12.6 9 12V11C9 10.4 9.4 10 10 10C10.6 10 11 10.4 11 11V12C11 12.6 10.6 13 10 13Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4>Conquer the best</h4>
|
|
<p>We stay lean and help your product do one thing well.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Blocks -->
|
|
</div>
|
|
|
|
<div class="w-100"></div>
|
|
|
|
<div class="col-md-6 col-lg-5 mb-3 mb-md-5 mb-lg-7">
|
|
<!-- Icon Blocks -->
|
|
<div class="d-flex pe-md-5">
|
|
<div class="flex-shrink-0">
|
|
<div class="svg-icon 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.9 12.9C20.3 12.9 19.9 12.5 19.9 11.9C19.9 11.3 20.3 10.9 20.9 10.9H21.8C21.3 6.2 17.6 2.4 12.9 2V2.9C12.9 3.5 12.5 3.9 11.9 3.9C11.3 3.9 10.9 3.5 10.9 2.9V2C6.19999 2.5 2.4 6.2 2 10.9H2.89999C3.49999 10.9 3.89999 11.3 3.89999 11.9C3.89999 12.5 3.49999 12.9 2.89999 12.9H2C2.5 17.6 6.19999 21.4 10.9 21.8V20.9C10.9 20.3 11.3 19.9 11.9 19.9C12.5 19.9 12.9 20.3 12.9 20.9V21.8C17.6 21.3 21.4 17.6 21.8 12.9H20.9Z" fill="#035A4B"/>
|
|
<path d="M16.9 10.9H13.6C13.4 10.6 13.2 10.4 12.9 10.2V5.90002C12.9 5.30002 12.5 4.90002 11.9 4.90002C11.3 4.90002 10.9 5.30002 10.9 5.90002V10.2C10.6 10.4 10.4 10.6 10.2 10.9H9.89999C9.29999 10.9 8.89999 11.3 8.89999 11.9C8.89999 12.5 9.29999 12.9 9.89999 12.9H10.2C10.4 13.2 10.6 13.4 10.9 13.6V13.9C10.9 14.5 11.3 14.9 11.9 14.9C12.5 14.9 12.9 14.5 12.9 13.9V13.6C13.2 13.4 13.4 13.2 13.6 12.9H16.9C17.5 12.9 17.9 12.5 17.9 11.9C17.9 11.3 17.5 10.9 16.9 10.9Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4>Effortless updates</h4>
|
|
<p>Benefit from automatic updates to all boards any time you need to make a change to your website.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Blocks -->
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-5 mb-3 mb-md-5 mb-lg-7">
|
|
<!-- Icon Blocks -->
|
|
<div class="d-flex ps-md-5">
|
|
<div class="flex-shrink-0">
|
|
<div class="svg-icon 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="M5 8.04999L11.8 11.95V19.85L5 15.85V8.04999Z" fill="#035A4B"/>
|
|
<path d="M20.1 6.65L12.3 2.15C12 1.95 11.6 1.95 11.3 2.15L3.5 6.65C3.2 6.85 3 7.15 3 7.45V16.45C3 16.75 3.2 17.15 3.5 17.25L11.3 21.75C11.5 21.85 11.6 21.85 11.8 21.85C12 21.85 12.1 21.85 12.3 21.75L20.1 17.25C20.4 17.05 20.6 16.75 20.6 16.45V7.45C20.6 7.15 20.4 6.75 20.1 6.65ZM5 15.85V7.95L11.8 4.05L18.6 7.95L11.8 11.95V19.85L5 15.85Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4>Designing for people</h4>
|
|
<p>We actively pursue the right balance between functionality and aesthetics, creating delightful experiences.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Blocks -->
|
|
</div>
|
|
|
|
<div class="w-100"></div>
|
|
|
|
<div class="col-md-6 col-lg-5 mb-3 mb-md-5 mb-lg-0">
|
|
<!-- Icon Blocks -->
|
|
<div class="d-flex pe-md-5">
|
|
<div class="flex-shrink-0">
|
|
<div class="svg-icon 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="M15 19.5229C15 20.265 15.9624 20.5564 16.374 19.9389L22.2227 11.166C22.5549 10.6676 22.1976 10 21.5986 10H17V4.47708C17 3.73503 16.0376 3.44363 15.626 4.06106L9.77735 12.834C9.44507 13.3324 9.80237 14 10.4014 14H15V19.5229Z" fill="#035A4B"/>
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M3 6.5C3 5.67157 3.67157 5 4.5 5H9.5C10.3284 5 11 5.67157 11 6.5C11 7.32843 10.3284 8 9.5 8H4.5C3.67157 8 3 7.32843 3 6.5ZM3 18.5C3 17.6716 3.67157 17 4.5 17H9.5C10.3284 17 11 17.6716 11 18.5C11 19.3284 10.3284 20 9.5 20H4.5C3.67157 20 3 19.3284 3 18.5ZM2.5 11C1.67157 11 1 11.6716 1 12.5C1 13.3284 1.67157 14 2.5 14H6.5C7.32843 14 8 13.3284 8 12.5C8 11.6716 7.32843 11 6.5 11H2.5Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4>Strong empathy</h4>
|
|
<p>We've user tested our own process by shipping over 1k products for clients.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Blocks -->
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-5">
|
|
<!-- Icon Blocks -->
|
|
<div class="d-flex ps-md-5">
|
|
<div class="flex-shrink-0">
|
|
<div class="svg-icon 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 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#035A4B"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.591 13.209V14.868H11.851C14.392 14.868 16.387 12.915 16.387 10.395C16.387 7.875 14.392 5.922 11.851 5.922C9.31 5.922 7.336 7.875 7.336 10.395H9.121C9.121 8.799 10.234 7.581 11.851 7.581C13.447 7.581 14.602 8.799 14.602 10.395C14.602 11.991 13.447 13.209 11.851 13.209H10.591ZM12 16C11.4477 16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4>Stay curious</h4>
|
|
<p>We dedicate time for researching and experimentation to increase creativity and imagine new challenges.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Blocks -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Blocks -->
|
|
|
|
<!-- Card Grid -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-3 mb-lg-0">
|
|
<!-- Card -->
|
|
<div class="card bg-primary h-100 overflow-hidden">
|
|
<div class="card-body">
|
|
<div class="w-65 pe-2">
|
|
<h2 class="card-title text-white">Front process</h2>
|
|
<p class="card-text text-white">Once you are invited to Front Agency, you company will be set within days.</p>
|
|
<a class="btn btn-light btn-sm btn-transition" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
|
|
<div class="position-absolute end-0 bottom-0 w-50 mb-n3 me-n7">
|
|
<img class="card-img" src="./assets/svg/illustrations/apps.svg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6">
|
|
<!-- Card -->
|
|
<div class="card bg-warning h-100 overflow-hidden">
|
|
<div class="card-body">
|
|
<div class="w-65 pe-2">
|
|
<h2 class="card-title text-white">Product design</h2>
|
|
<p class="card-text text-white">Easy and fast adjustments of elements are possible with Front template.</p>
|
|
<a class="btn btn-light btn-sm btn-transition" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
|
|
<div class="position-absolute end-0 bottom-0 w-50 mb-n3 me-n7">
|
|
<img class="card-img" src="./assets/svg/illustrations/calendar.svg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
|
|
<!-- FAQ -->
|
|
<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>Still curious?</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="w-lg-65 mx-lg-auto">
|
|
<!-- Accordion -->
|
|
<div class="accordion accordion-flush accordion-lg" id="accordionFAQ">
|
|
<!-- Accordion Item -->
|
|
<div class="accordion-item">
|
|
<div class="accordion-header" id="headingBasicsOne">
|
|
<a class="accordion-button" role="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
What methods of payments are supported?
|
|
</a>
|
|
</div>
|
|
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingBasicsOne" data-bs-parent="#accordionFAQ">
|
|
<div class="accordion-body">
|
|
You can purchase the themes on Bootstrap Themes via any major credit/debit card (via Stripe) or with your Paypal account. We don't support cryptocurrencies or invoicing at this time.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Accordion Item -->
|
|
|
|
<!-- Accordion Item -->
|
|
<div class="accordion-item">
|
|
<div class="accordion-header" id="headingBasicsTwo">
|
|
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
|
Can I cancel at anytime?
|
|
</a>
|
|
</div>
|
|
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingBasicsTwo" data-bs-parent="#accordionFAQ">
|
|
<div class="accordion-body">
|
|
If you'd like a refund please reach out to us at <a href="#">themes@getbootstrap.com</a>. If you need technical help with the theme before a refund please reach out to the seller first and they can get in touch with us if they're unable to resolve the issue.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Accordion Item -->
|
|
|
|
<!-- Accordion Item -->
|
|
<div class="accordion-item">
|
|
<div class="accordion-header" id="headingBasicsThree">
|
|
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
|
How do I get a receipt for my purchase?
|
|
</a>
|
|
</div>
|
|
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingBasicsThree" data-bs-parent="#accordionFAQ">
|
|
<div class="accordion-body">
|
|
You'll receive an email from Bootstrap themes once your purchase is complete.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Accordion Item -->
|
|
|
|
<!-- Accordion Item -->
|
|
<div class="accordion-item">
|
|
<div class="accordion-header" id="headingBasicsFour">
|
|
<a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
|
|
Which license do I need?
|
|
</a>
|
|
</div>
|
|
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingBasicsFour" data-bs-parent="#accordionFAQ">
|
|
<div class="accordion-body">
|
|
There are three license types - <a href="#">Standard</a>, <a href="#">Multisite</a>, and <a href="#">Extended</a>. We've provided the table below for a quick look at the difference between the them, as well as a few examples of ways each license could be used. If you'd like more of the nitty-gritty details you can find them below and always feel free to reach out with any questions you have at <a href="#">themes@getbootstrap.com</a>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Accordion Item -->
|
|
</div>
|
|
<!-- End Accordion -->
|
|
</div>
|
|
</div>
|
|
<!-- End FAQ -->
|
|
|
|
<!-- Clients -->
|
|
<div class="container content-space-b-2 content-space-b-lg-3">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
|
<h2>As seen on...</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="w-lg-75 mx-lg-auto">
|
|
<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 -->
|
|
</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 ========== -->
|
|
<!-- 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>
|
|
|
|
<!-- 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 BOOTSTRAP DROPDOWN
|
|
// =======================================================
|
|
HSBsDropdown.init()
|
|
|
|
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|