Thank you so much for having chosen MOON!

Several weeks have been necessary to build this template for having a perfect layout on every screen, an advanced design and the last trends coupled with an accurate coding.
I would be very grateful if you could rate my item at this link with 5 stars and leave your feedback, this is very important for me, Thanks! :-)

If you have any questions, feel free to email me via my user page with the contact form Here
I try to answer as soon as possible, 7/7 and almost 24/24!
Time in my country :
During your customization, I advise you to be connected to Internet for the correct running of jQuery
All the lines of style written in this document are the lines of the CSS files. The line numbers for the SASS users are almost the same, thanks for your comprehension.

Did you know?
The licence you purchased allows you to use MOON on one domain.
A single licence is needed for each time you use MOON on an other website.
Thanks a lot for taking this point in consideration, allowing me to keep supporting and releasing new updates.



How To Install MOON Via FTP :
Step 1 - Log into your hosting space via an FTP software (Filezilla for example).
Step 2 - Unzip your Download Pack file and open the extracted MOON template folder.
Step 3 - Upload the HTML file corresponding to the variant of your choice along with all directories (css,js,php,img) like the structure that they appear in your MOON template folder. Then, the HTML file should reside in the root directory, and all other files should reside inside their associated folder.

Used as solid base of this template, the Fullpage plugin created by Alvaro Trigo is coming from here.


How looks the structure?

The first section must have the active class.
Here is a screenshot showing you how the core of your page must be.

<!-- START - FULLPAGE -->
<div id="fullpage">

    <!-- HOME SECTION -->
    <div class="section active" id="section0">

        ...

    </div>

    <!-- ABOUT SECTION -->
    <div class="section" id="section1">

        ...

    </div>

    <!-- CONTACT SECTION -->
    <div class="section" id="section2">

        ...

    </div>
</div>
<!-- END - FULLPAGE -->

The plugin is fired in the main.js file.
You will find the following code used to start the plugin, display the menu and the anchors.
Just type how many anchors you have and the name of them.

$("#fullpage").fullpage({
    anchors: "123".split(""),
    navigationTooltips: "Home About Contact".split(" "),
    showActiveTooltip: !1,
    menu: "#menu",
    css3: !0,
    scrollingSpeed: 800,
    responsiveWidth: 992
});

Very simple one, just apply the colors you want in your style-(color).css file here:

.fp-section.color-1 {
  background: #263248 !important;
}

.fp-section.color-2 {
  background: #EFC94C !important;
}

.fp-section.color-3 {
  background: #DF5A49 !important;
}

This powerful plugin of Constellation effect is really easy to edit.
Specific color options and settings are in the file js/constellation.js from line 189, see below:

function init_plugin() {

   $('canvas').constellation({
        star: {
            color: 'rgba(255, 255, 255, .9)',
            width: 2
        },
        line: {
            color: 'rgba(255, 255, 255, .7)',
            width: 0.2
        },
        position: {
            x: 0, // This value will be overwritten at startup
            y: 0 // This value will be overwritten at startup
        },
        velocity: 0.1,
        length: 220,
        distance: 120,
        radius: 250,
        stars: []
   });
}



The background picture is added in your style-(color).css file:

#constellation {
  position: fixed;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/constellation.jpg") center center;
  background-size: cover;
}

Awesome gradient animation.
Specific color options and settings are in the file js/gradient.js, see below:

// Your colors - RGB Code
var colors = new Array(
  [62,35,255],
  [60,255,60],
  [255,35,98],
  [45,175,230],
  [255,0,255],
  [255,128,0]);

var step = 0;
//color table indices for: 
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.002;

We use VEGAS here to display nicely your image in the background.
Check the awesome official documentation of this plugin here for all the settings available.
Specific slide options and settings are in the file js/vegas.js, see the screenshot below.

$('#image').vegas({
    slides: [
        { src: 'img/back-1.jpg' }
    ],

    overlay: true,
});

Very clean mozaic animation.
Specific color options and settings are in the file js/mozaic.js, see below:

opts = {
  
  side: 15,
  picksParTick: 2,
  baseTime: 40,
  addedTime: 10,
  
  colors: [ 'rgba(41,217,194,alp)', 'rgba(189,242,113,alp)', 'rgba(255,255,166,alp)' ], // Colors for the dots
  
  addedAlpha: 20,
  strokeColor: 'rgb(47,41,51)', // Color for the dots's sides
  
  hueSpeed: .2,
  repaintAlpha: 1
},

...

ctx.fillStyle = 'rgba(47,41,51,alp)'.replace( 'alp', opts.repaintAlpha ); // Color for the background

This powerful plugin called Flat Surface Shader is really easy to edit.
Specific color options are in the html file, see the screenshot below:

<!-- Flat Surface Shader colors -->
<script>
    var ambient_value = '#1F222E'; // ambient color
    var diffuse_value = '#2B2D35'; // diffuse color
</script> 

VEGAS is a jQuery plugin which adds beautiful animated background slideshows to your page body or any of its elements. It works on IE9+, Safari, Firefox and Chrome.
Check the awesome official documentation of this plugin here for all the settings available.
Specific slide options and settings are in the file js/vegas.js, see the screenshot below.

$('#slideshow').vegas({
    slides: [
        { src: 'img/back-1.jpg' },
        { src: 'img/back-2.jpg' },
        { src: 'img/back-3.jpg' },
    ],

    // Delay beetween slides in milliseconds.
    delay: 5000,

    // Choose your transition effect (See the documentation provided in your download pack)
    transition: 'fade2',

    animation: 'random',

    overlay: true,
});

Great and smooth animation for your page.
Specific color options and settings are in the file js/space.js, see below:

E = [157, 97, 207], // Color of the bubbles
F = [255, 255, 255]; // Color of the small lines

...

a[0] = d.createRadialGradient(0.3 * c, 0.1 * f, 0, 0.3 * c, 0.1 * f, 0.9 * c);
a[0].addColorStop(0, "rgb(0, 26, 77)"); // Background gradient
a[0].addColorStop(1, "transparent");
d.translate(c, 0);
d.scale(-1, 1);
d.beginPath();
d.fillStyle = a[0];
d.fillRect(0, 0, c, f);
a[1] = d.createRadialGradient(0.1 * c, 0.1 * f, 0, 0.3 * c, 0.1 * f, c);
a[1].addColorStop(0, "rgb(0, 150, 240)"); // Background gradient
a[1].addColorStop(0.8, "transparent");
d.translate(c, 0);
d.scale(-1, 1);
d.beginPath();
d.fillStyle = a[1];
d.fillRect(0, 0, c, f);
a[2] = d.createRadialGradient(0.1 * c, 0.5 * f, 0, 0.1 * c, 0.5 * f, 0.5 * c);
a[2].addColorStop(0, "rgb(40, 20, 105)"); // Background gradient
a[2].addColorStop(1, "transparent");
d.beginPath();
d.fillStyle = a[2];
d.fillRect(0, 0, c, f);

Create a deep "Star Wars" environment for your page
You can edit the colors of the background and the stars.
Specific color options and settings are in the file js/starfield.js, see the screenshot below:

context.fillStyle = 'rgba(32,35,45,' + opacity + ')'; // Background's color
context.strokeStyle='rgb(241,231,192)'; // Star's color

This is a jQuery component that let you play a Youtube® movie as background of your HTML page.
Add easily your video with just your link in the HTML code, see the screenshot below.
For more options, please visit this page.

<!-- YouTube link -->
<a id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/Y5diIT7NASg',containment:'body',autoPlay:true, mute:false, startAt:0, stopAt:0, opacity:1}"></a>



The player doesn’t work as background for mobile devices due to the restriction policy adopted by all on managing multimedia files via javascript.
To solve this, instead of to have only the color of your body, I added a fullscreen slideshow with the pictures of your choice.
Set up this one at the top, in js/jquery.mb.YTPlayer.js, see the screenshot below.

$('body').vegas({
    slides: [
        { src: 'img/slide-1.jpg' },
        { src: 'img/slide-2.jpg' },
        { src: 'img/slide-3.jpg' },
    ],

    // Delay beetween slides in milliseconds.
    delay: 5000,

    // Chose your transition effect (See the documentation provided in your download pack)
    transition: 'fade'
});

1st solution : Mailchimp

Newsletter service

More than 12 million people and businesses around the world use MailChimp to create, send, and track email newsletters. Whether you're self-employed, you manage projects for clients, or you work for a Fortune 500 company, MailChimp has features and integrations that will suit your email marketing needs. More informations

For the configuration with Mailchimp, you must just to know your API Key and the ID of your list.

Be sure that the form created in your mailchimp dashboard is asking only the email address and not the name, surname or something else.



Find or Generate Your API Key
Users with Manager permissions can generate and view their own API keys. Users with Admin permissions can also see API keys for other account users.
Below, you'll learn how to grab an existing API key or generate a new one.

• Step 1 - Click your profile name to expand the Account Panel, and choose Account.
• Step 2 - Click the Extras drop-down menu and choose API keys.
• Step 3 - Copy an existing API key or click the Create A Key button.
• Step 4 - Name your key descriptively, so you know what application uses that key.



Find Your List ID
Each MailChimp list has a unique List ID that integrations, plugins, and widgets may require to connect and transfer subscriber data.
The List ID is generated by Mailchimp when the list is created and cannot be changed.

There are two ways to find the List ID for a MailChimp list.
From the Settings page
• Step 1 - Navigate to the Lists page.
• Step 2 - Click the drop-down menu next to the list you want to work with, and choose Settings.
• Step 3 - Scroll to find the unique List ID field. The string of letters and numbers is the list ID.

From the List Name and Defaults Page
• Step 1 - Navigate to the Lists page.
• Step 2 - Click the drop-down menu next to the list you want to work with, and choose Settings.
• Step 3 - Click List name & defaults.
• Step 4 - Find the List Name heading and look nearby for the List ID.
• Step 5 - Find List ID under List name heading



Final step

Open the file "notify-me.php" findable in the folder php/notify-me.php and fill up the API_KEY and LIST_ID fields.

// Set to "mailchimp" or "file"
$STORE_MODE = "mailchimp";

// MailChimp API Key findable in your Mailchimp's dashboard
$API_KEY =  "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-XX0";
             
// MailChimp List ID  findable in your Mailchimp's dashboard
$LIST_ID =  "XXXXXXXXXX";



2nd solution : File

Save the emails in a .txt file

Second solution, the save of the subscribers's emails in a txt file at the root of your server

Set up the file storage :
• Step 1 - Create a .txt file empty or use the file subscription-list.txt provided in your download pack.
• Step 2 - Upload the file at the root of your server
• Step 3 - Open the file "notify-me.php" findable in php/notify-me.php
• Step 4 - You have to fill up the fields and comment the Mailchimp settings as on the code below:

// Set to "mailchimp" or "file"
$STORE_MODE = "file";

// MailChimp API Key findable in your Mailchimp's dashboard
// $API_KEY =  "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-XX0";
             
// MailChimp List ID  findable in your Mailchimp's dashboard
// $LIST_ID =  "XXXXXXXXXX";
             
// After $_SERVER["DOCUMENT_ROOT"]." , write the path to your .txt to save the emails of the subscribers
$STORE_FILE = $_SERVER["DOCUMENT_ROOT"]."/subscription-list.txt";



3rd solution : Email

Receive in your inbox

Third solution, you can receive directly in your inbox, the subscribers's emails

Set up the email sending :
• Step 1 - Open notify-me-2.php findable in php/notify-me-2.php
• Step 2 - Rewrite your email and don't forget to change the path in your html, see the code examples below

$email_to = 'myemail@email.com'; // Replace by your email address

<form action="php/notify-me-2.php" id="notifyMe" method="POST">

Then you can edit the content about the email you will receive in your inbox in notify-me-2.php, see the code below.
I built up an elegant email body, this is why you will find some html and css in the next part of code.

$text = "
    <head>
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
    </head>

    <body style='font-family:Verdana;background:#f2f2f2;color:#606060;'>

        <style>
            h2 {
                color: #6534ff;
            }
            a {
                color: #FFFFFF;
                text-decoration: none;
            }
            p {
                line-height:1.5;
                font-size: 14px;
            }
        </style>

        <table cellpadding='0' width='100%' cellspacing='0' border='0'>
            <tr>
                <td>
                    <table cellpadding='0' cellspacing='0' border='0' align='center' width='100%' style='border-collapse:collapse;'>
                        <tr>
                            <td>

                                <div>
                                    <table cellpadding='0' cellspacing='0' border='0' align='center'  style='width: 100%;max-width:600px;background:#FFFFFF;margin:0 auto;border-radius:5px;padding:50px 30px'>
                                        <tr>
                                            <td width='100%' colspan='3' align='center' style='padding-bottom:10px;'>
                                                <div>
                                                    <h2 >Woohoo! 1 new subscriber</h2>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width='100'>&nbsp;</td>
                                            <td width='400' align='center' style='padding-bottom:5px;'>
                                                <div>
                                                    <p >One of your visitors has just subscribed to your Newsletter, here is their email address :</p>
                                                </div>
                                            </td>
                                            <td width='100'>&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td width='100'>&nbsp;</td>
                                            <td align='center' style='padding-top:25px;'>
                                                <table cellpadding='0' cellspacing='0' border='0' align='center' width='200' height='50'>
                                                    <tr>
                                                        <td bgcolor='#6534ff' align='center' style='border-radius:4px;padding:0 25px;color:#FFFFFF' height='50' width='auto'>
                                                            <div>
                                                                $email
                                                            </div>

                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width='100'>&nbsp;</td>
                                        </tr>
                                    </table>
                                </div>

                                <div style='margin-top:30px;text-align:center;color:#b3b3b3'>
                                    <p style='font-size:12px;'>2017-2020 ThemeHelite®, All Rights Reserved.</p>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>";
1st step

Set your email and the subject in the contact-me.php file.

$to_Email = 'myemail@email.com'; // Write your email here to receive the form submissions
$subject = 'New message from MOON'; // Write the subject you'll see in your inbox



2nd step

Edit several properties and text alerts for the contact form in the same file, contact-me.php, see the code below.

Alert messages

// PHP validation for the fields required
if(empty($_POST["userName"])) {
    $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Error on 1st field :<br>Name too short or not specified'));
    die($output);
}

if(!filter_var($_POST["userEmail"], FILTER_VALIDATE_EMAIL)) {
    $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Error on 2nd field :<br>Please enter a valid email address.'));
    die($output);
}

if(empty($_POST["userSubject"])) {
    $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Error on 3rd field :<br>Please select the reason of your message.'));
    die($output);
}

// Avoid too small message by changing the value of the minimum characters required. Here it's <20
if(strlen($_POST["userMessage"])<20) {
    $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Error on 4th field :<br>Too short message! Take your time and write a few words.'));
    die($output);
}



Validation messages


if(!$Mailsending) {
    
    //If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
    $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Oops! Looks like something went wrong<br>Please check your PHP mail configuration.'));
    die($output);
    
} else {
    $output = json_encode(array('type'=>'message', 'text' => '<span><i class="icon ion-checkmark-round"></i></span><strong>Hello '.$_POST["userName"] .'!</strong><br>Your message has been sent, we will get back to you asap !'));
    die($output);
}



Email's body you will receive in your inbox I built up an elegant email body, this is why you will find some html and css in the next part of code.

// Body of the Email received in your Inbox
$emailcontent = "
<head>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
</head>
<body style='font-family:Verdana;background:#f2f2f2;color:#606060;'>

    <style>
        h3 {
            font-weight: normal;
            color: #999999;
            margin-bottom: 0;
            font-size: 14px;
        }
        a , h2 {
            color: #6534ff;
        }
        p {
            margin-top: 5px;
            line-height:1.5;
            font-size: 14px;
        }
    </style>

    <table cellpadding='0' width='100%' cellspacing='0' border='0'>
        <tr>
            <td>
                <table cellpadding='0' cellspacing='0' border='0' align='center' width='100%' style='border-collapse:collapse;'>
                    <tr>
                        <td>

                            <div>
                                <table cellpadding='0' cellspacing='0' border='0' align='center'  style='width: 100%;max-width:600px;background:#FFFFFF;margin:0 auto;border-radius:5px;padding:50px 30px'>
                                    <tr>
                                        <td width='100%' colspan='3' align='left' style='padding-bottom:0;'>
                                            <div>
                                                <h2>New message</h2>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width='100%' align='left' style='padding-bottom:30px;'>
                                            <div>
                                                <p>Hello, you've just received a new message via the contact form on your website.</p>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width='100%' align='left' style='padding-bottom:20px;'>
                                            <div>
                                                <h3>From</h3>
                                                <p>$name</p>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width='100%' align='left' style='padding-bottom:20px;'>
                                            <div>
                                                <h3>Email Address</h3>
                                                <p>$email</p>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width='100%' align='left' style='padding-bottom:20px;'>
                                            <div>
                                                <h3>Subject</h3>
                                                <p>$reason</p>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width='100%' align='left' style='padding-bottom:20px;'>
                                            <div>
                                                <h3>Message</h3>
                                                <p>$message</p>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width='100%' align='left' style='padding-bottom:0px;'>
                                            <div>
                                                <h3>Wants to subscribe to your Newsletter?</h3>
                                                <p><strong>$newsletter</strong></p>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>

                            <div style='margin-top:30px;text-align:center;color:#b3b3b3'>
                                <p style='font-size:12px;'>2017-2020 ThemeHelite®, All Rights Reserved.</p>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>";



The 'From' address
As an example, the 'From' address should be set to something like 'noreply@yourdomain.com' in order to be based on the same domain as the form.
If you try to use a 'From' that’s not based on the domain on which your form resides, like :
$headers .= 'From: My website' . "\r\n"; the anti-spam could block the sending, but you can give a try.
If you do not know what to write in the 'From' field for your contact form, you may wish to contact your hosting provider for assistance.

// Proceed with PHP email
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type:text/html;charset=UTF-8' . "\r\n";
$headers .= 'From: MOON Template <noreply@yourdomain.com>' . "\r\n";
$headers .= 'Reply-To: '.$_POST["userEmail"]."\r\n";



PS : If you're getting some troubles to receive the form submissions, here are some possibilities that could block the sending :
• Check your spam folder
• Is PHP Mail() function active on your server?
• Try to change your email with a Gmail address
• Upgrade the PHP version running on your server to 5.5 (can be done in your hosting provider's panel or by their)

How to know if PHP Mail function is active on my server?
It’s quite possible PHP mail() function is either disabled or not configured properly on your server. An easy way to check if e-mail sending is working is using this code. It’s as simple as it gets, if this code doesn’t work no other will:

<?php
mail('you@yourmail.com','Test mail','The mail function is working!');
echo 'Mail sent!';
?>

• Save this code as mailtest.php
• change you@yourmail.com to your e-mail address
• upload mailtest.php to your server
• open mailtest.php in your browser (http://yourwebsite.com/mailtest.php)
• check your inbox to see if a test message arrived.

5 color chemes are already provided, you just have to edit the following line in your html for switching:

<!-- ============== Resources style ============== -->
<link rel="stylesheet" href="css/style-electric.css" />

Colors available:

href="css/style-electric.css"
href="css/style-blue.css"
href="css/style-yellow.css"
href="css/style-red.css"
href="css/style-green.css"

Documentation

Just below the nav on your left, you will find 4 useful links to learn or improve your knowledges in SASS, Bootstrap, Bourbon & IonIcons