<%- include ('./layouts/header.ejs') %>

    <header id="first">
        <div class="header-content">
            <div class="inner">
                <h1 class="cursive">Visita la ciudad Imperial</h1>
                <h4>Mientras te alojas en un sitio seguro y tranquilo</h4>
                <hr><a href="#two" class="btn btn-primary btn-xl page-scroll">Empezar</a>
            </div>
        </div>
        <video autoplay="" loop="" class="fillWidth fadeIn wow collapse in" data-wow-delay="0.5s"
            poster="https://i.imgur.com/iv0RNiW.mp4" id="video-background">
            <source src="https://i.imgur.com/iv0RNiW.mp4" type="video/mp4">Your
            browser does not support the video tag. I suggest you upgrade your browser.
        </video>
    </header>

    <section id="two">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="margin-top-0 text-primary">Habitaciones</h2>
                    <hr class="primary">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-4 text-center">
                    <div class="feature">
                        <i class="icon-lg ion-ios-bed wow fadeIn" data-wow-delay=".3s"></i>
                        <h3>Matrimonial</h3>
                        <p class="text-muted">Ambiente amplio para parejas</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 text-center">
                    <div class="feature">
                        <i class="icon-lg ion-md-bed wow fadeInUp" data-wow-delay=".2s"></i>
                        <h3>Simple, doble y triple</h3>
                        <p class="text-muted">Para los amigos y familia</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 text-center">
                    <div class="feature">
                        <i class="icon-lg ion-md-time wow fadeIn" data-wow-delay=".3s"></i>
                        <h3>Negocios</h3>
                        <p class="text-muted">Alojate temporalmente en un lugar comodo</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="three" class="no-padding">
        <div class="container-fluid">
            <div class="row no-gutter">
                <div class="col-lg-4 col-sm-6">
                    <a href="#galleryModal" class="gallery-box" data-toggle="modal"
                        data-src="https://cdn.discordapp.com/attachments/505981501972807680/921250639227527179/h3.png">
                        <img src="https://cdn.discordapp.com/attachments/505981501972807680/921250639227527179/h3.png"
                            class="img-responsive" alt="Image 1">
                        <div class="gallery-box-caption">
                            <div class="gallery-box-content">
                                <div>
                                    <i class="icon-lg ion-ios-search"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a href="#galleryModal" class="gallery-box" data-toggle="modal"
                        data-src="https://cdn.discordapp.com/attachments/505981501972807680/921250639483396126/h4.png">
                        <img src="https://cdn.discordapp.com/attachments/505981501972807680/921250639483396126/h4.png"
                            class="img-responsive" alt="Image 2">
                        <div class="gallery-box-caption">
                            <div class="gallery-box-content">
                                <div>
                                    <i class="icon-lg ion-ios-search"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a href="#galleryModal" class="gallery-box" data-toggle="modal"
                        data-src="https://cdn.discordapp.com/attachments/505981501972807680/921250638237675551/h5.png">
                        <img src="https://cdn.discordapp.com/attachments/505981501972807680/921250638237675551/h5.png"
                            class="img-responsive" alt="Image 3">
                        <div class="gallery-box-caption">
                            <div class="gallery-box-content">
                                <div>
                                    <i class="icon-lg ion-ios-search"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a href="#galleryModal" class="gallery-box" data-toggle="modal"
                        data-src="https://cdn.discordapp.com/attachments/505981501972807680/921250638451593286/h6.png">
                        <img src="https://cdn.discordapp.com/attachments/505981501972807680/921250638451593286/h6.png"
                            class="img-responsive" alt="Image 4">
                        <div class="gallery-box-caption">
                            <div class="gallery-box-content">
                                <div>
                                    <i class="icon-lg ion-ios-search"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a href="#galleryModal" class="gallery-box" data-toggle="modal"
                        data-src="https://cdn.discordapp.com/attachments/505981501972807680/921250638724206642/h1.png">
                        <img src="https://cdn.discordapp.com/attachments/505981501972807680/921250638724206642/h1.png"
                            class="img-responsive" alt="Image 5">
                        <div class="gallery-box-caption">
                            <div class="gallery-box-content">
                                <div>
                                    <i class="icon-lg ion-ios-search"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a href="#galleryModal" class="gallery-box" data-toggle="modal"
                        data-src="https://cdn.discordapp.com/attachments/505981501972807680/921250638975877170/h2.png">
                        <img src="https://cdn.discordapp.com/attachments/505981501972807680/921250638975877170/h2.png"
                            class="img-responsive" alt="Image 6">
                        <div class="gallery-box-caption">
                            <div class="gallery-box-content">
                                <div>
                                    <i class="icon-lg ion-ios-search"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section class="container-fluid" id="four">
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
                <h2 class="text-center text-primary">Sobre nuestras habitaciones</h2>
                <hr>
                <div class="media wow fadeInRight">
                    <h3>Simples</h3>
                    <div class="media-body media-middle">
                        <p>Desde 1 a 5 personas, habitaciones con una cama por persona!</p>
                    </div>
                    <div class="media-right">
                        <i class="icon-lg ion-ios-bolt-outline"></i>
                    </div>
                </div>
                <hr>
                <div class="media wow fadeIn">
                    <h3>Matrimoniales</h3>
                    <div class="media-left">
                        <a href="#alertModal" data-toggle="modal" data-target="#alertModal"><i
                                class="icon-lg ion-ios-cloud-download-outline"></i></a>
                    </div>
                    <div class="media-body media-middle">
                        <p>Para las parejas o familias en su luna de miel o vacaciones.</p>
                    </div>
                </div>
                <hr>
                <div class="media wow fadeInRight">
                    <h3>Negocios</h3>
                    <div class="media-body media-middle">
                        <p>Lugares acogedores para tu viaje de negocios.</p>
                    </div>
                    <div class="media-right">
                        <i class="icon-lg ion-ios-snowy"></i>
                    </div>
                </div>
                <hr>
                <div class="media wow fadeIn">
                    <h3>Servicios</h3>
                    <div class="media-left">
                        <i class="icon-lg ion-ios-heart-outline"></i>
                    </div>
                    <div class="media-body media-middle">
                        <p>Todas las habitaciones cuentan con baño propio, ducha caliente, TV cable e internet.</p>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    </section>
    <aside class="bg-dark">
        <div class="container text-center">
            <div class="call-to-action">
                <h2 class="text-primary">Empezar</h2>
                <a href="/reserva" target="_self" class="btn btn-default btn-lg wow flipInX">Reservar ahora</a>
            </div>
            <br>
            <hr />
            <br>
        </div>
    </aside>
    <section id="last">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <h2 class="margin-top-0 wow fadeIn">Contactenos</h2>
                    <hr class="primary">
                    <p>Apreciamos su opinión.</p>
                </div>
                <div class="col-lg-10 col-lg-offset-1 text-center">
                    <form class="contact-form row">
                        <div class="col-md-4">
                            <label></label>
                            <input type="text" class="form-control" placeholder="Nombre">
                        </div>
                        <div class="col-md-4">
                            <label></label>
                            <input type="text" class="form-control" placeholder="Correo">
                        </div>
                        <div class="col-md-4">
                            <label></label>
                            <input type="text" class="form-control" placeholder="Telefono">
                        </div>
                        <div class="col-md-12">
                            <label></label>
                            <textarea class="form-control" rows="9" placeholder="Su mensaje aquí..."></textarea>
                        </div>
                        <div class="col-md-4 col-md-offset-4">
                            <label></label>
                            <button type="button" data-toggle="modal" data-target="#alertModal"
                                class="btn btn-primary btn-block btn-lg">Enviar <i
                                    class="ion-android-arrow-forward"></i></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <%- include ('./layouts/footer.ejs') %>