public/front
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
6d2da690e0335e9b2e8a989afca5d3cf2ad7749f
front/dist/snippets/navbar-fullscreen.html
dzieko e54f6110bc front v4.1
2021-12-28 13:34:18 +01:00

688 lines
41 KiB
HTML
Raw Blame History

<!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>Fullscreen Navbar - 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/vendor/bootstrap-icons/font/bootstrap-icons.css">
<!-- CSS Front Template -->
<link rel="stylesheet" href="../assets/css/theme.min.css">
<link rel="stylesheet" href="../assets/css/snippets.min.css">
</head>
<body>
<!-- ========== HEADER ========== -->
<header id="header" class="navbar navbar-expand navbar-dark navbar-fullscreen">
<nav class="container">
<!-- Default Logo -->
<a class="navbar-brand" href="../index.html" aria-label="Front">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo-white.svg" alt="Logo">
</a>
<!-- End Default Logo -->
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarFullscreenNav" aria-controls="navbarFullscreenNav" 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="navbarFullscreenNav">
<div class="container">
<div class="navbar-fullscreen-scroller">
<div class="row justify-content-md-between align-items-md-center">
<div class="col-md-6">
<!-- Collapse -->
<ul class="navbar-nav" id="navbarNavCollapse">
<!-- Landings -->
<li class="nav-item">
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsCollapse" aria-expanded="false" aria-controls="landingsCollapse">Landings</a>
<div id="landingsCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
<div id="landingsNavCollapse">
<!-- Classic -->
<div class="nav-item">
<a class="dropdown-item collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsClassicCollapse" aria-expanded="false" aria-controls="landingsClassicCollapse">Classic</a>
<div id="landingsClassicCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#landingsNavCollapse">
<a class="dropdown-item " href="../index.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>
</div>
<!-- End Classic -->
<!-- App -->
<div class="nav-item">
<a class="dropdown-item collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsAppCollapse" aria-expanded="false" aria-controls="landingsAppCollapse">App</a>
<div id="landingsAppCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#landingsNavCollapse">
<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>
</div>
<!-- End App -->
<!-- Onepage -->
<div class="nav-item">
<a class="dropdown-item collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsOnepageCollapse" aria-expanded="false" aria-controls="landingsOnepageCollapse">Onepage</a>
<div id="landingsOnepageCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#landingsNavCollapse">
<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>
</div>
<!-- End Onepage -->
</div>
</div>
</li>
<!-- End Landings -->
<!-- Company -->
<li class="nav-item">
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#companyCollapse" aria-expanded="false" aria-controls="companyCollapse">Company</a>
<div id="companyCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
<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>
</li>
<!-- End Company -->
<!-- Account -->
<li class="nav-item">
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#accountCollapse" aria-expanded="false" aria-controls="accountCollapse">Account</a>
<div id="accountCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
<!-- Authentication -->
<div class="nav-item">
<a class="dropdown-item collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#authenticationCollapse" aria-expanded="false" aria-controls="authenticationCollapse">
Authentication
</a>
<div id="authenticationCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#accountCollapse">
<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>
<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-login-and-security.html">Login &amp; 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-billing.html">Plans &amp; Payment</a>
<a class="dropdown-item " href="../account-address.html">Address</a>
<a class="dropdown-item " href="../account-teams.html">Teams</a>
</div>
</li>
<!-- End Account -->
<!-- Pages -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#pagesCollapse" aria-expanded="false" aria-controls="pagesCollapse">
Pages
</a>
<div id="pagesCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
<div id="pagesNavCollapse">
<a class="dropdown-item " href="../page-faq.html">FAQ</a>
<a class="dropdown-item " href="../page-terms.html">Terms &amp; Conditions</a>
<a class="dropdown-item " href="../page-privacy.html">Privacy &amp; Policy</a>
<a class="dropdown-item " href="../page-coming-soon.html">Coming Soon</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>
</div>
</li>
<!-- End Pages -->
<!-- Blog -->
<li class="nav-item">
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#blogCollapse" aria-expanded="false" aria-controls="blogCollapse">Blog</a>
<div id="blogCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
<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>
<a class="dropdown-item " href="../blog-article.html">Article</a>
<a class="dropdown-item " href="../blog-author-profile.html">Author Profile</a>
</div>
</li>
<!-- End Blog -->
<!-- Portfolio -->
<li class="nav-item">
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#portfolioCollapse" aria-expanded="false" aria-controls="portfolioCollapse">Portfolio</a>
<div id="portfolioCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
<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>
</li>
<!-- End Portfolio -->
<!-- Demos -->
<li class="nav-item">
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#demosCollapse" aria-expanded="false" aria-controls="demosCollapse">Demos</a>
<div id="demosCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
<a class="dropdown-item " href="../demo-real-main/index.html">Main</a>
<a class="dropdown-item " href="../demo-real-estate/index.html">Real Estate</a>
<a class="dropdown-item " href="../demo-jobs/index.html">Jobs</a>
<a class="dropdown-item " href="../demo-course/index.html">Course</a>
<a class="dropdown-item " href="../demo-shop/index.html">E-commerce</a>
<a class="dropdown-item " href="../demo-app-marketplace/index.html">App Marketplace</a>
<a class="dropdown-item " href="../demo-help-desk/index.html">Help Desk</a>
</div>
</li>
<!-- End Demos -->
<!-- Docs -->
<li class="nav-item">
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#docsCollapse" aria-expanded="false" aria-controls="docsCollapse">Docs</a>
<div id="docsCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
<a class="dropdown-item" href="../documentation/index.html">Documentation</a>
<a class="dropdown-item" href="../snippets/index.html">Snippets</a>
</div>
</li>
<!-- End Docs -->
</ul>
<!-- End Collapse -->
</div>
<!-- End Col -->
<div class="col-md-4 d-none d-md-inline-block">
<!-- Address -->
<div class="mb-7">
<span class="text-cap text-white">Address</span>
<address class="d-grid gap-1 mb-0">
<span class="text-white-70">+1 (062) 109-9222</span>
<span class="text-white-70">hello@example.com</span>
<span class="text-white-70">153 Williamson Plaza, Maggieberg, MT 09514</span>
</address>
</div>
<!-- End Address -->
<!-- Socials -->
<span class="text-cap text-white">Social</span>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#">
<i class="bi-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#">
<i class="bi-google"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#">
<i class="bi-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#">
<i class="bi-github"></i>
</a>
</li>
</ul>
<!-- End Socials -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Collapse -->
</nav>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main">
<!-- Hero Section -->
<div class="bg-dark">
<div class="container text-center content-space-3">
<h1 class="display-4 text-white">Fullscreen Navbar</h1>
</div>
</div>
<!-- End Hero Section -->
<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">
&lt;!-- ========== HEADER ========== --&gt;
&lt;header id="header" class="navbar navbar-expand navbar-dark navbar-fullscreen"&gt;
&lt;nav class="container"&gt;
&lt;!-- Default Logo --&gt;
&lt;a class="navbar-brand" href="../index.html" aria-label="Front"&gt;
&lt;img class="navbar-brand-logo" src="../assets/svg/logos/logo-white.svg" alt="Logo"&gt;
&lt;/a&gt;
&lt;!-- End Default Logo --&gt;
&lt;!-- Toggler --&gt;
&lt;button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarFullscreenNav" aria-controls="navbarFullscreenNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
&lt;span class="navbar-toggler-default"&gt;
&lt;i class="bi-list"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;span class="navbar-toggler-toggled"&gt;
&lt;i class="bi-x"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;/button&gt;
&lt;!-- End Toggler --&gt;
&lt;!-- Collapse --&gt;
&lt;div class="collapse navbar-collapse" id="navbarFullscreenNav"&gt;
&lt;div class="container"&gt;
&lt;div class="navbar-fullscreen-scroller"&gt;
&lt;div class="row justify-content-md-between align-items-md-center"&gt;
&lt;div class="col-md-6"&gt;
&lt;!-- Collapse --&gt;
&lt;ul class="navbar-nav" id="navbarNavCollapse"&gt;
&lt;!-- Landings --&gt;
&lt;li class="nav-item"&gt;
&lt;a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsCollapse" aria-expanded="false" aria-controls="landingsCollapse"&gt;Landings&lt;/a&gt;
&lt;div id="landingsCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse"&gt;
&lt;div id="landingsNavCollapse"&gt;
&lt;!-- Classic --&gt;
&lt;div class="nav-item"&gt;
&lt;a class="dropdown-item collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsClassicCollapse" aria-expanded="false" aria-controls="landingsClassicCollapse"&gt;Classic&lt;/a&gt;
&lt;div id="landingsClassicCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#landingsNavCollapse"&gt;
&lt;a class="dropdown-item" href="#"&gt;Corporate&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Analytics &lt;span class="badge bg-primary rounded-pill ms-1"&gt;Hot&lt;/span&gt;&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Studio&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Marketing&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Advertisement&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Consulting&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Portfolio&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Software&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Business&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- End Classic --&gt;
&lt;!-- App --&gt;
&lt;div class="nav-item"&gt;
&lt;a class="dropdown-item collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsAppCollapse" aria-expanded="false" aria-controls="landingsAppCollapse"&gt;App&lt;/a&gt;
&lt;div id="landingsAppCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#landingsNavCollapse"&gt;
&lt;a class="dropdown-item" href="#"&gt;UI Kit&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;SaaS&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Workflow&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Payment&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Tool&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- End App --&gt;
&lt;!-- Onepage --&gt;
&lt;div class="nav-item"&gt;
&lt;a class="dropdown-item collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsOnepageCollapse" aria-expanded="false" aria-controls="landingsOnepageCollapse"&gt;Onepage&lt;/a&gt;
&lt;div id="landingsOnepageCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#landingsNavCollapse"&gt;
&lt;a class="dropdown-item" href="#"&gt;Corporate&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;SaaS &lt;span class="badge bg-primary rounded-pill ms-1"&gt;Hot&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- End Onepage --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- End Landings --&gt;
&lt;!-- Company --&gt;
&lt;li class="nav-item"&gt;
&lt;a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#companyCollapse" aria-expanded="false" aria-controls="companyCollapse"&gt;Company&lt;/a&gt;
&lt;div id="companyCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse"&gt;
&lt;a class="dropdown-item" href="#"&gt;About&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Services&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Customer Stories&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Customer Story&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Careers&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Careers Overview&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Hire Us&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Pricing&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Contacts: Agency&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Contacts: Startup&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- End Company --&gt;
&lt;!-- Account --&gt;
&lt;li class="nav-item"&gt;
&lt;a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#accountCollapse" aria-expanded="false" aria-controls="accountCollapse"&gt;Account&lt;/a&gt;
&lt;div id="accountCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse"&gt;
&lt;!-- Authentication --&gt;
&lt;div class="nav-item"&gt;
&lt;a class="dropdown-item collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#authenticationCollapse" aria-expanded="false" aria-controls="authenticationCollapse"&gt;
Authentication
&lt;/a&gt;
&lt;div id="authenticationCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#accountCollapse"&gt;
&lt;a class="dropdown-item" href="#"&gt;Login&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Signup&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Reset Password&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Login Simple&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Signup Simple&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Reset Password Simple&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- End Authentication --&gt;
&lt;a class="dropdown-item" href="#"&gt;Personal info&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Login &amp; Security&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Notifications&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Preferences&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Orders&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Wishlist&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Plans &amp; Payment&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Address&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Teams&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- End Account --&gt;
&lt;!-- Pages --&gt;
&lt;li class="nav-item"&gt;
&lt;a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#pagesCollapse" aria-expanded="false" aria-controls="pagesCollapse"&gt;
Pages
&lt;/a&gt;
&lt;div id="pagesCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse"&gt;
&lt;div id="pagesNavCollapse"&gt;
&lt;a class="dropdown-item" href="#"&gt;FAQ&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Terms &amp; Conditions&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Privacy &amp; Policy&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Coming Soon&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Maintenance Mode&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Status&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Invoice&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Error 404&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- End Pages --&gt;
&lt;!-- Blog --&gt;
&lt;li class="nav-item"&gt;
&lt;a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#blogCollapse" aria-expanded="false" aria-controls="blogCollapse"&gt;Blog&lt;/a&gt;
&lt;div id="blogCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse"&gt;
&lt;a class="dropdown-item" href="#"&gt;Journal&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Metro&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Newsroom&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Article&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Author Profile&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- End Blog --&gt;
&lt;!-- Portfolio --&gt;
&lt;li class="nav-item"&gt;
&lt;a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#portfolioCollapse" aria-expanded="false" aria-controls="portfolioCollapse"&gt;Portfolio&lt;/a&gt;
&lt;div id="portfolioCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse"&gt;
&lt;a class="dropdown-item" href="#"&gt;Grid&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Product Article&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Case Studies: Branding&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Case Studies: Product&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- End Portfolio --&gt;
&lt;!-- Demos --&gt;
&lt;li class="nav-item"&gt;
&lt;a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#demosCollapse" aria-expanded="false" aria-controls="demosCollapse"&gt;Demos&lt;/a&gt;
&lt;div id="demosCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse"&gt;
&lt;a class="dropdown-item" href="#"&gt;Main&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Real Estate&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Jobs&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Course&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;E-commerce&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;App Marketplace&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Help Desk&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- End Demos --&gt;
&lt;!-- Docs --&gt;
&lt;li class="nav-item"&gt;
&lt;a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#docsCollapse" aria-expanded="false" aria-controls="docsCollapse"&gt;Docs&lt;/a&gt;
&lt;div id="docsCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse"&gt;
&lt;a class="dropdown-item" href="#"&gt;Documentation&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Snippets&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- End Docs --&gt;
&lt;/ul&gt;
&lt;!-- End Collapse --&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-md-4 d-none d-md-inline-block"&gt;
&lt;!-- Address --&gt;
&lt;div class="mb-7"&gt;
&lt;span class="text-cap text-white"&gt;Address&lt;/span&gt;
&lt;address class="d-grid gap-1 mb-0"&gt;
&lt;span class="text-white-70"&gt;+1 (062) 109-9222&lt;/span&gt;
&lt;span class="text-white-70"&gt;hello@example.com&lt;/span&gt;
&lt;span class="text-white-70"&gt;153 Williamson Plaza, Maggieberg, MT 09514&lt;/span&gt;
&lt;/address&gt;
&lt;/div&gt;
&lt;!-- End Address --&gt;
&lt;!-- Socials --&gt;
&lt;span class="text-cap text-white"&gt;Social&lt;/span&gt;
&lt;ul class="list-inline mb-0"&gt;
&lt;li class="list-inline-item"&gt;
&lt;a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#"&gt;
&lt;i class="bi-facebook"&gt;&lt;/i&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class="list-inline-item"&gt;
&lt;a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#"&gt;
&lt;i class="bi-google"&gt;&lt;/i&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class="list-inline-item"&gt;
&lt;a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#"&gt;
&lt;i class="bi-twitter"&gt;&lt;/i&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class="list-inline-item"&gt;
&lt;a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#"&gt;
&lt;i class="bi-github"&gt;&lt;/i&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- End Socials --&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;/div&gt;
&lt;!-- End Row --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- End Collapse --&gt;
&lt;/nav&gt;
&lt;/header&gt;
&lt;!-- ========== END HEADER ========== --&gt;
</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">
&lt;!-- JS Implementing Plugins --&gt;
&lt;script src="../assets/vendor/hs-header/dist/hs-header.min.js"&gt;&lt;/script&gt;
&lt;!-- JS Plugins Init. --&gt;
&lt;script&gt;
(function() {
// INITIALIZATION OF HEADER
// =======================================================
new HSHeader('#header').init()
document.addEventListener('keydown', e => {
if (e.keyCode && e.keyCode === 27) {
const $header = document.querySelector('#navbarFullscreenNav')
if (!$header.classList.contains('show')) return
new bootstrap.Collapse($header).hide()
}
})
})()
&lt;/script&gt;
</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 Global Compulsory -->
<script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
<script src="../assets/vendor/prism/prism.js"></script>
<script src="../assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
<script src="../assets/vendor/hs-header/dist/hs-header.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 HEADER
// =======================================================
new HSHeader('#header').init()
document.addEventListener('keydown', e => {
if (e.keyCode && e.keyCode === 27) {
const $header = document.querySelector('#navbarFullscreenNav')
if (!$header.classList.contains('show')) return
new bootstrap.Collapse($header).hide()
}
})
})()
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink