Vogue 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: m.waksmanski@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 in static.html. slider.html and video.html.
- end date and time (counter) .
- fonts .
- about us text.
- testimonial text .
- social icons (we give you 21 different social icon to choose) .
- gallery.
- google maps.
- PHP for contact form and subscribe

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

 

1. Static - static.html

2. Slider - slider.html

3. Video - video.html

When you choose your own version you must change solid.html or slider.html or video.html file on index.html

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

<section id="start">

    <div class="jumbotron jumbo img-responsive">
        <div class="container" >
                <h2 data-sr='wait 1.1s, then enter bottom and hustle 50px over 2s'>DESIGNERS</h2>
            <p data-sr='wait 1.5s, then enter top and hustle 50px over 2s'>
            Our Website is Coming Soon
            </p>

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

First Slide

<div class="fill_1"></div>
<div class="carousel-caption">
    <div class="col-md-12 y yt">
        <h5>Designers</h5>
        <h4>Our Website is coming soon!</h4>
        <div class="button-yt">
            <p><a class="btn btn-primary btn-lg" href="#about" role="button" >About Us</a></p>
            <p><a class="btn btn-primary0 btn-lg" href="#works" role="button" >Our Works</a></p>
        </div>
    </div>
</div>

Second Slide

<div class="fill_2"></div>
<div class="carousel-caption">
    <div class="col-md-12 yt">
        <h5>Perfect start</h5>
        <h4>Check what we can do!</h4>
        <div class="button-yt">
            <p><a class="btn btn-primary btn-lg" href="#about" role="button" >About Us</a></p>
            <p><a class="btn btn-primary0 btn-lg" href="#works" role="button" >Our Works</a></p>
        </div>
    </div>
</div>

Third Slide

<div class="fill_3"></div>
<div class="carousel-caption">
    <div class="col-md-12 yt">
        <h5>Themeforest</h5>
        <h4>Something Awesome is Coming</h4>
        <div class="button-yt">
            <p><a class="btn btn-primary btn-lg" href="#about" role="button" >About Us</a></p>
            <p><a class="btn btn-primary0 btn-lg" href="#works" role="button" >Our Works</a></p>
        </div>
    </div>
</div>

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

<div class="container-fluid youtube"

     data-vide-bg="video/video2.mp4" data-vide-options="loop: true, muted: false, position: 0% 0%">
    <div class="row">
         <div class="col-md-12 yt-video">
             <h3 data-sr='wait 1.1s, then enter bottom and hustle 50px over 2s'>DESIGNERS</h3>
             <p data-sr='wait 1.5s, then enter top and hustle 50px over 2s'>
                 Our Website is Coming Soon
             </p>
         </div>
    </div>
</div>

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

<p id="text-aboutus" >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.
    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.
</p>

 

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

<!-- Quote 1 -->

<div class="item active">
    <blockquote>
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2 ">
                <h2>WHAT PEOPLE SAY</h2>
                <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, consectetuer adipiscing elit. Aenean commodo ligula eget dolor cum
                    sociis natoque penatibus et magnis dis parturient montes.  ”</p>
                <small>- John Doe / Country -</small>
            </div>
        </div>
    </blockquote>
</div>

<!-- Quote 2 -->

<div class="item">
    <blockquote>
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
                <h2>WHAT PEOPLE SAY</h2>
                <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, consectetuer adipiscing elit. Aenean commodo ligula eget dolor cum
                    sociis natoque penatibus et magnis dis parturient montes.  ”</p>
                <small>- John Doe / Country -</small>
            </div>
        </div>
    </blockquote>
</div>

<!-- Quote 3 -->

<div class="item">
    <blockquote>
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
                <h2>WHAT PEOPLE SAY</h2>
                <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, consectetuer adipiscing elit. Aenean commodo ligula eget dolor cum
                    sociis natoque penatibus et magnis dis parturient montes.  ”</p>
                <small>- John Doe / Country -</small>
            </div>
        </div>
    </blockquote>

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

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

If you want to add your own latitude to google maps you must go to javascript.js section and edit: 

  1. Google Maps
function initialize() {
    var myLatlng = new google.maps.LatLng(51.5068837,-0.1286353,16); // here you can specify your location
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";