Files
front/src/blog-article.html
2021-12-28 13:34:18 +01:00

595 lines
24 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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>Blog: Article | 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">
<!-- 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": "blog",
"subcategory": "",
"link": "blog-article.html"
})
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main">
<!-- Article Description -->
<div class="container content-space-t-3 content-space-t-lg-4 content-space-b-2">
<div class="w-lg-65 mx-lg-auto">
<div class="mb-4">
<h1 class="h2">Announcing a free plan for small teams</h1>
</div>
<div class="row align-items-sm-center mb-5">
<div class="col-sm-7 mb-4 mb-sm-0">
<!-- Media -->
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-circle" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<h5 class="mb-0">
<a class="text-dark" href="@@autopath/blog-author-profile.html">Christina Kray</a>
</h5>
<span class="d-block small">1 day ago</span>
</div>
</div>
<!-- End Media -->
</div>
<!-- End Col -->
<div class="col-sm-5">
<div class="d-flex justify-content-sm-end align-items-center">
<span class="text-cap mb-0 me-2">Share:</span>
<div class="d-flex gap-2">
<a class="btn btn-soft-secondary btn-sm btn-icon rounded-circle" href="#">
<i class="bi-facebook"></i>
</a>
<a class="btn btn-soft-secondary btn-sm btn-icon rounded-circle" href="#">
<i class="bi-twitter"></i>
</a>
<a class="btn btn-soft-secondary btn-sm btn-icon rounded-circle" href="#">
<i class="bi-instagram"></i>
</a>
<a class="btn btn-soft-secondary btn-sm btn-icon rounded-circle" href="#">
<i class="bi-telegram"></i>
</a>
</div>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<p>At Front, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.</p>
</div>
<div class="my-4 my-sm-8">
<img class="img-fluid rounded-lg" src="@@autopath/assets/img/1920x800/img5.jpg" alt="Image Description">
</div>
<div class="w-lg-65 mx-lg-auto">
<p>As we've grown, we've seen how Front has helped companies such as Spotify, Microsoft, Airbnb, Facebook, and Intercom bring their designers closer together to create amazing things. We've also learned that when the culture of sharing is brought in earlier, the better teams adapt and communicate with one another.</p>
<p>That's why we are excited to share that we now have a <a class="link" href="#">free version of Front</a>, which will allow individual designers, startups and other small teams a chance to create a culture of openness early on.</p>
<!-- Blockquote -->
<figure class="bg-light text-center p-7 my-7">
<blockquote class="blockquote blockquote-lg">" I love Front! I love the ease of use, I love the fact that I have total creative freedom... "</blockquote>
<figcaption class="blockquote-footer">
Lewis
<span class="blockquote-footer-source">Happy customer</span>
</figcaption>
</figure>
<!-- End Blockquote -->
<h3>Bringing the culture of sharing to everyone</h3>
<p>We know the power of sharing is real, and we want to create an opportunity for everyone to try Front and explore how transformative open communication can be. Now you can have a team of one or two designers and unlimited spectators (think PMs, management, marketing, etc.) share work and explore the design process earlier.</p>
<ul class="list-py-2">
<li>Front allows us to collaborate in real time and is a really great way for leadership on the team to stay up-to-date with what everybody is working on," <a class="link" href="#">said</a> Stewart Scott-Curran, Intercom's Director of Brand Design.</li>
<li>Front opened a new way of sharing. It's a persistent way for everyone to see and absorb each other's work," said David Scott, Creative Director at <a class="link" href="#">Eventbrite</a>.</li>
</ul>
</div>
<div class="my-4 my-sm-8">
<img class="img-fluid rounded-lg" src="@@autopath/assets/img/1920x800/img6.jpg" alt="Image Description">
</div>
<div class="w-lg-65 mx-lg-auto">
<p>Small teams and individual designers need a space where they can watch the design process unfold, both for themselves and for the people they work with no matter if it's a fellow designer, product manager, developer or client. Front allows you to invite more people into the process, creating a central place for conversation around design. As those teams grow, transparency and collaboration becomes integrated in how they communicate and work together.</p>
<!-- Card -->
<div class="card bg-dark text-center my-4" style="background-image: url(@@autopath/assets/svg/components/wave-pattern-light.svg);">
<div class="card-body">
<h4 class="text-white mb-4">Like what you're reading? Subscribe to our top stories.</h4>
<div class="w-lg-75 mx-lg-auto">
<form>
<!-- Input Card -->
<div class="input-card input-card-sm border">
<div class="input-card-form">
<label for="subscribeForm" class="form-label visually-hidden">Enter email</label>
<input type="text" class="form-control" id="subscribeForm" placeholder="Enter email" aria-label="Enter email">
</div>
<button type="button" class="btn btn-primary">Subscribe</button>
</div>
<!-- End Input Card -->
</form>
</div>
</div>
</div>
<!-- End Card -->
<p>We will continue to update <a class="link" href="#">Front</a>; if you have any questions or suggestions, please contact us!</p>
<p>Follow us on <a class="link" href="#">Medium</a>, <a class="link" href="#">Twitter</a>, <a class="link" href="#">Facebook</a>, <a class="link" href="#">YouTube</a>, and <a class="link" href="#">Dribbble</a>.</p>
<!-- Badges -->
<div class="mt-5">
<a class="btn btn-soft-secondary btn-xs m-1" href="#">Ecommerce</a>
<a class="btn btn-soft-secondary btn-xs m-1" href="#">Website</a>
<a class="btn btn-soft-secondary btn-xs m-1" href="#">Bootstrap</a>
<a class="btn btn-soft-secondary btn-xs m-1" href="#">Startup</a>
<a class="btn btn-soft-secondary btn-xs m-1" href="#">Free</a>
</div>
<!-- End Badges -->
<div class="row justify-content-sm-between align-items-sm-center mt-5">
<div class="col-sm mb-2 mb-sm-0">
<div class="d-flex align-items-center">
<span class="text-cap mb-0 me-2">Share:</span>
<a class="btn btn-ghost-secondary btn-sm btn-icon rounded-circle me-2" href="#">
<i class="bi-facebook"></i>
</a>
<a class="btn btn-ghost-secondary btn-sm btn-icon rounded-circle me-2" href="#">
<i class="bi-twitter"></i>
</a>
<a class="btn btn-ghost-secondary btn-sm btn-icon rounded-circle me-2" href="#">
<i class="bi-instagram"></i>
</a>
<a class="btn btn-ghost-secondary btn-sm btn-icon rounded-circle me-2" href="#">
<i class="bi-telegram"></i>
</a>
</div>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<a class="btn btn-soft-secondary btn-sm btn-icon rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Bookmark story">
<i class="bi-bookmark"></i>
</a>
<a class="btn btn-soft-secondary btn-sm btn-icon rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Report story">
<i class="bi-flag"></i>
</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Article Description -->
<!-- User Profile -->
<div class="container content-space-t-1">
<div class="row justify-content-lg-center">
<div class="col-lg-8">
<div class="mb-5">
<h4>About the author</h4>
</div>
<!-- Media -->
<div class="d-sm-flex">
<div class="flex-shrink-0 mb-3 mb-sm-0">
<img class="avatar avatar-xl avatar-circle" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-sm-4">
<!-- Media -->
<div class="d-flex justify-content-between align-items-center mb-3">
<h3 class="mb-0">
<a class="text-dark" href="@@autopath/blog-author-profile.html">Christina Kray</a>
</h3>
<button type="button" class="btn btn-outline-primary btn-sm">
<i class="bi-person-plus-fill me-1"></i> Follow
</button>
</div>
<!-- End Media -->
<p>Christina started his recruitment career on the agency side. Since then, shes built a career helping customers get the most out of HR technology. Shes currently a Customer Success Specialist at Space and spends her time speaking to in-house recruiters all over the world - helping them solve their recruitment challenges, and get the most out of our talent acquisition software.</p>
</div>
</div>
<!-- End Media -->
</div>
</div>
</div>
<!-- End User Profile -->
<!-- Comment -->
<div class="container content-space-1 content-space-lg-3">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>3 comments</h2>
</div>
<!-- End Heading -->
<div class="row justify-content-lg-center">
<div class="col-lg-8">
<!-- Comment -->
<ul class="list-comment">
<!-- Item -->
<li class="list-comment-item">
<!-- Media -->
<div class="d-flex align-items-center mb-3">
<div class="flex-shrink-0">
<img class="avatar avatar-circle" src="@@autopath/assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="d-flex justify-content-between align-items-center">
<h6>Dave Austin</h6>
<span class="d-block small text-muted">1 day ago</span>
</div>
</div>
</div>
<!-- End Media -->
<p>As a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.</p>
<a class="link" href="#">Reply</a>
<!-- Comment -->
<ul class="list-comment">
<!-- Item -->
<li class="list-comment-item">
<!-- Media -->
<div class="d-flex align-items-center mb-3">
<div class="flex-shrink-0">
<img class="avatar avatar-circle" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="d-flex justify-content-between align-items-center">
<h6>Christina Kray</h6>
<span class="d-block small text-muted">1 day ago</span>
</div>
</div>
</div>
<!-- End Media -->
<p>Love it Dave! We're all about keeping it up.</p>
<a class="link" href="#">Reply</a>
</li>
<!-- End Item -->
</ul>
<!-- End Comment -->
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-comment-item">
<!-- Media -->
<div class="d-flex align-items-center mb-3">
<div class="flex-shrink-0">
<img class="avatar avatar-circle" src="@@autopath/assets/img/160x160/img8.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="d-flex justify-content-between align-items-center">
<h6>Hanna Wolfe</h6>
<span class="d-block small text-muted">2 days ago</span>
</div>
</div>
</div>
<!-- End Media -->
<p>Since our attention spans seem to be shrinking by the daykeeping it simple is more important than ever.</p>
<a class="link" href="#">Reply</a>
</li>
<!-- End Item -->
</ul>
<!-- End Comment -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Comment -->
<!-- Post a Comment -->
<div class="container content-space-b-2">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>Post a comment</h2>
</div>
<!-- End Heading -->
<div class="row justify-content-lg-center">
<div class="col-lg-8">
<!-- Card -->
<div class="card card-lg border shadow-none">
<div class="card-body">
<form>
<div class="d-grid gap-4">
<!-- Form -->
<div class="row">
<div class="col-sm-6 mb-4 mb-sm-0">
<label class="form-label" for="blogContactsFormFirstName">First name</label>
<input type="text" class="form-control form-control-lg" name="blogContactsFirstName" id="blogContactsFormFirstName" placeholder="First name" aria-label="First name">
</div>
<div class="col-sm-6">
<label class="form-label" for="blogContactsFormLasttName">Last name</label>
<input type="text" class="form-control form-control-lg" name="blogContactsLastName" id="blogContactsFormLasttName" placeholder="Last name" aria-label="Last name">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<span class="d-block">
<label class="form-label" for="blogContactsFormEmail">Your email</label>
<input type="email" class="form-control form-control-lg" name="blogContactsEmailName" id="blogContactsFormEmail" placeholder="email@site.com" aria-label="email@site.com">
</span>
<!-- End Form -->
<!-- Form -->
<span class="d-block">
<label class="form-label" for="blogContactsFormComment">Comment</label>
<textarea class="form-control form-control-lg" id="blogContactsFormComment" name="blogContactsCommentName" placeholder="Leave your comment here..." aria-label="Leave your comment here..." rows="5"></textarea>
</span>
<!-- End Form -->
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</form>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Post a Comment -->
<!-- Card Grid -->
<div class="container">
<div class="w-lg-75 border-top content-space-2 mx-lg-auto">
<!-- Heading -->
<div class="mb-3 mb-sm-5">
<h2>Related articles</h2>
</div>
<!-- End Heading -->
<div class="row">
<div class="col-md-6">
<!-- Card -->
<div class="border-bottom h-100 py-5">
<div class="row justify-content-between">
<div class="col-6">
<a class="text-cap" href="#">Product</a>
<h4 class="mb-0">
<a class="text-dark" href="@@autopath/blog-article.html">Better is when everything works together</a>
</h4>
</div>
<!-- End Col -->
<div class="col-5">
<img class="img-fluid rounded" src="@@autopath/assets/img/500x280/img1.jpg" alt="Image Description">
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md-6">
<!-- Card -->
<div class="border-bottom h-100 py-5">
<div class="row justify-content-between">
<div class="col-6">
<a class="text-cap" href="#">Tech</a>
<h4 class="mb-0">
<a class="text-dark" href="@@autopath/blog-article.html">Should You Buy An Apple Pencil?</a>
</h4>
</div>
<!-- End Col -->
<div class="col-5">
<img class="img-fluid rounded" src="@@autopath/assets/img/500x280/img3.jpg" alt="Image Description">
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md-6">
<!-- Card -->
<div class="border-bottom h-100 py-5">
<div class="row justify-content-between">
<div class="col-6">
<a class="text-cap" href="#">Product</a>
<h4 class="mb-0">
<a class="text-dark" href="@@autopath/blog-article.html">This Watch gym partnerships give you perks for working out</a>
</h4>
</div>
<!-- End Col -->
<div class="col-5">
<img class="img-fluid rounded" src="@@autopath/assets/img/500x280/img5.jpg" alt="Image Description">
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md-6">
<!-- Card -->
<div class="border-bottom h-100 py-5">
<div class="row justify-content-between">
<div class="col-6">
<a class="text-cap" href="#">Tech</a>
<h4 class="mb-0">
<a class="text-dark" href="@@autopath/blog-article.html">Drone Company PrecisionHawk Names New CEO</a>
</h4>
</div>
<!-- End Col -->
<div class="col-5">
<img class="img-fluid rounded" src="@@autopath/assets/img/500x280/img7.jpg" alt="Image Description">
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Card Grid -->
<!-- Subscribe -->
<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-5 mb-md-9">
<h2>Stay in the know</h2>
<p>Get special offers on the latest developments from Space.</p>
</div>
<!-- End Heading -->
<div class="text-center mx-auto" style="max-width: 32rem;">
<form>
<!-- Input Card -->
<div class="input-card input-card-sm border mb-5">
<div class="input-card-form">
<input type="text" class="form-control" placeholder="Your email" aria-label="Your email">
</div>
<button type="button" class="btn btn-primary">Subscribe</button>
</div>
<!-- End Input Card -->
</form>
<a class="link" href="@@autopath/page-login.html">Create a free account <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Subscribe -->
</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>
<!-- 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')
})()
</script>
</body>
</html>