Thank you so much for having chosen PURE!

More than 3 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.

How To Install PURE 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 PURE template folder.
Step 3 - Upload the HTML file corresponding to the variant of your choice along with all directories (css,js,php,img) in the structure that they appear in your download package. Then, the HTML file should reside in the root directory, and all other files should reside inside their associated folder.

A simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites or onepage sites).
Check the awesome official documentation of this plugin here for all the settings available.
You can set up the navigation tooltips/anchors in the main js file used by the variant of your choice (main-XXX.js), see the code below.

$('#fullpage').fullpage({
    navigation: true,
    navigationTooltips: ['Home', 'About', 'Services', 'Portfolio', 'Contact'],
    responsiveWidth: 1025
});

HTML structure looks like this :

<!-- +++ START - Fullpage sections +++ -->
<div id="fullpage">

    <!-- +++ START - Home +++ -->
    <div class="section" id="section0">

    </div>
    <!-- +++ END - Home +++ -->

    <!-- +++ START - About +++ -->
    <div class="section" id="section1">

    </div>
    <!-- +++ END - About +++ -->

    <!-- +++ START - Services +++ -->
    <div class="section" id="section2">

    </div>
    <!-- +++ END - Services +++ -->

    <!-- +++ START - Portfolio +++ -->
    <div class="section" id="section3">

    </div>
    <!-- +++ END - Portfolio +++ -->

    <!-- +++ START - Contact +++ -->
    <div class="section" id="section4">

    </div>
    <!-- +++ END - Contact +++ -->

</div>
<!-- +++ END - Fullpage sections +++ -->

If you want for example, add a new section, you have to create 1 new div with the correct id="sectionX", see the code below :

<!-- +++ START - Fullpage sections +++ -->
<div id="fullpage">

    ...

    <!-- +++ START - Contact +++ -->
    <div class="section" id="section4">

    </div>
    <!-- +++ END - Contact +++ -->

    <!-- +++ START - NEW SECTION +++ -->
    <div class="section" id="section5">

    </div>
    <!-- +++ END - NEW SECTION +++ -->

</div>
<!-- +++ END - Fullpage sections +++ -->

This version is using ScrollReveal, Easy scroll animations for web and mobile browsers.
Check the awesome official documentation of this plugin here for all the settings available.
The animated effect is set up in the js file called main-animated.js, see the code below :

var fooReveal = {
  delay    : 200,
  distance : '10rem',
  easing   : 'ease-in-out',
  duration : 400,
  scale    : 1.0,
  mobile   : false,
  reset    : false,
};

var fooInside = {
  delay    : 600,
  distance : '12rem',
  easing   : 'ease',
  mobile   : false
};

Fired up with this script part just above the previous one :

afterRender: function(){
    window.sr = ScrollReveal();
    sr.reveal('.foo', fooReveal);
    sr.reveal('.fooinside', fooInside);
},

Applied on html tag, the classes foo and fooinside create smooth appearing animations

This version is giving a simple scroll as the standard one. Using the fullPage plugin for keeping full height sections.
Done easily by a simple setting in the js file called main-normal-scroll.js, responsiveWidth with a high value, see the code below :

$('#fullpage').fullpage({
    navigation: true,
    navigationTooltips: ['Home', 'About', 'Services', 'Portfolio', 'Contact'],
    responsiveWidth: 9999
});

A simple plugin to create multi scrolling websites with two vertical scrolling panels.
Check the awesome official documentation of this plugin here for all the settings available.
You can set up the navigation tooltips/anchors in the js/main-multi-scroll.js file, see the code below.

$('#multi-div').multiscroll({
    loopTop: true,
    loopBottom: true,
    navigation: true,
    navigationTooltips: ['Home', 'About', 'Services', 'Portfolio', 'Contact'],
});

HTML structure looks like this :

<!-- +++ START - MultiScroll sections +++ -->
<div id="multi-div">

    <!-- OPEN - LEFT PART -->
    <div class="ms-left">

        <!-- +++ START - Home Left +++ -->
        <div class="ms-section" id="left1">

        </div>
        <!-- +++ END - Home Left +++ -->

        <!-- +++ START - About Left +++ -->
        <div class="ms-section" id="left2">

        </div>
        <!-- +++ END - About Left +++ -->

        <!-- +++ START - Services Left +++ -->
        <div class="ms-section" id="left3">

        </div>
        <!-- +++ END - Services Left +++ -->

        <!-- +++ START - Portfolio Left +++ -->
        <div class="ms-section" id="left4">

        </div>
        <!-- +++ END - Portfolio Left +++ -->

        <!-- +++ START - Contact Left +++ -->
        <div class="ms-section" id="left5">

        </div>
        <!-- +++ END - Contact Left +++ -->

    </div>
    <!-- CLOSE - LEFT PART -->

    <!-- OPEN - RIGHT PART -->
    <div class="ms-right" id="right-part">

        <!-- +++ START - Home Right +++ -->
        <div class="ms-section" id="right1">

        </div>
        <!-- +++ END - Home Right +++ -->

        <!-- +++ START - About Right +++ -->
        <div class="ms-section" id="right2">

        </div>
        <!-- +++ END - About Right +++ -->

        <!-- +++ START - Services Right +++ -->
        <div class="ms-section" id="right3">

        </div>
        <!-- +++ END - Services Right +++ -->

        <!-- +++ START - Portfolio Right +++ -->
        <div class="ms-section" id="right4">

        </div>
        <!-- +++ END - Portfolio Right +++ -->

        <!-- +++ START - Contact Right +++ -->
        <div class="ms-section" id="right5">

        </div>
        <!-- +++ END - Contact Right +++ -->

    </div>
    <!-- CLOSE - RIGHT PART -->

</div>
<!-- +++ END - MultiScroll sections +++ -->

If you want for example, add a new section, you have to create 2 div. One for the left part and an other one for the right with the correct id="left/rightX", see the code below :

<!-- +++ START - MultiScroll sections +++ -->
<div id="multi-div">

    <!-- OPEN - LEFT PART -->
    <div class="ms-left">

        ...

        <!-- +++ START - Contact Left +++ -->
        <div class="ms-section" id="left5">

        </div>
        <!-- +++ END - Contact Left +++ -->

        <!-- +++ START - NEW SECTION Left +++ -->
        <div class="ms-section" id="left6">

        </div>
        <!-- +++ END - NEW SECTION Left +++ -->

    </div>
    <!-- CLOSE - LEFT PART -->

    <!-- OPEN - RIGHT PART -->
    <div class="ms-right" id="right-part">

       ...

        <!-- +++ START - Contact Right +++ -->
        <div class="ms-section" id="right5">

        </div>
        <!-- +++ END - Contact Right +++ -->

        <!-- +++ START - NEW SECTION Right +++ -->
        <div class="ms-section" id="right6">

        </div>
        <!-- +++ END - NEW SECTION Right +++ -->

    </div>
    <!-- CLOSE - RIGHT PART -->

</div>
<!-- +++ END - MultiScroll sections +++ -->

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 code below.

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

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

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

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 code below.

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

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

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

    align:              'top',
    valign:             'right',
});

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

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

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

    align:              'top',
    valign:             'left',
});

Still using the VEGAS plugin, we can display elegant and fully responsive slideshow or image background on several sections.
Specific slide options and settings are in the file js/vegas.js or js/vegas-multiscroll.js, see the code below.

$('.slideshow-about').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'
});

$('.slideshow-services').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'
});

This is an Easy to use animated countdown javascript.
Set up your end date in the script part, at the bottom of your HTML, see the code below.

// Set up your end date just below
$('#clock').countdown('2018/10/24 15:30:30', function(event) {

Find the coordonates of a place easily with this website : http://www.gps-coordinates.net/
When you got your latitude and longitude, add the values in the js/map.js file on line 192, see the code below.

var locations = [
    ['<h6>Bondi Beach, East Coast</h6><p>This is where we are currently...</p>', 37.7749295, -122.41941550000001, 1],
    ['<h6>Coogee Beach, East Coast</h6><p>Opening Hours<br><i class="fa fa-clock-o"></i> 8:00 to 22:00</p>', 34.0522342, -118.2436849, 2],
    ['<h6>Manly Beach, East Coast</h6><p>Opening Hours<br><i class="fa fa-clock-o"></i> 6:00 to 14:00</p>', 24.1426408, -110.31275310000001, 3]
];

Also, don't forget to set up the center of your map, still in the same file, on line 9, see the code below.

// The latitude and longitude to center the map (always required)
var center = new google.maps.LatLng(32.715738, -117.16108380000003);

Link to your logo instead of the classic marker around the line 201, see the code below.

var image = 'img/logo-map.png';

I advise you to visit Snazzy Map for customizing your map ;-)

Photoswipe is a JavaScript image gallery for mobile and desktop.
Check out the official documentation here.
Here is the example for one item, just duplicate it to add new pictures, see the code below.

<!-- 1 -->
<figure class="col-xs-12 col-sm-6 col-lg-6" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">

    <a href="img/gallery-1.jpg" class="gallery-link small" data-image="img/gallery-1.jpg" itemprop="contentUrl" data-size="1920x1280">

        <img src="img/gallery-1.jpg" itemprop="thumbnail" alt="This is my work" class="img-responsive gallery-img small-square" />

    </a>

    <figcaption itemprop="caption description">

        <div class="photo-details">
        
            <h4>Get in the Game <small>Creative from Berlin</small></h4>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        </div>

    </figcaption>

</figure>

1st solution : Mailchimp

Newsletter service

More than 6 million people 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.

Get your API Key :
Step 1 - Click your profile name to open 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 - Be careful that your list asks just the email address, Lists > Signup forms > General forms > Build it. See the screenshot below.

Get your List ID :
Step 1 - Navigate to the Lists page on the top left of your dashboard.
Step 2 - Click the list's drop down menu and select Settings.
Step 3 - Click on List name & defaults to find the unique List ID for the list, see the screenshot below.

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 mail box

Third solution, you can receive directly in your mail box, 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">

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

$to_Email = 'myemail@email.com'; // Write your email here

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

Alert messages

// Anti-spam field, if the field is not empty, submission will be not proceeded. Let the spammers think that they got their message sent with a Thanks ;-)
if(!empty($_POST["userChecking"])) {
    $output = json_encode(array('type'=>'error', 'text' => '<i class="icon ion-checkmark-round"></i> Thanks for your submission'));
    die($output);
}

// PHP validation for the fields required
if(empty($_POST["userName"])) {
    $output = json_encode(array('type'=>'error', 'text' => '<i class="icon ion-close-round"></i> We are sorry but your name is too short or not specified.'));
    die($output);
}

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

// Phone number has been set to require at least 6 characters.
if(strlen($_POST["userPhone"])<6) {
    $output = json_encode(array('type'=>'error', 'text' => '<i class="icon ion-close-round"></i> Please enter a valid phone number.'));
    die($output);
}

// To avoid too small message, you can change the value of the minimum characters required. Here it's <20
if(strlen($_POST["userMessage"])<20) {
    $output = json_encode(array('type'=>'error', 'text' => '<i class="icon ion-close-round"></i> Too short message! Take your time and write a few words.'));
    die($output);
}

Email's body and validating messages

// Body of the Email received in your Mailbox
$emailcontent = 'Hey! You have received a new message from the visitor <strong>'.$_POST["userName"].'</strong><br/><br/>'. "\r\n" .
                'From the company (if provided) : <br/> <strong>'.$_POST["userCompany"].'</strong><br/><br/>'. "\r\n" .
                'Phone number : <br/> <strong>'.$_POST["userPhone"].'</strong><br/><br/>'. "\r\n" .
                'His message: <br/> <em>'.$_POST["userMessage"].'</em><br/><br/>'. "\r\n" .
                '<strong>Feel free to contact '.$_POST["userName"].' via email at : '.$_POST["userEmail"].'</strong>' . "\r\n" ;

$Mailsending = @mail($to_Email, $emailcontent, $headers);

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' => '<i class="icon ion-close-round"></i> Oops! Looks like something went wrong, please check your PHP mail configuration.'));
    die($output);
    
} else {
    $output = json_encode(array('type'=>'message', 'text' => '<i class="icon ion-checkmark-round"></i> <span class="name-success">Hello '.$_POST["userName"] .'</span>, Your message has been sent, we will get back to you asap !'));
    die($output);
}

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