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

1083 lines
60 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 bg-transparent" data-overlay>
<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>
<section class="controls-inside controls-light p-0" data-flickity='{ "imagesLoaded": true, "wrapAround": true }'>
<div class="carousel-cell bg-dark text-light overlay min-vh-70 d-flex flex-column justify-content-end">
<img src="assets/img/article-9.jpg" alt="Image" class="bg-image opacity-80">
<div class="container">
<div class="row pb-6">
<div class="col">
<a href="#">
<span class="badge badge-primary">Business</span>
<h1 class="mt-3">Interview with Leap founder Anna Perez</h1>
<div class="d-flex align-items-center">
<img src="assets/img/avatars/female-3.jpg" alt="Avatar" class="avatar mr-2">
<div>
<div class="flex-shrink-0">by Abby Sims</div>
<div class="text-small text-muted">29th November</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="carousel-cell bg-dark text-light overlay min-vh-70 d-flex flex-column justify-content-end">
<img src="assets/img/article-10.jpg" alt="Image" class="bg-image opacity-80">
<div class="container">
<div class="row pb-6">
<div class="col">
<a href="#">
<span class="badge badge-primary">Design</span>
<h1 class="mt-3">Productivity in the remote work era</h1>
<div class="d-flex align-items-center">
<img src="assets/img/avatars/male-4.jpg" alt="Avatar" class="avatar mr-2">
<div>
<div class="flex-shrink-0">by Cedric</div>
<div class="text-small text-muted">27th November</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="carousel-cell bg-dark text-light overlay min-vh-70 d-flex flex-column justify-content-end">
<img src="assets/img/article-11.jpg" alt="Image" class="bg-image opacity-80">
<div class="container">
<div class="row pb-6">
<div class="col">
<a href="#">
<span class="badge badge-primary">Business</span>
<h1 class="mt-3">A complete guide to approaching a VC</h1>
<div class="d-flex align-items-center">
<img src="assets/img/avatars/male-1.jpg" alt="Avatar" class="avatar mr-2">
<div>
<div class="flex-shrink-0">by Ben Cameron</div>
<div class="text-small text-muted">23rd November</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="py-6">
<div class="container">
<div class="row">
<div class="col">
<a href="#" class="bg-primary-3-alt rounded p-4 d-flex align-items-center justify-content-center min-vh-20">
<span class="text-small text-primary-3">Advertisement</span>
</a>
</div>
</div>
</div>
</section>
<section class="pt-0">
<div class="container">
<div class="row">
<div class="col">
<h3 class="h2">Featured</h3>
</div>
</div>
<div class="row">
<div class="col-md-7 col-lg-8 d-flex">
<a href="#" class="card card-body overlay border-0 text-light mb-md-0 justify-content-end">
<div class="position-relative">
<span class="badge badge-primary">Tech</span>
<div class="my-3">
<h2>Choosing the right build tools for your next project</h2>
</div>
<div class="d-flex align-items-center">
<img src="assets/img/avatars/female-4.jpg" alt="Avatar" class="avatar avatar-sm mr-2">
<div>
<div class="flex-shrink-0">by Annabelle Roberts</div>
</div>
</div>
</div>
<img src="assets/img/article-8.jpg" alt="Image" class="rounded bg-image">
</a>
</div>
<div class="col-md-5 col-lg-4">
<ul class="list-unstyled list-articles">
<li class="row row-tight">
<a href="#" class="col-3 col-md-4">
<img src="assets/img/article-1.jpg" alt="Image" class="rounded">
</a>
<div class="col d-flex flex-column justify-content-between">
<div>
<a href="#">
<h6 class="mb-1">How to build collateral</h6>
</a>
<div class="d-flex text-small">
<a href="#">Business</a>
<span class="text-muted ml-1">29th November</span>
</div>
</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>
</div>
</li>
<li class="row row-tight">
<a href="#" class="col-3 col-md-4">
<img src="assets/img/article-2.jpg" alt="Image" class="rounded">
</a>
<div class="col d-flex flex-column justify-content-between">
<div>
<a href="#">
<h6 class="mb-1">Forging your path</h6>
</a>
<div class="d-flex text-small">
<a href="#">Design</a>
<span class="text-muted ml-1">27th November</span>
</div>
</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 />23
</span>
</div>
</div>
</li>
<li class="row row-tight">
<a href="#" class="col-3 col-md-4">
<img src="assets/img/article-3.jpg" alt="Image" class="rounded">
</a>
<div class="col d-flex flex-column justify-content-between">
<div>
<a href="#">
<h6 class="mb-1">Securing your Series A</h6>
</a>
<div class="d-flex text-small">
<a href="#">Business</a>
<span class="text-muted ml-1">23rd November</span>
</div>
</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 />82
</span>
</div>
</div>
</li>
<li class="row row-tight">
<a href="#" class="col-3 col-md-4">
<img src="assets/img/article-4.jpg" alt="Image" class="rounded">
</a>
<div class="col d-flex flex-column justify-content-between">
<div>
<a href="#">
<h6 class="mb-1">Planning for change</h6>
</a>
<div class="d-flex text-small">
<a href="#">Finance</a>
<span class="text-muted ml-1">16th November</span>
</div>
</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 />93
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="pt-0">
<div class="container">
<div class="row">
<div class="col">
<h3 class="h2">Popular</h3>
</div>
</div>
<div class="row mb-4">
<div class="col-md-8 col-lg-9">
<div class="pr-lg-4">
<a href="#" class="card card-body justify-content-between bg-primary text-light">
<div class="d-flex justify-content-between mb-3">
<div class="text-small d-flex">
<div class="mr-2">
Links
</div>
<span class="opacity-70">19th December</span>
</div>
<span class="badge bg-primary-alt text-primary">
<img class="icon icon-sm bg-primary" src="assets/img/icons/interface/heart.svg" alt="heart interface icon" data-inject-svg />27
</span>
</div>
<div>
<h2>A time-tracking app that isnt a pain.</h2>
<span class="text-small opacity-70">http://www.website.io/link</span>
</div>
</a>
</div>
<div class="pr-lg-4">
<div class="card card-article-wide flex-md-row no-gutters">
<a href="#" class="col-md-4">
<img src="assets/img/article-1.jpg" alt="Image" class="card-img-top">
</a>
<div class="card-body d-flex flex-column col-auto p-4">
<div class="d-flex justify-content-between mb-3">
<div class="text-small d-flex">
<div class="mr-2">
<a href="#">Business</a>
</div>
<span class="text-muted">29th November</span>
</div>
<span class="badge bg-primary-alt text-primary">
<img class="icon icon-sm bg-primary" src="assets/img/icons/interface/heart.svg" alt="heart interface icon" data-inject-svg />12
</span>
</div>
<a href="#" class="flex-grow-1">
<h3>How to build collateral</h3>
</a>
<div class="d-flex align-items-center mt-3">
<img src="assets/img/avatars/female-3.jpg" alt="Image" class="avatar avatar-sm">
<div class="ml-1">
<span class="text-small text-muted">By</span>
<span class="text-small">Abby Sims</span>
</div>
</div>
</div>
</div>
</div>
<div class="pr-lg-4">
<div class="card card-article-wide flex-md-row no-gutters">
<a href="#" class="col-md-4">
<img src="assets/img/article-2.jpg" alt="Image" class="card-img-top">
</a>
<div class="card-body d-flex flex-column col-auto p-4">
<div class="d-flex justify-content-between mb-3">
<div class="text-small d-flex">
<div class="mr-2">
<a href="#">Design</a>
</div>
<span class="text-muted">27th November</span>
</div>
<span class="badge bg-primary-alt text-primary">
<img class="icon icon-sm bg-primary" src="assets/img/icons/interface/heart.svg" alt="heart interface icon" data-inject-svg />23
</span>
</div>
<a href="#" class="flex-grow-1">
<h3>Forging your path</h3>
</a>
<div class="d-flex align-items-center mt-3">
<img src="assets/img/avatars/male-4.jpg" alt="Image" class="avatar avatar-sm">
<div class="ml-1">
<span class="text-small text-muted">By</span>
<span class="text-small">Cedric</span>
</div>
</div>
</div>
</div>
</div>
<div class="pr-lg-4">
<div class="card card-article-wide flex-md-row no-gutters">
<a href="#" class="col-md-4">
<img src="assets/img/article-3.jpg" alt="Image" class="card-img-top">
</a>
<div class="card-body d-flex flex-column col-auto p-4">
<div class="d-flex justify-content-between mb-3">
<div class="text-small d-flex">
<div class="mr-2">
<a href="#">Business</a>
</div>
<span class="text-muted">23rd November</span>
</div>
<span class="badge bg-primary-alt text-primary">
<img class="icon icon-sm bg-primary" src="assets/img/icons/interface/heart.svg" alt="heart interface icon" data-inject-svg />82
</span>
</div>
<a href="#" class="flex-grow-1">
<h3>Securing your Series A</h3>
</a>
<div class="d-flex align-items-center mt-3">
<img src="assets/img/avatars/male-1.jpg" alt="Image" class="avatar avatar-sm">
<div class="ml-1">
<span class="text-small text-muted">By</span>
<span class="text-small">Ben Cameron</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 d-none d-md-block">
<div class="sticky-top pb-3">
<a href="#" class="bg-primary-3-alt rounded p-4 d-flex align-items-center justify-content-center min-vh-30">
<span class="text-small text-primary-3">Advertisement</span>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="bg-primary-alt">
<div class="container">
<div class="row mb-4">
<div class="col">
<h3 class="h2">Browse Categories</h3>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-3 d-flex" data-aos="fade-up" data-aos-delay="100">
<a href="#" class="card card-body hover-shadow-3d">
<div class="icon-round mb-3 mb-md-5 icon bg-primary">
<img class="icon bg-primary" src="assets/img/icons/theme/devices/display-1.svg" alt="icon" data-inject-svg />
</div>
<div>
<h5 class="mb-1">Technology</h5>
<span>4 Articles</span>
</div>
</a>
</div>
<div class="col-md-6 col-lg-3 d-flex" data-aos="fade-up" data-aos-delay="200">
<a href="#" class="card card-body hover-shadow-3d bg-primary text-light">
<div class="icon-round mb-3 mb-md-5 icon bg-white">
<img class="icon bg-white" src="assets/img/icons/theme/shopping/chart-bar-1.svg" alt="icon" data-inject-svg />
</div>
<div>
<h5 class="mb-1">Business</h5>
<span>12 Articles</span>
</div>
</a>
</div>
<div class="col-md-6 col-lg-3 d-flex" data-aos="fade-up" data-aos-delay="300">
<a href="#" class="card card-body hover-shadow-3d bg-primary-2 text-light">
<div class="icon-round mb-3 mb-md-5 icon bg-white">
<img class="icon bg-white" src="assets/img/icons/theme/layout/layout-top-panel-2.svg" alt="icon" data-inject-svg />
</div>
<div>
<h5 class="mb-1">Design</h5>
<span>9 Articles</span>
</div>
</a>
</div>
<div class="col-md-6 col-lg-3 d-flex" data-aos="fade-up" data-aos-delay="400">
<a href="#" class="card card-body hover-shadow-3d bg-primary-3 text-light">
<div class="icon-round mb-3 mb-md-5 icon bg-white">
<img class="icon bg-white" src="assets/img/icons/theme/food/coffee-1.svg" alt="icon" data-inject-svg />
</div>
<div>
<h5 class="mb-1">Lifestyle</h5>
<span>6 Articles</span>
</div>
</a>
</div>
</div>
</div>
</section>
<section class="py-6">
<div class="container">
<div class="row">
<div class="col">
<a href="#" class="bg-primary-3-alt rounded p-4 d-flex align-items-center justify-content-center min-vh-20">
<span class="text-small text-primary-3">Advertisement</span>
</a>
</div>
</div>
</div>
</section>
<section class="p-0">
<div class="container">
<div class="row">
<div class="col">
<h3 class="h2">Latest</h3>
</div>
</div>
<div class="row mb-4">
<div class="col-md-6 col-lg-4 d-flex">
<a href="#" class="card card-body justify-content-between bg-primary text-light">
<div class="d-flex justify-content-between mb-3">
<div class="text-small d-flex">
<div class="mr-2">
Links
</div>
<span class="opacity-70">19th December</span>
</div>
<span class="badge bg-primary-alt text-primary">
<img class="icon icon-sm bg-primary" src="assets/img/icons/interface/heart.svg" alt="heart interface icon" data-inject-svg />27
</span>
</div>
<div>
<h2>A time-tracking app that isnt a pain.</h2>
<span class="text-small opacity-70">http://www.website.io/link</span>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 d-flex">
<div class="card">
<a href="#">
<img src="assets/img/article-1.jpg" alt="Image" class="card-img-top">
</a>
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between mb-3">
<div class="text-small d-flex">
<div class="mr-2">
<a href="#">Business</a>
</div>
<span class="text-muted">29th November</span>
</div>
<span class="badge bg-primary-alt text-primary">
<img class="icon icon-sm bg-primary" src="assets/img/icons/interface/heart.svg" alt="heart interface icon" data-inject-svg />12
</span>
</div>
<a href="#">
<h4>How to build collateral</h4>
</a>
<p class="flex-grow-1">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</p>
<div class="d-flex align-items-center mt-3">
<img src="assets/img/avatars/female-3.jpg" alt="Image" class="avatar avatar-sm">
<div class="ml-1">
<span class="text-small text-muted">By</span>
<span class="text-small">Abby Sims</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 d-flex">
<div class="card">
<a href="#">
<img src="assets/img/article-2.jpg" alt="Image" class="card-img-top">
</a>
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between mb-3">
<div class="text-small d-flex">
<div class="mr-2">
<a href="#">Design</a>
</div>
<span class="text-muted">27th November</span>
</div>
<span class="badge bg-primary-alt text-primary">
<img class="icon icon-sm bg-primary" src="assets/img/icons/interface/heart.svg" alt="heart interface icon" data-inject-svg />23
</span>
</div>
<a href="#">
<h4>Forging your path</h4>
</a>
<p class="flex-grow-1">
Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</p>
<div class="d-flex align-items-center mt-3">
<img src="assets/img/avatars/male-4.jpg" alt="Image" class="avatar avatar-sm">
<div class="ml-1">
<span class="text-small text-muted">By</span>
<span class="text-small">Cedric</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 d-flex">
<div class="card">
<a href="#">
<img src="assets/img/article-3.jpg" alt="Image" class="card-img-top">
</a>
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between mb-3">
<div class="text-small d-flex">
<div class="mr-2">
<a href="#">Business</a>
</div>
<span class="text-muted">23rd November</span>
</div>
<span class="badge bg-primary-alt text-primary">
<img class="icon icon-sm bg-primary" src="assets/img/icons/interface/heart.svg" alt="heart interface icon" data-inject-svg />82
</span>
</div>
<a href="#">
<h4>Securing your Series A</h4>
</a>
<p class="flex-grow-1">
Voluptatem accusantium doloremque laudantium.
</p>
<div class="d-flex align-items-center mt-3">
<img src="assets/img/avatars/male-1.jpg" alt="Image" class="avatar avatar-sm">
<div class="ml-1">
<span class="text-small text-muted">By</span>
<span class="text-small">Ben Cameron</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 d-flex">
<div class="card card-body justify-content-between bg-primary-2 text-light">
<div class="d-flex justify-content-between mb-3">
<div class="text-small d-flex">
<div class="mr-2">
<a href="#">Quotes</a>
</div>
<span class="opacity-70">16th November</span>
</div>
<span class="badge bg-primary text-light">
<img class="icon icon-sm bg-white" src="assets/img/icons/interface/heart.svg" alt="heart interface icon" data-inject-svg />93
</span>
</div>
<div>
<h2>&ldquo;You either get acquired like Trello or live long enough to see yourself become JIRA&rdquo;</h2>
<span class="text-small opacity-70"> Anne Souzakis</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 d-flex">
<div class="card">
<a href="#">
<img src="assets/img/article-4.jpg" alt="Image" class="card-img-top">
</a>
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between mb-3">
<div class="text-small d-flex">
<div class="mr-2">
<a href="#">Finance</a>
</div>
<span class="text-muted">16th November</span>
</div>
<span class="badge bg-primary-alt text-primary">
<img class="icon icon-sm bg-primary" src="assets/img/icons/interface/heart.svg" alt="heart interface icon" data-inject-svg />93
</span>
</div>
<a href="#">
<h4>Planning for change</h4>
</a>
<p class="flex-grow-1">
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</p>
<div class="d-flex align-items-center mt-3">
<img src="assets/img/avatars/female-4.jpg" alt="Image" class="avatar avatar-sm">
<div class="ml-1">
<span class="text-small text-muted">By</span>
<span class="text-small">Anne Souzakis</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pt-5">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-xl-7 col-lg-8 col-md-10">
<h3 class="h2 mb-5">Get great articles direct to your inbox</h3>
<form action="/forms/mailchimp.php" data-form-email novalidate>
<div class="d-sm-flex flex-column flex-sm-row mb-3 justify-content-center">
<input type="email" name="email" class="mr-sm-1 mb-2 mb-sm-0 form-control form-control-lg" placeholder="Email Address" required>
<div data-recaptcha data-sitekey="INSERT_YOUR_RECAPTCHA_V2_SITEKEY_HERE" data-size="invisible" data-badge="bottomleft"></div>
<button type="submit" class="ml-sm-1 btn btn-lg btn-primary btn-loading" 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>
<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>
</form>
<div class="text-small text-muted">
Well never share your details with third parties.
<br class="visible-md" />View our <a href="#">Privacy Policy</a> for more info.
</div>
</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>