public/front
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
e54f6110bcea7d1631d622fa02c5bcd58d672327
front/src/snippets/hero-landing-studio.html
dzieko e54f6110bc front v4.1
2021-12-28 13:34:18 +01:00

238 lines
9.3 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>Hero: Landing Studio - Snippets | Front - Multipurpose Responsive Template</title>
<!-- Favicon -->
<link rel="shortcut icon" href="@@autopath/favicon.ico">
<!-- Font -->
<link href="@@vars.themeFont" rel="stylesheet">
<!-- CSS Implementing Plugins -->
<!-- bundlecss:vendor [@@autopath] -->
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
<link rel="stylesheet" href="@@autopath/assets/vendor/hs-video-bg/dist/hs-video-bg.min.css">
<!-- CSS Front Template -->
<!-- bundlecss:theme [@@autopath] @@vars.version -->
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
<link rel="stylesheet" href="@@autopath/assets/css/snippets.css">
</head>
<body>
<!-- ========== HEADER ========== -->
@@include("@@autopath/partials/navbar/main-with-topbar-absolute-top.html", {
"category": "",
"link": ""
})
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main">
<!-- Hero -->
<div class="container content-space-t-5 content-space-b-1 content-space-b-sm-2">
<div class="w-lg-75">
<h1 class="display-3 mb-5">
We are a
<span class="text-primary text-highlight-warning">
<span class="js-typedjs"
data-hs-typed-options='{
"strings": ["modern", "creative", "professional"],
"typeSpeed": 70,
"loop": true,
"backSpeed": 40,
"backDelay": 2000
}'></span>
</span>
<br>
full stack web agency
</h1>
<p class="lead">As well as being game-changers when it comes to theme innovation, HS has some of the bestselling themes in its locker.</p>
</div>
</div>
<!-- End Hero -->
<!-- Video Background -->
<div class="container-fluid px-lg-5">
<div class="video-bg">
<div class="js-video-bg video-bg-content"
data-hs-video-bg-options='{
"videoId": "@@autopath/assets/video/working-in-office"
}'></div>
<div class="video-bg-replacer-img" style="background-image: url(@@autopath/assets/video/working-in-office.jpg);"></div>
</div>
</div>
<!-- End Video Background -->
<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-cssTab1" href="#nav-css1" data-bs-toggle="pill" data-bs-target="#nav-css1" role="tab" aria-controls="nav-css1" aria-selected="false">CSS</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;!-- Hero --&gt;
&lt;div class="container content-space-t-4 content-space-b-1 content-space-b-sm-2"&gt;
&lt;div class="w-lg-75"&gt;
&lt;h1 class="display-3 mb-5"&gt;
We are a
&lt;span class="text-primary text-highlight-warning"&gt;
&lt;span class="js-typedjs"
data-hs-typed-options='{
"strings": ["modern", "creative", "professional"],
"typeSpeed": 70,
"loop": true,
"backSpeed": 40,
"backDelay": 2000
}'&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;br&gt;
full stack web agency
&lt;/h1&gt;
&lt;p class="lead"&gt;As well as being game-changers when it comes to theme innovation, HS has some of the bestselling themes in its locker.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- End Hero --&gt;
&lt;!-- Video Background --&gt;
&lt;div class="container-fluid px-lg-5"&gt;
&lt;div class="video-bg"&gt;
&lt;div class="js-video-bg video-bg-content"
data-hs-video-bg-options='{
"videoId": "@@autopath/assets/video/working-in-office"
}'&gt;&lt;/div&gt;
&lt;div class="video-bg-replacer-img" style="background-image: url(@@autopath/assets/video/working-in-office.jpg);"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- End Video Background --&gt;
</code>
</pre>
</div>
<div class="tab-pane fade" id="nav-css1" role="tabpanel" aria-labelledby="nav-cssTab1">
<pre>
<code class="language-markup" data-lang="html">
&lt;link rel="stylesheet" href="@@autopath/assets/vendor/hs-video-bg/dist/hs-video-bg.min.css"&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="@@autopath/node_modules/typed.js/lib/typed.min.js"&gt;&lt;/script&gt;
&lt;script src="@@autopath/assets/vendor/hs-video-bg/dist/hs-video-bg.min.js"&gt;&lt;/script&gt;
&lt;!-- JS Front --&gt;
&lt;script src="@@autopath/assets/js/hs.typed.js"&gt;&lt;/script&gt;
&lt;!-- JS Plugins Init. --&gt;
&lt;script&gt;
(function() {
// INITIALIZATION OF TEXT ANIMATION (TYPING)
// =======================================================
HSCore.components.HSTyped.init('.js-typedjs')
// INITIALIZATION OF VIDEO BG
// =======================================================
document.querySelectorAll('.js-video-bg').forEach(item=> {
new HSVideoBg(item).init()
})
})()
&lt;/script&gt;
</code>
</pre>
</div>
</div>
<!-- End Tab Content -->
</div>
<!-- End Card -->
</div>
</main>
<!-- ========== END MAIN CONTENT ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Go To -->
@@include("@@autopath/partials/layouts-components/go-to.html")
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- JS Global Compulsory @@deleteLine:build -->
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [@@autopath] -->
<script src="@@autopath/assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
<script src="@@autopath/assets/vendor/prism/prism.js"></script>
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
<script src="@@autopath/node_modules/typed.js/lib/typed.min.js"></script>
<script src="@@autopath/assets/vendor/hs-video-bg/dist/hs-video-bg.min.js"></script>
<!-- JS Front -->
<!-- bundlejs:theme [@@autopath] -->
<script src="@@autopath/assets/js/hs.core.js"></script>
<script src="@@autopath/assets/js/hs.typed.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'
}
})
// INITIALIZATION OF TEXT ANIMATION (TYPING)
// =======================================================
HSCore.components.HSTyped.init('.js-typedjs')
// INITIALIZATION OF VIDEO BG
// =======================================================
document.querySelectorAll('.js-video-bg').forEach(item=> {
new HSVideoBg(item).init()
})
})()
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink