1275 lines
55 KiB
HTML
1275 lines
55 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="">
|
|
<head>
|
|
<!-- Required Meta Tags Always Come First -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Title -->
|
|
<title>App UI Kit | Front - Multipurpose Responsive Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="./favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<link rel="stylesheet" href="./assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
|
|
<link rel="stylesheet" href="./assets/vendor/aos/dist/aos.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<link rel="stylesheet" href="./assets/css/theme.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- ========== HEADER ========== -->
|
|
<header id="header" class="navbar navbar-expand-lg navbar-floating navbar-end navbar-light">
|
|
<div class="container">
|
|
<nav class="js-mega-menu navbar-nav-wrap navbar-floating-nav bg-white">
|
|
<!-- Default Logo -->
|
|
<a class="navbar-brand" href="./index.html" aria-label="Front">
|
|
<img class="navbar-brand-logo" src="./assets/svg/logos/logo.svg" alt="Logo">
|
|
</a>
|
|
<!-- End Default Logo -->
|
|
|
|
<!-- Toggler -->
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-default">
|
|
<i class="bi-list"></i>
|
|
</span>
|
|
<span class="navbar-toggler-toggled">
|
|
<i class="bi-x"></i>
|
|
</span>
|
|
</button>
|
|
<!-- End Toggler -->
|
|
|
|
<!-- Collapse -->
|
|
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
|
<ul class="navbar-nav">
|
|
<!-- Landings -->
|
|
<li class="hs-has-mega-menu nav-item">
|
|
<a id="landingsMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle active" aria-current="page" href="#" role="button" aria-expanded="false">Landings</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="landingsMegaMenu" style="min-width: 30rem;">
|
|
<div class="row">
|
|
<div class="col-lg-6 d-none d-lg-block">
|
|
<!-- Banner Image -->
|
|
<div class="navbar-dropdown-menu-banner" style="background-image: url(./assets/svg/components/shape-3.svg);">
|
|
<div class="navbar-dropdown-menu-banner-content">
|
|
<div class="mb-4">
|
|
<span class="h2 d-block">Branding Works</span>
|
|
<p>Experience a level of our quality in both design & customization works.</p>
|
|
</div>
|
|
<a class="btn btn-primary btn-transition" href="#">Learn more <i class="bi-chevron-right small"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- End Banner Image -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6">
|
|
<div class="navbar-dropdown-menu-inner">
|
|
<div class="row">
|
|
<div class="col-sm mb-3 mb-sm-0">
|
|
<span class="dropdown-header">Classic</span>
|
|
<a class="dropdown-item " href="./landing-classic-corporate.html">Corporate</a>
|
|
<a class="dropdown-item " href="./landing-classic-analytics.html">Analytics <span class="badge bg-primary rounded-pill ms-1">Hot</span></a>
|
|
<a class="dropdown-item " href="./landing-classic-studio.html">Studio</a>
|
|
<a class="dropdown-item " href="./landing-classic-marketing.html">Marketing</a>
|
|
<a class="dropdown-item " href="./landing-classic-advertisement.html">Advertisement</a>
|
|
<a class="dropdown-item " href="./landing-classic-consulting.html">Consulting</a>
|
|
<a class="dropdown-item " href="./landing-classic-portfolio.html">Portfolio</a>
|
|
<a class="dropdown-item " href="./landing-classic-software.html">Software</a>
|
|
<a class="dropdown-item " href="./landing-classic-business.html">Business</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm">
|
|
<div class="mb-3">
|
|
<span class="dropdown-header">App</span>
|
|
<a class="dropdown-item active" href="./landing-app-ui-kit.html">UI Kit</a>
|
|
<a class="dropdown-item " href="./landing-app-saas.html">SaaS</a>
|
|
<a class="dropdown-item " href="./landing-app-workflow.html">Workflow</a>
|
|
<a class="dropdown-item " href="./landing-app-payment.html">Payment</a>
|
|
<a class="dropdown-item " href="./landing-app-tool.html">Tool</a>
|
|
</div>
|
|
|
|
<span class="dropdown-header">Onepage</span>
|
|
<a class="dropdown-item " href="./landing-onepage-corporate.html">Corporate</a>
|
|
<a class="dropdown-item " href="./landing-onepage-saas.html">SaaS <span class="badge bg-primary rounded-pill ms-1">Hot</span></a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Landings -->
|
|
|
|
<!-- Company -->
|
|
<li class="hs-has-sub-menu nav-item">
|
|
<a id="companyMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Company</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-sub-menu dropdown-menu" aria-labelledby="companyMegaMenu" style="min-width: 14rem;">
|
|
<a class="dropdown-item " href="./page-about.html">About</a>
|
|
<a class="dropdown-item " href="./page-services.html">Services</a>
|
|
<a class="dropdown-item " href="./page-customer-stories.html">Customer Stories</a>
|
|
<a class="dropdown-item " href="./page-customer-story.html">Customer Story</a>
|
|
<a class="dropdown-item " href="./page-careers.html">Careers</a>
|
|
<a class="dropdown-item " href="./page-careers-overview.html">Careers Overview</a>
|
|
<a class="dropdown-item " href="./page-hire-us.html">Hire Us</a>
|
|
<a class="dropdown-item " href="./page-pricing.html">Pricing</a>
|
|
<a class="dropdown-item " href="./page-contacts-agency.html">Contacts: Agency</a>
|
|
<a class="dropdown-item " href="./page-contacts-startup.html">Contacts: Startup</a>
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Company -->
|
|
|
|
<!-- Account -->
|
|
<li class="hs-has-sub-menu nav-item">
|
|
<a id="accountMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Account</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-sub-menu dropdown-menu" aria-labelledby="accountMegaMenu" style="min-width: 14rem;">
|
|
<!-- Authentication -->
|
|
<div class="hs-has-sub-menu nav-item">
|
|
<a id="authenticationMegaMenu" class="hs-mega-menu-invoker dropdown-item dropdown-toggle " href="#" role="button" aria-expanded="false">Authentication</a>
|
|
|
|
<div class="hs-sub-menu dropdown-menu" aria-labelledby="authenticationMegaMenu" style="min-width: 14rem;">
|
|
<a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#signupModal">Signup Modal</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item " href="./page-login.html">Login</a>
|
|
<a class="dropdown-item " href="./page-signup.html">Signup</a>
|
|
<a class="dropdown-item " href="./page-reset-password.html">Reset Password</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item " href="./page-login-simple.html">Login Simple</a>
|
|
<a class="dropdown-item " href="./page-signup-simple.html">Signup Simple</a>
|
|
<a class="dropdown-item " href="./page-reset-password-simple.html">Reset Password Simple</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Authentication -->
|
|
|
|
<a class="dropdown-item " href="./account-overview.html">Personal Info</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="./account-preferences.html">Preferences</a>
|
|
<a class="dropdown-item " href="./account-orders.html">Orders</a>
|
|
<a class="dropdown-item " href="./account-wishlist.html">Wishlist</a>
|
|
<a class="dropdown-item " href="./account-payments.html">Payments</a>
|
|
<a class="dropdown-item " href="./account-address.html">Address</a>
|
|
<a class="dropdown-item " href="./account-teams.html">Teams</a>
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Account -->
|
|
|
|
<!-- Pages -->
|
|
<li class="hs-has-sub-menu nav-item">
|
|
<a id="pagesMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Pages</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-sub-menu dropdown-menu" aria-labelledby="pagesMegaMenu" style="min-width: 14rem;">
|
|
<a class="dropdown-item " href="./page-faq.html">FAQ</a>
|
|
<a class="dropdown-item " href="./page-terms.html">Terms & Conditions</a>
|
|
<a class="dropdown-item " href="./page-privacy.html">Privacy & Policy</a>
|
|
<a class="dropdown-item " href="./page-coming-soon.html">Coming Soon</a>
|
|
<a class="dropdown-item " href="./page-coming-soon-simple.html">Coming Soon: Simple</a>
|
|
<a class="dropdown-item " href="./page-maintenance-mode.html">Maintenance Mode</a>
|
|
<a class="dropdown-item " href="./page-status.html">Status</a>
|
|
<a class="dropdown-item " href="./page-invoice.html">Invoice</a>
|
|
<a class="dropdown-item " href="./page-error-404.html">Error 404</a>
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Pages -->
|
|
|
|
<!-- Blog -->
|
|
<li class="hs-has-sub-menu nav-item">
|
|
<a id="blogMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Blog</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-sub-menu dropdown-menu" aria-labelledby="blogMegaMenu" style="min-width: 14rem;">
|
|
<a class="dropdown-item " href="./blog-journal.html">Journal</a>
|
|
<a class="dropdown-item " href="./blog-metro.html">Metro</a>
|
|
<a class="dropdown-item " href="./blog-newsroom.html">Newsroom</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item " href="./blog-article.html">Article</a>
|
|
<a class="dropdown-item " href="./blog-author-profile.html">Author Profile</a>
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Blog -->
|
|
|
|
<!-- Portfolio -->
|
|
<li class="hs-has-sub-menu nav-item">
|
|
<a id="portfolioMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Portfolio</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-sub-menu dropdown-menu" aria-labelledby="portfolioMegaMenu" style="min-width: 14rem;">
|
|
<a class="dropdown-item " href="./portfolio-grid.html">Grid</a>
|
|
<a class="dropdown-item " href="./portfolio-product-article.html">Product Article</a>
|
|
<a class="dropdown-item " href="./portfolio-case-studies-branding.html">Case Studies: Branding</a>
|
|
<a class="dropdown-item " href="./portfolio-case-studies-product.html">Case Studies: Product</a>
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Portfolio -->
|
|
|
|
<!-- Button -->
|
|
<li class="nav-item">
|
|
<a class="btn btn-primary btn-transition" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Buy now</a>
|
|
</li>
|
|
<!-- End Button -->
|
|
</ul>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main" class="overflow-hidden">
|
|
<!-- Hero -->
|
|
<div class="position-relative">
|
|
<div class="container content-space-t-1 content-space-t-md-2 content-space-t-lg-5 content-space-b-2 content-space-b-sm-3 content-space-b-md-4 content-space-b-lg-0 content-space-b-xl-4">
|
|
<div class="row">
|
|
<div class="col-lg-5">
|
|
<!-- Heading -->
|
|
<div class="mb-5">
|
|
<h1>A digital UI Kit with a robust design</h1>
|
|
<p class="lead">Super clean, minimalistic, stylized mockup collection with awesome customization.</p>
|
|
</div>
|
|
<!-- End Title & Description -->
|
|
|
|
<div class="d-flex align-items-center mb-5" style="max-width: 25rem;">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xss avatar-4x3" src="./assets/svg/brands/figma-icon.svg" alt="Figma">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="small mb-0">Compatible with Figma <span class="badge bg-warning text-dark rounded-pill ms-1">Coming soon</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-2 mb-8">
|
|
<a class="btn btn-primary btn-transition me-2" href="./page-login-simple.html">
|
|
Get Started <i class="bi-chevron-right small ms-1"></i>
|
|
</a>
|
|
|
|
<!-- Fancybox -->
|
|
<a class="video-player btn btn-outline-primary btn-transition" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
|
|
<i class="bi-play-circle-fill me-1"></i> Play video
|
|
</a>
|
|
<!-- End Fancybox -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<!-- Gallery -->
|
|
<div class="col-lg-7 position-lg-absolute top-0 end-0 transform-rotate-n40deg">
|
|
<div class="row gx-3 align-items-end">
|
|
<div class="col-3 mb-10">
|
|
<div class="d-grid gap-3">
|
|
<div data-aos="fade-up">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x472/img6.jpg" alt="Image Description">
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="50">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x472/img4.jpg" alt="Image Description">
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="100">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x585/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-3">
|
|
<div class="d-grid gap-3">
|
|
<div data-aos="fade-up" data-aos-delay="150">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x472/img1.jpg" alt="Image Description">
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="200">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x115/img1.jpg" alt="Image Description">
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="250">
|
|
<img class="img-fluid shadow-primary-lg rounded-2" src="./assets/img/407x283/img1.jpg" alt="Image Description">
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="300">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x472/img5.jpg" alt="Image Description">
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="350" data-aos-offset="-50">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x472/img9.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-3">
|
|
<div class="d-grid gap-3">
|
|
<div data-aos="fade-up" data-aos-delay="400">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x472/img2.jpg" alt="Image Description">
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="450">
|
|
<img class="img-fluid shadow-lg rounded-2" src="./assets/img/407x472/img3.jpg" alt="Image Description">
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="500">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x867/img3.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-3 mb-10">
|
|
<div class="d-grid gap-3">
|
|
<div data-aos="fade-up" data-aos-delay="550">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/300x360/img1.jpg" alt="Image Description">
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="600">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x535/img1.jpg" alt="Image Description">
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="650">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x115/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Gallery -->
|
|
</div>
|
|
<!-- End Hero -->
|
|
|
|
<!-- Icon Block -->
|
|
<div class="container content-space-t-lg-5 content-space-b-2 content-space-b-lg-3">
|
|
<!-- Heading -->
|
|
<div class="w-lg-50 text-center mx-lg-auto mb-5">
|
|
<span class="text-cap">Meet Front UI/UX kit</span>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="mx-auto mb-5" style="max-width: 40rem;">
|
|
<div class="row gx-3">
|
|
<div class="col-sm-4 mb-3 mb-sm-0">
|
|
<!-- Card -->
|
|
<div class="card card-dashed shadow-none text-center rounded-2">
|
|
<div class="card-body">
|
|
<span class="svg-icon text-primary mb-3">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M17.302 11.35L12.002 20.55H21.202C21.802 20.55 22.202 19.85 21.902 19.35L17.302 11.35Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M12.002 20.55H2.802C2.202 20.55 1.80202 19.85 2.10202 19.35L6.70203 11.45L12.002 20.55ZM11.302 3.45L6.70203 11.35H17.302L12.702 3.45C12.402 2.85 11.602 2.85 11.302 3.45Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<h2 class="card-title h3 mb-0">300+</h2>
|
|
<p class="card-text">UI elements</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="col-sm-4 mb-3 mb-sm-0">
|
|
<!-- Card -->
|
|
<div class="card card-dashed shadow-none text-center rounded-2">
|
|
<div class="card-body">
|
|
<span class="svg-icon text-primary mb-3">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M21.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="#035A4B"/>
|
|
<path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<h3 class="card-title mb-0">270+</h3>
|
|
<p class="card-text">in 3 categories</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="col-sm-4">
|
|
<!-- Card -->
|
|
<div class="card card-dashed shadow-none text-center rounded-2">
|
|
<div class="card-body">
|
|
<span class="svg-icon text-primary mb-3">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M15.6 5.59998L20.9 10.9C21.3 11.3 21.3 11.9 20.9 12.3L17.6 15.6L11.6 9.59998L15.6 5.59998ZM2.3 12.3L7.59999 17.6L11.6 13.6L5.59999 7.59998L2.3 10.9C1.9 11.3 1.9 11.9 2.3 12.3Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M17.6 15.6L12.3 20.9C11.9 21.3 11.3 21.3 10.9 20.9L7.59998 17.6L13.6 11.6L17.6 15.6ZM10.9 2.3L5.59998 7.6L9.59998 11.6L15.6 5.6L12.3 2.3C11.9 1.9 11.3 1.9 10.9 2.3Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<h3 class="card-title mb-0">450+</h3>
|
|
<p class="card-text">Organized sheets</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="w-lg-50 text-center mx-lg-auto mb-10">
|
|
<p>This UI kit has all you need to manage your hypothetical customer's smart devices like thermostats, lights, and other appliances that make for a connected modern home.</p>
|
|
</div>
|
|
|
|
<div class="w-lg-65 text-center mx-lg-auto">
|
|
<div class="row">
|
|
<div class="col-6 col-sm-3 mb-3 mb-sm-0">
|
|
<!-- Icon Block -->
|
|
<div class="text-center">
|
|
<span class="icon icon-light bg-white shadow-sm mb-3">
|
|
<i class="bi-grid"></i>
|
|
</span>
|
|
|
|
<h5 class="mb-1">Bootstrap 5 Grid</h5>
|
|
<p class="small">1140px</p>
|
|
</div>
|
|
<!-- End Icon Block -->
|
|
</div>
|
|
|
|
<div class="col-6 col-sm-3 mb-3 mb-sm-0">
|
|
<!-- Icon Block -->
|
|
<div class="text-center">
|
|
<span class="icon icon-light bg-white shadow-sm mb-3">
|
|
<i class="bi-type"></i>
|
|
</span>
|
|
|
|
<h5 class="mb-1">Google Fonts</h5>
|
|
<p class="small">Roboto</p>
|
|
</div>
|
|
<!-- End Icon Block -->
|
|
</div>
|
|
|
|
<div class="col-6 col-sm-3">
|
|
<!-- Icon Block -->
|
|
<div class="text-center">
|
|
<span class="icon icon-light bg-white shadow-sm mb-3">
|
|
<i class="bi-droplet-half"></i>
|
|
</span>
|
|
|
|
<h5 class="mb-1">Free Icons</h5>
|
|
<p class="small">Bootstrap Icons</p>
|
|
</div>
|
|
<!-- End Icon Block -->
|
|
</div>
|
|
|
|
<div class="col-6 col-sm-3">
|
|
<!-- Icon Block -->
|
|
<div class="text-center">
|
|
<span class="icon icon-light bg-white shadow-sm mb-3">
|
|
<i class="bi-pencil-square"></i>
|
|
</span>
|
|
|
|
<h5 class="mb-1">Symbol overrides</h5>
|
|
<p class="small">Easily customizable</p>
|
|
</div>
|
|
<!-- End Icon Block -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Block -->
|
|
|
|
<!-- Card Grid -->
|
|
<div class="border-top">
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<!-- Heading -->
|
|
<div class="w-lg-50 text-center mx-lg-auto mb-7">
|
|
<span class="text-cap">What's included</span>
|
|
<h2>3 Color skins included</h2>
|
|
<p>Easily construct new pages using any of 12 pre-made grids and a huge amount of components and elements.</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row mb-7">
|
|
<div class="col-sm-6 col-lg-4 mb-5 mb-lg-0">
|
|
<!-- Card -->
|
|
<div class="card bg-soft-primary shadow-none text-center" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="card-body">
|
|
<img class="img-fluid" src="./assets/img/mockups/img7.png" alt="Image Description">
|
|
|
|
<h3 class="card-title">Standard</h3>
|
|
<p class="card-text">Available in:</p>
|
|
|
|
<div class="mb-4">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="./assets/svg/brands/figma-icon.svg" alt="Figma">
|
|
<img class="avatar avatar-xss avatar-4x3" src="./assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<a class="btn btn-primary btn-transition" href="#">Preview <i class="bi-eye ms-1"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-5 mb-lg-0">
|
|
<!-- Card -->
|
|
<div class="card bg-soft-dark shadow-none text-center" data-aos="fade-up">
|
|
<div class="card-body">
|
|
<img class="img-fluid" src="./assets/img/mockups/img8.png" alt="Image Description">
|
|
|
|
<h3 class="card-title">Dark</h3>
|
|
<p class="card-text">Available in:</p>
|
|
|
|
<div class="mb-4">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="./assets/svg/brands/figma-icon.svg" alt="Figma">
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<a class="btn bg-white btn-transition disabled" href="#">Coming soon ...</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4">
|
|
<!-- Card -->
|
|
<div class="card bg-soft-success shadow-none text-center" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="card-body">
|
|
<img class="img-fluid" src="./assets/img/mockups/img9.png" alt="Image Description">
|
|
|
|
<h3 class="card-title">Wireframe</h3>
|
|
<p class="card-text">Available in:</p>
|
|
|
|
<div class="mb-4">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="./assets/svg/brands/figma-icon.svg" alt="Figma">
|
|
<img class="avatar avatar-xss avatar-4x3" src="./assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<a class="btn bg-white btn-transition disabled" href="#">Coming soon ...</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Fancybox -->
|
|
<div class="text-center">
|
|
<a class="video-player btn btn-outline-primary" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
|
|
<i class="bi-play-circle-fill me-1"></i> Watch and learn how it works
|
|
</a>
|
|
</div>
|
|
<!-- End Fancybox -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
|
|
<!-- Gallery -->
|
|
<div class="content-space-1">
|
|
<div class="container-fluid px-lg-9">
|
|
<div class="row gx-3 align-items-center">
|
|
<div class="col-md d-none d-md-inline-block">
|
|
<div class="d-grid gap-3">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x472/img6.jpg" alt="Image Description">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x115/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<div class="d-grid gap-3">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x472/img4.jpg" alt="Image Description">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x283/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<div class="d-grid gap-3">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x472/img5.jpg" alt="Image Description">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x472/img3.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<div class="d-grid gap-3">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/300x360/img1.jpg" alt="Image Description">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x535/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md d-none d-md-inline-block">
|
|
<div class="d-grid gap-3">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x472/img1.jpg" alt="Image Description">
|
|
<img class="img-fluid shadow rounded-2" src="./assets/img/407x472/img2.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Gallery -->
|
|
|
|
<!-- Pricing -->
|
|
<div class="container content-space-2">
|
|
<!-- Heading -->
|
|
<div class="w-lg-50 text-center mx-lg-auto mb-5 mb-md-9">
|
|
<span class="text-cap">Pricing</span>
|
|
<h2>Simple pricing model</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="d-grid gap-2 w-lg-75 mx-lg-auto">
|
|
<!-- Card -->
|
|
<div class="card card-sm" data-aos="fade-up">
|
|
<div class="card-body">
|
|
<div class="row align-items-sm-center">
|
|
<div class="col">
|
|
<h4 class="card-title">UI Starter Kit</h4>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="./assets/svg/brands/figma-icon.svg" alt="Figma">
|
|
<img class="avatar avatar-xss avatar-4x3" src="./assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<p class="card-text mb-0">Figma</p>
|
|
<p class="card-text">Adobe XD</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-12 col-sm-4 col-xl-3 mt-3 mt-sm-0">
|
|
<div class="d-grid">
|
|
<a class="btn btn-outline-primary" href="#">Free download</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card card-sm" data-aos="fade-up" data-aos-delay="150">
|
|
<div class="card-body">
|
|
<div class="row align-items-sm-center">
|
|
<div class="col">
|
|
<h4 class="card-title">Design Starter Kit</h4>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<img class="avatar avatar-xss avatar-4x3 me-2" src="./assets/svg/brands/figma-icon.svg" alt="Figma">
|
|
<img class="avatar avatar-xss avatar-4x3" src="./assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<p class="card-text mb-0">Figma</p>
|
|
<p class="card-text">Adobe XD</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-12 col-sm-4 col-xl-3 mt-3 mt-sm-0">
|
|
<div class="d-grid">
|
|
<a class="btn btn-outline-primary" href="#">Purchase for $49</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Pricing -->
|
|
|
|
<!-- FAQ -->
|
|
<div class="container content-space-b-1 content-space-b-lg-2">
|
|
<div class="w-lg-75 mx-lg-auto">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3 mb-md-5">
|
|
<div class="pe-md-4">
|
|
<h4>Can I cancel at anytime?</h4>
|
|
<p>Yes, you can cancel anytime no questions are asked while you cancel but we would highly appreciate if you will give us some feedback.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3 mb-md-5">
|
|
<div class="ps-md-4">
|
|
<h4>My team has credits. How do we use them?</h4>
|
|
<p>Once your team signs up for a subscription plan. This is where we sit down, grab a cup of coffee and dial in the details.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-100"></div>
|
|
|
|
<div class="col-md-6 mb-3 mb-md-5">
|
|
<div class="pe-md-4">
|
|
<h4>How does Front's pricing work?</h4>
|
|
<p>Our subscriptions are tiered. Understanding the task at hand and ironing out the wrinkles is key.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3 mb-md-5">
|
|
<div class="ps-md-4">
|
|
<h4>How secure is Front?</h4>
|
|
<p>Protecting the data you trust to Front is our first priority. This part is really crucial in keeping the project in line to completion.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End FAQ -->
|
|
|
|
<div class="border-top mx-auto" style="max-width: 25rem;"></div>
|
|
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<!-- Heading -->
|
|
<div class="w-lg-50 text-center mx-lg-auto mb-7">
|
|
<span class="text-cap">Guidelines and Tutorials</span>
|
|
<h2>Learn the ins and outs</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row mb-5 mb-sm-5">
|
|
<div class="col-md-5 mb-3 mb-md-5">
|
|
<!-- Card -->
|
|
<a class="card card-transition h-100" href="#" data-aos="fade-up">
|
|
<div class="card-pinned">
|
|
<img class="card-img-top" src="./assets/svg/components/card-7.svg" alt="Image Description">
|
|
|
|
<span class="card-pinned-top-start">
|
|
<span class="badge bg-primary rounded-pill">Free</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<h3 class="card-title text-inherit">Objects and dimensions</h3>
|
|
<p class="card-text text-body">Learn the simplest way to select the object and change dimensions.</p>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md mb-3 mb-md-5">
|
|
<!-- Card -->
|
|
<a class="card card-transition h-100" href="#" data-aos="fade-up" data-aos-delay="150">
|
|
<div class="card-pinned">
|
|
<img class="card-img-top" src="./assets/svg/components/card-8.svg" alt="Image Description">
|
|
|
|
<span class="card-pinned-top-start">
|
|
<span class="badge bg-primary rounded-pill">$99</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<h3 class="card-title text-inherit">Charts in design</h3>
|
|
<p class="card-text text-body">Learn the best ways to create and use charts and data content in web applications.</p>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md mb-3 mb-md-5">
|
|
<!-- Card -->
|
|
<a class="card card-transition h-100" href="#" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="card-pinned">
|
|
<img class="card-img-top" src="./assets/svg/components/card-9.svg" alt="Image Description">
|
|
|
|
<span class="card-pinned-top-start">
|
|
<span class="badge bg-primary rounded-pill">Free</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<h3 class="card-title text-inherit">Layer shadows</h3>
|
|
<p class="card-text text-body">Best tips and guidelines how to use shadows with layers.</p>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Card Info -->
|
|
<div class="text-center">
|
|
<div class="card card-info-link card-sm">
|
|
<div class="card-body">
|
|
Want to learn more? <a class="card-link ms-2" href="#">View all tutorials <span class="bi-chevron-right small ms-1"></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Info -->
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== FOOTER ========== -->
|
|
<footer class="bg-dark">
|
|
<div class="container content-space-t-2 content-space-b-1">
|
|
<div class="row mb-9">
|
|
<div class="col-lg-3 mb-5 mb-lg-0">
|
|
<!-- Logo -->
|
|
<a href="index.html" aria-label="Front">
|
|
<img class="brand" src="./assets/svg/logos/logo-white.svg" alt="Logo">
|
|
</a>
|
|
<!-- End Logo -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-3 col-lg-2 mb-5 mb-md-0">
|
|
<h5 class="text-white">Help and advice</h5>
|
|
|
|
<!-- Links -->
|
|
<ul class="list-unstyled list-py-1 mb-0">
|
|
<li><a class="link-sm link-light" href="#">Contact us</a></li>
|
|
<li><a class="link-sm link-light" href="#">FAQ</a></li>
|
|
<li><a class="link-sm link-light" href="#">Legal & Privacy</a></li>
|
|
</ul>
|
|
<!-- End Links -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-3 col-lg-2 mb-5 mb-md-0">
|
|
<h5 class="text-white">About us</h5>
|
|
|
|
<!-- Nav Links -->
|
|
<ul class="list-unstyled list-py-1 mb-0">
|
|
<li><a class="link-sm link-light" href="#">About Spec</a></li>
|
|
<li><a class="link-sm link-light" href="#">Careers</a></li>
|
|
</ul>
|
|
<!-- End Nav Links -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-6 col-lg-5">
|
|
<!-- Form -->
|
|
<form>
|
|
<h5 class="text-white">Stay up to date</h5>
|
|
|
|
<!-- Input Card -->
|
|
<div class="input-card mt-3">
|
|
<div class="input-card-form">
|
|
<input type="text" class="form-control" placeholder="Enter email" aria-label="Enter email">
|
|
</div>
|
|
<button type="button" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
<!-- End Input Card -->
|
|
</form>
|
|
<!-- End Form -->
|
|
|
|
<p class="form-text text-white-70">New UI kits or big discounts. Never spam.</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<p class="text-white-70 small mb-0">© Front. 2021 Htmlstream. All rights reserved.</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Socials -->
|
|
<ul class="list-inline mb-0">
|
|
<li class="list-inline-item">
|
|
<a class="btn btn-ghost-light btn-sm btn-icon" href="#">
|
|
<i class="bi-facebook"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="list-inline-item">
|
|
<a class="btn btn-ghost-light btn-sm btn-icon" href="#">
|
|
<i class="bi-google"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="list-inline-item">
|
|
<a class="btn btn-ghost-light btn-sm btn-icon" href="#">
|
|
<i class="bi-twitter"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="list-inline-item">
|
|
<a class="btn btn-ghost-light btn-sm btn-icon" href="#">
|
|
<i class="bi-github"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="list-inline-item">
|
|
<a class="btn btn-ghost-light btn-sm btn-icon" href="#">
|
|
<i class="bi-linkedin"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Socials -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</footer>
|
|
<!-- ========== END FOOTER ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Sign Up -->
|
|
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<!-- Header -->
|
|
<div class="modal-close">
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="modal-body">
|
|
<!-- Log in -->
|
|
<div id="signupModalFormLogin" style="display: none; opacity: 0;">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-7">
|
|
<h2>Log in</h2>
|
|
<p>Don't have an account yet?
|
|
<a class="js-animation-link link" href="javascript:;" role="button"
|
|
data-hs-show-animation-options='{
|
|
"targetSelector": "#signupModalFormSignup",
|
|
"groupName": "idForm"
|
|
}'>Sign up</a>
|
|
</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="d-grid gap-2">
|
|
<a class="btn btn-white btn-lg" href="#">
|
|
<span class="d-flex justify-content-center align-items-center">
|
|
<img class="avatar avatar-xss me-2" src="./assets/svg/brands/google-icon.svg" alt="Image Description">
|
|
Log in with Google
|
|
</span>
|
|
</a>
|
|
|
|
<a class="js-animation-link btn btn-primary btn-lg" href="#"
|
|
data-hs-show-animation-options='{
|
|
"targetSelector": "#signupModalFormLoginWithEmail",
|
|
"groupName": "idForm"
|
|
}'>Log in with Email</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Log in -->
|
|
|
|
<!-- Log in with Modal -->
|
|
<div id="signupModalFormLoginWithEmail" style="display: none; opacity: 0;">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-7">
|
|
<h2>Log in</h2>
|
|
<p>Don't have an account yet?
|
|
<a class="js-animation-link link" href="javascript:;" role="button"
|
|
data-hs-show-animation-options='{
|
|
"targetSelector": "#signupModalFormSignup",
|
|
"groupName": "idForm"
|
|
}'>Sign up</a>
|
|
</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<form class="js-validate needs-validation" novalidate>
|
|
<!-- Form -->
|
|
<div class="mb-3">
|
|
<label class="form-label" for="signupModalFormLoginEmail">Your email</label>
|
|
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormLoginEmail" placeholder="email@site.com" aria-label="email@site.com" required>
|
|
<span class="invalid-feedback">Please enter a valid email address.</span>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<label class="form-label" for="signupModalFormLoginPassword">Password</label>
|
|
|
|
<a class="js-animation-link form-label-link" href="javascript:;"
|
|
data-hs-show-animation-options='{
|
|
"targetSelector": "#signupModalFormResetPassword",
|
|
"groupName": "idForm"
|
|
}'>Forgot Password?</a>
|
|
</div>
|
|
|
|
<input type="password" class="form-control form-control-lg" name="password" id="signupModalFormLoginPassword" placeholder="8+ characters required" aria-label="8+ characters required" required minlength="8">
|
|
<span class="invalid-feedback">Please enter a valid password.</span>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-grid mb-3">
|
|
<button type="submit" class="btn btn-primary form-control-lg">Log in</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- End Log in with Modal -->
|
|
|
|
<!-- Sign up -->
|
|
<div id="signupModalFormSignup">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-7">
|
|
<h2>Sign up</h2>
|
|
<p>Already have an account?
|
|
<a class="js-animation-link link" href="javascript:;" role="button"
|
|
data-hs-show-animation-options='{
|
|
"targetSelector": "#signupModalFormLogin",
|
|
"groupName": "idForm"
|
|
}'>Log in</a>
|
|
</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="d-grid gap-3">
|
|
<a class="btn btn-white btn-lg" href="#">
|
|
<span class="d-flex justify-content-center align-items-center">
|
|
<img class="avatar avatar-xss me-2" src="./assets/svg/brands/google-icon.svg" alt="Image Description">
|
|
Sign up with Google
|
|
</span>
|
|
</a>
|
|
|
|
<a class="js-animation-link btn btn-primary btn-lg" href="#"
|
|
data-hs-show-animation-options='{
|
|
"targetSelector": "#signupModalFormSignupWithEmail",
|
|
"groupName": "idForm"
|
|
}'>Sign up with Email</a>
|
|
|
|
<div class="text-center">
|
|
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Sign up -->
|
|
|
|
<!-- Sign up with Modal -->
|
|
<div id="signupModalFormSignupWithEmail" style="display: none; opacity: 0;">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-7">
|
|
<h2>Sign up</h2>
|
|
<p>Already have an account?
|
|
<a class="js-animation-link link" href="javascript:;" role="button"
|
|
data-hs-show-animation-options='{
|
|
"targetSelector": "#signupModalFormLogin",
|
|
"groupName": "idForm"
|
|
}'>Log in</a>
|
|
</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<form class="js-validate need-validate" novalidate>
|
|
<!-- Form -->
|
|
<div class="mb-3">
|
|
<label class="form-label" for="signupModalFormSignupEmail">Your email</label>
|
|
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormSignupEmail" placeholder="email@site.com" aria-label="email@site.com" required>
|
|
<span class="invalid-feedback">Please enter a valid email address.</span>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-3">
|
|
<label class="form-label" for="signupModalFormSignupPassword">Password</label>
|
|
<input type="password" class="form-control form-control-lg" name="password" id="signupModalFormSignupPassword" placeholder="8+ characters required" aria-label="8+ characters required" required>
|
|
<span class="invalid-feedback">Your password is invalid. Please try again.</span>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-3" data-hs-validation-validate-class>
|
|
<label class="form-label" for="signupModalFormSignupConfirmPassword">Confirm password</label>
|
|
<input type="password" class="form-control form-control-lg" name="confirmPassword" id="signupModalFormSignupConfirmPassword" placeholder="8+ characters required" aria-label="8+ characters required" required
|
|
data-hs-validation-equal-field="#signupModalFormSignupPassword">
|
|
<span class="invalid-feedback">Password does not match the confirm password.</span>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-grid mb-3">
|
|
<button type="submit" class="btn btn-primary form-control-lg">Sign up</button>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- End Sign up with Modal -->
|
|
|
|
<!-- Reset Password -->
|
|
<div id="signupModalFormResetPassword" style="display: none; opacity: 0;">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-7">
|
|
<h2>Forgot password?</h2>
|
|
<p>Enter the email address you used when you joined and we'll send you instructions to reset your password.</p>
|
|
</div>
|
|
<!-- En dHeading -->
|
|
|
|
<form class="js-validate need-validate" novalidate>
|
|
<div class="mb-3">
|
|
<!-- Form -->
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<label class="form-label" for="signupModalFormResetPasswordEmail" tabindex="0">Your email</label>
|
|
|
|
<a class="js-animation-link form-label-link" href="javascript:;"
|
|
data-hs-show-animation-options='{
|
|
"targetSelector": "#signupModalFormLogin",
|
|
"groupName": "idForm"
|
|
}'>
|
|
<i class="bi-chevron-left small"></i> Back to Log in
|
|
</a>
|
|
</div>
|
|
|
|
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormResetPasswordEmail" tabindex="1" placeholder="Enter your email address" aria-label="Enter your email address" required>
|
|
<span class="invalid-feedback">Please enter a valid email address.</span>
|
|
<!-- End Form -->
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary form-control-lg">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- End Reset Password -->
|
|
</div>
|
|
<!-- End Body -->
|
|
|
|
<!-- Footer -->
|
|
<div class="modal-footer d-block text-center py-sm-5">
|
|
<small class="text-cap mb-4">Trusted by the world's best teams</small>
|
|
|
|
<div class="w-85 mx-auto">
|
|
<div class="row justify-content-between">
|
|
<div class="col">
|
|
<img class="img-fluid" src="./assets/svg/brands/gitlab-gray.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<img class="img-fluid" src="./assets/svg/brands/fitbit-gray.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<img class="img-fluid" src="./assets/svg/brands/flow-xo-gray.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col">
|
|
<img class="img-fluid" src="./assets/svg/brands/layar-gray.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Footer -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Go To -->
|
|
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
|
data-hs-go-to-options='{
|
|
"offsetTop": 700,
|
|
"position": {
|
|
"init": {
|
|
"right": "2rem"
|
|
},
|
|
"show": {
|
|
"bottom": "2rem"
|
|
},
|
|
"hide": {
|
|
"bottom": "-2rem"
|
|
}
|
|
}
|
|
}'>
|
|
<i class="bi-chevron-up"></i>
|
|
</a>
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
<!-- JS Global Compulsory -->
|
|
<script src="./assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="./assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
|
<script src="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
|
|
<script src="./assets/vendor/aos/dist/aos.js"></script>
|
|
<script src="./assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
|
<script src="./assets/vendor/fslightbox/index.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="./assets/js/theme.min.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF HEADER
|
|
// =======================================================
|
|
new HSHeader('#header').init()
|
|
|
|
|
|
// INITIALIZATION OF MEGA MENU
|
|
// =======================================================
|
|
new HSMegaMenu('.js-mega-menu', {
|
|
desktop: {
|
|
position: 'left'
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
|
|
|
|
// INITIALIZATION OF AOS
|
|
// =======================================================
|
|
AOS.init({
|
|
duration: 650,
|
|
once: true
|
|
});
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|