2505 lines
134 KiB
HTML
2505 lines
134 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>Features General - 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/css/vendor.min.css">
|
||
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<link rel="stylesheet" href="../assets/css/theme.min.css?v=1.0">
|
||
<link rel="stylesheet" href="../assets/css/snippets.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 active">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavFeaturesCollapse" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="snippetsSidebarNavFeaturesCollapse">Features</a>
|
||
|
||
<div id="snippetsSidebarNavFeaturesCollapse" class="nav-collapse collapse show">
|
||
<a class="nav-link active" 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 " 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">Features General</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">
|
||
<!-- Features -->
|
||
<div class="position-relative bg-light rounded-2 mx-3 mx-lg-10">
|
||
<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">
|
||
<h2>Wow your audience from the first second</h2>
|
||
<p>The powerful and flexible theme for all kinds of businesses</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="text-center mb-10">
|
||
<!-- List Checked -->
|
||
<ul class="list-inline list-checked list-checked-primary">
|
||
<li class="list-inline-item list-checked-item">Responsive</li>
|
||
<li class="list-inline-item list-checked-item">5-star support</li>
|
||
<li class="list-inline-item list-checked-item">Constant updates</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-7 mb-9 mb-lg-0">
|
||
<div class="pe-lg-6">
|
||
<!-- 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/img6.jpg" alt="Image Description">
|
||
</div>
|
||
</figure>
|
||
<!-- End Browser Device -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-5">
|
||
<!-- Heading -->
|
||
<div class="mb-4">
|
||
<h2>Collaborative tools to design user experience</h2>
|
||
<p>We help businesses bring ideas to life in the digital world, by designing and implementing the technology tools that they need to win.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary mb-5">
|
||
<li class="list-checked-item">Less routine – more creativity</li>
|
||
<li class="list-checked-item">Hundreds of thousands saved</li>
|
||
<li class="list-checked-item">Scale budgets efficiently</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
|
||
<a class="btn btn-primary" href="#">Get started</a>
|
||
|
||
<hr class="my-5">
|
||
|
||
<span class="d-block">Trusted by leading companies</span>
|
||
|
||
<div class="row">
|
||
<div class="col py-3">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/brands/fitbit-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col py-3">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/brands/forbes-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col py-3">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/brands/mailchimp-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col py-3">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/brands/layar-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Features -->
|
||
<div class="position-relative bg-light rounded-2 mx-3 mx-lg-10">
|
||
<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">
|
||
<h2>Wow your audience from the first second</h2>
|
||
<p>The powerful and flexible theme for all kinds of businesses</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="text-center mb-10">
|
||
<!-- List Checked -->
|
||
<ul class="list-inline list-checked list-checked-primary">
|
||
<li class="list-inline-item list-checked-item">Responsive</li>
|
||
<li class="list-inline-item list-checked-item">5-star support</li>
|
||
<li class="list-inline-item list-checked-item">Constant updates</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-7 mb-9 mb-lg-0">
|
||
<div class="pe-lg-6">
|
||
<!-- 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/img6.jpg" alt="Image Description">
|
||
</div>
|
||
</figure>
|
||
<!-- End Browser Device -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-5">
|
||
<!-- Heading -->
|
||
<div class="mb-4">
|
||
<h2>Collaborative tools to design user experience</h2>
|
||
<p>We help businesses bring ideas to life in the digital world, by designing and implementing the technology tools that they need to win.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary mb-5">
|
||
<li class="list-checked-item">Less routine – more creativity</li>
|
||
<li class="list-checked-item">Hundreds of thousands saved</li>
|
||
<li class="list-checked-item">Scale budgets efficiently</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
|
||
<a class="btn btn-primary" href="#">Get started</a>
|
||
|
||
<hr class="my-5">
|
||
|
||
<span class="d-block">Trusted by leading companies</span>
|
||
|
||
<div class="row">
|
||
<div class="col py-3">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/brands/fitbit-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col py-3">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/brands/forbes-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col py-3">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/brands/mailchimp-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col py-3">
|
||
<img class="avatar avatar-4x3" src="../assets/svg/brands/layar-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</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">
|
||
<!-- Features -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-1">
|
||
<div class="row justify-content-lg-between align-items-lg-center">
|
||
<div class="col-lg-6 mb-9 mb-lg-0">
|
||
<div class="position-relative mx-auto" style="max-width: 20rem;">
|
||
<!-- Mobile Device -->
|
||
<figure class="device-mobile mx-auto">
|
||
<div class="device-mobile-frame">
|
||
<img class="device-mobile-img" src="../assets/img/407x867/img5.jpg" alt="Image Description">
|
||
</div>
|
||
</figure>
|
||
<!-- End Mobile Device -->
|
||
|
||
<!-- Image -->
|
||
<div class="position-absolute top-0 end-0 zi-2 me-n10 mt-9" style="width: 16rem;">
|
||
<img class="img-fluid shadow-lg rounded-2" src="../assets/img/407x115/img1.jpg" alt="Image Description">
|
||
</div>
|
||
<!-- End Image -->
|
||
|
||
<!-- Image -->
|
||
<div class="position-absolute bottom-0 start-0 zi-2 ms-n10 mb-10" style="width: 16rem;">
|
||
<img class="img-fluid shadow-lg rounded-2" src="../assets/img/480x320/img26.jpg" alt="Image Description">
|
||
</div>
|
||
<!-- End Image -->
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute bottom-0 end-0 zi-n1 mx-auto" style="width: 20rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/shape-1.svg" alt="SVG">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-5">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2>Advanced analytics easy to understand</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Step -->
|
||
<ul class="step step-dashed mb-7">
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-xs step-icon-soft-primary">1</span>
|
||
<div class="step-content">
|
||
<h4 class="step-title">Industry-leading documentation</h4>
|
||
<p><a class="link" href="../documentation/index.html">Our documentation</a> and extensive Client libraries contain everything a business needs to build a custom integration in a fraction of the time.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="step-item mb-0">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-xs step-icon-soft-primary">2</span>
|
||
<div class="step-content">
|
||
<h4 class="step-title">Support for the developer community</h4>
|
||
<p class="mb-0">We actively contribute to open-source projects—giving back to the community through development, patches, and sponsorships.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<!-- End Step -->
|
||
|
||
<a class="btn btn-primary btn-transition" href="#">Request demo</a>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Features -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<div class="row justify-content-lg-between align-items-lg-center">
|
||
<div class="col-lg-6 mb-9 mb-lg-0">
|
||
<div class="position-relative mx-auto" style="max-width: 20rem;">
|
||
<!-- Mobile Device -->
|
||
<figure class="device-mobile mx-auto">
|
||
<div class="device-mobile-frame">
|
||
<img class="device-mobile-img" src="../assets/img/407x867/img5.jpg" alt="Image Description">
|
||
</div>
|
||
</figure>
|
||
<!-- End Mobile Device -->
|
||
|
||
<!-- Image -->
|
||
<div class="position-absolute top-0 end-0 zi-2 me-n10 mt-9" style="width: 16rem;">
|
||
<img class="img-fluid shadow-lg rounded-2" src="../assets/img/407x115/img1.jpg" alt="Image Description">
|
||
</div>
|
||
<!-- End Image -->
|
||
|
||
<!-- Image -->
|
||
<div class="position-absolute bottom-0 start-0 zi-2 ms-n10 mb-10" style="width: 16rem;">
|
||
<img class="img-fluid shadow-lg rounded-2" src="../assets/img/480x320/img26.jpg" alt="Image Description">
|
||
</div>
|
||
<!-- End Image -->
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute bottom-0 end-0 zi-n1 mx-auto" style="width: 20rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/shape-1.svg" alt="SVG">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-5">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2>Advanced analytics easy to understand</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Step -->
|
||
<ul class="step step-dashed mb-7">
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-xs step-icon-soft-primary">1</span>
|
||
<div class="step-content">
|
||
<h4 class="step-title">Industry-leading documentation</h4>
|
||
<p><a class="link" href="../documentation/index.html">Our documentation</a> and extensive Client libraries contain everything a business needs to build a custom integration in a fraction of the time.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="step-item mb-0">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-xs step-icon-soft-primary">2</span>
|
||
<div class="step-content">
|
||
<h4 class="step-title">Support for the developer community</h4>
|
||
<p class="mb-0">We actively contribute to open-source projects—giving back to the community through development, patches, and sponsorships.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<!-- End Step -->
|
||
|
||
<a class="btn btn-primary btn-transition" href="#">Request demo</a>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</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">
|
||
<!-- Features -->
|
||
<div class="container content-space-1">
|
||
<div class="row justify-content-lg-between align-items-lg-center">
|
||
<div class="col-lg-5 mb-9 mb-lg-0">
|
||
<div class="mb-3">
|
||
<h2 class="h1">Whatever work you do, use our design</h2>
|
||
</div>
|
||
|
||
<p>After brainstorming about insights, get the power to create something real. Bring your ideas to life and share your vision with concrete elements. Make collaboration and communication easier with your team or your client.</p>
|
||
|
||
<p>Use our tools to explore your ideas and make your vision come true. Then share your work easily.</p>
|
||
|
||
<div class="mt-4">
|
||
<a class="btn btn-primary btn-transition px-5" href="#">Start Now</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-6 col-xl-5">
|
||
<!-- SVG Element -->
|
||
<div class="position-relative mx-auto" style="max-width: 28rem; min-height: 30rem;">
|
||
<figure class="position-absolute top-0 end-0 zi-2 me-10" data-aos="fade-up">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 450 450" width="165" height="165">
|
||
<g>
|
||
<defs>
|
||
<path id="circleImgID2" d="M225,448.7L225,448.7C101.4,448.7,1.3,348.5,1.3,225l0,0C1.2,101.4,101.4,1.3,225,1.3l0,0
|
||
c123.6,0,223.7,100.2,223.7,223.7l0,0C448.7,348.6,348.5,448.7,225,448.7z"/>
|
||
</defs>
|
||
<clipPath id="circleImgID1">
|
||
<use xlink:href="#circleImgID2"/>
|
||
</clipPath>
|
||
<g clip-path="url(#circleImgID1)">
|
||
<image width="450" height="450" xlink:href="../assets/img/450x450/img1.jpg" ></image>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</figure>
|
||
|
||
<figure class="position-absolute top-0 start-0" data-aos="fade-up" data-aos-delay="300">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="120" height="120">
|
||
<circle fill="none" stroke="#377dff" stroke-width="75" cx="167.6" cy="167.6" r="130.1"/>
|
||
</svg>
|
||
</figure>
|
||
|
||
<figure class="d-none d-sm-block position-absolute top-0 start-0 mt-10" data-aos="fade-up" data-aos-delay="200">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 515 515" width="200" height="200">
|
||
<g>
|
||
<defs>
|
||
<path id="circleImgID4" d="M260,515h-5C114.2,515,0,400.8,0,260v-5C0,114.2,114.2,0,255,0h5c140.8,0,255,114.2,255,255v5
|
||
C515,400.9,400.8,515,260,515z"/>
|
||
</defs>
|
||
<clipPath id="circleImgID3">
|
||
<use xlink:href="#circleImgID4"/>
|
||
</clipPath>
|
||
<g clip-path="url(#circleImgID3)">
|
||
<image width="515" height="515" xlink:href="../assets/img/515x515/img1.jpg" transform="matrix(1 0 0 1 1.639390e-02 2.880859e-02)"></image>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</figure>
|
||
|
||
<figure class="position-absolute top-0 end-0" style="margin-top: 11rem; margin-right: 13rem;" data-aos="fade-up" data-aos-delay="250">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 67 67" width="25" height="25">
|
||
<circle fill="#00C9A7" cx="33.5" cy="33.5" r="33.5"/>
|
||
</svg>
|
||
</figure>
|
||
|
||
<figure class="position-absolute top-0 end-0 me-3" style="margin-top: 8rem;" data-aos="fade-up" data-aos-delay="350">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 141 141" width="50" height="50">
|
||
<circle fill="#FFC107" cx="70.5" cy="70.5" r="70.5"/>
|
||
</svg>
|
||
</figure>
|
||
|
||
<figure class="position-absolute bottom-0 end-0" data-aos="fade-up" data-aos-delay="400">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 770.4 770.4" width="280" height="280">
|
||
<g>
|
||
<defs>
|
||
<path id="circleImgID6" d="M385.2,770.4L385.2,770.4c212.7,0,385.2-172.5,385.2-385.2l0,0C770.4,172.5,597.9,0,385.2,0l0,0
|
||
C172.5,0,0,172.5,0,385.2l0,0C0,597.9,172.4,770.4,385.2,770.4z"/>
|
||
</defs>
|
||
<clipPath id="circleImgID5">
|
||
<use xlink:href="#circleImgID6"/>
|
||
</clipPath>
|
||
<g clip-path="url(#circleImgID5)">
|
||
<image width="900" height="900" xlink:href="../assets/img/900x900/img2.jpg" transform="matrix(1 0 0 1 -64.8123 -64.8055)"></image>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</figure>
|
||
</div>
|
||
<!-- End SVG Element -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Features -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Features -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<div class="row justify-content-lg-between align-items-lg-center">
|
||
<div class="col-lg-5 mb-9 mb-lg-0">
|
||
<div class="mb-3">
|
||
<h2 class="h1">Whatever work you do, use our design</h2>
|
||
</div>
|
||
|
||
<p>After brainstorming about insights, get the power to create something real. Bring your ideas to life and share your vision with concrete elements. Make collaboration and communication easier with your team or your client.</p>
|
||
|
||
<p>Use our tools to explore your ideas and make your vision come true. Then share your work easily.</p>
|
||
|
||
<div class="mt-4">
|
||
<a class="btn btn-primary btn-transition px-5" href="#">Start Now</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-6 col-xl-5">
|
||
<!-- SVG Element -->
|
||
<div class="position-relative mx-auto" style="max-width: 28rem; min-height: 30rem;">
|
||
<figure class="position-absolute top-0 end-0 zi-2 me-10" data-aos="fade-up">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 450 450" width="165" height="165">
|
||
<g>
|
||
<defs>
|
||
<path id="circleImgID2" d="M225,448.7L225,448.7C101.4,448.7,1.3,348.5,1.3,225l0,0C1.2,101.4,101.4,1.3,225,1.3l0,0
|
||
c123.6,0,223.7,100.2,223.7,223.7l0,0C448.7,348.6,348.5,448.7,225,448.7z"/>
|
||
</defs>
|
||
<clipPath id="circleImgID1">
|
||
<use xlink:href="#circleImgID2"/>
|
||
</clipPath>
|
||
<g clip-path="url(#circleImgID1)">
|
||
<image width="450" height="450" xlink:href="../assets/img/450x450/img1.jpg" ></image>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</figure>
|
||
|
||
<figure class="position-absolute top-0 start-0" data-aos="fade-up" data-aos-delay="300">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="120" height="120">
|
||
<circle fill="none" stroke="#377dff" stroke-width="75" cx="167.6" cy="167.6" r="130.1"/>
|
||
</svg>
|
||
</figure>
|
||
|
||
<figure class="d-none d-sm-block position-absolute top-0 start-0 mt-10" data-aos="fade-up" data-aos-delay="200">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 515 515" width="200" height="200">
|
||
<g>
|
||
<defs>
|
||
<path id="circleImgID4" d="M260,515h-5C114.2,515,0,400.8,0,260v-5C0,114.2,114.2,0,255,0h5c140.8,0,255,114.2,255,255v5
|
||
C515,400.9,400.8,515,260,515z"/>
|
||
</defs>
|
||
<clipPath id="circleImgID3">
|
||
<use xlink:href="#circleImgID4"/>
|
||
</clipPath>
|
||
<g clip-path="url(#circleImgID3)">
|
||
<image width="515" height="515" xlink:href="../assets/img/515x515/img1.jpg" transform="matrix(1 0 0 1 1.639390e-02 2.880859e-02)"></image>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</figure>
|
||
|
||
<figure class="position-absolute top-0 end-0" style="margin-top: 11rem; margin-right: 13rem;" data-aos="fade-up" data-aos-delay="250">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 67 67" width="25" height="25">
|
||
<circle fill="#00C9A7" cx="33.5" cy="33.5" r="33.5"/>
|
||
</svg>
|
||
</figure>
|
||
|
||
<figure class="position-absolute top-0 end-0 me-3" style="margin-top: 8rem;" data-aos="fade-up" data-aos-delay="350">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 141 141" width="50" height="50">
|
||
<circle fill="#FFC107" cx="70.5" cy="70.5" r="70.5"/>
|
||
</svg>
|
||
</figure>
|
||
|
||
<figure class="position-absolute bottom-0 end-0" data-aos="fade-up" data-aos-delay="400">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 770.4 770.4" width="280" height="280">
|
||
<g>
|
||
<defs>
|
||
<path id="circleImgID6" d="M385.2,770.4L385.2,770.4c212.7,0,385.2-172.5,385.2-385.2l0,0C770.4,172.5,597.9,0,385.2,0l0,0
|
||
C172.5,0,0,172.5,0,385.2l0,0C0,597.9,172.4,770.4,385.2,770.4z"/>
|
||
</defs>
|
||
<clipPath id="circleImgID5">
|
||
<use xlink:href="#circleImgID6"/>
|
||
</clipPath>
|
||
<g clip-path="url(#circleImgID5)">
|
||
<image width="900" height="900" xlink:href="../assets/img/900x900/img2.jpg" transform="matrix(1 0 0 1 -64.8123 -64.8055)"></image>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</figure>
|
||
</div>
|
||
<!-- End SVG Element -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Features -->
|
||
</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">
|
||
<!-- Mockup -->
|
||
<div class="shape-container">
|
||
<div class="container">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2 class="h1">Ready to grow your business?</h2>
|
||
<p>Your website is fully responsive so visitors can view your content from their choice of device.</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/img5.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>
|
||
|
||
<!-- Shape -->
|
||
<div class="shape shape-bottom zi-3">
|
||
<svg width="3000" height="500" viewBox="0 0 3000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M0 500H3000V0L0 500Z" fill="#fff"/>
|
||
</svg>
|
||
</div>
|
||
<!-- End Shape -->
|
||
</div>
|
||
<!-- End Mockup -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Mockup -->
|
||
<div class="shape-container">
|
||
<div class="container">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2 class="h1">Ready to grow your business?</h2>
|
||
<p>Your website is fully responsive so visitors can view your content from their choice of device.</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/img5.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>
|
||
|
||
<!-- Shape -->
|
||
<div class="shape shape-bottom zi-3">
|
||
<svg width="3000" height="500" viewBox="0 0 3000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M0 500H3000V0L0 500Z" fill="#fff"/>
|
||
</svg>
|
||
</div>
|
||
<!-- End Shape -->
|
||
</div>
|
||
<!-- End Mockup -->
|
||
</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">
|
||
<!-- Features -->
|
||
<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">
|
||
<span class="text-cap">How we work</span>
|
||
<h2>Bring your ideas to life and share your vision with concrete elements</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="w-md-75 mx-md-auto">
|
||
<div class="row justify-content-lg-center align-items-md-center">
|
||
<div class="col-md-5 mb-7 mb-md-0">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-soft-bg-primary list-checked-lg mb-5">
|
||
<li class="list-checked-item">Easy & fast designing</li>
|
||
<li class="list-checked-item">Powerful features</li>
|
||
<li class="list-checked-item">Advanced HTML/CSS editing</li>
|
||
<li class="list-checked-item">React-Native Development</li>
|
||
<li class="list-checked-item">User Experience Design</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
|
||
<a class="link" href="../page-services.html">Our services <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-7 col-lg-5">
|
||
<div class="position-relative">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<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="M22.0318 8.59998C22.0318 10.4 21.4318 12.2 20.0318 13.5C18.4318 15.1 16.3318 15.7 14.2318 15.4C13.3318 15.3 12.3318 15.6 11.7318 16.3L6.93177 21.1C5.73177 22.3 3.83179 22.2 2.73179 21C1.63179 19.8 1.83177 18 2.93177 16.9L7.53178 12.3C8.23178 11.6 8.53177 10.7 8.43177 9.80005C8.13177 7.80005 8.73176 5.6 10.3318 4C11.7318 2.6 13.5318 2 15.2318 2C16.1318 2 16.6318 3.20005 15.9318 3.80005L13.0318 6.70007C12.5318 7.20007 12.4318 7.9 12.7318 8.5C13.3318 9.7 14.2318 10.6001 15.4318 11.2001C16.0318 11.5001 16.7318 11.3 17.2318 10.9L20.1318 8C20.8318 7.2 22.0318 7.59998 22.0318 8.59998Z" fill="#035A4B"/>
|
||
<path d="M4.23179 19.7C3.83179 19.3 3.83179 18.7 4.23179 18.3L9.73179 12.8C10.1318 12.4 10.7318 12.4 11.1318 12.8C11.5318 13.2 11.5318 13.8 11.1318 14.2L5.63179 19.7C5.23179 20.1 4.53179 20.1 4.23179 19.7Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h3 class="card-title">We tackle the challenges start-ups face</h3>
|
||
<p class="card-text">Besides working with start-up enterprises as a partner for digitalization, we have built enterprise products for common pain points that we have encountered in various products and projects.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute bottom-0 end-0 zi-n1 mb-n7 me-n7" style="width: 12rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="Image Description">
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html5" role="tabpanel" aria-labelledby="nav-htmlTab5">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Features -->
|
||
<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">
|
||
<span class="text-cap">How we work</span>
|
||
<h2>Bring your ideas to life and share your vision with concrete elements</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="w-md-75 mx-md-auto">
|
||
<div class="row justify-content-lg-center align-items-md-center">
|
||
<div class="col-md-5 mb-7 mb-md-0">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-soft-bg-primary list-checked-lg mb-5">
|
||
<li class="list-checked-item">Easy & fast designing</li>
|
||
<li class="list-checked-item">Powerful features</li>
|
||
<li class="list-checked-item">Advanced HTML/CSS editing</li>
|
||
<li class="list-checked-item">React-Native Development</li>
|
||
<li class="list-checked-item">User Experience Design</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
|
||
<a class="link" href="../page-services.html">Our services <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-7 col-lg-5">
|
||
<div class="position-relative">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<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="M22.0318 8.59998C22.0318 10.4 21.4318 12.2 20.0318 13.5C18.4318 15.1 16.3318 15.7 14.2318 15.4C13.3318 15.3 12.3318 15.6 11.7318 16.3L6.93177 21.1C5.73177 22.3 3.83179 22.2 2.73179 21C1.63179 19.8 1.83177 18 2.93177 16.9L7.53178 12.3C8.23178 11.6 8.53177 10.7 8.43177 9.80005C8.13177 7.80005 8.73176 5.6 10.3318 4C11.7318 2.6 13.5318 2 15.2318 2C16.1318 2 16.6318 3.20005 15.9318 3.80005L13.0318 6.70007C12.5318 7.20007 12.4318 7.9 12.7318 8.5C13.3318 9.7 14.2318 10.6001 15.4318 11.2001C16.0318 11.5001 16.7318 11.3 17.2318 10.9L20.1318 8C20.8318 7.2 22.0318 7.59998 22.0318 8.59998Z" fill="#035A4B"/>
|
||
<path d="M4.23179 19.7C3.83179 19.3 3.83179 18.7 4.23179 18.3L9.73179 12.8C10.1318 12.4 10.7318 12.4 11.1318 12.8C11.5318 13.2 11.5318 13.8 11.1318 14.2L5.63179 19.7C5.23179 20.1 4.53179 20.1 4.23179 19.7Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h3 class="card-title">We tackle the challenges start-ups face</h3>
|
||
<p class="card-text">Besides working with start-up enterprises as a partner for digitalization, we have built enterprise products for common pain points that we have encountered in various products and projects.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute bottom-0 end-0 zi-n1 mb-n7 me-n7" style="width: 12rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="Image Description">
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</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">
|
||
<!-- Features -->
|
||
<div class="container content-space-1">
|
||
<div class="row align-items-lg-center">
|
||
<div class="col-lg-5 mb-5 mb-lg-0">
|
||
<div class="pe-lg-6">
|
||
<div class="mb-4">
|
||
<h2 class="h1">All-in-one</h2>
|
||
</div>
|
||
|
||
<div class="d-flex gap-3 mb-4">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/slack-icon.svg" alt="Logo">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/jira-icon.svg" alt="Logo">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/gitlab-icon.svg" alt="Logo">
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p>Front is a collaboration hub for work, no matter what work you do. It's a place where conversations happen, decisions are made, and information is always at your fingertips. With Front, your team is better connected.</p>
|
||
</div>
|
||
|
||
<a class="link" href="#">Get started <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-7">
|
||
<!-- 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 Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Features -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html6" role="tabpanel" aria-labelledby="nav-htmlTab6">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Features -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<div class="row align-items-lg-center">
|
||
<div class="col-lg-5 mb-5 mb-lg-0">
|
||
<div class="pe-lg-6">
|
||
<div class="mb-4">
|
||
<h2 class="h1">All-in-one</h2>
|
||
</div>
|
||
|
||
<div class="d-flex gap-3 mb-4">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/slack-icon.svg" alt="Logo">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/jira-icon.svg" alt="Logo">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/gitlab-icon.svg" alt="Logo">
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p>Front is a collaboration hub for work, no matter what work you do. It's a place where conversations happen, decisions are made, and information is always at your fingertips. With Front, your team is better connected.</p>
|
||
</div>
|
||
|
||
<a class="link" href="#">Get started <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-7">
|
||
<!-- 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 Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Features -->
|
||
</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>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab7" href="#nav-js7" data-bs-toggle="pill" data-bs-target="#nav-js7" role="tab" aria-controls="nav-js7" aria-selected="false">JS</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">
|
||
<!-- Features -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-2">
|
||
<div class="row justify-content-lg-between align-items-lg-center">
|
||
<div class="col-lg-5 mb-9 mb-lg-0">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2>Payment made easy in stores with speed and security using.</h2>
|
||
<p>When paying in stores, Front Pay doesn't share your actual card number, so your information stays secure. Plus, you can check out faster and easier.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="w-md-50 w-lg-75 mb-2">
|
||
<!-- Fancybox -->
|
||
<div class="bg-img-start text-center rounded-2 py-10 px-5" style="background-image: url(../assets/img/480x320/img18.jpg);">
|
||
<a class="video-player video-player-btn" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
|
||
<span class="d-flex justify-content-center align-items-center">
|
||
<span class="video-player-icon shadow-sm">
|
||
<i class="bi-play-fill"></i>
|
||
</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Fancybox -->
|
||
</div>
|
||
|
||
<p class="small">See how to send money with Front Pay.</p>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="position-relative mx-auto" data-aos="fade-up">
|
||
<!-- Mobile Device -->
|
||
<figure class="device-mobile mx-auto">
|
||
<div class="device-mobile-frame">
|
||
<img class="device-mobile-img" src="../assets/img/407x867/img6.jpg" alt="Image Description">
|
||
</div>
|
||
</figure>
|
||
<!-- End Mobile Device -->
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute top-50 start-50 translate-middle zi-n1" style="width: 25rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/shape-2.svg" alt="SVG">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
|
||
<!-- Features -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-t-lg-3 content-space-b-lg-2">
|
||
<div class="row justify-content-lg-between align-items-lg-center">
|
||
<div class="col-lg-5 order-lg-2 mb-9 mb-lg-0">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2>The easiest way to pay within apps.</h2>
|
||
<p>Use Front Pay to make purchases in all kinds of apps. Pay for a ride, a pizza delivery, or a new pair of sneakers — with just a touch. Checking out is fast, simple, and secure.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<h4 class="mb-3">Get our mobile app</h4>
|
||
|
||
<div class="d-flex gap-3">
|
||
<a class="btn btn-dark btn-icon rounded-circle" href="#">
|
||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||
<path d="M11.76,6.69a.52.52,0,0,1-.59-.52,4.37,4.37,0,0,1,1-2.61A4.82,4.82,0,0,1,14.64,2a.51.51,0,0,1,.63.51,4.66,4.66,0,0,1-1,2.63A4.07,4.07,0,0,1,11.76,6.69Zm5.42,5.82c0-2.72,2-3.33,2-3.92s-1.73-1.91-3.56-1.91-2.54.86-3.78.86-2.25-.86-3.79-.86A5.16,5.16,0,0,0,3.89,9.21,6.64,6.64,0,0,0,3,12.75C3,17.14,6.15,22,8.47,22c1.3,0,1.63-.85,3.42-.85S14,22,15.22,22c2.52,0,4.62-5,4.62-5.07a.51.51,0,0,0-.3-.46A4.44,4.44,0,0,1,17.18,12.51Z"/>
|
||
</svg>
|
||
</a>
|
||
|
||
<a class="btn btn-dark btn-icon rounded-circle" href="#">
|
||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||
<path d="M16.6,15.7l5-2.9c0.2-0.1,0.4-0.4,0.4-0.6v-0.3c0-0.3-0.1-0.5-0.4-0.6l-5-2.9L13.3,12L16.6,15.7z M12.5,11.1l3-3.4L4.4,1.1
|
||
C4.2,1,4,1,3.8,1.1L12.5,11.1z M12.5,13L3.8,23c0.2,0.1,0.4,0.1,0.6,0l11.1-6.5L12.5,13z M3,2.1v19.8l8.7-9.9L3,2.1z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-6 order-lg-1">
|
||
<div class="position-relative mx-auto" data-aos="fade-up">
|
||
<!-- Mobile Device -->
|
||
<figure class="device-mobile mx-auto">
|
||
<div class="device-mobile-frame">
|
||
<img class="device-mobile-img" src="../assets/img/407x867/img3.jpg" alt="Image Description">
|
||
</div>
|
||
</figure>
|
||
<!-- End Mobile Device -->
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute top-50 start-50 translate-middle zi-n1" style="width: 25rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/shape-1.svg" alt="SVG">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
|
||
<!-- Features -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-t-2 content-space-t-lg-3 content-space-b-lg-2">
|
||
<div class="row justify-content-lg-between align-items-lg-center">
|
||
<div class="col-lg-5 mb-9 mb-lg-0">
|
||
<!-- Heading -->
|
||
<div class="mb-4">
|
||
<h2>Get paid and use the cash. All with Front Pay.</h2>
|
||
<p>When you receive money it's added to your Front Pay Cash card that lives in the Wallet app.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-soft-bg-dark list-checked-lg">
|
||
<li class="list-checked-item">When you pay with a debit or credit card, Front Pay doesn't keep transaction information that can be tied back to you.</li>
|
||
<li class="list-checked-item">When you use Front Pay Cash, information is stored only for troubleshooting.</li>
|
||
<li class="list-checked-item">You can also add your student ID card to Front Wallet to access places like your dorm and the library.</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-6">
|
||
<div class="position-relative mx-auto" data-aos="fade-up">
|
||
<!-- Mobile Device -->
|
||
<figure class="device-mobile mx-auto">
|
||
<div class="device-mobile-frame">
|
||
<img class="device-mobile-img" src="../assets/img/407x867/img1.jpg" alt="Image Description">
|
||
</div>
|
||
</figure>
|
||
<!-- End Mobile Device -->
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute top-50 start-50 translate-middle zi-n1" style="width: 25rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/shape-4.svg" alt="SVG">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html7" role="tabpanel" aria-labelledby="nav-htmlTab7">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Features -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-2 content-space-t-lg-3">
|
||
<div class="row justify-content-lg-between align-items-lg-center">
|
||
<div class="col-lg-5 mb-9 mb-lg-0">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2>Payment made easy in stores with speed and security using.</h2>
|
||
<p>When paying in stores, Front Pay doesn't share your actual card number, so your information stays secure. Plus, you can check out faster and easier.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="w-md-50 w-lg-75 mb-2">
|
||
<!-- Fancybox -->
|
||
<div class="bg-img-start text-center rounded-2 py-10 px-5" style="background-image: url(../assets/img/480x320/img18.jpg);">
|
||
<a class="video-player video-player-btn" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
|
||
<span class="d-flex justify-content-center align-items-center">
|
||
<span class="video-player-icon shadow-sm">
|
||
<i class="bi-play-fill"></i>
|
||
</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Fancybox -->
|
||
</div>
|
||
|
||
<p class="small">See how to send money with Front Pay.</p>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="position-relative mx-auto" data-aos="fade-up">
|
||
<!-- Mobile Device -->
|
||
<figure class="device-mobile mx-auto">
|
||
<div class="device-mobile-frame">
|
||
<img class="device-mobile-img" src="../assets/img/407x867/img6.jpg" alt="Image Description">
|
||
</div>
|
||
</figure>
|
||
<!-- End Mobile Device -->
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute top-50 start-50 translate-middle zi-n1" style="width: 25rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/shape-2.svg" alt="SVG">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
|
||
<!-- Features -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-t-lg-3 content-space-b-lg-2">
|
||
<div class="row justify-content-lg-between align-items-lg-center">
|
||
<div class="col-lg-5 order-lg-2 mb-9 mb-lg-0">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2>The easiest way to pay within apps.</h2>
|
||
<p>Use Front Pay to make purchases in all kinds of apps. Pay for a ride, a pizza delivery, or a new pair of sneakers — with just a touch. Checking out is fast, simple, and secure.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<h4 class="mb-3">Get our mobile app</h4>
|
||
|
||
<div class="d-flex gap-3">
|
||
<a class="btn btn-dark btn-icon rounded-circle" href="#">
|
||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||
<path d="M11.76,6.69a.52.52,0,0,1-.59-.52,4.37,4.37,0,0,1,1-2.61A4.82,4.82,0,0,1,14.64,2a.51.51,0,0,1,.63.51,4.66,4.66,0,0,1-1,2.63A4.07,4.07,0,0,1,11.76,6.69Zm5.42,5.82c0-2.72,2-3.33,2-3.92s-1.73-1.91-3.56-1.91-2.54.86-3.78.86-2.25-.86-3.79-.86A5.16,5.16,0,0,0,3.89,9.21,6.64,6.64,0,0,0,3,12.75C3,17.14,6.15,22,8.47,22c1.3,0,1.63-.85,3.42-.85S14,22,15.22,22c2.52,0,4.62-5,4.62-5.07a.51.51,0,0,0-.3-.46A4.44,4.44,0,0,1,17.18,12.51Z"/>
|
||
</svg>
|
||
</a>
|
||
|
||
<a class="btn btn-dark btn-icon rounded-circle" href="#">
|
||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||
<path d="M16.6,15.7l5-2.9c0.2-0.1,0.4-0.4,0.4-0.6v-0.3c0-0.3-0.1-0.5-0.4-0.6l-5-2.9L13.3,12L16.6,15.7z M12.5,11.1l3-3.4L4.4,1.1
|
||
C4.2,1,4,1,3.8,1.1L12.5,11.1z M12.5,13L3.8,23c0.2,0.1,0.4,0.1,0.6,0l11.1-6.5L12.5,13z M3,2.1v19.8l8.7-9.9L3,2.1z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-6 order-lg-1">
|
||
<div class="position-relative mx-auto" data-aos="fade-up">
|
||
<!-- Mobile Device -->
|
||
<figure class="device-mobile mx-auto">
|
||
<div class="device-mobile-frame">
|
||
<img class="device-mobile-img" src="../assets/img/407x867/img3.jpg" alt="Image Description">
|
||
</div>
|
||
</figure>
|
||
<!-- End Mobile Device -->
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute top-50 start-50 translate-middle zi-n1" style="width: 25rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/shape-1.svg" alt="SVG">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
|
||
<!-- Features -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-t-2 content-space-t-lg-3 content-space-b-lg-2">
|
||
<div class="row justify-content-lg-between align-items-lg-center">
|
||
<div class="col-lg-5 mb-9 mb-lg-0">
|
||
<!-- Heading -->
|
||
<div class="mb-4">
|
||
<h2>Get paid and use the cash. All with Front Pay.</h2>
|
||
<p>When you receive money it's added to your Front Pay Cash card that lives in the Wallet app.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-soft-bg-dark list-checked-lg">
|
||
<li class="list-checked-item">When you pay with a debit or credit card, Front Pay doesn't keep transaction information that can be tied back to you.</li>
|
||
<li class="list-checked-item">When you use Front Pay Cash, information is stored only for troubleshooting.</li>
|
||
<li class="list-checked-item">You can also add your student ID card to Front Wallet to access places like your dorm and the library.</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-6">
|
||
<div class="position-relative mx-auto" data-aos="fade-up">
|
||
<!-- Mobile Device -->
|
||
<figure class="device-mobile mx-auto">
|
||
<div class="device-mobile-frame">
|
||
<img class="device-mobile-img" src="../assets/img/407x867/img1.jpg" alt="Image Description">
|
||
</div>
|
||
</figure>
|
||
<!-- End Mobile Device -->
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute top-50 start-50 translate-middle zi-n1" style="width: 25rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/shape-4.svg" alt="SVG">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js7" role="tabpanel" aria-labelledby="nav-jsTab7">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<script src="../node_modules/fslightbox/index.js"></script>
|
||
</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>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab8" href="#nav-js8" data-bs-toggle="pill" data-bs-target="#nav-js8" role="tab" aria-controls="nav-js8" aria-selected="false">JS</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">
|
||
<!-- Features -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-5">
|
||
<h2>Simple and affordable.<br>Pay as you go.</h2>
|
||
<p>From boarding passes to movie tickets, there's pretty much nothing you can't store with Front Pay. Plus, you can take your money further with exclusive offers, discounts, and even reminders to use your loyalty card when you enter the store.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Fancybox -->
|
||
<div class="text-center mb-10">
|
||
<a class="video-player btn btn-outline-primary" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
|
||
<i class="bi-play-circle-fill me-1"></i> Watch and learn how it works
|
||
</a>
|
||
</div>
|
||
<!-- End Fancybox -->
|
||
|
||
<div class="w-lg-75 mx-lg-auto mb-10">
|
||
<div class="row justify-content-md-center">
|
||
<div class="col-sm-4 mb-5 mb-sm-0">
|
||
<div class="text-center px-sm-4">
|
||
<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="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM12 7C10.3 7 9 8.3 9 10C9 11.7 10.3 13 12 13C13.7 13 15 11.7 15 10C15 8.3 13.7 7 12 7Z" fill="#035A4B"/>
|
||
<path d="M12 22C14.6 22 17 21 18.7 19.4C17.9 16.9 15.2 15 12 15C8.8 15 6.09999 16.9 5.29999 19.4C6.99999 21 9.4 22 12 22Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4>Create an account</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-4 mb-5 mb-sm-0">
|
||
<div class="text-center px-sm-4">
|
||
<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="M20 19.725V18.725C20 18.125 19.6 17.725 19 17.725H5C4.4 17.725 4 18.125 4 18.725V19.725H3C2.4 19.725 2 20.125 2 20.725V21.725H22V20.725C22 20.125 21.6 19.725 21 19.725H20Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M22 6.725V7.725C22 8.325 21.6 8.725 21 8.725H18C18.6 8.725 19 9.125 19 9.725C19 10.325 18.6 10.725 18 10.725V15.725C18.6 15.725 19 16.125 19 16.725V17.725H15V16.725C15 16.125 15.4 15.725 16 15.725V10.725C15.4 10.725 15 10.325 15 9.725C15 9.125 15.4 8.725 16 8.725H13C13.6 8.725 14 9.125 14 9.725C14 10.325 13.6 10.725 13 10.725V15.725C13.6 15.725 14 16.125 14 16.725V17.725H10V16.725C10 16.125 10.4 15.725 11 15.725V10.725C10.4 10.725 10 10.325 10 9.725C10 9.125 10.4 8.725 11 8.725H8C8.6 8.725 9 9.125 9 9.725C9 10.325 8.6 10.725 8 10.725V15.725C8.6 15.725 9 16.125 9 16.725V17.725H5V16.725C5 16.125 5.4 15.725 6 15.725V10.725C5.4 10.725 5 10.325 5 9.725C5 9.125 5.4 8.725 6 8.725H3C2.4 8.725 2 8.325 2 7.725V6.725L11 2.225C11.6 1.925 12.4 1.925 13.1 2.225L22 6.725ZM12 3.725C11.2 3.725 10.5 4.425 10.5 5.225C10.5 6.025 11.2 6.725 12 6.725C12.8 6.725 13.5 6.025 13.5 5.225C13.5 4.425 12.8 3.725 12 3.725Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4>Link your bank account</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-4">
|
||
<div class="text-center px-sm-4">
|
||
<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" 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>
|
||
<h4>Your account is validated</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<div class="mx-auto" style="max-width: 25rem;" data-aos="fade-up">
|
||
<img class="img-fluid" src="../assets/svg/illustrations/visa-card.svg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html8" role="tabpanel" aria-labelledby="nav-htmlTab8">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Features -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-5">
|
||
<h2>Simple and affordable.<br>Pay as you go.</h2>
|
||
<p>From boarding passes to movie tickets, there's pretty much nothing you can't store with Front Pay. Plus, you can take your money further with exclusive offers, discounts, and even reminders to use your loyalty card when you enter the store.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Fancybox -->
|
||
<div class="text-center mb-10">
|
||
<a class="video-player btn btn-outline-primary" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
|
||
<i class="bi-play-circle-fill me-1"></i> Watch and learn how it works
|
||
</a>
|
||
</div>
|
||
<!-- End Fancybox -->
|
||
|
||
<div class="w-lg-75 mx-lg-auto mb-10">
|
||
<div class="row justify-content-md-center">
|
||
<div class="col-sm-4 mb-5 mb-sm-0">
|
||
<div class="text-center px-sm-4">
|
||
<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="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM12 7C10.3 7 9 8.3 9 10C9 11.7 10.3 13 12 13C13.7 13 15 11.7 15 10C15 8.3 13.7 7 12 7Z" fill="#035A4B"/>
|
||
<path d="M12 22C14.6 22 17 21 18.7 19.4C17.9 16.9 15.2 15 12 15C8.8 15 6.09999 16.9 5.29999 19.4C6.99999 21 9.4 22 12 22Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4>Create an account</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-4 mb-5 mb-sm-0">
|
||
<div class="text-center px-sm-4">
|
||
<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="M20 19.725V18.725C20 18.125 19.6 17.725 19 17.725H5C4.4 17.725 4 18.125 4 18.725V19.725H3C2.4 19.725 2 20.125 2 20.725V21.725H22V20.725C22 20.125 21.6 19.725 21 19.725H20Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M22 6.725V7.725C22 8.325 21.6 8.725 21 8.725H18C18.6 8.725 19 9.125 19 9.725C19 10.325 18.6 10.725 18 10.725V15.725C18.6 15.725 19 16.125 19 16.725V17.725H15V16.725C15 16.125 15.4 15.725 16 15.725V10.725C15.4 10.725 15 10.325 15 9.725C15 9.125 15.4 8.725 16 8.725H13C13.6 8.725 14 9.125 14 9.725C14 10.325 13.6 10.725 13 10.725V15.725C13.6 15.725 14 16.125 14 16.725V17.725H10V16.725C10 16.125 10.4 15.725 11 15.725V10.725C10.4 10.725 10 10.325 10 9.725C10 9.125 10.4 8.725 11 8.725H8C8.6 8.725 9 9.125 9 9.725C9 10.325 8.6 10.725 8 10.725V15.725C8.6 15.725 9 16.125 9 16.725V17.725H5V16.725C5 16.125 5.4 15.725 6 15.725V10.725C5.4 10.725 5 10.325 5 9.725C5 9.125 5.4 8.725 6 8.725H3C2.4 8.725 2 8.325 2 7.725V6.725L11 2.225C11.6 1.925 12.4 1.925 13.1 2.225L22 6.725ZM12 3.725C11.2 3.725 10.5 4.425 10.5 5.225C10.5 6.025 11.2 6.725 12 6.725C12.8 6.725 13.5 6.025 13.5 5.225C13.5 4.425 12.8 3.725 12 3.725Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4>Link your bank account</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-4">
|
||
<div class="text-center px-sm-4">
|
||
<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" 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>
|
||
<h4>Your account is validated</h4>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<div class="mx-auto" style="max-width: 25rem;" data-aos="fade-up">
|
||
<img class="img-fluid" src="../assets/svg/illustrations/visa-card.svg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js8" role="tabpanel" aria-labelledby="nav-jsTab8">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<script src="../node_modules/fslightbox/index.js"></script>
|
||
</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">
|
||
<!-- Features -->
|
||
<div class="container content-space-2">
|
||
<div class="row align-items-md-center">
|
||
<div class="col-md-7 mb-7 mb-md-0">
|
||
<div class="w-sm-75 mx-sm-auto" data-aos="fade-up">
|
||
<!-- Card -->
|
||
<div class="card bg-soft-primary text-center">
|
||
<div class="card-body">
|
||
<div class="w-75 mx-auto">
|
||
<h3>Choose a workflow, or make your own with Front Software</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-75 mx-auto">
|
||
<img class="img-fluid rounded-top-2" src="../assets/img/407x472/img7.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-5 order-md-2">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2 class="mb-3">Lightning-fast development with pre-built solutions</h2>
|
||
<p>Every team has a unique process for shipping software. Use an out-of-the-box workflow, or create one to match the way your team works.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-soft-bg-primary list-checked-lg">
|
||
<li class="list-checked-item">Extensive API documentation</li>
|
||
<li class="list-checked-item">Customizable & open source</li>
|
||
<li class="list-checked-item">Continiously improved</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Features -->
|
||
|
||
<!-- Features -->
|
||
<div class="container content-space-2">
|
||
<div class="row align-items-md-center">
|
||
<div class="col-md-7 order-md-2 mb-7 mb-md-0">
|
||
<div class="w-sm-75 mx-sm-auto" data-aos="fade-up">
|
||
<!-- Card -->
|
||
<div class="card bg-soft-success text-center">
|
||
<div class="card-body">
|
||
<div class="w-75 mx-auto">
|
||
<h3>Integrate with the tools and workflow you already use</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-75 mx-auto">
|
||
<img class="img-fluid rounded-top-2" src="../assets/img/407x472/img8.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-5">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2 class="mb-3">The best software teams ship early and often</h2>
|
||
<p>Front Software is built for every member of your software team to plan, track, and release great software.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-soft-bg-primary list-checked-lg">
|
||
<li class="list-checked-item">Knowledge management</li>
|
||
<li class="list-checked-item">Development workflow</li>
|
||
<li class="list-checked-item">Continuous integration</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Features -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html9" role="tabpanel" aria-labelledby="nav-htmlTab9">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Features -->
|
||
<div class="container content-space-t-2 content-space-b-2 content-space-b-lg-3">
|
||
<div class="row align-items-md-center">
|
||
<div class="col-md-7 mb-7 mb-md-0">
|
||
<div class="w-sm-75 mx-sm-auto" data-aos="fade-up">
|
||
<!-- Card -->
|
||
<div class="card bg-soft-primary text-center">
|
||
<div class="card-body">
|
||
<div class="w-75 mx-auto">
|
||
<h3>Choose a workflow, or make your own with Front Software</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-75 mx-auto">
|
||
<img class="img-fluid rounded-top-2" src="../assets/img/407x472/img7.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-5 order-md-2">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2 class="mb-3">Lightning-fast development with pre-built solutions</h2>
|
||
<p>Every team has a unique process for shipping software. Use an out-of-the-box workflow, or create one to match the way your team works.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-soft-bg-primary list-checked-lg">
|
||
<li class="list-checked-item">Extensive API documentation</li>
|
||
<li class="list-checked-item">Customizable & open source</li>
|
||
<li class="list-checked-item">Continiously improved</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Features -->
|
||
|
||
<!-- Features -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<div class="row align-items-md-center">
|
||
<div class="col-md-7 order-md-2 mb-7 mb-md-0">
|
||
<div class="w-sm-75 mx-sm-auto" data-aos="fade-up">
|
||
<!-- Card -->
|
||
<div class="card bg-soft-success text-center">
|
||
<div class="card-body">
|
||
<div class="w-75 mx-auto">
|
||
<h3>Integrate with the tools and workflow you already use</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-75 mx-auto">
|
||
<img class="img-fluid rounded-top-2" src="../assets/img/407x472/img8.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-5">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2 class="mb-3">The best software teams ship early and often</h2>
|
||
<p>Front Software is built for every member of your software team to plan, track, and release great software.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-soft-bg-primary list-checked-lg">
|
||
<li class="list-checked-item">Knowledge management</li>
|
||
<li class="list-checked-item">Development workflow</li>
|
||
<li class="list-checked-item">Continuous integration</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Features -->
|
||
</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">
|
||
<!-- Features -->
|
||
<div class="position-relative">
|
||
<div class="container content-space-2">
|
||
<div class="row align-items-center">
|
||
<div class="col-12 col-lg-9 mb-7 mb-md-0">
|
||
<!-- Heading -->
|
||
<div class="w-md-65 mb-7">
|
||
<h2 class="h1">Front helps you make better property decisions</h2>
|
||
<p>Front has England's largest collection of street and suburb reviews, empowering you to find the right area for you to move to. With tens of thousands of local community topics and discussions, find the answers to all your questions about an area, or ask the locals.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-4 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<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 fill-rule="evenodd" clip-rule="evenodd" d="M6.5 3C5.67157 3 5 3.67157 5 4.5V6H3.5C2.67157 6 2 6.67157 2 7.5C2 8.32843 2.67157 9 3.5 9H5V19.5C5 20.3284 5.67157 21 6.5 21C7.32843 21 8 20.3284 8 19.5V9H20.5C21.3284 9 22 8.32843 22 7.5C22 6.67157 21.3284 6 20.5 6H8V4.5C8 3.67157 7.32843 3 6.5 3Z" fill="#035A4B"/>
|
||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M20.5 11H10V17.5C10 18.3284 10.6716 19 11.5 19H15.5C17.3546 19 19.0277 18.2233 20.2119 16.9775C20.1436 16.9922 20.0727 17 20 17C19.4477 17 19 16.5523 19 16V13C19 12.4477 19.4477 12 20 12C20.5523 12 21 12.4477 21 13V15.9657C21.6334 14.9626 22 13.7741 22 12.5C22 11.6716 21.3284 11 20.5 11Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4 class="card-title">Find homes for sale</h4>
|
||
<p class="card-text">Over 1 million+ homes for sale available on the website.</p>
|
||
<a class="card-link" href="#">Properties for sale <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<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="M21.7 18.9L18.6 15.8C17.9 16.9 16.9 17.9 15.8 18.6L18.9 21.7C19.3 22.1 19.9 22.1 20.3 21.7L21.7 20.3C22.1 19.9 22.1 19.3 21.7 18.9Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M11 20C6 20 2 16 2 11C2 6 6 2 11 2C16 2 20 6 20 11C20 16 16 20 11 20ZM11 4C7.1 4 4 7.1 4 11C4 14.9 7.1 18 11 18C14.9 18 18 14.9 18 11C18 7.1 14.9 4 11 4ZM8 11C8 9.3 9.3 8 11 8C11.6 8 12 7.6 12 7C12 6.4 11.6 6 11 6C8.2 6 6 8.2 6 11C6 11.6 6.4 12 7 12C7.6 12 8 11.6 8 11Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4 class="card-title">Find rental properties</h4>
|
||
<p class="card-text">Fina a home or apartment with 35+ filters and custom keyword search.</p>
|
||
<a class="card-link" href="#">Properties for rent <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<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="M18 22H6C5.4 22 5 21.6 5 21V8C6.6 6.4 7.4 5.6 9 4H15C16.6 5.6 17.4 6.4 19 8V21C19 21.6 18.6 22 18 22ZM12 5.5C11.2 5.5 10.5 6.2 10.5 7C10.5 7.8 11.2 8.5 12 8.5C12.8 8.5 13.5 7.8 13.5 7C13.5 6.2 12.8 5.5 12 5.5Z" fill="#035A4B"/>
|
||
<path d="M12 7C11.4 7 11 6.6 11 6V3C11 2.4 11.4 2 12 2C12.6 2 13 2.4 13 3V6C13 6.6 12.6 7 12 7ZM15.1 10.6C15.1 10.5 15.1 10.4 15 10.3C14.9 10.2 14.8 10.2 14.7 10.2C14.6 10.2 14.5 10.2 14.4 10.3C14.3 10.4 14.3 10.5 14.2 10.6L9 19.1C8.9 19.2 8.89999 19.3 8.89999 19.4C8.89999 19.5 8.9 19.6 9 19.7C9.1 19.8 9.2 19.8 9.3 19.8C9.5 19.8 9.6 19.7 9.8 19.5L15 11.1C15 10.8 15.1 10.7 15.1 10.6ZM11 11.6C10.9 11.3 10.8 11.1 10.6 10.8C10.4 10.6 10.2 10.4 10 10.3C9.8 10.2 9.50001 10.1 9.10001 10.1C8.60001 10.1 8.3 10.2 8 10.4C7.7 10.6 7.49999 10.9 7.39999 11.2C7.29999 11.6 7.2 12 7.2 12.6C7.2 13.1 7.3 13.5 7.5 13.9C7.7 14.3 7.9 14.5 8.2 14.7C8.5 14.9 8.8 14.9 9.2 14.9C9.8 14.9 10.3 14.7 10.6 14.3C11 13.9 11.1 13.3 11.1 12.5C11.1 12.3 11.1 11.9 11 11.6ZM9.8 13.8C9.7 14.1 9.5 14.2 9.2 14.2C9 14.2 8.8 14.1 8.7 14C8.6 13.9 8.5 13.7 8.5 13.5C8.5 13.3 8.39999 13 8.39999 12.6C8.39999 12.2 8.4 11.9 8.5 11.7C8.5 11.5 8.6 11.3 8.7 11.2C8.8 11.1 9 11 9.2 11C9.5 11 9.7 11.1 9.8 11.4C9.9 11.7 10 12 10 12.6C10 13.2 9.9 13.6 9.8 13.8ZM16.5 16.1C16.4 15.8 16.3 15.6 16.1 15.4C15.9 15.2 15.7 15 15.5 14.9C15.3 14.8 15 14.7 14.6 14.7C13.9 14.7 13.4 14.9 13.1 15.3C12.8 15.7 12.6 16.3 12.6 17.1C12.6 17.6 12.7 18 12.9 18.4C13.1 18.7 13.3 19 13.6 19.2C13.9 19.4 14.2 19.5 14.6 19.5C15.2 19.5 15.7 19.3 16 18.9C16.4 18.5 16.5 17.9 16.5 17.1C16.7 16.8 16.6 16.4 16.5 16.1ZM15.3 18.4C15.2 18.7 15 18.8 14.7 18.8C14.4 18.8 14.2 18.7 14.1 18.4C14 18.1 13.9 17.7 13.9 17.2C13.9 16.8 13.9 16.5 14 16.3C14.1 16.1 14.1 15.9 14.2 15.8C14.3 15.7 14.5 15.6 14.7 15.6C15 15.6 15.2 15.7 15.3 16C15.4 16.2 15.5 16.6 15.5 17.2C15.5 17.7 15.4 18.1 15.3 18.4Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4 class="card-title">Sell properties</h4>
|
||
<p class="card-text">Wanting to find a sold property price or see what sold on the weekend?</p>
|
||
<a class="card-link" href="#">Sell properties <i class="fas bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<div class="banner-half-middle-x bg-img-start d-none d-md-block" style="background-image: url(../assets/img/900x900/img22.jpg);"></div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html10" role="tabpanel" aria-labelledby="nav-htmlTab10">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Features -->
|
||
<div class="position-relative">
|
||
<div class="container content-space-lg-3">
|
||
<div class="row align-items-center">
|
||
<div class="col-12 col-lg-9 mb-7 mb-md-0">
|
||
<!-- Heading -->
|
||
<div class="w-md-65 mb-7">
|
||
<h2 class="h1">Front helps you make better property decisions</h2>
|
||
<p>Front has England's largest collection of street and suburb reviews, empowering you to find the right area for you to move to. With tens of thousands of local community topics and discussions, find the answers to all your questions about an area, or ask the locals.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-4 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<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 fill-rule="evenodd" clip-rule="evenodd" d="M6.5 3C5.67157 3 5 3.67157 5 4.5V6H3.5C2.67157 6 2 6.67157 2 7.5C2 8.32843 2.67157 9 3.5 9H5V19.5C5 20.3284 5.67157 21 6.5 21C7.32843 21 8 20.3284 8 19.5V9H20.5C21.3284 9 22 8.32843 22 7.5C22 6.67157 21.3284 6 20.5 6H8V4.5C8 3.67157 7.32843 3 6.5 3Z" fill="#035A4B"/>
|
||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M20.5 11H10V17.5C10 18.3284 10.6716 19 11.5 19H15.5C17.3546 19 19.0277 18.2233 20.2119 16.9775C20.1436 16.9922 20.0727 17 20 17C19.4477 17 19 16.5523 19 16V13C19 12.4477 19.4477 12 20 12C20.5523 12 21 12.4477 21 13V15.9657C21.6334 14.9626 22 13.7741 22 12.5C22 11.6716 21.3284 11 20.5 11Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4 class="card-title">Find homes for sale</h4>
|
||
<p class="card-text">Over 1 million+ homes for sale available on the website.</p>
|
||
<a class="card-link" href="#">Properties for sale <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<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="M21.7 18.9L18.6 15.8C17.9 16.9 16.9 17.9 15.8 18.6L18.9 21.7C19.3 22.1 19.9 22.1 20.3 21.7L21.7 20.3C22.1 19.9 22.1 19.3 21.7 18.9Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M11 20C6 20 2 16 2 11C2 6 6 2 11 2C16 2 20 6 20 11C20 16 16 20 11 20ZM11 4C7.1 4 4 7.1 4 11C4 14.9 7.1 18 11 18C14.9 18 18 14.9 18 11C18 7.1 14.9 4 11 4ZM8 11C8 9.3 9.3 8 11 8C11.6 8 12 7.6 12 7C12 6.4 11.6 6 11 6C8.2 6 6 8.2 6 11C6 11.6 6.4 12 7 12C7.6 12 8 11.6 8 11Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4 class="card-title">Find rental properties</h4>
|
||
<p class="card-text">Fina a home or apartment with 35+ filters and custom keyword search.</p>
|
||
<a class="card-link" href="#">Properties for rent <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<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="M18 22H6C5.4 22 5 21.6 5 21V8C6.6 6.4 7.4 5.6 9 4H15C16.6 5.6 17.4 6.4 19 8V21C19 21.6 18.6 22 18 22ZM12 5.5C11.2 5.5 10.5 6.2 10.5 7C10.5 7.8 11.2 8.5 12 8.5C12.8 8.5 13.5 7.8 13.5 7C13.5 6.2 12.8 5.5 12 5.5Z" fill="#035A4B"/>
|
||
<path d="M12 7C11.4 7 11 6.6 11 6V3C11 2.4 11.4 2 12 2C12.6 2 13 2.4 13 3V6C13 6.6 12.6 7 12 7ZM15.1 10.6C15.1 10.5 15.1 10.4 15 10.3C14.9 10.2 14.8 10.2 14.7 10.2C14.6 10.2 14.5 10.2 14.4 10.3C14.3 10.4 14.3 10.5 14.2 10.6L9 19.1C8.9 19.2 8.89999 19.3 8.89999 19.4C8.89999 19.5 8.9 19.6 9 19.7C9.1 19.8 9.2 19.8 9.3 19.8C9.5 19.8 9.6 19.7 9.8 19.5L15 11.1C15 10.8 15.1 10.7 15.1 10.6ZM11 11.6C10.9 11.3 10.8 11.1 10.6 10.8C10.4 10.6 10.2 10.4 10 10.3C9.8 10.2 9.50001 10.1 9.10001 10.1C8.60001 10.1 8.3 10.2 8 10.4C7.7 10.6 7.49999 10.9 7.39999 11.2C7.29999 11.6 7.2 12 7.2 12.6C7.2 13.1 7.3 13.5 7.5 13.9C7.7 14.3 7.9 14.5 8.2 14.7C8.5 14.9 8.8 14.9 9.2 14.9C9.8 14.9 10.3 14.7 10.6 14.3C11 13.9 11.1 13.3 11.1 12.5C11.1 12.3 11.1 11.9 11 11.6ZM9.8 13.8C9.7 14.1 9.5 14.2 9.2 14.2C9 14.2 8.8 14.1 8.7 14C8.6 13.9 8.5 13.7 8.5 13.5C8.5 13.3 8.39999 13 8.39999 12.6C8.39999 12.2 8.4 11.9 8.5 11.7C8.5 11.5 8.6 11.3 8.7 11.2C8.8 11.1 9 11 9.2 11C9.5 11 9.7 11.1 9.8 11.4C9.9 11.7 10 12 10 12.6C10 13.2 9.9 13.6 9.8 13.8ZM16.5 16.1C16.4 15.8 16.3 15.6 16.1 15.4C15.9 15.2 15.7 15 15.5 14.9C15.3 14.8 15 14.7 14.6 14.7C13.9 14.7 13.4 14.9 13.1 15.3C12.8 15.7 12.6 16.3 12.6 17.1C12.6 17.6 12.7 18 12.9 18.4C13.1 18.7 13.3 19 13.6 19.2C13.9 19.4 14.2 19.5 14.6 19.5C15.2 19.5 15.7 19.3 16 18.9C16.4 18.5 16.5 17.9 16.5 17.1C16.7 16.8 16.6 16.4 16.5 16.1ZM15.3 18.4C15.2 18.7 15 18.8 14.7 18.8C14.4 18.8 14.2 18.7 14.1 18.4C14 18.1 13.9 17.7 13.9 17.2C13.9 16.8 13.9 16.5 14 16.3C14.1 16.1 14.1 15.9 14.2 15.8C14.3 15.7 14.5 15.6 14.7 15.6C15 15.6 15.2 15.7 15.3 16C15.4 16.2 15.5 16.6 15.5 17.2C15.5 17.7 15.4 18.1 15.3 18.4Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
<h4 class="card-title">Sell properties</h4>
|
||
<p class="card-text">Wanting to find a sold property price or see what sold on the weekend?</p>
|
||
<a class="card-link" href="#">Sell properties <i class="fas bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<div class="banner-half-middle-x bg-img-start d-none d-md-block" style="background-image: url(../assets/img/900x900/img22.jpg);"></div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</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 Implementing Plugins -->
|
||
<script src="../assets/js/vendor.min.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<script src="../assets/js/theme.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF HEADER
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
|
||
|
||
// INITIALIZATION OF 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>
|