561 lines
29 KiB
HTML
561 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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>Hero: Landing App UI Kit - Snippets | 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/css/vendor.min.css">
|
|
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<link rel="stylesheet" href="../assets/css/theme.min.css?v=1.0">
|
|
<link rel="stylesheet" href="../assets/css/snippets.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 " 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 " 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 -->
|
|
|
|
<div class="container content-space-2">
|
|
<!-- Card -->
|
|
<div class="card card-nav-tab-content-height">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab1" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-htmlTab1" href="#nav-html1" data-bs-toggle="pill" data-bs-target="#nav-html1" role="tab" aria-controls="nav-html1" aria-selected="false">HTML</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab1" href="#nav-js1" data-bs-toggle="pill" data-bs-target="#nav-js1" role="tab" aria-controls="nav-js1" aria-selected="false">JS</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent1">
|
|
<div class="tab-pane fade show active" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- 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 -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js1" role="tabpanel" aria-labelledby="nav-jsTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../node_modules/fslightbox/index.js"></script>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- 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 Implementing Plugins -->
|
|
<script src="../assets/js/vendor.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="../assets/js/theme.min.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
|
|
|
|
// INITIALIZATION OF MEGA MENU
|
|
// =======================================================
|
|
new HSMegaMenu('.js-mega-menu', {
|
|
desktop: {
|
|
position: 'left'
|
|
}
|
|
})
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|