<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacote Natal-RN</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.timepicker.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/icomoon.css">
<link rel="stylesheet" href="css/style.css">
<!-- <link>tag define a relação entre o documento atual e um recurso externo, é mais frequentemente usada para vincular a folhas de estilo externas.-->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container">
<a class="navbar-brand" href="index.html">Deluxe</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
<!-- a tag <span> O atributo span define o número de colunas que um elemento <colgroup> deve abranger.-->
<!--A <button>tag define um botão clicável.
Dentro de um <button>elemento, você pode colocar texto (e marcas como <i>, <strong>, <br>, <img>, etc.). Isso não é possível com um botão criado com o elemento <input> ! -->
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item active"><a href="rooms.html" class="nav-link">Rooms</a></li>
<li class="nav-item"><a href="restaurant.html" class="nav-link">Restaurant</a></li>
<li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
<!--A <ul>tag define uma lista não ordenada (com marcadores).
Use a <ul>tag junto com a tag <li> para criar listas não ordenadas. -->
</ul>
</div>
</div>
</nav>
<!-- A <div>tag define uma divisão ou seção em um documento HTML.-->
<!-- nav cria uma barra de navegação
fim da Nav-->
<div class="hero-wrap" style="background-image: url('images/bg_1.jpg');">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text d-flex align-itemd-end justify-content-center">
<div class="col-md-9 ftco-animate text-center d-flex align-items-end justify-content-center">
<div class="text">
<p class="breadcrumbs mb-2" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }"><span class="mr-2"><a href="index.html">Inicio</a></span> <span class="mr-2"><a href="rooms.html">Pacotes</a></span> <span></span></p>
<h1 class="mb-4 bread">Pousada Sarue Natal</h1>
<!-- <h1> Por página - isso deve representar o título / assunto principal de toda a página. Além disso, não pule os níveis de título - comece com <h1> -->
</div>
</div>
</div>
</div>
</div>
<section class="ftco-section">
<!--A <section>tag define uma seção em um documento. -->
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-md-12 ftco-animate">
<h2 class="mb-4">Suíte Dupla</h2>
<div class="single-slider owl-carousel">
<div class="item">
<div class="room-img" style="background-image: url(images/imagem4.jpeg);"></div>
</div>
<div class="item">
<div class="room-img" style="background-image: url(images/imagem5.jpeg);"></div>
</div>
<div class="item">
<div class="room-img" style="background-image: url(images/imagem6.jpeg);"></div>
</div>
</div>
</div>
</div>
<div class="col-md-12 room-single mt-4 mb-5 ftco-animate">
<p>Pousada charmosa, aconchegante e confortável em local privilegiado próximo ao Morro do Careca, Ponta Negra em Natal / RN.</p>
<div class="d-md-flex mt-5 mb-5">
<ul class="list">
<li><span>Ar condicionado</span></li>
<li><span>Smart TV</span> </li>
</ul>
<ul class="list ml-md-5">
<li><span> Wi-Fi</span></li>
<li><span>Frigobar</span></li>
</ul>
</div>
</div>
<div class="col-md-12 room-single ftco-animate mb-5 mt-4">
<h3 class="mb-4">Faça um tour pela pousada</h3>
<div class="block-16">
<figure>
<img src="images/room-4.jpg" alt="Image placeholder" class="img-fluid">
<a href="https://vimeo.com/45830194" class="play-button popup-vimeo"><span class="icon-play"></span></a>
<!--A <figure>tag especifica conteúdo independente, como ilustrações, diagramas, fotos, listagens de código, etc. -->
</figure>
</div>
</div>
<div class="col-md-12 properties-single ftco-animate mb-5 mt-4">
<h4 class="mb-4">Avaliações</h4>
<div class="row">
<div class="col-md-6">
<form method="post" class="star-rating">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<!--A input()função permite a entrada do usuário. -->
<label class="form-check-label" for="exampleCheck1">
<p class="rate"><span><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i> 100 Ratings</span></p>
<!--A <p>tag define um parágrafo.
Os navegadores adicionam automaticamente uma única linha em branco antes e depois de cada <p> elemento. -->
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<!--A input()função permite a entrada do usuário. -->
<label class="form-check-label" for="exampleCheck1">
<p class="rate"><span><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star-o"></i> 30 Ratings</span></p>
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<!--A input()função permite a entrada do usuário. -->
<label class="form-check-label" for="exampleCheck1">
<p class="rate"><span><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star-o"></i><i class="icon-star-o"></i> 5 Ratings</span></p>
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<!--A input()função permite a entrada do usuário. -->
<label class="form-check-label" for="exampleCheck1">
<p class="rate"><span><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star-o"></i><i class="icon-star-o"></i><i class="icon-star-o"></i> 0 Ratings</span></p>
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<!--A input()função permite a entrada do usuário. -->
<label class="form-check-label" for="exampleCheck1">
<p class="rate"><span><i class="icon-star"></i><i class="icon-star-o"></i><i class="icon-star-o"></i><i class="icon-star-o"></i><i class="icon-star-o"></i> 0 Ratings</span></p>
</label>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-12 room-single ftco-animate mb-5 mt-5">
<h4 class="mb-4">Available Room</h4>
<div class="row">
<div class="col-sm col-md-6 ftco-animate">
<div class="room">
<a href="rooms.html" class="img img-2 d-flex justify-content-center align-items-center" style="background-image: url(images/room-1.jpg);">
<div class="icon d-flex justify-content-center align-items-center">
<span class="icon-search2"></span>
</div>
</a>
<div class="text p-3 text-center">
<h3 class="mb-3"><a href="rooms.html">Suite Room</a></h3>
<p><span class="price mr-2">$120.00</span> <span class="per">per night</span></p>
<hr>
<p class="pt-1"><a href="room-single.html" class="btn-custom">View Room Details <span class="icon-long-arrow-right"></span></a></p>
</div>
</div>
</div>
<div class="col-sm col-md-6 ftco-animate">
<div class="room">
<a href="rooms.html" class="img img-2 d-flex justify-content-center align-items-center" style="background-image: url(images/room-2.jpg);">
<div class="icon d-flex justify-content-center align-items-center">
<span class="icon-search2"></span>
</div>
</a>
<div class="text p-3 text-center">
<h3 class="mb-3"><a href="rooms.html">Family Room</a></h3>
<p><span class="price mr-2">$20.00</span> <span class="per">per night</span></p>
<hr>
<p class="pt-1"><a href="room-single.html" class="btn-custom">View Room Details <span class="icon-long-arrow-right"></span></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- .col-md-8 -->
<div class="col-lg-4 sidebar ftco-animate">
<div class="sidebar-box">
<form action="#" class="search-form">
<div class="form-group">
<span class="icon fa fa-search"></span>
<input type="text" class="form-control" placeholder="Type a keyword and hit enter">
</div>
</form>
</div>
<div class="sidebar-box ftco-animate">
<div class="categories">
<h3>Categorias</h3>
<li><a href="#">Propriedades <span>(12)</span></a></li>
<li><a href="#">Inicio <span>(22)</span></a></li>
<li><a href="#">Casa<span>(37)</span></a></li>
<li><a href="#">Villa <span>(42)</span></a></li>
<li><a href="#">Apartamento <span>(14)</span></a></li>
<li><a href="#">Condomínio <span>(140)</span></a></li>
</div>
</div>
<div class="sidebar-box ftco-animate">
<h3>Blog recente</h3>
<div class="block-21 mb-4 d-flex">
<a class="blog-img mr-4" style="background-image: url(images/image_1.jpg);"></a>
<div class="text">
<h3 class="heading"><a href="#">Even the all-powerful Pointing has no control about the blind texts</a></h3>
<div class="meta">
<div><a href="#"><span class="icon-calendar"></span> July 12, 2018</a></div>
<div><a href="#"><span class="icon-person"></span> Admin</a></div>
<div><a href="#"><span class="icon-chat"></span> 19</a></div>
</div>
</div>
</div>
<div class="block-21 mb-4 d-flex">
<a class="blog-img mr-4" style="background-image: url(images/image_2.jpg);"></a>
<div class="text">
<h3 class="heading"><a href="#">Even the all-powerful Pointing has no control about the blind texts</a></h3>
<div class="meta">
<div><a href="#"><span class="icon-calendar"></span> July 12, 2018</a></div>
<div><a href="#"><span class="icon-person"></span> Admin</a></div>
<div><a href="#"><span class="icon-chat"></span> 19</a></div>
</div>
</div>
</div>
<div class="block-21 mb-4 d-flex">
<a class="blog-img mr-4" style="background-image: url(images/image_3.jpg);"></a>
<div class="text">
<h3 class="heading"><a href="#">Even the all-powerful Pointing has no control about the blind texts</a></h3>
<div class="meta">
<div><a href="#"><span class="icon-calendar"></span> July 12, 2018</a></div>
<div><a href="#"><span class="icon-person"></span> Admin</a></div>
<div><a href="#"><span class="icon-chat"></span> 19</a></div>
</div>
</div>
</div>
</div>
</section> <!-- .section -->
<section class="instagram pt-5">
<div class="container-fluid">
<div class="row no-gutters justify-content-center pb-5">
<div class="col-md-7 text-center heading-section ftco-animate">
<h2><span>Instagram</span></h2>
</div>
</div>
<div class="row no-gutters">
<div class="col-sm-12 col-md ftco-animate">
<a href="images/insta-1.jpg" class="insta-img image-popup" style="background-image: url(images/insta-1.jpg);">
<div class="icon d-flex justify-content-center">
<span class="icon-instagram align-self-center"></span>
</div>
</a>
</div>
<div class="col-sm-12 col-md ftco-animate">
<a href="images/insta-2.jpg" class="insta-img image-popup" style="background-image: url(images/insta-2.jpg);">
<div class="icon d-flex justify-content-center">
<span class="icon-instagram align-self-center"></span>
</div>
</a>
</div>
<div class="col-sm-12 col-md ftco-animate">
<a href="images/insta-3.jpg" class="insta-img image-popup" style="background-image: url(images/insta-3.jpg);">
<div class="icon d-flex justify-content-center">
<span class="icon-instagram align-self-center"></span>
</div>
</a>
</div>
<div class="col-sm-12 col-md ftco-animate">
<a href="images/insta-4.jpg" class="insta-img image-popup" style="background-image: url(images/insta-4.jpg);">
<div class="icon d-flex justify-content-center">
<span class="icon-instagram align-self-center"></span>
</div>
</a>
</div>
<div class="col-sm-12 col-md ftco-animate">
<a href="images/insta-5.jpg" class="insta-img image-popup" style="background-image: url(images/insta-5.jpg);">
<div class="icon d-flex justify-content-center">
<span class="icon-instagram align-self-center"></span>
</div>
</a>
</div>
</div>
</div>
</section>
<footer class="ftco-footer ftco-bg-dark ftco-section">
<div class="container">
<div class="row mb-5">
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Site Ah Bordo</h2>
<p>Ah Bordo oferece a você a melhor experiencia. Mostrando os melhores lugares e hospedagens sensacionais onde o conforto e segurança são os pontos principais. Venha fazer parte dessa equipe.</p>
<ul class="ftco-footer-social list-unstyled float-md-left float-lft mt-5">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4 ml-md-5">
<h2 class="ftco-heading-2">Links Úteis</h2>
<ul class="list-unstyled">
<li><a href="#" class="py-2 d-block">Blog</a></li>
<li><a href="#" class="py-2 d-block">Pousadas</a></li>
<li><a href="#" class="py-2 d-block">Facilidades</a></li>
<li><a href="#" class="py-2 d-block">Cartão Fidelidade</a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Categorias</h2>
<ul class="list-unstyled">
<li><a href="#" class="py-2 d-block">Carreira</a></li>
<li><a href="#" class="py-2 d-block">Sobre nós</a></li>
<li><a href="#" class="py-2 d-block">Contato</a></li>
<li><a href="#" class="py-2 d-block">Serviços</a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Tire suas Dúvidas</h2>
<div class="block-23 mb-3">
<ul>
<li><span class="icon icon-map-marker"></span><span class="text">Rede Cidadã - Av. dos Andradas, N°302 Centro Belo Horizonte-MG, CEP:30120-010</span></li>
<li><a href="#"><span class="icon icon-phone"></span><span class="text">(31) 35316620/span></a></li>
<li><a href="#"><span class="icon icon-envelope"></span><span class="text">ahbordo@gmail.com</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p><!-- O link de volta para Colorlib não pode ser removido. O modelo é licenciado sob CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> Todos os direitos reservados<i class="icon-heart color-danger" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
</footer>
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.timepicker.min.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>
</body>
</html>
