Music Template by Moonhunters


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 .
- mp3 music in navbar
- background slider
- posts
- youtube video
- albums
- concerts
- fonts .
- about us text.
- testimonial text .
- social icons (we give you 21 different social icon to choose) .
- gallery.
- PHP for contact form and subscrive.

  1. Extract files from a zip file.
  2. Copy all content to your server.
  3. We prepared  3 variants of Music Template

- Classic: index-classic.html

- DJ: index-dj.html

- Band: index-band.html 

 

 

Run one of these html files in web browser by typing address similar to below, replacing www.your.domain.com by your address: http://www.your.domain.com/index-classic.html or index-dj.html or index-band.html 

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

<div class="fill_1">

    <div class="fill_11"></div>
</div>
<div class="carousel-caption">
    <div class="col-md-12 caro">
            <h2 data-sr='wait 1.5s, then enter left and hustle 100px over 2s'>Music </h2>
            <h2 data-sr='wait 2.6s, then enter top and hustle 100px over 2s'> We love </h2>
            <div>

<div class="fill_2"><div class="fill_12"></div></div>

<div class="carousel-caption">
    <div class="col-md-12 caro">
            <h2> Let the  </h2>
            <h2> Music Speak!  </h2>
            <div>

<div class="fill_3"><div class="fill_13"></div></div>

<div class="carousel-caption">
    <div class="col-md-12 caro">
            <h2>We play</h2>
            <h2>every day </h2>

If you want to add your own song you should add your own mp3 file in folder ../music and open index.html file in the section:

<div class="audio">

    <!--<audio autoplay loop>-->
    <!--</audio>-->
    <audio id="song" ontimeupdate="updateTime()">
        <source src="music/single.mp3" type="audio/mp3"/>
        Your browser does not support the audio tag.
    </audio>

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

/*------------------------------------------------------------*/

/* 5. carousel */
/*------------------------------------------------------------*/

.fill_1 {

    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;
}

.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/1.jpg');
    width: 100%;
    height: 950px;
    background-position: top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

If you want to change a section posts you should make changes to the index.html file in:

<!--[posts]-->

<div class="container-fluid post">
    <div class="row">
        <div class="col-md-6 images">
            <div class="posts"  data-sr='wait 0.1s, then enter left and hustle 55px over 1.5s'>
                <p> 12.05.2015</p>
                <div class="testimonial-border-white"></div>
                <h3>POST TITLE 1</h3>
                <h4>Proin id pretium nib. Donec tincidunt fermentum dui,
                    at. Aliquam accumsan fermentum mi.</h4>
                <div class="read">
                     <a class="read-button1 " href="post.html" role="button">Read More</a>
                </div>
            </div>
            <div>
                <img class="img pic img-responsive" src="images/4.jpg" alt="" />
            </div>

        </div>
        <div class="col-md-3 images-small">
            <div >
                <img class="img pic img-responsive"  src="images/nuty.jpg" alt="" />
            </div>
            <div class="posts-2" data-sr='wait 0.1s, then enter right and hustle 55px over 1.5s'>
                <p> 12.05.2015</p>
                <div class="testimonial-border-white"></div>
                <h3>POST TITLE 2</h3>
                <h4>Proin id pretium nib. Donec tincidunt fermentum dui,</h4>
                <div class="read">
                    <a class="read-button1 " href="post.html" role="button">Read More</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 images-small">
            <div class="posts-2" data-sr='wait 0.1s, then enter bottom and hustle 55px over 1.5s'>
                <p> 12.05.2015</p>
                <div class="testimonial-border-white"></div>
                <h3>POST TITLE 3</h3>
                <h4>Proin id pretium nib. Donec tincidunt fermentum dui,</h4>
                <div class="read">
                    <a class="read-button1 " href="post.html" role="button">Read More</a>
                </div>
            </div>
            <div>
                <img class="img pic img-responsive" src="images/3.jpg" alt="" />
            </div>
        </div>
    </div>
</div>
<!--[posts-end]-->

If you want to add your own youtube video you should open index.html file in the section:

<!--[youtube]-->

<div class="container-fluid y-t" data-sr='wait 0.1s, then enter bottom and hustle 55px over 1.5s'>
    <div class="testimonial-border-video"></div>
        <h2>NEW SINGLE</h2>
        <div class="col-md-6 col-md-offset-3 ">
            <div class="videowrapper well">
                <iframe height="300" width="500" src="http://www.youtube.com/embed/Rv6gKituIfY" allowfullscreen=""></iframe>
            </div>
        </div>
</div>
<!--[youtube-end]-->

and change link: <iframe height="300" width="500" src="http://www.youtube.com/embed/Rv6gKituIfY" allowfullscreen=""></iframe>

If you want to change a albums you should make changes to the index.html file in the section:

!--[albums]-->

<div class="container-fluid">
    <section id="albums">
    <div class="row">
        <div class="span12">
            <div class="well">
                <div id="myCarousel1" class="carousel fdi-Carousel slide">
                    <!-- Carousel items -->
                    <div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
                        <div class="carousel-inner onebyone-carosel">
                            <div class="item active">
                                <div class="col-md-4">
                                    <div class="text-album " >
                                        <p>premiere: 15.12.2015</p>
                                        <div class="testimonial-border"></div>
                                        <h3>Name Album</h3>
                                        <img class="img album-pic" src="images/1.jpg" alt="" />
                                        <div class="social-icon">
                                            <ul class="social-icon">
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footerSpotify"></a>
                                                    <h4>Spotify</h4>
                                                </li>
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footeriTunes"></a>
                                                    <h4>iTunes</h4>
                                                </li>
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footerBuy"></a>
                                                    <h4>Buy</h4>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-4">
                                    <div class="text-album" >
                                        <p>premiere: 15.12.2015</p>
                                        <div class="testimonial-border"></div>
                                        <h3>Name Album</h3>
                                        <img class="img album-pic" src="images/2.jpg" alt="" />
                                        <div class="social-icon">
                                            <ul class="social-icon">
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footerSpotify"></a>
                                                    <h4>Spotify</h4>
                                                </li>
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footeriTunes"></a>
                                                    <h4>iTunes</h4>
                                                </li>
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footerBuy"></a>
                                                    <h4>Buy</h4>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-4">
                                    <div class="text-album" >
                                        <p>premiere: 15.12.2015</p>
                                        <div class="testimonial-border"></div>
                                        <h3>Name Album</h3>
                                        <img class="img album-pic" src="images/3.jpg" alt="" />
                                        <div class="social-icon">
                                            <ul class="social-icon">
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footerSpotify"></a>
                                                    <h4>Spotify</h4>
                                                </li>
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footeriTunes"></a>
                                                    <h4>iTunes</h4>
                                                </li>
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footerBuy"></a>
                                                    <h4>Buy</h4>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-4">
                                    <div class="text-album" >
                                        <p>premiere: 15.12.2015</p>
                                        <div class="testimonial-border"></div>
                                        <h3>Name Album</h3>
                                        <img class="img album-pic" src="images/2.jpg" alt="" />
                                        <div class="social-icon">
                                            <ul class="social-icon">
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footerSpotify"></a>
                                                    <h4>Spotify</h4>
                                                </li>
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footeriTunes"></a>
                                                    <h4>iTunes</h4>
                                                </li>
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footerBuy"></a>
                                                    <h4>Buy</h4>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-4">
                                    <div class="text-album" >
                                        <p>premiere: 15.12.2015</p>
                                        <div class="testimonial-border"></div>
                                        <h3>Name Album</h3>
                                        <img class="img album-pic" src="images/2.jpg" alt="" />
                                        <div class="social-icon">
                                            <ul class="social-icon">
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footerSpotify"></a>
                                                    <h4>Spotify</h4>
                                                </li>
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footeriTunes"></a>
                                                    <h4>iTunes</h4>
                                                </li>
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footerBuy"></a>
                                                    <h4>Buy</h4>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="col-md-4">
                                    <div class="text-album" >
                                        <p>premiere: 15.12.2015</p>
                                        <div class="testimonial-border"></div>
                                        <h3>Name Album</h3>
                                        <img class="img album-pic" src="images/4.jpg" alt="" />
                                        <div class="social-icon">
                                            <ul class="social-icon">
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footerSpotify"></a>
                                                    <h4>Spotify</h4>
                                                </li>
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footeriTunes"></a>
                                                    <h4>iTunes</h4>
                                                </li>
                                                <li class="icon">
                                                    <a href="#" target="_blank" class="footerBuy"></a>
                                                    <h4>Buy</h4>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#eventCarousel" data-slide="prev">
                            <div id="left-arrow">
                                <img alt="arrow" class="arrow-albums" src="images/buttons/left-arrow-grey.png" >
                            </div>
                        </a>
                        <a class="right carousel-control" href="#eventCarousel" data-slide="next">
                            <div id="right-arrow">
                                <img alt="arrow" class="arrow-albums" src="images/buttons/right-arrow-grey.png" >
                            </div>
                        </a>
                    </div>
                    <!--/carousel-inner-->
                </div><!--/myCarousel-->
            </div><!--/well-->
        </div>
    </div>
    </section>
</div>
<!--[albums end]-->

If you want to add your own concerts you should make changes to the index.html file in the section:

<!--[concerts]-->

<div class="container-fluid concerts">
    <div class="row" data-sr='wait 0.1s, then enter left and hustle 55px over 1.5s'>
        <div class="col-md-3 date">
            <div class="concert-border"></div>
            <p>12.05.2015</p>
        </div>
        <div class="col-md-3 place">
            <div class="concert-border"></div>
            <p>Katowice, Poland</p>
        </div>
        <div class="col-md-3 place">
            <div class="concert-border"></div>
            <p>Hall Spodek</p>
        </div>
        <div class="col-md-3 entry">
            <div class="concert-border-1"></div>
            <a class="ticket" href="#"><p>Buy Ticket</p></a>
        </div>
    </div>
    <div class="row" data-sr='wait 0.1s, then enter bottom and hustle 55px over 1.5s'>
        <div class="col-md-3 date">
            <p>09.08.2015</p>
        </div>
        <div class="col-md-3 place">
            <p>Paris, France</p>
        </div>
        <div class="col-md-3 place">
            <p>Champs Elysees</p>
        </div>
        <div class="col-md-3 entry">
            <a href="#"><p>Buy Ticket</p></a>
        </div>
    </div>
    <div class="row" data-sr='wait 0.1s, then enter left and hustle 55px over 1.5s'>
        <div class="col-md-3 date">
            <p>10.09.2015</p>
        </div>
        <div class="col-md-3 place">
            <p>Rome, Italy</p>
        </div>
        <div class="col-md-3 place">
            <p>Colosseum Italy</p>
        </div>
        <div class="col-md-3 entry">
            <a href="#"><p>Buy Ticket</p></a>
        </div>
    </div>
    <div class="row" data-sr='wait 0.1s, then enter left and hustle 55px over 1.5s'>
        <div class="col-md-3 date">
            <p>12.05.2015</p>
        </div>
        <div class="col-md-3 place">
            <p>New York, USA</p>
        </div>
        <div class="col-md-3 place">
            <p>Madison Square Garden</p>
        </div>
        <div class="col-md-3 entry">
            <a href="#"><p>Free Entry</p></a>
        </div>
    </div>
    <div class="row" data-sr='wait 0.1s, then enter top and hustle 55px over 1.5s'>
        <div class="col-md-3 date">
            <p>20.10.2015</p>
        </div>
        <div class="col-md-3 place">
            <p>Las Vegas, USA</p>
        </div>
        <div class="col-md-3 place">
            <p>Bellagio Hotel LV</p>
        </div>
        <div class="col-md-3 entry">
            <a href="#"><p>Buy Ticket</p></a>
        </div>
    </div>
    <div class="read-concerts">
        <a class="read-button2 " href="post.html" role="button">Read More</a>
    </div>
</div>
<!--[concerts-end]-->

You can also add your own concerts in file concerts.html

 

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">
            <div class="aboutText col-md-12 col-sm-12 about-text" >
                <div class="divider-line" data-sr='wait 0.1s, then enter bottom and hustle 125px over 1.5s'></div>
                <h2 data-sr='wait 0.1s, then enter bottom and hustle 125px over 1.5s'>About Us</h2>
                <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>
            </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">"Rock and roll music, if you like it,
                                        if you feel it, you can't help but move to it. That's what happens to me. I can't help it."
                                    </p>
                                    <small>[Elvis Presley]</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">"Rock and roll music, if you like it,
                                        if you feel it, you can't help but move to it. That's what happens to me. I can't help it."
                                    </p>
                                    <small>[Elvis Presley]</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">"Rock and roll music, if you like it,
                                        if you feel it, you can't help but move to it. That's what happens to me. I can't help it."
                                    </p>
                                    <small>[Elvis Presley]</small>
                                </div>
                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--[testimonial-end]-->

If you want to add your images tin gallery you should make changes to the HTML file in the section:

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

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

#footerTwitter {
    background-image: url('../images/social-icons/twitter.png');
Icons are located in the directory:  images/social-icons
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";