@extends('layouts.app')

@section('content')


   <section class="main">
        <div class="overlay"></div>
        <div class="container">

            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="logo">
                        <img src="{{ asset('img/logorojo.png')}}" class="center-block img-responsive"/>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="welcome-message text-center">
                        <h1>Haciendas de Yucatán</h1>
                    </div>
                    
                   
                    
                </div>
            </div>
            
        </div>

        </div>

    </section>

    <section id="services">
        <div class="container">
            <div class="row">
                <h2 class="text-center">Conzca mas acerca de nuestra aplicación</h2>
                <hr>
                <div class="col-md-3 col-sm-6">
                    <div class="service-block">
                        <div class="service_box_left">
                            <img src="{{ asset('img/ubicandome.jpg')}}" class="center-block img-responsive"/>
                        </div>
                        <div class="service_box_right">
                            <h3>Ubicación</h3>
                            <p>En esta sección de la aplicación podra encontrar opciones muy interesantes con los cuales podra interacctuar. </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3 col-sm-6">
                    <div class="service-block">
                        <div class="service_box_left">
                            <img src="{{ asset('img/historia.jpg')}}" class="center-block img-responsive"/>
                        </div>
                        <div class="service_box_right">
                            <h3>Historia</h3>
                            <p>En esta sección de la aplicación podra encontrar opciones muy interesantes con los cuales podra interacctuar. </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3 col-sm-6">
                    <div class="service-block">
                        <div class="service_box_left">
                            <img src="{{ asset('img/mitos.jpg')}}" class="center-block img-responsive"/>
                        </div>
                        <div class="service_box_right">
                            <h3>Mitos</h3>
                            <p>En esta sección de la aplicación podra encontrar opciones muy interesantes con los cuales podra interacctuar. </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3 col-sm-6">
                    <div class="service-block">
                        <div class="service_box_left">
                            <img src="{{ asset('img/comollegar.jpg')}}" class="center-block img-responsive"/>
                        </div>
                        <div class="service_box_right">
                            <h3>Como LLegar</h3>
                            <p>En esta sección de la aplicación podra encontrar opciones muy interesantes con los cuales podra interacctuar. </p>
                        </div>
                    </div>
                </div>
                
                
                
               
                
            </div>
        </div>
    </section>

    <div id="social">
        <div class="social-bg-overlay">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        <div class="gerardo-social">
                            <ul>
                                <li><a href="#" class="fa fa-facebook"></a></li>
                                <li><a href="#" class="fa fa-twitter"></a></li>
                                <li><a href="#" class="fa fa-google-plus"></a></li>
                                <li><a href="#" class="fa fa-linkedin"></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section id="about">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-xs-12 about-us">
                    <h2 class="about-head">Something <span>About Us</span></h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum urna non turpis tristique, eget porta mi vulputate. Vivamus tempor iaculis egestas. Ut ullamcorper, nibh sit amet pharetra commodo, risus nisi posuere ligula, eget ultricies mi est id ipsum. Phasellus fermentum velit id ante gravida euismod.</p>
                    <p>Duis lacinia ligula libero, pretium placerat mauris tempus id. Nulla imperdiet molestie vulputate. Cras cursus varius posuere. Pellentesque at risus commodo, ultricies eros vel, pellentesque purus. Aliquam neque leo, rutrum id tempus vel, vulputate non arcu.</p>
                    <h3>Our <span>Gallery</span></h3>
                    <div class="about-gallery">
                        <a href="#!" data-lightbox="image-1" data-title="HTML5">
                            <img src="{{ asset('img/comollegar.jpg')}}" class="img-responsive"></a>
                        <a href="#!" data-lightbox="image-1" data-title="HTML5">
                            <img src="{{ asset('img/comollegar.jpg')}}" class="img-responsive"></a>
                        <a href="#!" data-lightbox="image-1" data-title="JavaScript">
                            <img src="{{ asset('img/comollegar.jpg')}}" class="img-responsive"></a>
                        <a href="#!" data-lightbox="image-1" data-title="JQuery">
                            <img src="{{ asset('img/comollegar.jpg')}}" class="img-responsive"></a>
                        <a href="#!" data-lightbox="image-1" data-title="PHP">
                            <img src="{{ asset('img/comollegar.jpg')}}" class="img-responsive"></a>
                        <a href="#!" data-lightbox="image-1" data-title="CSS3">
                            <img src="{{ asset('img/comollegar.jpg')}}" class="img-responsive"></a>
                        <a href="#!" data-lightbox="image-1" data-title="HTML5">
                            <img src="{{ asset('img/comollegar.jpg')}}" class="img-responsive"></a>
                        <a href="#!" data-lightbox="image-1" data-title="JavaScript">
                            <img src="{{ asset('img/comollegar.jpg')}}" class="img-responsive"></a>
                        <a href="#!" data-lightbox="image-1" data-title="JQuery">
                            <img src="{{ asset('img/comollegar.jpg')}}" class="img-responsive"></a>
                        <a href="#!" data-lightbox="image-1" data-title="PHP">
                            <img src="{{ asset('img/comollegar.jpg')}}" class="img-responsive"></a>
                    </div>
                    
                </div>
                
                <div class="col-sm-6 col-xs-12">
                    <h2 class="about-head">Some <span> Testimonials</span></h2>
                    <div class="quote">
                        <div class="quote-icon">
                            <i class="fa fa-quote-left"></i>
                        </div>
                        <blockquote>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum urna non turpis tristique, eget porta mi vulputate. Vivamus tempor iaculis egestas. Ut ullamcorper, nibh sit amet pharetra commodo, risus nisi posuere ligula, eget ultricies mi est id ipsum. Phasellus fermentum velit id ante gravida euismod.
                        </blockquote>
                        <p class="quote-by">Gerardo E</p>
                    </div>
                    <div class="quote">
                        <div class="quote-icon">
                            <i class="fa fa-quote-left"></i>
                        </div>
                        <blockquote>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum urna non turpis tristique, eget porta mi vulputate. Vivamus tempor iaculis egestas. Ut ullamcorper, nibh sit amet pharetra commodo, risus nisi posuere ligula, eget ultricies mi est id ipsum. Phasellus fermentum velit id ante gravida euismod.
                        </blockquote>
                        <p class="quote-by">Gerardo E</p>
                    </div>
                    <div class="quote">
                        <div class="quote-icon">
                            <i class="fa fa-quote-left"></i>
                        </div>
                        <blockquote>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum urna non turpis tristique, eget porta mi vulputate. Vivamus tempor iaculis egestas. Ut ullamcorper, nibh sit amet pharetra commodo, risus nisi posuere ligula, eget ultricies mi est id ipsum. Phasellus fermentum velit id ante gravida euismod.
                        </blockquote>
                        <p class="quote-by">Gerardo E</p>
                    </div>
                </div>
                
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="contac-bg-overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <form id="contactForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Name" id="name" />
                                </div>
                                <div class="form-group">
                                    <input type="email" class="form-control" placeholder="Email" id="email" />
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control" placeholder="Password" id="pass" />
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <textarea type="text" class="form-control" placeholder="Message" id="massage"></textarea>
                                </div>
                                <button type="submit" class="contact">send message</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-4">
                    <h3>Our <span>Address</span></h3>
                    <address>
                        Bécal, Campeche
                    </address>
                    <div class="contact-number">
                        <p><span class="fa fa-phone"></span> 1234567890</p>
                    </div>
                    <div class="contact-mobile">
                        <p><span class="fa fa-mobile"></span> 1234567890</p>
                    </div>
                    <div class="contact-email">
                        <p><span class="fa fa-envelope-o"></span> example@outlook.com</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

     <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <p> &copy; Haciendas de Yucatán</p>
                </div>
            </div>
        </div>
    </div>

@endsection