-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 12 KB
/
index.html
1
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/index.css"><title>Guía de Hoteles</title></head><body><nav class="navbar navbar-expand-md navbar-dark fixed-top"><a class="navbar-brand" href="#">Guía de Hoteles</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="./index.html">Home</a></li><li class="nav-item"><a class="nav-link" href="./precios.html">Precios</a></li><li class="nav-item"><a class="nav-link" href="./about.html">Nosostros</a></li><li class="nav-item"><a class="nav-link" href="#">Preguntas</a></li><li class="nav-item"><a class="nav-link" href="#">Términos y condiciones</a></li><li class="nav-item"><a class="nav-link" href="./contacto.html">Contacto</a></li></ul></div></nav><div class="jumbotron"><h1 class="display-4">Hoteles & Turismo</h1></div><div class="container"><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item active" aria-current="page">Home</li></ol></nav><div class="d-flex"><div class="col-sm-4"><button class="btn btn-primary btn-question" type="button" data-toggle="collapse" data-target="#funciona" aria-expanded="false" aria-controls="mulTicollapse1">¿Cómo funciona?</button></div><div class="col-sm-4"><button class="btn btn-primary btn-question" type="button" data-toggle="collapse" data-target="#reserva" aria-expanded="false" aria-controls="mulTicollapse2">¿Dónde puede reservar?</button></div><div class="col-sm-4"><button class="btn btn-primary btn-question" type="button" data-toggle="collapse" data-target="#pago" aria-expanded="false" aria-controls="mulTicollapse3">¿Cómo pago?</button></div></div><div class="d-flex"><div class="col-sm-4 collapse multi-collapse" id="funciona"><p></p><h3>¿Cómo funciona?</h3><p>Buscá los hoteles de acuerdo a tu preferencia</p><p></p></div><div class="col-sm-4 collapse multi-collapse" id="reserva"><p></p><h3>¿Donde puede reservar?</h3><p>Elige la ciudad que te interesa y luego realiza la reserva con tus datos</p><p></p></div><div class="col-sm-4 collapse multi-collapse" id="pago"><p></p><h3>¿Cómo pago?</h3><p>Utiliza tu tarjeta favorita</p><p></p></div></div><hr><div id="carouselControls" class="carousel slide" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img class="d-block w-100" src="images/slide1.jpg" alt="primer slide"></div><div class="carousel-item"><img class="d-block w-100" src="images/slide2.jpg" alt="segundo slide"></div><div class="carousel-item"><img class="d-block w-100" src="images/slide3.jpg" alt="tercer slide"></div><div class="carousel-item"><img class="d-block w-100" src="images/slide4.jpg" alt="cuarto slide"></div><div class="carousel-item"><img class="d-block w-100" src="images/slide5.jpg" alt="quinto slide"></div><a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Anterior</span> </a><a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Siguiente</span></a></div></div><div class="d-flex flex-wrap flex-row-reverse"><div class="card card-hotel d-flex flex-column justify-content-between ml-2"><img src="images/image5.jpg" class="card-img-top" alt="Responsiveimage "><div class="card-body"><h5 class="card-title">Hotel Barcelona</h5><h6 class="card-subtitle text-muted">España</h6><p class="card-text">Buscá los hoteles de acuerdo a tu preferencia</p><button type="button" class="btn btn-outline-success btnContact" data-toggle="modal" data-target="#contacto">Contacto</button></div><div class="card-footer"><button class="btn btn-primary btn-reserva" data-toggle="modal" data-target="#unaReserva"><span class="oi oi-plus footer-address-icon"></span> Reservar</button></div></div><div class="card card-hotel d-flex flex-column justify-content-between ml-2"><img src="images/image5.jpg" class="card-img-top" alt="Responsiveimage "><div class="card-body"><h5 class="card-title" data-toggle="tooltip" `data-placement="top" title="Las primeras reservas cuentan con clases de tango gratis">Hotel Buenos Aires</h5><h6 class="card-subtitle text-muted">Argentina</h6><p class="card-text">Hotel ubicado en pleno centro.</p><button type="button" class="btn btn-outline-success btnContact" data-toggle="modal" data-target="#contacto">Contacto</button></div><div class="card-footer"><button class="btn btn-primary btn-reserva" data-toggle="modal" data-target="#unaReserva"><span class="oi oi-plus footer-address-icon"></span> Reservar</button></div></div><div class="card card-hotel d-flex flex-column justify-content-between ml-2"><img src="images/image5.jpg" class="card-img-top" alt="Responsiveimage "><div class="card-body"><h5 class="card-title" data-toggle="popover" title="Promociones" data-content="Consulte las promociones 2021">Hotel Lima</h5><h6 class="card-subtitle text-muted">Perú</h6><p class="card-text">Hotel ubicado en pleno centro.</p><button type="button" class="btn btn-outline-success btnContact" data-toggle="modal" data-target="#contacto">Contacto</button></div><div class="card-footer"><button class="btn btn-primary btn-reserva" data-toggle="modal" data-target="#unaReserva"><span class="oi oi-plus footer-address-icon"></span> Reservar</button></div></div><div class="card card-hotel d-flex flex-column justify-content-between ml-2"><img src="images/image5.jpg" class="card-img-top" alt="Responsiveimage "><div class="card-body"><h5 class="card-title" data-toggle="popover" title="Promocion" data-content="Incluye shows y actividades recreativas">Hotel Río de Janeiro</h5><h6 class="card-subtitle text-muted">Brazil</h6><p class="card-text">Hotel ubicado en pleno centro de Río de Janeiro a pocos metros de la playa</p><button type="button" class="btn btn-outline-success btnContact" data-toggle="modal" data-target="#contacto">Contacto</button></div><div class="card-footer"><button class="btn btn-primary btn-reserva" data-toggle="modal" data-target="#unaReserva"><span class="oi oi-plus footer-address-icon"></span> Reservar</button></div></div><div class="card card-hotel d-flex flex-column justify-content-between ml-2"><img src="images/image5.jpg" class="card-img-top" alt="Responsiveimage "><div class="card-body"><h5 class="card-title" data-toggle="tooltip" `data-placement="top" title="¡Las reservas hechas en diciembre tienen desayuno gratis!">Hotel La Paz</h5><h6 class="card-subtitle text-muted">Bolivia</h6><p class="card-text">Hotel ubicado en pleno centro.</p><button type="button" class="btn btn-outline-success btnContact" data-toggle="modal" data-target="#contacto">Contacto</button></div><div class="card-footer"><button class="btn btn-primary btn-reserva" data-toggle="modal" data-target="#unaReserva"><span class="oi oi-plus footer-address-icon"></span> Reservar</button></div></div><div class="card card-hotel d-flex flex-column justify-content-between ml-2"><img src="images/image5.jpg" class="card-img-top" alt="Responsive image "><div class="card-body"><h5 class="card-title" data-toggle="popover" title="Promocion" data-content="Comprá hasta el 31 de diciembre y obtené una devolución de 30% ">Hotel Río Madrid</h5><h6 class="card-subtitle text-muted">España</h6><p class="card-text">Hotel ubicado en pleno centro.</p><button type="button" class="btn btn-outline-success btnContact" data-toggle="modal" data-target="#contacto">Contacto</button></div><div class="card-footer"><button class="btn btn-primary btn-reserva" data-toggle="modal" data-target="#unaReserva"><span class="oi oi-plus footer-address-icon"></span> Reservar</button></div></div><div class="card card-hotel d-flex flex-column justify-content-between ml-2"><img src="images/image5.jpg" class="card-img-top" alt="Responsiveimage "><div class="card-body"><h5 class="card-title" data-toggle="tooltip" `data-placement="top" title="¡Los traslados entre el aeropuerto y el hotel estan incluidos!">Hotel San Pablo</h5><h6 class="card-subtitle text-muted">Brazil</h6><p class="card-text">Hotel ubicado en pleno centro.</p><button type="button" class="btn btn-outline-success btnContact" data-toggle="modal" data-target="#contacto" id="contactoBtn">Contacto</button></div><div class="card-footer"><button class="btn btn-primary btn-reserva" data-toggle="modal" data-target="#unaReserva"><span class="oi oi-plus footer-address-icon"></span> Reservar</button></div></div></div></div><br><div class="modal fade" id="contacto" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Contacto con el hotel</h5><button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><form><div class="form-group"><label for="recipient-name" class="col-label">Tu email</label> <input type="text" class="form-control" id="recipient-name"></div><div class="form-group"><label for="message-text" class="col-form-label">Mensaje:</label> <textarea class="form-control" id="mesagge-text" name="" cols="30" rows="10"></textarea></div></form><div class="modal-footer"><button type="button" class="btn btn-success">Enviar</button></div></div></div></div></div><div class="modal fade" id="unaReserva" tabindex="-1" role="dialog" aria-labelledby="example-Modal-Label" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="example-Modal-Label">Reserva</h5><button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><form><div class="form-group"><label for="recipient-name" class="col-label">Nombre</label> <input type="text" class="form-control" id="recipient-name"></div><div class="form-group"><label for="recipient-email" class="col-label">Tu email</label> <input type="text" class="form-control" id="recipient-email"></div><div class="form-group"><label for="telefono" class="col-form-label">Telefono</label> <input type="text" class="form-control" id="telefono"></div><div class="form-group"><label for="llegada" class="col-form-label">Fecha y hora de llegada</label> <input type="datetime-local" class="form-control" id="llegada"></div><div class="form-group"><label for="estadia" class="col-form-label">Días de permanencia</label> <select class="custom-select mr-sm-2" id="estadia"><option selected="selected">1</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option></select></div></form><div class="modal-footer"><button type="button" class="btn btn-success">Reservar</button></div></div></div></div></div><footer><div class="row"><div class="col-sm-4 d-flex flex-wrap"><ul><li><a href="#"><i class="fab fa-facebook-square fa-2x icon-footer"></i></a></li><li><a href="#"><i class="fab fa-twitter-square fa-2x icon-footer"></i></a></li><li><a href="#"><i class="fab fa-instagram-square fa-2x icon-footer"></i></a></li></ul></div><div class="col-sm-4 direccion"><address><h3>Oficina central</h3><p><span class="oi oi-home footer-address-icon"></span> CP 4400, Salta, Argentina</p><p><span class="oi oi-phone footer-address-icon"></span> +54-000-000000</p><p><span class="oi oi-inbox footer-address-icon"></span> sincorreo@versiondemo.com</p></address></div><div class="col-sm-4 d-flex flex-column align-items-end link-footer"><a href="about.html">Nosotros</a> <a href="precios.html">Tarifas</a> <a href="#">Términos y condiciones</a></div></div></footer><script src="js/main.js"></script></body></html>