responsively-app/website/pages/knowledgebase-article.html
2019-09-11 21:45:17 +05:30

827 lines
51 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Leap Bootstrap Theme and HTML Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A corporate Bootstrap theme by Medium Rare">
<link href="assets/css/loaders/loader-typing.css" rel="stylesheet" type="text/css" media="all" />
<link href="assets/css/theme.css" rel="stylesheet" type="text/css" media="all" />
<link rel="preload" as="font" href="assets/fonts/Inter-UI-upright.var.woff2" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="assets/fonts/Inter-UI.var.woff2" type="font/woff2" crossorigin="anonymous">
</head>
<body>
<div class="loader">
<div class="loading-animation"></div>
</div>
<div class="navbar-container ">
<nav class="navbar navbar-expand-lg navbar-dark" data-overlay data-sticky="top">
<div class="container">
<a class="navbar-brand fade-page" href="index.html">
<img src="assets/img/logo-white.svg" alt="Leap">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
<img class="icon navbar-toggler-open" src="assets/img/icons/interface/menu.svg" alt="menu interface icon" data-inject-svg />
<img class="icon navbar-toggler-close" src="assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
</button>
<div class="collapse navbar-collapse justify-content-end">
<div class="py-2 py-lg-0">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Demos</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu"><a href="home-course.html" class="dropdown-item fade-page">Course</a><a href="home-coworking.html" class="dropdown-item fade-page">Coworking<span class="badge badge-primary ml-2">New</span></a><a href="home-cryptocurrency.html" class="dropdown-item fade-page">Cryptocurrency</a>
<a
href="home-desktop-app.html" class="dropdown-item fade-page">Desktop App</a><a href="home-event.html" class="dropdown-item fade-page">Event</a><a href="home-mobile-app.html" class="dropdown-item fade-page">Mobile App</a><a href="home-portfolio.html" class="dropdown-item fade-page">Portfolio</a>
<a
href="home-saas.html" class="dropdown-item fade-page">SaaS</a><a href="home-saas-trend.html" class="dropdown-item fade-page">SaaS - Trend</a><a href="home-software-library.html" class="dropdown-item fade-page">Software Library</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Pages</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu"><a href="about-company.html" class="dropdown-item fade-page">About Company</a>
<div class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
<span>Careers</span>
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu"><a href="careers.html" class="dropdown-item fade-page">Careers</a><a href="career-single.html" class="dropdown-item fade-page">Career Single</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
<span>Contact</span>
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu"><a href="contact.html" class="dropdown-item fade-page">Contact</a><a href="contact-multiple-locations.html" class="dropdown-item fade-page">Contact - Multiple Locations</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
<span>Customers</span>
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu"><a href="customer-stories.html" class="dropdown-item fade-page">Customer Stories</a><a href="customer-story.html" class="dropdown-item fade-page">Customer Story</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
<span>Knowledgebase</span>
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu"><a href="knowledgebase.html" class="dropdown-item fade-page">Knowledgebase</a><a href="knowledgebase-category.html" class="dropdown-item fade-page">Knowledgebase Category</a><a href="knowledgebase-article.html" class="dropdown-item fade-page">Knowledgebase Article</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
<span>Pricing</span>
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu"><a href="pricing-plans.html" class="dropdown-item fade-page">Pricing Plans</a><a href="pricing-plans-table.html" class="dropdown-item fade-page">Pricing Plans Table</a><a href="pricing-slider.html" class="dropdown-item fade-page">Pricing Slider</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
<span>Utility</span>
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu"><a href="404.html" class="dropdown-item fade-page">404</a><a href="utility-coming-soon-subscribe.html" class="dropdown-item fade-page">Coming Soon - Subscribe</a><a href="utility-coming-soon.html" class="dropdown-item fade-page">Coming Soon</a>
<a
href="utility-confirmation-download.html" class="dropdown-item fade-page">Confirmation - Download</a><a href="utility-confirmation-subscription.html" class="dropdown-item fade-page">Confirmation - Subscription</a><a href="utility-legal.html" class="dropdown-item fade-page">Legal</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
<span>Account</span>
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu"><a href="account-onboarding.html" class="dropdown-item fade-page">Onboarding</a><a href="account-sign-in.html" class="dropdown-item fade-page">Sign In</a><a href="account-sign-up.html" class="dropdown-item fade-page">Sign Up</a>
<a
href="account-sign-up-image.html" class="dropdown-item fade-page">Sign Up Image</a><a href="account-forgot-password.html" class="dropdown-item fade-page">Forgot Password</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Blog</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu">
<div class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
<span>Blog Layouts</span>
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu"><a href="blog-cards.html" class="dropdown-item fade-page">Blog Cards</a><a href="blog-masonry.html" class="dropdown-item fade-page">Blog Masonry</a><a href="blog-sidebar.html" class="dropdown-item fade-page">Blog Sidebar</a>
<a
href="blog-magazine.html" class="dropdown-item fade-page">Blog Magazine</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
<span>Article Layouts</span>
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu"><a href="blog-article.html" class="dropdown-item fade-page">Article Basic</a><a href="blog-article-video.html" class="dropdown-item fade-page">Article Video</a><a href="blog-article-image-header.html" class="dropdown-item fade-page">Article Image Header</a>
<a
href="blog-article-image-header-parallax.html" class="dropdown-item fade-page">Article Image Parallax</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Portfolio</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu">
<div class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
<span>Grid Layouts</span>
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu"><a href="portfolio-2-columns.html" class="dropdown-item fade-page">2 Columns</a><a href="portfolio-3-columns.html" class="dropdown-item fade-page">3 Columns</a><a href="portfolio-4-columns.html" class="dropdown-item fade-page">4 Columns</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
<span>Project Layouts</span>
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
</a>
<div class="dropdown-menu row">
<div class="col-auto" data-dropdown-content>
<div class="dropdown-grid-menu"><a href="portfolio-case-study.html" class="dropdown-item fade-page">Case Study</a><a href="portfolio-single-sidebar.html" class="dropdown-item fade-page">Sidebar</a><a href="portfolio-single-slider.html" class="dropdown-item fade-page">Slider</a>
<a
href="portfolio-single-parallax.html" class="dropdown-item fade-page">Parallax</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Elements</a>
<div class="dropdown-menu bg-primary-3 text-light border-bottom">
<div class="container py-4" data-dropdown-content>
<div class="row">
<div class="col-lg col-md-4 mb-3 mb-lg-0">
<h5>Base</h5>
<div><a class="dropdown-item fade-page" href="elements-grid.html">Grid</a><a class="dropdown-item fade-page" href="elements-forms.html">Forms</a><a class="dropdown-item fade-page" href="elements-tables.html">Tables</a><a class="dropdown-item fade-page"
href="elements-typography.html">Typography</a>
</div>
</div>
<div class="col-lg col-md-4 mb-3 mb-lg-0">
<h5>General</h5>
<div><a class="dropdown-item fade-page" href="elements-alerts.html">Alerts</a><a class="dropdown-item fade-page" href="elements-avatars.html">Avatars</a><a class="dropdown-item fade-page" href="elements-badges.html">Badges</a><a class="dropdown-item fade-page"
href="elements-breadcrumbs.html">Breadcrumbs</a><a class="dropdown-item fade-page" href="elements-buttons.html">Buttons</a><a class="dropdown-item fade-page" href="elements-cards.html">Cards</a><a class="dropdown-item fade-page"
href="elements-dropdowns-bootstrap.html">Dropdowns Bootstrap</a><a class="dropdown-item fade-page" href="elements-dropdowns-grid.html">Dropdowns Grid</a><a class="dropdown-item fade-page" href="elements-footers.html">Footers</a>
<a
class="dropdown-item fade-page" href="elements-navbars.html">Navigation</a><a class="dropdown-item fade-page" href="elements-tooltips.html">Tooltips</a><a class="dropdown-item fade-page" href="elements-toasts.html">Toasts</a><a class="dropdown-item fade-page" href="elements-widgets.html">Widgets</a>
</div>
</div>
<div class="col-lg col-md-4 mb-3 mb-lg-0">
<h5>Graphic</h5>
<div><a class="dropdown-item fade-page" href="elements-decorations.html">Decorations</a><a class="dropdown-item fade-page" href="elements-dividers.html">Dividers</a><a class="dropdown-item fade-page" href="elements-icons.html">Icons</a>
<a
class="dropdown-item fade-page" href="elements-icons-reference.html">Icons Reference</a><a class="dropdown-item fade-page" href="elements-processes.html">Processes</a><a class="dropdown-item fade-page" href="elements-progress.html">Progress</a><a class="dropdown-item fade-page" href="elements-pricing.html">Pricing</a>
</div>
</div>
<div class="col-lg col-md-4 mb-3 mb-lg-0">
<h5>Media</h5>
<div><a class="dropdown-item fade-page" href="elements-fancybox.html">Fancybox</a><a class="dropdown-item fade-page" href="elements-isotope.html">Isotope</a><a class="dropdown-item fade-page" href="elements-maps.html">Maps</a><a class="dropdown-item fade-page"
href="elements-flickity.html">Slider Flickity</a><a class="dropdown-item fade-page" href="elements-twitter.html">Twitter Feeds</a><a class="dropdown-item fade-page" href="elements-video-players.html">Video Players</a><a class="dropdown-item fade-page"
href="elements-video-backgrounds.html">Video Backgrounds</a>
</div>
</div>
<div class="col-lg col-md-4 mb-3 mb-lg-0">
<h5>Interactive</h5>
<div><a class="dropdown-item fade-page" href="elements-animations.html">Animations</a><a class="dropdown-item fade-page" href="elements-accordions.html">Accordion</a><a class="dropdown-item fade-page" href="elements-counters.html">Counters</a>
<a
class="dropdown-item fade-page" href="elements-countdown.html">Countdown</a><a class="dropdown-item fade-page" href="elements-date-picker.html">Date Picker</a><a class="dropdown-item fade-page" href="elements-modals.html">Modals</a><a class="dropdown-item fade-page" href="elements-navs.html">Tabs (Nav)</a>
<a
class="dropdown-item fade-page" href="elements-typed-text.html">Typed Text</a><a class="dropdown-item fade-page" href="elements-parallax.html">Parallax</a><a class="dropdown-item fade-page" href="elements-popovers.html">Popovers</a><a class="dropdown-item fade-page" href="elements-wizards.html">Wizards</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Support</a>
<div class="dropdown-menu row">
<div class="col-auto px-0" data-dropdown-content>
<div class="bg-white rounded border shadow-lg o-hidden">
<div class="p-3">
<h6 class="mb-0">Product Support</h6>
</div>
<div class="list-group list-group-flush">
<a href="documentation/index.html" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-3">
<img class="icon icon-md" src="assets/img/icons/theme/files/selected-file.svg" alt="selected-file icon" data-inject-svg />
<div class="text-body ml-3">
<span>Documentation</span>
<div class="text-small text-muted">Get all the information you need</div>
</div>
</a>
<a href="https://themes.zendesk.com/hc/en-us/articles/360000006291-How-do-I-get-help-with-the-theme-I-purchased-" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-3">
<img class="icon icon-md" src="assets/img/icons/theme/communication/chat-4.svg" alt="chat-4 icon" data-inject-svg />
<div class="text-body ml-3">
<span>Looking for answers?</span>
<div class="text-small text-muted">Get support</div>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div><a href="#" class="btn btn-primary ml-lg-3">Purchase Now</a>
</div>
</div>
</nav>
</div>
<div class="article-progress" data-sticky="below-nav">
<progress class="reading-position" value="0"></progress>
<div class="article-progress-wrapper">
<div class="container">
<div class="row">
<div class="col py-2">
<div class="d-flex justify-content-between align-items-center">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Knowledgebase</a>
</li>
<li class="breadcrumb-item">
<a href="#">Category</a>
</li>
</ol>
</nav>
<div class="d-flex align-items-center">
<span class="text-small text-muted">Share:</span>
<div class="d-flex ml-1">
<a href="#" class="mx-1 btn btn-sm btn-round btn-primary">
<img class="icon" src="assets/img/icons/social/twitter.svg" alt="twitter social icon" data-inject-svg />
</a>
<a href="#" class="mx-1 btn btn-sm btn-round btn-primary">
<img class="icon" src="assets/img/icons/social/linkedin.svg" alt="linkedin social icon" data-inject-svg />
</a>
<a href="#" class="mx-1 btn btn-sm btn-round btn-primary">
<img class="icon" src="assets/img/icons/social/facebook.svg" alt="facebook social icon" data-inject-svg />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="bg-primary-3 text-light has-divider" data-overlay>
<img src="assets/img/inner-11.jpg" alt="Image" class="bg-image opacity-50">
<div class="container mt-lg-5">
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-8">
<h1 class="h2 mb-3">Search the Knowledgebase</h1>
<form>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon-1">
<img class="icon" src="assets/img/icons/theme/general/search.svg" alt="search icon" data-inject-svg />
</span>
</div>
<input type="search" class="form-control" placeholder="Search for articles" aria-label="Search" aria-describedby="basic-addon-1">
</div>
</form>
<div class="d-flex text-small">
<span class="text-muted">Popular:</span>
<ul class="list-unstyled d-flex ml-2 flex-wrap">
<li class="mx-1"><a href="#">Security,</a>
</li>
<li class="mx-1"><a href="#">Changing password,</a>
</li>
<li class="mx-1"><a href="#">Manage payments</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="divider">
<img src="assets/img/dividers/divider-2.svg" alt="graphical divider" data-inject-svg />
</div>
</section>
<section class="pb-0 pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-8">
<div class="d-flex justify-content-between align-items-center mb-3">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Knowledgebase</a>
</li>
<li class="breadcrumb-item">
<a href="#">Category</a>
</li>
</ol>
</nav>
<span class="badge bg-primary-alt text-primary">
<img class="icon bg-primary" src="assets/img/icons/interface/heart.svg" alt="heart interface icon" data-inject-svg />21</span>
</div>
<h1>Managing user permissions</h1>
<div class="d-flex align-items-center">
<a href="#">
<img src="assets/img/avatars/male-2.jpg" alt="Avatar" class="avatar mr-2">
</a>
<div>
<div>by <a href="#">Anil Bhaktar</a>
</div>
<div class="text-small text-muted">30th October</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="p-0" data-reading-position>
<div class="container">
<div class="row justify-content-center position-relative">
<div class="col-lg-10 col-xl-8">
<img src="assets/img/inner-5.jpg" alt="Image" class="rounded">
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-7 col-lg-8 col-md-10">
<article class="article">
<p class="lead">
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
<p>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<h4>A heading to shift focus</h4>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus.
</p>
<figure>
<img src="assets/img/article-9.jpg" alt="Image" class="rounded">
<figcaption>A caption to describe the image</figcaption>
</figure>
<p>
Aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<blockquote class="bg-primary-alt">
<div class="h3 mb-2">“We couldnt have done it without the hard-working team from Leap.”</div>
<span class="text-small text-muted"> Harvey Dent (via Tareq I.)</span>
<a href="#" class="btn btn-primary btn-sm">
<img class="icon" src="assets/img/icons/social/twitter.svg" alt="twitter social icon" data-inject-svg />
<span>Tweet</span>
</a>
</blockquote>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
<h5>A minor heading to summarise</h5>
<p>Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
<ul>
<li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam</li>
<li>Corporis suscipit laboriosam</li>
<li>Aspernatur aut odit aut fugit eos qui ratione</li>
<li>Et quasi</li>
</ul>
</article>
</div>
</div>
</div>
</section>
<section class="has-divider">
<div class="container pt-3">
<div class="row justify-content-center">
<div class="col-xl-7 col-lg-8 col-md-10">
<hr>
<div class="d-flex align-items-center">
<span class="text-small mr-1">Share this article:</span>
<div class="d-flex mx-2">
<a href="#" class="btn btn-round btn-primary mx-1">
<img class="icon icon-sm" src="assets/img/icons/social/twitter.svg" alt="twitter social icon" data-inject-svg />
</a>
<a href="#" class="btn btn-round btn-primary mx-1">
<img class="icon icon-sm" src="assets/img/icons/social/facebook.svg" alt="facebook social icon" data-inject-svg />
</a>
<a href="#" class="btn btn-round btn-primary mx-1">
<img class="icon icon-sm" src="assets/img/icons/social/linkedin.svg" alt="linkedin social icon" data-inject-svg />
</a>
</div>
</div>
<hr>
<div class="pt-4 pb-3 text-center">
<h6>Did you find this article helpful?</h6>
<div class="d-flex justify-content-center mb-2">
<a href="#" class="btn btn-outline-primary mx-1">
<img class="icon bg-primary" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
<span>Yes</span>
</a>
<a href="#" class="btn btn-outline-primary mx-1">
<img class="icon bg-primary" src="assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
<span>No</span>
</a>
</div>
<div class="text-small text-muted mb-3 mb-md-6">
4 out of 6 found this helpful
</div>
<div>
<span>Still have questions? <a href="#">Open a Support Ticket</a>
</span>
</div>
</div>
<hr>
<h5 class="my-4">4 Comments</h5>
<ol class="comments">
<li class="comment">
<div class="d-flex align-items-center text-small">
<img src="assets/img/avatars/female-4.jpg" alt="Angela Zhao" class="avatar avatar-sm mr-2">
<div class="text-dark mr-1">Angela Zhao</div>
<div class="text-muted">56 minutes ago</div>
</div>
<div class="my-2">
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div>
<a href="#" class="text-small">Reply</a>
</div>
<ol class="comments">
<li class="comment">
<div class="d-flex align-items-center text-small">
<img src="assets/img/avatars/male-5.jpg" alt="Lenny Sims" class="avatar avatar-sm mr-2">
<div class="text-dark mr-1">Lenny Sims</div>
<div class="text-muted">just now</div>
</div>
<div class="my-2">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div>
<a href="#" class="text-small">Reply</a>
</div>
</li>
</ol>
</li>
<li class="comment">
<div class="d-flex align-items-center text-small">
<img src="assets/img/avatars/female-1.jpg" alt="Sarah Priestly" class="avatar avatar-sm mr-2">
<div class="text-dark mr-1">Sarah Priestly</div>
<div class="text-muted">2 hours ago</div>
</div>
<div class="my-2">
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</div>
<div>
<a href="#" class="text-small">Reply</a>
</div>
</li>
<li class="comment">
<div class="d-flex align-items-center text-small">
<img src="assets/img/avatars/male-1.jpg" alt="Benjamin Cameron" class="avatar avatar-sm mr-2">
<div class="text-dark mr-1">Benjamin Cameron</div>
<div class="text-muted">3 hours ago</div>
</div>
<div class="my-2">
Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
</div>
<div>
<a href="#" class="text-small">Reply</a>
</div>
</li>
</ol>
<hr>
<h5 class="my-4">Post a comment</h5>
<form>
<div class="row">
<div class="col-md-6 mb-1">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" name="comment-name">
</div>
</div>
<div class="col-md-6 mb-1">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address" name="comment-email">
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" name="comment-text" rows="7" placeholder="Comment"></textarea>
</div>
<div class="d-flex align-items-center justify-content-between">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="comment-form-opt-in">
<label class="custom-control-label text-small" for="comment-form-opt-in">Notify me when someone replies</label>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div class="divider">
<img class="bg-primary-alt" src="assets/img/dividers/divider-1.svg" alt="divider graphic" data-inject-svg />
</div>
</section>
<section class="bg-primary-alt">
<div class="container">
<div class="row mb-4">
<div class="col text-center">
<h3 class="h2">Related Articles</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-8">
<a href="#" class="card card-body hover-shadow-sm">
<h4 class="mb-2">Managing your account</h4>
<span>This guide describes best practices when creating and managing assets</span>
<div class="d-flex justify-content-between align-items-center mt-3">
<div class="d-flex align-items-center">
<img src="assets/img/avatars/male-5.jpg" alt="Avatar" class="avatar">
<div class="text-small ml-2">
<span class="d-block">Written by Shane Ginsburgh</span>
<span class="text-muted">Updated Today</span>
</div>
</div>
<span class="badge bg-primary-alt text-primary">
<img class="icon bg-primary" src="assets/img/icons/interface/heart.svg" alt="heart interface icon" data-inject-svg />12
</span>
</div>
</a>
</div>
<div class="col-lg-10 col-xl-8">
<a href="#" class="card card-body hover-shadow-sm">
<h4 class="mb-2">Navigating the interface</h4>
<span>Guides the user through the main features of the interface</span>
<div class="d-flex justify-content-between align-items-center mt-3">
<div class="d-flex align-items-center">
<img src="assets/img/avatars/male-1.jpg" alt="Avatar" class="avatar">
<div class="text-small ml-2">
<span class="d-block">Written by Ben Pearce</span>
<span class="text-muted">Updated Oct 21</span>
</div>
</div>
<span class="badge bg-primary-alt text-primary">
<img class="icon bg-primary" src="assets/img/icons/interface/heart.svg" alt="heart interface icon" data-inject-svg />18
</span>
</div>
</a>
</div>
</div>
</div>
</section>
<footer class="pb-4 bg-primary-3 text-light" id="footer">
<div class="container">
<div class="row mb-5">
<div class="col">
<div class="card card-body border-0 o-hidden mb-0 bg-primary text-light">
<div class="position-relative d-flex flex-column flex-md-row justify-content-between align-items-center">
<div class="h3 text-center mb-md-0">Start building beautiful websites</div>
<a href="#" class="btn btn-lg btn-white">
Purchase Now
</a>
</div>
<div class="decoration layer-0">
<img class="bg-primary-2" src="assets/img/decorations/deco-blob-1.svg" alt="deco-blob-1 decoration" data-inject-svg />
</div>
</div>
</div>
</div>
<div class="row mb-5">
<div class="col-6 col-lg-3 col-xl-2">
<h5>Navigate</h5>
<ul class="nav flex-column">
<li class="nav-item">
<a href="#" class="nav-link">Demos</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Pages</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Portfolio</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Elements</a>
</li>
</ul>
</div>
<div class="col-6 col-lg">
<h5>Contact</h5>
<ul class="list-unstyled">
<li class="mb-3 d-flex">
<img class="icon" src="assets/img/icons/theme/map/marker-1.svg" alt="marker-1 icon" data-inject-svg />
<div class="ml-3">
<span>348 Greenpoint Avenue
<br />Brooklyn, NY</span>
</div>
</li>
<li class="mb-3 d-flex">
<img class="icon" src="assets/img/icons/theme/communication/call-1.svg" alt="call-1 icon" data-inject-svg />
<div class="ml-3">
<span>+61 3928 3324</span>
<span class="d-block text-muted text-small">Mon - Fri 9am - 5pm</span>
</div>
</li>
<li class="mb-3 d-flex">
<img class="icon" src="assets/img/icons/theme/communication/mail.svg" alt="mail icon" data-inject-svg />
<div class="ml-3">
<a href="#">hello@company.io</a>
</div>
</li>
</ul>
</div>
<div class="col-lg-5 col-xl-4 mt-3 mt-lg-0">
<h5>Subscribe</h5>
<p>The latest Leap news, articles, and resources, sent straight to your inbox every month.</p>
<form action="/forms/mailchimp.php" data-form-email novalidate>
<div class="form-row">
<div class="col-12">
<input type="email" class="form-control mb-2" placeholder="Email Address" name="email" required>
</div>
<div class="col-12">
<div class="d-none alert alert-success" role="alert" data-success-message>
Thanks, a member of our team will be in touch shortly.
</div>
<div class="d-none alert alert-danger" role="alert" data-error-message>
Please fill all fields correctly.
</div>
<div data-recaptcha data-sitekey="INSERT_YOUR_RECAPTCHA_V2_SITEKEY_HERE" data-size="invisible" data-badge="bottomleft">
</div>
<button type="submit" class="btn btn-primary btn-loading btn-block" data-loading-text="Sending">
<img class="icon" src="assets/img/icons/theme/code/loading.svg" alt="loading icon" data-inject-svg />
<span>Subscribe</span>
</button>
</div>
</div>
</form>
<small class="text-muted form-text">Well never share your details. See our <a href="#">Privacy Policy</a>
</small>
</div>
</div>
<div class="row justify-content-center mb-2">
<div class="col-auto">
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link">
<img class="icon undefined" src="assets/img/icons/social/instagram.svg" alt="instagram social icon" data-inject-svg />
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<img class="icon undefined" src="assets/img/icons/social/twitter.svg" alt="twitter social icon" data-inject-svg />
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<img class="icon undefined" src="assets/img/icons/social/youtube.svg" alt="youtube social icon" data-inject-svg />
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<img class="icon undefined" src="assets/img/icons/social/medium.svg" alt="medium social icon" data-inject-svg />
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<img class="icon undefined" src="assets/img/icons/social/facebook.svg" alt="facebook social icon" data-inject-svg />
</a>
</li>
</ul>
</div>
</div>
<div class="row justify-content-center">
<div class="col col-md-auto text-center">
<small class="text-muted">&copy;2019 This page is protected by reCAPTCHA and is subject to the Google <a href="https://www.google.com/policies/privacy/">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service.</a>
</small>
</div>
</div>
</div>
</footer>
<a href="#" class="btn back-to-top btn-primary btn-round" data-smooth-scroll data-aos="fade-up" data-aos-offset="2000" data-aos-mirror="true" data-aos-once="false">
<img class="icon" src="assets/img/icons/theme/navigation/arrow-up.svg" alt="arrow-up icon" data-inject-svg />
</a>
<!-- Required vendor scripts (Do not remove) -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/popper.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<!-- Optional Vendor Scripts (Remove the plugin script here and comment initializer script out of index.js if site does not use that feature) -->
<!-- AOS (Animate On Scroll - animates elements into view while scrolling down) -->
<script type="text/javascript" src="assets/js/aos.js"></script>
<!-- Clipboard (copies content from browser into OS clipboard) -->
<script type="text/javascript" src="assets/js/clipboard.js"></script>
<!-- Fancybox (handles image and video lightbox and galleries) -->
<script type="text/javascript" src="assets/js/jquery.fancybox.min.js"></script>
<!-- Flatpickr (calendar/date/time picker UI) -->
<script type="text/javascript" src="assets/js/flatpickr.min.js"></script>
<!-- Flickity (handles touch enabled carousels and sliders) -->
<script type="text/javascript" src="assets/js/flickity.pkgd.min.js"></script>
<!-- Ion rangeSlider (flexible and pretty range slider elements) -->
<script type="text/javascript" src="assets/js/ion.rangeSlider.min.js"></script>
<!-- Isotope (masonry layouts and filtering) -->
<script type="text/javascript" src="assets/js/isotope.pkgd.min.js"></script>
<!-- jarallax (parallax effect and video backgrounds) -->
<script type="text/javascript" src="assets/js/jarallax.min.js"></script>
<script type="text/javascript" src="assets/js/jarallax-video.min.js"></script>
<script type="text/javascript" src="assets/js/jarallax-element.min.js"></script>
<!-- jQuery Countdown (displays countdown text to a specified date) -->
<script type="text/javascript" src="assets/js/jquery.countdown.min.js"></script>
<!-- jQuery smartWizard facilitates steppable wizard content -->
<script type="text/javascript" src="assets/js/jquery.smartWizard.min.js"></script>
<!-- Plyr (unified player for Video, Audio, Vimeo and Youtube) -->
<script type="text/javascript" src="assets/js/plyr.polyfilled.min.js"></script>
<!-- Prism (displays formatted code boxes) -->
<script type="text/javascript" src="assets/js/prism.js"></script>
<!-- ScrollMonitor (manages events for elements scrolling in and out of view) -->
<script type="text/javascript" src="assets/js/scrollMonitor.js"></script>
<!-- Smooth scroll (animation to links in-page)-->
<script type="text/javascript" src="assets/js/smooth-scroll.polyfills.min.js"></script>
<!-- SVGInjector (replaces img tags with SVG code to allow easy inclusion of SVGs with the benefit of inheriting colors and styles)-->
<script type="text/javascript" src="assets/js/svg-injector.umd.production.js"></script>
<!-- TwitterFetcher (displays a feed of tweets from a specified account)-->
<script type="text/javascript" src="assets/js/twitterFetcher_min.js"></script>
<!-- Typed text (animated typing effect)-->
<script type="text/javascript" src="assets/js/typed.min.js"></script>
<!-- Required theme scripts (Do not remove) -->
<script type="text/javascript" src="assets/js/theme.js"></script>
<!-- Removes page load animation when window is finished loading -->
<script type="text/javascript">
window.addEventListener("load", function () { document.querySelector('body').classList.add('loaded'); });
</script>
</body>
</html>