2059 lines
105 KiB
HTML
2059 lines
105 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">
|
||
Cards
|
||
</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">
|
||
Cards
|
||
</h1>
|
||
|
||
<!-- Text -->
|
||
<p class="font-size-lg text-gray-700">
|
||
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
|
||
</p>
|
||
|
||
<!-- Bootstrap/Plugin Link -->
|
||
<p>
|
||
<a class="text-decoration-none" href="https://getbootstrap.com/docs/4.0/components/card/" 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">
|
||
<h3 class="card-title text-body">Card title</h3>
|
||
<p class="card-text">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.
|
||
</p>
|
||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||
</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="border">Border</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">
|
||
Add a contextual border to the top of the card component. Three sizing options are available.
|
||
</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card card-border border-success mb-5">
|
||
<div class="card-body">
|
||
Card border
|
||
</div>
|
||
<div class="card-footer bg-black">
|
||
<code class="highlight html">
|
||
<div class="card card-border border-success"><br /> <div class="card-body"><br /> Card border<br /> </div><br /></div>
|
||
</code>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card -->
|
||
<div class="card card-border card-border-lg border-danger mb-5">
|
||
<div class="card-body">
|
||
Card border large
|
||
</div>
|
||
<div class="card-footer bg-black">
|
||
<code class="highlight html">
|
||
<div class="card card-border card-border-lg border-danger"><br /> <div class="card-body"><br /> Card border large<br /> </div><br /></div>
|
||
</code>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card -->
|
||
<div class="card card-border card-border-xl border-primary">
|
||
<div class="card-body">
|
||
Card border extra large
|
||
</div>
|
||
<div class="card-footer bg-black">
|
||
<code class="highlight html">
|
||
<div class="card card-border card-border-xl border-primary"><br /> <div class="card-body"><br /> Card border extra large<br /> </div><br /></div>
|
||
</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="border">Bleed</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">
|
||
Spans the card component from edge to edge and removes its border radius on extra small screens.
|
||
</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card card-bleed mb-5">
|
||
<div class="card-body">
|
||
Card bleed
|
||
</div>
|
||
<div class="card-footer bg-black">
|
||
<code class="highlight html">
|
||
<div class="card card-bleed"><br /> <div class="card-body"><br /> Card bleed<br /> </div><br /></div>
|
||
</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="signup">Signup</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">
|
||
Combination of the default Bootstrap card component with an image at the top and a form in the body of it.
|
||
</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card shadow-light-lg mb-5" style="max-width: 480px;">
|
||
|
||
<!-- Image -->
|
||
<img src="../assets/img/photos/photo-2.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 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 48h2880V0h-720C1442.5 52 720 0 720 0H0v48z" fill="currentColor"/></svg> </div>
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="card-body">
|
||
|
||
<!-- Form -->
|
||
<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>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-footer rounded bg-black">
|
||
<code class="highlight html">
|
||
<div class="card shadow-light-lg"><br /> <br /> <!-- Image --><br /> <img src="../assets/img/photos/photo-2.jpg" alt="..." class="card-img-top"><br /><br /> <!-- Shape --><br /> <div class="position-relative"><br /> <div class="shape shape-bottom shape-fluid-x svg-shim text-white"><br /> {{> curves/curve-1}}<br /> </div><br /> </div><br /><br /> <!-- Body --><br /> <div class="card-body"><br /> <br /> <!-- Form --><br /> <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><br /><br /> </div><br /><br /></div>
|
||
</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="testimonials">Testimonials</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">
|
||
Combination of the card component, grid utilities and the blockquote for a testimonials component.
|
||
</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card card-row shadow-light-lg mb-5">
|
||
<div class="row gx-0">
|
||
<a class="col-12 col-md-6 bg-cover card-img-left" style="background-image: url(../assets/img/photos/photo-1.jpg);" href="#!">
|
||
|
||
<!-- 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>
|
||
|
||
</a>
|
||
<div class="col-12 col-md-6 order-md-1">
|
||
|
||
<!-- Body -->
|
||
<div class="card-body">
|
||
<blockquote class="blockquote mb-0 text-center">
|
||
|
||
<!-- Text -->
|
||
<p class="mb-5 mb-md-7">
|
||
“Working at Landkit has been a dream. The team is amazing, the office is perfect, and I feel like I'm part of a family. I'll be here for a great many years.”
|
||
</p>
|
||
|
||
<!-- Footer -->
|
||
<footer class="blockquote-footer">
|
||
<span class="h6 text-uppercase">William Callan</span>
|
||
</footer>
|
||
|
||
</blockquote>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-footer rounded bg-black">
|
||
<code class="highlight html">
|
||
<div class="card card-row shadow-light-lg"><br /> <div class="row gx-0"><br /> <a class="col-12 col-md-6 bg-cover card-img-left" style="background-image: url(../assets/img/photos/photo-1.jpg);" href="#!"><br /><br /> <!-- Image (placeholder) --><br /> <img src="../assets/img/photos/photo-1.jpg" alt="..." class="img-fluid d-md-none invisible"><br /><br /> <!-- Shape --><br /> <div class="shape shape-right shape-fluid-y svg-shim text-white d-none d-md-block"><br /> {{> curves/curve-4}}<br /> </div><br /><br /> </a><br /> <div class="col-12 col-md-6 order-md-1"><br /><br /> <!-- Body --><br /> <div class="card-body"><br /> <blockquote class="blockquote mb-0 text-center"><br /> <br /> <!-- Text --><br /> <p class="mb-5 mb-md-7"><br /> “Working at Landkit has been a dream. The team is amazing, the office is perfect, and I feel like I'm part of a family. I'll be here for a great many years.”<br /> </p><br /><br /> <!-- Footer --><br /> <footer class="blockquote-footer"><br /> <span class="h6 text-uppercase">William Callan</span><br /> </footer><br /><br /> </blockquote><br /> </div><br /><br /> </div><br /><br /> </div><br /></div>
|
||
</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="blockCards">Block cards</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">
|
||
The card component without images, with an image at the top, and an image in the background.
|
||
</p>
|
||
|
||
<!-- Cards -->
|
||
<div class="row mb-5">
|
||
<div class="col-12 col-xl-4 d-flex">
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-6 mb-xl-0 pt-14 overlay overlay-black overlay-30 bg-cover shadow-light-lg" style="background-image: url(../assets/img/photos/photo-8.jpg);">
|
||
|
||
<!-- Body -->
|
||
<a class="card-body mt-auto" href="#!">
|
||
|
||
<!-- Heading -->
|
||
<h3 class="text-white">
|
||
Using Unsplash to improve your listing visibility
|
||
</h3>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-0 text-white">
|
||
Using free stock photos of your surrounding areas can skyrocket your popularity.
|
||
</p>
|
||
|
||
</a>
|
||
|
||
<!-- Meta -->
|
||
<a class="card-meta" href="#!">
|
||
|
||
<!-- Divider -->
|
||
<hr class="card-meta-divider bg-white-20">
|
||
|
||
<!-- Avatar -->
|
||
<div class="avatar avatar-sm mr-2">
|
||
<img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
|
||
</div>
|
||
|
||
<!-- Author -->
|
||
<h6 class="text-uppercase text-white-80 mr-2 mb-0">
|
||
Casey Fyfe
|
||
</h6>
|
||
|
||
<!-- Date -->
|
||
<p class="h6 text-uppercase text-white-80 mb-0 ml-auto">
|
||
<time datetime="2019-05-02">May 02</time>
|
||
</p>
|
||
|
||
</a>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-12 col-xl-4 d-flex">
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-6 mb-xl-0 shadow-light-lg">
|
||
|
||
<!-- Image -->
|
||
<a class="card-img-top" href="#!">
|
||
<img src="../assets/img/photos/photo-7.jpg" alt="..." class="img-fluid">
|
||
</a>
|
||
|
||
<!-- Shape -->
|
||
<div class="position-relative">
|
||
<div class="shape shape-fluid-x shape-bottom svg-shim text-white">
|
||
<svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 48h2880V0h-720C1442.5 52 720 0 720 0H0v48z" fill="currentColor"/></svg> </div>
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<a class="card-body" href="#!">
|
||
|
||
<!-- Heading -->
|
||
<h3>
|
||
Photos should appeal to a sense of adventure
|
||
</h3>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-0 text-muted">
|
||
Cozy vibes are out and this summer you should focus on making customer's feel brave.
|
||
</p>
|
||
|
||
</a>
|
||
|
||
<!-- Meta -->
|
||
<a class="card-meta" href="#!">
|
||
|
||
<!-- Divider -->
|
||
<hr class="card-meta-divider">
|
||
|
||
<!-- Avatar -->
|
||
<div class="avatar avatar-sm mr-2">
|
||
<img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
|
||
</div>
|
||
|
||
<!-- Author -->
|
||
<h6 class="text-uppercase text-muted mr-2 mb-0">
|
||
Danny Devito
|
||
</h6>
|
||
|
||
<!-- Date -->
|
||
<p class="h6 text-uppercase text-muted mb-0 ml-auto">
|
||
<time datetime="2019-05-02">May 02</time>
|
||
</p>
|
||
|
||
</a>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-12 col-xl-4 d-flex">
|
||
|
||
<!-- Card -->
|
||
<div class="card shadow-light-lg">
|
||
|
||
<!-- Body -->
|
||
<a class="card-body my-auto" href="#!">
|
||
|
||
<!-- Heading -->
|
||
<h3 class="mt-auto">
|
||
It's the little touches that make memories.
|
||
</h3>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-0 text-muted">
|
||
Once you have your rental posted, you should focus on how you can differentiate your home with little touches. Chocolates, specialty coffee, fast wifi, nice toiletries, or a personal note. Small touches can make a huge difference.
|
||
</p>
|
||
|
||
</a>
|
||
|
||
<!-- Meta -->
|
||
<a class="card-meta" href="#!">
|
||
|
||
<!-- Divider -->
|
||
<hr class="card-meta-divider">
|
||
|
||
<!-- Avatar -->
|
||
<div class="avatar avatar-sm mr-2">
|
||
<img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
|
||
</div>
|
||
|
||
<!-- Author -->
|
||
<h6 class="text-uppercase text-muted mr-2 mb-0">
|
||
Dave Gamache
|
||
</h6>
|
||
|
||
<!-- Date -->
|
||
<p class="h6 text-uppercase text-muted mb-0 ml-auto">
|
||
<time datetime="2019-05-02">May 02</time>
|
||
</p>
|
||
|
||
</a>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div> <!-- / .row -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-footer rounded bg-black">
|
||
<code class="highlight bg-black">
|
||
<div class="row"><br /> <div class="col-12 col-xl-4 d-flex"><br /> <br /> <!-- Card --><br /> <div class="card mb-6 mb-xl-0 pt-14 overlay overlay-black overlay-30 bg-cover shadow-light-lg" style="background-image: url(../assets/img/photos/photo-8.jpg);"><br /><br /> <!-- Body --><br /> <a class="card-body mt-auto" href="#!"><br /><br /> <!-- Heading --><br /> <h3 class="text-white"><br /> Using Unsplash to improve your listing visibility<br /> </h3><br /><br /> <!-- Text --><br /> <p class="mb-0 text-white"><br /> Using free stock photos of your surrounding areas can skyrocket your popularity.<br /> </p><br /><br /> </a><br /><br /> <!-- Meta --><br /> <a class="card-meta" href="#!"><br /><br /> <!-- Divider --><br /> <hr class="card-meta-divider bg-white-20"><br /><br /> <!-- Avatar --><br /> <div class="avatar avatar-sm mr-2"><br /> <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle"><br /> </div><br /> <br /> <!-- Author --><br /> <h6 class="text-uppercase text-white-80 mr-2 mb-0"><br /> Casey Fyfe<br /> </h6><br /> <br /> <!-- Date --><br /> <p class="h6 text-uppercase text-white-80 mb-0 ml-auto"><br /> <time datetime="2019-05-02">May 02</time><br /> </p><br /><br /> </a><br /> <br /> </div><br /><br /> </div><br /> <div class="col-12 col-xl-4 d-flex"><br /> <br /> <!-- Card --><br /> <div class="card mb-6 mb-xl-0 shadow-light-lg"><br /><br /> <!-- Image --><br /> <a class="card-img-top" href="#!"><br /> <img src="../assets/img/photos/photo-7.jpg" alt="..." class="img-fluid"><br /> </a><br /><br /> <!-- Shape --><br /> <div class="position-relative"><br /> <div class="shape shape-fluid-x shape-bottom text-white"><br /> {{> curves/curve-1}}<br /> </div><br /> </div><br /><br /> <!-- Body --><br /> <a class="card-body" href="#!"><br /><br /> <!-- Heading --><br /> <h3><br /> Photos should appeal to a sense of adventure<br /> </h3><br /><br /> <!-- Text --><br /> <p class="mb-0 text-muted"><br /> Cozy vibes are out and this summer you should focus on making customer's feel brave.<br /> </p><br /><br /> </a><br /> <br /> <!-- Meta --><br /> <a class="card-meta" href="#!"><br /><br /> <!-- Divider --><br /> <hr class="card-meta-divider"><br /><br /> <!-- Avatar --><br /> <div class="avatar avatar-sm mr-2"><br /> <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle"><br /> </div><br /> <br /> <!-- Author --><br /> <h6 class="text-uppercase text-muted mr-2 mb-0"><br /> Danny Devito<br /> </h6><br /> <br /> <!-- Date --><br /> <p class="h6 text-uppercase text-muted mb-0 ml-auto"><br /> <time datetime="2019-05-02">May 02</time><br /> </p><br /><br /> </a><br /><br /> </div><br /><br /> </div><br /> <div class="col-12 col-xl-4 d-flex"><br /> <br /> <!-- Card --><br /> <div class="card shadow-light-lg"><br /><br /> <!-- Body --><br /> <a class="card-body my-auto" href="#!"><br /><br /> <!-- Heading --><br /> <h3 class="mt-auto"><br /> It's the little touches that make memories.<br /> </h3><br /><br /> <!-- Text --><br /> <p class="mb-0 text-muted"><br /> Once you have your rental posted, you should focus on how you can differentiate your home with little touches. Chocolates, specialty coffee, fast wifi, nice toiletries, or a personal note. Small touches can make a huge difference.<br /> </p><br /><br /> </a><br /><br /> <!-- Meta --><br /> <a class="card-meta" href="#!"><br /><br /> <!-- Divider --><br /> <hr class="card-meta-divider"><br /><br /> <!-- Avatar --><br /> <div class="avatar avatar-sm mr-2"><br /> <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle"><br /> </div><br /> <br /> <!-- Author --><br /> <h6 class="text-uppercase text-muted mr-2 mb-0"><br /> Dave Gamache<br /> </h6><br /> <br /> <!-- Date --><br /> <p class="h6 text-uppercase text-muted mb-0 ml-auto"><br /> <time datetime="2019-05-02">May 02</time><br /> </p><br /><br /> </a><br /><br /> </div><br /><br /> </div><br /></div> <!-- / .row -->
|
||
</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="price">Price</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">
|
||
Combination of the card component, styled lists and other components.
|
||
</p>
|
||
|
||
<div class="row mb-5">
|
||
<div class="col-12 col-xl-4">
|
||
|
||
<!-- Card -->
|
||
<div class="card shadow-lg mb-6 mb-xl-0">
|
||
<div class="card-body">
|
||
|
||
<!-- Preheading -->
|
||
<div class="text-center mb-3">
|
||
<span class="badge rounded-pill bg-primary-soft">
|
||
<span class="h6 text-uppercase">Basic</span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Price -->
|
||
<div class="d-flex justify-content-center">
|
||
<span class="h2 mb-0 mt-2">$</span>
|
||
<span class="price display-2 mb-0" data-annual="0" data-monthly="0">0</span>
|
||
<span class="h2 align-self-end mb-1">/mo</span>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p class="text-center text-muted mb-5">
|
||
per seat
|
||
</p>
|
||
|
||
<!-- List -->
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p>
|
||
Rich landing pages
|
||
</p>
|
||
|
||
</div>
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-5">
|
||
100+ components
|
||
</p>
|
||
|
||
</div>
|
||
|
||
<!-- Button -->
|
||
<a href="#!" class="btn btn-block btn-primary-soft">
|
||
Start for free <i class="fe fe-arrow-right ml-3"></i>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-12 col-xl-4">
|
||
|
||
<!-- Card -->
|
||
<div class="card shadow-lg mb-6 mb-xl-0">
|
||
<div class="card-body">
|
||
|
||
<!-- Preheading -->
|
||
<div class="text-center mb-3">
|
||
<span class="badge rounded-pill bg-primary-soft">
|
||
<span class="h6 text-uppercase">Standard</span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Price -->
|
||
<div class="d-flex justify-content-center">
|
||
<span class="h2 mb-0 mt-2">$</span>
|
||
<span class="price display-2 mb-0" data-annual="29" data-monthly="49">29</span>
|
||
<span class="h2 align-self-end mb-1">/mo</span>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p class="text-center text-muted mb-5">
|
||
per seat
|
||
</p>
|
||
|
||
<!-- List -->
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p>
|
||
Rich landing pages
|
||
</p>
|
||
|
||
</div>
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p>
|
||
100+ components
|
||
</p>
|
||
|
||
</div>
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p>
|
||
Flexible licensing
|
||
</p>
|
||
|
||
</div>
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p>
|
||
Speedy build tooling
|
||
</p>
|
||
|
||
</div>
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-5">
|
||
6 months free support
|
||
</p>
|
||
|
||
</div>
|
||
|
||
<!-- Button -->
|
||
<a href="#!" class="btn btn-block btn-primary">
|
||
Start with Standard <i class="fe fe-arrow-right ml-3"></i>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-12 col-xl-4">
|
||
|
||
<!-- Card -->
|
||
<div class="card shadow-lg mb-md-0">
|
||
<div class="card-body">
|
||
|
||
<!-- Preheading -->
|
||
<div class="text-center mb-3">
|
||
<span class="badge rounded-pill bg-primary-soft">
|
||
<span class="h6 text-uppercase">Premium</span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Price -->
|
||
<div class="d-flex justify-content-center">
|
||
<span class="h2 mb-0 mt-2">$</span>
|
||
<span class="price display-2 mb-0" data-annual="49" data-monthly="69">49</span>
|
||
<span class="h2 align-self-end mb-1">/mo</span>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p class="text-center text-muted mb-5">
|
||
per seat
|
||
</p>
|
||
|
||
<!-- List -->
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p>
|
||
Rich landing pages
|
||
</p>
|
||
|
||
</div>
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p>
|
||
100+ components
|
||
</p>
|
||
|
||
</div>
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p>
|
||
Flexible licensing
|
||
</p>
|
||
|
||
</div>
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p>
|
||
Speedy build tooling
|
||
</p>
|
||
|
||
</div>
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p>
|
||
6 months free support
|
||
</p>
|
||
|
||
</div>
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p>
|
||
256-bit encryption
|
||
</p>
|
||
|
||
</div>
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p>
|
||
Guaranteed 100% uptime
|
||
</p>
|
||
|
||
</div>
|
||
<div class="d-flex">
|
||
|
||
<!-- Badge -->
|
||
<div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4">
|
||
<i class="fe fe-check"></i>
|
||
</div>
|
||
|
||
<!-- Text -->
|
||
<p class="mb-5">
|
||
Unlimited users
|
||
</p>
|
||
|
||
</div>
|
||
|
||
<!-- Button -->
|
||
<a href="#!" class="btn btn-block btn-primary-soft">
|
||
Start with Premium <i class="fe fe-arrow-right ml-3"></i>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div> <!-- / .row -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-footer rounded bg-black">
|
||
<code class="highlight html">
|
||
<div class="card shadow-lg"><br /> <div class="card-body"><br /><br /> <!-- Preheading --><br /> <div class="text-center mb-3"><br /> <span class="badge rounded-pill bg-primary-soft"><br /> <span class="h6 text-uppercase">Basic</span><br /> </span><br /> </div><br /><br /> <!-- Price --><br /> <div class="d-flex justify-content-center"><br /> <span class="h2 mb-0 mt-2">$</span><br /> <span class="price display-2 mb-0" data-annual="0" data-monthly="0">0</span><br /> <span class="h2 align-self-end mb-1">/mo</span><br /> </div><br /><br /> <!-- Text --><br /> <p class="text-center text-muted mb-5"><br /> per seat<br /> </p><br /><br /> <!-- List --><br /> <div class="d-flex"><br /> <br /> <!-- Badge --><br /> <div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4"><br /> <i class="fe fe-check"></i><br /> </div><br /><br /> <!-- Text --><br /> <p><br /> Rich landing pages<br /> </p><br /> <br /> </div><br /> <div class="d-flex"><br /> <br /> <!-- Badge --><br /> <div class="badge badge-rounded-circle bg-success-soft mt-1 mr-4"><br /> <i class="fe fe-check"></i><br /> </div><br /><br /> <!-- Text --><br /> <p class="mb-5"><br /> 100+ components<br /> </p><br /> <br /> </div><br /><br /> <!-- Button --><br /> <a href="#!" class="btn btn-block btn-primary-soft"><br /> Start for free <i class="fe fe-arrow-right ml-3"></i><br /> </a><br /> <br /> </div><br /></div>
|
||
</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="portfolio">Portfolio</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">
|
||
Variations of the card component.
|
||
</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-5">
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-12 col-md-4">
|
||
|
||
<!-- Card -->
|
||
<a class="card card-flush mb-7 mb-md-0" href="#!">
|
||
|
||
<!-- Image -->
|
||
<div class="card-zoom">
|
||
<img class="card-img-top rounded shadow-light-lg" src="../assets/img/portfolio/portfolio-5.jpg" alt="...">
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="card-footer">
|
||
|
||
<!-- Preheading -->
|
||
<h6 class="text-uppercase mb-1 text-muted">Branding</h6>
|
||
|
||
<!-- Heading -->
|
||
<h4 class="mb-0">Landkit Redesign</h4>
|
||
|
||
</div>
|
||
|
||
</a>
|
||
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
|
||
<!-- Card -->
|
||
<a class="card shadow-light-lg mb-7 mb-md-0" href="#!">
|
||
|
||
<!-- Image -->
|
||
<div class="card-zoom">
|
||
<img class="card-img-top" src="../assets/img/portfolio/portfolio-6.jpg" alt="...">
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div class="card-body">
|
||
|
||
<!-- Shape -->
|
||
<div class="shape shape-bottom-100 shape-fluid-x svg-shim text-white">
|
||
<svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 48h2880V0h-720C1442.5 52 720 0 720 0H0v48z" fill="currentColor"/></svg> </div>
|
||
|
||
<!-- Preheading -->
|
||
<h6 class="text-uppercase mb-1 text-muted">Branding</h6>
|
||
|
||
<!-- Heading -->
|
||
<h4 class="mb-0">Landkit Redesign</h4>
|
||
|
||
</div>
|
||
|
||
</a>
|
||
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
|
||
<!-- Card -->
|
||
<a class="card shadow-light-lg" href="#!">
|
||
|
||
<!-- Image -->
|
||
<div class="card-zoom">
|
||
<img class="card-img" src="../assets/img/portfolio/portfolio-11.jpg" alt="...">
|
||
</div>
|
||
|
||
<!-- Overlay -->
|
||
<div class="card-img-overlay card-img-overlay-hover">
|
||
<div class="card-body bg-white">
|
||
|
||
<!-- Shape -->
|
||
<div class="shape shape-bottom-100 shape-fluid-x svg-shim text-white">
|
||
<svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 48h2880V0h-720C1442.5 52 720 0 720 0H0v48z" fill="currentColor"/></svg> </div>
|
||
|
||
<!-- Preheading -->
|
||
<h6 class="text-uppercase mb-1 text-muted">Branding</h6>
|
||
|
||
<!-- Heading -->
|
||
<h4 class="mb-0">Landkit Redesign</h4>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer bg-black">
|
||
<code class="highlight html">
|
||
<!-- Card --><br /><a class="card card-flush mb-7 mb-md-0" href="#!"><br /><br /> <!-- Image --><br /> <div class="card-zoom"><br /> <img class="card-img-top rounded shadow-light-lg" src="../assets/img/portfolio/portfolio-5.jpg" alt="..."><br /> </div><br /><br /> <!-- Footer --><br /> <div class="card-footer"><br /><br /> <!-- Preheading --><br /> <h6 class="text-uppercase mb-1 text-muted">Branding</h6><br /><br /> <!-- Heading --><br /> <h4 class="mb-0">Landkit Redesign</h4><br /><br /> </div><br /><br /></a><br /><br /><!-- Card --><br /><a class="card shadow-light-lg mb-7 mb-md-0" href="#!"><br /><br /> <!-- Image --><br /> <div class="card-zoom"><br /> <img class="card-img-top" src="../assets/img/portfolio/portfolio-6.jpg" alt="..."><br /> </div><br /><br /> <!-- Body --><br /> <div class="card-body"><br /><br /> <!-- Shape --><br /> <div class="shape shape-bottom-100 shape-fluid-x svg-shim text-white"><br /> {{> curves/curve-1}}<br /> </div><br /><br /> <!-- Preheading --><br /> <h6 class="text-uppercase mb-1 text-muted">Branding</h6><br /><br /> <!-- Heading --><br /> <h4 class="mb-0">Landkit Redesign</h4><br /><br /> </div><br /><br /></a><br /><br /><!-- Card --><br /><a class="card shadow-light-lg" href="#!"><br /><br /> <!-- Image --><br /> <div class="card-zoom"><br /> <img class="card-img" src="../assets/img/portfolio/portfolio-11.jpg" alt="..."><br /> </div><br /><br /> <!-- Overlay --><br /> <div class="card-img-overlay card-img-overlay-hover"><br /> <div class="card-body bg-white"><br /><br /> <!-- Shape --><br /> <div class="shape shape-bottom-100 shape-fluid-x svg-shim text-white"><br /> {{> curves/curve-1}}<br /> </div><br /><br /> <!-- Preheading --><br /> <h6 class="text-uppercase mb-1 text-muted">Branding</h6><br /><br /> <!-- Heading --><br /> <h4 class="mb-0">Landkit Redesign</h4><br /><br /> </div><br /> </div><br /><br /></a><br />
|
||
</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="#border" data-scroll>Border</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="#signup" data-scroll>Signup</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="#testimonials" data-scroll>Testimonials</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="#blockCards" data-scroll>Block cards</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="#price" data-scroll>Price</a>
|
||
</li>
|
||
<li class="list-item">
|
||
<a class="list-link" href="#portfolio" data-scroll>Portfolio</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>
|