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.
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:
To adjust the countdown timer you need to:
Here are the links to the images used throughout the template:
You can find your own images while checking out the following free online sources:
- 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>
- 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; }
.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; }
- 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 -->
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' } });
- 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; }
- 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 -->
<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 -->
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/
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
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" />
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:
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:
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!") }
function cformSuccess() { $("#ContactForm")[0].reset(); window.location.href = "https://yourlinkhere.com"; }
Support is taken very seriously and is offered via email lucian@inovatik.com for 12 months from the purchase date.