INTRODUCTION

Hello and thank you for using Argo Training Course HTML Landing Page Template. Argo is an HTML landing page template built with Bootstrap featuring countdown timer, text slider for testimonials, image slider for gallery, details lightbox for instructor information, statistics numbers for important values, extra pages: course details, terms conditions, privacy policy, working sign up and contact form.

Built with Bootstrap 4, HTML5, CSS3, PHP and JavaScript it will help you achieve your online marketing goals in a beautiful and efficient manner.

Frameworks and toolkits used: Bootstrap 4, The Final Countdown, jQuery Easing, Magnific Popup, jQuery, Popper, Swiper, Validator

You can edit the template's Html, Css, Php, Js files with your preferred text and code editor: Notepad++, Visual Code, Sublime or any other...

For image editing you can use Adobe Photoshop or any other graphic editor of your choice.


FILES STRUCTURE

Documentation - is the folder of this help file.
Web - contains the html, css, js and php files of the template.

Web folder includes index.html file which you will use to open the template. Besides index.html, you will also find the following folders:

  • Css - Bootstrap, Font Awesome, Magnific Popup, Swiper and the template's custom stylesheet styles.css
  • Images - Images used throughout the template including the favicon and logo
  • Js - JavaScript files for Bootstrap, The Final Countdown, jQuery Easing, Magnific Popup, jQuery, Popper, Swiper, Validator and Argo's custom scripts: scripts.js
  • Php - PHP script files for the contact forms
  • Webfonts - Font Awesome files


COUNTDOWN TIMER

To adjust the countdown timer you need to:

  • Open scripts/scripts.js and find the following section: /* Countdown Timer - The Final Countdown */
  • Here in the following line of code: $('#clock').countdown('2019/12/27 08:50:56')
  • You can adjust the end date and time of the timer by replacing the default values with your new ones
  • E.g. instead of countdown('2019/12/27 08:50:56') you can write countdown('2019/11/22 10:00:00')
  • The date format is Year/Month/Day Hour:Minute:Second


IMAGES

Image Links

Here are the links to the images used throughout the template:

Image Resources

You can find your own images while checking out the following free online sources:

Changing The Logo

- Place your image file in the images folder
- Open for editing index.html
- Find the Navigation section
- Here find this line of code:

<a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>  

- And replace logo.svg with your new file name
- Save the file and refresh the browser window to see the changes

Changing The Header Background Image

- The header background image is actually made up of two images, one for the mobile viewport without the pointy guy and one for the larger viewports with the pointy guy
- I am guessing you will be using one image and for that the steps are:
- Open for editing css/styles.css
- Find the Header section
- Here find this line of code:

.header {
	position: relative;
	background: linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/header-background-mobile.jpg') center center no-repeat;
	background-size: cover; 
}

- And replace header-background-mobile.jpg with your new file name
- Now find the /* Min-width width 1200px */ section
- Focus on the Header properties
- And delete the following lines of code
.header {
	background: linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/header-background.jpg') center center no-repeat;
	background-size: cover; 
}

- Now your initial image will appear in all viewports

Changing Images In The Details Slider

- Edit and save the images in the images folder
- Open for editing index.html
- Find the Details section
- Scroll a little bit until you reach the Image Slider section
- Here find these lines of code:

<div class="swiper-slide">
<a href="images/details-slide-1.jpg" class="popup-link" data-effect="fadeIn"><img class="img-fluid" src="images/details-slide-1.jpg" alt="alternative"></a>
</div> <!-- end of swiper-slide -->

- And replace details-slide-1.jpg with your new file name
- Repeat for each slide you need
- Save the file and refresh the browser window to see the changes
- For optimum results with the least amount of work I recommend using the same image size as the original in the Live Preview

Argo uses the Swiper plugin for the images slider. You can change settings like: time between slides, pause on hover, reactions to keyboard and others by visiting the plugins page: http://idangero.us/swiper/api/ and adding them to the Image Slider - Swiper section in js/scripts.js

/* Image Sldier - Swiper */
var imageSlider = new Swiper('.image-slider', {
	autoplay: {
		delay: 4000,
		disableOnInteraction: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	}
});

Changing Regular Section Background Image (e.g. Duration)

- Edit and save the image file in the images folder
- Open for editing css/styles.css
- Find the section you need for example Duration section
- Here focus on the following lines:

.basic-2 {
	position: relative;
	padding-top: 6.875rem;
	padding-bottom: 5rem;
	background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('../images/duration-background.jpg') center no-repeat;
	background-size: cover;
}

- And replace duration-background.jpg with your own file name
- For optimum results with the least amount of work I recommend using the same image size as the original in the Live Preview
- Save the file and refresh the browser window to see the changes

Changing The Colors For The Angle Frames

- If you change the background color for a section that has angle frames you need to also change the color of the angle frames accordingly
- For example let's say you changed the color of the Sign Up section to a dark blue with the color code #1b2e58
- Now to change the color of the angle frames you need to open index.html and find the Header section
- Here focus on the following lines:

<div class="frame-container">
	<svg class="top-frame-angle" id="Layer_8" data-name="Layer 8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 50"><defs><style>.cls-1{fill:#1e232e;}</style></defs><title>top-frame</title><polygon class="cls-1" points="0 50 0 0 1377.041 45.104 1920 0 1920 50 0 50"/></svg>
</div> <!-- end of frame-container -->

- And replace #1e232e with your own color code #1b2e58
- Now for the bottom frame scroll down to the Sign Up section and find the lines
<div class="frame-container">
	<svg class="bottom-frame-angle" id="Layer_3" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 50"><defs><style>.cls-1{fill:#1e232e;}</style></defs><title>bottom-frame</title><polygon class="cls-1" points="1920 0 1920 50 1377.041 4.932 0 50 0 0 1920 0"/></svg>
</div> <!-- end of frame-container -->

- Here repeat the previous operation and replace #1e232e with the new color #1b2e58
- Save the file and refresh the browser window to see the changes


ICONS

Font Awesome Icons

Argo uses Font Awesome icon font in many sections and elements.

To change one of the Font Awesome icons you can simply replace the classes that you'll find in index.html e.g. fa-rocket, fa-tv, fa-user-tah with the ones that you need from http://fontawesome.io/icons/

Social Media Icons

To change social media icons in the Footer section of the template, you need to:
- Open index.html from the template folder
- Find the section Social Media in the Footer:
- And replace fa-facebook, fa-twitter, and so on... with the classes name that you need from http://fontawesome.io/icons/ in the Brand Icons section
- Also don't forget to replace href="#your-link" with the link to your social page or account

Social Media Tip

If you want to control the way the posts look like when you share the landing page on social media (Facebook, Google+ and LinkedIn especially) don't forget to update the OG Meta Tags (OpenGraph) in the Head section of the index.html file.

<meta property="og:site_name" content="" /> <!-- website name -->
<meta property="og:site" content="" /> <!-- website link -->
<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
<meta property="og:type" content="article" />

You can check out this article courtesy of Engage Interactive


CONTACT FORMS

To receive emails with data from your visitors simply change the line $EmailTo = "yourname@domain.com"; to your email address in the php folder in the following files:

  • contactform-process.php
  • privacyform-process.php
  • signupform-process.php

Attention:The script only runs online (on a liver server with PHP support) so the forms will not work while the landing page is offline on your hard-drive

If you want to change input fields names, you will need to update them accordingly in the following files:

  • index.html, scripts.js and the php file from the php folder.

Setup A Redirect Page On Form Submit

To setup a redirect to a thank you page on form submit, you need to:
- Open js/scripts.js inside the template folder
- Find the following block of code in the form section

function cformSuccess() {
	$("#ContactForm")[0].reset();
	csubmitMSG(true, "Message Submitted!")
}

- And change it to:
function cformSuccess() {
	$("#ContactForm")[0].reset();
	window.location.href = "https://yourlinkhere.com";
}

- And replace inside the quotes https://yourlinkhere.com with your link


SUPPORT

Support is taken very seriously and is offered via email lucian@inovatik.com for 12 months from the purchase date.