1712 lines
83 KiB
HTML
1712 lines
83 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>Forms: Feedback - 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 ">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavFeaturesCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavFeaturesCollapse">Features</a>
|
|
|
|
<div id="snippetsSidebarNavFeaturesCollapse" class="nav-collapse collapse ">
|
|
<a class="nav-link " href="features-general.html">General</a>
|
|
<a class="nav-link " href="features-stats.html">Stats</a>
|
|
<a class="nav-link " href="features-step.html">Step</a>
|
|
<a class="nav-link " href="features-navs.html">Navs (Tabs)</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " 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 active" 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">Forms: Feedback</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">
|
|
<!-- Form -->
|
|
<form id="applyForJob" class="js-validate">
|
|
<div class="mb-5">
|
|
<h3>Submit your application</h3>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="resumeCVCareersForm" class="col-sm-4 col-form-label">Resume/CV</label>
|
|
<div class="col-sm-8">
|
|
<input type="file" class="js-file-attach form-control" id="resumeCVCareersForm" name="resumeCVCareersFormName">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="fullNameCareersForm" class="col-sm-4 col-form-label">Full name</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="fullNameCareersForm" name="fullNameCareersFormName" placeholder="Jacob Williams" aria-label="Jacob Williams">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="emailCareersForm" class="col-sm-4 col-form-label">Email</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="emailCareersForm" name="emailCareersFormName" placeholder="example@site.com" aria-label="example@site.com">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="phoneCareersForm" class="col-sm-4 col-form-label">Phone</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="phoneCareersForm" name="phoneCareersFormName" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="currentCompanyCareersForm" class="col-sm-4 col-form-label">Current company</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="currentCompanyCareersForm" name="currentCompanyCareersFormName" placeholder="Google" aria-label="Google">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<hr class="my-5 my-sm-10">
|
|
|
|
<div class="mb-5">
|
|
<h3>Links</h3>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="linkedinURLCareersForm" class="col-sm-4 col-form-label">LinkedIn URL</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="linkedinURLCareersForm" name="linkedinURLCareersFormName" placeholder="www.linkedin.com/jacob" aria-label="www.linkedin.com/jacob">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="twitterURLCareersForm" class="col-sm-4 col-form-label">Twitter URL</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="twitterURLCareersForm" name="twitterURLCareersFormName" placeholder="www.twitter.com/jacob" aria-label="www.twitter.com/jacob">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="githubURLCareersForm" class="col-sm-4 col-form-label">GitHub URL</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="githubURLCareersForm" name="githubURLCareersFormName" placeholder="www.github.com/jacob" aria-label="www.github.com/jacob">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="portfolioURLCareersForm" class="col-sm-4 col-form-label">Portfolio URL</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="portfolioURLCareersForm" name="portfolioURLCareersFormName" placeholder="www.mysite.com/jacob" aria-label="www.mysite.com/jacob">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="otherWebsiteCareersForm" class="col-sm-4 col-form-label">Other website</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="otherWebsiteCareersForm" name="otherWebsiteCareersFormName" placeholder="www.site.com" aria-label="www.site.com">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<hr class="my-5 my-sm-10">
|
|
|
|
<div class="mb-5">
|
|
<h3>Before sending your application, please let us know...</h3>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="desiredSalaryCareersForm" class="col-sm-4 col-form-label">Desired Salary</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="desiredSalaryCareersForm" name="desiredSalaryCareersFormName" placeholder="Type your response" aria-label="Type your response">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="availableStartDateCareersForm" class="col-sm-4 col-form-label">Available Start Date</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="availableStartDateCareersForm" name="availableStartDateCareersFormName" placeholder="Type your response" aria-label="Type your response">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<hr class="my-5 my-sm-10">
|
|
|
|
<div class="mb-5">
|
|
<h3>Additional information</h3>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div class="mb-3">
|
|
<label for="additionalInfoCareersForm" class="form-label visually-hidden">Additional information</label>
|
|
<textarea class="form-control" name="additionalInfoCareersFormName" id="additionalInfoCareersForm" placeholder="Add a cover letter or anything else you want to share." aria-label="Add a cover letter or anything else you want to share." rows="5"></textarea>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-grid text-center mt-7">
|
|
<a class="btn btn-primary" href="#">Submit application</a>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Form -->
|
|
<form id="applyForJob" class="js-validate">
|
|
<div class="mb-5">
|
|
<h3>Submit your application</h3>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="resumeCVCareersForm" class="col-sm-4 col-form-label">Resume/CV</label>
|
|
<div class="col-sm-8">
|
|
<input type="file" class="js-file-attach form-control" id="resumeCVCareersForm" name="resumeCVCareersFormName">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="fullNameCareersForm" class="col-sm-4 col-form-label">Full name</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="fullNameCareersForm" name="fullNameCareersFormName" placeholder="Jacob Williams" aria-label="Jacob Williams">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="emailCareersForm" class="col-sm-4 col-form-label">Email</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="emailCareersForm" name="emailCareersFormName" placeholder="example@site.com" aria-label="example@site.com">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="phoneCareersForm" class="col-sm-4 col-form-label">Phone</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="phoneCareersForm" name="phoneCareersFormName" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="currentCompanyCareersForm" class="col-sm-4 col-form-label">Current company</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="currentCompanyCareersForm" name="currentCompanyCareersFormName" placeholder="Google" aria-label="Google">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<hr class="my-5 my-sm-10">
|
|
|
|
<div class="mb-5">
|
|
<h3>Links</h3>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="linkedinURLCareersForm" class="col-sm-4 col-form-label">LinkedIn URL</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="linkedinURLCareersForm" name="linkedinURLCareersFormName" placeholder="www.linkedin.com/jacob" aria-label="www.linkedin.com/jacob">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="twitterURLCareersForm" class="col-sm-4 col-form-label">Twitter URL</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="twitterURLCareersForm" name="twitterURLCareersFormName" placeholder="www.twitter.com/jacob" aria-label="www.twitter.com/jacob">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="githubURLCareersForm" class="col-sm-4 col-form-label">GitHub URL</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="githubURLCareersForm" name="githubURLCareersFormName" placeholder="www.github.com/jacob" aria-label="www.github.com/jacob">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="portfolioURLCareersForm" class="col-sm-4 col-form-label">Portfolio URL</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="portfolioURLCareersForm" name="portfolioURLCareersFormName" placeholder="www.mysite.com/jacob" aria-label="www.mysite.com/jacob">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="otherWebsiteCareersForm" class="col-sm-4 col-form-label">Other website</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="otherWebsiteCareersForm" name="otherWebsiteCareersFormName" placeholder="www.site.com" aria-label="www.site.com">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<hr class="my-5 my-sm-10">
|
|
|
|
<div class="mb-5">
|
|
<h3>Before sending your application, please let us know...</h3>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="desiredSalaryCareersForm" class="col-sm-4 col-form-label">Desired Salary</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="desiredSalaryCareersForm" name="desiredSalaryCareersFormName" placeholder="Type your response" aria-label="Type your response">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="availableStartDateCareersForm" class="col-sm-4 col-form-label">Available Start Date</label>
|
|
<div class="col-sm-8">
|
|
<input type="password" class="form-control" id="availableStartDateCareersForm" name="availableStartDateCareersFormName" placeholder="Type your response" aria-label="Type your response">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<hr class="my-5 my-sm-10">
|
|
|
|
<div class="mb-5">
|
|
<h3>Additional information</h3>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div class="mb-3">
|
|
<label for="additionalInfoCareersForm" class="form-label visually-hidden">Additional information</label>
|
|
<textarea class="form-control" name="additionalInfoCareersFormName" id="additionalInfoCareersForm" placeholder="Add a cover letter or anything else you want to share." aria-label="Add a cover letter or anything else you want to share." rows="5"></textarea>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-grid text-center mt-7">
|
|
<a class="btn btn-primary" href="#">Submit application</a>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</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">
|
|
<!-- Form -->
|
|
<div class="container content-space-1">
|
|
<!-- Form -->
|
|
<div class="mx-auto" style="max-width: 35rem;">
|
|
<!-- Form -->
|
|
<form>
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="hireUsFormFirstName">First name</label>
|
|
<input type="text" class="form-control form-control-lg" name="hireUsFormNameFirstName" id="hireUsFormFirstName" placeholder="First name" aria-label="First name">
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="hireUsFormLasttName">Last name</label>
|
|
<input type="text" class="form-control form-control-lg" name="hireUsFormNameLastName" id="hireUsFormLasttName" placeholder="Last name" aria-label="Last name">
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="hireUsFormWorkEmail">Email address</label>
|
|
<input type="email" class="form-control form-control-lg" name="hireUsFormNameWorkEmail" id="hireUsFormWorkEmail" placeholder="email@site.com" aria-label="email@site.com">
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="hireUsFormCompanyName">Company name <span class="form-label-secondary">(Optional)</span></label>
|
|
<input type="text" class="form-control form-control-lg" name="hireUsFormNameCompanyName" id="hireUsFormCompanyName" placeholder="Htmlstream" aria-label="Htmlstream">
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Select -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="hireUsFormBudget">Budget</label>
|
|
<select name="hireUsFormNameBudget" id="hireUsFormBudget" class="form-select form-select-lg" aria-label="Tell us about your budget">
|
|
<option selected>Tell us about your budget</option>
|
|
<option value="1">$1,000 - $10,000</option>
|
|
<option value="2">$10,000 - $20,000</option>
|
|
<option value="3">$20,000 - $30,000</option>
|
|
<option value="4">$30,000 - $40,000</option>
|
|
<option value="5">$40,000 - $50,000</option>
|
|
<option value="6">$50,000 - and more</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="hireUsFormDetails">Details</label>
|
|
<textarea class="form-control form-control-lg" name="hireUsFormNameDetails" id="hireUsFormDetails" placeholder="Tell us about your project" aria-label="Tell us about your project" rows="4"></textarea>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-grid mb-2">
|
|
<button type="submit" class="btn btn-primary btn-lg">Send inquiry</button>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<span class="form-text">We'll get back to you in 1-2 business days.</span>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Form -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<!-- Form -->
|
|
<div class="mx-auto" style="max-width: 35rem;">
|
|
<!-- Form -->
|
|
<form>
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="hireUsFormFirstName">First name</label>
|
|
<input type="text" class="form-control form-control-lg" name="hireUsFormNameFirstName" id="hireUsFormFirstName" placeholder="First name" aria-label="First name">
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="hireUsFormLasttName">Last name</label>
|
|
<input type="text" class="form-control form-control-lg" name="hireUsFormNameLastName" id="hireUsFormLasttName" placeholder="Last name" aria-label="Last name">
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="hireUsFormWorkEmail">Email address</label>
|
|
<input type="email" class="form-control form-control-lg" name="hireUsFormNameWorkEmail" id="hireUsFormWorkEmail" placeholder="email@site.com" aria-label="email@site.com">
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="hireUsFormCompanyName">Company name <span class="form-label-secondary">(Optional)</span></label>
|
|
<input type="text" class="form-control form-control-lg" name="hireUsFormNameCompanyName" id="hireUsFormCompanyName" placeholder="Htmlstream" aria-label="Htmlstream">
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Select -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="hireUsFormBudget">Budget</label>
|
|
<select name="hireUsFormNameBudget" id="hireUsFormBudget" class="form-select form-select-lg" aria-label="Tell us about your budget">
|
|
<option selected>Tell us about your budget</option>
|
|
<option value="1">$1,000 - $10,000</option>
|
|
<option value="2">$10,000 - $20,000</option>
|
|
<option value="3">$20,000 - $30,000</option>
|
|
<option value="4">$30,000 - $40,000</option>
|
|
<option value="5">$40,000 - $50,000</option>
|
|
<option value="6">$50,000 - and more</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="hireUsFormDetails">Details</label>
|
|
<textarea class="form-control form-control-lg" name="hireUsFormNameDetails" id="hireUsFormDetails" placeholder="Tell us about your project" aria-label="Tell us about your project" rows="4"></textarea>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-grid mb-2">
|
|
<button type="submit" class="btn btn-primary btn-lg">Send inquiry</button>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<span class="form-text">We'll get back to you in 1-2 business days.</span>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Form -->
|
|
</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">
|
|
<!-- Post a Comment -->
|
|
<div class="container content-space-1">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
|
<h2>Post a comment</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row justify-content-lg-center">
|
|
<div class="col-lg-8">
|
|
<!-- Card -->
|
|
<div class="card card-lg border shadow-none">
|
|
<div class="card-body">
|
|
<form>
|
|
<div class="d-grid gap-4">
|
|
<!-- Form -->
|
|
<div class="row">
|
|
<div class="col-sm-6 mb-4 mb-sm-0">
|
|
<label class="form-label" for="blogContactsFormFirstName">First name</label>
|
|
<input type="text" class="form-control form-control-lg" name="blogContactsFirstName" id="blogContactsFormFirstName" placeholder="First name" aria-label="First name">
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="blogContactsFormLasttName">Last name</label>
|
|
<input type="text" class="form-control form-control-lg" name="blogContactsLastName" id="blogContactsFormLasttName" placeholder="Last name" aria-label="Last name">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<span class="d-block">
|
|
<label class="form-label" for="blogContactsFormEmail">Your email</label>
|
|
<input type="email" class="form-control form-control-lg" name="blogContactsEmailName" id="blogContactsFormEmail" placeholder="email@site.com" aria-label="email@site.com">
|
|
</span>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<span class="d-block">
|
|
<label class="form-label" for="blogContactsFormComment">Comment</label>
|
|
<textarea class="form-control form-control-lg" id="blogContactsFormComment" name="blogContactsCommentName" placeholder="Leave your comment here..." aria-label="Leave your comment here..." rows="5"></textarea>
|
|
</span>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Post a Comment -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Post a Comment -->
|
|
<div class="container content-space-2">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
|
<h2>Post a comment</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row justify-content-lg-center">
|
|
<div class="col-lg-8">
|
|
<!-- Card -->
|
|
<div class="card card-lg border shadow-none">
|
|
<div class="card-body">
|
|
<form>
|
|
<div class="d-grid gap-4">
|
|
<!-- Form -->
|
|
<div class="row">
|
|
<div class="col-sm-6 mb-4 mb-sm-0">
|
|
<label class="form-label" for="blogContactsFormFirstName">First name</label>
|
|
<input type="text" class="form-control form-control-lg" name="blogContactsFirstName" id="blogContactsFormFirstName" placeholder="First name" aria-label="First name">
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="blogContactsFormLasttName">Last name</label>
|
|
<input type="text" class="form-control form-control-lg" name="blogContactsLastName" id="blogContactsFormLasttName" placeholder="Last name" aria-label="Last name">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<span class="d-block">
|
|
<label class="form-label" for="blogContactsFormEmail">Your email</label>
|
|
<input type="email" class="form-control form-control-lg" name="blogContactsEmailName" id="blogContactsFormEmail" placeholder="email@site.com" aria-label="email@site.com">
|
|
</span>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<span class="d-block">
|
|
<label class="form-label" for="blogContactsFormComment">Comment</label>
|
|
<textarea class="form-control form-control-lg" id="blogContactsFormComment" name="blogContactsCommentName" placeholder="Leave your comment here..." aria-label="Leave your comment here..." rows="5"></textarea>
|
|
</span>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Post a Comment -->
|
|
</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>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab4" href="#nav-js4" data-bs-toggle="pill" data-bs-target="#nav-js4" role="tab" aria-controls="nav-js4" aria-selected="false">JS</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">
|
|
<!-- Content -->
|
|
<div class="container content-space-1">
|
|
<div class="w-lg-75 mx-lg-auto">
|
|
<!-- Card -->
|
|
<div class="card card-bordered mb-10">
|
|
<div class="card-body">
|
|
<div class="row align-items-sm-center">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<h5 class="card-title text-uppercase">
|
|
<i class="bi-lightning-charge-fill me-1"></i> Autofill application
|
|
</h5>
|
|
<p class="card-text small">Save time by importing your resume.</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<!-- Dropdown -->
|
|
<div class="dropdown">
|
|
<a class="btn btn-primary" href="#" id="jobImportResumeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-dropdown-animation>
|
|
Import resume from <i class="bi-chevron-down small ms-1"></i>
|
|
</a>
|
|
|
|
<div class="dropdown-menu" aria-labelledby="jobImportResumeDropdown">
|
|
<a class="dropdown-item" href="#">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/vendor/bootstrap-icons/icons/laptop.svg" alt="Image Description"> My Computer
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/dropbox-icon.svg" alt="Image Description"> Dropbox
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/google-drive-icon.svg" alt="Image Description"> Google Drive
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Dropdown -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Form -->
|
|
<form>
|
|
<div class="mb-4">
|
|
<h3>Personal information</h3>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="applyForJobFirstName">First name</label>
|
|
<input type="text" class="form-control" name="applyForJobNameFirstName" id="applyForJobFirstName" placeholder="First name" aria-label="First name">
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="applyForJobLasttName">Last name</label>
|
|
<input type="text" class="form-control" name="applyForJobNameLastName" id="applyForJobLasttName" placeholder="Last name" aria-label="Last name">
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="applyForJobEmail">Email address</label>
|
|
<input type="email" class="form-control" name="applyForJobNameEmail" id="applyForJobEmail" placeholder="email@site.com" aria-label="email@site.com">
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="js-add-field mb-4"
|
|
data-hs-add-field-options='{
|
|
"template": "#addPhoneFieldTemplate",
|
|
"container": "#addPhoneFieldContainer",
|
|
"defaultCreated": 0
|
|
}'>
|
|
<label class="form-label" for="applyForJobPhone">Phone <span class="form-label-secondary">(Optional)</span></label>
|
|
|
|
<div class="input-group">
|
|
<input type="text" class="js-input-mask form-control" name="applyForJobNamePhone" id="applyForJobPhone" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
|
|
data-hs-mask-options='{
|
|
"mask": "+{0}(000)000-00-00"
|
|
}'>
|
|
<!-- Select -->
|
|
<select class="form-select" name="applyForJobPhoneSelect" style="max-width: 8rem;">
|
|
<option value="Mobile" selected>Mobile</option>
|
|
<option value="Home">Home</option>
|
|
<option value="Work">Work</option>
|
|
<option value="Fax">Fax</option>
|
|
<option value="Direct">Direct</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<!-- Container For Input Field -->
|
|
<div id="addPhoneFieldContainer"></div>
|
|
|
|
<a href="javascript:;" class="js-create-field form-link">
|
|
<i class="bi-plus-circle me-1"></i> Add phone
|
|
</a>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Add Phone Input Field -->
|
|
<div id="addPhoneFieldTemplate" style="display: none; position: relative;">
|
|
<div class="input-group input-group-add-field">
|
|
<input type="text" class="js-input-mask form-control" data-name="applyForJobNameAdditionalPhone" id="applyForJobAdditionalPhone" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
|
|
data-hs-mask-options='{
|
|
"mask": "+{0}(000)000-00-00"
|
|
}'>
|
|
<!-- Select -->
|
|
<select class="form-select" data-name="applyForJobAdditionalPhoneSelect" style="max-width: 8rem;">
|
|
<option value="Mobile" selected>Mobile</option>
|
|
<option value="Home">Home</option>
|
|
<option value="Work">Work</option>
|
|
<option value="Fax">Fax</option>
|
|
<option value="Direct">Direct</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
|
|
<a class="js-delete-field input-group-add-field-delete" href="javascript:;">
|
|
<i class="bi-x-lg"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Add Phone Input Field -->
|
|
|
|
<hr class="my-7">
|
|
|
|
<div class="mb-4">
|
|
<h3>Profile</h3>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="applyForJobSummary">Summary</label>
|
|
<textarea class="form-control" name="applyForJobSummaryName" id="applyForJobSummary" placeholder="In a few words, tell us about yourself" aria-label="In a few words, tell us about yourself" rows="6"></textarea>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label">Resume/CV and Cover Letter <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Maximum file size 10 MB."></i></label>
|
|
|
|
<div id="resumeAttach" class="js-dropzone dz-dropzone dz-dropzone-card">
|
|
<div class="dz-message">
|
|
<span class="d-block mb-1">Browse your files</span>
|
|
<span class="d-block text-muted small">or drag' n' drop here</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<hr class="my-7">
|
|
|
|
<div class="mb-4">
|
|
<h3>Details</h3>
|
|
</div>
|
|
|
|
<div class="mb-1">
|
|
<label class="input-label">Do you have the right to work in the UK?</label>
|
|
</div>
|
|
|
|
<!-- Radio Button Group -->
|
|
<div class="btn-group btn-group-segment mb-4" role="group" aria-label="Work status radio button group">
|
|
<input type="radio" class="btn-check" name="applyForJobWorkStatusBtnRadio" id="applyForJobWorkStatusYesBtnRadio" autocomplete="off">
|
|
<label class="btn btn-sm" for="applyForJobWorkStatusYesBtnRadio"><i class="bi-hand-thumbs-up me-1"></i> Yes</label>
|
|
|
|
<input type="radio" class="btn-check" name="applyForJobWorkStatusBtnRadio" id="applyForJobWorkStatusNoBtnRadio" autocomplete="off">
|
|
<label class="btn btn-sm" for="applyForJobWorkStatusNoBtnRadio"><i class="bi-hand-thumbs-down me-1"></i> No</label>
|
|
</div>
|
|
<!-- End Radio Button Group -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="applyForJobNoticePeriod">Notice period</label>
|
|
<input type="text" class="form-control" name="applyForJobNameNoticePeriod" id="applyForJobNoticePeriod" placeholder="2 months" aria-label="2 months">
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label">Upload your portfolio <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Maximum file size 10 MB."></i></label>
|
|
|
|
<div id="portfolioAttach" class="js-dropzone dz-dropzone dz-dropzone-card">
|
|
<div class="dz-message">
|
|
<span class="d-block mb-1">Browse your files</span>
|
|
<span class="d-block text-muted small">or drag' n' drop here</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="applyForJobExpectedSalary">Expected salary</label>
|
|
<input type="text" class="form-control" name="applyForJobNameExpectedSalary" id="applyForJobExpectedSalary" placeholder="$5k-$7k" aria-label="$5k-$7k">
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="mb-1">
|
|
<label class="input-label">Do you have experience designing for mobile?</label>
|
|
</div>
|
|
|
|
<!-- Radio Button Group -->
|
|
<div class="btn-group btn-group-segment mb-4" role="group" aria-label="Work status radio button group">
|
|
<input type="radio" class="btn-check" name="applyForJobWorkExperienceBtnRadio" id="applyForJobWorkExperienceYesBtnRadio" autocomplete="off">
|
|
<label class="btn btn-sm" for="applyForJobWorkExperienceYesBtnRadio"><i class="bi-hand-thumbs-up me-1"></i> Yes</label>
|
|
|
|
<input type="radio" class="btn-check" name="applyForJobWorkExperienceBtnRadio" id="applyForJobWorkExperienceNoBtnRadio" autocomplete="off">
|
|
<label class="btn btn-sm" for="applyForJobWorkExperienceNoBtnRadio"><i class="bi-hand-thumbs-down me-1"></i> No</label>
|
|
</div>
|
|
<!-- End Radio Button Group -->
|
|
|
|
<div class="d-grid mt-5">
|
|
<button type="submit" class="btn btn-primary btn-lg">Send application</button>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
</div>
|
|
<!-- Content -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Content -->
|
|
<div class="container content-space-1 content-space-b-lg-3">
|
|
<div class="w-lg-75 mx-lg-auto">
|
|
<!-- Card -->
|
|
<div class="card card-bordered mb-10">
|
|
<div class="card-body">
|
|
<div class="row align-items-sm-center">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<h5 class="card-title text-uppercase">
|
|
<i class="bi-lightning-charge-fill me-1"></i> Autofill application
|
|
</h5>
|
|
<p class="card-text small">Save time by importing your resume.</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<!-- Dropdown -->
|
|
<div class="dropdown">
|
|
<a class="btn btn-primary" href="#" id="jobImportResumeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-dropdown-animation>
|
|
Import resume from <i class="bi-chevron-down small ms-1"></i>
|
|
</a>
|
|
|
|
<div class="dropdown-menu" aria-labelledby="jobImportResumeDropdown">
|
|
<a class="dropdown-item" href="#">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="../node_modules/bootstrap-icons/icons/laptop.svg" alt="Image Description"> My Computer
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/dropbox-icon.svg" alt="Image Description"> Dropbox
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/google-drive-icon.svg" alt="Image Description"> Google Drive
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Dropdown -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Form -->
|
|
<form>
|
|
<div class="mb-4">
|
|
<h3>Personal information</h3>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="applyForJobFirstName">First name</label>
|
|
<input type="text" class="form-control" name="applyForJobNameFirstName" id="applyForJobFirstName" placeholder="First name" aria-label="First name">
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="applyForJobLasttName">Last name</label>
|
|
<input type="text" class="form-control" name="applyForJobNameLastName" id="applyForJobLasttName" placeholder="Last name" aria-label="Last name">
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="applyForJobEmail">Email address</label>
|
|
<input type="email" class="form-control" name="applyForJobNameEmail" id="applyForJobEmail" placeholder="email@site.com" aria-label="email@site.com">
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="js-add-field mb-4"
|
|
data-hs-add-field-options='{
|
|
"template": "#addPhoneFieldTemplate",
|
|
"container": "#addPhoneFieldContainer",
|
|
"defaultCreated": 0
|
|
}'>
|
|
<label class="form-label" for="applyForJobPhone">Phone <span class="form-label-secondary">(Optional)</span></label>
|
|
|
|
<div class="input-group">
|
|
<input type="text" class="js-input-mask form-control" name="applyForJobNamePhone" id="applyForJobPhone" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
|
|
data-hs-mask-options='{
|
|
"mask": "+{0}(000)000-00-00"
|
|
}'>
|
|
<!-- Select -->
|
|
<select class="form-select" name="applyForJobPhoneSelect" style="max-width: 8rem;">
|
|
<option value="Mobile" selected>Mobile</option>
|
|
<option value="Home">Home</option>
|
|
<option value="Work">Work</option>
|
|
<option value="Fax">Fax</option>
|
|
<option value="Direct">Direct</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<!-- Container For Input Field -->
|
|
<div id="addPhoneFieldContainer"></div>
|
|
|
|
<a href="javascript:;" class="js-create-field form-link">
|
|
<i class="bi-plus-circle me-1"></i> Add phone
|
|
</a>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Add Phone Input Field -->
|
|
<div id="addPhoneFieldTemplate" style="display: none; position: relative;">
|
|
<div class="input-group input-group-add-field">
|
|
<input type="text" class="js-input-mask form-control" data-name="applyForJobNameAdditionalPhone" id="applyForJobAdditionalPhone" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
|
|
data-hs-mask-options='{
|
|
"mask": "+{0}(000)000-00-00"
|
|
}'>
|
|
<!-- Select -->
|
|
<select class="form-select" data-name="applyForJobAdditionalPhoneSelect" style="max-width: 8rem;">
|
|
<option value="Mobile" selected>Mobile</option>
|
|
<option value="Home">Home</option>
|
|
<option value="Work">Work</option>
|
|
<option value="Fax">Fax</option>
|
|
<option value="Direct">Direct</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
|
|
<a class="js-delete-field input-group-add-field-delete" href="javascript:;">
|
|
<i class="bi-x-lg"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Add Phone Input Field -->
|
|
|
|
<hr class="my-7">
|
|
|
|
<div class="mb-4">
|
|
<h3>Profile</h3>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="applyForJobSummary">Summary</label>
|
|
<textarea class="form-control" name="applyForJobSummaryName" id="applyForJobSummary" placeholder="In a few words, tell us about yourself" aria-label="In a few words, tell us about yourself" rows="6"></textarea>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label">Resume/CV and Cover Letter <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Maximum file size 10 MB."></i></label>
|
|
|
|
<div id="resumeAttach" class="js-dropzone dz-dropzone dz-dropzone-card">
|
|
<div class="dz-message">
|
|
<span class="d-block mb-1">Browse your files</span>
|
|
<span class="d-block text-muted small">or drag' n' drop here</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<hr class="my-7">
|
|
|
|
<div class="mb-4">
|
|
<h3>Details</h3>
|
|
</div>
|
|
|
|
<div class="mb-1">
|
|
<label class="input-label">Do you have the right to work in the UK?</label>
|
|
</div>
|
|
|
|
<!-- Radio Button Group -->
|
|
<div class="btn-group btn-group-segment mb-4" role="group" aria-label="Work status radio button group">
|
|
<input type="radio" class="btn-check" name="applyForJobWorkStatusBtnRadio" id="applyForJobWorkStatusYesBtnRadio" autocomplete="off">
|
|
<label class="btn btn-sm" for="applyForJobWorkStatusYesBtnRadio"><i class="bi-hand-thumbs-up me-1"></i> Yes</label>
|
|
|
|
<input type="radio" class="btn-check" name="applyForJobWorkStatusBtnRadio" id="applyForJobWorkStatusNoBtnRadio" autocomplete="off">
|
|
<label class="btn btn-sm" for="applyForJobWorkStatusNoBtnRadio"><i class="bi-hand-thumbs-down me-1"></i> No</label>
|
|
</div>
|
|
<!-- End Radio Button Group -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="applyForJobNoticePeriod">Notice period</label>
|
|
<input type="text" class="form-control" name="applyForJobNameNoticePeriod" id="applyForJobNoticePeriod" placeholder="2 months" aria-label="2 months">
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label">Upload your portfolio <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Maximum file size 10 MB."></i></label>
|
|
|
|
<div id="portfolioAttach" class="js-dropzone dz-dropzone dz-dropzone-card">
|
|
<div class="dz-message">
|
|
<span class="d-block mb-1">Browse your files</span>
|
|
<span class="d-block text-muted small">or drag' n' drop here</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="applyForJobExpectedSalary">Expected salary</label>
|
|
<input type="text" class="form-control" name="applyForJobNameExpectedSalary" id="applyForJobExpectedSalary" placeholder="$5k-$7k" aria-label="$5k-$7k">
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="mb-1">
|
|
<label class="input-label">Do you have experience designing for mobile?</label>
|
|
</div>
|
|
|
|
<!-- Radio Button Group -->
|
|
<div class="btn-group btn-group-segment mb-4" role="group" aria-label="Work status radio button group">
|
|
<input type="radio" class="btn-check" name="applyForJobWorkExperienceBtnRadio" id="applyForJobWorkExperienceYesBtnRadio" autocomplete="off">
|
|
<label class="btn btn-sm" for="applyForJobWorkExperienceYesBtnRadio"><i class="bi-hand-thumbs-up me-1"></i> Yes</label>
|
|
|
|
<input type="radio" class="btn-check" name="applyForJobWorkExperienceBtnRadio" id="applyForJobWorkExperienceNoBtnRadio" autocomplete="off">
|
|
<label class="btn btn-sm" for="applyForJobWorkExperienceNoBtnRadio"><i class="bi-hand-thumbs-down me-1"></i> No</label>
|
|
</div>
|
|
<!-- End Radio Button Group -->
|
|
|
|
<div class="d-grid mt-5">
|
|
<button type="submit" class="btn btn-primary btn-lg">Send application</button>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
</div>
|
|
<!-- Content -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js4" role="tabpanel" aria-labelledby="nav-jsTab4">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../assets/vendor/hs-add-field/dist/hs-add-field.min.js"></script>
|
|
<script src="../node_modules/dropzone/dist/min/dropzone.min.js"></script>
|
|
<script src="../node_modules/imask/dist/imask.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="../assets/js/hs.bs-dropdown.js"></script>
|
|
<script src="../assets/js/hs.dropzone.js"></script>
|
|
<script src="../assets/js/hs.imask.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF BOOTSTRAP DROPDOWN
|
|
// =======================================================
|
|
HSBsDropdown.init()
|
|
|
|
|
|
// INITIALIZATION OF ADD FIELD
|
|
// =======================================================
|
|
new HSAddField('.js-add-field', {
|
|
addedField: field => {
|
|
HSCore.components.HSMask.init(field.querySelector('.js-input-mask'))
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF DROPZONE
|
|
// =======================================================
|
|
HSCore.components.HSDropzone.init('.js-dropzone')
|
|
|
|
|
|
// INITIALIZATION OF INPUT MASK
|
|
// =======================================================
|
|
HSCore.components.HSMask.init('.js-input-mask')
|
|
})()
|
|
</script>
|
|
</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')
|
|
|
|
|
|
// INITIALIZATION OF BOOTSTRAP DROPDOWN
|
|
// =======================================================
|
|
HSBsDropdown.init()
|
|
|
|
|
|
// INITIALIZATION OF ADD FIELD
|
|
// =======================================================
|
|
new HSAddField('.js-add-field', {
|
|
addedField: field => {
|
|
HSCore.components.HSMask.init(field.querySelector('.js-input-mask'))
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF DROPZONE
|
|
// =======================================================
|
|
HSCore.components.HSDropzone.init('.js-dropzone')
|
|
|
|
|
|
// INITIALIZATION OF INPUT MASK
|
|
// =======================================================
|
|
HSCore.components.HSMask.init('.js-input-mask')
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|