3313 lines
207 KiB
HTML
3313 lines
207 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<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>Icon Blocks - Snippets | 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/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<link rel="stylesheet" href="../assets/css/theme.min.css">
|
||
<link rel="stylesheet" href="../assets/css/snippets.min.css">
|
||
</head>
|
||
|
||
<body class="navbar-sidebar-aside-lg">
|
||
<!-- ========== HEADER ========== -->
|
||
<header id="header" class="navbar navbar-expand navbar-fixed navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
||
<div class="container-fluid">
|
||
<nav class="navbar-nav-wrap">
|
||
<div class="row flex-grow-1">
|
||
<!-- Default Logo -->
|
||
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
||
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<div class="col-md px-lg-0">
|
||
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
||
<div class="d-none d-md-block">
|
||
<!-- Search Form -->
|
||
<form id="snippetsSearch" class="position-relative"
|
||
data-hs-list-options='{
|
||
"searchMenu": true,
|
||
"keyboard": true,
|
||
"item": "searchTemplate",
|
||
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
||
"empty": "#searchNoResults"
|
||
}'>
|
||
<!-- Input Group -->
|
||
<div class="input-group input-group-merge navbar-input-group">
|
||
<div class="input-group-prepend input-group-text">
|
||
<i class="bi-search"></i>
|
||
</div>
|
||
|
||
<input type="search" class="search form-control form-control-sm" placeholder="Search in snippets" aria-label="Search in snippets">
|
||
|
||
<a class="input-group-append input-group-text" href="javascript:;">
|
||
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
||
</a>
|
||
</div>
|
||
<!-- End Input Group -->
|
||
|
||
<!-- List -->
|
||
<div class="list dropdown-menu w-100 overflow-auto" style="max-height: 16rem;"></div>
|
||
<!-- End List -->
|
||
|
||
<!-- Empty -->
|
||
<div id="searchNoResults" style="display: none;">
|
||
<div class="text-center p-4">
|
||
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;">
|
||
<p class="mb-0">No Results</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Empty -->
|
||
</form>
|
||
<!-- End Search Form -->
|
||
|
||
<!-- List Item Template -->
|
||
<div class="d-none">
|
||
<div id="searchTemplate" class="dropdown-item">
|
||
<a class="d-block link" href="#">
|
||
<span class="category d-block fw-normal text-muted mb-1"></span>
|
||
<span class="component text-dark"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End List Item Template -->
|
||
</div>
|
||
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav p-0">
|
||
<li class="nav-item">
|
||
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
||
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="btn btn-primary btn-sm" href="../index.html">
|
||
<i class="bi-eye me-1"></i> Preview Demo
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main">
|
||
<!-- Navbar -->
|
||
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
||
data-hs-nav-scroller-options='{
|
||
"type": "vertical",
|
||
"target": ".navbar-nav .active",
|
||
"offset": 80
|
||
}'>
|
||
<!-- Navbar Toggle -->
|
||
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
||
<span class="d-flex justify-content-between align-items-center">
|
||
<span class="h6 mb-0">Nav menu</span>
|
||
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</span>
|
||
</button>
|
||
<!-- End Navbar Toggle -->
|
||
|
||
<!-- Navbar Collapse -->
|
||
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
||
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
||
<!-- Default Logo -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment nav-fill nav-justified">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../documentation/index.html">Docs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../snippets/index.html">Snippets</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
|
||
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
||
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Snippets</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/index.html">Introduction</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Navbar / Heroes</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/navbar.html">Headers (Navbar)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/hero-sections.html">Hero Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Content</span>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavFeaturesCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavFeaturesCollapse">Features</a>
|
||
|
||
<div id="snippetsSidebarNavFeaturesCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="features-general.html">General</a>
|
||
<a class="nav-link " href="features-stats.html">Stats</a>
|
||
<a class="nav-link " href="features-step.html">Step</a>
|
||
<a class="nav-link " href="features-navs.html">Navs (Tabs)</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../snippets/icon-blocks.html">Icon Blocks</a>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavCardsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavCardsCollapse">Cards</a>
|
||
|
||
<div id="snippetsSidebarNavCardsCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="cards-grid.html">Grid</a>
|
||
<a class="nav-link " href="cards-list.html">List</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavDirectoryCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavDirectoryCollapse">Directory</a>
|
||
|
||
<div id="snippetsSidebarNavDirectoryCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="directory-grid.html">Grid</a>
|
||
<a class="nav-link " href="directory-list.html">List</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/testimonials.html">Testimonials</a>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavBlogsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavBlogsCollapse">Blogs</a>
|
||
|
||
<div id="snippetsSidebarNavBlogsCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="blogs-grid.html">Grid</a>
|
||
<a class="nav-link " href="blogs-list.html">List</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/tables.html">Tables</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/ecommerce.html">E-commerce</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/pricing.html">Pricing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/team-sections.html">Team Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/breadcrumb.html">Breadcrumb</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/cta.html">Call-to-Action (CTA)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/modals.html">Modals</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/portfolio.html">Portfolio</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/gallery.html">Gallery</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/clients.html">Clients</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/countdown.html">Countdown</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/faq.html">FAQ</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/lists.html">Lists</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/collapse-accordion.html">Collapse/Accordion</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/comments.html">Comments</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/feedback-and-reviews.html">Feedback & Reviews</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/user-profile.html">User Profile</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="sidebar-examples.html">Sidebar Examples</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="calendar-view.html">Calendar View</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="notification.html">Notification</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="content-sections.html">Content Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-authentication.html">Authentication</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-feedback.html">Feedback</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-filters.html">Filters</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-search.html">Search</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-directory.html">Directory</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-subscribe.html">Subscribe</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-account.html">Account</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-wizard-and-steps.html">Wizard & Steps</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Contact / Footer</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/contact-sections.html">Contact Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/footer.html">Footer</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- End Navbar Collapse -->
|
||
</nav>
|
||
<!-- End Navbar -->
|
||
|
||
<!-- Content -->
|
||
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
|
||
<!-- Page Header -->
|
||
<div class="docs-page-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-sm">
|
||
<h1 class="docs-page-header-title">Icon Blocks</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Page Header -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-1" class="hs-docs-heading">
|
||
Component #1 <a class="anchorjs-link" href="#component-1" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab1" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab1" href="#nav-result1" data-bs-toggle="pill" data-bs-target="#nav-result1" role="tab" aria-controls="nav-result1" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab1" href="#nav-html1" data-bs-toggle="pill" data-bs-target="#nav-html1" role="tab" aria-controls="nav-html1" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent1">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result1" role="tabpanel" aria-labelledby="nav-resultTab1">
|
||
<!-- Icon Blocks -->
|
||
<div class="container content-space-1">
|
||
<div class="row justify-content-lg-center">
|
||
<div class="col-md-6 col-lg-5 mb-3 mb-md-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex pe-lg-5" data-aos="fade-up">
|
||
<div class="flex-shrink-0">
|
||
<span 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="M6 21C6 21.6 6.4 22 7 22H17C17.6 22 18 21.6 18 21V20H6V21Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M17 2H7C6.4 2 6 2.4 6 3V20H18V3C18 2.4 17.6 2 17 2Z" fill="#035A4B"/>
|
||
<path d="M12 4C11.4 4 11 3.6 11 3V2H13V3C13 3.6 12.6 4 12 4Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4>Responsive</h4>
|
||
<p>Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-5 mb-3 mb-md-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex ps-lg-5" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="flex-shrink-0">
|
||
<span 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="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>
|
||
</div>
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4>Customizable</h4>
|
||
<p>Front template can be easily customized with its cutting-edge components and features.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="w-100"></div>
|
||
|
||
<div class="col-md-6 col-lg-5 mb-3 mb-md-7 mb-lg-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex pe-lg-5" data-aos="fade-up" data-aos-delay="200">
|
||
<div class="flex-shrink-0">
|
||
<span 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="M4 4L11.6314 2.56911C11.875 2.52343 12.125 2.52343 12.3686 2.56911L20 4V11.9033C20 15.696 18.0462 19.2211 14.83 21.2313L12.53 22.6687C12.2057 22.8714 11.7943 22.8714 11.47 22.6687L9.17001 21.2313C5.95382 19.2211 4 15.696 4 11.9033L4 4Z" fill="#035A4B"/>
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.175 14.75C10.9354 14.75 10.6958 14.6542 10.5042 14.4625L8.58749 12.5458C8.20415 12.1625 8.20415 11.5875 8.58749 11.2042C8.97082 10.8208 9.59374 10.8208 9.92915 11.2042L11.175 12.45L14.3375 9.2875C14.7208 8.90417 15.2958 8.90417 15.6792 9.2875C16.0625 9.67083 16.0625 10.2458 15.6792 10.6292L11.8458 14.4625C11.6542 14.6542 11.4146 14.75 11.175 14.75Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4>Premium</h4>
|
||
<p>Front is not only for developers but also for designers, and includes a Sketch file.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-5">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex ps-lg-5" data-aos="fade-up" data-aos-delay="300">
|
||
<div class="flex-shrink-0">
|
||
<span 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="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-4">
|
||
<h4>Documentation</h4>
|
||
<p>Every component and plugin is well documented with live examples.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Icon Blocks -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<div class="row justify-content-lg-center">
|
||
<div class="col-md-6 col-lg-5 mb-3 mb-md-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex pe-lg-5" data-aos="fade-up">
|
||
<div class="flex-shrink-0">
|
||
<span 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="M6 21C6 21.6 6.4 22 7 22H17C17.6 22 18 21.6 18 21V20H6V21Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M17 2H7C6.4 2 6 2.4 6 3V20H18V3C18 2.4 17.6 2 17 2Z" fill="#035A4B"/>
|
||
<path d="M12 4C11.4 4 11 3.6 11 3V2H13V3C13 3.6 12.6 4 12 4Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4>Responsive</h4>
|
||
<p>Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-5 mb-3 mb-md-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex ps-lg-5" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="flex-shrink-0">
|
||
<span 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="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>
|
||
</div>
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4>Customizable</h4>
|
||
<p>Front template can be easily customized with its cutting-edge components and features.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="w-100"></div>
|
||
|
||
<div class="col-md-6 col-lg-5 mb-3 mb-md-7 mb-lg-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex pe-lg-5" data-aos="fade-up" data-aos-delay="200">
|
||
<div class="flex-shrink-0">
|
||
<span 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="M4 4L11.6314 2.56911C11.875 2.52343 12.125 2.52343 12.3686 2.56911L20 4V11.9033C20 15.696 18.0462 19.2211 14.83 21.2313L12.53 22.6687C12.2057 22.8714 11.7943 22.8714 11.47 22.6687L9.17001 21.2313C5.95382 19.2211 4 15.696 4 11.9033L4 4Z" fill="#035A4B"/>
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.175 14.75C10.9354 14.75 10.6958 14.6542 10.5042 14.4625L8.58749 12.5458C8.20415 12.1625 8.20415 11.5875 8.58749 11.2042C8.97082 10.8208 9.59374 10.8208 9.92915 11.2042L11.175 12.45L14.3375 9.2875C14.7208 8.90417 15.2958 8.90417 15.6792 9.2875C16.0625 9.67083 16.0625 10.2458 15.6792 10.6292L11.8458 14.4625C11.6542 14.6542 11.4146 14.75 11.175 14.75Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4>Premium</h4>
|
||
<p>Front is not only for developers but also for designers, and includes a Sketch file.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-5">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex ps-lg-5" data-aos="fade-up" data-aos-delay="300">
|
||
<div class="flex-shrink-0">
|
||
<span 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="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-4">
|
||
<h4>Documentation</h4>
|
||
<p>Every component and plugin is well documented with live examples.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-2" class="hs-docs-heading">
|
||
Component #2 <a class="anchorjs-link" href="#component-2" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab2" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab2" href="#nav-result2" data-bs-toggle="pill" data-bs-target="#nav-result2" role="tab" aria-controls="nav-result2" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab2" href="#nav-html2" data-bs-toggle="pill" data-bs-target="#nav-html2" role="tab" aria-controls="nav-html2" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent2">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result2" role="tabpanel" aria-labelledby="nav-resultTab2">
|
||
<!-- Icon Blocks -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Benefits</span>
|
||
<h2 class="h1">What our 37,500+ clients love about Front</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-4 mb-5 mb-md-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<div class="svg-icon text-primary mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path 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>
|
||
|
||
</div>
|
||
<h3>Less routine<br>– more creativity</h3>
|
||
<p>Automate best strategies and focus more on generating hq creatives.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4 mb-5 mb-md-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<div class="svg-icon text-primary mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M12.5 22C11.9 22 11.5 21.6 11.5 21V3C11.5 2.4 11.9 2 12.5 2C13.1 2 13.5 2.4 13.5 3V21C13.5 21.6 13.1 22 12.5 22Z" fill="#035A4B"/>
|
||
<path d="M17.8 14.7C17.8 15.5 17.6 16.3 17.2 16.9C16.8 17.6 16.2 18.1 15.3 18.4C14.5 18.8 13.5 19 12.4 19C11.1 19 10 18.7 9.10001 18.2C8.50001 17.8 8.00001 17.4 7.60001 16.7C7.20001 16.1 7 15.5 7 14.9C7 14.6 7.09999 14.3 7.29999 14C7.49999 13.8 7.80001 13.6 8.20001 13.6C8.50001 13.6 8.69999 13.7 8.89999 13.9C9.09999 14.1 9.29999 14.4 9.39999 14.7C9.59999 15.1 9.8 15.5 10 15.8C10.2 16.1 10.5 16.3 10.8 16.5C11.2 16.7 11.6 16.8 12.2 16.8C13 16.8 13.7 16.6 14.2 16.2C14.7 15.8 15 15.3 15 14.8C15 14.4 14.9 14 14.6 13.7C14.3 13.4 14 13.2 13.5 13.1C13.1 13 12.5 12.8 11.8 12.6C10.8 12.4 9.99999 12.1 9.39999 11.8C8.69999 11.5 8.19999 11.1 7.79999 10.6C7.39999 10.1 7.20001 9.39998 7.20001 8.59998C7.20001 7.89998 7.39999 7.19998 7.79999 6.59998C8.19999 5.99998 8.80001 5.60005 9.60001 5.30005C10.4 5.00005 11.3 4.80005 12.3 4.80005C13.1 4.80005 13.8 4.89998 14.5 5.09998C15.1 5.29998 15.6 5.60002 16 5.90002C16.4 6.20002 16.7 6.6 16.9 7C17.1 7.4 17.2 7.69998 17.2 8.09998C17.2 8.39998 17.1 8.7 16.9 9C16.7 9.3 16.4 9.40002 16 9.40002C15.7 9.40002 15.4 9.29995 15.3 9.19995C15.2 9.09995 15 8.80002 14.8 8.40002C14.6 7.90002 14.3 7.49995 13.9 7.19995C13.5 6.89995 13 6.80005 12.2 6.80005C11.5 6.80005 10.9 7.00005 10.5 7.30005C10.1 7.60005 9.79999 8.00002 9.79999 8.40002C9.79999 8.70002 9.9 8.89998 10 9.09998C10.1 9.29998 10.4 9.49998 10.6 9.59998C10.8 9.69998 11.1 9.90002 11.4 9.90002C11.7 10 12.1 10.1 12.7 10.3C13.5 10.5 14.2 10.7 14.8 10.9C15.4 11.1 15.9 11.4 16.4 11.7C16.8 12 17.2 12.4 17.4 12.9C17.6 13.4 17.8 14 17.8 14.7Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</div>
|
||
<h3>Hundreds<br>of thousands saved</h3>
|
||
<p>Stop inefficient budget spend or pour more into a winning ad when needed.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<div class="svg-icon text-primary mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M14 3V21H10V3C10 2.4 10.4 2 11 2H13C13.6 2 14 2.4 14 3ZM7 14H5C4.4 14 4 14.4 4 15V21H8V15C8 14.4 7.6 14 7 14Z" fill="#035A4B"/>
|
||
<path d="M21 20H20V8C20 7.4 19.6 7 19 7H17C16.4 7 16 7.4 16 8V20H3C2.4 20 2 20.4 2 21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21C22 20.4 21.6 20 21 20Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</div>
|
||
<h3>Scale<br>budgets efficiently</h3>
|
||
<p>Scale your budgets fast and increase ROI at the same time.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Icon Blocks -->
|
||
<div class="container content-space-1 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">Benefits</span>
|
||
<h2 class="h1">What our 37,500+ clients love about Front</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-4 mb-5 mb-md-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<div class="svg-icon text-primary mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path 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>
|
||
|
||
</div>
|
||
<h3>Less routine<br>– more creativity</h3>
|
||
<p>Automate best strategies and focus more on generating hq creatives.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4 mb-5 mb-md-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<div class="svg-icon text-primary mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M12.5 22C11.9 22 11.5 21.6 11.5 21V3C11.5 2.4 11.9 2 12.5 2C13.1 2 13.5 2.4 13.5 3V21C13.5 21.6 13.1 22 12.5 22Z" fill="#035A4B"/>
|
||
<path d="M17.8 14.7C17.8 15.5 17.6 16.3 17.2 16.9C16.8 17.6 16.2 18.1 15.3 18.4C14.5 18.8 13.5 19 12.4 19C11.1 19 10 18.7 9.10001 18.2C8.50001 17.8 8.00001 17.4 7.60001 16.7C7.20001 16.1 7 15.5 7 14.9C7 14.6 7.09999 14.3 7.29999 14C7.49999 13.8 7.80001 13.6 8.20001 13.6C8.50001 13.6 8.69999 13.7 8.89999 13.9C9.09999 14.1 9.29999 14.4 9.39999 14.7C9.59999 15.1 9.8 15.5 10 15.8C10.2 16.1 10.5 16.3 10.8 16.5C11.2 16.7 11.6 16.8 12.2 16.8C13 16.8 13.7 16.6 14.2 16.2C14.7 15.8 15 15.3 15 14.8C15 14.4 14.9 14 14.6 13.7C14.3 13.4 14 13.2 13.5 13.1C13.1 13 12.5 12.8 11.8 12.6C10.8 12.4 9.99999 12.1 9.39999 11.8C8.69999 11.5 8.19999 11.1 7.79999 10.6C7.39999 10.1 7.20001 9.39998 7.20001 8.59998C7.20001 7.89998 7.39999 7.19998 7.79999 6.59998C8.19999 5.99998 8.80001 5.60005 9.60001 5.30005C10.4 5.00005 11.3 4.80005 12.3 4.80005C13.1 4.80005 13.8 4.89998 14.5 5.09998C15.1 5.29998 15.6 5.60002 16 5.90002C16.4 6.20002 16.7 6.6 16.9 7C17.1 7.4 17.2 7.69998 17.2 8.09998C17.2 8.39998 17.1 8.7 16.9 9C16.7 9.3 16.4 9.40002 16 9.40002C15.7 9.40002 15.4 9.29995 15.3 9.19995C15.2 9.09995 15 8.80002 14.8 8.40002C14.6 7.90002 14.3 7.49995 13.9 7.19995C13.5 6.89995 13 6.80005 12.2 6.80005C11.5 6.80005 10.9 7.00005 10.5 7.30005C10.1 7.60005 9.79999 8.00002 9.79999 8.40002C9.79999 8.70002 9.9 8.89998 10 9.09998C10.1 9.29998 10.4 9.49998 10.6 9.59998C10.8 9.69998 11.1 9.90002 11.4 9.90002C11.7 10 12.1 10.1 12.7 10.3C13.5 10.5 14.2 10.7 14.8 10.9C15.4 11.1 15.9 11.4 16.4 11.7C16.8 12 17.2 12.4 17.4 12.9C17.6 13.4 17.8 14 17.8 14.7Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</div>
|
||
<h3>Hundreds<br>of thousands saved</h3>
|
||
<p>Stop inefficient budget spend or pour more into a winning ad when needed.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<div class="svg-icon text-primary mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M14 3V21H10V3C10 2.4 10.4 2 11 2H13C13.6 2 14 2.4 14 3ZM7 14H5C4.4 14 4 14.4 4 15V21H8V15C8 14.4 7.6 14 7 14Z" fill="#035A4B"/>
|
||
<path d="M21 20H20V8C20 7.4 19.6 7 19 7H17C16.4 7 16 7.4 16 8V20H3C2.4 20 2 20.4 2 21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21C22 20.4 21.6 20 21 20Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</div>
|
||
<h3>Scale<br>budgets efficiently</h3>
|
||
<p>Scale your budgets fast and increase ROI at the same time.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-3" class="hs-docs-heading">
|
||
Component #3 <a class="anchorjs-link" href="#component-3" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab3" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab3" href="#nav-result3" data-bs-toggle="pill" data-bs-target="#nav-result3" role="tab" aria-controls="nav-result3" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab3" href="#nav-html3" data-bs-toggle="pill" data-bs-target="#nav-html3" role="tab" aria-controls="nav-html3" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent3">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result3" role="tabpanel" aria-labelledby="nav-resultTab3">
|
||
<!-- Icon Blocks -->
|
||
<div class="overflow-hidden">
|
||
<div class="container position-relative content-space-1">
|
||
<!-- 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>Front makes designing easy and performance fast</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-md-5">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<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>
|
||
|
||
<h4>More creativity</h4>
|
||
<p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-md-5">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary 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="M12.5 22C11.9 22 11.5 21.6 11.5 21V3C11.5 2.4 11.9 2 12.5 2C13.1 2 13.5 2.4 13.5 3V21C13.5 21.6 13.1 22 12.5 22Z" fill="#035A4B"/>
|
||
<path d="M17.8 14.7C17.8 15.5 17.6 16.3 17.2 16.9C16.8 17.6 16.2 18.1 15.3 18.4C14.5 18.8 13.5 19 12.4 19C11.1 19 10 18.7 9.10001 18.2C8.50001 17.8 8.00001 17.4 7.60001 16.7C7.20001 16.1 7 15.5 7 14.9C7 14.6 7.09999 14.3 7.29999 14C7.49999 13.8 7.80001 13.6 8.20001 13.6C8.50001 13.6 8.69999 13.7 8.89999 13.9C9.09999 14.1 9.29999 14.4 9.39999 14.7C9.59999 15.1 9.8 15.5 10 15.8C10.2 16.1 10.5 16.3 10.8 16.5C11.2 16.7 11.6 16.8 12.2 16.8C13 16.8 13.7 16.6 14.2 16.2C14.7 15.8 15 15.3 15 14.8C15 14.4 14.9 14 14.6 13.7C14.3 13.4 14 13.2 13.5 13.1C13.1 13 12.5 12.8 11.8 12.6C10.8 12.4 9.99999 12.1 9.39999 11.8C8.69999 11.5 8.19999 11.1 7.79999 10.6C7.39999 10.1 7.20001 9.39998 7.20001 8.59998C7.20001 7.89998 7.39999 7.19998 7.79999 6.59998C8.19999 5.99998 8.80001 5.60005 9.60001 5.30005C10.4 5.00005 11.3 4.80005 12.3 4.80005C13.1 4.80005 13.8 4.89998 14.5 5.09998C15.1 5.29998 15.6 5.60002 16 5.90002C16.4 6.20002 16.7 6.6 16.9 7C17.1 7.4 17.2 7.69998 17.2 8.09998C17.2 8.39998 17.1 8.7 16.9 9C16.7 9.3 16.4 9.40002 16 9.40002C15.7 9.40002 15.4 9.29995 15.3 9.19995C15.2 9.09995 15 8.80002 14.8 8.40002C14.6 7.90002 14.3 7.49995 13.9 7.19995C13.5 6.89995 13 6.80005 12.2 6.80005C11.5 6.80005 10.9 7.00005 10.5 7.30005C10.1 7.60005 9.79999 8.00002 9.79999 8.40002C9.79999 8.70002 9.9 8.89998 10 9.09998C10.1 9.29998 10.4 9.49998 10.6 9.59998C10.8 9.69998 11.1 9.90002 11.4 9.90002C11.7 10 12.1 10.1 12.7 10.3C13.5 10.5 14.2 10.7 14.8 10.9C15.4 11.1 15.9 11.4 16.4 11.7C16.8 12 17.2 12.4 17.4 12.9C17.6 13.4 17.8 14 17.8 14.7Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Scale budgets efficiently</h4>
|
||
<p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-md-5">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary 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="M10.9607 12.9128H18.8607C19.4607 12.9128 19.9607 13.4128 19.8607 14.0128C19.2607 19.0128 14.4607 22.7128 9.26068 21.7128C5.66068 21.0128 2.86071 18.2128 2.16071 14.6128C1.16071 9.31284 4.96069 4.61281 9.86069 4.01281C10.4607 3.91281 10.9607 4.41281 10.9607 5.01281V12.9128V12.9128Z" fill="#035A4B"/>
|
||
<path d="M12.9607 10.9128V3.01281C12.9607 2.41281 13.4607 1.91281 14.0607 2.01281C16.0607 2.21281 17.8607 3.11284 19.2607 4.61284C20.6607 6.01284 21.5607 7.91285 21.8607 9.81285C21.9607 10.4129 21.4607 10.9128 20.8607 10.9128H12.9607V10.9128Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Smart Dashboards</h4>
|
||
<p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-md-5">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M16 0.200012H4C1.8 0.200012 0 2.00001 0 4.20001V16.2C0 18.4 1.8 20.2 4 20.2H16C18.2 20.2 20 18.4 20 16.2V4.20001C20 2.00001 18.2 0.200012 16 0.200012ZM15 10.2C15 10.9 14.8 11.6 14.6 12.2H18V16.2C18 17.3 17.1 18.2 16 18.2H12V14.8C11.4 15.1 10.7 15.2 10 15.2C9.3 15.2 8.6 15 8 14.8V18.2H4C2.9 18.2 2 17.3 2 16.2V12.2H5.4C5.1 11.6 5 10.9 5 10.2C5 9.50001 5.2 8.80001 5.4 8.20001H2V4.20001C2 3.10001 2.9 2.20001 4 2.20001H8V5.60001C8.6 5.30001 9.3 5.20001 10 5.20001C10.7 5.20001 11.4 5.40001 12 5.60001V2.20001H16C17.1 2.20001 18 3.10001 18 4.20001V8.20001H14.6C14.8 8.80001 15 9.50001 15 10.2Z" fill="#035A4B"/>
|
||
<path d="M12 1.40002C15.4 2.20002 18 4.80003 18.8 8.20003H14.6C14.1 7.00003 13.2 6.10003 12 5.60003V1.40002V1.40002ZM5.40001 8.20003C5.90001 7.00003 6.80001 6.10003 8.00001 5.60003V1.40002C4.60001 2.20002 2.00001 4.80003 1.20001 8.20003H5.40001ZM14.6 12.2C14.1 13.4 13.2 14.3 12 14.8V19C15.4 18.2 18 15.6 18.8 12.2H14.6V12.2ZM8.00001 14.8C6.80001 14.3 5.90001 13.4 5.40001 12.2H1.20001C2.00001 15.6 4.60001 18.2 8.00001 19V14.8V14.8Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Control Center</h4>
|
||
<p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 8.725C6 8.125 6.4 7.725 7 7.725H14L18 11.725V12.925L22 9.725L12.6 2.225C12.2 1.925 11.7 1.925 11.4 2.225L2 9.725L6 12.925V8.725V8.725Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M22 9.72498V20.725C22 21.325 21.6 21.725 21 21.725H3C2.4 21.725 2 21.325 2 20.725V9.72498L11.4 17.225C11.8 17.525 12.3 17.525 12.6 17.225L22 9.72498ZM15 11.725H18L14 7.72498V10.725C14 11.325 14.4 11.725 15 11.725Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Email Reports</h4>
|
||
<p>We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary 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>Forecasting</h4>
|
||
<p>Staying focused allows us to turn every project we complete into something we love.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute zi-n1" style="top: -35rem; left: 50rem; width: 62rem; height: 62rem;">
|
||
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 260 260">
|
||
<circle fill="#e7eaf3" opacity=".7" cx="130" cy="130" r="130"/>
|
||
</svg>
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Icon Blocks -->
|
||
<div class="overflow-hidden">
|
||
<div class="container position-relative content-space-2 content-space-t-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>Front makes designing easy and performance fast</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-md-5">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<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>
|
||
|
||
<h4>More creativity</h4>
|
||
<p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-md-5">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary 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="M12.5 22C11.9 22 11.5 21.6 11.5 21V3C11.5 2.4 11.9 2 12.5 2C13.1 2 13.5 2.4 13.5 3V21C13.5 21.6 13.1 22 12.5 22Z" fill="#035A4B"/>
|
||
<path d="M17.8 14.7C17.8 15.5 17.6 16.3 17.2 16.9C16.8 17.6 16.2 18.1 15.3 18.4C14.5 18.8 13.5 19 12.4 19C11.1 19 10 18.7 9.10001 18.2C8.50001 17.8 8.00001 17.4 7.60001 16.7C7.20001 16.1 7 15.5 7 14.9C7 14.6 7.09999 14.3 7.29999 14C7.49999 13.8 7.80001 13.6 8.20001 13.6C8.50001 13.6 8.69999 13.7 8.89999 13.9C9.09999 14.1 9.29999 14.4 9.39999 14.7C9.59999 15.1 9.8 15.5 10 15.8C10.2 16.1 10.5 16.3 10.8 16.5C11.2 16.7 11.6 16.8 12.2 16.8C13 16.8 13.7 16.6 14.2 16.2C14.7 15.8 15 15.3 15 14.8C15 14.4 14.9 14 14.6 13.7C14.3 13.4 14 13.2 13.5 13.1C13.1 13 12.5 12.8 11.8 12.6C10.8 12.4 9.99999 12.1 9.39999 11.8C8.69999 11.5 8.19999 11.1 7.79999 10.6C7.39999 10.1 7.20001 9.39998 7.20001 8.59998C7.20001 7.89998 7.39999 7.19998 7.79999 6.59998C8.19999 5.99998 8.80001 5.60005 9.60001 5.30005C10.4 5.00005 11.3 4.80005 12.3 4.80005C13.1 4.80005 13.8 4.89998 14.5 5.09998C15.1 5.29998 15.6 5.60002 16 5.90002C16.4 6.20002 16.7 6.6 16.9 7C17.1 7.4 17.2 7.69998 17.2 8.09998C17.2 8.39998 17.1 8.7 16.9 9C16.7 9.3 16.4 9.40002 16 9.40002C15.7 9.40002 15.4 9.29995 15.3 9.19995C15.2 9.09995 15 8.80002 14.8 8.40002C14.6 7.90002 14.3 7.49995 13.9 7.19995C13.5 6.89995 13 6.80005 12.2 6.80005C11.5 6.80005 10.9 7.00005 10.5 7.30005C10.1 7.60005 9.79999 8.00002 9.79999 8.40002C9.79999 8.70002 9.9 8.89998 10 9.09998C10.1 9.29998 10.4 9.49998 10.6 9.59998C10.8 9.69998 11.1 9.90002 11.4 9.90002C11.7 10 12.1 10.1 12.7 10.3C13.5 10.5 14.2 10.7 14.8 10.9C15.4 11.1 15.9 11.4 16.4 11.7C16.8 12 17.2 12.4 17.4 12.9C17.6 13.4 17.8 14 17.8 14.7Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Scale budgets efficiently</h4>
|
||
<p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-md-5">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary 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="M10.9607 12.9128H18.8607C19.4607 12.9128 19.9607 13.4128 19.8607 14.0128C19.2607 19.0128 14.4607 22.7128 9.26068 21.7128C5.66068 21.0128 2.86071 18.2128 2.16071 14.6128C1.16071 9.31284 4.96069 4.61281 9.86069 4.01281C10.4607 3.91281 10.9607 4.41281 10.9607 5.01281V12.9128V12.9128Z" fill="#035A4B"/>
|
||
<path d="M12.9607 10.9128V3.01281C12.9607 2.41281 13.4607 1.91281 14.0607 2.01281C16.0607 2.21281 17.8607 3.11284 19.2607 4.61284C20.6607 6.01284 21.5607 7.91285 21.8607 9.81285C21.9607 10.4129 21.4607 10.9128 20.8607 10.9128H12.9607V10.9128Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Smart Dashboards</h4>
|
||
<p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-md-5">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M16 0.200012H4C1.8 0.200012 0 2.00001 0 4.20001V16.2C0 18.4 1.8 20.2 4 20.2H16C18.2 20.2 20 18.4 20 16.2V4.20001C20 2.00001 18.2 0.200012 16 0.200012ZM15 10.2C15 10.9 14.8 11.6 14.6 12.2H18V16.2C18 17.3 17.1 18.2 16 18.2H12V14.8C11.4 15.1 10.7 15.2 10 15.2C9.3 15.2 8.6 15 8 14.8V18.2H4C2.9 18.2 2 17.3 2 16.2V12.2H5.4C5.1 11.6 5 10.9 5 10.2C5 9.50001 5.2 8.80001 5.4 8.20001H2V4.20001C2 3.10001 2.9 2.20001 4 2.20001H8V5.60001C8.6 5.30001 9.3 5.20001 10 5.20001C10.7 5.20001 11.4 5.40001 12 5.60001V2.20001H16C17.1 2.20001 18 3.10001 18 4.20001V8.20001H14.6C14.8 8.80001 15 9.50001 15 10.2Z" fill="#035A4B"/>
|
||
<path d="M12 1.40002C15.4 2.20002 18 4.80003 18.8 8.20003H14.6C14.1 7.00003 13.2 6.10003 12 5.60003V1.40002V1.40002ZM5.40001 8.20003C5.90001 7.00003 6.80001 6.10003 8.00001 5.60003V1.40002C4.60001 2.20002 2.00001 4.80003 1.20001 8.20003H5.40001ZM14.6 12.2C14.1 13.4 13.2 14.3 12 14.8V19C15.4 18.2 18 15.6 18.8 12.2H14.6V12.2ZM8.00001 14.8C6.80001 14.3 5.90001 13.4 5.40001 12.2H1.20001C2.00001 15.6 4.60001 18.2 8.00001 19V14.8V14.8Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Control Center</h4>
|
||
<p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 8.725C6 8.125 6.4 7.725 7 7.725H14L18 11.725V12.925L22 9.725L12.6 2.225C12.2 1.925 11.7 1.925 11.4 2.225L2 9.725L6 12.925V8.725V8.725Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M22 9.72498V20.725C22 21.325 21.6 21.725 21 21.725H3C2.4 21.725 2 21.325 2 20.725V9.72498L11.4 17.225C11.8 17.525 12.3 17.525 12.6 17.225L22 9.72498ZM15 11.725H18L14 7.72498V10.725C14 11.325 14.4 11.725 15 11.725Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Email Reports</h4>
|
||
<p>We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary 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>Forecasting</h4>
|
||
<p>Staying focused allows us to turn every project we complete into something we love.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute zi-n1" style="top: -35rem; left: 50rem; width: 62rem; height: 62rem;">
|
||
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 260 260">
|
||
<circle fill="#e7eaf3" opacity=".7" cx="130" cy="130" r="130"/>
|
||
</svg>
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-4" class="hs-docs-heading">
|
||
Component #4 <a class="anchorjs-link" href="#component-4" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab4" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab4" href="#nav-result4" data-bs-toggle="pill" data-bs-target="#nav-result4" role="tab" aria-controls="nav-result4" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab4" href="#nav-html4" data-bs-toggle="pill" data-bs-target="#nav-html4" role="tab" aria-controls="nav-html4" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent4">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result4" role="tabpanel" aria-labelledby="nav-resultTab4">
|
||
<!-- Icon Blocks -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2>Features built for scale</h2>
|
||
<p>Get insights to dig down into what's powering your growth the most.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-4 d-none d-lg-block">
|
||
<!-- Card -->
|
||
<div class="position-relative pe-lg-4">
|
||
<a class="card card-transition shadow-none bg-img-start" href="#" style="background-image: url(../assets/img/400x500/img26.jpg); min-height: 27rem;">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Adobe Ai</h4>
|
||
<p class="card-text text-body">Access to the Adobe Illustrator techniques</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Browse tools <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute bottom-0 start-0 zi-n1 mb-n7 ms-n7" style="width: 12rem;">
|
||
<img class="w-100" src="../assets/svg/components/dots-lg.svg" alt="SVG">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-8">
|
||
<div class="row">
|
||
<div class="col-sm-6 mb-3 mb-sm-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M10.9607 12.9128H18.8607C19.4607 12.9128 19.9607 13.4128 19.8607 14.0128C19.2607 19.0128 14.4607 22.7128 9.26068 21.7128C5.66068 21.0128 2.86071 18.2128 2.16071 14.6128C1.16071 9.31284 4.96069 4.61281 9.86069 4.01281C10.4607 3.91281 10.9607 4.41281 10.9607 5.01281V12.9128V12.9128Z" fill="#035A4B"/>
|
||
<path d="M12.9607 10.9128V3.01281C12.9607 2.41281 13.4607 1.91281 14.0607 2.01281C16.0607 2.21281 17.8607 3.11284 19.2607 4.61284C20.6607 6.01284 21.5607 7.91285 21.8607 9.81285C21.9607 10.4129 21.4607 10.9128 20.8607 10.9128H12.9607V10.9128Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h3 class="h4">Smart Dashboards</h3>
|
||
<p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 mb-3 mb-sm-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-4">
|
||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M16 0.200012H4C1.8 0.200012 0 2.00001 0 4.20001V16.2C0 18.4 1.8 20.2 4 20.2H16C18.2 20.2 20 18.4 20 16.2V4.20001C20 2.00001 18.2 0.200012 16 0.200012ZM15 10.2C15 10.9 14.8 11.6 14.6 12.2H18V16.2C18 17.3 17.1 18.2 16 18.2H12V14.8C11.4 15.1 10.7 15.2 10 15.2C9.3 15.2 8.6 15 8 14.8V18.2H4C2.9 18.2 2 17.3 2 16.2V12.2H5.4C5.1 11.6 5 10.9 5 10.2C5 9.50001 5.2 8.80001 5.4 8.20001H2V4.20001C2 3.10001 2.9 2.20001 4 2.20001H8V5.60001C8.6 5.30001 9.3 5.20001 10 5.20001C10.7 5.20001 11.4 5.40001 12 5.60001V2.20001H16C17.1 2.20001 18 3.10001 18 4.20001V8.20001H14.6C14.8 8.80001 15 9.50001 15 10.2Z" fill="#035A4B"/>
|
||
<path d="M12 1.40002C15.4 2.20002 18 4.80003 18.8 8.20003H14.6C14.1 7.00003 13.2 6.10003 12 5.60003V1.40002V1.40002ZM5.40001 8.20003C5.90001 7.00003 6.80001 6.10003 8.00001 5.60003V1.40002C4.60001 2.20002 2.00001 4.80003 1.20001 8.20003H5.40001ZM14.6 12.2C14.1 13.4 13.2 14.3 12 14.8V19C15.4 18.2 18 15.6 18.8 12.2H14.6V12.2ZM8.00001 14.8C6.80001 14.3 5.90001 13.4 5.40001 12.2H1.20001C2.00001 15.6 4.60001 18.2 8.00001 19V14.8V14.8Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Control Center</h4>
|
||
<p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 mb-3 mb-sm-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 8.725C6 8.125 6.4 7.725 7 7.725H14L18 11.725V12.925L22 9.725L12.6 2.225C12.2 1.925 11.7 1.925 11.4 2.225L2 9.725L6 12.925V8.725V8.725Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M22 9.72498V20.725C22 21.325 21.6 21.725 21 21.725H3C2.4 21.725 2 21.325 2 20.725V9.72498L11.4 17.225C11.8 17.525 12.3 17.525 12.6 17.225L22 9.72498ZM15 11.725H18L14 7.72498V10.725C14 11.325 14.4 11.725 15 11.725Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Email Reports</h4>
|
||
<p>We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path 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>
|
||
|
||
</span>
|
||
|
||
<h4>Forecasting</h4>
|
||
<p>Staying focused allows us to turn every project we complete into something we love.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Icon Blocks -->
|
||
<div class="overflow-hidden">
|
||
<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>Features built for scale</h2>
|
||
<p>Get insights to dig down into what's powering your growth the most.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-4 d-none d-lg-block">
|
||
<!-- Card -->
|
||
<div class="position-relative pe-lg-4">
|
||
<a class="card card-transition shadow-none bg-img-start" href="#" style="background-image: url(../assets/img/400x500/img26.jpg); min-height: 27rem;">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Adobe Ai</h4>
|
||
<p class="card-text text-body">Access to the Adobe Illustrator techniques</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Browse tools <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute bottom-0 start-0 zi-n1 mb-n7 ms-n7" style="width: 12rem;">
|
||
<img class="w-100" src="../assets/svg/components/dots-lg.svg" alt="SVG">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-8">
|
||
<div class="row">
|
||
<div class="col-sm-6 mb-3 mb-sm-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M10.9607 12.9128H18.8607C19.4607 12.9128 19.9607 13.4128 19.8607 14.0128C19.2607 19.0128 14.4607 22.7128 9.26068 21.7128C5.66068 21.0128 2.86071 18.2128 2.16071 14.6128C1.16071 9.31284 4.96069 4.61281 9.86069 4.01281C10.4607 3.91281 10.9607 4.41281 10.9607 5.01281V12.9128V12.9128Z" fill="#035A4B"/>
|
||
<path d="M12.9607 10.9128V3.01281C12.9607 2.41281 13.4607 1.91281 14.0607 2.01281C16.0607 2.21281 17.8607 3.11284 19.2607 4.61284C20.6607 6.01284 21.5607 7.91285 21.8607 9.81285C21.9607 10.4129 21.4607 10.9128 20.8607 10.9128H12.9607V10.9128Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h3 class="h4">Smart Dashboards</h3>
|
||
<p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 mb-3 mb-sm-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-4">
|
||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M16 0.200012H4C1.8 0.200012 0 2.00001 0 4.20001V16.2C0 18.4 1.8 20.2 4 20.2H16C18.2 20.2 20 18.4 20 16.2V4.20001C20 2.00001 18.2 0.200012 16 0.200012ZM15 10.2C15 10.9 14.8 11.6 14.6 12.2H18V16.2C18 17.3 17.1 18.2 16 18.2H12V14.8C11.4 15.1 10.7 15.2 10 15.2C9.3 15.2 8.6 15 8 14.8V18.2H4C2.9 18.2 2 17.3 2 16.2V12.2H5.4C5.1 11.6 5 10.9 5 10.2C5 9.50001 5.2 8.80001 5.4 8.20001H2V4.20001C2 3.10001 2.9 2.20001 4 2.20001H8V5.60001C8.6 5.30001 9.3 5.20001 10 5.20001C10.7 5.20001 11.4 5.40001 12 5.60001V2.20001H16C17.1 2.20001 18 3.10001 18 4.20001V8.20001H14.6C14.8 8.80001 15 9.50001 15 10.2Z" fill="#035A4B"/>
|
||
<path d="M12 1.40002C15.4 2.20002 18 4.80003 18.8 8.20003H14.6C14.1 7.00003 13.2 6.10003 12 5.60003V1.40002V1.40002ZM5.40001 8.20003C5.90001 7.00003 6.80001 6.10003 8.00001 5.60003V1.40002C4.60001 2.20002 2.00001 4.80003 1.20001 8.20003H5.40001ZM14.6 12.2C14.1 13.4 13.2 14.3 12 14.8V19C15.4 18.2 18 15.6 18.8 12.2H14.6V12.2ZM8.00001 14.8C6.80001 14.3 5.90001 13.4 5.40001 12.2H1.20001C2.00001 15.6 4.60001 18.2 8.00001 19V14.8V14.8Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Control Center</h4>
|
||
<p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 mb-3 mb-sm-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 8.725C6 8.125 6.4 7.725 7 7.725H14L18 11.725V12.925L22 9.725L12.6 2.225C12.2 1.925 11.7 1.925 11.4 2.225L2 9.725L6 12.925V8.725V8.725Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M22 9.72498V20.725C22 21.325 21.6 21.725 21 21.725H3C2.4 21.725 2 21.325 2 20.725V9.72498L11.4 17.225C11.8 17.525 12.3 17.525 12.6 17.225L22 9.72498ZM15 11.725H18L14 7.72498V10.725C14 11.325 14.4 11.725 15 11.725Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Email Reports</h4>
|
||
<p>We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6">
|
||
<!-- Icon Blocks -->
|
||
<div class="pe-lg-6">
|
||
<span class="svg-icon text-primary mb-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path 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>
|
||
|
||
</span>
|
||
|
||
<h4>Forecasting</h4>
|
||
<p>Staying focused allows us to turn every project we complete into something we love.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-5" class="hs-docs-heading">
|
||
Component #5 <a class="anchorjs-link" href="#component-5" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab5" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab5" href="#nav-result5" data-bs-toggle="pill" data-bs-target="#nav-result5" role="tab" aria-controls="nav-result5" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab5" href="#nav-html5" data-bs-toggle="pill" data-bs-target="#nav-html5" role="tab" aria-controls="nav-html5" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent5">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result5" role="tabpanel" aria-labelledby="nav-resultTab5">
|
||
<!-- Icon Block -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-5">
|
||
<span class="text-cap">Meet Front UI/UX kit</span>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="mx-auto mb-5" style="max-width: 40rem;">
|
||
<div class="row gx-3">
|
||
<div class="col-sm-4 mb-3 mb-sm-0">
|
||
<!-- Card -->
|
||
<div class="card card-dashed shadow-none text-center rounded-2">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M17.302 11.35L12.002 20.55H21.202C21.802 20.55 22.202 19.85 21.902 19.35L17.302 11.35Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M12.002 20.55H2.802C2.202 20.55 1.80202 19.85 2.10202 19.35L6.70203 11.45L12.002 20.55ZM11.302 3.45L6.70203 11.35H17.302L12.702 3.45C12.402 2.85 11.602 2.85 11.302 3.45Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h2 class="card-title h3 mb-0">300+</h2>
|
||
<p class="card-text">UI elements</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="col-sm-4 mb-3 mb-sm-0">
|
||
<!-- Card -->
|
||
<div class="card card-dashed shadow-none text-center rounded-2">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary 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="M21.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="#035A4B"/>
|
||
<path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h3 class="card-title mb-0">270+</h3>
|
||
<p class="card-text">in 3 categories</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="col-sm-4">
|
||
<!-- Card -->
|
||
<div class="card card-dashed shadow-none text-center rounded-2">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<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>
|
||
|
||
<h3 class="card-title mb-0">450+</h3>
|
||
<p class="card-text">Organized sheets</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-10">
|
||
<p>This UI kit has all you need to manage your hypothetical customer's smart devices like thermostats, lights, and other appliances that make for a connected modern home.</p>
|
||
</div>
|
||
|
||
<div class="w-lg-65 text-center mx-lg-auto">
|
||
<div class="row">
|
||
<div class="col-6 col-sm-3 mb-3 mb-sm-0">
|
||
<!-- Icon Block -->
|
||
<div class="text-center">
|
||
<span class="icon icon-light bg-white shadow-sm mb-3">
|
||
<i class="bi-grid"></i>
|
||
</span>
|
||
|
||
<h5 class="mb-1">Bootstrap 5 Grid</h5>
|
||
<p class="small">1140px</p>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
|
||
<div class="col-6 col-sm-3 mb-3 mb-sm-0">
|
||
<!-- Icon Block -->
|
||
<div class="text-center">
|
||
<span class="icon icon-light bg-white shadow-sm mb-3">
|
||
<i class="bi-type"></i>
|
||
</span>
|
||
|
||
<h5 class="mb-1">Google Fonts</h5>
|
||
<p class="small">Roboto</p>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
|
||
<div class="col-6 col-sm-3">
|
||
<!-- Icon Block -->
|
||
<div class="text-center">
|
||
<span class="icon icon-light bg-white shadow-sm mb-3">
|
||
<i class="bi-droplet-half"></i>
|
||
</span>
|
||
|
||
<h5 class="mb-1">Free Icons</h5>
|
||
<p class="small">Bootstrap Icons</p>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
|
||
<div class="col-6 col-sm-3">
|
||
<!-- Icon Block -->
|
||
<div class="text-center">
|
||
<span class="icon icon-light bg-white shadow-sm mb-3">
|
||
<i class="bi-pencil-square"></i>
|
||
</span>
|
||
|
||
<h5 class="mb-1">Symbol overrides</h5>
|
||
<p class="small">Easily customizable</p>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html5" role="tabpanel" aria-labelledby="nav-htmlTab5">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Icon Block -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-5">
|
||
<span class="text-cap">Meet Front UI/UX kit</span>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="mx-auto mb-5" style="max-width: 40rem;">
|
||
<div class="row gx-3">
|
||
<div class="col-sm-4 mb-3 mb-sm-0">
|
||
<!-- Card -->
|
||
<div class="card card-dashed shadow-none text-center rounded-2">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M17.302 11.35L12.002 20.55H21.202C21.802 20.55 22.202 19.85 21.902 19.35L17.302 11.35Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M12.002 20.55H2.802C2.202 20.55 1.80202 19.85 2.10202 19.35L6.70203 11.45L12.002 20.55ZM11.302 3.45L6.70203 11.35H17.302L12.702 3.45C12.402 2.85 11.602 2.85 11.302 3.45Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h2 class="card-title h3 mb-0">300+</h2>
|
||
<p class="card-text">UI elements</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="col-sm-4 mb-3 mb-sm-0">
|
||
<!-- Card -->
|
||
<div class="card card-dashed shadow-none text-center rounded-2">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary 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="M21.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="#035A4B"/>
|
||
<path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h3 class="card-title mb-0">270+</h3>
|
||
<p class="card-text">in 3 categories</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="col-sm-4">
|
||
<!-- Card -->
|
||
<div class="card card-dashed shadow-none text-center rounded-2">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<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>
|
||
|
||
<h3 class="card-title mb-0">450+</h3>
|
||
<p class="card-text">Organized sheets</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-10">
|
||
<p>This UI kit has all you need to manage your hypothetical customer's smart devices like thermostats, lights, and other appliances that make for a connected modern home.</p>
|
||
</div>
|
||
|
||
<div class="w-lg-65 text-center mx-lg-auto">
|
||
<div class="row">
|
||
<div class="col-6 col-sm-3 mb-3 mb-sm-0">
|
||
<!-- Icon Block -->
|
||
<div class="text-center">
|
||
<span class="icon icon-light bg-white shadow-sm mb-3">
|
||
<i class="bi-grid"></i>
|
||
</span>
|
||
|
||
<h5 class="mb-1">Bootstrap 5 Grid</h5>
|
||
<p class="small">1140px</p>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
|
||
<div class="col-6 col-sm-3 mb-3 mb-sm-0">
|
||
<!-- Icon Block -->
|
||
<div class="text-center">
|
||
<span class="icon icon-light bg-white shadow-sm mb-3">
|
||
<i class="bi-type"></i>
|
||
</span>
|
||
|
||
<h5 class="mb-1">Google Fonts</h5>
|
||
<p class="small">Roboto</p>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
|
||
<div class="col-6 col-sm-3">
|
||
<!-- Icon Block -->
|
||
<div class="text-center">
|
||
<span class="icon icon-light bg-white shadow-sm mb-3">
|
||
<i class="bi-droplet-half"></i>
|
||
</span>
|
||
|
||
<h5 class="mb-1">Free Icons</h5>
|
||
<p class="small">Bootstrap Icons</p>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
|
||
<div class="col-6 col-sm-3">
|
||
<!-- Icon Block -->
|
||
<div class="text-center">
|
||
<span class="icon icon-light bg-white shadow-sm mb-3">
|
||
<i class="bi-pencil-square"></i>
|
||
</span>
|
||
|
||
<h5 class="mb-1">Symbol overrides</h5>
|
||
<p class="small">Easily customizable</p>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-6" class="hs-docs-heading">
|
||
Component #6 <a class="anchorjs-link" href="#component-6" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab6" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab6" href="#nav-result6" data-bs-toggle="pill" data-bs-target="#nav-result6" role="tab" aria-controls="nav-result6" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab6" href="#nav-html6" data-bs-toggle="pill" data-bs-target="#nav-html6" role="tab" aria-controls="nav-html6" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent6">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result6" role="tabpanel" aria-labelledby="nav-resultTab6">
|
||
<!-- Icon Blocks -->
|
||
<div class="container">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Why Front</span>
|
||
<h2>Do more with an end-to-end solution</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row mb-5 mb-md-9">
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex align-items-center mb-2">
|
||
<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="M17.302 11.35L12.002 20.55H21.202C21.802 20.55 22.202 19.85 21.902 19.35L17.302 11.35Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M12.002 20.55H2.802C2.202 20.55 1.80202 19.85 2.10202 19.35L6.70203 11.45L12.002 20.55ZM11.302 3.45L6.70203 11.35H17.302L12.702 3.45C12.402 2.85 11.602 2.85 11.302 3.45Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4 class="mb-0">Robust libraries</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
|
||
<p>Use Front thoroughly thought and automated libraries to manage your businesses.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex align-items-center mb-2">
|
||
<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">
|
||
<h4 class="mb-0">Simplified Snippets tools</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
|
||
<p>Quickly Front sample components, copy-paste codes, and start right off.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex align-items-center mb-2">
|
||
<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">
|
||
<h4 class="mb-0">Comprehensive docs</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
|
||
<p>Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex align-items-center mb-2">
|
||
<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.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="#035A4B"/>
|
||
<path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4 class="mb-0">Layout options</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
|
||
<p>Apart from 100+ HTML-pages, the theme comes with 6 ready-to-use and stand-alone demo options.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex align-items-center mb-2">
|
||
<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="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>
|
||
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4 class="mb-0">Speed up</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
|
||
<p>Reduce time and effort on building modern look design with Front only.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex align-items-center mb-2">
|
||
<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="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>
|
||
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4 class="mb-0">A full solution for start-ups</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
|
||
<p>Front comes with design layouts from Corporate to Course platform.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<div class="text-center">
|
||
<div class="d-grid d-sm-flex justify-content-center gap-2 mb-3">
|
||
<a class="btn btn-primary btn-transition" href="#">Sign up and Start Building</a>
|
||
<a class="btn btn-link" href="#">Let's Talk <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
|
||
<p class="small">Start free trial. * No credit card required.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html6" role="tabpanel" aria-labelledby="nav-htmlTab6">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Icon Blocks -->
|
||
<div class="container">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Why Front</span>
|
||
<h2>Do more with an end-to-end solution</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row mb-5 mb-md-9">
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex align-items-center mb-2">
|
||
<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="M17.302 11.35L12.002 20.55H21.202C21.802 20.55 22.202 19.85 21.902 19.35L17.302 11.35Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M12.002 20.55H2.802C2.202 20.55 1.80202 19.85 2.10202 19.35L6.70203 11.45L12.002 20.55ZM11.302 3.45L6.70203 11.35H17.302L12.702 3.45C12.402 2.85 11.602 2.85 11.302 3.45Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4 class="mb-0">Robust libraries</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
|
||
<p>Use Front thoroughly thought and automated libraries to manage your businesses.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex align-items-center mb-2">
|
||
<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">
|
||
<h4 class="mb-0">Simplified Snippets tools</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
|
||
<p>Quickly Front sample components, copy-paste codes, and start right off.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex align-items-center mb-2">
|
||
<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">
|
||
<h4 class="mb-0">Comprehensive docs</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
|
||
<p>Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex align-items-center mb-2">
|
||
<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.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="#035A4B"/>
|
||
<path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4 class="mb-0">Layout options</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
|
||
<p>Apart from 100+ HTML-pages, the theme comes with 6 ready-to-use and stand-alone demo options.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex align-items-center mb-2">
|
||
<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="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>
|
||
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4 class="mb-0">Speed up</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
|
||
<p>Reduce time and effort on building modern look design with Front only.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex align-items-center mb-2">
|
||
<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="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>
|
||
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4 class="mb-0">A full solution for start-ups</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
|
||
<p>Front comes with design layouts from Corporate to Course platform.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<div class="text-center">
|
||
<div class="d-grid d-sm-flex justify-content-center gap-2 mb-3">
|
||
<a class="btn btn-primary btn-transition" href="#">Sign up and Start Building</a>
|
||
<a class="btn btn-link" href="#">Let's Talk <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
|
||
<p class="small">Start free trial. * No credit card required.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-7" class="hs-docs-heading">
|
||
Component #7 <a class="anchorjs-link" href="#component-7" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab7" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab7" href="#nav-result7" data-bs-toggle="pill" data-bs-target="#nav-result7" role="tab" aria-controls="nav-result7" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab7" href="#nav-html7" data-bs-toggle="pill" data-bs-target="#nav-html7" role="tab" aria-controls="nav-html7" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent7">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result7" role="tabpanel" aria-labelledby="nav-resultTab7">
|
||
<!-- Icon Blocks -->
|
||
<div class="position-relative bg-dark" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
|
||
<div class="container content-space-t-2 content-space-t-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 -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html7" role="tabpanel" aria-labelledby="nav-htmlTab7">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Icon Blocks -->
|
||
<div class="position-relative bg-dark" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
|
||
<div class="container content-space-t-2 content-space-t-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 -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-8" class="hs-docs-heading">
|
||
Component #8 <a class="anchorjs-link" href="#component-8" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab8" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab8" href="#nav-result8" data-bs-toggle="pill" data-bs-target="#nav-result8" role="tab" aria-controls="nav-result8" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab8" href="#nav-html8" data-bs-toggle="pill" data-bs-target="#nav-html8" role="tab" aria-controls="nav-html8" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent8">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result8" role="tabpanel" aria-labelledby="nav-resultTab8">
|
||
<!-- Icon Blocks -->
|
||
<div id="aboutSection" class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-lg-75 text-center mx-auto mb-5 mb-sm-9">
|
||
<h2 class="h1">What we do?</h2>
|
||
<p>A flexible theme for modern SaaS businesses</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-4 mb-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<span class="svg-icon svg-icon-lg text-primary mb-3">
|
||
<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>
|
||
|
||
<h3>Industry-leading designs</h3>
|
||
<p>Achieve virtually any design and layout from within the one template.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4 mb-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<span class="svg-icon svg-icon-lg text-primary 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" 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>
|
||
|
||
<h3>Learn from the docs</h3>
|
||
<p>Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4 mb-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<span class="svg-icon svg-icon-lg text-primary mb-3">
|
||
<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>
|
||
|
||
</span>
|
||
|
||
<h3>Accelerate your business</h3>
|
||
<p>We help power millions of businesses to built and run smoothly.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
|
||
<!-- Devices -->
|
||
<div class="container">
|
||
<div class="w-75 mx-auto mb-7">
|
||
<img class="img-fluid" src="../assets/svg/components/three-pointers.svg" alt="SVG Arrow">
|
||
</div>
|
||
|
||
<!-- Heading -->
|
||
<div class="w-md-60 w-lg-50 text-center mx-auto mb-7">
|
||
<p><span class="text-dark fw-semi-bold">It is fast and easy.</span> Create your first and ongoing website with Front.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Devices -->
|
||
<div class="devices">
|
||
<!-- Mobile Device -->
|
||
<figure class="device-mobile rotated-3d-right">
|
||
<div class="device-mobile-frame">
|
||
<img class="device-mobile-img" src="../assets/img/407x867/img1.jpg" alt="Image Description">
|
||
</div>
|
||
</figure>
|
||
<!-- End Mobile Device -->
|
||
|
||
<!-- 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 -->
|
||
</div>
|
||
<!-- End Devices -->
|
||
|
||
<div class="text-center mx-auto" style="max-width: 20rem;">
|
||
<p class="small">We are launching soon. Join the priority list for information and early access.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Devices -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html8" role="tabpanel" aria-labelledby="nav-htmlTab8">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Icon Blocks -->
|
||
<div id="aboutSection" class="container content-space-t-2 content-space-t-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-lg-75 text-center mx-auto mb-5 mb-sm-9">
|
||
<h2 class="h1">What we do?</h2>
|
||
<p>A flexible theme for modern SaaS businesses</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-4 mb-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<span class="svg-icon svg-icon-lg text-primary mb-3">
|
||
<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>
|
||
|
||
<h3>Industry-leading designs</h3>
|
||
<p>Achieve virtually any design and layout from within the one template.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4 mb-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<span class="svg-icon svg-icon-lg text-primary 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" 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>
|
||
|
||
<h3>Learn from the docs</h3>
|
||
<p>Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4 mb-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<span class="svg-icon svg-icon-lg text-primary mb-3">
|
||
<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>
|
||
|
||
</span>
|
||
|
||
<h3>Accelerate your business</h3>
|
||
<p>We help power millions of businesses to built and run smoothly.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
|
||
<!-- Devices -->
|
||
<div class="container">
|
||
<div class="w-75 mx-auto mb-7">
|
||
<img class="img-fluid" src="../assets/svg/components/three-pointers.svg" alt="SVG Arrow">
|
||
</div>
|
||
|
||
<!-- Heading -->
|
||
<div class="w-md-60 w-lg-50 text-center mx-auto mb-7">
|
||
<p><span class="text-dark fw-semi-bold">It is fast and easy.</span> Create your first and ongoing website with Front.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Devices -->
|
||
<div class="devices">
|
||
<!-- Mobile Device -->
|
||
<figure class="device-mobile rotated-3d-right">
|
||
<div class="device-mobile-frame">
|
||
<img class="device-mobile-img" src="../assets/img/407x867/img1.jpg" alt="Image Description">
|
||
</div>
|
||
</figure>
|
||
<!-- End Mobile Device -->
|
||
|
||
<!-- 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 -->
|
||
</div>
|
||
<!-- End Devices -->
|
||
|
||
<div class="text-center mx-auto" style="max-width: 20rem;">
|
||
<p class="small">We are launching soon. Join the priority list for information and early access.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Devices -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-9" class="hs-docs-heading">
|
||
Component #9 <a class="anchorjs-link" href="#component-9" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab9" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab9" href="#nav-result9" data-bs-toggle="pill" data-bs-target="#nav-result9" role="tab" aria-controls="nav-result9" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab9" href="#nav-html9" data-bs-toggle="pill" data-bs-target="#nav-html9" role="tab" aria-controls="nav-html9" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent9">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result9" role="tabpanel" aria-labelledby="nav-resultTab9">
|
||
<!-- Icon Blocks -->
|
||
<div class="container content-space-1">
|
||
<!-- 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 -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html9" role="tabpanel" aria-labelledby="nav-htmlTab9">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- 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 -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-10" class="hs-docs-heading">
|
||
Component #10 <a class="anchorjs-link" href="#component-10" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab10" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab10" href="#nav-result10" data-bs-toggle="pill" data-bs-target="#nav-result10" role="tab" aria-controls="nav-result10" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab10" href="#nav-html10" data-bs-toggle="pill" data-bs-target="#nav-html10" role="tab" aria-controls="nav-html10" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent10">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result10" role="tabpanel" aria-labelledby="nav-resultTab10">
|
||
<!-- Icon Blocks -->
|
||
<div class="container">
|
||
<div class="border-bottom content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="d-block small font-weight-bold text-cap mb-2">Company values</span>
|
||
<h2>The Front culture</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span>—</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4>Hit heavy, stay small</h4>
|
||
<p>Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span>—</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4>Ambition by the boatload</h4>
|
||
<p>We love people who aim for greatness. They inspire and excite their teammates, raising the bar for all of us.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span>—</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4>Open communication</h4>
|
||
<p>We're big fans of transparency for many reasons, but the abridged version is: it makes easier.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span>—</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4>Autonomy and attitude</h4>
|
||
<p>We're a team of self-starters who take serious pride in our work – and it shows.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span>—</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4>Support and win</h4>
|
||
<p>When we empower others to succeed, we all win. (And we're not talking about participation trophies.)</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-4">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span>—</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4>Teamwork makes the dream work</h4>
|
||
<p>We work together to bring our passions and expertise to make Teachable the best it can be.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html10" role="tabpanel" aria-labelledby="nav-htmlTab10">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Icon Blocks -->
|
||
<div class="container">
|
||
<div class="border-bottom 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="d-block small font-weight-bold text-cap mb-2">Company values</span>
|
||
<h2>The Front culture</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span>—</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4>Hit heavy, stay small</h4>
|
||
<p>Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span>—</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4>Ambition by the boatload</h4>
|
||
<p>We love people who aim for greatness. They inspire and excite their teammates, raising the bar for all of us.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span>—</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4>Open communication</h4>
|
||
<p>We're big fans of transparency for many reasons, but the abridged version is: it makes easier.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span>—</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4>Autonomy and attitude</h4>
|
||
<p>We're a team of self-starters who take serious pride in our work – and it shows.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span>—</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4>Support and win</h4>
|
||
<p>When we empower others to succeed, we all win. (And we're not talking about participation trophies.)</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-4">
|
||
<!-- Icon Blocks -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span>—</span>
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4>Teamwork makes the dream work</h4>
|
||
<p>We work together to bring our passions and expertise to make Teachable the best it can be.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-11" class="hs-docs-heading">
|
||
Component #11 <a class="anchorjs-link" href="#component-11" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab11" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab11" href="#nav-result11" data-bs-toggle="pill" data-bs-target="#nav-result11" role="tab" aria-controls="nav-result11" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab11" href="#nav-html11" data-bs-toggle="pill" data-bs-target="#nav-html11" role="tab" aria-controls="nav-html11" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent11">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result11" role="tabpanel" aria-labelledby="nav-resultTab11">
|
||
<!-- Icon Blocks -->
|
||
<div class="border-bottom">
|
||
<div class="container content-space-1">
|
||
<div class="row">
|
||
<div class="col-md-4 mb-7 mb-md-0">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/illustrations/oc-protected-card.svg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4 class="mb-1">Secure checkout</h4>
|
||
<p class="small mb-0">Guaranteed safe checkout</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4 mb-7 mb-md-0">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/illustrations/oc-return.svg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4 class="mb-1">30 Days return</h4>
|
||
<p class="small mb-0">We offer you a full refund within 30 days of purchase.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/illustrations/oc-truck.svg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4 class="mb-1">Free shipping</h4>
|
||
<p class="small mb-0">Automatically receive free standard shipping on every order.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html11" role="tabpanel" aria-labelledby="nav-htmlTab11">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Icon Blocks -->
|
||
<div class="border-bottom">
|
||
<div class="container content-space-2">
|
||
<div class="row">
|
||
<div class="col-md-4 mb-7 mb-md-0">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/illustrations/oc-protected-card.svg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4 class="mb-1">Secure checkout</h4>
|
||
<p class="small mb-0">Guaranteed safe checkout</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4 mb-7 mb-md-0">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/illustrations/oc-return.svg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4 class="mb-1">30 Days return</h4>
|
||
<p class="small mb-0">We offer you a full refund within 30 days of purchase.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<!-- Icon Block -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/illustrations/oc-truck.svg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4 class="mb-1">Free shipping</h4>
|
||
<p class="small mb-0">Automatically receive free standard shipping on every order.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Content -->
|
||
</main>
|
||
<!-- ========== END MAIN CONTENT ========== -->
|
||
|
||
<!-- ========== SECONDARY CONTENTS ========== -->
|
||
<!-- 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 Global Compulsory -->
|
||
<script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
||
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
||
<script src="../assets/vendor/list.js/dist/list.min.js"></script>
|
||
<script src="../assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
||
<script src="../assets/vendor/prism/prism.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 NAV SCROLLER
|
||
// =======================================================
|
||
new HsNavScroller('.js-nav-scroller', {
|
||
delay: 400,
|
||
offset: 140
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF LISTJS COMPONENT
|
||
// =======================================================
|
||
HSCore.components.HSList.init('#snippetsSearch')
|
||
const snippetsSearch = HSCore.components.HSList.getItem('snippetsSearch')
|
||
|
||
|
||
// GET JSON FILE RESULTS
|
||
// =======================================================
|
||
fetch('../assets/json/snippets-search.json')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
snippetsSearch.add(data)
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF GO TO
|
||
// =======================================================
|
||
new HSGoTo('.js-go-to')
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|