Onyx - Onepage Responsive Bootstrap HTML5 Template

A nice onepage Responsive Design Bootstrap HTML5 Template


Thank you so much for purchasing this template.
If you have any questions that are beyond the scope of this documentation file, please feel free to contact me.

Onyx is a modern and elegant One-Page Responsive Design HTML5 template based on Bootstrap framework.
Perfect for any kind of website, every single detail is carefully designed, in order to create a wonderful user experience.
Onyx is very easy to set up and customize and comes with this well documented help file, which will assist you in the configuration of your new template in few minutes.

Header + slider

    <div id="front">
        <div class="site-header">
            <div class="container">
                <div class="row">
                    
<div class="col-md-2 col-sm-2 col-xs-2">
                        <div id="logo">
                            <h1><a href="#" title=""></a></h1>
                        </div> 
  </div> 
  
                    <div class="col-md-10 col-sm-12 col-xs-12">
                        <a href="#" class="toggle-menu"><i class="fa fa-bars"></i></a>
                        <div class="main-menu">
                            <ul>
                                <li><a href="#front">Home</a></li>
                                <li><a href="#services">Our Services</a></li>
                                <li><a href="#products">Our Products</a></li>
   <li><a href="#team">About us</a></li>
                                <li><a href="#contact">Contact us</a></li>
                            </ul>
                        </div> 
                    </div> 
 
                </div> 
                <div class="row">
                    <div class="col-md-12">
                        <div class="responsive">
                            <div class="main-menu">
                                <ul>
                                    <li><a href="#front">Home</a></li>
                                    <li><a href="#services">Our Services</a></li>
                                    <li><a href="#products">Our Products</a></li>
<li><a href="#team">About us</a></li>
                                    <li><a href="#contact">Contact us</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>
 
    <div class="site-slider">
        <ul class="bxslider">
            <li>
                <img src="images/slider/slide1.jpg" alt="slider image 1">
                <div class="container caption-wrapper">
                    <div class="slider-caption">
                        <h2>Welcome to Wild World Web</h2>
                    </div>
                </div>
            </li>
            <li>
                <img src="images/slider/slide2.jpg" alt="slider image 2">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <div class="slider-caption">
                                <h2>Website for every devices</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="images/slider/slide3.jpg" alt="slider image 3">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <div class="slider-caption">
                                <h2>Responsive Web Design</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="images/slider/slide4.jpg" alt="slider image 4">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <div class="slider-caption">
                                <h2>Download it and enjoy it!</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="images/slider/slide5.jpg" alt="slider image 5">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <div class="slider-caption">
                                <h2>Easy to customize, ready to use</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul> 
</div>

Services

    <div id="services" class="content-section">
        <div class="container">
                <div class="col-md-12 text-center">
                    <h1 class="section-title">Our Services</h1>
                </div> 
                <div class="col-md-3 col-sm-6">
                    <div class="service-item">
                        <span class="service-icon first"></span>
                        <h3>Easy Customization</h3>
                        <p>Cras congue orci at diam condimentum, in dignissim tellus elementum. Praesent id mauris eu urna vehicula rutrum sed in elit. Sed sed urna porta, viverra lacus in.</p>
                    </div> 
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="service-item">
                        <span class="service-icon second"></span>
                        <h3>Web Design</h3>
                        <p>Nulla in nunc elit. Etiam porttitor nibh et felis molestie fermentum. Ut quis diam porttitor, dictum dolor in, volutpat nulla. Phasellus egestas eu lacus eu pharetra.</p>
                    </div> 
                </div> 
                <div class="col-md-3 col-sm-6">
                    <div class="service-item">
                        <span class="service-icon third"></span>
                        <h3>High Quality</h3>
                        <p>Ut quis diam porttitor, dictum dolor in, volutpat nulla. Phasellus egestas eu lacus eu pharetra. Morbi id nisi enim. Ut congue interdum pharetra facilisi.</p>
                    </div> 
                </div> 
                <div class="col-md-3 col-sm-6">
                    <div class="service-item">
                        <span class="service-icon fourth"></span>
                        <h3>Professional Design</h3>
                        <p>Morbi id nisi enim. Ut congue interdum pharetra facilisi. Aenean consectetur pellentesque mauris nec ornare. Nam tortor justo, rutrum ut condimentum.</p>
                    </div> 
                </div> 
        </div> 
    </div> 

Products

<div id="products" class="content-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h1 class="section-title">Our Products</h1>
                </div> 
            </div> 
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="product-item">
                        <div class="item-thumb">
                            <!-- <span class="note"><img src="images/clients/01.png" alt=""></span> -->
                            <div class="overlay">
                                <div class="overlay-inner">
                                    <a href="#nogo" class="view-detail">Read more</a>
                                </div>
                            </div> 
                            <img src="images/products/product1.jpg" alt="">
                        </div> 
                        <h3>Nunc Consectetur</h3>
                    </div> 
                </div> 
                <div class="col-md-3 col-sm-6">
                    <div class="product-item">
                        <div class="item-thumb">
                            <!-- <span class="note"><img src="images/clients/03.png" alt=""></span> -->
                            <div class="overlay">
                                <div class="overlay-inner">
                                    <a href="#nogo" class="view-detail">Read more</a>
                                </div>
                            </div> 
                            <img src="images/products/product2.jpg" alt="">
                        </div> 
                        <h3>Donec Vitae Massa</h3>
                    </div> 
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="product-item">
                        <div class="item-thumb">
                            <!-- <span class="note"><img src="images/clients/02.png" alt=""></span> -->
                            <div class="overlay">
                                <div class="overlay-inner">
                                    <a href="#nogo" class="view-detail">Read more</a>
                                </div>
                            </div> 
                            <img src="images/products/product3.jpg" alt="">
                        </div> 
                        <h3>Fusce Dignissim Neque</h3>
                    </div> 
                </div> 
                <div class="col-md-3 col-sm-6">
                    <div class="product-item">
                        <div class="item-thumb">
                            <!-- <span class="note"><img src="images/clients/04.png" alt=""></span> -->
                            <div class="overlay">
                                <div class="overlay-inner">
                                    <a href="#nogo" class="view-detail">Read more</a>
                                </div>
                            </div> 
                            <img src="images/products/product4.jpg" alt="" />
                        </div> 
                        <h3>Mauris Adipiscing Enim</h3>
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 

Testimonials

    <div class="content-section">
        <div class="container">
            <div class="col-md-12 text-center">
                <h1 class="section-title">Testimonials</h1>
            </div> 
            <div class="col-md-12 text-center">
<ul id="news">
<!-- Quote 1 -->
<li class="news quote">
<h3>
"Cras congue orci at diam condimentum, in dignissim tellus elementum. Praesent id mauris eu urna vehicula rutrum sed in elit. Sed sed urna porta, viverra lacus in.  Aenean consectetur pellentesque mauris nec ornare."</h3>
<h4 class="italic">Steve Jobs - apple.com</h4>
</li>
<!-- Quote 2 -->
<li class="news quote">
<h3>"Nulla in nunc elit. Etiam porttitor nibh et felis molestie fermentum. Ut quis diam porttitor, dictum dolor in, volutpat nulla. Phasellus egestas eu lacus eu pharetra. Cras congue orci at diam condimentum, in dignissim tellus elementum." </h3>
<h4 class="italic">Sergei Brin - Google.com</h4>
</li>
<!-- Quote 3 -->
<li class="news quote">
<h3>"Morbi id nisi enim. Cras congue orci at diam condimentum, in dignissim tellus elementum. Ut congue interdum pharetra facilisi. Aenean consectetur pellentesque mauris nec ornare. Nam tortor justo, rutrum ut condimentum."</h3>
<h4 class="italic">Elon Musk - Tesla.com</h4>
</li>
<!-- Quote 4 -->
<li class="news quote">
<h3>"Nam tortor justo, rutrum ut condimentum. Morbi id nisi enim. Cras congue orci at diam condimentum, in dignissim tellus elementum. Ut congue interdum pharetra facilisi. Aenean consectetur pellentesque mauris nec ornare." </h3>
<h4 class="italic">Marysa Meyer - Youyou.com</h4>
</li>
</ul>
</div>
        </div> 
    </div> 	

About

    <div id="team" class="content-section">
        <div class="container">
                <div class="col-md-12 text-center">
                    <h1 class="section-title">Our Team</h1>
                </div> 
                <div class="col-md-3 col-sm-6">
                    <div class="team-item">
                        <span class="team-icon first"></span>
                        <h3>John Doe</h3>
                        <p>Cras congue orci at diam condimentum, in dignissim tellus elementum. Praesent id mauris eu urna vehicula rutrum sed in elit. Sed sed urna porta, viverra lacus in.</p>
<div class="col-md-12 col-sm-12">
<ul class="social">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
</ul>
</div>
                    </div> 
                </div> 
                <div class="col-md-3 col-sm-6">
                    <div class="team-item">
                        <span class="team-icon second"></span>
                        <h3>Rachel Wise</h3>
                        <p>Nulla in nunc elit. Etiam porttitor nibh et felis molestie fermentum. Ut quis diam porttitor, dictum dolor in, volutpat nulla. Phasellus egestas eu lacus eu pharetra.</p>
<div class="col-md-12 col-sm-12">
<ul class="social">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
</ul>
</div>
                    </div> 
                </div> 
                <div class="col-md-3 col-sm-6">
                    <div class="team-item">
                        <span class="team-icon third"></span>
                        <h3>Tim Hurley</h3>
                        <p>Morbi id nisi enim. Ut congue interdum pharetra facilisi. Aenean consectetur pellentesque mauris nec ornare. Nam tortor justo, rutrum ut condimentum</p>
<div class="col-md-12 col-sm-12">
<ul class="social">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
</ul>
</div>
                    </div> 
                </div> 
                <div class="col-md-3 col-sm-6">
                    <div class="team-item">
                        <span class="team-icon fourth"></span>
                        <h3>Phil Tusk</h3>
                        <p>Morbi id nisi enim. Ut congue interdum pharetra facilisi. Aenean consectetur pellentesque mauris nec ornare. Nam tortor justo, rutrum ut condimentum.</p>
<div class="col-md-12 col-sm-12">
<ul class="social">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
</ul>
</div>
                    </div> 
                </div> 
        </div> 
    </div> 

Contact

    <div id="contact" class="content-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h1 class="section-title">Contact Us</h1>
                </div> 
            </div> 
            <div class="row">
                <div class="col-md-offset-2 col-md-8 text-center bigger-text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, itaque vero facere laudantium voluptas temporibus mollitia nisi deleniti illo minima quisquam corporis possimus nesciunt.</p>
                </div>
 
                <div class="col-md-6 col-sm-6">
                    <div class="row contact-form">
<form action="processForm.php" method="post">
                        <fieldset class="col-md-6 col-sm-6">
                            <input id="name" name="name" placeholder="Name">
                        </fieldset>
                        <fieldset class="col-md-6 col-sm-6">
                            <input name="email" id="email" placeholder="Email">
                        </fieldset>
                        <fieldset class="col-md-12">
                            <input name="subject" id="subject" placeholder="Subject">
                        </fieldset>
                        <fieldset class="col-md-12">
                            <textarea name="comments" id="comments" placeholder="What can we do for you?"></textarea>
                        </fieldset>
<fieldset class="col-md-12">
<label>*What is 2+2? (Anti-spam)</label>
<input class="w-input field" name="human" placeholder="Answer...">
                        </fieldset>
                        <fieldset class="col-md-12">
                            <input type="submit" name="send" value="Send your message" id="submit" class="button">
                        </fieldset>
</form>
                    </div> 
                </div> 
 
<div class="col-md-6 col-sm-6">
                    <div id="map">
</div>
                </div> 
 
            </div> 
        </div> 
    </div> 
    <div class="site-footer">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <span>Copyright 2014 &copy; Template Onyx | <a href="#">Company Name</a> </span>
                </div> 
                <div class="col-md-6 col-sm-6">
                    <ul class="social">
                        <li><a href="#" class="fa fa-facebook"></a></li>
                        <li><a href="#" class="fa fa-twitter"></a></li>
                        <li><a href="#" class="fa fa-instagram"></a></li>
                        <li><a href="#" class="fa fa-linkedin"></a></li>
                        <li><a href="#" class="fa fa-rss"></a></li>
                    </ul>
                </div>
            </div>
        </div> 
    </div> 	

The following CSS files are included:

The following JS file is included:

Setup the contact form:

- open the processForm.php file with your text editor,
- at line 59, indicate the email address for the incoming messages

Setup the Google Map:

You can set the map in the main.js file of the template at line 50.

1) Your address : data-widget-latlng:
For positioning the map at your location:
- Select you address in Google Map,
- Then, copy the coordonates in the URL of your location,
- past the coordonates in data-widget-latlng,

2) Zoom : data-widget-zoom :
There are 18 level of zooming (12 is used as default).

Once again, thank you so much for purchasing this template.
Daniel