responsively-app/website/pages.bak/home-software-library.html
2020-01-30 17:31:32 +05:30

718 lines
44 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-software-library.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 justify-content-between navbar-light border-bottom-0 bg-white" data-sticky="top">
<div class="container">
<div class="col flex-fill px-0 d-flex justify-content-between">
<a class="navbar-brand mr-0 fade-page" href="index.html">
<img src="assets/img/logo.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>
<div class="collapse navbar-collapse col px-0 px-lg-2 flex-fill">
<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>
</div>
<div class="collapse navbar-collapse justify-content-end col flex-fill px-0"><a href="#" class="btn btn-primary ml-lg-3">Purchase Now</a>
</div>
</div>
</nav>
</div>
<section>
<div class="container">
<div class="row justify-content-center text-center mb-6">
<div class="col-xl-8 col-lg-9 col-md-10">
<h1 class="display-4">An attractive landing for your software library.</h1>
<p class="lead">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
<div class="d-flex flex-column flex-sm-row justify-content-center align-items-center align-items-sm-start mt-5">
<div class="d-flex flex-column mx-1 text-center">
<a href="#" class="btn btn-lg btn-primary mb-2">
<img class="icon" src="assets/img/icons/social/github.svg" alt="github social icon" data-inject-svg />
<span>View on Github</span>
</a>
<a href="#" class="text-small hover-arrow">View Documentation</a>
</div>
<a href="#" class="mx-1 btn btn-lg btn-primary-3 mt-3 mt-sm-0">Go Premium</a>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-9">
<div class="rounded bg-primary-3 p-4 text-light text-monospace shadow layer-2">
<div>
<span class="text-primary-2">$</span>
<span data-typed-text data-type-speed="80" data-strings='["npm install leap.js"]' data-loop="true" data-back-delay="2000"></span>
</div>
</div>
<div class="decoration bottom right" data-aos="fade-up">
<img class="bg-primary-2" src="assets/img/decorations/deco-blob-2.svg" alt="deco-blob-2 decoration" data-inject-svg />
</div>
</div>
</div>
</div>
</section>
<section class="pt-0">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-11">
<div class="row">
<div class="col-md-6 d-flex mb-4" data-aos="fade-up" data-aos-delay="100">
<div class="icon-round bg-primary mr-3">
<img class="icon bg-primary" src="assets/img/icons/theme/general/shield-protected.svg" alt="icon" data-inject-svg />
</div>
<div>
<h4 class="mb-2">Authentication</h4>
<p class="lead pr-xl-4">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
<div class="col-md-6 d-flex mb-4" data-aos="fade-up" data-aos-delay="200">
<div class="icon-round bg-primary mr-3">
<img class="icon bg-primary" src="assets/img/icons/theme/code/code.svg" alt="icon" data-inject-svg />
</div>
<div>
<h4 class="mb-2">Developer First</h4>
<p class="lead pr-xl-4">Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-6 d-flex mb-4" data-aos="fade-up" data-aos-delay="300">
<div class="icon-round bg-primary mr-3">
<img class="icon bg-primary" src="assets/img/icons/theme/shopping/box-2.svg" alt="icon" data-inject-svg />
</div>
<div>
<h4 class="mb-2">NPM Package</h4>
<p class="lead pr-xl-4">Amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-6 d-flex mb-4" data-aos="fade-up" data-aos-delay="400">
<div class="icon-round bg-primary mr-3">
<img class="icon bg-primary" src="assets/img/icons/theme/weather/cloudy-night.svg" alt="icon" data-inject-svg />
</div>
<div>
<h4 class="mb-2">Nightly Releases</h4>
<p class="lead pr-xl-4">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col text-center">
<a href="#" class="lead hover-arrow">Explore all features</a>
</div>
</div>
</div>
</section>
<section class="bg-primary-alt has-divider">
<div class="container pb-0">
<div class="row justify-content-center text-center mb-6">
<div class="col-xl-8 col-lg-9">
<h2 class="display-4 mx-xl-6">Build it from the ground up.</h2>
<p class="lead">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.
</p>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-md-4 mb-3 mb-4 mb-md-0" data-aos="fade-up" data-aos-delay="100">
<span class="display-4 text-primary-2 d-block" data-countup data-start="1" data-end="4.89" data-duration="3" data-grouping="true" data-suffix="/5" data-decimal-places="2"></span>
<span class="h6">Average User Rating</span>
</div>
<div class="col-md-4 mb-3 mb-4 mb-md-0" data-aos="fade-up" data-aos-delay="200">
<span class="display-4 text-primary-2 d-block" data-countup data-start="100000" data-end="200000" data-duration="3" data-grouping="true" data-suffix="+"></span>
<span class="h6">Monthly Installs</span>
</div>
<div class="col-md-4 mb-3 mb-4 mb-md-0" data-aos="fade-up" data-aos-delay="300">
<span class="display-4 text-primary-2 d-block" data-countup data-start="1000000" data-end="2394421" data-duration="3" data-grouping="true"></span>
<span class="h6">Total Downloads</span>
</div>
</div>
<div class="row justify-content-center mt-6 mb-lg-n7">
<div class="col-xl-8 col-lg-9 layer-1">
<div class="video-poster shadow-lg rounded mb-3">
<a data-fancybox href="https://vimeo.com/40842620" class="btn btn-lg btn-primary btn-round">
<img class="icon" src="assets/img/icons/theme/media/play.svg" alt="play icon" data-inject-svg />
</a>
<img src="assets/img/software-library-1.jpg" alt="Image">
</div>
</div>
</div>
</div>
<div class="divider">
<img class="bg-primary-3" src="assets/img/dividers/divider-1.svg" alt="divider graphic" data-inject-svg />
</div>
</section>
<section class="bg-primary-3 text-light mb-lg-n7">
<div class="container pb-md-6">
<div class="row mb-4">
<div class="col">
<h2 class="h1">Premium Features</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 d-flex mb-4" data-aos="fade-up" data-aos-delay="100">
<img class="icon" src="assets/img/icons/theme/shopping/wallet.svg" alt="icon" data-inject-svg />
<div class="ml-3">
<h5>Payment Processing</h5>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.
</p>
</div>
</div>
<div class="col-md-4 d-flex mb-4" data-aos="fade-up" data-aos-delay="200">
<img class="icon" src="assets/img/icons/theme/general/settings-1.svg" alt="icon" data-inject-svg />
<div class="ml-3">
<h5>Advanced API</h5>
<p>
Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="col-md-4 d-flex mb-4" data-aos="fade-up" data-aos-delay="300">
<img class="icon" src="assets/img/icons/theme/files/cloud-upload.svg" alt="icon" data-inject-svg />
<div class="ml-3">
<h5>Cloud Storage</h5>
<p>
Amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="col-md-4 d-flex mb-4" data-aos="fade-up" data-aos-delay="400">
<img class="icon" src="assets/img/icons/theme/communication/group.svg" alt="icon" data-inject-svg />
<div class="ml-3">
<h5>Unlimited Collaborators</h5>
<p>
Amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="col-md-4 d-flex mb-4" data-aos="fade-up" data-aos-delay="500">
<img class="icon" src="assets/img/icons/theme/shopping/chart-line-1.svg" alt="icon" data-inject-svg />
<div class="ml-3">
<h5>Analytics API</h5>
<p>
Amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="col-md-4 d-flex mb-4" data-aos="fade-up" data-aos-delay="600">
<img class="icon" src="assets/img/icons/theme/tools/pantone.svg" alt="icon" data-inject-svg />
<div class="ml-3">
<h5>White Labelable</h5>
<p>
Amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="pt-md-0">
<div class="container">
<div class="row">
<div class="col">
<div class="card card-body border-0 o-hidden mb-0 shadow-3d text-light bg-primary">
<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>
</section>
<section class="pt-0">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col">
<h3 class="h1">Developers love Leap</h3>
<p class="lead">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
<div class="row justify-content-center mt-6">
<div class="col-xl-7 col-lg-8 col-md-10">
<div data-flickity='{ "imagesLoaded": true, "wrapAround": true }'>
<div class="carousel-cell mx-md-4">
<div class="card card-body flex-row py-4">
<img src="assets/img/avatars/male-2.jpg" alt="Avatar" class="avatar avatar-lg">
<div class="ml-3">
<h4>
&ldquo;The team were only too happy to help me getting started.&rdquo;
</h4>
<div class="avatar-author d-block">
<h6>Anil Kumar</h6>
<span>Designer</span>
</div>
</div>
</div>
</div>
<div class="carousel-cell mx-md-4">
<div class="card card-body flex-row py-4">
<img src="assets/img/avatars/male-1.jpg" alt="Avatar" class="avatar avatar-lg">
<div class="ml-3">
<h4>
&ldquo;Once again, my expectations have been surpassed Bravo!&rdquo;
</h4>
<div class="avatar-author d-block">
<h6>Benjamin Cameronr</h6>
<span>Designer</span>
</div>
</div>
</div>
</div>
<div class="carousel-cell mx-md-4">
<div class="card card-body flex-row py-4">
<img src="assets/img/avatars/female-4.jpg" alt="Avatar" class="avatar avatar-lg">
<div class="ml-3">
<h4>
&ldquo;What usually takes at least 2 or 3 weeks was reduced to 4 days.&rdquo;
</h4>
<div class="avatar-author d-block">
<h6>Annabelle Porter</h6>
<span>Designer</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pt-0">
<div class="container">
<div class="row text-center mb-5">
<div class="col">
<small class="text-uppercase">Trusted by companies like</small>
</div>
</div>
<div class="row">
<div class="col">
<ul class="d-flex flex-wrap justify-content-center list-unstyled">
<li class="mx-4 mb-md-5" data-aos="fade-up" data-aos-delay="100">
<img class="bg-primary-3 icon icon-md opacity-20" src="assets/img/logos/brand/apple.svg" alt="icon" data-inject-svg />
</li>
<li class="mx-4 mb-md-5" data-aos="fade-up" data-aos-delay="200">
<img class="bg-primary-3 icon icon-md opacity-20" src="assets/img/logos/brand/buzzfeed.svg" alt="icon" data-inject-svg />
</li>
<li class="mx-4 mb-md-5" data-aos="fade-up" data-aos-delay="300">
<img class="bg-primary-3 icon icon-md opacity-20" src="assets/img/logos/brand/intercom.svg" alt="icon" data-inject-svg />
</li>
<li class="mx-4 mb-md-5" data-aos="fade-up" data-aos-delay="400">
<img class="bg-primary-3 icon icon-md opacity-20" src="assets/img/logos/brand/slack.svg" alt="icon" data-inject-svg />
</li>
<li class="mx-4 mb-md-5" data-aos="fade-up" data-aos-delay="500">
<img class="bg-primary-3 icon icon-md opacity-20" src="assets/img/logos/brand/spotify.svg" alt="icon" data-inject-svg />
</li>
</ul>
</div>
</div>
</div>
</section>
<footer class="pb-5 bg-primary-3 text-light">
<div class="container">
<div class="row mb-4 justify-content-center">
<div class="col-auto">
<a href="index.html">
<img src="assets/img/logo-white.svg" alt="Leap" class="icon icon-lg">
</a>
</div>
</div>
<div class="row mb-4">
<div class="col">
<ul class="nav justify-content-center">
<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>
<div class="row justify-content-center mt-5 mb-5">
<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 text-center">
<div class="col-xl-10">
<small class="text-muted">&copy;2019 All Rights Reserved. Your Brand® is a registered trademark of Your Company. Apple and the Apple logo are trademarks of Apple Inc., registered in the U.S. and other countries. Mac App Store is a service mark of Apple Inc. Google
Play and the Google Play logo are trademarks of Google Inc.</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>