<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 ---------->
<!--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="http://127.0.0.1/curso/html/projeto-final/index.html#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link font-weight-bold text-uppercase">Ínicio</a>
<li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Destinos</a></li>
<li class="nav-item"><a href="#" class="nav-link font-weight-bold text-uppercase disabled">Pacotes</a></li>
<li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Contato</a></li>
</ul>
</div>
</nav>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicadores -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<img id src="imagens/2.gif" height="650" width="1285">
<!-- Page Content -->
<div class="services" >
<div class="container">
<form action="#" id="contact"><!--formulario para saber destino e informações sobre a viagem-->
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12"><!--selecionar onde será sua hospedagem-->
<div class="form-group">
<label>Hospedagem em:</label>
<select class="form-control">
<option value="">selecione</option>
<option value="For Rent">Rio Grande do Sul</option>
<option value="For Sale">Pernambuco</option>
<option value="For Sale">Tríplice fronteira</option>
</select>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12"><!--selecionar o lugar que deseja viajar-->
<div class="form-group">
<label>Quantidade de Pessoas:</label>
<select class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5 ou +</option>
</select>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12"><!--selecionar o tipo de hospedagem-->
<div class="form-group">
<label>Tipo de Hospedagem:</label>
<select class="form-control">
<option value="">-- selecionar --</option>
<option value="">Hotéis</option>
<option value="">Pousadas</option>
</select>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12"><!--usuario escrever quantos ele pretende gastar com hoteis e pacotes-->
<div class="form-group">
<label>Quantia máx:</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12"><!--selecionar a quantia de quartos-->
<div class="form-group">
<label>Quantidade de Quartos:</label>
<select class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5 ou +</option>
</select>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12"><!--escolher quantia de pessoas-->
<div class="form-group">
<label>Pacotes disponíveis em:</label>
<select class="form-control">
<option value="">-- selecionar --</option>
<option value=""><a href="pacote1.html"> Região Sul</a></option>
<option value="">Região Norte</option>
<option value="">Região Sudeste </option>
<option value="">Região Nordeste </option>
<option value="">Região Centro Oeste </option>
</select>
</div>
</div>
</div>
<div class="col-sm-4 offset-sm-4"><!-- button de pesquisa-->
<div class="main-button text-center">
<a href="#" class="filled-button">Buscar</a>
</div>
</div>
<br>
<br>
</form>
<div class="row"><!--informações pacote região sul-->
<div class="col-md-4">
<div class="service-item">
<img src="imagens/regiaosul.jpg" height="260" alt="">
<div class="down-content">
<h4>Pacotes (Região Sul)</h4>
<div style="margin-bottom:10px;">
<span> <del><sup>R$</sup>1000,00</del> até <sup> R$ </sup> 1210,00 </span>
</div>
<p>Hospedagem + Transporte / café da manhã e almoço inclusos / passeios</p>
<a href="http://127.0.0.1/curso/html/projeto-final/pacote.html#" class="filled-button">Pacotes disponíveis</a>
</div>
</div>
<br>
</div>
<div class="col-md-4"><!--informações pacote região norte-->
<div class="service-item">
<img src="imagens/regiaonorte.jpg" height="260" alt="">
<div class="down-content">
<h4>Pacotes (Região Norte)</h4>
<div style="margin-bottom:10px;">
<span> <del><sup>R$</sup>1.000,00</del> até <sup> R$ </sup> 950,00 </span>
</div>
<p>Trasporte + Alimentação / Hospedagem / Paseios / Lazer</p>
<a href="http://127.0.0.1/curso/html/projeto-final/pacote1.html" class="filled-button">Pacotes disponíveis</a>
</div>
</div>
<br>
</div>
<div class="col-md-4"><!--informações pacote região Nordeste-->
<div class="service-item">
<img src="imagens/nordeste.jpg" height="260" alt="">
<div class="down-content">
<h4>Pacotes (Região Nordeste)</h4>
<div style="margin-bottom:10px;">
<span> <del><sup>R$</sup>850,00</del> até <sup>R$</sup>600,00 </span>
</div>
<p>Hospedagem / Lazer / Alimentação no Local / Passeios</p>
<a href="http://127.0.0.1/curso/html/projeto-final/pacote2.html" class="filled-button">Pacotes disponíveis</a>
</div>
</div>
<br>
</div>
<div class="col-md-4"><!--informações pacote região sudeste-->
<div class="service-item">
<img src="imagens/sudeste.jpg" alt="">
<div class="down-content">
<h4>Pacotes (Região Sudeste)</h4>
<div style="margin-bottom:10px;">
<span> <del><sup>R$</sup>860,00</del> até <sup>R$</sup> 560,00 </span>
</div>
<p>Passeios / Alimentação / Lazer / Acomodações</p>
<a href="http://127.0.0.1/curso/html/projeto-final/pacote3.html" class="filled-button">Pacotes disponíveis</a>
</div>
</div>
<br>
</div>
<div class="col-md-4"><!--pacotes região centro-oeste-->
<div class="service-item">
<img src="imahttps://emtempo.com.br/img/inline/190000/brazil-rio-grande-do-norte-pipa-praia-do-amor_00199577_5_202004171113.jpg=""
height="260" >
<div class="down-content">
<h4>Pacotes (Região Centro-Oeste)</h4>
<div style="margin-bottom:10px;">
<span> <del><sup>R$</sup>930,00</del> <sup>$</sup> até 620,00 </span>
</div>
<p>Alimentação / Passeios / Lazer </p>
<a href="http://127.0.0.1/curso/html/projeto-final/pacote4.html" class="filled-button">Pacotes disponíveis</a>
</div>
</div>
<br>
</div>
</div>
<br>
<br>
<nav><!--navegação para ir pra proxima página ou anterior-->
<ul class="pagination pagination-lg justify-content-center">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">anterior</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">próximo</span>
</a>
</li>
</ul>
</nav>
<br>
<br>
<br>
<br>
</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="#">Ínicio</a></li>
<li><a href="#">Promoções</a></li>
<li><a href="#">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>
.logo
{
margin-right: 400px;
font-family: 'Crimson Text', serif, font-size -2px;
color: ;
}
body {
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
p {
margin-bottom: 0px;
font-size: 14px;
color: #666666;
line-height: 30px;
}
a {
text-decoration: none!important;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
h1,h2,h3,h4,h5,h6 {
margin: 0px;
}
a.filled-button {
background-color: #1E90FF;
color: #fff;
font-size: 13px;
text-transform: uppercase;
font-weight: 700;
padding: 12px 30px;
border-radius: 30px;
display: inline-block;
transition: all 0.3s;
}
a.filled-button:hover {
background-color: #fff;
color: #a4c639;
}
a.border-button {
background-color: transparent;
color: #fff;
border: 2px solid #fff;
font-size: 13px;
text-transform: uppercase;
font-weight: 700;
padding: 10px 28px;
border-radius: 30px;
display: inline-block;
transition: all 0.3s;
}
a.border-button:hover {
background-color: #fff;
color: #a4c639;
}
.section-heading {
text-align: center;
margin-bottom: 80px;
}
.section-heading h2 {
font-size: 36px;
font-weight: 600;
color: #1e1e1e;
}
.section-heading em {
font-style: normal;
color: #a4c639;
}
.section-heading span {
display: block;
margin-top: 15px;
text-transform: uppercase;
font-size: 15px;
color: #666;
letter-spacing: 1px;
}
#preloader {
overflow: hidden;
background: #a4c639;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
z-index: 9999999;
color: #fff;
}
#preloader .jumper {
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
margin: auto;
width: 50px;
height: 50px;
}
#preloader .jumper > div {
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 100%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
opacity: 0;
width: 50px;
height: 50px;
-webkit-animation: jumper 1s 0s linear infinite;
animation: jumper 1s 0s linear infinite;
}
#preloader .jumper > div:nth-child(2) {
-webkit-animation-delay: 0.33333s;
animation-delay: 0.33333s;
}
#preloader .jumper > div:nth-child(3) {
-webkit-animation-delay: 0.66666s;
animation-delay: 0.66666s;
}
@-webkit-keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Sub Header Style */
.sub-header {
background-color: #a4c639;
height: 46px;
line-height: 46px;
}
.sub-header ul li {
display: inline-block;
}
.sub-header ul.left-info li {
border-left: 1px solid rgba(250,250,250,0.3);
padding: 0px 20px;
}
.sub-header ul.left-info li:last-child {
border-right: 1px solid rgba(250,250,250,0.3);
}
.sub-header ul.left-info li i {
margin-right: 10px;
font-size: 18px;
}
.sub-header ul.left-info li a {
color: #fff;
font-size: 14px;
font-weight: 600;
}
.sub-header ul.right-icons {
float: right;
}
.sub-header ul.right-icons li {
margin-right: -4px;
width: 46px;
display: inline-block;
text-align: center;
border-right: 1px solid rgba(250,250,250,0.3);
}
.sub-header ul.right-icons li:first-child {
border-left: 1px solid rgba(250,250,250,0.3);
}
.sub-header ul.right-icons li a {
color: #fff;
transition: all 0.3s;
}
.sub-header ul.right-icons li a:hover {
opacity: 0.75;
}
.img-fill{
width: 100%;
display: block;
overflow: hidden;
position: relative;
text-align: center
}
.img-fill:before {
content: '';
z-index: 1;
position: absolute;
top: 0;
left: 0;
bottom:0;
right: 0;
background-color: rgba(0,0,0,.6)
}
.Modern-Slider .text-content{
z-index: 2;
}
.img-fill img {
min-height: 100%;
min-width: 100%;
position: relative;
display: inline-block;
max-width: none;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.Grid1k {
padding: 0 15px;
max-width: 1200px;
margin: auto;
}
.blocks-box,
.slick-slider {
margin: 0;
padding: 0!important;
}
.slick-slide {
float: left;
padding: 0;
}
.Modern-Slider .item .img-fill {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height:95vh;
}
.Modern-Slider .item-1 .img-fill {
background-image: url(../images/slider-image-1-1920x900.jpg);
}
.Modern-Slider .item-2 .img-fill {
background-image: url(../images/slider-image-2-1920x900.jpg);
}
.Modern-Slider .item-3 .img-fill {
background-image: url(../images/slider-image-3-1920x900.jpg);
}
.Modern-Slider .NextArrow{
position:absolute;
top:50%;
right:30px;
border:0 none;
background-color: transparent;
text-align:center;
font-size: 36px;
font-family: 'FontAwesome';
color:#FFF;
z-index:5;
outline: none;
cursor: pointer;
}
.Modern-Slider .NextArrow:before{
content:'\f105';
}
.Modern-Slider .PrevArrow {
position:absolute;
top:50%;
left:40px;
border:0 none;
background-color: transparent;
text-align:center;
font-size: 36px;
font-family: 'FontAwesome';
color:#FFF;
z-index:5;
outline: none;
cursor: pointer;
}
.Modern-Slider .PrevArrow:before{
content:'\f104';
}
ul.slick-dots {
display: none!important;
}
.Modern-Slider .text-content {
text-align: left;
width: 75%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Modern-Slider .item h6 {
margin-bottom: 15px;
font-size: 22px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
color:#a4c639;
animation:fadeOutRight 1s both;
}
.Modern-Slider .item h4 {
margin-bottom: 30px;
text-transform: uppercase;
font-size: 44px;
font-weight: 700;
letter-spacing: 2.5px;
color:#FFF;
overflow:hidden;
animation:fadeOutLeft 1s both;
}
.Modern-Slider .item p {
max-width: 570px;
color: #fff;
font-size: 15px;
font-weight: 400;
line-height: 30px;
margin-bottom: 40px;
}
.Modern-Slider .item a {
margin: 0 5px;
}
.Modern-Slider .item.slick-active h6{
animation:fadeInDown 1s both 1s;
}
.Modern-Slider .item.slick-active h4{
animation:fadeInLeft 1s both 1.5s;
}
.Modern-Slider .item.slick-active{
animation:Slick-FastSwipeIn 1s both;
}
.Modern-Slider .buttons {
position: relative;
}
.Modern-Slider {background:#000;}
/* ====estilo slide === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* lado */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
/* Requerimento Formulario */
.request-form {
background-color: #a4c639;
padding: 40px 0px;
color: #fff;
}
.request-form h4 {
font-size: 22px;
font-weight: 600;
}
.request-form span {
font-size: 15px;
font-weight: 400;
display: inline-block;
margin-top: 10px;
}
.request-form a.border-button {
margin-top: 12px;
float: right;
}
/* Serviços */
.services {
margin-top: 140px;
}
.service-item img {
width: 100%;
overflow: hidden;
}
.service-item .down-content {
background-color: #f7f7f7;
padding: 30px;
}
.service-item .down-content h4 {
font-size: 20px;
font-weight: 700;
letter-spacing: 0.25px;
margin-bottom: 15px;
}
.service-item .down-content p {
margin-bottom: 20px;
}
.page-link:hover,
.page-link {
color: blue;
}
.btn-primy {
border-color: blue;
background-color: blue;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus{
opacity: 0.6;
border-color: blue;
background-color: #a4c639;
}
/* Fun Facts */
.fun-facts {
margin-top: 140px;
background-image: url(../../images/imagem2.jpg;)
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
padding: 140px 0px;
color: #fff;
position: relative;
}
.fun-facts .container {
position: relative;
z-index: 2;
}
.fun-facts:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
.fun-facts span {
text-transform: uppercase;
font-size: 15px;
color: #fff;
letter-spacing: 1px;
margin-bottom: 10px;
display: block;
}
.fun-facts h2 {
font-size: 36px;
font-weight: 600;
margin-bottom: 35px;
}
.fun-facts em {
font-style: normal;
color: #a4c639;
}
.fun-facts p {
color: #fff;
margin-bottom: 40px;
}
.fun-facts .left-content {
margin-right: 45px;
}
.count-area-content {
text-align: center;
background-color: rgba(250,250,250,0.1);
padding: 25px 30px 35px 30px;
margin: 15px 0px;
}
.count-digit {
margin: 5px 0px;
color: #a4c639;
font-weight: 700;
font-size: 36px;
}
.count-title {
font-size: 20px;
font-weight: 600;
color: #fff;
letter-spacing: 0.5px;
}
/*Informação */
.more-info {
margin-top: 140px;
}
.more-info .left-imagem img {
width: 100%;
overflow: hidden;
}
.more-info .more-info-content {
background-color: #f7f7f7;
}
.about-info .more-info-content {
background-color: transparent;
}
.imagem-info .right-content {
padding: 0px!important;
margin-right: 30px;
}
.more-info .right-content {
padding: 45px 45px 45px 30px;
}
.more-info .right-content span {
text-transform: uppercase;
font-size: 15px;
color: #666;
letter-spacing: 1px;
margin-bottom: 10px;
display: block;
}
.more-info .right-content h2 {
font-size: 36px;
font-weight: 600;
margin-bottom: 35px;
}
.more-info .right-content em {
font-style: normal;
color: #a4c639;
}
.more-info .right-content p {
margin-bottom: 30px;
}
/* Testimonials estilo */
.about-testimonials {
margin-top: 0px!important;
}
.testimonials {
margin-top: 140px;
background-color: #f7f7f7;
padding: 140px 0px;
}
.testimonial-item .inner-content {
text-align: center;
background-color: #fff;
padding: 30px;
border-radius: 5px;
}
.testimonial-item p {
font-size: 14px;
font-weight: 400;
}
.testimonial-item h4 {
font-size: 19px;
font-weight: 700;
color: #1e1e1e;
letter-spacing: 0.5px;
margin-bottom: 0px;
}
.testimonial-item span {
display: inline-block;
margin-top: 8px;
font-weight: 600;
font-size: 14px;
color: #a4c639;
}
.testimonial-item img {
max-width: 60px;
border-radius: 50%;
margin: 25px auto 0px auto;
}
/* classe Call Back estilo */
.callback-services {
border-top: 1px solid #eee;
padding-top: 140px;
}
.contact-us {
background-color: #f7f7f7;
padding: 140px 0px;
}
.contact-us .contact-form {
background-color: transparent!important;
padding: 0!important;
}
.callback-form {
margin-top: 140px;
}
.callback-form .contact-form {
background-color: #a4c639;
padding: 60px;
border-radius: 5px;
text-align: center;
}
.callback-form .contact-form input {
border-radius: 20px;
height: 40px;
line-height: 40px;
display: inline-block;
padding: 0px 15px;
color: #6a6a6a;
font-size: 13px;
text-transform: none;
box-shadow: none;
border: none;
margin-bottom: 35px;
}
.callback-form .contact-form input:focus {
outline: none;
box-shadow: none;
border: none;
}
.callback-form .contact-form textarea {
border-radius: 20px;
height: 120px;
max-height: 200px;
min-height: 120px;
display: inline-block;
padding: 15px;
color: #6a6a6a;
font-size: 13px;
text-transform: none;
box-shadow: none;
border: none;
margin-bottom: 35px;
}
.callback-form .contact-form textarea:focus {
outline: none;
box-shadow: none;
border: none;
}
.callback-form .contact-form ::-webkit-input-placeholder {
color: #aaa;
}
.callback-form .contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #aaa;
}
.callback-form .contact-form ::placeholder {
color: #aaa;
}
.callback-form .contact-form button.border-button {
background-color: transparent;
color: #fff;
border: 2px solid #fff;
font-size: 13px;
text-transform: uppercase;
font-weight: 700;
padding: 10px 28px;
border-radius: 30px;
display: inline-block;
transition: all 0.3s;
outline: none;
box-shadow: none;
text-shadow: none;
cursor: pointer;
}
.callback-form .contact-form button.border-button:hover {
background-color: #fff;
color: #a4c639;
}
.contact-us .contact-form button.filled-button {
background-color: #a4c639;
color: #fff;
border: none;
font-size: 13px;
text-transform: uppercase;
font-weight: 700;
padding: 12px 30px;
border-radius: 30px;
display: inline-block;
transition: all 0.3s;
outline: none;
box-shadow: none;
text-shadow: none;
cursor: pointer;
}
.contact-us .contact-form button.filled-button:hover {
background-color: #fff;
color: #a4c639;
}
/* Partners estilo */
.contact-partners {
margin-top: -8px!important;
}
.partners {
margin-top: 140px;
background-color: #f7f7f7;
padding: 60px 0px;
}
.partners .owl-item {
text-align: center;
cursor: pointer;
}
.partners .partner-item img {
max-width: 156px;
margin: auto;
}
/*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;
}
}
/* CSS utilizado para posicionar o rodapé no final da página. */
html{
height: 100%;
}
body{
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
height: 100%;
}
.content{
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
min-height: 200px;
}
#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;
}
/* Single Service */
.single-services {
margin-top: 140px;
}
#tabs ul {
margin: 0;
padding: 0;
}
#tabs ul li {
margin-bottom: 10px;
display: inline-block;
width: 100%;
}
#tabs ul li:last-child {
margin-bottom: 0px;
}
#tabs ul li a {
text-transform: capitalize;
width: 100%;
padding: 20px;
display: inline-block;
background-color: #a4c639;
font-size: 18px;
color: #121212;
letter-spacing: 0.5px;
font-weight: 700;
transition: all 0.3s;
}
#tabs ul li a i {
float: right;
margin-top: 5px;
}
#tabs ul .ui-tabs-active span {
background: #faf5b2;
border: #faf5b2;
line-height: 90px;
border-bottom: none;
}
#tabs ul .ui-tabs-active a {
color: #fff;
}
#tabs ul .ui-tabs-active span {
color: #1e1e1e;
}
.tabs-content {
margin-left: 30px;
text-align: left;
display: inline-block;
transition: all 0.3s;
}
.tabs-content img {
max-width: 100%;
overflow: hidden;
}
.tabs-content h4 {
font-size: 20px;
font-weight: 700;
letter-spacing: 0.25px;
margin-bottom: 15px;
margin-top: 30px;
}
.tabs-content h4 a {
color: inherit;
}
.tabs-content p {
font-size: 14px;
color: #7a7a7a;
margin-bottom: 0px;
}
.dropdown-item.active,
.dropdown-item:active {
background-color: #a4c639;
}
/* Contact Information */
.contact-information {
margin-top: 140px;
}
.contact-information .contact-item {
padding: 60px 30px;
background-color: #f7f7f7;
text-align: center;
}
.contact-information .contact-item i {
color: #a4c639;
font-size: 48px;
margin-bottom: 40px;
}
.contact-information .contact-item h4 {
font-size: 20px;
font-weight: 700;
letter-spacing: 0.25px;
margin-bottom: 15px;
}
.contact-information .contact-item p {
margin-bottom: 20px;
}
.contact-information .contact-item a {
font-weight: 600;
color: #a4c639;
font-size: 15px;
}
/* Responsive Style */
@media (max-width: 768px) {
.sub-header {
display: none;
}
.Modern-Slider .item h6 {
margin-bottom: 15px;
font-size: 18px;
}
.Modern-Slider .item h4 {
margin-bottom: 25px;
font-size: 28px;
line-height: 36px;
letter-spacing: 1px;
}
.Modern-Slider .item p {
max-width: 570px;
line-height: 25px;
margin-bottom: 30px;
}
.Modern-Slider .NextArrow{
right:5px;
}
.Modern-Slider .PrevArrow {
left:5px;
}
.request-form {
text-align: center;
}
.request-form a.border-button {
float: none;
margin-top: 30px;
}
.services .service-item {
margin-bottom: 30px;
}
.fun-facts .left-content {
margin-right: 0px;
margin-bottom: 30px;
}
.more-info .right-content {
padding: 30px;
}
footer {
padding: 80px 0px 20px 0px;
}
footer .footer-item {
border-bottom: 1px solid #343434;
margin-bottom: 30px;
padding-bottom: 30px;
}
footer .last-item {
border-bottom: none;
}
.about-info .right-content {
margin-right: 0px;
margin-bottom: 30px;
}
.team .team-item {
margin-bottom: 30px;
}
.tabs-content {
margin-left: 0px;
margin-top: 30px;
}
.contact-item {
margin-bottom: 30px;
}
}
h5 a { color: #a4c639; }
h5 a:hover { color: inherit; }
/* image responsive */
.carousel-inner img {
background-image
width: 200%;
height: 200%;
}
/*estilo do rodapé*/
#rodape {
background-colo#1E90FFlue;
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;
}
