Punchy Coming Soon and Landing Page Template with Morphing Effects Documentation
by:
mix_design
version: 2.0.0
created: 23.10.2018
last update: 09.08.2022
01
Thank you for choosing Punchy - coming soon and landing page HTML template with morphing effects. We have prepared detailed documentation to make Punchy customization an easy task for you. If you have any questions that are beyond the scope of this help file, you can email us on support@mixdesign.club.
We would be very happy if you could rate this item here with 5 stars. Your feedback is very important so write us a line ! :)
02
Follow the steps below to setup your site template:
In order to start working with Punchy unzip the downloaded package and open HTML folder to find all ready-to-use template files. Choose one of the demo *.html files (any ready-to-use demo you like) and rename it to index.html.
Next you’ll need to prepare a project for customization. Below is a list of files and folders that are required in the root directory of your project:
index.html - your chosen *.html file (renamed already);css folder - stylesheet files;js folder - JavaScript files;fonts folder - icon and lining nums fonts files;img folder for project images and favicon;video folder - project video files;mail.php file for sending e-mails;.htaccess - this file contain rules for files caching on web server;The other files can be used according to your preferences.
Your project is ready to go! Now you can start adding your texts, images and video to your new awesome website.
After the customization is over, you’ll need to upload the project files to your hosting web server using FTP client or cPanel interface in order to use it on your website.
03
After downloading and extracting template package you will find 3 folders:
This section describes
HTML
folder structure. More about
PunchyGULP
folder structure you can find out in
PunchyGULP
section.
Punchy is one page HTML template. So, mostly you will need one
*.html
file and supporting
*.css,
*.js,
*.php
files with some images. All the directories and files are well organized as it shown on the image bellow.
source-files folder contains all expanded CSS files, expanded JavaScript files, plugins and components files;mail.php file for sending e-mails is located in the root directory;.htaccess file is located in the root directory. This file contain rules for files caching on web server.Punchy is one page HTML template and comes with 12 ready-to-use demo pages and 3 homescreen layout variations:
Punchy has a simple and easy to customize structure based on Bootstrap 5 Grid. Here is a sample page structure:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
Meta tags, Title, Favicon and Icons, Facebook Metadata, CSS, Custom Browser Color
</head>
<body>
<!-- Old Browsers Support Start -->
<!--[if lt IE 9]>
<script src="js/libs/es5-shim.min.js"></script>
<script src="js/libs/html5shiv.min.js"></script>
<script src="js/libs/html5shiv-printshiv.min.js"></script>
<script src="js/libs/respond.min.js"></script>
<![endif]-->
<!-- Old Browsers Support End -->
<!-- Loader Start -->
<div class="loader">
...
</div>
<!-- Loader End -->
<!-- Menu Button Start -->
<div class="menu-button">
...
</div>
<!-- Menu Button End -->
<!-- Navigation Start -->
<div id="menu" class="menu">
...
</div>
<!-- Navigation End -->
<!-- Fullpage.js Sections Start -->
<div id="fullpage">
<!-- Main Section Start -->
<div class="section fp-auto-height-responsive main" data-anchor="main">
...
</div>
<!-- Main Section End -->
<!-- About Section Start -->
<div class="section fp-auto-height-responsive inner" data-anchor="about">
...
</div>
<!-- About Section End -->
<!-- Features Section Start -->
<div class="section fp-auto-height-responsive inner" data-anchor="features">
...
</div>
<!-- Features Section End -->
<!-- Portfolio Section Start -->
<div class="section fp-auto-height-responsive inner" data-anchor="portfolio">
...
</div>
<!-- Portfolio Section End -->
<!-- Blockquote Section Start -->
<div class="section fp-auto-height-responsive inner" data-anchor="blockquote">
...
</div>
<!-- Blockquote Section End -->
<!-- Contact Section Start -->
<div class="section fp-auto-height-responsive inner" data-anchor="blockquote">
...
</div>
<!-- Contact Section End -->
</div>
<!-- Fullpage.js Sections End -->
<!-- Notify Me Popup Start -->
<div id="notify" class="popup notify">
...
</div>
<!-- Notify Me Popup End -->
<!-- Write-a-Line Popup Start -->
<div id="writealine" class="popup writealine">
...
</div>
<!-- Write-a-Line Popup End -->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
...
</div>
<!-- Load Scripts Start -->
...
<!-- Load Scripts End -->
</body>
</html>
Punchy template CSS files have a well-organized structure and a table of contents, as you can see on image below:
All CSS files are placed in
css
folder and have to be included in the
<head>
tag.
Punchy uses uncompressed CSS files.
If you want to improve Google PageSpeed Insights performance, you can use minificated files from
source-files → punchy-css-min-files.
<!-- Template Styles Start-->
<link rel="stylesheet" type="text/css" href="css/loaders/loader.css">
<link rel="stylesheet" type="text/css" href="css/plugins.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- Template Styles End-->
CSS files that have to be included in chosen .html file:
loader.css
plugins.css
main.css
If you want to customize CSS styles, We recommend to create your own
custom.css
file and include it to
Template Styles
section of the
HTML
file. This solution will help you in future updates.
All JavaScript files are placed in
js
folder and have to be included before the
</body>
tag.
libs.min.js - all JavaScript libraries that are necessary for Punchy proper work, are сompiled in this file;gallery-init.js - for photoswipe gallery initialization;custom.js - includes other scripts calls and settings;
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
<script src="js/gallery-init.js"></script>
<script src="js/custom.js"></script>
<!-- Load Scripts End-->
We used minificated
libs.min.js
file to add all necessary JavaScript libraries to this template. The file contains:
All this uncompressed files you can find in the source-files folder.
04
In Punchy template we used Montserrat Font and Fontawesome Free Iconic Font
In the Punchy template we used:
This font is embedded in the
main.css
file via
@font-face
rule:
/* ------------------------------------------------*/
/* Fonts Start */
/* ------------------------------------------------*/
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 400;
src: url("../fonts/Montserrat-Regular/Montserrat-Regular.eot?#iefix") format("embedded-opentype"),
url("../fonts/Montserrat-Regular/Montserrat-Regular.woff") format("woff"),
url("../fonts/Montserrat-Regular/Montserrat-Regular.ttf") format("truetype"),
url("../fonts/Montserrat-Regular/Montserrat-Regular.svg#Montserrat") format("svg");
}
...
/* ------------------------------------------------*/
/* Fonts End */
/* ------------------------------------------------*/
You can customize embedded fonts or embed another fonts for your project in the
Fonts
section of the
main.css
file.
Punchy uses free version of FontAwesome 6.1.0 iconic font. You can use fontawesome.com/icons page to easily find the icon you want to use. Solid, regular and brands icons are already compiled in the plugins.css file and ready for use.
To change icons, just change the class names: fa-solid fa-heart, fa-brands fa-instagram, fa-regular fa-address-book.
<li>
<a href="https://www.facebook.com/" target="_blank">
<i class="fa-brands fa-facebook"></i>
</a>
</li>More information about FontAwesome you can find on official documentation website - FontAwesome Docs.
05
Punchy covers almost all platforms design requirements for favicon and icons:
Classic favicon:
<link rel="icon" href="img/favicon/favicon.ico" sizes="any">
Android Web App Manifest & Apple Touch Icon:
<link rel="apple-touch-icon" href="img/favicon/apple-touch-icon.png">
<link rel="manifest" href="img/favicon/manifest.webmanifest">
Universal SVG Icon for All Sizes ang Dark & Light Browser Color Themes:
<link rel="icon" href="img/favicon/icon.svg" type="image/svg+xml">
Facebook Metadata:
<!-- Facebook Metadata Start -->
<meta property="og:image:height" content="1200">
<meta property="og:image:width" content="1200">
<meta property="og:title" content="Punchy - Coming Soon and Landing Page Template with Morphing Effects">
<meta property="og:description" content="Punchy - awesome coming soon template to kick-start your project. Bright colors, cool morphing shapes and transitions,
animated headlines and much more - Punchy coming soon and landing page template has all you need to impress your clients at first sight!">
<meta property="og:url" content="http://mixdesign.club/themeforest/punchy/">
<meta property="og:image" content="http://mixdesign.club/themeforest/punchy/favicon/og-image.jpg">
<!-- Facebook Metadata End -->
You can use Punchy favicon as an example or generate new one with Favicon Generator or any other favicon generator by your needs.
06
Punchy template comes with easy-to-customize page elements. You can choose from 12 redy-to-use demo files, 2 countdown types, 3 homescreen layouts, various backgrounds and much more.
Loader will hide contents of your site until it's fully loaded.
Punchy template comes with complex loader which contains animated slogan and SVG morphing transition.
If you want to customize or remove loader, find this code in *.html file:
<!-- Loader Start -->
<div class="loader">
<!-- Loader Content Wrapper Start -->
<div class="loader__content">
<!-- Loader Logo Start -->
<div class="loader__container">
...
</div>
<!-- Loader Logo End -->
<!-- Loader Content Start -->
<div class="loader-content">
...
</div>
<!-- Loader Content End -->
</div>
<!-- Loader Content Wrapper Start -->
<div class="loader__background"></div>
<!-- Loader Morphing Shape Start -->
<div class="loader__shape">
<svg class="loader-transition-shape" width="100%" height="100%" viewBox="0 0 1440 800" preserveAspectRatio="none">
<path class="loader-morphing-path" d="M-22.4-87.7c-8.3,95.9,56.9,71.1,216.6,79c189.3,9.4,264.6-2.6,431.3-0.8c187.6,2,331.6-9.3,528.2-0.2c443.7,20.5,435.1-61.8,368.6-188.1C1455.9-324.1,34.5-746.7-22.4-87.7z"/>
</svg>
</div>
<!-- Loader Morphing Shape End -->
</div>
<!-- Loader End -->
Loader styles are included in the head tag:
<!-- Template Styles Start -->
<link rel="stylesheet" type="text/css" href="css/loaders/loader.css">
...
<!-- Template Styles End -->
For this feature we used
typed.js
plugin. You can easily change slogan text and type speed in
*.html
file and
punchy-custom.js
file. To change the slogan text, you need to find this code in
div class="loader"
and replace the text with your own (if you don't want to use slogan, just remove this part of code):
<!-- Loader Content Start -->
<div class="loader-content">
<div class="content">
<div class="loader__slogan">
<!-- Put Your Slogan Here! -->
<div id="slogan-strings">
<p>Your Awesome Slogan Here</p>
</div>
<span id="slogan"></span>
</div>
</div>
</div>
<!-- Loader Content End -->
You can find slogan settings (like type speed) in custom.js file:
var typedLoader = new Typed('#slogan', {
stringsElement: '#slogan-strings',
typeSpeed: 40,
onComplete: function(self) {
...
},
});
Visit Typed.js plugin site for more details and settings - mattboldt.com/demos/typed-js.
The logo container is located in the main section of the template - section class="section fp-auto-height-responsive main".
<!-- Main Section Start -->
<div class="section fp-auto-height-responsive main" data-anchor="main">
...
<!-- Logo Start -->
<div class="main__logo">
<!-- Your Logo Here -->
<img src="img/logo.svg" alt="Punchy - Coming Soon and Landing Page Template with Morphing Effects">
</div>
<!-- Logo Start -->
...
</div>
<!-- Main Section End -->You can use SVG, PNG or JPG image for logo. If you are using SVG, create PNG fallback image for old browsers. It'll be replaced automatically if needed.
All images used in the Punchy template live demo are just for preview purpose only and they are not included in main download files. You easily can find all images on unsplash.com or pexels.com. We are using placeholders from placeholder.com instead of real images. You can easily replace placeholder URL with a path to your image like img/yourimage.jpg.
All tmplate background images you can replace in the main.css file:
/* ------------------------------------------------*/
/* Template Backgrounds Start */
/* ------------------------------------------------*/
.media-image-1 {
background-image: url("http://via.placeholder.com/1200x1200");
}
...
/* ------------------------------------------------*/
/* Template Backgrounds End */
/* ------------------------------------------------*/All morphing objects in this template, including homescreen illustration, are implemented via Anime.js plugin.
To place your own image, first you'll need to crop it to proper size - 1500x1242 pixels. This is nessesary for image to fit well in SVG morphing object.
Then put your cropped image in the img folder. Next you'll need to find this part of code in the *.html file:
<svg class="home-svg-1" width="100%" height="100%" viewBox="0 0 1080 894" style="enable-background:new 0 0 1080 894;" xml:space="preserve">
...
<g transform="matrix(1 0 0 1 1.862645e-09 0)" style="clip-path:url(#home-morphing-clippath);">
<!-- Put Your Image Here in xlink:href="../path/to/image.jpg" Property -->
<image style="overflow:visible;" width="1500" height="1242" xlink:href="http://via.placeholder.com/1500x1242" transform="matrix(0.7198 0 0 0.7198 -2.581610e-02 -0.3868)"></image>
</g>
...
</svg>
In the image tag find xlink:href="http://via.placeholder.com/1500x1242" property and replace
the placeholder with your image like this - xlink:href="img/path/to/image.jpg".
If you want to change morphing animation properties, like duration and easing, open custom.js file and go to Homescreen Morphing Objectssection.
Done! Now you have your own image in the morphing path. Visit Anime.js documentation page for more details and settings - animejs.com/documentation.
There are a few more SVG morphing objects in Punchy template:
All morphing objects are implemented via
Anime.js plugin. You can easily customize easing, duration and other settings in custom.js file.
Just find Homescreen Morphing Objects and Inner Sections Morphing Objects sections. For example, Bottom morphing path:
// Bottom morphing path
var morphing = anime({
targets: '#bottom-path',
d: [
{ value: 'M0,200c0,0-14-59,12-57s43,44,74,42s66-56,123-55s25,53,101,44s80-57,153-62s176.5,39.5,223.5,46.5S796,129,800,100c0,54,0,100,0,100H0z' },
{ value: 'M0,200c0,0,12-57,38-55s28,16,59,14s54,29,111,30s80-70,156-79s114,73,187,68s88.5-26.5,135.5-19.5S796,129,800,100c0,54,0,100,0,100H0z' },
{ value: 'M0,200c0,0,12-57,38-55s28,40,59,38s68-78,125-77s72,58,148,49s106,38,179,33s90.5-36.5,137.5-29.5S796,129,800,100c0,54,0,100,0,100H0z' },
{ value: 'M0,200c0,0,9.5-25.5,35.5-23.5s31,18,62,16s58-33,115-32s90,33,166,24s99-80,172-85s89,52,136,59S796,129,800,100c0,54,0,100,0,100H0z' },
],
easing: 'easeOutQuad',
duration: 9000,
loop: true,
autoplay: true
});
Visit Anime.js documentation page for more details and settings - animejs.com/documentation
Punchy template is provided with responsive navigation menu. This menu uses data-menuanchor
property by
FullPage plugin.
Mobile view:
Desktop view:
<!-- Navigation Start -->
<nav>
<ul id="navigation" class="navigation">
<li data-menuanchor="main">
<a href="#main">Home</a>
</li>
<li data-menuanchor="about">
<a href="#about">About</a>
</li>
<li data-menuanchor="features">
<a href="#features">Features</a>
</li>
<li data-menuanchor="portfolio">
<a href="#portfolio">Portfolio</a>
</li>
<li data-menuanchor="contact">
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
<!-- Navigation End -->
Punchy template comes with 3 beautifully designed layouts with unique morphing objects and various animated backgrounds. Backgrouds settings you can find in Animated Backgrounds section of this file.
1. Homescreen with morphing shapes animation. Beautifully designed layout with middle size animated headline and morphing shapes. Impress your clients at first sight! Animated headline settings you can find in the Typed.js section of this file. Morphing objects settings you can find in Morphing Objects section of this file.
Replace this headline demo text with your own:
<!-- Main Headline Start -->
<div class="headline">
<!-- Animated Headline Start -->
<h1 class="animated-headline">
<span id="typed-strings">
<b>Creative</b>
<b>Strategy</b>
<b>Modern</b>
</span>
<span id="typed"></span>
<br>
<span class="additional-text">solutions</span>
</h1>
<!-- Animated Headline End -->
<span class="headline__divider"></span>
<p class="headline__text">We are preparing something amazing and exciting for you. Special surprise for our subscribers only.</p>
<div class="headline__btnholder">
<a href="#0" class="btn btn-light" id="notify-trigger">
<span class="btn-caption">Notify me</span>
<i class="fa-solid fa-paper-plane"></i>
</a>
<a href="#about" class="btn btn-outline-light">
<span class="btn-caption">Explore</span>
<i class="fa-solid fa-chevron-right"></i>
</a>
</div>
</div>
<!-- Main Headline End -->2. Fullscreen layout with centered headline and various backgrounds. Animated backgrounds settings you can find in Animated Backgrounds section of this file. Morphing objects settings you can find in Morphing Objects section of this file.
Replace this headline demo text with your own:
<!-- Main Headline Start -->
<div class="headline fullscreen">
<h1>Creative solutions</h1>
<span class="headline__divider"></span>
<p class="headline__text long">We are preparing something amazing and exciting for you. Special surprise for our subscribers only.</p>
<div class="headline__btnholder">
<a href="#0" class="btn btn-light" id="notify-trigger">
<span class="btn-caption">Notify me</span>
<i class="fa-solid fa-paper-plane"></i>
</a>
<a href="#about" class="btn btn-outline-light">
<span class="btn-caption">Explore</span>
<i class="fa-solid fa-chevron-right"></i>
</a>
</div>
</div>
<!-- Main Headline End -->3. Split layout with medium headline and various backgrounds. Animated backgrounds settings you can find in Animated Backgrounds section of this file. Morphing objects settings you can find in Morphing Objects section of this file.
Replace this headline demo text with your own:
<!-- Main Headline Start -->
<div class="headline fullscreen">
<h1>Creative solutions</h1>
<span class="headline__divider"></span>
<p class="headline__text long">We are preparing something amazing and exciting for you. Special surprise for our subscribers only.</p>
<div class="headline__btnholder">
<a href="#0" class="btn btn-light" id="notify-trigger">
<span class="btn-caption">Notify me</span>
<i class="fa-solid fa-paper-plane"></i>
</a>
<a href="#about" class="btn btn-outline-light">
<span class="btn-caption">Explore</span>
<i class="fa-solid fa-chevron-right"></i>
</a>
</div>
</div>
<!-- Main Headline End -->07
FullPage.js is a simple and easy to use library to create fullscreen scrolling websites (also known as single page websites or onepage sites). It allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site.
Punchy comes with two layout types - fullpage and normal scroll - with different fullpage.js plugin settings:
Fullpage Layout
You can find fullpage layout settings in custom.js file:
if (fullpage.length) {
fullpage.fullpage({
anchors: ['main', 'about', 'features', 'portfolio', 'blockquote', 'contact'],
menu: '#menu',
responsiveWidth: 1200,
navigation: false,
verticalCentered: false,
afterResponsive: function(isResponsive) {}
});
};
Change everything you want using plugin documentation.
Normal Scroll Layout
For normal scroll layout we also used fullpage.js plugin, but with different settings. You can find this settings in the custom.js file:
if (fullpageNormalScroll.length) {
fullpageNormalScroll.fullpage({
anchors: ['main', 'about', 'features', 'blockquote', 'portfolio', 'contact'],
menu: '#menu',
responsiveWidth: 1183,
navigation: false,
autoScrolling: false,
fitToSection: false,
verticalCentered: false,
loopBottom: false,
});
};
Visit Fullpage.js site for more examples and settings - alvarotrigo.com/fullPage
All plugin documentation you can find on github page - github.com/alvarotrigo/fullPage.js
We used Typed.js plugin for animated headline feature. To customize an animated headline, you need to find the following markup in the main section of the *.html file and change the content of <b> tags:
<!-- Animated Headline Start -->
<h1 class="animated-headline">
<span id="typed-strings">
<b>Creative</b>
<b>Strategy</b>
<b>Modern</b>
</span>
<span id="typed"></span>
<br>
<span class="additional-text">solutions</span>
</h1>
<!-- Animated Headline End -->You can find headline settings (like type speed) in custom.js file:
if(animatedHeadline.length){
var typed = new Typed('#typed', {
stringsElement: '#typed-strings',
loop: true,
typeSpeed: 80,
backSpeed: 30,
backDelay: 1600
});
}Visit Typed.js plugin website for more details and settings - mattboldt.com/demos/typed-js
Punchy template comes with two countdown types - full countdown and days only countdown. You can choose the one you like!
#countdown
#countdown-large
Punchy template comes with KBW Countdown Plugin. This plugin can be tricky to set up, but it is very flexible and has a lot of features.
For more details you can see documentation reference page: keith-wood.name/countdownRef.html or see a minimal page with basic settings: keith-wood.name/countdownBasics.html. In our case we are using UTCDate function. (You can also find this function in documentation reference page):
$.countdown.UTCDate(tz, year, month, day, hours, mins, secs, ms)
tz
- timezone offset, either in hours or minutes, from GMT, for example, Brisbane, Australia, would be +10 or +600;
year
- local year;
month
- local month (0 to 11);
day
- local day in the month;
hours
- local hour;
mins
- local minute;
secs
- local second;
ms
- local millisecond.
So here: countdown.UTCDate(10, 2022, 11, 22)
Find the Load Scripts section at the end of <body> and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/custom.js"></script>
...
<!-- Load Scripts End-->
Setting your own date for countdown script can be done in custom.js file in js folder:
$('#countdown').countdown({until: $.countdown.UTCDate(+10, 2022, 12, 19), format: 'D'});
Visit KBW Countdown site for more details and settings - keith-wood.name/countdown.html
Portfolio gallery is made using PhotoSwipe JavaScript Gallery.
This is an example for one portfolio item, just duplicate it to add new pictures or fill it with your content:
<!-- gallery single item -->
<figure class="col-12 col-sm-6 my-gallery__item" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="http://via.placeholder.com/1200x900" data-image="http://via.placeholder.com/1200x900" class="my-gallery__link" itemprop="contentUrl" data-size="1200x900">
<img src="http://via.placeholder.com/1200x900" class="my-gallery__image" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption class="my-gallery__description" itemprop="caption description">
<h4>Paint Strokes
<small>Branding</small>
</h4>
<p>Mauris porttitor lobortis ligula, quis molestie lorem scelerisque eu. Morbi aliquam enim odio, a mollis ipsum tristique eu.</p>
</figcaption>
</figure>
JavaScript files that have to be included:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
<script src="js/gallery-init.js"></script>
...
<!-- Load Scripts End-->More information about PhotoSwipe Gallery you can find in PhotoSwipe Documentation.
08
All backgrounds CSS styles are сompiled in plugins.css file so you don't need to add any CSS files.
To provide this effect we use Vegas jQuery Plugin . Make sure you have <div id="bgndKenburns"> or <div id="bgndKenburnsFull"> in *.html file:
<!-- Background Effects Start -->
<div id="bgndKenburns"></div>
<!-- Background Effects End -->Find the Load Scripts section at the end of <body> and make sure that all the necessary js files are added in the following order:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/custom.js"></script>
...
<!-- Load Scripts End-->To replace or add images to the slideshow, find the custom.js file in js folder and make the necessary changes to the slides array:
$('#bgndKenburns').vegas({
...
slides: [
{ src: '../img/example-slide-1.jpg' },
{ src: '../img/example-slide-2.jpg' },
{ src: '../img/example-slide-3.jpg' }
],
...
});More information about Vegas settings you can find in the official documentation - vegas.jaysalvat.com/documentation
To provide self-hosted (local) video background feature we use HTML5 <video> tag. Aso we used <source> property with 3 video formats to maximize browser support:
<!-- Background Effect Start -->
<div class="video-background">
<video id="main-video" preload="auto" autoplay loop muted="muted" poster="http://via.placeholder.com/1000x1200">
<source type="video/mp4" src="video/video.mp4">
<source type="video/webm" src="video/video.webm">
<source type="video/ogv" src="video/video.ogv">
</video>
</div>
<!-- Background Effect End -->You can use online service to convert your video: Online Uniconverter or any other similar applicaton.
Please note, if you'll not use muted property of the <video> tag, your video will not start automatically in some browsers.
09
Punchy template is provided with 2 form types:
This active subscribe form will save e-mails to Mailchimp list.
<!-- Notify Contact Form Start-->
<form id="notify-form" class="form form-dark notify-form">
<input class="input margin-s" type="email" placeholder="Email Adress*" required>
<span class="inputs-description">*Required fields</span>
<button class="btn btn-dark" type="submit">
<span class="btn-caption">Send</span>
<i class="fa-solid fa-paper-plane"></i>
</button>
</form>
<!-- Notify Contact Form End-->JavaScript files that have to be included:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/custom.js"></script>
...
<!-- Load Scripts End-->Follow these steps to get Mailchimp list URL:
Audience section.
https:// if it is not included with MailChimp list URL.Open custom.js file from js folder. Just replace our Mailchimp form action URL with your Mailchimp list URL:
$('.notify-form').ajaxChimp({
callback: mailchimpCallback,
// Replace this Mailchimp form action URL with your Mailchimp list URL
url: 'https://besaba.us10.list-manage.com/subscribe/post?u=e8d650c0df90e716c22ae4778&id=54a7906900'
});Done! Now you can save emails to your MailChimp Audience List!
Punchy template has 2 integrated ajax contact forms:
Write a Line Form
Contact Us Form
All these forms have the same settings. It's very easy to set up this forms to receive feedback on your e-mail:
mail.php file is added to the root directory of your project.<form> tag with tags with id="writealine-form" or id="contact-form" in the *.html file. <!-- Write a Line Form Start -->
<form class="form writealine-form form-dark" id="writealine-form">
<!-- Hidden Required Fields -->
<input type="hidden" name="project_name" value="Punchy - Classy Coming Soon and Landing Page Template">
<input type="hidden" name="admin_email" value="support@mixdesign.club">
<input type="hidden" name="form_subject" value="Write a Line Form Message">
<!-- END Hidden Required Fields-->
...
</form>
<!-- Write a Line Form End -->JavaScript files that have to be included:
<!-- Load Scripts Start-->
<script src="js/libs.min.js"></script>
...
<script src="js/custom.js"></script>
...
<!-- Load Scripts End-->Done! Now you can receive messages on your e-mail.
10
If you want to totally customize Punchy, you can use our all-inclusive PunchyGULP template. PunchyGULP includes Bootstrap 5 Grid, Gulp, Sass, Bourbon, Autoprefixer, Browsersync, Clean-CSS, CSS Beautify, Uglify, and other packages for efficient and comfortable work.
PunchyGULP requires node, npm and git.
Install Node Modules: npm i
Run PunchyGULP: gulp
app directory;sass directory;dist folder is a production folder. It contains ready project with optimized HTML, CSS, JS and images.gulp: run default gulp task for web development;
build: build project to dist folder;
clearcache: clear all gulp cache.
If you have any questions about PunchyGULP, you can email us on support@mixdesign.club.
11
12