Documentation

RESERVE - HTML Coming Soon V2

Thank you so much for purchasing our item from Themeforest.

If you have any questions that are beyond the scope of this help file (Themeforest Buyers), Please contact us via Support Tab.

Installation

Follow the steps below to setup your site template:

1. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server (that support PHP) using FTP (suggested FTP client Filezilla) or localhost in order to use it on your website and of course after your edits.
2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
   • html - Contains all of the assets referenced
     • css - Stylesheet files
     • img - Images files
     • js - Javacript files
     • phpmailer - Php files for the forms
     • video - Video files
   • html/index.html - Homepage

CSS Structure

The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css or play with the scss files included.
We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply.
Below how the file is organized:

1. SITE STRUCTURE and TYPOGRAPHY
2. FORMS
3. COMMON
4. MEDIA QUERIES

Common settings/edits

If you need a little help editing the template, check out Tuts+ tutorial How to Customize an HTML Template.

Change the logo

To change the logo, simply use your PNG24 file or better SVG format. Below how is coded:

<img src="img/logo.png" alt=""  width="80" height="70">

Super Slides settings

On footer page you can change the default settings. To change the opacity please look for the class "ul.slides-container li img" in style.css.

$('#slides').superslides({
    	    play: 5000,
    	    animation_speed: 800,
    	    animation: 'fade'
    	});

Ken Burns Slider settings

On footer page you can change the default settings:

$('body').vegas({
            slides: [
                { src: 'img/slide_1.jpg' },
                { src: 'img/slide_2.jpg' },
                { src: 'img/slide_3.jpg' }
            ],
            overlay: true,
                transition: 'fade2',
                animation: 'kenburnsUpRight',
                transitionDuration: 1000,
                delay: 10000,
                animationDuration: 30000
        });

Video Background Settings self hosted

You should create ogv and webm format to be sure to have maximum browsers and devices compatibility. To change the opacity please look for the class "jarallax_element" in style.css.

<div class="jarallax jarallax_element" 
data-jarallax-video="mp4:./video/mountains.mp4,webm:./video/mountains.webm,ogv:./video/mountains.ogv">
</div>

Video Backround Youtube and Vimeo

Just change the link. To change the opacity please look for the class "jarallax_element" in style.css.

<div class="jarallax jarallax_element" data-jarallax-video="https://vimeo.com/360765915"></div>

Count Down Settings

Open js/functions.js and change with your date and hour:

var target = new Date("July 15 2023 13:30:00 GMT+0100"); //replace with YOUR DATE

Datepicker doc

Please refer to this documentation or change the settings in js/functions.js.

PHP files

Wizard forms

Below the versions available and a short explanation of the differences:

// PHPmailer text/html > phpmailer/reservation_phpmailer.php
// PHPmailer text/html SMPT > phpmailer/reservation_phpmailer_smpt.php
// PHPmailer with html template > phpmailer/reservation_phpmailer_template.php
// PHPmailer with html template SMTP> phpmailer/reservation_phpmailer_template_smpt.php

PHPmailer text/html: This version send an email with basic html support on text.

PHPmailer text/html SMPT: This version is like above but with SMTP Authentication. We suggest to contact your host/ISP to get the correct info to set this feature (usally Name, Username, Password, Host name, Port, Encryption if required)

PHPmailer with html template: This version is without SMTP and send the message inside an HTML template, (template-email.html) for the main message and for the confirmation page sent to the use who fill the form (confirm.html).

PHPmailer with html template SMTP: This version is like above but with SMTP Authentication.

Common settings (edit recipients)

$mail->setFrom('info@yourdomain.com', 'Message from Reserve); // Email Address and Name FROM
$mail->addAddress('jhon@yourdomain.com', 'Jhon Doe'); // Email Address and Name TO - Name is optional
$mail->addReplyTo('noreply@yourdomain.com', Message from Reserve); // Email Address and Name NOREPLY
$mail->Subject = Message from Reserve;  // Email Subject   

SMTP settings (contact your hosting provider, usually need only Host, Username and Password)

$mail->Host       = 'hostname'; // Set the SMTP server to send through
$mail->Username   = 'username'; // SMTP username
$mail->Password   = 'password'; // SMTP password
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // Enable TLS encryption; `PHPMailer::ENCRYPTION_SMTPS` encouraged
$mail->Port       = 587; // TCP port to connect to, use 465 for `PHPMailer::ENCRYPTION_SMTPS` above  

NOTE ABOUT THE HTML EMAIL TEMPLATE
The email template has been tested on various email clients (desktop and mobiles). But, maybe you know, it's quite impossible to provide an email template that looks equal on all email clients due they have different supports. The email template degrade nicely to maxime the compatibility. Email Template design it's beyond the scope of this item and support, you can implement with your own or drive to a most simple method to send the email (without email template).

Edit the email template with your images
Put your logo in the images folder. To reduce spam issue and email weight, images must be upload on your online site/server and the html looks like the example below:
<img src="http://www.yourdomain/phpmailer/images/logo.png" border="0" width="54" height="60" alt="" />

Source & Credits

For the js listed below, you can find more documentation on the relative sites.

• Twitter Bootstrap
• Bootstrap Icons
• Jquery
• Owl carousel
• Datepicker
• Jquery validation
• PHPMailer
• Magnific popup

Images are not included.

Support

If this documentation doesn't answer your questions, post via Item Support Tab

We are located in GMT +1 time zone and we answer all questions within 24-48 hours working days. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Don’t forget to Rate this template

More Templates

Checkout Our Below Premium Templates

Our Portfolio