<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="pt-br">
<head>
<title>Ah Bordo - Início</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 rel="icon" href="images/logo.jpg">
<!-- <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">Ah Bordo</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
</button>
<!-- Menu de navegação do site -->
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a href="#" class="nav-link">Início</a></li>
<li class="nav-item"><a href="pacotes.html" class="nav-link">Pacotes</a></li>
<li class="nav-item"><a href="login/login.html" class="nav-link">Login</a></li>
<li class="nav-item"><a href="blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="contato.html" class="nav-link">Contato</a></li>
<li class="nav-item"><a href="fidelidade.html" class="nav-link">Descontos</a></li>
<li class="nav-item"><a href="sobrenos.html" class="nav-link">Sobre nós</a></li>
</ul>
</div>
</div>
</nav>
<!-- END nav -->
<!-- corousel da pagina de incio -->
<section class="home-slider owl-carousel">
<div class="slider-item" style="background-image:url(images/começo3.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text align-items-center justify-content-center">
<div class="col-md-12 ftco-animate text-center">
<div class="text mb-5 pb-3">
<h1 class="mb-3">Sejam Bem vindos! <br> AH BORDO</h1>
</div>
</div>
</div>
</div>
</div>
<div class="slider-item" style="background-image:url(images/começo1.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text align-items-center justify-content-center">
<div class="col-md-12 ftco-animate text-center">
<div class="text mb-5 pb-3">
<h1 class="mb-3"></h1>
</div>
</div>
</div>
</div>
</div>
<div class="slider-item" style="background-image:url(images/cristo.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text align-items-center justify-content-center">
<div class="col-md-12 ftco-animate text-center">
<div class="text mb-5 pb-3">
<h1 class="mb-3"></h1>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Fim do carrosel da pagina de inicio -->
<!-- Secao responsavel por fazer o checkin do cliente -->
<section class="ftco-booking">
<div class="container">
<div class="row">
<div class="col-lg-12">
<form action="#" class="booking-form">
<div class="row">
<div class="col-md-3 d-flex">
<div class="form-group p-4 align-self-stretch d-flex align-items-end">
<div class="wrap">
<label for="#">Check-in Data</label>
<input type="text" class="form-control checkin_date" placeholder="Check-in data">
</div>
</div>
</div>
<div class="col-md-3 d-flex">
<div class="form-group p-4 align-self-stretch d-flex align-items-end">
<div class="wrap">
<label for="#">Check-out Data</label>
<input type="text" class="form-control checkout_data" placeholder="Check-out data">
</div>
</div>
</div>
<div class="col-md d-flex">
<div class="form-group p-4 align-self-stretch d-flex align-items-end">
<div class="wrap">
<label for="#">Pousadas</label>
<div class="form-field">
<div class="select-wrap">
<div class="icon"><span class="ion-ios-arrow-down"></span></div>
<select name="" id="" class="form-control">
<option value="">Tipo dos Pacotes</option>
<option value="">Pousadas</option>
<option value="">Pousada Laguna</option>
<option value="">Pousada Saruê Natal</option>
<option value="">Pousada Casa Mar Campeche</option>
<option value="">Pousada Viver Bahia</option>
<option value="">Pousada Moá</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-md d-flex">
<div class="form-group p-4 align-self-stretch d-flex align-items-end">
<div class="wrap">
<label for="#">Clientes</label>
<div class="form-field">
<div class="select-wrap">
<div class="icon"><span class="ion-ios-arrow-down"></span></div>
<select name="" id="" class="form-control">
<option value="">0 Adulto</option>
<option value="">1 Adulto</option>
<option value="">2 Adulto</option>
<option value="">3 Adulto</option>
<option value="">4 Adulto</option>
<option value="">5 Adulto</option>
<option value="">6 Adulto</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-md d-flex">
<div class="form-group d-flex align-self-stretch">
<input type="submit" value="Verificar disponibilidade" class="btn btn-primary py-3 px-4 align-self-stretch">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Fim da secao de checkin -->
<section class="ftco-section ftc-no-pb ftc-no-pt">
<div class="container">
<div class="row">
<!-- Onde é apresentado o video -->
<div class="col-md-5 p-md-5 img img-2 d-flex justify-content-center align-items-center" style="background-image: url(images/foto.jpg);">
<a href="videos/video1.mp4" class="icon popup-vimeo d-flex justify-content-center align-items-center">
<span class="icon-play"></span>
</a>
</div>
<div class="col-md-7 py-5 wrap-about pb-md-5 ftco-animate">
<div class="heading-section heading-section-wo-line pt-md-5 pl-md-5 mb-5">
<div class="ml-md-0">
</div>
<!-- div com paragrafo falando nossa missão -->
<div class="pb-md-5">
<h2 class="mb-4">Nossa Missão</h2>
<p>A missão da Ah Bordo é fazer com que vivenciar o mundo fique mais fácil para todos. ao investir continuamente em tecnologias que ajudam a tornar as viagens mais tranquilas, o Ah Bordo conecta milhões de viajantes a experiências imperdíveis, a opções de transporte e a uma variedade de lugares incríveis para ficar - de casas e apartamentos a hotéis e muito mais.</p>
<h1>Uma Experiência Única</h1>
<p>Proporcionar às pessoas programas de viagem e entretenimento sintonizados com seu estilo e filosofia de vida. Não importa para onde você vá ou o que deseje fazer, a Ah bordo torna tudo mais fácil e oferece apoio a seus clientes 24 horas por dia, todos os dias.</p>
<ul class="ftco-social d-flex">
<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-google-plus"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section ftco-counter img" id="section-counter" style="background-image: url(images/bg_1.jpg);">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="row">
<div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text">
<strong class="number" data-number="50000">0</strong>
<span>Clientes Felizes</span>
</div>
</div>
</div>
<div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text">
<strong class="number" data-number="3000">0</strong>
<span>Pousadas</span>
</div>
</div>
</div>
<div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text">
<strong class="number" data-number="1000">0</strong>
<span>Localização</span>
</div>
</div>
</div>
<div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text">
<strong class="number" data-number="100">0</strong>
<span>Destino</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section testimony-section bg-light">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 ftco-animate">
<div class="row ftco-animate">
<div class="col-md-12">
<div class="carousel-testimony owl-carousel ftco-owl">
<div class="item">
<div class="testimony-wrap py-4 pb-5">
<div class="user-img mb-4" style="background-image: url(images/andreza1.jpg)">
<span class="quote d-flex align-items-center justify-content-center">
<i class="icon-quote-left"></i>
</span>
</div>
<div class="text text-center">
<p class="mb-4"> É o profissional responsável por gerenciar todas as atividades que concernem à área de Sistemas da empresa..</p>
<p class="name">Andreza Resende</p>
<span class="position">Gerente de programação</span>
</div>
</div>
</div>
<div class="item">
<div class="testimony-wrap py-4 pb-5">
<div class="user-img mb-4" style="background-image: url(images/carol.jpg)">
<span class="quote d-flex align-items-center justify-content-center">
<i class="icon-quote-left"></i>
</span>
</div>
<div class="text text-center">
<p class="mb-4">Realiza pesquisas de mercado ou para desenvolvimento de novos produtos. Coleta e analisa os dados, avalia os resultados alcançados na pesquisa e apresenta relatórios para melhoria dos processos.</p>
<p class="name">Carolyna Machado</p>
<span class="position">Pesquisador(a)</span>
</div>
</div>
</div>
<div class="item">
<div class="testimony-wrap py-4 pb-5">
<div class="user-img mb-4" style="background-image: url(images/stefano.jpg)">
<span class="quote d-flex align-items-center justify-content-center">
<i class="icon-quote-left"></i>
</span>
</div>
<div class="text text-center">
<p class="mb-4">O programador é o profissional que cria, desenvolve e mantém diferentes tipos de softwares em sistemas amplos ou para uso em computadores pessoais. Ele usa linguagens de programação, como html, java, c++, para criar comandos em programas, criando novas funcionalidades e utilidades.</p>
<p class="name">Stéfano Telles</p>
<span class="position">Programador </span>
</div>
</div>
</div>
<div class="item">
<div class="testimony-wrap py-4 pb-5">
<div class="user-img mb-4" style="background-image: url(images/ana1.jpg)">
<span class="quote d-flex align-items-center justify-content-center">
<i class="icon-quote-left"></i>
</span>
</div>
<div class="text text-center">
<p class="mb-4">O profissional da área de Design Gráfico cria projetos de comunicação visual e novos produtos e embalagens, desenha logotipos, formata qualquer tipo de material visual como panfletos, outdoors, páginas da internet, etc.</p>
<p class="name">Ana Clara </p>
<span class="position">Design Gráfico</span>
</div>
</div>
</div>
<div class="item">
<div class="testimony-wrap py-4 pb-5">
<div class="user-img mb-4" style="background-image: url(images/wallysson.jpg)">
<span class="quote d-flex align-items-center justify-content-center">
<i class="icon-quote-left"></i>
</span>
</div>
<div class="text text-center">
<p class="mb-4">Análise de sistemas é a atividade que tem como finalidade a realização de estudos de processos a fim de encontrar o melhor caminho racional para que a informação possa ser processada. </p>
<p class="name">Wallysson Gomes</p>
<span class="position">Análise de sistemas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center mb-5 pb-3">
<div class="col-md-7 heading-section text-center ftco-animate">
<h2>Blog recente</h2>
</div>
</div>
<div class="row d-flex">
<div class="col-md-3 d-flex ftco-animate">
<div class="blog-entry align-self-stretch">
<a href="blog-single.html" class="block-20" style="background-image: url('images/imagem_1.jpg');">
</a>
<div class="text mt-3 d-block">
<h3 class="heading mt-3"><a href="#">Pontos Turisticos de Cabo Frio</a></h3>
<div class="meta mb-3">
<div><a href="#">Dec 6, 2018</a></div>
<div><a href="#">Admin</a></div>
<div><a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 d-flex ftco-animate">
<div class="blog-entry align-self-stretch">
<a href="blog-single.html" class="block-20" style="background-image: url('images/imagem_2.jpg');">
</a>
<div class="text mt-3">
<h3 class="heading mt-3"><a href="#">Pontos Turísticos de Natal-RN</a></h3>
<div class="meta mb-3">
<div><a href="#">Dec 6, 2018</a></div>
<div><a href="#">Admin</a></div>
<div><a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 d-flex ftco-animate">
<div class="blog-entry align-self-stretch">
<a href="blog-single.html" class="block-20" style="background-image: url('images/imagem_3.jpg');">
</a>
<div class="text mt-3">
<h3 class="heading mt-3"><a href="#">Pontos Turísticos de Florianópolis-SC</a></h3>
<div class="meta mb-3">
<div><a href="#">Dec 6, 2018</a></div>
<div><a href="#">Admin</a></div>
<div><a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 d-flex ftco-animate">
<div class="blog-entry align-self-stretch">
<a href="blog-single.html" class="block-20" style="background-image: url('images/imagem_4.jpg');">
</a>
<div class="text mt-3">
<h3 class="heading mt-3"><a href="#">Pontos Turísticos do Rio de Janeiro</a></h3>
<div class="meta mb-3">
<div><a href="#">Dec 6, 2018</a></div>
<div><a href="#">Admin</a></div>
<div><a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="instagram">
<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) 3531-6620</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>
body {
margin: 0;
padding: 0;
}
a.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 20px;
line-height: 20px;
text-decoration: none;
color: black;
font-family: Helvetica Neue,sans-serif;
font-weight: 700;
margin: 16px 46px;
}
nav.main-navigation {
position: relative;
}
nav.main-navigation ul.nav-list {
margin: 0;
padding: 0;
list-style: none;
position: relative;
text-align: right;
}
.nav-list li.nav-list-item {
display: inline-block;
line-height: 40px;
margin-left: 30px;
margin-top: 15px;
}
a.nav-link {
text-decoration: none;
font-size: 18px;
font-family: sans-serif;
font-weight: 500;
cursor: pointer;
position: relative;
color: #404040;
}
@keyframes FadeIn {
0% {
opacity: 0;
-webkit-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
pointer-events: auto;
transition: cubic-bezier(0.4, 0, 0.2, 1);
}
}
.nav-list li {
animation: FadeIn 1s cubic-bezier(0.65, 0.05, 0.36, 1);
animation-fill-mode: both;
}
.nav-list li:nth-child(1) {
animation-delay: .3s;
}
.nav-list li:nth-child(2) {
animation-delay: .6s;
}
.nav-list li:nth-child(3) {
animation-delay: .9s;
}
.nav-list li:nth-child(4) {
animation-delay: 1.2s;
}
.nav-list li:nth-child(5) {
animation-delay: 1.5s;
}
/* Animation */
@keyframes fadeInUp {
from {
transform: translate3d(0, 40px, 0)
}
to {
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@-webkit-keyframes fadeInUp {
from {
transform: translate3d(0, 40px, 0)
}
to {
transform: translate3d(0, 0, 0);
opacity: 1
}
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: both
}
.animatedFadeInUp {
opacity: 0
}
.fadeInUp {
opacity: 0;
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
}
