1598 lines
85 KiB
HTML
1598 lines
85 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 Navs - 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 " 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 active" 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 Navs</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>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab1" href="#nav-js1" data-bs-toggle="pill" data-bs-target="#nav-js1" role="tab" aria-controls="nav-js1" aria-selected="false">JS</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="container content-space-1">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
|
<h2>Front makes designing easy and performance fast</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Nav Scroller -->
|
|
<div class="js-nav-scroller hs-nav-scroller-horizontal">
|
|
<span class="hs-nav-scroller-arrow-prev" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-left"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<span class="hs-nav-scroller-arrow-next" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-right"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment nav-pills nav-fill mx-auto mb-7" id="featuresEg1Tab" role="tablist" style="max-width: 30rem;">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" href="#featuresOne" id="featuresEg1One-tab" data-bs-toggle="tab" data-bs-target="#featuresOne" role="tab" aria-controls="featuresEg1One" aria-selected="true">App Marketplace</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresTwo" id="featuresEg1Two-tab" data-bs-toggle="tab" data-bs-target="#featuresTwo" role="tab" aria-controls="featuresEg1Two" aria-selected="false">Course</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresThree" id="featuresEg1Three-tab" data-bs-toggle="tab" data-bs-target="#featuresThree" role="tab" aria-controls="featuresEg1Three" aria-selected="false">Account Dashboard</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Nav Scroller -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="featuresEg1TabContent">
|
|
<div class="tab-pane fade show active" id="featuresEg1One" role="tabpanel" aria-labelledby="featuresEg1One-tab">
|
|
<!-- Devices -->
|
|
<div class="devices">
|
|
<!-- Mobile Device -->
|
|
<figure class="device-mobile rotated-3d-right">
|
|
<div class="device-mobile-frame">
|
|
<img class="device-mobile-img" src="../assets/img/407x867/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Mobile Device -->
|
|
|
|
<!-- Browser Device -->
|
|
<figure class="device-browser">
|
|
<div class="device-browser-header">
|
|
<div class="device-browser-header-btn-list">
|
|
<span class="device-browser-header-btn-list-btn"></span>
|
|
<span class="device-browser-header-btn-list-btn"></span>
|
|
<span class="device-browser-header-btn-list-btn"></span>
|
|
</div>
|
|
<div class="device-browser-header-browser-bar">www.htmlstream.com/front/</div>
|
|
</div>
|
|
|
|
<div class="device-browser-frame">
|
|
<img class="device-browser-img" src="../assets/img/1618x1010/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Browser Device -->
|
|
</div>
|
|
<!-- End Devices -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresEg1Two" role="tabpanel" aria-labelledby="featuresEg1Two-tab">
|
|
<!-- 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/img2.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/img2.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Browser Device -->
|
|
</div>
|
|
<!-- End Devices -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresEg1Three" role="tabpanel" aria-labelledby="featuresEg1Three-tab">
|
|
<!-- 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/img4.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/img4.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Browser Device -->
|
|
</div>
|
|
<!-- End Devices -->
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</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="container content-space-2 content-space-lg-3">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
|
<h2>Front makes designing easy and performance fast</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Nav Scroller -->
|
|
<div class="js-nav-scroller hs-nav-scroller-horizontal">
|
|
<span class="hs-nav-scroller-arrow-prev" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-left"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<span class="hs-nav-scroller-arrow-next" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-right"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment nav-pills nav-fill mx-auto mb-7" id="featuresEg1Tab" role="tablist" style="max-width: 30rem;">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" href="#featuresOne" id="featuresEg1One-tab" data-bs-toggle="tab" data-bs-target="#featuresOne" role="tab" aria-controls="featuresEg1One" aria-selected="true">App Marketplace</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresTwo" id="featuresEg1Two-tab" data-bs-toggle="tab" data-bs-target="#featuresTwo" role="tab" aria-controls="featuresEg1Two" aria-selected="false">Course</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresThree" id="featuresEg1Three-tab" data-bs-toggle="tab" data-bs-target="#featuresThree" role="tab" aria-controls="featuresEg1Three" aria-selected="false">Account Dashboard</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Nav Scroller -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="featuresEg1TabContent">
|
|
<div class="tab-pane fade show active" id="featuresEg1One" role="tabpanel" aria-labelledby="featuresEg1One-tab">
|
|
<!-- Devices -->
|
|
<div class="devices">
|
|
<!-- Mobile Device -->
|
|
<figure class="device-mobile rotated-3d-right">
|
|
<div class="device-mobile-frame">
|
|
<img class="device-mobile-img" src="../assets/img/407x867/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Mobile Device -->
|
|
|
|
<!-- Browser Device -->
|
|
<figure class="device-browser">
|
|
<div class="device-browser-header">
|
|
<div class="device-browser-header-btn-list">
|
|
<span class="device-browser-header-btn-list-btn"></span>
|
|
<span class="device-browser-header-btn-list-btn"></span>
|
|
<span class="device-browser-header-btn-list-btn"></span>
|
|
</div>
|
|
<div class="device-browser-header-browser-bar">www.htmlstream.com/front/</div>
|
|
</div>
|
|
|
|
<div class="device-browser-frame">
|
|
<img class="device-browser-img" src="../assets/img/1618x1010/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Browser Device -->
|
|
</div>
|
|
<!-- End Devices -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresEg1Two" role="tabpanel" aria-labelledby="featuresEg1Two-tab">
|
|
<!-- 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/img2.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/img2.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Browser Device -->
|
|
</div>
|
|
<!-- End Devices -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresEg1Three" role="tabpanel" aria-labelledby="featuresEg1Three-tab">
|
|
<!-- 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/img4.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/img4.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Browser Device -->
|
|
</div>
|
|
<!-- End Devices -->
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Features -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js1" role="tabpanel" aria-labelledby="nav-jsTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF NAV SCROLLER
|
|
// =======================================================
|
|
new HsNavScroller('.js-nav-scroller')
|
|
})()
|
|
</script>
|
|
</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>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab2" href="#nav-js2" data-bs-toggle="pill" data-bs-target="#nav-js2" role="tab" aria-controls="nav-js2" aria-selected="false">JS</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">
|
|
<!-- Feature Nav -->
|
|
<div class="container content-space-1">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
|
<span class="text-cap">What's Front?</span>
|
|
<h2>The quickest and easiest theme for every team</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row align-items-lg-center">
|
|
<div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
|
|
<!-- Nav Scroller -->
|
|
<div class="js-nav-scroller hs-nav-scroller-horizontal">
|
|
<span class="hs-nav-scroller-arrow-prev" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-left"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<span class="hs-nav-scroller-arrow-next" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-right"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<!-- Nav Pills -->
|
|
<ul class="nav nav-lg nav-pills nav-pills-shadow flex-lg-column gap-lg-1 p-3" id="featuresTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" href="#featuresOne" id="featuresOne-tab" data-bs-toggle="tab" data-bs-target="#featuresOne" role="tab" aria-controls="featuresOne" aria-selected="true" style="min-width: 25rem;">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center align-items-lg-start">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M22 19V17C22 16.4 21.6 16 21 16H8V3C8 2.4 7.6 2 7 2H5C4.4 2 4 2.4 4 3V19C4 19.6 4.4 20 5 20H21C21.6 20 22 19.6 22 19Z" fill="#035A4B"/>
|
|
<path d="M20 5V21C20 21.6 19.6 22 19 22H17C16.4 22 16 21.6 16 21V8H8V4H19C19.6 4 20 4.4 20 5ZM3 8H4V4H3C2.4 4 2 4.4 2 5V7C2 7.6 2.4 8 3 8Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4 class="mb-1">Easy & fast designing</h4>
|
|
<p class="text-body mb-0">You can work with your existing website.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresTwo" id="featuresTwo-tab" data-bs-toggle="tab" data-bs-target="#featuresTwo" role="tab" aria-controls="featuresTwo" aria-selected="false" style="min-width: 25rem;">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center align-items-lg-start">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 19.5229C15 20.265 15.9624 20.5564 16.374 19.9389L22.2227 11.166C22.5549 10.6676 22.1976 10 21.5986 10H17V4.47708C17 3.73503 16.0376 3.44363 15.626 4.06106L9.77735 12.834C9.44507 13.3324 9.80237 14 10.4014 14H15V19.5229Z" fill="#035A4B"/>
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M3 6.5C3 5.67157 3.67157 5 4.5 5H9.5C10.3284 5 11 5.67157 11 6.5C11 7.32843 10.3284 8 9.5 8H4.5C3.67157 8 3 7.32843 3 6.5ZM3 18.5C3 17.6716 3.67157 17 4.5 17H9.5C10.3284 17 11 17.6716 11 18.5C11 19.3284 10.3284 20 9.5 20H4.5C3.67157 20 3 19.3284 3 18.5ZM2.5 11C1.67157 11 1 11.6716 1 12.5C1 13.3284 1.67157 14 2.5 14H6.5C7.32843 14 8 13.3284 8 12.5C8 11.6716 7.32843 11 6.5 11H2.5Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4 class="mb-1">Powerful features</h4>
|
|
<p class="text-body mb-0">Easily draft, change, customize and launch.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresThree" id="featuresThree-tab" data-bs-toggle="tab" data-bs-target="#featuresThree" role="tab" aria-controls="featuresThree" aria-selected="false" style="min-width: 25rem;">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center align-items-lg-start">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M17.2718 8.68537C16.8933 8.28319 16.9125 7.65032 17.3146 7.2718C17.7168 6.89329 18.3497 6.91246 18.7282 7.31464L22.7282 11.5646C23.0906 11.9497 23.0906 12.5503 22.7282 12.9354L18.7282 17.1854C18.3497 17.5875 17.7168 17.6067 17.3146 17.2282C16.9125 16.8497 16.8933 16.2168 17.2718 15.8146L20.6268 12.25L17.2718 8.68537Z" fill="#035A4B"/>
|
|
<path d="M6.7282 8.68537C7.10671 8.28319 7.08754 7.65032 6.68536 7.2718C6.28319 6.89329 5.65031 6.91246 5.2718 7.31464L1.2718 11.5646C0.909397 11.9497 0.909397 12.5503 1.2718 12.9354L5.2718 17.1854C5.65031 17.5875 6.28319 17.6067 6.68536 17.2282C7.08754 16.8497 7.10671 16.2168 6.7282 15.8146L3.37325 12.25L6.7282 8.68537Z" fill="#035A4B"/>
|
|
<rect opacity="0.3" x="12.7388" y="3.97168" width="2" height="16" rx="1" transform="rotate(12.3829 12.7388 3.97168)" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4 class="mb-1">Advanced HTML/CSS editing</h4>
|
|
<p class="text-body mb-0">You can modify any aspect of your website.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav Pills -->
|
|
</div>
|
|
<!-- End Nav Scroller -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-7 order-lg-1">
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="featuresTabContent">
|
|
<div class="tab-pane fade show active" id="featuresOne" role="tabpanel" aria-labelledby="featuresOne-tab">
|
|
<!-- 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>
|
|
|
|
<div class="tab-pane fade" id="featuresTwo" role="tabpanel" aria-labelledby="featuresTwo-tab">
|
|
<!-- 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/img2.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Browser Device -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresThree" role="tabpanel" aria-labelledby="featuresThree-tab">
|
|
<!-- 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/img4.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Browser Device -->
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Feature Nav -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Feature Nav -->
|
|
<div class="container content-space-1">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
|
<span class="text-cap">What's Front?</span>
|
|
<h2>The quickest and easiest theme for every team</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row align-items-lg-center">
|
|
<div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
|
|
<!-- Nav Scroller -->
|
|
<div class="js-nav-scroller hs-nav-scroller-horizontal">
|
|
<span class="hs-nav-scroller-arrow-prev" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-left"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<span class="hs-nav-scroller-arrow-next" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-right"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<!-- Nav Pills -->
|
|
<ul class="nav nav-lg nav-pills nav-pills-shadow flex-lg-column gap-lg-1 p-3" id="featuresTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" href="#featuresOne" id="featuresOne-tab" data-bs-toggle="tab" data-bs-target="#featuresOne" role="tab" aria-controls="featuresOne" aria-selected="true" style="min-width: 25rem;">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center align-items-lg-start">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M22 19V17C22 16.4 21.6 16 21 16H8V3C8 2.4 7.6 2 7 2H5C4.4 2 4 2.4 4 3V19C4 19.6 4.4 20 5 20H21C21.6 20 22 19.6 22 19Z" fill="#035A4B"/>
|
|
<path d="M20 5V21C20 21.6 19.6 22 19 22H17C16.4 22 16 21.6 16 21V8H8V4H19C19.6 4 20 4.4 20 5ZM3 8H4V4H3C2.4 4 2 4.4 2 5V7C2 7.6 2.4 8 3 8Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4 class="mb-1">Easy & fast designing</h4>
|
|
<p class="text-body mb-0">You can work with your existing website.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresTwo" id="featuresTwo-tab" data-bs-toggle="tab" data-bs-target="#featuresTwo" role="tab" aria-controls="featuresTwo" aria-selected="false" style="min-width: 25rem;">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center align-items-lg-start">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 19.5229C15 20.265 15.9624 20.5564 16.374 19.9389L22.2227 11.166C22.5549 10.6676 22.1976 10 21.5986 10H17V4.47708C17 3.73503 16.0376 3.44363 15.626 4.06106L9.77735 12.834C9.44507 13.3324 9.80237 14 10.4014 14H15V19.5229Z" fill="#035A4B"/>
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M3 6.5C3 5.67157 3.67157 5 4.5 5H9.5C10.3284 5 11 5.67157 11 6.5C11 7.32843 10.3284 8 9.5 8H4.5C3.67157 8 3 7.32843 3 6.5ZM3 18.5C3 17.6716 3.67157 17 4.5 17H9.5C10.3284 17 11 17.6716 11 18.5C11 19.3284 10.3284 20 9.5 20H4.5C3.67157 20 3 19.3284 3 18.5ZM2.5 11C1.67157 11 1 11.6716 1 12.5C1 13.3284 1.67157 14 2.5 14H6.5C7.32843 14 8 13.3284 8 12.5C8 11.6716 7.32843 11 6.5 11H2.5Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4 class="mb-1">Powerful features</h4>
|
|
<p class="text-body mb-0">Easily draft, change, customize and launch.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresThree" id="featuresThree-tab" data-bs-toggle="tab" data-bs-target="#featuresThree" role="tab" aria-controls="featuresThree" aria-selected="false" style="min-width: 25rem;">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center align-items-lg-start">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M17.2718 8.68537C16.8933 8.28319 16.9125 7.65032 17.3146 7.2718C17.7168 6.89329 18.3497 6.91246 18.7282 7.31464L22.7282 11.5646C23.0906 11.9497 23.0906 12.5503 22.7282 12.9354L18.7282 17.1854C18.3497 17.5875 17.7168 17.6067 17.3146 17.2282C16.9125 16.8497 16.8933 16.2168 17.2718 15.8146L20.6268 12.25L17.2718 8.68537Z" fill="#035A4B"/>
|
|
<path d="M6.7282 8.68537C7.10671 8.28319 7.08754 7.65032 6.68536 7.2718C6.28319 6.89329 5.65031 6.91246 5.2718 7.31464L1.2718 11.5646C0.909397 11.9497 0.909397 12.5503 1.2718 12.9354L5.2718 17.1854C5.65031 17.5875 6.28319 17.6067 6.68536 17.2282C7.08754 16.8497 7.10671 16.2168 6.7282 15.8146L3.37325 12.25L6.7282 8.68537Z" fill="#035A4B"/>
|
|
<rect opacity="0.3" x="12.7388" y="3.97168" width="2" height="16" rx="1" transform="rotate(12.3829 12.7388 3.97168)" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h4 class="mb-1">Advanced HTML/CSS editing</h4>
|
|
<p class="text-body mb-0">You can modify any aspect of your website.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav Pills -->
|
|
</div>
|
|
<!-- End Nav Scroller -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-7 order-lg-1">
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="featuresTabContent">
|
|
<div class="tab-pane fade show active" id="featuresOne" role="tabpanel" aria-labelledby="featuresOne-tab">
|
|
<!-- 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>
|
|
|
|
<div class="tab-pane fade" id="featuresTwo" role="tabpanel" aria-labelledby="featuresTwo-tab">
|
|
<!-- 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/img2.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Browser Device -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresThree" role="tabpanel" aria-labelledby="featuresThree-tab">
|
|
<!-- 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/img4.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Browser Device -->
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Feature Nav -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js2" role="tabpanel" aria-labelledby="nav-jsTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF NAV SCROLLER
|
|
// =======================================================
|
|
new HsNavScroller('.js-nav-scroller')
|
|
})()
|
|
</script>
|
|
</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>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab3" href="#nav-js3" data-bs-toggle="pill" data-bs-target="#nav-js3" role="tab" aria-controls="nav-js3" aria-selected="false">JS</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 Nav -->
|
|
<div class="container content-space-1">
|
|
<div class="row align-items-lg-center">
|
|
<div class="col-lg-5 mb-7 mb-lg-0">
|
|
<!-- Heading -->
|
|
<div class="mb-5">
|
|
<h2>Dedicated app development platform</h2>
|
|
<p>From open source to premium services, Front makes app creation lightning fast.</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-6">
|
|
<!-- List Checked -->
|
|
<ul class="list-checked list-checked-success mb-0">
|
|
<li class="list-checked-item">Mobile devs</li>
|
|
<li class="list-checked-item">App builder</li>
|
|
<li class="list-checked-item">Subscriptions <span class="badge bg-primary rounded-pill ms-1">Beta</span></li>
|
|
<li class="list-checked-item">Integrations</li>
|
|
</ul>
|
|
<!-- End List Checked -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6">
|
|
<!-- List Checked -->
|
|
<ul class="list-checked list-checked-success mb-0">
|
|
<li class="list-checked-item">Reporting</li>
|
|
<li class="list-checked-item">Dashboard</li>
|
|
<li class="list-checked-item">Feedback</li>
|
|
</ul>
|
|
<!-- End List Checked -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<a class="link" href="#">Full API reference <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-7">
|
|
<!-- Card -->
|
|
<div class="card bg-dark" style="min-height: 27rem;">
|
|
<div class="card-body">
|
|
<!-- Nav Scroller -->
|
|
<div class="js-nav-scroller hs-nav-scroller-horizontal hs-nav-scroller-light">
|
|
<span class="hs-nav-scroller-arrow-prev" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-left"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<span class="hs-nav-scroller-arrow-next" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-right"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<div class="text-center">
|
|
<!-- Nav Pills -->
|
|
<ul class="nav nav-sm nav-pills nav-light nav-justified mb-5" id="featuresCodingTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" href="#featuresCodingOne" id="featuresCodingOne-tab" data-bs-toggle="tab" data-bs-target="#featuresCodingOne" role="tab" aria-controls="featuresCodingOne" aria-selected="true">JS</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresCodingTwo" id="featuresCodingTwo-tab" data-bs-toggle="tab" data-bs-target="#featuresCodingTwo" role="tab" aria-controls="featuresCodingTwo" aria-selected="false">PHP</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresCodingThree" id="featuresCodingThree-tab" data-bs-toggle="tab" data-bs-target="#featuresCodingThree" role="tab" aria-controls="featuresCodingThree" aria-selected="false">Ruby</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresCodingFour" id="featuresCodingFour-tab" data-bs-toggle="tab" data-bs-target="#featuresCodingFour" role="tab" aria-controls="featuresCodingFour" aria-selected="false">C++</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresCodingFive" id="featuresCodingFive-tab" data-bs-toggle="tab" data-bs-target="#featuresCodingFive" role="tab" aria-controls="featuresCodingFive" aria-selected="false">Python</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresCodingSix" id="featuresCodingSix-tab" data-bs-toggle="tab" data-bs-target="#featuresCodingSix" role="tab" aria-controls="featuresCodingSix" aria-selected="false">Java</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav Pills -->
|
|
</div>
|
|
</div>
|
|
<!-- End Nav Scroller -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="featuresCodingTabContent">
|
|
<div class="tab-pane fade show active" id="featuresCodingOne" role="tabpanel" aria-labelledby="featuresCodingOne-tab">
|
|
<!-- Code -->
|
|
<div class="text-monospace">
|
|
<div class="mb-4">
|
|
<span class="text-danger pe-2">public class</span>
|
|
<span class="text-white-70">AppInheritanceTest {</span>
|
|
</div>
|
|
<div class="ps-3 mb-1">
|
|
<span class="text-danger pe-2">public static void</span>
|
|
<span class="text-white-70">main(String[] args) {</span>
|
|
</div>
|
|
<div class="ps-6 mb-4">
|
|
<span class="text-white-70">Front</span>
|
|
<span class="text-danger">front</span>
|
|
<span class="text-white-70">=</span>
|
|
<span class="text-danger">new</span>
|
|
<span class="text-white-70">Front(</span><span class="text-danger">true</span><span class="text-white-70">,</span>
|
|
<span class="text-primary">"theme"</span><span class="text-white-70">,</span> <span class="text-danger">4</span><span class="text-white-70">);</span>
|
|
</div>
|
|
<div class="ps-6 mb-1">
|
|
<span class="text-white-70">System.</span><span class="text-primary"><em>out</em></span><span class="text-white-70">.println(</span><span class="text-primary">"Is Front Responsive?"</span>
|
|
<span class="text-white-70">+</span>
|
|
<span class="text-danger">front</span><span class="text-white-70">.isResponsive());</span>
|
|
</div>
|
|
<div class="ps-6 mb-1">
|
|
<span class="text-white-70">System.</span><span class="text-primary"><em>out</em></span><span class="text-white-70">.println(</span><span class="text-primary">"Front HTML "</span>
|
|
<span class="text-white-70">+</span>
|
|
<span class="text-danger">front</span><span class="text-white-70">.getHTML());</span>
|
|
</div>
|
|
<div class="ps-6 mb-1">
|
|
<span class="text-white-70">System.</span><span class="text-primary"><em>out</em></span><span class="text-white-70">.println(</span><span class="text-primary">"Front has "</span>
|
|
<span class="text-white-70">+</span>
|
|
<span class="text-danger">front</span><span class="text-white-70">.getDemos()</span>
|
|
<span class="text-white-70">+</span>
|
|
<span class="text-primary">" demos."</span><span class="text-white-70">);</span>
|
|
</div>
|
|
<div class="ps-3 mb-1">
|
|
<span class="text-white-70">}</span>
|
|
</div>
|
|
<div class="mb-1">
|
|
<span class="text-white-70">}</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Code -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresCodingTwo" role="tabpanel" aria-labelledby="featuresCodingTwo-tab">
|
|
Coming soon...
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresCodingThree" role="tabpanel" aria-labelledby="featuresCodingThree-tab">
|
|
Coming soon...
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresCodingFour" role="tabpanel" aria-labelledby="featuresCodingFour-tab">
|
|
Coming soon...
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresCodingFive" role="tabpanel" aria-labelledby="featuresCodingFive-tab">
|
|
Coming soon...
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresCodingSix" role="tabpanel" aria-labelledby="featuresCodingSix-tab">
|
|
Coming soon...
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Features Nav -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Features Nav -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<div class="row align-items-lg-center">
|
|
<div class="col-lg-5 mb-7 mb-lg-0">
|
|
<!-- Heading -->
|
|
<div class="mb-5">
|
|
<h2>Dedicated app development platform</h2>
|
|
<p>From open source to premium services, Front makes app creation lightning fast.</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-6">
|
|
<!-- List Checked -->
|
|
<ul class="list-checked list-checked-success mb-0">
|
|
<li class="list-checked-item">Mobile devs</li>
|
|
<li class="list-checked-item">App builder</li>
|
|
<li class="list-checked-item">Subscriptions <span class="badge bg-primary rounded-pill ms-1">Beta</span></li>
|
|
<li class="list-checked-item">Integrations</li>
|
|
</ul>
|
|
<!-- End List Checked -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6">
|
|
<!-- List Checked -->
|
|
<ul class="list-checked list-checked-success mb-0">
|
|
<li class="list-checked-item">Reporting</li>
|
|
<li class="list-checked-item">Dashboard</li>
|
|
<li class="list-checked-item">Feedback</li>
|
|
</ul>
|
|
<!-- End List Checked -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<a class="link" href="#">Full API reference <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-7">
|
|
<!-- Card -->
|
|
<div class="card bg-dark" style="min-height: 27rem;">
|
|
<div class="card-body">
|
|
<!-- Nav Scroller -->
|
|
<div class="js-nav-scroller hs-nav-scroller-horizontal hs-nav-scroller-light">
|
|
<span class="hs-nav-scroller-arrow-prev" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-left"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<span class="hs-nav-scroller-arrow-next" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-right"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<div class="text-center">
|
|
<!-- Nav Pills -->
|
|
<ul class="nav nav-sm nav-pills nav-light nav-justified mb-5" id="featuresCodingTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" href="#featuresCodingOne" id="featuresCodingOne-tab" data-bs-toggle="tab" data-bs-target="#featuresCodingOne" role="tab" aria-controls="featuresCodingOne" aria-selected="true">JS</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresCodingTwo" id="featuresCodingTwo-tab" data-bs-toggle="tab" data-bs-target="#featuresCodingTwo" role="tab" aria-controls="featuresCodingTwo" aria-selected="false">PHP</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresCodingThree" id="featuresCodingThree-tab" data-bs-toggle="tab" data-bs-target="#featuresCodingThree" role="tab" aria-controls="featuresCodingThree" aria-selected="false">Ruby</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresCodingFour" id="featuresCodingFour-tab" data-bs-toggle="tab" data-bs-target="#featuresCodingFour" role="tab" aria-controls="featuresCodingFour" aria-selected="false">C++</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresCodingFive" id="featuresCodingFive-tab" data-bs-toggle="tab" data-bs-target="#featuresCodingFive" role="tab" aria-controls="featuresCodingFive" aria-selected="false">Python</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#featuresCodingSix" id="featuresCodingSix-tab" data-bs-toggle="tab" data-bs-target="#featuresCodingSix" role="tab" aria-controls="featuresCodingSix" aria-selected="false">Java</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav Pills -->
|
|
</div>
|
|
</div>
|
|
<!-- End Nav Scroller -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="featuresCodingTabContent">
|
|
<div class="tab-pane fade show active" id="featuresCodingOne" role="tabpanel" aria-labelledby="featuresCodingOne-tab">
|
|
<!-- Code -->
|
|
<div class="text-monospace">
|
|
<div class="mb-4">
|
|
<span class="text-danger pe-2">public class</span>
|
|
<span class="text-white-70">AppInheritanceTest {</span>
|
|
</div>
|
|
<div class="ps-3 mb-1">
|
|
<span class="text-danger pe-2">public static void</span>
|
|
<span class="text-white-70">main(String[] args) {</span>
|
|
</div>
|
|
<div class="ps-6 mb-4">
|
|
<span class="text-white-70">Front</span>
|
|
<span class="text-danger">front</span>
|
|
<span class="text-white-70">=</span>
|
|
<span class="text-danger">new</span>
|
|
<span class="text-white-70">Front(</span><span class="text-danger">true</span><span class="text-white-70">,</span>
|
|
<span class="text-primary">"theme"</span><span class="text-white-70">,</span> <span class="text-danger">4</span><span class="text-white-70">);</span>
|
|
</div>
|
|
<div class="ps-6 mb-1">
|
|
<span class="text-white-70">System.</span><span class="text-primary"><em>out</em></span><span class="text-white-70">.println(</span><span class="text-primary">"Is Front Responsive?"</span>
|
|
<span class="text-white-70">+</span>
|
|
<span class="text-danger">front</span><span class="text-white-70">.isResponsive());</span>
|
|
</div>
|
|
<div class="ps-6 mb-1">
|
|
<span class="text-white-70">System.</span><span class="text-primary"><em>out</em></span><span class="text-white-70">.println(</span><span class="text-primary">"Front HTML "</span>
|
|
<span class="text-white-70">+</span>
|
|
<span class="text-danger">front</span><span class="text-white-70">.getHTML());</span>
|
|
</div>
|
|
<div class="ps-6 mb-1">
|
|
<span class="text-white-70">System.</span><span class="text-primary"><em>out</em></span><span class="text-white-70">.println(</span><span class="text-primary">"Front has "</span>
|
|
<span class="text-white-70">+</span>
|
|
<span class="text-danger">front</span><span class="text-white-70">.getDemos()</span>
|
|
<span class="text-white-70">+</span>
|
|
<span class="text-primary">" demos."</span><span class="text-white-70">);</span>
|
|
</div>
|
|
<div class="ps-3 mb-1">
|
|
<span class="text-white-70">}</span>
|
|
</div>
|
|
<div class="mb-1">
|
|
<span class="text-white-70">}</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Code -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresCodingTwo" role="tabpanel" aria-labelledby="featuresCodingTwo-tab">
|
|
Coming soon...
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresCodingThree" role="tabpanel" aria-labelledby="featuresCodingThree-tab">
|
|
Coming soon...
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresCodingFour" role="tabpanel" aria-labelledby="featuresCodingFour-tab">
|
|
Coming soon...
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresCodingFive" role="tabpanel" aria-labelledby="featuresCodingFive-tab">
|
|
Coming soon...
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="featuresCodingSix" role="tabpanel" aria-labelledby="featuresCodingSix-tab">
|
|
Coming soon...
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Features Nav -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js3" role="tabpanel" aria-labelledby="nav-jsTab3">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF NAV SCROLLER
|
|
// =======================================================
|
|
new HsNavScroller('.js-nav-scroller')
|
|
})()
|
|
</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 NAV SCROLLER
|
|
// =======================================================
|
|
new HsNavScroller('.js-nav-scroller')
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|