1405 lines
59 KiB
HTML
1405 lines
59 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="../assets/favicon/favicon.ico" type="image/x-icon" />
|
||
|
||
<!-- Map CSS -->
|
||
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" />
|
||
|
||
<!-- Libs CSS -->
|
||
<link rel="stylesheet" href="../assets/css/libs.bundle.css" />
|
||
|
||
<!-- Theme CSS -->
|
||
<link rel="stylesheet" href="../assets/css/theme.bundle.css" />
|
||
|
||
<!-- Title -->
|
||
<title>Landkit</title>
|
||
</head>
|
||
<body class="bg-light" style="padding-top: 84px;">
|
||
|
||
<!-- MODALS -->
|
||
<!-- Example -->
|
||
<div class="modal fade" id="modalExample" tabindex="-1" role="dialog" aria-labelledby="modalExampleTitle" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
|
||
<!-- Close -->
|
||
<button type="button" class="modal-close close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
|
||
<!-- Image -->
|
||
<div class="text-center">
|
||
<img src="../assets/img/illustrations/illustration-1.png" alt="..." class="img-fluid mb-3" style="width: 200px;">
|
||
</div>
|
||
|
||
<!-- Heading -->
|
||
<h2 class="font-weight-bold text-center mb-1" id="modalExampleTitle">
|
||
Schedule a demo with us
|
||
</h2>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-lg text-center text-muted mb-6 mb-md-8">
|
||
We can help you solve company communication.
|
||
</p>
|
||
|
||
<!-- Form -->
|
||
<form>
|
||
<div class="row">
|
||
<div class="col-12 col-md-6">
|
||
|
||
<!-- First name -->
|
||
<div class="form-label-group">
|
||
<input type="text" class="form-control form-control-flush" id="registrationFirstNameModal" placeholder="First name">
|
||
<label for="registrationFirstNameModal">First name</label>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
|
||
<!-- Last name -->
|
||
<div class="form-label-group">
|
||
<input type="text" class="form-control form-control-flush" id="registrationLastNameModal" placeholder="Last name">
|
||
<label for="registrationLastNameModal">Last name</label>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12 col-md-6">
|
||
|
||
<!-- Email -->
|
||
<div class="form-label-group">
|
||
<input type="email" class="form-control form-control-flush" id="registrationEmailModal" placeholder="Email">
|
||
<label for="registrationEmailModal">Email</label>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
|
||
<!-- Password -->
|
||
<div class="form-label-group">
|
||
<input type="password" class="form-control form-control-flush" id="registrationPasswordModal" placeholder="Password">
|
||
<label for="registrationPasswordModal">Password</label>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
|
||
<!-- Submit -->
|
||
<button class="btn btn-block btn-primary mt-3 lift">
|
||
Request a demo
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Signup: Horizontal -->
|
||
<div class="modal fade" id="modalSignupHorizontal" tabindex="-1" role="dialog" aria-labelledby="modalSignupHorizontalTitle" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="card card-row">
|
||
<div class="row gx-0">
|
||
<div class="col-12 col-md-6 bg-cover card-img-left" style="background-image: url(../assets/img/photos/photo-8.jpg);">
|
||
|
||
<!-- Image (placeholder) -->
|
||
<img src="../assets/img/photos/photo-8.jpg" alt="..." class="img-fluid d-md-none invisible">
|
||
|
||
<!-- Shape -->
|
||
<div class="shape shape-right shape-fluid-y svg-shim text-white d-none d-md-block">
|
||
<svg viewBox="0 0 112 690" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M116 0H51v172C76 384 0 517 0 517v173h116V0z" fill="currentColor"/></svg> </div>
|
||
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<div class="card-body">
|
||
|
||
<!-- Close -->
|
||
<button type="button" class="modal-close close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
|
||
<!-- Heading -->
|
||
<h2 class="mb-0 font-weight-bold text-center" id="modalSignupHorizontalTitle">
|
||
Sign Up
|
||
</h2>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-6 text-center text-muted">
|
||
Simplify your workflow in minutes.
|
||
</p>
|
||
|
||
<!-- Form -->
|
||
<form class="mb-6">
|
||
|
||
<!-- Email -->
|
||
<div class="form-group">
|
||
<label class="sr-only" for="modalSignupHorizontalEmail">
|
||
Your email
|
||
</label>
|
||
<input type="email" class="form-control" id="modalSignupHorizontalEmail" placeholder="Your email">
|
||
</div>
|
||
|
||
<!-- Password -->
|
||
<div class="form-group mb-5">
|
||
<label class="sr-only" for="modalSignupHorizontalPassword">
|
||
Create a password
|
||
</label>
|
||
<input type="password" class="form-control" id="modalSignupHorizontalPassword" placeholder="Create a password">
|
||
</div>
|
||
|
||
<!-- Submit -->
|
||
<button class="btn btn-block btn-primary" type="submit">
|
||
Sign up
|
||
</button>
|
||
|
||
</form>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-0 font-size-sm text-center text-muted">
|
||
Already have an account? <a href="../signin-illustration.html">Log in</a>.
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div> <!-- / .row -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Signup: Vertical -->
|
||
<div class="modal fade" id="modalSignupVertical" tabindex="-1" role="dialog" aria-labelledby="modalSignupVerticalTitle" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="card">
|
||
|
||
<!-- Close -->
|
||
<button type="button" class="modal-close close text-white" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
|
||
<!-- Image -->
|
||
<img src="../assets/img/photos/photo-7.jpg" alt="..." class="card-img-top">
|
||
|
||
<!-- Shape -->
|
||
<div class="position-relative">
|
||
<div class="shape shape-bottom shape-fluid-x svg-shim text-white">
|
||
<svg viewBox="0 0 2880 480" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2160 0C1440 240 720 240 720 240H0v240h2880V0h-720z" fill="currentColor"/></svg> </div>
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="card-body">
|
||
|
||
<!-- Heading -->
|
||
<h2 class="mb-0 font-weight-bold text-center" id="modalSignupVerticalTitle">
|
||
Sign Up
|
||
</h2>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-6 text-center text-muted">
|
||
Simplify your workflow in minutes.
|
||
</p>
|
||
|
||
<!-- Form -->
|
||
<form class="mb-6">
|
||
|
||
<!-- Email -->
|
||
<div class="form-group">
|
||
<label class="sr-only" for="modalSignupVerticalEmail">
|
||
Your email
|
||
</label>
|
||
<input type="email" class="form-control" id="modalSignupVerticalEmail" placeholder="Your email">
|
||
</div>
|
||
|
||
<!-- Password -->
|
||
<div class="form-group mb-5">
|
||
<label class="sr-only" for="modalSignupVerticalPassword">
|
||
Create a password
|
||
</label>
|
||
<input type="password" class="form-control" id="modalSignupVerticalPassword" placeholder="Create a password">
|
||
</div>
|
||
|
||
<!-- Submit -->
|
||
<button class="btn btn-block btn-primary" type="submit">
|
||
Sign up
|
||
</button>
|
||
|
||
</form>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-0 font-size-sm text-center text-muted">
|
||
Already have an account? <a href="../signin-illustration.html">Log in</a>.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Signin: Horizontal -->
|
||
<div class="modal fade" id="modalSigninHorizontal" tabindex="-1" role="dialog" aria-labelledby="modalSigninHorizontalTitle" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="card card-row">
|
||
<div class="row gx-0">
|
||
<div class="col-12 col-md-6 bg-cover card-img-left" style="background-image: url(../assets/img/photos/photo-1.jpg);">
|
||
|
||
<!-- Image (placeholder) -->
|
||
<img src="../assets/img/photos/photo-1.jpg" alt="..." class="img-fluid d-md-none invisible">
|
||
|
||
<!-- Shape -->
|
||
<div class="shape shape-right shape-fluid-y svg-shim text-white d-none d-md-block">
|
||
<svg viewBox="0 0 112 690" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M116 0H51v172C76 384 0 517 0 517v173h116V0z" fill="currentColor"/></svg> </div>
|
||
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<div class="card-body">
|
||
|
||
<!-- Close -->
|
||
<button type="button" class="modal-close close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
|
||
<!-- Heading -->
|
||
<h2 class="mb-0 font-weight-bold text-center" id="modalSigninHorizontalTitle">
|
||
Sign In
|
||
</h2>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-6 text-center text-muted">
|
||
Simplify your workflow in minutes.
|
||
</p>
|
||
|
||
<!-- Form -->
|
||
<form class="mb-6">
|
||
|
||
<!-- Email -->
|
||
<div class="form-group">
|
||
<label class="sr-only" for="modalSigninHorizontalEmail">
|
||
Your email
|
||
</label>
|
||
<input type="email" class="form-control" id="modalSigninHorizontalEmail" placeholder="Your email">
|
||
</div>
|
||
|
||
<!-- Password -->
|
||
<div class="form-group mb-5">
|
||
<label class="sr-only" for="modalSigninHorizontalPassword">
|
||
Enter your password
|
||
</label>
|
||
<input type="password" class="form-control" id="modalSigninHorizontalPassword" placeholder="Enter your password">
|
||
</div>
|
||
|
||
<!-- Submit -->
|
||
<button class="btn btn-block btn-primary" type="submit">
|
||
Sign in
|
||
</button>
|
||
|
||
</form>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-0 font-size-sm text-center text-muted">
|
||
Don't have an account yet? <a href="../signin-illustration.html">Sign up</a>.
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div> <!-- / .row -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Signin: Vertical -->
|
||
<div class="modal fade" id="modalSigninVertical" tabindex="-1" role="dialog" aria-labelledby="modalSigninVerticalTitle" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="card">
|
||
|
||
<!-- Close -->
|
||
<button type="button" class="modal-close close text-white" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
|
||
<!-- Image -->
|
||
<img src="../assets/img/photos/photo-21.jpg" alt="..." class="card-img-top">
|
||
|
||
<!-- Shape -->
|
||
<div class="position-relative">
|
||
<div class="shape shape-bottom shape-fluid-x svg-shim text-white">
|
||
<svg viewBox="0 0 2880 480" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2160 0C1440 240 720 240 720 240H0v240h2880V0h-720z" fill="currentColor"/></svg> </div>
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="card-body">
|
||
|
||
<!-- Heading -->
|
||
<h2 class="mb-0 font-weight-bold text-center" id="modalSigninVerticalTitle">
|
||
Sign In
|
||
</h2>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-6 text-center text-muted">
|
||
Simplify your workflow in minutes.
|
||
</p>
|
||
|
||
<!-- Form -->
|
||
<form class="mb-6">
|
||
|
||
<!-- Email -->
|
||
<div class="form-group">
|
||
<label class="sr-only" for="modalSigninVerticalEmail">
|
||
Your email
|
||
</label>
|
||
<input type="email" class="form-control" id="modalSigninVerticalEmail" placeholder="Your email">
|
||
</div>
|
||
|
||
<!-- Password -->
|
||
<div class="form-group mb-5">
|
||
<label class="sr-only" for="modalSigninVerticalPassword">
|
||
Enter your password
|
||
</label>
|
||
<input type="password" class="form-control" id="modalSigninVerticalPassword" placeholder="Enter your password">
|
||
</div>
|
||
|
||
<!-- Submit -->
|
||
<button class="btn btn-block btn-primary" type="submit">
|
||
Sign in
|
||
</button>
|
||
|
||
</form>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-0 font-size-sm text-center text-muted">
|
||
Don't have an account yet? <a href="../signin-illustration.html">Sign up</a>.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Payment -->
|
||
<div class="modal fade" id="modalPayment" tabindex="-1" role="dialog" aria-labelledby="modalPaymentTitle" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
|
||
<!-- Close -->
|
||
<button type="button" class="modal-close close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
|
||
<!-- Heading -->
|
||
<h2 class="font-weight-bold text-center mb-1" id="modalPaymentTitle">
|
||
Add Payment
|
||
</h2>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-lg text-center text-muted mb-6 mb-md-8">
|
||
Simplify your workflow in minutes.
|
||
</p>
|
||
|
||
<!-- Form -->
|
||
<form>
|
||
|
||
<!-- Name -->
|
||
<div class="form-group">
|
||
<label class="form-label" for="modalPaymentName">Name on card</label>
|
||
<input class="form-control" id="modalPaymentName" type="text" placeholder="First Last">
|
||
</div>
|
||
|
||
<!-- Name -->
|
||
<div class="form-group">
|
||
<label class="form-label" for="modalPaymentNumbber">Card number</label>
|
||
<input class="form-control" id="modalPaymentNumbber" type="number" placeholder="4242 4242 4242 4242">
|
||
</div>
|
||
|
||
<!-- Name -->
|
||
<div class="form-group">
|
||
<label class="form-label" for="modalPaymentDate">Exp. Date</label>
|
||
<input class="form-control" id="modalPaymentDate" type="text" placeholder="03/2023">
|
||
</div>
|
||
|
||
<!-- Submit -->
|
||
<button class="btn btn-block btn-primary mt-3 lift">
|
||
Add Payment Method
|
||
</button>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- NAVBAR -->
|
||
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-white border-bottom">
|
||
<div class="container-fluid">
|
||
|
||
<!-- Brand -->
|
||
<a class="navbar-brand" href="../index.html">
|
||
<img src="../assets/img/brand.svg" class="navbar-brand-img" alt="...">
|
||
</a>
|
||
|
||
<!-- Toggler -->
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<!-- Collapse -->
|
||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||
|
||
<!-- Toggler -->
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||
<i class="fe fe-x"></i>
|
||
</button>
|
||
|
||
<!-- Navigation -->
|
||
<ul class="navbar-nav ml-auto">
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" id="navbarLandings" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
|
||
Landings
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-xl p-0" aria-labelledby="navbarLandings">
|
||
<div class="row gx-0">
|
||
<div class="col-12 col-lg-6">
|
||
<div class="dropdown-img-left" style="background-image: url(../assets/img/photos/photo-3.jpg);">
|
||
|
||
<!-- Heading -->
|
||
<h4 class="font-weight-bold text-white mb-0">
|
||
Want to see an overview?
|
||
</h4>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-sm text-white">
|
||
See all the pages at once.
|
||
</p>
|
||
|
||
<!-- Button -->
|
||
<a href="../overview.html" class="btn btn-sm btn-white shadow-dark fonFt-size-sm">
|
||
View all pages
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-lg-6">
|
||
<div class="dropdown-body">
|
||
<div class="row gx-0">
|
||
<div class="col-6">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Services
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../coworking.html">
|
||
Coworking
|
||
</a>
|
||
<a class="dropdown-item" href="../rental.html">
|
||
Rental
|
||
</a>
|
||
<a class="dropdown-item mb-5" href="../job.html">
|
||
Job Listing
|
||
</a>
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Apps
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../desktop-app.html">
|
||
Desktop
|
||
</a>
|
||
<a class="dropdown-item" href="../mobile-app.html">
|
||
Mobile
|
||
</a>
|
||
|
||
</div>
|
||
<div class="col-6">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Web
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../index.html">
|
||
Basic
|
||
</a>
|
||
<a class="dropdown-item" href="../startup.html">
|
||
Startup
|
||
</a>
|
||
<a class="dropdown-item" href="../enterprise.html">
|
||
Enterprise
|
||
</a>
|
||
<a class="dropdown-item" href="../service.html">
|
||
Service
|
||
</a>
|
||
<a class="dropdown-item" href="../cloud.html">
|
||
Cloud Hosting
|
||
</a>
|
||
<a class="dropdown-item" href="../agency.html">
|
||
Agency
|
||
</a>
|
||
|
||
</div>
|
||
</div> <!-- / .row -->
|
||
</div>
|
||
</div>
|
||
</div> <!-- / .row -->
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" id="navbarPages" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
|
||
Pages
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-lg" aria-labelledby="navbarPages">
|
||
<div class="row gx-0">
|
||
<div class="col-6">
|
||
<div class="row gx-0">
|
||
<div class="col-12 col-lg-6">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Career
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../careers.html">
|
||
Listing
|
||
</a>
|
||
<a class="dropdown-item mb-5" href="../career-single.html">
|
||
Opening
|
||
</a>
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Company
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../about.html">
|
||
About
|
||
</a>
|
||
<a class="dropdown-item" href="../pricing.html">
|
||
Pricing
|
||
</a>
|
||
<a class="dropdown-item mb-5 mb-lg-0" href="../terms-of-service.html">
|
||
Terms
|
||
</a>
|
||
|
||
</div>
|
||
<div class="col-12 col-lg-6">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Help center
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../help-center.html">
|
||
Overview
|
||
</a>
|
||
<a class="dropdown-item mb-5" href="../help-center-article.html">
|
||
Article
|
||
</a>
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Contact
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../contact.html">
|
||
Basic
|
||
</a>
|
||
<a class="dropdown-item" href="../contact-alt.html">
|
||
Cover
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="row gx-0">
|
||
<div class="col-12 col-lg-6">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Blog
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../blog.html">
|
||
Rich View
|
||
</a>
|
||
<a class="dropdown-item" href="../blog-post.html">
|
||
Article
|
||
</a>
|
||
<a class="dropdown-item" href="../blog-showcase.html">
|
||
Showcase
|
||
</a>
|
||
<a class="dropdown-item mb-5 mb-lg-0" href="../blog-search.html">
|
||
Search
|
||
</a>
|
||
|
||
</div>
|
||
<div class="col-12 col-lg-6">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="dropdown-header">
|
||
Portfolio
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<a class="dropdown-item" href="../portfolio-masonry.html">
|
||
Masonry
|
||
</a>
|
||
<a class="dropdown-item" href="../portfolio-grid-rows.html">
|
||
Grid Rows
|
||
</a>
|
||
<a class="dropdown-item" href="../portfolio-parallax.html">
|
||
Parallax
|
||
</a>
|
||
<a class="dropdown-item" href="../portfolio-case-study.html">
|
||
Case Study
|
||
</a>
|
||
<a class="dropdown-item" href="../portfolio-sidebar.html">
|
||
Sidebar
|
||
</a>
|
||
<a class="dropdown-item" href="../portfolio-sidebar-fluid.html">
|
||
Sidebar: Fluid
|
||
</a>
|
||
<a class="dropdown-item" href="../portfolio-grid.html">
|
||
Basic Grid
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- / .row -->
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" id="navbarAccount" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
|
||
Account
|
||
</a>
|
||
<ul class="dropdown-menu" aria-labelledby="navbarAccount">
|
||
<li class="dropdown-item dropright">
|
||
<a class="dropdown-link dropdown-toggle" data-toggle="dropdown" href="#">
|
||
Settings
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="../account-general.html">
|
||
General
|
||
</a>
|
||
<a class="dropdown-item" href="../account-security.html">
|
||
Security
|
||
</a>
|
||
<a class="dropdown-item" href="../account-notifications.html">
|
||
Notifications
|
||
</a>
|
||
<a class="dropdown-item" href="../billing-plans-and-payment.html">
|
||
Plans & Payment
|
||
</a>
|
||
<a class="dropdown-item" href="../billing-users.html">
|
||
Users
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<li class="dropdown-item dropright">
|
||
<a class="dropdown-link dropdown-toggle" data-toggle="dropdown" href="#">
|
||
Sign In
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="../signin-cover.html">
|
||
Side Cover
|
||
</a>
|
||
<a class="dropdown-item" href="../signin-illustration.html">
|
||
Illustration
|
||
</a>
|
||
<a class="dropdown-item" href="../signin.html">
|
||
Basic
|
||
</a>
|
||
<a class="dropdown-item" data-toggle="modal" href="#modalSigninHorizontal">
|
||
Modal Horizontal
|
||
</a>
|
||
<a class="dropdown-item" data-toggle="modal" href="#modalSigninVertical">
|
||
Modal Vertical
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<li class="dropdown-item dropright">
|
||
<a class="dropdown-link dropdown-toggle" data-toggle="dropdown" href="#">
|
||
Sign Up
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="../signup-cover.html">
|
||
Side Cover
|
||
</a>
|
||
<a class="dropdown-item" href="../signup-illustration.html">
|
||
Illustration
|
||
</a>
|
||
<a class="dropdown-item" href="../signup.html">
|
||
Basic
|
||
</a>
|
||
<a class="dropdown-item" data-toggle="modal" href="#modalSignupHorizontal">
|
||
Modal Horizontal
|
||
</a>
|
||
<a class="dropdown-item" data-toggle="modal" href="#modalSignupVertical">
|
||
Modal Vertical
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<li class="dropdown-item dropright">
|
||
<a class="dropdown-link dropdown-toggle" data-toggle="dropdown" href="#">
|
||
Password Reset
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="../password-reset-cover.html">
|
||
Side Cover
|
||
</a>
|
||
<a class="dropdown-item" href="../password-reset-illustration.html">
|
||
Illustration
|
||
</a>
|
||
<a class="dropdown-item" href="../password-reset.html">
|
||
Basic
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<li class="dropdown-item dropright">
|
||
<a class="dropdown-link dropdown-toggle" data-toggle="dropdown" href="#">
|
||
Error
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="../error-cover.html">
|
||
Side Cover
|
||
</a>
|
||
<a class="dropdown-item" href="../error-illustration.html">
|
||
Illustration
|
||
</a>
|
||
<a class="dropdown-item" href="../error.html">
|
||
Basic
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" id="navbarDocumentation" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
|
||
Documentation
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-md" aria-labelledby="navbarDocumentation">
|
||
<div class="list-group list-group-flush">
|
||
<a class="list-group-item" href="../docs/index.html">
|
||
|
||
<!-- Icon -->
|
||
<div class="icon icon-sm text-primary">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path d="M8 3v.5A1.5 1.5 0 009.5 5h5A1.5 1.5 0 0016 3.5V3h2a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V5a2 2 0 012-2h2z" fill="#335EEA" opacity=".3"/><path d="M11 2a1 1 0 012 0h1.5a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-5a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5H11z" fill="#335EEA"/><rect fill="#335EEA" opacity=".3" x="7" y="10" width="5" height="2" rx="1"/><rect fill="#335EEA" opacity=".3" x="7" y="14" width="9" height="2" rx="1"/></g></svg> </div>
|
||
|
||
<!-- Content -->
|
||
<div class="ml-4">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="font-weight-bold text-uppercase text-primary mb-0">
|
||
Documentation
|
||
</h6>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-sm text-gray-700 mb-0">
|
||
Customizing and building
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</a>
|
||
<a class="list-group-item" href="../docs/alerts.html">
|
||
|
||
<!-- Icon -->
|
||
<div class="icon icon-sm text-primary">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><rect fill="#335EEA" x="4" y="4" width="7" height="7" rx="1.5"/><path d="M5.5 13h4a1.5 1.5 0 011.5 1.5v4A1.5 1.5 0 019.5 20h-4A1.5 1.5 0 014 18.5v-4A1.5 1.5 0 015.5 13zm9-9h4A1.5 1.5 0 0120 5.5v4a1.5 1.5 0 01-1.5 1.5h-4A1.5 1.5 0 0113 9.5v-4A1.5 1.5 0 0114.5 4zm0 9h4a1.5 1.5 0 011.5 1.5v4a1.5 1.5 0 01-1.5 1.5h-4a1.5 1.5 0 01-1.5-1.5v-4a1.5 1.5 0 011.5-1.5z" fill="#335EEA" opacity=".3"/></g></svg> </div>
|
||
|
||
<!-- Content -->
|
||
<div class="ml-4">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="font-weight-bold text-uppercase text-primary mb-0">
|
||
Components
|
||
</h6>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-sm text-gray-700 mb-0">
|
||
Full list of components
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</a>
|
||
<a class="list-group-item" href="../docs/changelog.html">
|
||
|
||
<!-- Icon -->
|
||
<div class="icon icon-sm text-primary">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path d="M5.857 2h7.88a1.5 1.5 0 01.968.355l4.764 4.029A1.5 1.5 0 0120 7.529v12.554c0 1.79-.02 1.917-1.857 1.917H5.857C4.02 22 4 21.874 4 20.083V3.917C4 2.127 4.02 2 5.857 2z" fill="#335EEA" opacity=".3"/><rect fill="#335EEA" x="6" y="11" width="9" height="2" rx="1"/><rect fill="#335EEA" x="6" y="15" width="5" height="2" rx="1"/></g></svg> </div>
|
||
|
||
<!-- Content -->
|
||
<div class="ml-4">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="font-weight-bold text-uppercase text-primary mb-0">
|
||
Changelog
|
||
</h6>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-sm text-gray-700 mb-0">
|
||
Keep track of changes
|
||
</p>
|
||
|
||
</div>
|
||
|
||
<!-- Badge -->
|
||
<span class="badge rounded-pill bg-primary-soft ml-auto">
|
||
2.0.0-alpha
|
||
</span>
|
||
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Button -->
|
||
<a class="navbar-btn btn btn-sm btn-primary lift ml-auto" href="https://themes.getbootstrap.com/product/landkit/" target="_blank">
|
||
Buy now
|
||
</a>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- BREADCRUMB -->
|
||
<nav class="d-lg-none bg-gray-800">
|
||
<div class="container-fluid">
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
|
||
<!-- Breadcrumb -->
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item">
|
||
<span class="text-white">
|
||
Docs
|
||
</span>
|
||
</li>
|
||
<li class="breadcrumb-item active" aria-current="page">
|
||
<span class="text-white">
|
||
Forms
|
||
</span>
|
||
</li>
|
||
</ol>
|
||
|
||
</div>
|
||
<div class="col-auto">
|
||
|
||
<!-- Toggler -->
|
||
<div class="navbar-dark">
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidenavCollapse" aria-controls="sidenavCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div> <!-- / .row -->
|
||
</div> <!-- / .container -->
|
||
</nav>
|
||
|
||
<!-- CONTENT -->
|
||
<section>
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-12 col-lg-3 col-xl-2 px-lg-0 border-bottom border-bottom-lg-0 border-right-lg border-gray-300 sidenav sidenav-left">
|
||
|
||
<div class="collapse d-lg-block" id="sidenavCollapse">
|
||
<div class="py-7 py-lg-9 px-lg-7">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="text-uppercase font-weight-bold">
|
||
Getting started
|
||
</h6>
|
||
|
||
<!-- Links -->
|
||
<ul class="list mb-6">
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/index.html">Introduction</a>
|
||
</li>
|
||
<li class="list-item d-flex">
|
||
<a class="list-link" href="../docs/changelog.html">Changelog</a> <span class="badge rounded-pill bg-primary-soft ml-auto align-self-center">2.0.0-alpha</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Heading -->
|
||
<h6 class="text-uppercase font-weight-bold">
|
||
Components
|
||
</h6>
|
||
|
||
<!-- Links -->
|
||
<ul class="list mb-6">
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/alerts.html">Alerts</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/avatars.html">Avatars</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/badges.html">Badges</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/breadcrumb.html">Breadcrumb</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/buttons.html">Buttons</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/cards.html">Cards</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/devices.html">Devices</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/dropdowns.html">Dropdowns</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/forms.html">Forms</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/icons.html">Icons</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/lists.html">Lists</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/modal.html">Modal</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/navbar.html">Navbar</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/navs.html">Navs</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/pagination.html">Pagination</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/popovers.html">Popovers</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/progress.html">Progress</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/screenshot.html">Screenshot</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/shapes.html">Shapes</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/spinners.html">Spinners</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/switches.html">Switches</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/tables.html">Tables</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/toasts.html">Toasts</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/tooltips.html">Tooltips</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/typography.html">Typography</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Heading -->
|
||
<h6 class="text-uppercase font-weight-bold">
|
||
Plugins
|
||
</h6>
|
||
|
||
<!-- Links -->
|
||
<ul class="list mb-6">
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/aos.html">AOS</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/bigpicture.html">BigPicture</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/choices.html">Choices</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/countup.html">Count up</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/dropzone.html">Dropzone</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/flickity.html">Flickity</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/isotope.html">Isotope</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/jarallax.html">Jarallax</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/map.html">Map</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/quill.html">Quill</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/smooth-scroll.html">Smooth scroll</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/typed.html">Typed</a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<!-- Heading -->
|
||
<h6 class="text-uppercase font-weight-bold">
|
||
Utilities
|
||
</h6>
|
||
|
||
<!-- List -->
|
||
<ul class="list mb-6">
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/background.html">Background</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/borders.html">Borders</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/images.html">Images</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/lift.html">Lift</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/overlay.html">Overlay</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/position.html">Position</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/shadows.html">Shadows</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/sizing.html">Sizing</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/type.html">Type</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/visibility.html">Visibility</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Heading -->
|
||
<h6 class="text-uppercase font-weight-bold">
|
||
Design
|
||
</h6>
|
||
|
||
<!-- Links -->
|
||
<ul class="list mb-0">
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/figma.html">Figma</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="../docs/illustrations.html">Illustrations</a>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-12 col-lg-6 col-xl-8 offset-lg-3 offset-xl-2 py-7 py-lg-9 px-lg-7">
|
||
|
||
<!-- Heading -->
|
||
<h1 class="mb-1">
|
||
Forms
|
||
</h1>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-lg text-gray-700">
|
||
Dashkit supports all of Bootstrap's default form styling in addition to a handful of new input types and features.
|
||
</p>
|
||
|
||
<!-- Bootstrap/Plugin Link -->
|
||
<p>
|
||
<a class="text-decoration-none" href="https://getbootstrap.com/docs/4.0/components/forms/" target="_blank">
|
||
<i class="fe fe-external-link pr-1"></i>
|
||
Bootstrap documentation
|
||
</a>
|
||
</p>
|
||
|
||
<!-- Divider -->
|
||
<hr class="bg-gray-300 my-6">
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
<form>
|
||
<div class="form-group">
|
||
<label class="form-label" for="exampleInputEmail1">Email address</label>
|
||
<input class="form-control" id="exampleInputEmail1" type="email" placeholder="Enter email">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="exampleInputPassword1">Password</label>
|
||
<input class="form-control" id="exampleInputPassword1" type="password" placeholder="Password">
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Divider -->
|
||
<hr class="bg-gray-300 my-6">
|
||
|
||
<!-- Heading -->
|
||
<h3 class="font-weight-bold mr-3" id="sizing">Sizing</h3>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700 mb-5">
|
||
Set heights using classes like <code>.form-control-lg</code> and <code>.form-control-sm</code>.
|
||
</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
<div class="form-group">
|
||
<input type="text" class="form-control form-control-lg" placeholder=".form-control-lg">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<input type="text" class="form-control" placeholder=".form-control">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<input type="text" class="form-control form-control-sm" placeholder=".form-control-sm">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<input type="text" class="form-control form-control-xs" placeholder=".form-control-xs">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Divider -->
|
||
<hr class="bg-gray-300 my-6">
|
||
|
||
<!-- Heading -->
|
||
<h3 class="font-weight-bold mr-3" id="inputGroup">Input group</h3>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700 mb-5">
|
||
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
|
||
</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
<div class="input-group mb-3">
|
||
<span class="input-group-text" id="basic-addon1">@</span>
|
||
<input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
|
||
</div>
|
||
|
||
<div class="input-group mb-3">
|
||
<input class="form-control" type="text" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
|
||
<span class="input-group-text" id="basic-addon2">@example.com</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Divider -->
|
||
<hr class="bg-gray-300 my-6">
|
||
|
||
<!-- Heading -->
|
||
<h3 class="font-weight-bold mr-3" id="validation">Validation</h3>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700 mb-5">
|
||
Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers.
|
||
</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
<div class="form-group">
|
||
<input type="text" class="form-control is-valid" value="Valid input">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<input type="text" class="form-control is-invalid" value="Invalid input">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Divider -->
|
||
<hr class="bg-gray-300 my-6">
|
||
|
||
<!-- Heading -->
|
||
<div class="d-flex align-items-center">
|
||
<h3 class="font-weight-bold mr-3" id="flush">Flush</h3>
|
||
<span class="badge rounded-pill bg-primary-soft mb-2">
|
||
<span class="h6 text-uppercase font-weight-bold">Landkit only</span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700 mb-5">
|
||
Remove borders and horizontal paddings from a form control with a <code>.form-control-flush</code> modifier.
|
||
</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
<input type="text" class="form-control form-control-flush" placeholder="Form control flush">
|
||
|
||
</div>
|
||
<div class="card-footer bg-black">
|
||
<code class="highlight html">
|
||
<input type="text" class="form-control form-control-flush" placeholder="Form control flush">
|
||
</code>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Divider -->
|
||
<hr class="bg-gray-300 my-6">
|
||
|
||
<!-- Heading -->
|
||
<div class="d-flex align-items-center">
|
||
<h3 class="font-weight-bold mr-3" id="floatingLabels">Floating labels</h1>
|
||
<span class="badge rounded-pill bg-primary-soft mb-2">
|
||
<span class="h6 text-uppercase font-weight-bold">Landkit only</span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p class="text-gray-700 mb-5">
|
||
Make labels floating over inputs as you type.
|
||
</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
<form>
|
||
<div class="form-label-group">
|
||
<input type="text" class="form-control form-control-flush" id="cardName" placeholder="Name">
|
||
<label for="cardName">Name</label>
|
||
</div>
|
||
<div class="form-label-group">
|
||
<input type="email" class="form-control form-control-flush" id="cardEmail" placeholder="Email">
|
||
<label for="cardEmail">Email</label>
|
||
</div>
|
||
<div class="form-label-group">
|
||
<input type="password" class="form-control form-control-flush" id="cardPassword" placeholder="Password">
|
||
<label for="cardPassword">Password</label>
|
||
</div>
|
||
<div class="mt-6">
|
||
<button class="btn btn-block btn-success lift" type="submit">
|
||
Download a sample
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
<div class="card-footer bg-black">
|
||
<code class="highlight html">
|
||
<form><br /> <div class="form-label-group"><br /> <input type="text" class="form-control form-control-flush" id="cardName" placeholder="Name"><br /> <label for="cardName">Name</label><br /> </div><br /> <div class="form-label-group"><br /> <input type="email" class="form-control form-control-flush" id="cardEmail" placeholder="Email"><br /> <label for="cardEmail">Email</label><br /> </div><br /> <div class="form-label-group"><br /> <input type="password" class="form-control form-control-flush" id="cardPassword" placeholder="Password"><br /> <label for="cardPassword">Password</label><br /> </div><br /> <div class="mt-6"><br /> <button class="btn btn-block btn-success lift" type="submit"><br /> Download a sample<br /> </button><br /> </div><br /></form>
|
||
</code>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-12 col-lg-3 col-xl-2 d-none d-lg-block px-lg-0 sidenav sidenav-right">
|
||
<div class="my-7 my-lg-9 px-lg-7 border-left-lg border-gray-300">
|
||
|
||
<!-- Heading -->
|
||
<h6 class="text-uppercase font-weight-bold">
|
||
Jump to
|
||
</h6>
|
||
|
||
<!-- Links -->
|
||
<ul class="list mb-0">
|
||
<li class="list-item">
|
||
<a class="list-link" href="#switchDark" data-scroll>Switch dark</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="#sizing" data-scroll>Sizing</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="#inputGroup" data-scroll>Input group</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="#validation" data-scroll>Validation</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="#flush" data-scroll>Flush</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="#floatingLabels" data-scroll>Floating labels</a>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div> <!-- / .row -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- JAVASCRIPT -->
|
||
<!-- Map JS -->
|
||
<script src='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
|
||
|
||
<!-- Vendor JS -->
|
||
<script src="../assets/js/vendor.bundle.js"></script>
|
||
|
||
<!-- Theme JS -->
|
||
<script src="../assets/js/theme.bundle.js"></script>
|
||
|
||
</body>
|
||
</html>
|