@themesberg/volt-bootstrap-5-dashboard
Version:
Volt - Bootstrap 5 Dashboard
438 lines (429 loc) • 73.4 kB
HTML
<!--
=========================================================
* Volt Free - Bootstrap 5 Dashboard
=========================================================
* Product Page: https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard
* Copyright 2021 Themesberg (https://www.themesberg.com)
* Designed and coded by https://themesberg.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Please contact us to request a removal. Contact us if you want to remove it.
-->
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./_head.html', {
"path": ".",
"title": "Volt - Free Bootstrap 5 Admin Dashboard"
})
</head>
<body>
@@include('./_navigation.html', {
"path": ".",
"classes": "navbar-dark"
})
<main>
<!-- Hero -->
<section class="section-header overflow-hidden pt-7 pt-lg-8 pb-9 pb-lg-12 bg-primary text-white">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<div class="bootstrap-big-icon d-none d-lg-block">
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="622" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
</div>
<h1 class="fw-bolder">Volt Bootstrap 5 Dashboard</h1>
<h2 class="lead fw-normal text-muted mb-5">Open source dashboard powered by Bootstrap 5</h2>
<!-- Button Modal -->
<div class="d-flex align-items-center justify-content-center mb-5">
<a href="./pages/dashboard/dashboard.html" class="btn btn-secondary d-inline-flex align-items-center me-4">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"></path></svg>
Dashboard Demo
</a>
<div class="mb-lg-0 mt-1">
<a class="github-button" href="https://github.com/themesberg/volt-bootstrap-5-dashboard" data-color-scheme="no-preference: dark; light: light; dark: light;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star themesberg/volt-bootstrap-5-dashboard on GitHub">Star</a>
</div>
</div>
<div class="d-flex justify-content-center flex-column mb-6 mb-lg-5">
<a href="https://themesberg.com" target="_blank">
<img src="./assets/img/themesberg.svg" class="d-block mx-auto mb-3" height="25" width="25" alt="Themesberg Logo">
<span class="text-muted font-small">A Themesberg production</span>
</a>
</div>
</div>
</div>
</div>
<figure class="position-absolute bottom-0 left-0 w-100 d-none d-md-block mb-n2"><svg class="home-pattern" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 185.4"><path d="M3000,0v185.4H0V0c496.4,115.6,996.4,173.4,1500,173.4S2503.6,115.6,3000,0z"></path></svg></figure>
</section>
<div class="section pt-0">
<div class="container mt-n10 mt-lg-n12 z-2">
<div class="row justify-content-center">
<div class="col-12">
<img src="./assets/img/mockup-presentation.png" alt="Mockup presentation">
</div>
</div>
</div>
</div>
<section class="section section-lg bg-soft pt-0">
<div class="container">
<div class="row justify-content-center mb-5 mb-lg-6">
<div class="col-6 col-md-3 text-center mb-4">
<div class="icon icon-shape bg-white shadow-lg rounded mb-4">
<svg class="icon icon-md text-secondary" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"></path></svg>
</div>
<h3 class="fw-bolder">21</h3>
<p class="text-gray">Dashboard Pages</p>
</div>
<div class="col-6 col-md-3 text-center mb-4">
<div class="icon icon-shape bg-white shadow-lg rounded mb-4">
<svg class="icon icon-md text-secondary" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z"></path></svg>
</div>
<h3 class="fw-bolder">800+</h3>
<p class="text-gray">Premium Components</p>
</div>
<div class="col-6 col-md-3 text-center">
<div class="icon icon-shape bg-white shadow-lg rounded mb-4">
<svg class="icon icon-md text-secondary" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z"></path></svg>
</div>
<h3 class="fw-bolder">Workflow</h3>
<p class="text-gray">Sass & Gulp</p>
</div>
<div class="col-6 col-md-3 text-center">
<div class="icon icon-shape bg-white shadow-lg rounded mb-4">
<svg class="icon icon-md text-secondary" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="js-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"></path></svg>
</div>
<h3 class="fw-bolder">Vanilla</h3>
<p class="text-gray">Javascript</p>
</div>
</div>
<div class="row justify-content-between align-items-center mb-5 mb-lg-7">
<div class="row justify-content-between align-items-center">
<div class="col-lg-5 order-lg-2 mb-5 mb-lg-0">
<h2 class="h1">Bootstrap 5</h2>
<p class="mb-4 lead fw-bold">Latest version of Bootstrap without jQuery</p>
<p class="mb-4">Volt is built using the latest version of Bootstrap 5 and we only used Vanilla Javascript for everything including the plugins</p>
<a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/components/accordions/" target="_blank" class="btn btn-outline-gray-600 d-inline-flex align-items-center">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"></path></svg>
Getting started
</a>
</div>
<div class="col-lg-6 order-lg-1">
<img src="./assets/img/illustrations/bs5-illustrations.svg" alt="Front pages overview">
</div>
</div>
<div class="col-lg-5 mb-5 mb-lg-0">
<h2 class="h1 d-flex align-items-center">Kanban Board <span class="ms-3 mb-0 fs-6 badge badge-lg rounded-pill text-gray-800 bg-secondary">Pro</span></h2>
<p class="mb-4 lead fw-bold">Advanced FullCalendar.js integration</p>
<p class="mb-4">We created a fully editable calendar where you can add, edit and delete events for your admin dashboard.</p>
<a href="https://demo.themesberg.com/volt-pro/pages/kanban.html" target="_blank" class="btn btn-secondary d-inline-flex align-items-center me-3">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
Demo
</a>
<!-- <a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/plugins/kanban/" target="_blank" class="btn btn-outline-primary"><span class="fas fa-book me-2"></span> Guide</a> -->
</div>
<div class="col-lg-6">
<img src="./assets/img/mockup-kanban-presentation.png" alt="Kanban Preview">
</div>
</div>
<div class="row justify-content-between align-items-center mb-5 mb-lg-7">
<div class="col-lg-5 order-lg-2 mb-5 mb-lg-0">
<h2 class="h1 d-flex align-items-center">Mapbox <span class="ms-3 mb-0 fs-6 badge badge-lg rounded-pill text-gray-800 bg-secondary">Pro</span></h2>
<p class="mb-4 lead fw-bold">Markers and cards integration with Leaflet.js</p>
<p class="mb-4">You can use this map to add markers with custom cards and show them on a map using our custom MapBox integration with Leaflet.js</p>
<a href="https://demo.themesberg.com/volt-pro/pages/map.html" target="_blank" class="btn btn-secondary d-inline-flex align-items-center me-3">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12 1.586l-4 4v12.828l4-4V1.586zM3.707 3.293A1 1 0 002 4v10a1 1 0 00.293.707L6 18.414V5.586L3.707 3.293zM17.707 5.293L14 1.586v12.828l2.293 2.293A1 1 0 0018 16V6a1 1 0 00-.293-.707z" clip-rule="evenodd"></path></svg>
Demo
</a>
<a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/plugins/mapbox/" target="_blank" class="btn btn-outline-gray-600 d-inline-flex align-items-center">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
Guide
</a>
</div>
<div class="col-lg-6 order-lg-1">
<img src="./assets/img/mockup-map-presentation.png" alt="MapBox Leaflet.js Custom Integration Mockup">
</div>
</div>
<div class="row justify-content-between align-items-center mb-5 mb-lg-7">
<div class="col-lg-5 mb-5 mb-lg-0">
<h2 class="h1 d-flex align-items-center">Calendar <span class="ms-3 mb-0 fs-6 badge badge-lg rounded-pill text-gray-800 bg-secondary">Pro</span></h2>
<p class="mb-4 lead fw-bold">Advanced FullCalendar.js integration</p>
<p class="mb-4">We created a fully editable calendar where you can add, edit and delete events for your admin dashboard.</p>
<a href="https://demo.themesberg.com/volt-pro/pages/calendar.html" target="_blank" class="btn btn-secondary d-inline-flex align-items-center me-3">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
Demo
</a>
<a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/plugins/calendar/" target="_blank" class="btn btn-outline-gray-600 d-inline-flex align-items-center">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
Guide
</a>
</div>
<div class="col-lg-6">
<img src="./assets/img/mockup-calendar-presentation.png" alt="Calendar Preview">
</div>
</div>
</div>
</section>
<section class="section section-sm pt-0">
<div class="container">
<div class="row justify-content-center mb-5 mb-lg-6">
<div class="col-12 text-center">
<h2 class="h1 px-lg-5">10 hand-crafted pages</h2>
<p class="lead px-lg-10">Every page from Volt has been carefully built to provide all the necessary pages your startup will require</p>
</div>
</div>
<div class="row mb-5">
<div class="col-6 mb-5">
<a href="./pages/dashboard/dashboard.html" class="page-preview scale-up-2">
<img class="shadow-lg rounded scale" src="./assets/img/pages/overview.jpg" alt="Dashboard page preview">
<div class="text-center show-on-hover rounded-bottom">
<h6 class="m-0 text-center d-inline-flex align-items-center text-white">Overview <svg class="icon icon-xs ms-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg></h6>
</div>
</a>
</div>
<div class="col-6 mb-5">
<a href="./pages/transactions.html" class="page-preview scale-up-2">
<img class="shadow-lg rounded scale" src="./assets/img/pages/transactions.jpg" alt="Transactions page preview">
<div class="text-center show-on-hover rounded-bottom">
<h6 class="m-0 text-center d-inline-flex align-items-center text-white">Transactions <svg class="icon icon-xs ms-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg></h6>
</div>
</a>
</div>
<div class="col-6 mb-5">
<a href="./pages/settings.html" class="page-preview scale-up-2">
<img class="shadow-lg rounded scale" src="./assets/img/pages/settings.jpg" alt="Settings page preview">
<div class="text-center show-on-hover rounded-bottom">
<h6 class="m-0 text-center d-inline-flex align-items-center text-white">Settings <svg class="icon icon-xs ms-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg></h6>
</div>
</a>
</div>
<div class="col-6 mb-5">
<a href="./pages/examples/sign-in.html" class="page-preview scale-up-2">
<img class="shadow-lg rounded scale" src="./assets/img/pages/sign-in.jpg" alt="Sign In page preview">
<div class="text-center show-on-hover rounded-bottom">
<h6 class="m-0 text-center d-inline-flex align-items-center text-white">Sign In <svg class="icon icon-xs ms-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg></h6>
</div>
</a>
</div>
<div class="col-6 mb-5">
<a href="./pages/examples/sign-up.html" class="page-preview scale-up-2">
<img class="shadow-lg rounded scale" src="./assets/img/pages/sign-up.jpg" alt="Sign Up page preview">
<div class="text-center show-on-hover rounded-bottom">
<h6 class="m-0 text-center d-inline-flex align-items-center text-white">Sign Up <svg class="icon icon-xs ms-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg></h6>
</div>
</a>
</div>
<div class="col-6 mb-5">
<a href="./pages/examples/lock.html" class="page-preview scale-up-2">
<img class="shadow-lg rounded scale" src="./assets/img/pages/lock.jpg" alt="Lock page preview">
<div class="text-center show-on-hover rounded-bottom">
<h6 class="m-0 text-center d-inline-flex align-items-center text-white">Sign Up <svg class="icon icon-xs ms-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg></h6>
</div>
</a>
</div>
<div class="col-6 mb-5">
<a href="./pages/examples/forgot-password.html" class="page-preview scale-up-2">
<img class="shadow-lg rounded scale" src="./assets/img/pages/forgot-password.jpg" alt="Forgot password preview">
<div class="text-center show-on-hover rounded-bottom">
<h6 class="m-0 text-center d-inline-flex align-items-center text-white">Forgot password <svg class="icon icon-xs ms-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg></h6>
</div>
</a>
</div>
<div class="col-6 mb-5">
<a href="./pages/examples/reset-password.html" class="page-preview scale-up-2">
<img class="shadow-lg rounded scale" src="./assets/img/pages/reset-password.jpg" alt="Reset password preview">
<div class="text-center show-on-hover rounded-bottom">
<h6 class="m-0 text-center d-inline-flex align-items-center text-white">Reset password <svg class="icon icon-xs ms-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg></h6>
</div>
</a>
</div>
<div class="col-6 mb-5">
<a href="./pages/examples/404.html" class="page-preview scale-up-2">
<img class="shadow-lg rounded scale" src="./assets/img/pages/404.jpg" alt="404 error preview">
<div class="text-center show-on-hover rounded-bottom">
<h6 class="m-0 text-center d-inline-flex align-items-center text-white">404 <svg class="icon icon-xs ms-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg></h6>
</div>
</a>
</div>
<div class="col-6 mb-5">
<a href="./pages/examples/500.html" class="page-preview scale-up-2">
<img class="shadow-lg rounded scale" src="./assets/img/pages/500.jpg" alt="500 error preview">
<div class="text-center show-on-hover rounded-bottom">
<h6 class="m-0 text-center d-inline-flex align-items-center text-white">500 <svg class="icon icon-xs ms-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg></h6>
</div>
</a>
</div>
</div>
</div>
</section>
<section class="section section-lg bg-gray-800 text-white">
<div class="container">
<div class="row justify-content-center mb-5 mb-lg-6">
<div class="col-12 text-center">
<h2 class="h1 px-lg-5">Awesome Features</h2>
<p class="lead px-lg-8">You get all Bootstrap components fully customized. Besides, you receive numerous plugins out of the box and ready to use.</p>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-lg-3">
<div class="card bg-white shadow-soft text-primary rounded mb-4">
<div class="px-3 px-lg-4 py-5 text-center">
<svg class="icon icon-md mb-3" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="bootstrap" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M292.3 311.93c0 42.41-39.72 41.43-43.92 41.43h-80.89v-81.69h80.89c42.56 0 43.92 31.9 43.92 40.26zm-50.15-73.13c.67 0 38.44 1 38.44-36.31 0-15.52-3.51-35.87-38.44-35.87h-74.66v72.18h74.66zM448 106.67v298.66A74.89 74.89 0 0 1 373.33 480H74.67A74.89 74.89 0 0 1 0 405.33V106.67A74.89 74.89 0 0 1 74.67 32h298.66A74.89 74.89 0 0 1 448 106.67zM338.05 317.86c0-21.57-6.65-58.29-49.05-67.35v-.73c22.91-9.78 37.34-28.25 37.34-55.64 0-7 2-64.78-77.6-64.78h-127v261.33c128.23 0 139.87 1.68 163.6-5.71 14.21-4.42 52.71-17.98 52.71-67.12z"></path></svg>
<h5 class="fw-bold text-primary">Bootstrap 5</h5>
<p class="mb-0 text-gray-600">Built with the most popular CSS Framework</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card bg-white shadow-soft text-primary rounded mb-4">
<div class="px-3 px-lg-4 py-5 text-center">
<svg class="icon icon-md mb-3" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="sass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M301.84 378.92c-.3.6-.6 1.08 0 0zm249.13-87a131.16 131.16 0 0 0-58 13.5c-5.9-11.9-12-22.3-13-30.1-1.2-9.1-2.5-14.5-1.1-25.3s7.7-26.1 7.6-27.2-1.4-6.6-14.3-6.7-24 2.5-25.29 5.9a122.83 122.83 0 0 0-5.3 19.1c-2.3 11.7-25.79 53.5-39.09 75.3-4.4-8.5-8.1-16-8.9-22-1.2-9.1-2.5-14.5-1.1-25.3s7.7-26.1 7.6-27.2-1.4-6.6-14.29-6.7-24 2.5-25.3 5.9-2.7 11.4-5.3 19.1-33.89 77.3-42.08 95.4c-4.2 9.2-7.8 16.6-10.4 21.6-.4.8-.7 1.3-.9 1.7.3-.5.5-1 .5-.8-2.2 4.3-3.5 6.7-3.5 6.7v.1c-1.7 3.2-3.6 6.1-4.5 6.1-.6 0-1.9-8.4.3-19.9 4.7-24.2 15.8-61.8 15.7-63.1-.1-.7 2.1-7.2-7.3-10.7-9.1-3.3-12.4 2.2-13.2 2.2s-1.4 2-1.4 2 10.1-42.4-19.39-42.4c-18.4 0-44 20.2-56.58 38.5-7.9 4.3-25 13.6-43 23.5-6.9 3.8-14 7.7-20.7 11.4-.5-.5-.9-1-1.4-1.5-35.79-38.2-101.87-65.2-99.07-116.5 1-18.7 7.5-67.8 127.07-127.4 98-48.8 176.35-35.4 189.84-5.6 19.4 42.5-41.89 121.6-143.66 133-38.79 4.3-59.18-10.7-64.28-16.3-5.3-5.9-6.1-6.2-8.1-5.1-3.3 1.8-1.2 7 0 10.1 3 7.9 15.5 21.9 36.79 28.9 18.7 6.1 64.18 9.5 119.17-11.8 61.78-23.8 109.87-90.1 95.77-145.6C386.52 18.32 293-.18 204.57 31.22c-52.69 18.7-109.67 48.1-150.66 86.4-48.69 45.6-56.48 85.3-53.28 101.9 11.39 58.9 92.57 97.3 125.06 125.7-1.6.9-3.1 1.7-4.5 2.5-16.29 8.1-78.18 40.5-93.67 74.7-17.5 38.8 2.9 66.6 16.29 70.4 41.79 11.6 84.58-9.3 107.57-43.6s20.2-79.1 9.6-99.5c-.1-.3-.3-.5-.4-.8 4.2-2.5 8.5-5 12.8-7.5 8.29-4.9 16.39-9.4 23.49-13.3-4 10.8-6.9 23.8-8.4 42.6-1.8 22 7.3 50.5 19.1 61.7 5.2 4.9 11.49 5 15.39 5 13.8 0 20-11.4 26.89-25 8.5-16.6 16-35.9 16-35.9s-9.4 52.2 16.3 52.2c9.39 0 18.79-12.1 23-18.3v.1s.2-.4.7-1.2c1-1.5 1.5-2.4 1.5-2.4v-.3c3.8-6.5 12.1-21.4 24.59-46 16.2-31.8 31.69-71.5 31.69-71.5a201.24 201.24 0 0 0 6.2 25.8c2.8 9.5 8.7 19.9 13.4 30-3.8 5.2-6.1 8.2-6.1 8.2a.31.31 0 0 0 .1.2c-3 4-6.4 8.3-9.9 12.5-12.79 15.2-28 32.6-30 37.6-2.4 5.9-1.8 10.3 2.8 13.7 3.4 2.6 9.4 3 15.69 2.5 11.5-.8 19.6-3.6 23.5-5.4a82.2 82.2 0 0 0 20.19-10.6c12.5-9.2 20.1-22.4 19.4-39.8-.4-9.6-3.5-19.2-7.3-28.2 1.1-1.6 2.3-3.3 3.4-5C434.8 301.72 450.1 270 450.1 270a201.24 201.24 0 0 0 6.2 25.8c2.4 8.1 7.09 17 11.39 25.7-18.59 15.1-30.09 32.6-34.09 44.1-7.4 21.3-1.6 30.9 9.3 33.1 4.9 1 11.9-1.3 17.1-3.5a79.46 79.46 0 0 0 21.59-11.1c12.5-9.2 24.59-22.1 23.79-39.6-.3-7.9-2.5-15.8-5.4-23.4 15.7-6.6 36.09-10.2 62.09-7.2 55.68 6.5 66.58 41.3 64.48 55.8s-13.8 22.6-17.7 25-5.1 3.3-4.8 5.1c.5 2.6 2.3 2.5 5.6 1.9 4.6-.8 29.19-11.8 30.29-38.7 1.6-34-31.09-71.4-89-71.1zm-429.18 144.7c-18.39 20.1-44.19 27.7-55.28 21.3C54.61 451 59.31 421.42 82 400c13.8-13 31.59-25 43.39-32.4 2.7-1.6 6.6-4 11.4-6.9.8-.5 1.2-.7 1.2-.7.9-.6 1.9-1.1 2.9-1.7 8.29 30.4.3 57.2-19.1 78.3zm134.36-91.4c-6.4 15.7-19.89 55.7-28.09 53.6-7-1.8-11.3-32.3-1.4-62.3 5-15.1 15.6-33.1 21.9-40.1 10.09-11.3 21.19-14.9 23.79-10.4 3.5 5.9-12.2 49.4-16.2 59.2zm111 53c-2.7 1.4-5.2 2.3-6.4 1.6-.9-.5 1.1-2.4 1.1-2.4s13.9-14.9 19.4-21.7c3.2-4 6.9-8.7 10.89-13.9 0 .5.1 1 .1 1.6-.13 17.9-17.32 30-25.12 34.8zm85.58-19.5c-2-1.4-1.7-6.1 5-20.7 2.6-5.7 8.59-15.3 19-24.5a36.18 36.18 0 0 1 1.9 10.8c-.1 22.5-16.2 30.9-25.89 34.4z"></path></svg>
<h5 class="fw-bold text-primary">Sass</h5>
<p class="mb-0 text-gray-600">Variables and mixins to empower development</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card bg-white shadow-soft text-primary rounded mb-4">
<div class="px-3 px-lg-4 py-5 text-center">
<svg class="icon icon-md mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
<h5 class="fw-bold text-primary">Responsive</h5>
<p class="mb-0 text-gray-600">All pages and components are 100% responsive</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card bg-white shadow-soft text-primary rounded mb-4">
<div class="px-3 px-lg-4 py-5 text-center">
<svg class="icon icon-md mb-3" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="gulp" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M209.8 391.1l-14.1 24.6-4.6 80.2c0 8.9-28.3 16.1-63.1 16.1s-63.1-7.2-63.1-16.1l-5.8-79.4-14.9-25.4c41.2 17.3 126 16.7 165.6 0zm-196-253.3l13.6 125.5c5.9-20 20.8-47 40-55.2 6.3-2.7 12.7-2.7 18.7.9 5.2 3 9.6 9.3 10.1 11.8 1.2 6.5-2 9.1-4.5 9.1-3 0-5.3-4.6-6.8-7.3-4.1-7.3-10.3-7.6-16.9-2.8-6.9 5-12.9 13.4-17.1 20.7-5.1 8.8-9.4 18.5-12 28.2-1.5 5.6-2.9 14.6-.6 19.9 1 2.2 2.5 3.6 4.9 3.6 5 0 12.3-6.6 15.8-10.1 4.5-4.5 10.3-11.5 12.5-16l5.2-15.5c2.6-6.8 9.9-5.6 9.9 0 0 10.2-3.7 13.6-10 34.7-5.8 19.5-7.6 25.8-7.6 25.8-.7 2.8-3.4 7.5-6.3 7.5-1.2 0-2.1-.4-2.6-1.2-1-1.4-.9-5.3-.8-6.3.2-3.2 6.3-22.2 7.3-25.2-2 2.2-4.1 4.4-6.4 6.6-5.4 5.1-14.1 11.8-21.5 11.8-3.4 0-5.6-.9-7.7-2.4l7.6 79.6c2 5 39.2 17.1 88.2 17.1 49.1 0 86.3-12.2 88.2-17.1l10.9-94.6c-5.7 5.2-12.3 11.6-19.6 14.8-5.4 2.3-17.4 3.8-17.4-5.7 0-5.2 9.1-14.8 14.4-21.5 1.4-1.7 4.7-5.9 4.7-8.1 0-2.9-6-2.2-11.7 2.5-3.2 2.7-6.2 6.3-8.7 9.7-4.3 6-6.6 11.2-8.5 15.5-6.2 14.2-4.1 8.6-9.1 22-5 13.3-4.2 11.8-5.2 14-.9 1.9-2.2 3.5-4 4.5-1.9 1-4.5.9-6.1-.3-.9-.6-1.3-1.9-1.3-3.7 0-.9.1-1.8.3-2.7 1.5-6.1 7.8-18.1 15-34.3 1.6-3.7 1-2.6.8-2.3-6.2 6-10.9 8.9-14.4 10.5-5.8 2.6-13 2.6-14.5-4.1-.1-.4-.1-.8-.2-1.2-11.8 9.2-24.3 11.7-20-8.1-4.6 8.2-12.6 14.9-22.4 14.9-4.1 0-7.1-1.4-8.6-5.1-2.3-5.5 1.3-14.9 4.6-23.8 1.7-4.5 4-9.9 7.1-16.2 1.6-3.4 4.2-5.4 7.6-4.5.6.2 1.1.4 1.6.7 2.6 1.8 1.6 4.5.3 7.2-3.8 7.5-7.1 13-9.3 20.8-.9 3.3-2 9 1.5 9 2.4 0 4.7-.8 6.9-2.4 4.6-3.4 8.3-8.5 11.1-13.5 2-3.6 4.4-8.3 5.6-12.3.5-1.7 1.1-3.3 1.8-4.8 1.1-2.5 2.6-5.1 5.2-5.1 1.3 0 2.4.5 3.2 1.5 1.7 2.2 1.3 4.5.4 6.9-2 5.6-4.7 10.6-6.9 16.7-1.3 3.5-2.7 8-2.7 11.7 0 3.4 3.7 2.6 6.8 1.2 2.4-1.1 4.8-2.8 6.8-4.5 1.2-4.9.9-3.8 26.4-68.2 1.3-3.3 3.7-4.7 6.1-4.7 1.2 0 2.2.4 3.2 1.1 1.7 1.3 1.7 4.1 1 6.2-.7 1.9-.6 1.3-4.5 10.5-5.2 12.1-8.6 20.8-13.2 31.9-1.9 4.6-7.7 18.9-8.7 22.3-.6 2.2-1.3 5.8 1 5.8 5.4 0 19.3-13.1 23.1-17 .2-.3.5-.4.9-.6.6-1.9 1.2-3.7 1.7-5.5 1.4-3.8 2.7-8.2 5.3-11.3.8-1 1.7-1.6 2.7-1.6 2.8 0 4.2 1.2 4.2 4 0 1.1-.7 5.1-1.1 6.2 1.4-1.5 2.9-3 4.5-4.5 15-13.9 25.7-6.8 25.7.2 0 7.4-8.9 17.7-13.8 23.4-1.6 1.9-4.9 5.4-5 6.4 0 1.3.9 1.8 2.2 1.8 2 0 6.4-3.5 8-4.7 5-3.9 11.8-9.9 16.6-14.1l14.8-136.8c-30.5 17.1-197.6 17.2-228.3.2zm229.7-8.5c0 21-231.2 21-231.2 0 0-8.8 51.8-15.9 115.6-15.9 9 0 17.8.1 26.3.4l12.6-48.7L228.1.6c1.4-1.4 5.8-.2 9.9 3.5s6.6 7.9 5.3 9.3l-.1.1L185.9 74l-10 40.7c39.9 2.6 67.6 8.1 67.6 14.6zm-69.4 4.6c0-.8-.9-1.5-2.5-2.1l-.2.8c0 1.3-5 2.4-11.1 2.4s-11.1-1.1-11.1-2.4c0-.1 0-.2.1-.3l.2-.7c-1.8.6-3 1.4-3 2.3 0 2.1 6.2 3.7 13.7 3.7 7.7.1 13.9-1.6 13.9-3.7z"></path></svg>
<h5 class="fw-bold text-primary">Gulp</h5>
<p class="mb-0 text-gray-600">Gulp & BrowserSync for a flawless workflow</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card bg-white shadow-soft text-primary rounded mb-4">
<div class="px-3 px-lg-4 py-5 text-center">
<svg class="icon icon-md mb-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path></svg>
<h5 class="fw-bold text-primary">Creative rights</h5>
<p class="mb-0 text-gray-600">All images and fonts are licensed & free to use</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card bg-white shadow-soft text-primary rounded mb-4">
<div class="px-3 px-lg-4 py-5 text-center">
<svg class="icon icon-md mb-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"></path></svg>
<h5 class="fw-bold text-primary">Documentation</h5>
<p class="mb-0 text-gray-600">Everything that comes is well documented</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card bg-white shadow-soft text-primary rounded mb-4">
<div class="px-3 px-lg-4 py-5 text-center">
<svg class="icon icon-md mb-3" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="accessible-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z"></path></svg>
<h5 class="fw-bold text-primary">WCAG Accessibility</h5>
<p class="mb-0 text-gray-600">Accessibility oriented design and functionality</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card bg-white shadow-soft text-primary rounded mb-4">
<div class="px-3 px-lg-4 py-5 text-center">
<svg class="icon icon-md mb-3" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="html5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"></path></svg>
<h5 class="fw-bold text-primary">W3C Validated</h5>
<p class="mb-0 text-gray-600">HTML pages are all valid by W3C Standards</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card bg-white shadow-soft text-primary rounded mb-4">
<div class="px-3 px-lg-4 py-5 text-center">
<svg class="icon icon-md mb-3" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="js-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"></path></svg>
<h5 class="fw-bold text-primary">Vanilla JS</h5>
<p class="mb-0 text-gray-600">jQuery is not a required dependency for Volt</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card bg-white shadow-soft text-primary rounded mb-4">
<div class="px-3 px-lg-4 py-5 text-center">
<svg class="icon icon-md mb-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
<h5 class="fw-bold text-primary">Calendar</h5>
<p class="mb-0 text-gray-600">Advanced integration with FullCalendar.js</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card bg-white shadow-soft text-primary rounded mb-4">
<div class="px-3 px-lg-4 py-5 text-center">
<svg class="icon icon-md mb-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12 1.586l-4 4v12.828l4-4V1.586zM3.707 3.293A1 1 0 002 4v10a1 1 0 00.293.707L6 18.414V5.586L3.707 3.293zM17.707 5.293L14 1.586v12.828l2.293 2.293A1 1 0 0018 16V6a1 1 0 00-.293-.707z" clip-rule="evenodd"></path></svg>
<h5 class="fw-bold text-primary">MapBox</h5>
<p class="mb-0 text-gray-600">Custom integration with markers and cards</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="card bg-white shadow-soft text-primary rounded mb-4">
<div class="px-3 px-lg-4 py-5 text-center">
<svg class="icon icon-md mb-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z"></path></svg>
<h5 class="fw-bold text-primary">Design</h5>
<p class="mb-0 text-gray-600">Crafted by professional UI/UX designers</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section section-lg line-bottom-soft">
<div class="container">
<div class="row justify-content-center mb-5 mb-lg-6">
<div class="col-12 text-center">
<h2 class="h1 px-lg-5">What's inside?</h2>
<p class="lead px-lg-8">We have carefully crafted the perfect folder structure to ensure that finding the files you're looking for are easily reachable and well organized.</p>
</div>
</div>
<div class="row d-flex align-items-center">
<div class="col-12 col-lg-6 mb-4">
<div class="d-none d-lg-block mt-5">
<h4>You need only HTML, CSS and Javascript?</h4>
<p class="lead mb-4">Don't worry, we got you covered. We have a folder called <code class="text-danger">html&css</code> which includes only the basic HTML5, CSS3 and Javascript technologies.</p>
<a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/file-structure/" target="_blank" class="btn btn-secondary d-inline-flex align-items-center">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
Docs
</a>
</div>
</div>
<div class="col-12 col-lg-6 order-lg-first d-flex justify-content-center">
<ul class="d-block fmw-100 list-unstyled folder-structure">
<li data-bs-toggle="tooltip" data-bs-placement="left" title="Main folder that you will be working with">
<svg class="icon icon-sm me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
src
</li>
<li>
<ul class="list-unstyled ps-4">
<li class="d-flex align-items-center mb-1" data-bs-toggle="tooltip" data-bs-placement="left" title="CSS, Images, Fonts and Javascript">
<svg class="icon icon-sm me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
assets
</li>
<li class="d-flex align-items-center mb-1" data-bs-toggle="tooltip" data-bs-placement="left" title="HTML templates">
<svg class="icon icon-sm me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
pages
</li>
<li class="d-flex align-items-center mb-1" data-bs-toggle="tooltip" data-bs-placement="left" title="Partials are HTML snippets that are included in multiple pages, such as the menu or footer">
<svg class="icon icon-sm me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
partials
</li>
<li class="d-flex align-items-center mb-1" data-bs-toggle="tooltip" data-bs-placement="left" title="Sass source files">
<svg class="icon icon-sm me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
scss
</li>
<li class="d-flex align-items-center mb-1" data-bs-toggle="tooltip" data-bs-placement="left" title="The page you're looking at right now. Call it inception.">
<svg class="icon icon-sm me-2 text-warning" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="html5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"></path></svg>
index.html
</li>
</ul>
</li>
<li class="d-flex align-items-center mb-1" data-bs-toggle="tooltip" data-bs-placement="left" title="Rocket with only HTML, CSS and Javascript">
<svg class="icon icon-sm me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
html&css
</li>
<li class="d-flex align-items-center mb-1" data-bs-toggle="tooltip" data-bs-placement="left"