<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>
<!--links para o funcionamento da pág-->
<meta charset="utf-8">
<title>Ha_Bordo.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="estilos/estilopag/sty.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="estilos/estilopag/estilo1.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body>
<!--inicio da nav-bar-->
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm bg-transparent fixed-top"> <a href="#" class="navbar-brand font-weight-bold d-block d-lg-none"></a>
<div id="navbarContent" class="collapse navbar-collapse">
<ul class="navbar-nav mx-auto">
<h4 class="logo" style="color: #87CEEB">HA BORDO</h4><!--titulo usado como logo-->
<!--itens da nav-->
<li class="nav-item dropdown megamenu"><a id="megamneu" href="index.html" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link font-weight-bold text-uppercase disabled">Ínicio</a>
<li class="nav-item"><a href="destino.html" class="nav-link font-weight-bold text-uppercase">Destinos</a></li>
<li class="nav-item"><a href="promo.html" class="nav-link font-weight-bold text-uppercase">Pacotes</a></li>
<li class="nav-item"><a href="sobrenos.html" class="nav-link font-weight-bold text-uppercase">Contato</a></li>
</ul>
</div>
</nav>
<!--carrosel com informações sobre o app-->
<div id="home" class="slider">
<div id="main_slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#main_slider" data-slide-to="0" class="active"></li>
<li data-target="#main_slider" data-slide-to="1"></li>
<li data-target="#main_slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://www.lotescbl.com.br/wp-content/uploads/2019/11/conheca-sete-praias-de-aracruz-1280x720.jpg" alt="slider_img">
<div class="ovarlay_slide_cont">
<h2>Ha Bordo</h2>
<h4>Pacotes Promocionais só aqui!</h4>
<p>Os melhores hotéis, pacotes e passagens aéreas para uma viagem inesquecível. Aproveite! Reserve agora pacotes nacionais com os melhores preços na Ha Bordo</p>
<a href="telalogin.php"><button class="button button2">Entre</button></a>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://correiodoestadoonline.com.br/arquivos/noticias/CONCURSO_FOTO.jpg" height="710" alt="slider_img">
<div class="ovarlay_slide_cont">
<h2>Pacotes Promocionais</h2>
<h4>Descontos imperdivéis</h4>
<p>Os melhores hotéis, pacotes e passagens aéreas para uma viagem inesquecível. Aproveite! Reserve agora pacotes nacionais com os melhores preços na Ha Bordo</p>
<a href="http://127.0.0.1/curso/html/projeto-final/telaLogin.php"><button class="button button2">Entre</button></a>
</div>
</div>
</div>
<!--proximo e anterior-->
<a class="carousel-control-prev" href="#main_slider" role="button" data-slide="prev">
<img src="imagens/left.png" alt="#" />
</a>
<a class="carousel-control-next" href="#main_slider" role="button" data-slide="next">
<img src="imagens/right.png" alt="#" />
</a>
</div>
</div>
<!--informação sobre aplicativo e função-->
<div id="about" class="layout_padding">
<div class="container">
<div class="row">
<div class="col-md-5">
<h4>Nosso Aplicativo</h4>
<h3 style="text-transform: none !important">Serviços</h3>
<p>O há bordo é um aplicativo de viagem desenvolvido para programar pacotes de acordo com a vontade e condição do cliente, além de que ele pode ajudar desde a escolha do destino até a reserva de hotéis, que cabem no seu bolso.</p>
</div>
<div class="col-md-6 offset-md-1">
<div class="full text_align_center">
<img class="img-responsive" src="imagens/v.png" alt="#" />
</div>
</div>
</div>
</div>
</div>
<!--sobre o que o aplicativo oferece-->
<div id="hiw" class="layout_padding" style="background: #1a2428;">
<div class="container">
<div class="row">
<div class="col-md-7">
<h3 class="white_font">Planeje sua viajem</h3>
<p class="white_font">Opções de personalização de seu pacote, escolha seu meio de transporte e até sua acomodação.</p>
</div>
<div class="col-md-5">
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="#"><img class="margin_top_30 img-responsive" src="imagens/blog1.jpg" alt="#" />
<h3 class="blog_head">Pacotes Personalizados</h3></a>
</div>
<div class="col-md-4">
<a href="#"> <img class="margin_top_30 img-responsive" src="https://www.galeriadaarquitetura.com.br/Img/projeto/SF1/367/casa-paraty2255.jpg" height="330" alt="#" />
<h3 class="blog_head">Hospedagem</h3></a>
</div>
<div class="col-md-4">
<a href="#"><img class="margin_top_30 img-responsive" src="https://media-cdn.tripadvisor.com/media/photo-s/15/22/fc/f3/vista-do-topo-do-morro.jpg" height="330" alt="#" />
<h3 class="blog_head">Passeios</h3></a>
</div>
</div>
</div>
</div>
<!--informações sobre serviço do aplicativo-->
<div id="service" class=" layout_padding">
<div class="container">
<div class="row">
<div class="col-md-7">
<h3>OUTROS SERVIÇOS</h3>
<p>Nossos serviços irão ir além de construir pacotes.</p>
</div>
<div class="col-md-5">
</div>
</div>
<div class="row">
<div class="col-md-8 service_blog">
<img class="margin_top_30 img-responsive" src="https://imgs.jusbr.com/publications/images/8cd372102c205b26ce88b5efbca5071b" width="600" height="360" alt="#" />
<h4 class="blog_head" style="color: #696969">Preços de acordo com suas finanças</h4>
</div>
<div class="col-md-4 service_blog">
<img class="margin_top_30 img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ_bg_2dokOW8JNxGqXCUPgVKT4qGbmrxiZxA&usqp=CAU" height="360" alt="#" />
<h4 class="blog_head" style="color: #696969">Opção de Economia</h4>
</div>
<div class="col-md-4 service_blog">
<img class="margin_top_30 img-responsive" src="https://img.ibxk.com.br/2016/06/07/07160035082346.jpg" height="290" alt="#" />
<h4 class="blog_head" style="color: #696969">Destino Virtual</h4>
</div>
<div class="col-md-4 service_blog">
<img class="margin_top_30 img-responsive" src="https://www.autodata.com.br/admin/imagens/noticias/locadoras-reduzem-taxas-para-motoristas-de-aplicativo_8e2713d7ea9c3b8173ad9c1f8db93c59.jpg" height="290" alt="#" />
<h4 class="blog_head" style="color: #696969">Conexão com Uber</h4>
</div>
<div class="col-md-4 service_blog">
<img class="margin_top_30 img-responsive" src="https://previews.123rf.com/images/tonefotografia/tonefotografia1708/tonefotografia170800403/83424511-planning-travel-concept-thailand-passport-on-old-map.jpg" height="290" alt="#" />
<h4 class="blog_head" style="color: #696969">Escolha seu guia</h4>
</div>
</div>
</div>
</div>
<!--informação adicional-->
<div id="wcs" class=" layout_padding">
<div class="container">
<div class="row">
<div class="col-md-12 text_align_center">
<h3>Pesquisa do Cliente </h3>
<p>O que os clientes mais querem.</p>
</div>
<div class="col-md-5">
</div>
</div>
<div class="row">
<div class="col-md-11">
<div class="full testimonial_blog">
<p>Segurança</p>
<p>O que foi descoberto atráves de pesquisas é que o mais importante para um aplicativo é a segurança, para que possam navegar sem problemas.</p>
</div>
</div>
</div>
</div>
</div>
<!--rodape-->
<div class="content">
</div>
<footer id="rodape">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h3 style=" padding-top: 30px; color: white">HA BORDO </h3><!--escrita ha bordo como a logo da pag-->
</div>
<div class="col-sm-2">
<h5>Inicio</h5><!--inicio de alguns itens do rodape-->
<ul>
<li><a href="#" style="color: white">Ínicio</a></li>
<li><a href="#" style="color: white">Promoções</a></li>
<li><a href="#" style="color: white">Pacotes</a></li>
</ul>
</div>
<div class="col-sm-2">
<h5>Sobre-nós</h5><!--informações sobre a loja, separado em alguns itens-->
<ul>
<li><a href="#">Informações do App</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="col-sm-2">
<h5>Suporte</h5><!--apoio da loja, separado por itens-->
<ul>
<li><a href="#"></a></li>
<li><a href="#">Telefones</a></li>
<li><a href="#">Chat</a></li>
</ul>
</div>
<div class="col-sm-3">
<div class="social-networks"><!--redes sociais-->
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
</div>
<a href="#">
<button type="button" class="btn btn-default">Contato</button><!--botão para a pagina de contato da loja-->
</a>
</div>
</div>
</div>
<div class="rodape-copyright"><!--final do rodape-->
<p style="color:black">© 2020 Copyright <i class="fa fa-heart-o" aria-hidden="true"></i> Programadores T01 Front End</p>
</div>
<!--script para o funcionamento do carrosel-->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
.logo
{
margin-right: 400px;
font-family: 'Crimson Text', serif, font-size -2px;
color: ;
}
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
* {
box-sizing: border-box;
}
.button
{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {
background-color: #008CBA;
}
nav.navbar a, nav.navbar ul li a {
color: #FFF !important;
}
nav.navbar ul li {
padding: 0 15px;
position: relative;
}
nav.navbar .search-container {
position: relative;
}
nav.navbar form {
padding: 5px;
background-color: white;
position: absolute;
width: 260px;
display: none;
right: 0;
}
nav.navbar form input {
padding: 5px 10px;
border: none;
background-color: #fff;
width: 100%;
font-weight: 300;
font-size: 16px;
}
.navbar-nav li a {
font-size: 18px;
font-weight: 300;
}
.layout_padding {
padding: 90px 0;
}
.about_section h3 {
font-size: 40px;
margin: 5px 0 25px 0;
font-weight: 600;
}
.about_section h4 {
color: #4fcaff;
font-size: 18px;
margin: 0;
}
p {
font-size: 18px;
font-weight: 300;
}
.full {
width: 100%;
float: left;
margin: 0;
}
.text_align_center {
text-align: center;
}
.img-responsive {
max-width: 100%;
}
.white_font {
color: #fff !important;
}
.h3, h3 {
font-size: 40px;
font-weight: 700;
color: #3a3a3a;
text-transform: uppercase;
}
.contact-form {
padding: 55px 65px;
background: #4fcaff;
min-height: 600px;
margin-top: 60px;
}
.contact-form form input {
width: 100%;
background: #fff;
border: none;
height: 60px;
padding: 0 20px;
text-transform: uppercase;
margin: 15px 0;
}
.contact-form form textarea {
width: 100%;
background: #fff;
border: none;
min-height: 120px;
padding: 15px 20px;
text-transform: uppercase;
margin: 15px 0;
}
.contact-form form input[type="submit"] {
background: #fa3e19;
color: #fff;
width: 190px;
margin: 15px auto 0;
font-size: 19px;
font-weight: 300;
float: none;
display: flex;
cursor: pointer;
}
.contact-form form input[type="submit"]:hover,
.contact-form form input[type="submit"]:focus {
background: #111;
color: #fff;
transition: ease all 0.5s;
}
/* header */
header {
position: relative;
color: #FFF;
font-family: 'Roboto', sans-serif;
}
header .container {
height: 100%
}
header .container > div {
margin: 0 auto;
position: relative;
/* text-align: center;*/
}
header .container > div h1 {
font-size: 90px;
}
header button {
background-color: transparent;
display: block;
border: 1px solid #FFF;
border-radius: 50px;
padding: 0;
margin: 30px auto;
}
header button a {
padding: 10px 40px;
display: block;
color: #FFF;
}
header button:hover {
background-color: #bd8cbf;
border: 1px solid #bd8cbf;
}
header button:hover a {
color: white;
}
h3.blog_head {
width: 100%;
float: left;
background: #fff;
text-align: center;
font-size: 25px;
text-transform: uppercase;
color: #090101;
margin: 0;
min-height: 75px;
line-height: 75px;
}
/* agency */
/* statistics */
.statistics {
padding: 50px 0;
font-family: sans-serif;
}
.statistics i, .statistics p {
color: #bd8cbf;
}
.statistics i {
margin-bottom: 10px;
}
.statistics h3 {
font-size: 40px;
font-weight: bold;
margin-bottom: 0;
}
.ovarlay_slide_cont {
background: rgba(5,3,0,0.63);
position: absolute;
width: 60%;
margin: 0 15%;
z-index: 1111111111;
top: 135px;
left: 0;
padding: 50px 60px 70px;
}
.ovarlay_slide_cont h2 {
color: #fff;
text-transform: uppercase;
font-size: 70px;
font-weight: 700;
line-height: normal;
margin: 0;
}
.ovarlay_slide_cont h4 {
color: #4fcaff;
font-size: 32px;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 15px 0;
line-height: normal;
}
.ovarlay_slide_cont p {
color: #fff;
font-weight: 300;
margin: 0 0 30px 0;
font-size: 21px;
padding: 0 75px 0 0;
line-height: 28px;
}
/* contact */
.contact {
background-image: url('../imgs/contact.png');
background-size: cover;
}
.contact h2 {
color: white;
margin-bottom: 30px;
}
.contact .contact-form {
width: 50%;
margin: 0 auto;
}
.contact form input, .contact form textarea {
width: 100%;
outline: none;
border: none;
padding: 5px 10px;
}
.contact form input{
border-radius: 50px;
margin-bottom: 20px;
}
.contact form textarea {
resize: none;
height: 130px;
border-radius: 25px;
margin-bottom: 30px;
}
.contact form input[type="submit"] {
width: 130px;
height: 40px;
padding: 0;
line-height: 40px;
background-color: #ef44f8;
color: white;
margin: 0 auto;
display: block;
}
}
@media (max-width: 992px) {
/* header */
header h1 {
font-size: 65px !important;
}
}
@media (max-width: 768px) {
/* header */
header h1 {
font-size: 50px !important;
}
/* about */
.about-us .row > .col-lg-6:first-of-type {
display: none;
}
/* services */
.services .slide {
width: 90%
}
.services .carousel-control-next, .services .carousel-control-prev {
display: none;
}
/* agency */
.agency .container > div {
width: 87%;
}
}
.testimonial_blog {
background: #a1a1a1;
width: 100%;
padding: 40px 50px;
box-shadow: 50px 50px 0 0 #4fcaff;
}
.testimonial_blog p {
color: #fff;
}
@media (min-width: 992px) and (max-width: 1199px) {
}
@media (min-width: 768px) and (max-width: 991px) {
.h3, h3 {
font-size: 30px;
}
.about_section h3 {
font-size: 30px;
}
.about_section h4 {
color: #4fcaff;
font-size: 16px;
margin: 0;
}
h3.blog_head {
width: 100%;
float: left;
background: #fff;
text-align: center;
font-size: 18px;
text-transform: uppercase;
color: #090101;
margin: 0;
min-height: 50px;
line-height: 50px;
}
@media (max-width: 767px) {
.layout_padding {
padding: 50px 0;
}
.about_section h3 {
font-size: 30px;
margin: 10px 0 25px 0;
font-weight: 700;
line-height: 32px;
}
.h3, h3 {
font-size: 30px;
font-weight: 700;
color: #3a3a3a;
text-transform: uppercase;
margin-bottom: 15px;
}
h3.blog_head {
width: 100%;
float: left;
background: #fff;
text-align: center;
font-size: 20px;
text-transform: uppercase;
color: #090101;
margin: 0;
min-height: 55px;
line-height: 55px;
}
p {
font-size: 17px;
font-weight: 300;
}
/*estilo do rodapé*/
#rodape {
background-color: #00BFFF;
padding-top: 30px;
}
#rodape .rodape-copyright {
background-color: ;
padding-top: 3px;
padding-bottom: 0px;
text-align: center;
}
#rodape .row {
margin-bottom: 60px;
}
#rodape .navbar-brand {
margin-top: 45px;
height: 65px;
}
#rodape .rodape-copyright p {
margin: 10px;
color: #ccc;
}
#rodape ul {
list-style-type: none;/*tipo de estilo de lista*/
padding-left: 0;
line-height: 1.7; /*altura da linha*/
}
#rodape h5 {
font-size: 18px;/*tamanho da fonte*/
color: white;
font-weight: bold;/*font negrita*/
margin-top: 30px;
}
#rodape h2 a{
font-size: 50px;
text-align: center;
color: #fff;
}
#rodape a {
color: #d2d1d1;
text-decoration: none;
}
#rodape a:hover,
#rodape a:focus {
text-decoration: none;
color: white;
}
#rodape .social-networks {
text-align: center;
padding-top: 30px;
padding-bottom: 16px;
}
#rodape .social-networks a {
font-size: 32px;
color: #f9f9f9;
padding: 10px;
transition: 0.2s;
}
#rodape .social-networks a:hover {
text-decoration: none;
}
#rodape .facebook:hover {
color: #0077e2;
}
#rodape .instagram:hover {
color: purple;
}
#rodape .twitter:hover {
color: #00aced;
}
#rodape .btn {
color: white;
background-color: #d84b6b;
border-radius: 20px;
border: none;
width: 150px;
display: block;/*exibição em quadra*/
margin: 0 auto;
margin-top: 10px;
line-height: 25px;/*altura da linha*/
}
@media screen and (max-width: 767px)
{
#rodape
{
text-align: center;
}
}
#rodape
{
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
}
footer {
padding: 80px 0px 20px 0px;
}
footer .rodape
{
border-bottom: 1px solid #343434;
margin-bottom: 30px;
padding-bottom: 30px;
}
footer
{
border-bottom: none;
right-content
margin-right: 0px;
margin-bottom: 30px;
margin-bottom: 30px;
margin-left: 0px;
margin-top: 30px;
margin-bottom: 30px;
}
/* CSS utilizado para posicionar o rodapé no final da página. */
#rodape
{
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
}
footer {
padding: 80px 0px 20px 0px;
}
footer .rodape
{
border-bottom: 1px solid #343434;
margin-bottom: 30px;
padding-bottom: 30px;
}
footer
{
border-bottom: none;
right-content
margin-right: 0px;
margin-bottom: 30px;
margin-bottom: 30px;
margin-left: 0px;
margin-top: 30px;
margin-bottom: 30px;
}
