responsively-app/website/pages.bak/elements-modals.html
2020-01-30 17:31:32 +05:30

957 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 bg-white navbar-light" data-sticky="top">
<div class="container">
<a class="navbar-brand 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 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="bg-primary-3 header-inner p-0 jarallax position-relative o-hidden" data-overlay>
<div class="container py-0 layer-2">
<div class="row my-3 text-light">
<div class="col">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Elements</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Modals</li>
</ol>
</nav>
</div>
</div>
<div class="row my-4 my-md-6 text-light" data-aos="fade-up">
<div class="col-lg-9 col-xl-6">
<h1 class="display-4">Modals</h1>
<p class="lead mb-0">Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
</div>
<div class="alert alert-primary mb-5">
<div class="d-flex">
<img class="icon bg-primary" src="assets/img/icons/theme/files/selected-file.svg" alt="selected-file icon" data-inject-svg />
<div class="ml-2 flex-grow-1">
This page demonstrates Modals functionality, <a target="_blank" href="http://getbootstrap.com/docs/4.3/components/modal/">See Bootstrap Documentation</a> for a detailed technical explanation.
</div>
</div>
</div>
</div>
<div class="decoration right middle-y scale-4">
<img class="bg-primary" src="assets/img/decorations/deco-blob-3.svg" alt="deco-blob-3 decoration" data-inject-svg />
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col d-flex flex-wrap">
<div class="m-1">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sign-in-modal">
Sign In
</button>
<div class="modal fade" id="sign-in-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<img class="icon bg-dark" src="assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
</button>
<div class="m-xl-4 m-3">
<div class="text-center mb-4">
<h4 class="h3 mb-1">Welcome back</h4>
<span>Enter your account details below</span>
</div>
<form>
<div class="form-group">
<input type="email" name="login-email" placeholder="Email Address" class="form-control">
</div>
<div class="form-group">
<input type="password" name="login-password" placeholder="Password" class="form-control">
<small><a href="#">Forgot your password?</a>
</small>
</div>
<div class="form-group">
<button class="btn-block btn btn-primary" type="submit">Sign in</button>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="login-remember">
<label class="custom-control-label text-small text-muted" for="login-remember">Keep me signed in</label>
</div>
<hr>
<div class="text-center text-small text-muted">
<span>Don't have an account yet? <a href="#">Create one</a>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="m-1">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sign-up-modal">
Sign Up
</button>
<div class="modal fade" id="sign-up-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<img class="icon bg-dark" src="assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
</button>
<div class="m-xl-4 m-3">
<div class="text-center mb-4">
<h4 class="h3 mb-1">Create Account</h4>
<span>No credit card required</span>
</div>
<form>
<div class="form-group">
<input type="email" name="signup-email" placeholder="Email Address" class="form-control">
</div>
<div class="form-group">
<input type="password" name="signup-password" placeholder="Password" class="form-control">
<small class="text-muted">Must be at least 8 characters</small>
</div>
<div class="form-group">
<input type="password" name="signup-password-confirm" placeholder="Confirm password" class="form-control">
</div>
<div class="form-group">
<button class="btn-block btn btn-primary" type="submit">Sign in</button>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="signup-agree">
<label class="custom-control-label text-small text-muted" for="signup-agree">I agree to the <a href="#">Terms &amp;
Conditions</a>
</label>
</div>
<hr>
<div class="text-center text-small text-muted">
<span>Already have an account yet? <a href="#">Sign In</a>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="m-1">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#subscribe-modal">
Subscribe
</button>
<div class="modal fade" id="subscribe-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<img class="icon bg-dark" src="assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
</button>
<div class="m-xl-4 m-3">
<div class="icon-round icon-round-lg bg-primary mx-auto mb-4">
<img class="icon bg-primary" src="assets/img/icons/theme/communication/mail-opened.svg" alt="mail-opened icon" data-inject-svg />
</div>
<div class="text-center mb-4">
<h4 class="h3 mb-1">Subscribe</h4>
<p>Subscribe and receive our newsletters to follow the news about our fresh and fantastic products.</p>
</div>
<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>
</div>
</div>
</div>
<div class="m-1">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#subscribe-image-modal">
Subscribe Image
</button>
<div class="modal fade" id="subscribe-image-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content bg-primary text-light border-0">
<img src="assets/img/inner-6.jpg" alt="Image" class="bg-image blend-mode-multiply rounded opacity-50">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<img class="icon bg-white" src="assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
</button>
<div class="m-xl-6 m-3 text-center">
<div class="mb-4">
<h4 class="display-4">Stay in the loop</h4>
<p class="lead">Subscribe and receive our newsletters to follow the news about our fresh and fantastic products.
</p>
</div>
<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-3 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>
</div>
</div>
</div>
<div class="m-1">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirmation-modal">
Confirmation
</button>
<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<img class="icon bg-dark" src="assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
</button>
<div class="m-xl-4 m-3">
<div class="icon-round icon-round-lg bg-primary mx-auto mb-4">
<img class="icon bg-primary" src="assets/img/icons/theme/communication/readed-mail.svg" alt="readed-mail icon" data-inject-svg />
</div>
<div class="text-center mb-4">
<h4 class="h3">Check Your Inbox</h4>
<p>We have just sent further instructions for activating your account to <strong>name@company.io</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="m-1">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#promo-modal">
Promo
</button>
<div class="modal fade" id="promo-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content bg-primary-3 text-light border-0">
<img src="assets/img/inner-10.jpg" alt="Image" class="bg-image rounded opacity-50">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<img class="icon bg-white" src="assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
</button>
<div class="m-xl-6 m-3 text-center">
<div class="mb-4">
<span>Enter your email and get</span>
<h4 class="display-4 mt-3">Get 30% off your first purchase.</h4>
</div>
<form data-form-email action="/forms/mailchimp.php" novalidate>
<div class="d-md-flex mb-3 justify-content-center">
<input type="email" name="email" class="mx-1 form-control form-control-lg mb-2 mb-md-0" placeholder="Email Address" required>
<button type="submit" class="mx-1 btn btn-primary btn-lg btn-loading" data-loading-text="Sending">
<img class="icon" src="assets/img/icons/theme/code/loading.svg" alt="loading icon" data-inject-svg />
<span>Redeem</span>
</button>
</div>
<div>
<div class="d-none alert alert-success" role="alert" data-success-message>
Thanks, please check your inbox for your promo code.
</div>
<div class="d-none alert alert-danger" role="alert" data-error-message>
Please fill all fields correctly.
</div>
</div>
<div data-recaptcha data-sitekey="INSERT_YOUR_RECAPTCHA_V2_SITEKEY_HERE" data-size="invisible" data-badge="bottomleft"></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>
</div>
</div>
</div>
<div class="m-1">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cookies-modal">
Cookies
</button>
<div class="modal fade" id="cookies-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="d-flex m-2 align-items-center">
<img src="assets/img/flags/eu.svg" alt="EU Flag" class="icon icon-lg">
<div class="mx-3">
Our site uses cookies to ensure the best browsing experience possible. See our <a href="#">Privacy Policy</a> for more details.
</div>
<button class="btn btn-primary" data-dismiss="modal">Agree &amp; continue</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="m-1">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#contact-box-modal">
Contact Box
</button>
<div class="modal fade" id="contact-box-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<img class="icon bg-dark" src="assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
</button>
<div class="m-3">
<ul class="avatars justify-content-center">
<li>
<img src="assets/img/avatars/male-1.jpg" alt="Avatar" class="avatar avatar-lg">
</li>
<li>
<img src="assets/img/avatars/female-1.jpg" alt="Avatar" class="avatar avatar-lg">
</li>
<li>
<img src="assets/img/avatars/male-2.jpg" alt="Avatar" class="avatar avatar-lg">
</li>
<li>
<img src="assets/img/avatars/female-4.jpg" alt="Avatar" class="avatar avatar-lg">
</li>
</ul>
<div class="text-center my-3">
<h4 class="h3 mb-1">Contact Support</h4>
<p>
Please get in touch for any questions you may have. We typically reply within 24 hours.
</p>
</div>
<form action="/forms/smtp.php" data-form-email novalidate>
<div class="form-group">
<input type="text" class="form-control" name="contact-name" placeholder="Your Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" name="contact-email" placeholder="Email Address" required>
</div>
<div class="form-group">
<textarea name="contact-box-message" rows="5" class="form-control" placeholder="Type your message here" required></textarea>
</div>
<div data-recaptcha data-sitekey="INSERT_YOUR_RECAPTCHA_V2_SITEKEY_HERE"></div>
<div class="d-none alert alert-danger" role="alert" data-error-message>
Please fill all fields correctly.
</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>
<button type="submit" class="btn btn-block 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>Send</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="m-1">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#contact-confirmation-modal">
Contact Confirmation
</button>
<div class="modal fade" id="contact-confirmation-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog text-light" role="document">
<div class="modal-content bg-success border-0">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<img class="icon bg-white" src="assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
</button>
<div class="m-3 d-flex align-items-center">
<img src="assets/img/avatars/female-1.jpg" alt="Avatar" class="avatar avatar-lg">
<div class="ml-3">
<h5 class="mb-1">Message recieved!</h5>
<span>Thank you for your enquiry. We'll respond as quick as we can.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="m-1">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#download-app-modal">
Download App
</button>
<div class="modal fade" id="download-app-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<img class="icon bg-dark" src="assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
</button>
<div class="d-flex m-2 align-items-center">
<a href="#" class="flex-shrink-0">
<img src="assets/img/app-icon.svg" alt="Icon" class="rounded">
</a>
<div class="mx-3">
<h5 class="mb-1">Leap iOS App</h5>
<span>For the complete experience, download the Leap iOS app</span>
</div>
<a href="#" class="btn btn-primary">
<img class="icon" src="assets/img/icons/social/apple.svg" alt="apple social icon" data-inject-svg />
<span>Download</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="m-1">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#achievement-modal">
Achievement
</button>
<div class="modal fade" id="achievement-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-primary border-0 text-light">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<img class="icon bg-white" src="assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
</button>
<div class="m-xl-4 m-3">
<div class="icon-round icon-round-lg bg-white mx-auto mb-4">
<img class="icon bg-white" src="assets/img/icons/theme/general/star.svg" alt="star icon" data-inject-svg />
</div>
<div class="text-center mb-4">
<h4 class="h3">Level 2 Unlocked!</h4>
<div class="progress bg-primary-alt my-3">
<div class="progress-bar bg-primary-3" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>You're on your way to becoming an elite contributor. Keep up the great work!</p>
<a href="#" class="btn btn-white" data-dismiss="modal">Continue</a>
</div>
</div>
</div>
</div>
</div>
</div>
</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>