"promoções"
Bootstrap 4.1.1 Snippet by Emanuela

<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; }

Related: See More


Questions / Comments: