mirror of
https://github.com/responsively-org/responsively-app
synced 2024-11-15 08:57:15 +00:00
176 lines
9.1 KiB
HTML
176 lines
9.1 KiB
HTML
<!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>
|
|
|
|
<section class="min-vh-100 py-5">
|
|
<div class="container">
|
|
<div class="row justify-content-center mb-md-6">
|
|
<div class="col-auto">
|
|
<a href="index.html">
|
|
<img src="assets/img/logo.svg" alt="Leap">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center pt-6">
|
|
<div class="col-lg-5 col-md-6">
|
|
<div class="text-center mb-4">
|
|
<h1 class="mb-2">Get Started</h1>
|
|
<span>Break form input into multiple steps with the Wizard.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<form class="wizard">
|
|
<ul class="d-flex step-circles justify-content-center mb-5">
|
|
<li><a class="nav-link btn" href="#step-1">1</a>
|
|
</li>
|
|
<li><a class="nav-link btn" href="#step-2">2</a>
|
|
</li>
|
|
<li><a class="nav-link btn" href="#step-3">3</a>
|
|
</li>
|
|
</ul>
|
|
<div>
|
|
<div id="step-1" class="active">
|
|
<div class="row justify-content-center">
|
|
<div class="col-xl-4 col-lg-5 col-md-6">
|
|
<div class="form-group">
|
|
<input type="email" class="form-control" placeholder="Email Address">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="password" class="form-control" placeholder="Password">
|
|
<small class="text-muted">Must be at least 8 characters</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="password" class="form-control" placeholder="Confirm Password">
|
|
</div>
|
|
<button class="btn btn-primary sw-btn-next btn-block">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="step-2" class="">
|
|
<div class="row justify-content-center">
|
|
<div class="col-xl-4 col-lg-5 col-md-6">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" placeholder="First Name">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" placeholder="Last Name">
|
|
<small class="text-muted">We will never share your name with others.</small>
|
|
</div>
|
|
<hr>
|
|
<div>
|
|
<div class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input" id="customSwitch1">
|
|
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<button class="btn btn-primary sw-btn-next btn-block">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="step-3" class="">
|
|
<div class="row justify-content-center">
|
|
<div class="col-xl-4 col-lg-5 col-md-6">
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
<select class="custom-select">
|
|
<option selected>Select Menu</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
<img class="icon" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<textarea class="form-control" placeholder="Bio Text" rows="5"></textarea>
|
|
</div>
|
|
<hr>
|
|
<div>
|
|
<div class="custom-control custom-checkbox mb-3">
|
|
<input type="checkbox" class="custom-control-input" id="custom-checkbox-example-1">
|
|
<label class="custom-control-label" for="custom-checkbox-example-1">Check this custom checkbox</label>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<button class="btn btn-primary btn-block" type="submit">Complete Signup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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>
|