758 lines
31 KiB
HTML
758 lines
31 KiB
HTML
<!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>Marketing | 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">
|
|
|
|
<!-- 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-light-slide.html", {
|
|
"topbarcategory": "demos",
|
|
"topbarlink": "main",
|
|
"category": "landings",
|
|
"subcategory": "",
|
|
"link": "landing-classic-marketing.html"
|
|
})
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main">
|
|
<!-- Hero -->
|
|
<div class="position-relative bg-primary overflow-hidden">
|
|
<div class="container position-relative zi-2 content-space-3 content-space-md-5">
|
|
<div class="w-md-75 w-xl-65 text-center mx-md-auto">
|
|
<!-- Heading -->
|
|
<div class="mb-7">
|
|
<h1 class="display-4 text-white mb-4">Collaborative tools to design user experience</h1>
|
|
<p class="lead text-white mb-4">For everyone, from beginners to experts.</p>
|
|
</div>
|
|
<!-- End Title & Description -->
|
|
|
|
<div class="d-grid d-sm-flex justify-content-center gap-2">
|
|
<a class="btn btn-light btn-transition px-6" href="#">Start now</a>
|
|
<a class="btn text-white" href="#">Get in touch <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Background Shape -->
|
|
<figure class="position-absolute top-0 start-0 w-65">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1246 1078">
|
|
<g opacity=".4">
|
|
<linearGradient id="doubleEllipseTopLeftID1" gradientUnits="userSpaceOnUse" x1="2073.5078" y1="1.7251" x2="2273.4375" y2="1135.5818" gradientTransform="matrix(-1 0 0 1 2600 0)">
|
|
<stop offset="0.4976" style="stop-color:gulpLighten[@@vars.style.color,30]"/>
|
|
<stop offset="1" style="stop-color:@@vars.style.color"/>
|
|
</linearGradient>
|
|
<polygon fill="url(#doubleEllipseTopLeftID1)" points="519.8,0.6 0,0.6 0,1078 863.4,1078 "/>
|
|
<linearGradient id="doubleEllipseTopLeftID2" gradientUnits="userSpaceOnUse" x1="1717.1648" y1="3.779560e-05" x2="1717.1648" y2="644.0417" gradientTransform="matrix(-1 0 0 1 2600 0)">
|
|
<stop offset="1.577052e-06" style="stop-color:gulpLighten[@@vars.style.color,30]"/>
|
|
<stop offset="1" style="stop-color:@@vars.style.color"/>
|
|
</linearGradient>
|
|
<polygon fill="url(#doubleEllipseTopLeftID2)" points="519.7,0 1039.4,0.6 1246,639.1 725.2,644 "/>
|
|
</g>
|
|
</svg>
|
|
</figure>
|
|
<!-- End Background Shape -->
|
|
|
|
<!-- Shape -->
|
|
<div class="shape shape-bottom zi-1" style="margin-bottom: -.125rem">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
|
|
<path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
|
|
</svg>
|
|
</div>
|
|
<!-- End Shape -->
|
|
</div>
|
|
<!-- End Hero -->
|
|
|
|
<!-- Clients -->
|
|
<div class="border-bottom">
|
|
<div class="container pb-3 pb-lg-5">
|
|
<div class="w-lg-75 mx-lg-auto">
|
|
<div class="row">
|
|
<div class="col text-center py-3">
|
|
<img class="avatar avatar-lg avatar-4x3" src="@@autopath/assets/svg/brands/capsule-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col text-center py-3">
|
|
<img class="avatar avatar-lg avatar-4x3" src="@@autopath/assets/svg/brands/fitbit-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col text-center py-3">
|
|
<img class="avatar avatar-lg avatar-4x3" src="@@autopath/assets/svg/brands/forbes-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col text-center py-3">
|
|
<img class="avatar avatar-lg avatar-4x3" src="@@autopath/assets/svg/brands/mailchimp-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col text-center py-3">
|
|
<img class="avatar avatar-lg avatar-4x3" src="@@autopath/assets/svg/brands/layar-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Clients -->
|
|
|
|
<!-- Features -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<div class="row justify-content-lg-between align-items-lg-center">
|
|
<div class="col-lg-5 mb-9 mb-lg-0">
|
|
<div class="mb-3">
|
|
<h2 class="h1">Whatever work you do, use our design</h2>
|
|
</div>
|
|
|
|
<p>After brainstorming about insights, get the power to create something real. Bring your ideas to life and share your vision with concrete elements. Make collaboration and communication easier with your team or your client.</p>
|
|
|
|
<p>Use our tools to explore your ideas and make your vision come true. Then share your work easily.</p>
|
|
|
|
<div class="mt-4">
|
|
<a class="btn btn-primary btn-transition px-5" href="#">Start Now</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 col-xl-5">
|
|
<!-- SVG Element -->
|
|
<div class="position-relative mx-auto" style="max-width: 28rem; min-height: 30rem;">
|
|
<figure class="position-absolute top-0 end-0 zi-2 me-10" data-aos="fade-up">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 450 450" width="165" height="165">
|
|
<g>
|
|
<defs>
|
|
<path id="circleImgID2" d="M225,448.7L225,448.7C101.4,448.7,1.3,348.5,1.3,225l0,0C1.2,101.4,101.4,1.3,225,1.3l0,0
|
|
c123.6,0,223.7,100.2,223.7,223.7l0,0C448.7,348.6,348.5,448.7,225,448.7z"/>
|
|
</defs>
|
|
<clipPath id="circleImgID1">
|
|
<use xlink:href="#circleImgID2"/>
|
|
</clipPath>
|
|
<g clip-path="url(#circleImgID1)">
|
|
<image width="450" height="450" xlink:href="@@autopath/assets/img/450x450/img1.jpg" ></image>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</figure>
|
|
|
|
<figure class="position-absolute top-0 start-0" data-aos="fade-up" data-aos-delay="300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="120" height="120">
|
|
<circle fill="none" stroke="@@vars.style.color" stroke-width="75" cx="167.6" cy="167.6" r="130.1"/>
|
|
</svg>
|
|
</figure>
|
|
|
|
<figure class="d-none d-sm-block position-absolute top-0 start-0 mt-10" data-aos="fade-up" data-aos-delay="200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 515 515" width="200" height="200">
|
|
<g>
|
|
<defs>
|
|
<path id="circleImgID4" d="M260,515h-5C114.2,515,0,400.8,0,260v-5C0,114.2,114.2,0,255,0h5c140.8,0,255,114.2,255,255v5
|
|
C515,400.9,400.8,515,260,515z"/>
|
|
</defs>
|
|
<clipPath id="circleImgID3">
|
|
<use xlink:href="#circleImgID4"/>
|
|
</clipPath>
|
|
<g clip-path="url(#circleImgID3)">
|
|
<image width="515" height="515" xlink:href="@@autopath/assets/img/515x515/img1.jpg" transform="matrix(1 0 0 1 1.639390e-02 2.880859e-02)"></image>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</figure>
|
|
|
|
<figure class="position-absolute top-0 end-0" style="margin-top: 11rem; margin-right: 13rem;" data-aos="fade-up" data-aos-delay="250">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 67 67" width="25" height="25">
|
|
<circle fill="#00C9A7" cx="33.5" cy="33.5" r="33.5"/>
|
|
</svg>
|
|
</figure>
|
|
|
|
<figure class="position-absolute top-0 end-0 me-3" style="margin-top: 8rem;" data-aos="fade-up" data-aos-delay="350">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 141 141" width="50" height="50">
|
|
<circle fill="#FFC107" cx="70.5" cy="70.5" r="70.5"/>
|
|
</svg>
|
|
</figure>
|
|
|
|
<figure class="position-absolute bottom-0 end-0" data-aos="fade-up" data-aos-delay="400">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 770.4 770.4" width="280" height="280">
|
|
<g>
|
|
<defs>
|
|
<path id="circleImgID6" d="M385.2,770.4L385.2,770.4c212.7,0,385.2-172.5,385.2-385.2l0,0C770.4,172.5,597.9,0,385.2,0l0,0
|
|
C172.5,0,0,172.5,0,385.2l0,0C0,597.9,172.4,770.4,385.2,770.4z"/>
|
|
</defs>
|
|
<clipPath id="circleImgID5">
|
|
<use xlink:href="#circleImgID6"/>
|
|
</clipPath>
|
|
<g clip-path="url(#circleImgID5)">
|
|
<image width="900" height="900" xlink:href="@@autopath/assets/img/900x900/img2.jpg" transform="matrix(1 0 0 1 -64.8123 -64.8055)"></image>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</figure>
|
|
</div>
|
|
<!-- End SVG Element -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Features -->
|
|
|
|
<!-- Pricing -->
|
|
<div class="overflow-hidden">
|
|
<div class="container">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 text-center mx-md-auto mb-9">
|
|
<h2 class="h1">Flexible and transparent pricing</h2>
|
|
<p>Whatever your status, our offers evolve according to your needs.</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Form Switch -->
|
|
<div class="d-flex justify-content-center mb-5">
|
|
<div class="form-check form-switch form-switch-between">
|
|
<label class="form-check-label">Monthly</label>
|
|
<input class="js-toggle-switch form-check-input" type="checkbox"
|
|
data-hs-toggle-switch-options='{
|
|
"targetSelector": "#pricingCount1, #pricingCount2, #pricingCount3"
|
|
}'>
|
|
<label class="form-check-label form-switch-promotion">
|
|
Annually
|
|
<span class="form-switch-promotion-container">
|
|
<span class="form-switch-promotion-body">
|
|
<svg class="form-switch-promotion-arrow" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
|
|
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"></path>
|
|
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"></path>
|
|
</svg>
|
|
<span class="form-switch-promotion-text">
|
|
<span class="badge bg-primary rounded-pill ms-1">Save up to 10%</span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<!-- End Form Switch -->
|
|
|
|
<div class="row mb-7">
|
|
<div class="col-md mb-3 mb-md-0">
|
|
<!-- Card -->
|
|
<div class="card h-100 shadow-none zi-1">
|
|
<div class="card-header text-center">
|
|
<div class="mb-2">
|
|
<span class="fs-5 align-top text-dark fw-semi-bold">$</span>
|
|
<span id="pricingCount1" class="fs-1 text-dark fw-semi-bold"
|
|
data-hs-toggle-switch-item-options='{
|
|
"min": 29,
|
|
"max": 19
|
|
}'>19</span>
|
|
<span>/mo</span>
|
|
</div>
|
|
|
|
<h3 class="card-title">Professional</h3>
|
|
<p class="card-text">All the basics for starting a new business</p>
|
|
</div>
|
|
|
|
<div class="card-body d-flex justify-content-center py-0">
|
|
<!-- List Checked -->
|
|
<ul class="list-checked list-checked-primary">
|
|
<li class="list-checked-item">1 user</li>
|
|
<li class="list-checked-item">Space plan features</li>
|
|
<li class="list-checked-item">1 app</li>
|
|
</ul>
|
|
<!-- End List Checked -->
|
|
</div>
|
|
|
|
<div class="card-footer text-center">
|
|
<div class="d-grid mb-2">
|
|
<button type="button" class="btn btn-ghost-primary">Try free for 30 days</button>
|
|
</div>
|
|
<p class="card-text text-muted small">No card required</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md mb-3 mb-md-0">
|
|
<div class="position-relative">
|
|
<!-- Card -->
|
|
<div class="card h-100 zi-1">
|
|
<div class="card-header text-center">
|
|
<div class="mb-2">
|
|
<span class="fs-5 align-top text-dark fw-semi-bold">$</span>
|
|
<span id="pricingCount2" class="fs-1 text-dark fw-semi-bold"
|
|
data-hs-toggle-switch-item-options='{
|
|
"min": 49,
|
|
"max": 39
|
|
}'>39</span>
|
|
<span>/mo</span>
|
|
</div>
|
|
|
|
<h3 class="card-title">Team</h3>
|
|
<p class="card-text">Everything you need for a growing business</p>
|
|
</div>
|
|
|
|
<div class="card-body d-flex justify-content-center py-0">
|
|
<!-- List Checked -->
|
|
<ul class="list-checked list-checked-primary">
|
|
<li class="list-checked-item">3 users</li>
|
|
<li class="list-checked-item">Space plan features</li>
|
|
<li class="list-checked-item">3 apps</li>
|
|
<li class="list-checked-item">Product support</li>
|
|
</ul>
|
|
<!-- End List Checked -->
|
|
</div>
|
|
|
|
<div class="card-footer text-center">
|
|
<div class="d-grid mb-2">
|
|
<button type="button" class="btn btn-primary">Try free for 30 days</button>
|
|
</div>
|
|
<p class="card-text text-muted small">No card required</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- SVG Elements -->
|
|
<figure class="position-absolute bottom-0 start-0 mb-n7 ms-n7" style="width: 9rem;">
|
|
<img class="img-fluid" src="@@autopath/assets/svg/components/dots.svg" alt="Image Description">
|
|
</figure>
|
|
|
|
<figure class="position-absolute top-0 end-0 mt-n7 me-n7" style="width: 7rem;">
|
|
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
viewBox="0 0 260 260" xml:space="preserve">
|
|
<circle fill="#ffc107" cx="130" cy="130" r="130"/>
|
|
</svg>
|
|
</figure>
|
|
<!-- End SVG Elements -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md mb-3 mb-md-0">
|
|
<!-- Card -->
|
|
<div class="card h-100 shadow-none zi-1">
|
|
<div class="card-header text-center">
|
|
<div class="mb-2">
|
|
<span class="fs-5 align-top text-dark fw-semi-bold">$</span>
|
|
<span id="pricingCount3" class="fs-1 text-dark fw-semi-bold"
|
|
data-hs-toggle-switch-item-options='{
|
|
"min": 69,
|
|
"max": 59
|
|
}'>59</span>
|
|
<span>/mo</span>
|
|
</div>
|
|
|
|
<h3 class="card-title">Enterprise</h3>
|
|
<p class="card-text">Advanced features for scaling your business</p>
|
|
</div>
|
|
|
|
<div class="card-body d-flex justify-content-center py-0">
|
|
<!-- List Checked -->
|
|
<ul class="list-checked list-checked-primary">
|
|
<li class="list-checked-item">Unlimited users</li>
|
|
<li class="list-checked-item">Space plan features</li>
|
|
<li class="list-checked-item">Unlimited apps</li>
|
|
<li class="list-checked-item">Product support</li>
|
|
</ul>
|
|
<!-- End List Checked -->
|
|
</div>
|
|
|
|
<div class="card-footer text-center">
|
|
<div class="d-grid mb-2">
|
|
<button type="button" class="btn btn-ghost-primary">Try free for 30 days</button>
|
|
</div>
|
|
<p class="card-text text-muted small">No card required</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Pricing -->
|
|
|
|
<!-- Icon Blocks -->
|
|
<div class="container content-space-t-2 content-space-t-lg-3">
|
|
<div class="row justify-content-lg-center">
|
|
<div class="col-md-6 col-lg-5 mb-3 mb-md-7">
|
|
<!-- Icon Blocks -->
|
|
<div class="d-flex pe-lg-5" data-aos="fade-up">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary">
|
|
@@include("@@autopath/assets/vendor/duotone-icons/elc/elc002.svg")
|
|
</span>
|
|
</div>
|
|
<div class="flex-grow-1 ms-4">
|
|
<h4>Responsive</h4>
|
|
<p>Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Blocks -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-6 col-lg-5 mb-3 mb-md-7">
|
|
<!-- Icon Blocks -->
|
|
<div class="d-flex ps-lg-5" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary">
|
|
@@include("@@autopath/assets/vendor/duotone-icons/gen/gen019.svg")
|
|
</span>
|
|
</div>
|
|
<div class="flex-grow-1 ms-4">
|
|
<h4>Customizable</h4>
|
|
<p>Front template can be easily customized with its cutting-edge components and features.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Blocks -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="w-100"></div>
|
|
|
|
<div class="col-md-6 col-lg-5 mb-3 mb-md-7 mb-lg-0">
|
|
<!-- Icon Blocks -->
|
|
<div class="d-flex pe-lg-5" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary">
|
|
@@include("@@autopath/assets/vendor/duotone-icons/gen/gen025.svg")
|
|
</span>
|
|
</div>
|
|
<div class="flex-grow-1 ms-4">
|
|
<h4>Premium</h4>
|
|
<p>Front is not only for developers but also for designers, and includes a Sketch file.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Blocks -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-6 col-lg-5">
|
|
<!-- Icon Blocks -->
|
|
<div class="d-flex ps-lg-5" data-aos="fade-up" data-aos-delay="300">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary">
|
|
@@include("@@autopath/assets/vendor/duotone-icons/fil/fil024.svg")
|
|
</span>
|
|
</div>
|
|
<div class="flex-grow-1 ms-4">
|
|
<h4>Documentation</h4>
|
|
<p>Every component and plugin is well documented with live examples.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Blocks -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Icon Blocks -->
|
|
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
|
<h2 class="h1">Read our latest news</h2>
|
|
<p>We've helped some great companies brand, design and get to market.</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row gx-3 mb-5 mb-md-9">
|
|
<div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
|
|
<!-- Card -->
|
|
<a class="card card-transition h-100" href="#">
|
|
<img class="card-img-top" src="@@autopath/assets/img/500x280/img9.jpg" alt="Image Description">
|
|
<div class="card-body">
|
|
<span class="card-subtitle text-primary">Product</span>
|
|
<h5 class="card-text lh-base">Better is when everything works together</h5>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
|
|
<!-- Card -->
|
|
<a class="card card-transition h-100" href="#">
|
|
<img class="card-img-top" src="@@autopath/assets/img/500x280/img10.jpg" alt="Image Description">
|
|
<div class="card-body">
|
|
<span class="card-subtitle text-primary">Business</span>
|
|
<h5 class="card-text lh-base">What CFR really is about</h5>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-3 mb-3 mb-sm-0">
|
|
<!-- Card -->
|
|
<a class="card card-transition h-100" href="#">
|
|
<img class="card-img-top" src="@@autopath/assets/img/500x280/img11.jpg" alt="Image Description">
|
|
<div class="card-body">
|
|
<span class="card-subtitle text-primary">Business</span>
|
|
<h5 class="card-text lh-base">Should Product Owners think like entrepreneurs?</h5>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-3">
|
|
<!-- Card -->
|
|
<a class="card card-transition h-100" href="#">
|
|
<img class="card-img-top" src="@@autopath/assets/img/500x280/img12.jpg" alt="Image Description">
|
|
<div class="card-body">
|
|
<span class="card-subtitle text-primary">Facilitate</span>
|
|
<h5 class="card-text lh-base">Announcing Front Strategies: Ready-to-use rules</h5>
|
|
</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 read more? <a class="card-link ms-2" href="#">Go here <span class="bi-chevron-right small ms-1"></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Info -->
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
|
|
<!-- Mockup -->
|
|
<div class="shape-container">
|
|
<div class="container">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 text-center mx-md-auto mb-5 mb-md-9">
|
|
<h2 class="h1">Ready to grow your business?</h2>
|
|
<p>Your website is fully responsive so visitors can view your content from their choice of device.</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Devices -->
|
|
<div class="devices">
|
|
<!-- Mobile Device -->
|
|
<figure class="device-mobile rotated-3d-right">
|
|
<div class="device-mobile-frame">
|
|
<img class="device-mobile-img" src="@@autopath/assets/img/407x867/img5.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Mobile Device -->
|
|
|
|
<!-- Browser Device -->
|
|
<figure class="device-browser">
|
|
<div class="device-browser-header">
|
|
<div class="device-browser-header-btn-list">
|
|
<span class="device-browser-header-btn-list-btn"></span>
|
|
<span class="device-browser-header-btn-list-btn"></span>
|
|
<span class="device-browser-header-btn-list-btn"></span>
|
|
</div>
|
|
<div class="device-browser-header-browser-bar">www.htmlstream.com/front/</div>
|
|
</div>
|
|
|
|
<div class="device-browser-frame">
|
|
<img class="device-browser-img" src="@@autopath/assets/img/1618x1010/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</figure>
|
|
<!-- End Browser Device -->
|
|
</div>
|
|
<!-- End Devices -->
|
|
</div>
|
|
|
|
<!-- Shape -->
|
|
<div class="shape shape-bottom zi-3">
|
|
<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 Mockup -->
|
|
|
|
<!-- Clients -->
|
|
<div class="container content-space-2 content-space-b-lg-3">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-6">
|
|
<h2>Trusted by Open Source, enterprise, and more than 33,000 of you</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row justify-content-center text-center">
|
|
<div class="col-4 col-sm-3 col-md-2 py-3">
|
|
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/amazon-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-3 col-md-2 py-3">
|
|
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/kaplan-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-3 col-md-2 py-3">
|
|
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/google-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-3 col-md-2 py-3">
|
|
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/airbnb-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-3 col-md-2 py-3">
|
|
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/shopify-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-3 col-md-2 py-3">
|
|
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/vidados-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-3 col-md-2 py-3">
|
|
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/capsule-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-3 col-md-2 py-3">
|
|
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/forbes-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-3 col-md-2 py-3">
|
|
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/business-insider-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-3 col-md-2 py-3">
|
|
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/hubspot-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-3 col-md-2 py-3">
|
|
<img class="avatar avatar-lg avatar-4x3 avatar-centered" src="@@autopath/assets/svg/brands/layar-dark.svg" alt="Logo">
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Clients -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== FOOTER ========== -->
|
|
@@include("@@autopath/partials/footer/main-dark.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/assets/vendor/hs-toggle-switch/dist/hs-toggle-switch.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<!-- bundlejs:theme [@@autopath] -->
|
|
<script src="@@autopath/assets/js/hs.core.js"></script>
|
|
<script src="@@autopath/assets/js/hs.bs-dropdown.js"></script>
|
|
<script src="@@autopath/assets/js/hs.bs-validation.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 BOOTSTRAP DROPDOWN
|
|
// =======================================================
|
|
HSBsDropdown.init()
|
|
|
|
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
|
|
|
|
// INITIALIZATION OF AOS
|
|
// =======================================================
|
|
AOS.init({
|
|
duration: 650,
|
|
once: true
|
|
});
|
|
|
|
|
|
// INITIALIZATION OF TOGGLE SWITCH
|
|
// =======================================================
|
|
new HSToggleSwitch('.js-toggle-switch')
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|