Files
front/src/landing-classic-studio.html
2021-12-28 13:34:18 +01:00

623 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="@@languageDirection.lang" dir="@@if(languageDirection.isRTL){rtl}">
<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>Studio | 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/node_modules/aos/dist/aos.css">
<link rel="stylesheet" href="@@autopath/assets/vendor/hs-video-bg/dist/hs-video-bg.min.css">
<link rel="stylesheet" href="@@autopath/node_modules/swiper/swiper-bundle.min.css">
<!-- CSS Front Template -->
<!-- bundlecss:theme [@@autopath] @@vars.version -->
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
</head>
<body>
<!-- ========== HEADER ========== -->
@@include("@@autopath/partials/navbar/main-with-topbar-absolute-top-slide.html", {
"topbarcategory": "demos",
"topbarlink": "main",
"category": "landings",
"subcategory": "",
"link": "landing-classic-studio.html"
})
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main">
<!-- Hero -->
<div class="container content-space-t-4 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 -->
<!-- Clients -->
<div class="container content-space-b-2 content-space-b-lg-3">
<div class="row">
<div class="col-md-4 pt-7 pt-md-0">
<!-- Card -->
<div class="card bg-primary shadow-lg mt-md-n10" data-aos="fade-up">
<div class="card-body">
<div class="mb-7">
<span class="card-subtitle text-warning">Who partners with Front?</span>
<h2 class="card-title text-white">Thousands of companies, including platforms, and plugin builders work with Front.</h2>
</div>
<div class="d-grid">
<a class="btn btn-soft-light btn-transition" href="#">View more</a>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md-8 pt-7">
<div class="row">
<div class="col-4 py-3">
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/amazon-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col-4 py-3">
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/kaplan-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col-4 py-3">
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/embark-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col-4 py-3">
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/google-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col-4 py-3">
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/airbnb-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col-4 py-3">
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/shopify-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col-4 py-3">
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/vidados-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col-4 py-3">
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/capsule-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col-4 py-3">
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/forbes-gray.svg" alt="Logo">
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Clients -->
<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-md-65 mb-5 mb-md-9">
<span class="text-cap">Featured case studies</span>
<h2 class="lh-base">We help businesses bring ideas to life in the digital world, by designing and implementing the technology tools that they need to win.</h2>
</div>
<!-- End Heading -->
<div class="overflow-hidden">
<div class="row justify-content-md-center gx-sm-3 gx-lg-8 pt-md-8 mb-7">
<div class="col-sm-6 mb-3 mb-sm-0">
<div class="d-grid gap-3 gap-lg-8 mt-md-n8">
<!-- Card -->
<a class="card card-transition bg-soft-primary shadow-none" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
<div class="card-body">
<div class="mb-5">
<img class="img-fluid rounded-2" src="@@autopath/assets/img/1200x900/img1.jpg" alt="Image Description">
</div>
<span class="badge bg-primary rounded-pill mb-2">Front-end</span>
<h3 class="card-title text-inherit">Front - Multipurpose Responsive Template</h3>
<span class="d-block text-body mb-3">Landing &amp; Corporate</span>
<p class="card-text text-dark">Super clean, minimalistic, stylized mockup collection with awesome customization features and huge resolution.</p>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-transition bg-soft-info shadow-none" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/" target="_blank">
<div class="card-body">
<div class="mb-5">
<img class="img-fluid rounded-2" src="@@autopath/assets/img/1200x900/img3.jpg" alt="Image Description">
</div>
<div class="d-flex align-items-center mb-4">
<div class="flex-shrink-0">
<img class="avatar avatar-xs" src="@@autopath/assets/svg/brands/figma-icon.svg" alt="Logo">
</div>
<div class="flex-grow-1 ms-2">
<span class="text-body">Compatible with Figma</span>
</div>
</div>
<h3 class="card-title text-inherit mb-1">Space Multipurpose Responsive Template</h3>
<span class="d-block text-body mb-3">Landing &amp; Corporate</span>
<p class="card-text text-dark">Space Multipurpose Responsive Template is a fully responsive and yet modern premium Bootstrap theme.</p>
</div>
</a>
<!-- End Card -->
</div>
</div>
<!-- End Col -->
<div class="col-sm-6">
<div class="d-grid gap-3 gap-lg-8">
<!-- Card -->
<a class="card card-transition bg-soft-dark shadow-none" href="https://themes.getbootstrap.com/product/front-admin-dashboard-template/" target="_blank">
<div class="card-body">
<div class="mb-5">
<img class="img-fluid rounded-2" src="@@autopath/assets/img/1200x900/img2.jpg" alt="Image Description">
</div>
<div class="d-flex align-items-center mb-4">
<div class="flex-shrink-0">
<img class="avatar avatar-xs" src="@@autopath/assets/svg/brands/figma-icon.svg" alt="Logo">
</div>
<div class="flex-grow-1 ms-2">
<span class="text-body">Figma coming soon</span>
</div>
</div>
<h3 class="card-title text-inherit mb-0">Front Admin &amp; Dashboard Template</h3>
<span class="d-block text-body mb-3">Admin &amp; Dashboard</span>
<p class="card-text text-dark">Whether youre creating a web application, dashboard, admin panels, or SASS based interface — Fronts feature-rich components and designed demo pages help you create the best possible web application projects.</p>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-transition bg-soft-dark shadow-none" href="https://themes.getbootstrap.com/product/nova-responsive-webapp-ui-kit/" target="_blank">
<div class="card-body">
<div class="mb-5">
<img class="img-fluid rounded-2" src="@@autopath/assets/img/1200x900/img4.jpg" alt="Image Description">
</div>
<span class="badge bg-primary rounded-pill mb-2">Admin</span>
<h3 class="card-title text-inherit mb-1">Nova Responsive WebApp UI Kit</h3>
<span class="d-block text-body mb-3">Admin &amp; Dashboard</span>
<p class="card-text text-dark">Nova is a modern and fully responsive WebApp UI Kit it is the perfect starting point for any type of Web Applications.</p>
</div>
</a>
<!-- End Card -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<div class="text-center">
<a class="btn btn-outline-primary btn-transition" href="https://htmlstream.com/" target="_blank">View all works</a>
</div>
</div>
<!-- End Card Grid -->
<div class="border-top mx-auto" style="max-width: 25rem;"></div>
<!-- Testimonials -->
<div class="container content-space-1 content-space-md-3">
<!-- Swiper Slider -->
<div class="js-swiper-single-testimonials swiper">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<!-- Blockquote -->
<figure class="w-md-65 text-center mx-md-auto">
<div class="mb-3">
<img class="avatar avatar-xl avatar-circle" src="@@autopath/assets/img/160x160/img10.jpg" alt="Image Description">
</div>
<blockquote class="blockquote">“ It has many landing page variations to choose from, which one is always a big advantage. ”</blockquote>
<figcaption class="blockquote-footer mb-5">
Lida Reidy
<span class="blockquote-footer-source">Project Manager</span>
</figcaption>
<img class="avatar avatar-xl avatar-4x3" src="@@autopath/assets/svg/brands/mailchimp-primary.svg" alt="Logo">
</figure>
<!-- End Blockquote -->
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<!-- Blockquote -->
<figure class="w-md-65 text-center mx-md-auto">
<div class="mb-3">
<img class="avatar avatar-xl avatar-circle" src="@@autopath/assets/img/160x160/img4.jpg" alt="Image Description">
</div>
<blockquote class="blockquote">“ I just wanted to say that I'm very happy with my purchase of Front so far. The documentation is outstanding - clear and detailed. ”</blockquote>
<figcaption class="blockquote-footer mb-5">
Philip
<span class="blockquote-footer-source">Product Manager</span>
</figcaption>
<img class="avatar avatar-xl avatar-4x3" src="@@autopath/assets/svg/brands/mailchimp-primary.svg" alt="Logo">
</figure>
<!-- End Blockquote -->
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<!-- Blockquote -->
<figure class="w-md-65 text-center mx-md-auto">
<div class="mb-3">
<img class="avatar avatar-xl avatar-circle" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
</div>
<blockquote class="blockquote">“ This is a beautiful template with exciting components and endless features. ”</blockquote>
<figcaption class="blockquote-footer mb-5">
Christina Kray
<span class="blockquote-footer-source">HR Director</span>
</figcaption>
<img class="avatar avatar-xl avatar-4x3" src="@@autopath/assets/svg/brands/capsule-primary.svg" alt="Logo">
</figure>
<!-- End Blockquote -->
</div>
<!-- End Slide -->
</div>
<!-- Pagination -->
<div class="js-swiper-single-testimonials-pagination swiper-pagination"></div>
</div>
<!-- End Swiper Slider -->
</div>
<!-- End Testimonials -->
<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-md-65 mb-5 mb-md-9">
<span class="text-cap">Front services</span>
<h2 class="lh-base">Improve &amp; boost your services with Front that provides all kinds of services and will help your audience grow through all platforms.</h2>
</div>
<!-- End Heading -->
<div class="row">
<div class="col-md-5 mb-3 mb-md-0">
<!-- Card -->
<a class="card card-transition h-100" href="#" data-aos="fade-up">
<img class="card-img-top" src="@@autopath/assets/svg/components/card-7.svg" alt="Image Description">
<div class="card-body">
<h3 class="card-title text-inherit">Have a meaningful impact</h3>
<p class="card-text text-body">We are aggressive about giving opportunities to Fronts who have proven to be good at executing on them.</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-0">
<!-- Card -->
<a class="card card-transition h-100" href="#" data-aos="fade-up" data-aos-delay="150">
<img class="card-img-top" src="@@autopath/assets/svg/components/card-8.svg" alt="Image Description">
<div class="card-body">
<h3 class="card-title text-inherit">Documentation</h3>
<p class="card-text text-body">Whether you're a startup or a global enterprise, learn how to integrate with Front.</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">
<!-- Card -->
<a class="card card-transition h-100" href="#" data-aos="fade-up" data-aos-delay="200">
<img class="card-img-top" src="@@autopath/assets/svg/components/card-9.svg" alt="Image Description">
<div class="card-body">
<h3 class="card-title text-inherit">Explore the Snippets tool</h3>
<p class="card-text text-body">Quickly Front sample components, copy-paste codes.</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 -->
</div>
<!-- End Card Grid -->
<!-- Contacts -->
<div class="position-relative">
<div class="bg-primary bg-img-start" style="background-image: url(@@autopath/assets/svg/components/shape-7.svg);">
<div class="container content-space-t-2 content-space-t-lg-3 content-space-b-1">
<!-- Heading -->
<div class="w-lg-50 text-center mx-lg-auto mb-7">
<span class="text-cap text-white-70">Contact us</span>
<h2 class="text-white lh-base">We collaborate with ambitious brands and people. <span class="text-warning">Let's chat.</span></h2>
</div>
<!-- End Heading -->
<div class="mx-auto" style="max-width: 35rem;">
<!-- Card -->
<div class="card zi-2">
<div class="card-body">
<!-- Form -->
<form>
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormFirstName">First name</label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameFirstName" id="hireUsFormFirstName" placeholder="First name" aria-label="First name">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormLasttName">Last name</label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameLastName" id="hireUsFormLasttName" placeholder="Last name" aria-label="Last name">
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormWorkEmail">Email address</label>
<input type="email" class="form-control form-control-lg" name="hireUsFormNameWorkEmail" id="hireUsFormWorkEmail" placeholder="email@site.com" aria-label="email@site.com">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormCompanyName">Company name <span class="form-label-secondary">(Optional)</span></label>
<input type="text" class="form-control form-control-lg" name="hireUsFormNameCompanyName" id="hireUsFormCompanyName" placeholder="Htmlstream" aria-label="Htmlstream">
</div>
<!-- End Form -->
<!-- Select -->
<div class="mb-4">
<label class="form-label" for="hireUsFormBudget">Budget</label>
<select id="hireUsFormBudget" class="form-select form-select-lg" name="hireUsFormNameBudget" aria-label="Tell us about your budget">
<option selected>Tell us about your budget</option>
<option value="1">$1,000 - $10,000</option>
<option value="2">$10,000 - $20,000</option>
<option value="3">$20,000 - $30,000</option>
<option value="4">$30,000 - $40,000</option>
<option value="5">$40,000 - $50,000</option>
<option value="6">$50,000 - and more</option>
</select>
</div>
<!-- End Select -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="hireUsFormDetails">Details</label>
<textarea class="form-control form-control-lg" name="hireUsFormNameDetails" id="hireUsFormDetails" placeholder="Tell us about your project" aria-label="Tell us about your project" rows="4"></textarea>
</div>
<!-- End Form -->
<!-- Check -->
<div class="form-check mb-4">
<input type="checkbox" class="form-check-input" id="signupFormPrivacyCheck" name="signupFormPrivacyCheck" required>
<label class="form-check-label small" for="signupFormPrivacyCheck"> By submitting this form I have read and acknowledged the <a href=@@autopath/page-privacy.html>Privacy Policy</a></label>
</div>
<!-- End Check -->
<div class="d-grid mb-2">
<button type="submit" class="btn btn-primary btn-lg">Send inquiry</button>
</div>
<div class="text-center">
<span class="form-text">We'll get back to you in 1-2 business days.</span>
</div>
</form>
<!-- End Form -->
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- Shape -->
<div class="shape shape-bottom zi-1">
<svg width="3000" height="500" viewBox="0 0 3000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 500H3000V0L0 500Z" fill="#fff"/>
</svg>
</div>
<!-- End Shape -->
</div>
<!-- End Contacts -->
</main>
<!-- ========== END MAIN CONTENT ========== -->
<!-- ========== FOOTER ========== -->
@@include("@@autopath/partials/footer/variant-1.html")
<!-- ========== END FOOTER ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Sign Up -->
@@include("@@autopath/partials/modal/signup.html")
<!-- 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-header/dist/hs-header.min.js"></script>
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
<script src="@@autopath/assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
<script src="@@autopath/assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
<script src="@@autopath/node_modules/aos/dist/aos.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>
<script src="@@autopath/node_modules/swiper/swiper-bundle.min.js"></script>
<!-- JS Front -->
<!-- bundlejs:theme [@@autopath] -->
<script src="@@autopath/assets/js/hs.core.js"></script>
<script src="@@autopath/assets/js/hs.bs-validation.js"></script>
<script src="@@autopath/assets/js/hs.typed.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 SHOW ANIMATIONS
// =======================================================
new HSShowAnimation('.js-animation-link')
// INITIALIZATION OF BOOTSTRAP VALIDATION
// =======================================================
HSBsValidation.init('.js-validate', {
onSubmit: data => {
data.event.preventDefault()
alert('Submited')
}
})
// INITIALIZATION OF GO TO
// =======================================================
new HSGoTo('.js-go-to')
// INITIALIZATION OF AOS
// =======================================================
AOS.init({
duration: 650,
once: true
});
// 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()
})
// INITIALIZATION OF SWIPER
// =======================================================
var swiper = new Swiper('.js-swiper-single-testimonials', {
pagination: {
el: '.js-swiper-single-testimonials-pagination',
clickable: true,
},
});
})()
</script>
</body>
</html>