{% extends "general/base.html" %}
{% load staticfiles %}
{% block body_block %}

        <!--Home page style-->
        <header id="home" class="home">

            <div class="container">

                <div class="row">

                    <div class="col-md-6 col-md-offset-6 col-sm-12 col-xs-12">
                        <div class="home-content sections">

                            <h1>Simple, Beautiful <span>and Amazing</span></h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc vitae tellus luctus ullamcorper. Nam porttitor ullamcorper felis at convallis. Aenean ornare vestibulum nisi fringilla lacinia. Nullam pulvinar sollicitudin velit id laoreet. Quisque non rhoncus sem.</p>

                            <a target="_blank" href="#"><button class="btn btn-default btn-lg">Download</button></a>
                            <a target="_blank" href="#"><button class="btn btn-primary btn-lg">Learn More</button></a>

                            <div class="available">
                                <p>
                                    Available on :
                                    <a href="#"><i class="fa fa-apple"></i></a>
                                    <a href="#"><i class="fa fa-android"></i></a>
                                </p>
                            </div>

                        </div>
                    </div>
                </div>

            </div>

        </header>

        <!-- Sections -->
        <section id="features" class="sections lightbg">
            <div class="container text-center">

                <div class="heading-content">
                    <h3>summarise the features</h3>
                    <h5>summarise what your product is all about</h5>
                </div>

                <!-- Example row of columns -->
                <div class="row">

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="features-content">
                            <i class="fa fa-bookmark-o"></i>
                            <h5>Attractive Layout</h5>
                            <p>Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam elerisque mi id faucibus iaculis vitae pulvinar.</p>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="features-content">
                            <i class="fa fa-tablet"></i>
                            <h5>Fresh Design</h5>
                            <p>Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam elerisque mi id faucibus iaculis vitae pulvinar.</p>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="features-content">
                            <i class="fa fa-comments"></i>
                            <h5>Multipurpose</h5>
                            <p>Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam elerisque mi id faucibus iaculis vitae pulvinar.</p>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="features-content">
                            <i class="fa fa-comment-o"></i>
                            <h5>Easy to customize</h5>
                            <p>Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam elerisque mi id faucibus iaculis vitae pulvinar.</p>
                        </div>
                    </div>

                </div>
            </div> <!-- /container -->       
        </section>

        <!-- Sections -->
        <section id="gallery" class="sections">
            <div class="container text-center">

                <div class="heading-content">
                    <h3>show the gallery</h3>
                    <h5>summarise what your product is all about </h5>
                </div>

                <!-- Example row of columns -->
                <div class="row">



                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="gallery-item">
                            <div class="gallery">
                                <img src="{% static 'assets/images/gallery/1.png' %}" alt="" />
                                <h6>My Gallery 1</h6>

                                <div class="img-overlay"></div>

                                <div class="gallery-icon">
                                    <a class="gallery-img" href="{% static 'assets/images/gallery/1.png' %}">View More</a>

                                </div>
                            </div>

                            <p>Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam elerisque mi id faucibus iaculis vitae pulvinar.</p>

                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="gallery-item">
                            <div class="gallery">
                                <img src="{% static 'assets/images/gallery/2.png' %}" alt="" />
                                <h6>My Gallery 2</h6>

                                <div class="img-overlay"></div>

                                <div class="gallery-icon">

                                    <a class="gallery-img" href="{% static 'assets/images/gallery/1.png' %}">View More</a>
                                </div>
                            </div>

                            <p>Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam elerisque mi id faucibus iaculis vitae pulvinar.</p>

                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="gallery-item">
                            <div class="gallery">
                                <img src="{% static 'assets/images/gallery/3.png' %}" alt="" />
                                <h6>My Gallery 3</h6>

                                <div class="img-overlay"></div>

                                <div class="gallery-icon">

                                    <a class="gallery-img" href="{% static 'assets/images/gallery/1.png' %}">View More</a>
                                </div>
                            </div>

                            <p>Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam elerisque mi id faucibus iaculis vitae pulvinar.</p>

                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="gallery-item">
                            <div class="gallery">
                                <img src="{% static 'assets/images/gallery/4.png' %}" alt="" />
                                <h6>My Gallery 4</h6>

                                <div class="img-overlay"></div>

                                <div class="gallery-icon">
                                    <a class="gallery-img" href="{% static 'assets/images/gallery/1.png' %}">View More</a>
                                </div>

                            </div>

                            <p>Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam elerisque mi id faucibus iaculis vitae pulvinar.</p>

                        </div>
                    </div>



                </div>
            </div> <!-- /container -->       
        </section>

        <!-- Sections -->
        <section id="video" class="video">
            <div class="overlay sections">
                <div class="container text-center">
                    <!-- Example row of columns -->
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
                            <div class="video-content">

                                <a href="http://www.youtube.com/embed/ee1_2gA8UZY?autoplay=1&amp;.)wmode=opaque&amp;.)fs=1" class="youtube-media"><i class="fa fa-play"></i></a>
                                <h1>Watch the best Technology in <span>Action</span></h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc vitae tellus luctus ullamcorper. Nam porttitor ullamcorper felis at convallis. Aenean ornare vestibulum nisi fringilla lacinia. Nullam pulvinar sollicitudin velit id laoreet. Quisque non rhoncus sem.</p>

                            </div>
                        </div>
                    </div>
                </div> <!-- /container -->
            </div>		
        </section>

        <!-- Sections -->
        <section id="price" class="sections">
            <div class="container text-center">

                <div class="heading-content">
                    <h3>choose your price</h3>
                    <h5>summarise what your product is all about </h5>
                </div>

                <!-- Example row of columns -->
                <div class="row">

                    <div class="col-md-4 col-sm-12 col-xs-12">
                        <div class="price-category basic">
                            <h4>Basic Package</h4>
                            <h2>20$</h2>
                            <ul>
                                <li>Nullam suscipit vitae</li>
                                <li>Etiam faucibus</li>
                                <li>Vivamus viverra</li>

                            </ul>
                            <a href="#" class="btn-price">Purchase</a>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-12 col-xs-12">
                        <div class="price-category professional">
                            <h4>Professional Package</h4>
                            <h2>25$</h2>
                            <ul>
                                <li>Nullam suscipit vitae</li>
                                <li>Etiam faucibus</li>
                                <li>Vivamus viverra</li>
                                <li>Praesent pharetra</li>
                            </ul>
                            <a href="#" class="btn-price">Purchase</a>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-12 col-xs-12">
                        <div class="price-category advance">
                            <h4>Advanced Package</h4>
                            <h2>30$</h2>
                            <ul>
                                <li>Nullam suscipit vitae</li>
                                <li>Etiam faucibus</li>
                                <li>Vivamus viverra</li>

                            </ul>
                            <a href="#" class="btn-price">Purchase</a>
                        </div>
                    </div>

                </div>
            </div> <!-- /container -->       
        </section>

        <!-- Sections -->
        <section id="testimonial" class="sections lightbg">
            <div class="container text-center">

                <div class="heading-content">
                    <h3>Testimonials</h3>
                </div>

                <!-- Example row of columns -->
                <div class="row">

                    <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">

                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">

                                <div class="item active">

                                    <div class="col-md-4">
                                        <div class="testimonial-photo">
                                            <img src="{% static 'assets/images/gallery/2.png' %}" alt="" />
                                        </div>
                                    </div>

                                    <div class="col-md-8">
                                        <div class="testimonial-content">
                                            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent lobortis lectus eget libero blandit venenatis.In blandit tortor vel congue malesuada. Suspendisse. molestie lobortis lorem dignissim pretium.</p>
                                            <h6><strong>John Doe <br />from some company</strong></h6>
                                        </div>
                                    </div>

                                </div>

                                <div class="item">

                                    <div class="col-md-4">
                                        <div class="testimonial-photo">
                                            <img src="{% static 'assets/images/gallery/2.png' %}" alt="" />
                                        </div>
                                    </div>

                                    <div class="col-md-8">
                                        <div class="testimonial-content">
                                            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent lobortis lectus eget libero blandit venenatis.In blandit tortor vel congue malesuada. Suspendisse. molestie lobortis lorem dignissim pretium.</p>
                                            <h6><strong>John Doe <br />from some company</strong></h6>
                                        </div>
                                    </div>

                                </div>

                                <div class="item">

                                    <div class="col-md-4">
                                        <div class="testimonial-photo">
                                            <img src="{% static 'assets/images/gallery/2.png' %}" alt="" />
                                        </div>
                                    </div>

                                    <div class="col-md-8">
                                        <div class="testimonial-content">
                                            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent lobortis lectus eget libero blandit venenatis.In blandit tortor vel congue malesuada. Suspendisse. molestie lobortis lorem dignissim pretium.</p>
                                            <h6><strong>John Doe <br />from some company</strong></h6>
                                        </div>
                                    </div>

                                </div>


                            </div>


                        </div>


                    </div>

                </div>	


            </div> <!-- /container -->       
        </section>

        <!-- Sections -->
        <section id="download" class="section colorsbg download">
            <div class="container text-center">

                <!-- Example row of columns -->
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="download-content">
                            <h1>Do you Like this app?</h1>
                            <button class="btn btn-primary">Download Now</button>
                        </div>
                    </div>
                </div>
            </div> <!-- /container -->       
        </section>

        <!-- Sections -->
        <section id="contact">

            <div id="map"></div>

            <div class="container text-center">

                <!-- Example row of columns -->
                <div class="row">
                    <div class="col-md-4 col-md-offset-4 col-sm-12 col-xs-12">
                        <div class="contact-form-area">
                            <form>
                                <h3>Contact</h3>	
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Your Name">
                                </div>

                                <div class="form-group">
                                    <input type="email" class="form-control" placeholder="Your Email">
                                </div>

                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Your Subject">
                                </div>

                                <div class="form-group">
                                    <textarea class="form-control" rows="7" placeholder="Message"></textarea>
                                </div>

                                <button type="submit" class="btn btn-primary contact-btn">SEND</button>
                            </form>
                        </div>	
                    </div>
                </div>
            </div> <!-- /container -->       
        </section>        

{% endblock %}