Nature

One Page HTML Template


Thank You for buying our template

If you do not find an answer in this manual, or would like to ask us a question, please send us an email to: moonhuntersteam@gmail.com
We will answer you as quickly as possible.

In our template you can easily make many changes.
We shall explain below how you can make changes in the:

- logo
- header text
- background
- navbar - end date and time (counter)
- fonts
- about us text
- testimonial text
- our offer
- our team
- social icons (we give you 21 different social icon to choose)
- gallery
- logo brands carousel
- PHP for contact form and subscrive

  1. Extract files from a zip file.
  2. Copy all content from demo directory to your server.
  3. Template can be used in one of 22 variants

- Light version with navbar

 

1. full screen slider version - ver-1.html

2. static version with border - ver-2.html

3. static version with two different background - ver-3.html

4. slider version - ver-4.html

5. video background - ver-5.html

 

- Light version with navbar on left side

 

6. full screen slider version - ver-1-left_navbar.html

7. static version with two different background - ver-3-left_navbar.html

8. video background - ver-5-left_navbar.html

 

- Light version with hidden navbar 

 

9. full screen slider version - ver-1-hidden_navbar.html

10. static version with two different background - ver-3-hidden_navbar.html

11. video background - ver-5-hidden_navbar.html

 

- Dark version with navbar

 

12. full screen slider version - ver-1dark.html

13. static version with border - ver-2dark.html

14. static version with two different background - ver-3dark.html

15. slider version - ver-4dark.html

16. video background - ver-5dark.html

 

- Dark version with navbar on left side

 

17. full screen slider version - ver-1dark-left_navbar.html

18. static version with two different background - ver-3dark-left_navbar.html

19. video background - ver-5dark-left_navbar.html

 

- Dark version with hidden navbar 

 

20. full screen slider version - ver-1dark-hidden_navbar.html

21. static version with two different background - ver-3dark-hidden_navbar.html

22. video background - ver-5dark-hidden_navbar.html

 

 

5. Run one of html files in web browser by typing address similar to below, replacing www.your.domain.com by your address: http://www.your.domain.com/ver-1.html 

 

6. When you choose your own version you must change one_of your_html.html file on index.html

If you want to change a header text you should make changes to the HTML file in the section:

<div class="title">

        <h2 data-sr='wait 1.5s, then enter left and hustle 50px over 2s'>Welcome in the nature</h2>

<div class="title">
    <h2>Themeforest is here</h2>

<div class="title">

    <h2>We Are Amazing Agency</h2>

If you want to change a header text you should make changes to the one of .css file in the section:

 

/* Carousel */

.fill_1 {

background-image: url('../images/1.jpg');
    width: 100%;
    height: 950px;
    background-position: top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.fill_2 {
    background-image: url('../images/2.jpg');
    width: 100%;
    height: 950px;
    background-position: top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.fill_3 {
    background-image: url('../images/3.jpg');
    width: 100%;
    height: 950px;
    background-position: top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

 

You can change the end date of your counter:
Find below line in file in javascript.js file

//counter

$('#example').countdown({
    date: '12/24/2015 23:59:59'
}, function () {
    alert('Merry Christmas!');
});

 

 

If you want to add a description in the "about us" subpage you should make changes to the HTML file in the section:

<!--[About Us]-->

<div class="container-fluid about-back">
    <section id="about">
        <div class="row About-Us">
            <div class="col-md-6 col-sm-12 about-images" data-sr='wait 0.1s, then enter left and hustle 125px over 1.5s'>
                <img src="images/b_items.png" class="img-responsive" alt="Responsive image">
            </div>
            <div class="aboutText col-md-6 col-sm-12 about-text" >
                <h2 data-sr='wait 0.1s, then enter bottom and hustle 125px over 1.5s'>About</h2>
                <div class="divider-line" data-sr='wait 0.1s, then enter bottom and hustle 125px over 1.5s'></div>
                <p id="text-aboutus" data-sr='wait 0.1s, then enter bottom and hustle 125px over 1.5s'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                    Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                    Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
                </p>
                <a class="contact-button hvr-shutter-out-vertical-transparent" href="#contact" role="button"  data-sr='wait 0.1s, then enter bottom and hustle 125px over 1.5s'>Contact Us</a>
            </div>
        </div>
    </section>
</div>
<!--[About Us end]-->

If you want to add a description in the "testimonial text"  you should make changes to the HTML file in the section:

<!--[testimonial]-->

<div class="container-fluid testimonial">
    <div class="row ">
        <div class="col-md-12" data-wow-delay="0.5s">
            <div class="carousel slide" data-ride="carousel" id="quote-carousel">
                <div class="carousel-inner text-center">
                    <!-- Quote 1 -->
                    <div class="item active">
                        <blockquote>
                            <div class="row">
                                <div class="col-sm-8 col-sm-offset-2 ">
                                    <div class="testimonial-border"></div>
                                    <p class="testimonial-text">“ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor cum
                                        sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet,
                                        sociis <strong>natoque penatibus</strong> et magnis dis parturient montes.  ”</p>
                                    <small>John Doe</small>
                                </div>
                            </div>
                        </blockquote>
                    </div>
                    <!-- Quote 2 -->
                    <div class="item">
                        <blockquote>
                            <div class="row">
                                <div class="col-sm-8 col-sm-offset-2">
                                    <div class="testimonial-border"></div>
                                    <p class="testimonial-text">“ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor cum
                                        sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet,
                                        sociis <strong>natoque penatibus</strong>  et magnis dis parturient montes. ”</p>
                                    <small>John Doe</small>
                                </div>
                            </div>
                        </blockquote>
                    </div>
                    <!-- Quote 3 -->
                    <div class="item">
                        <blockquote>
                            <div class="row">
                                <div class="col-sm-8 col-sm-offset-2">
                                    <div class="testimonial-border"></div>
                                    <p class="testimonial-text">“ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor cum
                                        sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet,
                                        sociis <strong>natoque penatibus</strong> et magnis dis parturient montes. ”</p>
                                    <small>John Doe</small>
                                </div>
                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--[testimonial-end]-->

If you want to add a description in the "our offer" section you should make changes to the HTML file in the section:

<!--[What we do]-->

<div class="container-fluid what-we">
    <section id="what_we_do">
        <div class="row what_we_do">
            <div class="col-md-12">
                <h2 data-sr='wait 0.1s, then enter bottom and hustle 50px over 0.8s'>Our Offer</h2>
                <div class="offer-border" data-sr='wait 0.1s, then enter bottom and hustle 50px over 0.8s'></div>
            </div>
        </div>
        <div class="container-fluid-offer">
            <div class="row what">
                <div class="col-md-4 col-sm-6 webdesign"  data-sr='wait 0.1s, then enter left and hustle 50px over 0.8s'>
                    <h2><i class="fa fa-file-text-o fa-1x awesome-icons"></i>Webdesign</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit consectetuer adipiscing elit.
                    </p>
                </div>
                <div class="col-md-4 col-sm-6 webdesign" data-sr='wait 0.1s, then enter bottom and hustle 50px over 0.8s'>
                    <h2> <i class="fa fa-clipboard fa-1x awesome-icons"></i>Copywriting</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit consectetuer adipiscing elit.
                    </p>
                </div>
                <div class="col-md-4 col-sm-6 webdesign" data-sr='wait 0.1s, then enter right and hustle 50px over 0.8s'>
                    <h2><i class="fa fa-file-code-o fa-1x awesome-icons"></i>Comparing</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit consectetuer adipiscing elit.
                    </p>
                </div>
                <div class="col-md-4 col-sm-6 webdesign" data-sr='wait 0.1s, then enter right and hustle 50px over 0.8s'>
                    <h2><i class="fa fa-power-off fa-1x awesome-icons"></i>Coding</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit consectetuer adipiscing elit.
                    </p>
                </div>

                <div class="col-md-4 col-sm-6 webdesign"  data-sr='wait 0.1s, then enter left and hustle 50px over 0.8s'>
                    <h2><i class="fa fa-beer fa-1x awesome-icons"></i>Consulting</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit consectetuer adipiscing elit.
                    </p>
                </div>
                <div class="col-md-4 col-sm-6 webdesign" data-sr='wait 0.1s, then enter bottom and hustle 50px over 0.8s'>
                    <h2> <i class="fa fa-heart fa-1x awesome-icons"></i>Designing</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit consectetuer adipiscing elit.
                    </p>
                </div>
            </div>
        </div>
    </section>
</div>
<!--[What we do - end]-->

If you want to add a description in the "our team" section you should make changes to the HTML file in the section:

<!--[Our Team]-->
<div class="container-fluid team-section">
    <section id="our-team">
        <div class="row what_we_do">
            <div class="col-md-12">
                <h2 data-sr='wait 0.1s, then enter bottom and hustle 50px over 0.8s'>Our Team</h2>
                <div class="offer-border" data-sr='wait 0.1s, then enter bottom and hustle 50px over 0.8s'></div>
            </div>
        </div>
        <div class="row team">
            <div class="col-md-4" data-sr='wait 0.1s, then enter left and hustle 125px over 1.5s'>
                <img src="images/team/person1.png" class="img-responsive hvr-pulse" alt="Responsive image">
                <h3 data-sr='wait 0.3s, then enter bottom and hustle 125px over 1.5s'>John Doe</h3>
                <h4 data-sr='wait 0.3s, then enter bottom and hustle 125px over 1.5s'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Dolor sit amet, Lorem ipsum consectetur adipisicing elit. </h4>
            </div>
            <div class="col-md-4" data-sr='wait 0.1s, then enter bottom and hustle 125px over 1.5s'>
                <img src="images/team/person2.png" class="img-responsive hvr-pulse" alt="Responsive image">
                <h3 data-sr='wait 0.3s, then enter bottom and hustle 125px over 1.5s'>Martin Doe</h3>
                <h4 data-sr='wait 0.3s, then enter bottom and hustle 125px over 1.5s'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Dolor sit amet, Lorem ipsum consectetur adipisicing elit. </h4>
            </div>
            <div class="col-md-4" data-sr='wait 0.1s, then enter right and hustle 125px over 1.5s'>
                <img src="images/team/person3.png" class="img-responsive hvr-pulse" alt="Responsive image">
                <h3 data-sr='wait 0.3s, then enter bottom and hustle 125px over 1.5s'>Sam Brown</h3>
                <h4 data-sr='wait 0.3s, then enter bottom and hustle 125px over 1.5s'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Dolor sit amet, Lorem ipsum consectetur adipisicing elit. </h4>
            </div>
        </div>
    </section>
</div>
<!--[Our Team]-->

If you want to change social icons you should make changes to the HTML file and CSS in the section:

<!--[sociel-icons]-->

<div class="container-fluid social-icons">
    <div class="row ">
        <div class="col-md-12  social-container">
            <div class="social-icon">
                <ul class="social-icon">
                    <li class="icon">
                        <a href="#" target="_blank" id="footerPinterest"></a>
                    </li>
                    <li class="icon">
                        <a href="#" target="_blank" id="footerFacebook"></a>
                    </li>
                    <li class="icon">
                        <a href="#" target="_blank" id="footerTwitter"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--[social-icons-end]-->

and CSS 

#footerPinterest {
    background-image: url('../images/social-icons/white/pinterest.png');
}

#footerFacebook {
    background-image: url('../images/social-icons//white/facebook.png');
}

#footerTwitter {
    background-image: url('../images/social-icons/white/twitter.png');
}
php/email.php

This script takes email from subscribe form, when user click subscribe button, and saves it to emails.csv file.

You can modify this file to save emails to database. The variable $_GET["email"] contains email provided by user.

php/contact.php

The script sends email message to address specific in line 7, you should provide your own email address there:

Change: "your@email.address" to your email.


  1. mail("your@email.address", $subject, $contactMessage, "From: $contactEmail");

You can also change subject of an email in line 2: $subject = "Your subject"


  1. $subject = "Moonhunters";