Thank you for purchasing our template!
Get started with FlexPack's components and options for laying out your own project, including a lot of components, powerful scripts, fully detailed documentation, and responsive design.
FlexPack is an powerful and trendy Multipurpose HTML Template. The design of the template is fully responsive and highly optimized for mobile, so will adapt itself to any mobile or tablet device. FlexPack Template build with Bootstrap 4 and multiple components so you can build new pages very easy on their basis. Feel free to visit the preview link or contact us with a feature request.
A guide to understanding how FlexPack template is structured and organized.
This is the base of main HTML file:
<!doctype html>
<html lang="en">
<head>
@@include("partials/head.html", {
"cssFile": "flexpack",
"pageTitle": "FlexPack - Multipurpose Landing Pages Package"
})
</head>
<body data-spy="scroll" data-target=".navbar">
<!-- NAVBAR
================================================== -->
@@include("partials/navbar-full.html", {
"category": "headers",
"page": "index.html"
})
<!-- MAIN CONTENT
================================================== -->
...
<!-- FOOTER
================================================== -->
@@include("partials/footer.html")
<!-- JAVASCRIPT
================================================== -->
@@include("partials/scripts.html")
</body>
</html>
Gulp is used to handle file compilation and other tasks. The following commands are available:
npm install - to download and install required dependencies
gulp - to start a new server and start watching for changes in HTML, JS and SASS files
gulp build - to compile SASS and HTML files, minify assets and prepare files for production
The gulp-file-include package is used to make global changes in HTML files easier. The following partials are available:
@@cssFile (string) - CSS file to import
@@pageTitle (string) - page title
@@page (string) - currently active link.
@@category (string) - currently active dropdown menu.
Easily create new .html partials inside the /partials folder and point to them from any file by specifying the path to the partial file and using the @@include keyword.
Please read the official package documentation for more info.
All images used in the template was downloaded from Unsplash.com and made via mockups that are free for both personal and commercial use.
This template contains a fully functioning PHP contact form.
In order to set up the contact form, please follow the steps below:
A JS component to enable Mailchimp newsletter signups via AJAX. In order to make the form work, you need to find, modify and fill in the action URL of your Mailchimp newsletter campaign.
http://xxxxx.us#.list-manage1.com/subscribe/post?u=xxxxx&id=xxxx.
post?u= with post-json?u=.
&c=? at the end. Your string should now look something like http://xxxxx.us#.list-manage1.com/subscribe/post-json?u=xxxxx&id=xxxx&c=?.
<!-- Newsletter Form -->
<div id="mc_embed_signup">
<form class="newsletter_form validate" action="//themeforest.us16.list-manage.com/subscribe/post-json?u=3c9679e26b601e1a87122b12f&id=e4b9351526&c=?" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate="">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group form-group">
<label for="mce-EMAIL" class="sr-only">E-mail address</label>
<input type="email" value="" name="EMAIL" class="required email form-control newsletter_input" id="mce-EMAIL" placeholder="Email address">
</div>
<div id="mce-responses" class="clear">
<div class="response"></div>
<div class="response" id="mce-success-response"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div aria-hidden="true" id="mce-hidden-input">
<input type="text" name="b_507744bbfd1cc2879036c7780_4523d25e1b" tabindex="-1" value="">
</div>
<div class="clear">
<button type="submit" class="btn btn-outline text-light" id="mc-embedded-subscribe">
<i class="far fa-paper-plane"></i>
</button>
</div>
</div>
</form>
</div> <!-- #mc_embed_signup -->
Do not forget to backup your files and read the changelog before updating your FlexPack template copy.
.card-testimonial-quote-footer changed to .media with .avatar component.