To edit the 'Welcome Message', simply find the appropriate label <!-- intro TIME style start --> in the body of the HTML file.
Part to edit:
STYLE 1
[...]
<!-- intro TIME style start -->
[...]
<li>
<h3>
The Best Place
</h3>
</li>
<li>
<h3>
To Meet People
</h3>
</li>
[...]
<h1>
Life
</h1>
[...]
<div class="title-bottom-time">
It is coming
</div>
[...]<!-- intro TIME style end -->
[...]
STYLE 2
[...]
<!-- intro THE SEA style start -->
[...]
<li>
<h3>
The Best Place
</h3>
</li>
<li>
<h3>
To Meet People
</h3>
</li>
[...]
<h1>
Life
</h1>
[...]<span>It is coming</span>[...]
[...]<!-- intro THE SEA style end -->
[...]
To edit the 'Quotes', simply find the appropriate label <!-- quotes start --> in the body of the HTML file.
Part to edit:
[...]
<!-- quotes start -->
[...]
<li class="quote-text">Gripping...<br>
a heart-throbbing experience <span class="quote-signature">C. Eastwood</span>
</li>
<li class="quote-text">Dazzling...<br>
"Life" is triumphant <span class="quote-signature">R. Redford</span>
</li>
<li class="quote-text">Stylistically brash,<br>
pulsing with life <span class="quote-signature">K.W. Wong</span>
</li>
<li class="quote-text">Dizzy with a romantic spirit that has been<br>
missing from the cinema forever <span class="quote-signature">T. Scott</span>
</li>
[...]<!-- quotes end -->
[...]
To edit the 'About' page, simply find the appropriate label <!-- about page start --> in the body of the HTML file.
Part to edit:
[...]
<!-- about page start -->
[...]
<h4>
About
</h4>
[...]
<span class="quote-mark-l fa fa-quote-left"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque, est sed consequat
ornare, eros elit hendrerit risus, ac vestibulum ex quam sit amet ligula. Sed eleifend ex ac nisl ultricies fermentum eget nec orci. <span class=
"quote-mark-r fa fa-quote-right"></span>
[...]
<p>
Quisque eleifend bibendum risus id.
</p>
[...]
<p>
Quisque sit amet consequat magna. Praesent pulvinar vestibulum ligula, non ullamcorper diam accumsan et. Proin ullamcorper augue ac bibendum ornare. In
eget magna rutrum, tempor dolor pretium, vehicula libero. Proin consequat commodo lacus non finibus.
</p>
[...]
[...]
[...]<!-- about page end -->
[...]
To edit the 'Services' page, simply find the appropriate label <!-- services page start --> in the body of the HTML file.
Part to edit:
[...]
<!-- services page start -->
[...]
<h4>
Services
</h4>
[...]
<div class="quotations">
<span class="quote-mark-l fa fa-quote-left"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque, est sed consequat
ornare, eros elit hendrerit risus, ac vestibulum ex quam sit amet ligula. Sed eleifend ex ac nisl ultricies fermentum eget nec orci. <span class=
"quote-mark-r fa fa-quote-right"></span>
[...]
<li>
<h5>
Customer first
</h5>
<!-- services effect start -->
<div class="set-8">
<div class="hi-icon-wrap hi-icon-effect-8">
<a class="hi-icon hi-icon-services-1" href="#">Customer first</a>
</div>
</div><!-- services effect end -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</li>
<li>
<h5>
Quality first
</h5>
<!-- services effect start -->
<div class="set-8">
<div class="hi-icon-wrap hi-icon-effect-8">
<a class="hi-icon hi-icon-services-2" href="#">Quality first</a>
</div>
</div><!-- services effect end -->
<p>
Fusce scelerisque, est sed consequat ornare, eros elit hendrerit risus.
</p>
</li>
<li>
<h5>
Core Values
</h5>
<!-- services effect start -->
<div class="set-8">
<div class="hi-icon-wrap hi-icon-effect-8">
<a class="hi-icon hi-icon-services-3" href="#">Core values</a>
</div>
</div><!-- services effect end -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</li>
<li>
<h5>
Core Principles
</h5>
<!-- services effect start -->
<div class="set-8">
<div class="hi-icon-wrap hi-icon-effect-8">
<a class="hi-icon hi-icon-services-4" href="#">Core Pinciples</a>
</div>
</div><!-- services effect end -->
<p>
Fusce scelerisque, est sed consequat ornare, eros elit hendrerit risus.
</p>
</li>
[...]
[...]<!-- services page end -->
[...]
To edit the 'Photos' page, simply find the appropriate label <!-- photos page start --> in the body of the HTML file.
Part to edit:
[...]
<!-- photos page start -->
[...]
<h4>
Photos
</h4>
[...]
<!-- photo gallery start -->
<div class="photos-section">
<div class="photos-container">
<!-- photo 2 start -->
<a class="photo-gallery landscape popup-photo" href="img/photos/large/2.jpg">
<div class="photo-container">
<img alt="Photos" src="img/photos/small/2.jpg">
</div>
<div class="button-container centering-y">
<div class="button-zoom button-square">
+
</div>
</div></a><!-- photo 2 end -->
<!-- photo 3 start -->
<a class="photo-gallery landscape popup-photo" href="img/photos/large/3.jpg">
<div class="photo-container">
<img alt="Photos" src="img/photos/small/3.jpg">
</div>
<div class="button-container centering-y">
<div class="button-zoom button-square">
+
</div>
</div></a><!-- photo 3 end -->
<!-- photo 1 start -->
<a class="photo-gallery portrait popup-photo" href="img/photos/large/1.jpg">
<div class="photo-container">
<img alt="Photos" src="img/photos/small/1.jpg">
</div>
<div class="button-container centering-y">
<div class="button-zoom button-square">
+
</div>
</div></a><!-- photo 1 end -->
<!-- photo 4 start -->
<a class="photo-gallery landscape popup-photo" href="img/photos/large/4.jpg">
<div class="photo-container">
<img alt="Photos" src="img/photos/small/4.jpg">
</div>
<div class="button-container centering-y">
<div class="button-zoom button-square">
+
</div>
</div></a><!-- photo 4 end -->
<!-- photo 5 start -->
<a class="photo-gallery landscape popup-photo" href="img/photos/large/5.jpg">
<div class="photo-container">
<img alt="Photos" src="img/photos/small/5.jpg">
</div>
<div class="button-container centering-y">
<div class="button-zoom button-square">
+
</div>
</div></a><!-- photo 5 end -->
</div>
</div><!-- photo gallery end -->
[...]<!-- photos page end -->
[...]
To edit the 'Contact' page, simply find the appropriate label <!-- contact page start --> in the body of the HTML file.
Part to edit:
[...]
<!-- contact page start -->
[...]
<h4>
Contact
</h4>
[...]
<span class="awesome lead-icon"><span class="fa fa-map-marker"></span></span>
[...]
<p>
ex nihilo, Inc.<br>
Touchdown Dr 1176
</p>
[...]
<span class="awesome lead-icon"><span class="fa fa-mobile"></span></span>
[...]
<p>
[00] 11 - 76<br>
[01] 11 - 76
</p>
[...]
<span class="awesome lead-icon"><span class="fa fa-paper-plane"></span></span>
[...]
<p>
<a href="mailto:you@yoursite.com">you@yoursite.com</a>
</p>
[...]<!-- contact page end -->
[...]
To send the contents of your 'Contact Form' to your email, simply open the file named 'contact.php'.
Your email address goes here:
$myemail = 'you@yoursite.com';
To add form submissions to a subscriber list in your MailChimp account, simply open the file named 'subscribe.php' and configure it with your MailChimp credentials in the assigned slots below:
$api = new MCAPI('YOUR_API_KEY');
[...]
$retval = $api->listSubscribe( 'YOUR_LIST_ID', $_POST["subscribe-email"], $merge_vars, 'html', false, true );
Please make sure you have generated your MailChimp API Key and copied your MailChimp List ID.
- MailChimp API Key ARTICLE as available at: http://kb.mailchimp.com/accounts/management/about-api-keys#Finding-or-generating-your-API-key
- MailChimp List ID ARTICLE as available at: http://kb.mailchimp.com/lists/managing-subscribers/find-your-list-id
To set the 'Countdown Target Date', simply find the file named 'life.js' placed in the folder named 'js'.
Open the file and find the appropriate label '// countdown setup start'.
Edit this section:
date: "30 October 2016 12:00:00", // countdown target date settings
To add images in the background of the template, simply find the appropriate label <!-- kenburnsy start --> in the body of the HTML file.
Part to edit:
<!-- kenburnsy start -->
<div class="slideBgImg slide-kenburnsy" id="kenburnsy-bg">
<img alt="Background" src="img/background/1.jpg">
<img alt="Background" src="img/background/2.jpg">
<img alt="Background" src="img/background/3.jpg">
<img alt="Background" src="img/background/4.jpg">
</div><!-- kenburnsy end -->
You can also edit the images by following its URL path: '/img/background/', and replace existing image files with your own images.
You can use any size for a background image.
Please note;
Demo images are not included. Image placeholders are provided instead.
To add images in the background of the template, simply find the files named 'supersized.3.2.7.bg-single-image.js' placed in the folder named 'js'.
Open the file and find the appropriate label '// supersized'.
Replace:
{image : 'img/background/bg-layer.jpg', title : '', thumb : '', url : ''}
With:
{image : 'img/background/your-image-name-1.jpg', title : '', thumb : '', url : ''}
You can use any size for a background image.
Please note;
Demo images are not included. Image placeholders are provided instead.
To add images in the background of the template, simply find the files named 'supersized.3.2.7.bg-slideshow-image.js' placed in the folder named 'js'.
Open the file and find the appropriate label '// supersized'.
Replace:
{image : 'img/background/1.jpg', title : '', thumb : '', url : ''},
{image : 'img/background/2.jpg', title : '', thumb : '', url : ''},
{image : 'img/background/3.jpg', title : '', thumb : '', url : ''},
{image : 'img/background/4.jpg', title : '', thumb : '', url : ''}
With:
{image : 'img/background/your-image-name-1.jpg', title : '', thumb : '', url : ''},
{image : 'img/background/your-image-name-2.jpg', title : '', thumb : '', url : ''},
{image : 'img/background/your-image-name-3.jpg', title : '', thumb : '', url : ''},
{image : 'img/background/your-image-name-4.jpg', title : '', thumb : '', url : ''}
You can use any size for a background image.
Please note;
Demo images are not included. Image placeholders are provided instead.
To add 'YouTube Videos' in the background of the template, simply find the appropriate label <!-- YTPlayer start --> in the body of the HTML file.
Replace:
<!-- YTPlayer start -->
<div id="videoContainment"></div><a class="player" data-property=
"{videoURL:'https://www.youtube.com/watch?v=PDLSKYTbCp4', mute:true, showControls:false, quality:'default', opacity:1, containment:'#videoContainment', optimizeDisplay:true, loop:true, startAt:0, autoPlay:true, showYTLogo:false, addRaster:false, realfullscreen:true}"
id="bgndVideo"></a><!-- YTPlayer end -->
With:
<!-- YTPlayer start -->
<div id="videoContainment"></div><a class="player" data-property=
"{videoURL:'https://www.youtube.com/watch?v=youryoutubevideouniqueID', mute:true, showControls:false, quality:'default', opacity:1, containment:'#videoContainment', optimizeDisplay:true, loop:true, startAt:0, autoPlay:true, showYTLogo:false, addRaster:false, realfullscreen:true}"
id="bgndVideo"></a><!-- YTPlayer end -->
Please note;
This template is designed to use YouTube videos as a background; however, 'YouTube Video Background' plugin is not supported by mobile devices and it doesn't work on mobile devices, so the background image is added to compensate for it. This background image can be found by following its URL path: 'img/background/video.jpg'.
By default the sound of the video is set mute. To unmute the sound, change 'mute:true' into 'mute:false'.
To add 'Self-Hosted HTML5 Videos' in the background of the template, simply find the appropriate label <!-- HTML5 start --> in the body of the HTML file.
Part to edit:
<!-- HTML5 start -->
<div data-vide-bg="http://video-js.zencoder.com/oceans-clip.mp4" data-vide-options="loop: true, muted: true, position: 0% 0%" id="video-bg"></div><!-- HTML5 end -->
Please note;
This template is designed to use Self-Hosted MP4 file format videos as a background; however, 'Self-Hosted HTML5 Video Background' plugin is not supported by mobile devices and it doesn't work on mobile devices, so the background image is added to compensate for it. This background image can be found by following its URL path: 'img/background/video-HTML5.jpg'.
By default the sound of the video is set mute. To unmute the sound, change 'muted: true' into 'muted: false'.
To add your 'Google Maps' location, simply find the file named 'google-maps.js' placed in the folder named 'js'.
Open the file and find the appropriate label '/* google maps - YOUR POSITION */'.
Part to edit:
48.858278,2.294254
Selected DEMO Location is:
Paris, France
Latitude: 48.858278°
Longitude: 2.294254°
You can visit this site: http://www.findlatitudeandlongitude.com/ to pinpoint your location.
Contact the author
This author provides limited support through email contact form [http://themeforest.net/user/ex-nihilo#contact].
Item support includes:
Availability of the author to answer questions
Answering technical questions about item’s features
Assistance with reported bugs and issues
Help with included 3rd party assets
However, item support does not include:
Customization services
Installation services
This author’s response time can be up to 2 business days.
Working time:
Monday thru Friday 9am to 5pm
Central European Time (UTC+01:00)
Social Icons
To edit the 'Social Icons' links, simply find the appropriate label <!-- social icons start --> in the body of the HTML file.
Part to edit:
[...] <!-- social icons start --> [...] <li> <a class="fa fa-twitter-square fa-2x" href="#"></a> </li> <li> <a class="fa fa-facebook-square fa-2x" href="#"></a> </li> <li> <a class="fa fa-google-plus-square fa-2x" href="#"></a> </li> <li> <a class="fa fa-youtube-square fa-2x" href="#"></a> </li> <li> <a class="fa fa-linkedin-square fa-2x" href="#"></a> </li> <li> <a class="fa fa-instagram fa-2x" href="#"></a> </li> <li> <a class="fa fa-pinterest-square fa-2x" href="#"></a> </li> <li> <a class="fa fa-share-alt-square fa-2x" href="#"></a> </li> [...]<!-- social icons end --> [...]To edit the 'Mobile Social Icons' links, simply find the appropriate label <!-- social icons mobile start --> in the body of the HTML file.
Part to edit:
[...] <!-- social icons mobile start --> [...] <li> <a class="fa fa-twitter-square fa-2x" href="#"></a> </li> <li> <a class="fa fa-facebook-square fa-2x" href="#"></a> </li> <li> <a class="fa fa-google-plus-square fa-2x" href="#"></a> </li> <li> <a class="fa fa-youtube-square fa-2x" href="#"></a> </li> <li> <a class="fa fa-linkedin-square fa-2x" href="#"></a> </li> <li> <a class="fa fa-instagram fa-2x" href="#"></a> </li> <li> <a class="fa fa-pinterest-square fa-2x" href="#"></a> </li> <li> <a class="fa fa-share-alt-square fa-2x" href="#"></a> </li> [...]<!-- social icons mobile end --> [...]