<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>
<meta charset="utf-8">
<title>Promoções.com</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--links para o funcionamento da página-->
<link rel="stylesheet" type="text/css" href="estilos/estilopag/p.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" type="text/js" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="estilos/estilopag/main.css" />
</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="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="http://127.0.0.1/curso/html/projeto-final/destino.html" class="nav-link font-weight-bold text-uppercase">Destinos</a></li>
<li class="nav-item"><a href="http://127.0.0.1/curso/html/projeto-final/promo.html" class="nav-link font-weight-bold text-uppercase">Pacotes</a></li>
<li class="nav-item"><a href="http://127.0.0.1/curso/html/projeto-final/sobrenos.html" class="nav-link font-weight-bold text-uppercase">Contato</a></li>
</ul>
</div>
</nav>
<!-- Banner -->
<section id="banner" style="background-color: #48D1CC">
<div class="inner split">
<section>
<h2 style="margin-left: 300px; ">REGIÃO NORDESTE<a href="#"></a></h2>
</section>
<section class="row">
<p>Selecionamos ofertas para você, com reservas flexíveis e com preços incríveis. Pacotes Com flexibildade e opção de alteração de data, sonhe com a sua próxima viagem. Voo + Hotel + Muito Mais. .</p>
<ul class="actions">
<li><a href="#" class="button special">Mais</a></li>
</ul>
</section>
</div>
</section>
<!-- pacotes 1 -->
<section id="one" class="wrapper">
<div class="inner split">
<section>
<h2>La Villa Praia (Jericoacoara/CE)</h2>
<img src="imagens/pacotenordeste/jeri.jpg" style="height: 300px; width: 500px;">
<p>Se você está procurando uma casa de hóspedes econômica em Jericoacoara, você acabou de encontrar a La Villa Praia.
Os quartos da La Villa Praia oferecem TV de tela plana, minibar e ar-condicionado. Além disso, os hóspedes podem aproveitar a internet à vontade com wi-fi gratuito.
</p>
</section>
<section>
<ul class="checklist"><!--primeiro pacote detalhes-->
<div class="down-content">
<p style="color: blue;">OFERTA INCRÍVEL</p>
<div style="margin-bottom:10px;">
<span> <del><sup>R$</sup>1400,20</del><sup> R$ </sup> 850,90 </span>
</div>
<p> (Hospedagem e +)<p>
<p>O QUE O HOTEL OFERECE:</p>
<li>Tv de Plana</li>
<li>Mini-bar+Ar-condicionado</li>
<li>Estacionamento grátis</li>
<li>Piscina</li>
<li>Diversão</li>
<ul class="actions"><!--classe ação para botão de comprar pacote-->
<a href="http://127.0.0.1/curso/html/projeto-final/compra.html" class="button alt">Comprar Pacote</a>
</ul>
</ul>
</section>
</div>
</section>
<!-- pacotes 2 -->
<section id="two" class="wrapper style2 alt">
<div class="inner">
<div class="spotlight">
</div>
</div>
<div class="spotlight">
<div class="image">
<img src="imagens/pacotenordeste/porto.jpg" style="height: 300px; width: 500px;" alt="" />
</div>
<div class="content">
<h3>Marulhos Resort By MAI (Porto de Galinha/PE)</h3>
<p>Localizado à beira-mar (pé na areia), na Praia de Muro Alto, a 8 km da vila de Porto de Galinhas, o Marulhos Suítes oferece uma incrível área de lazer com mais de 40.000 m2, com amplo parque aquático, minicampo gramado, quadra poliesportiva, academia, sauna, sala de massagem, clube infantil, salas de TV e de jogos e playground. Conta também com restaurante, bares, loja de conveniência e berçário.
</p>
<div style="margin-bottom:10px;">
<sup> R$ </sup> 650,00 </span>
</div></p>
<ul class="actions">
<li><a href="http://127.0.0.1/curso/html/projeto-final/compra.html" class="button alt">Comprar Pacote</a></li>
</ul>
</div>
</div>
<div class="spotlight"><!--informação sobre o 3 pacote-->
<div class="image">
<img src="imagens/pacotenordeste/recife.jpg" style="height: 300px; width: 500px;" alt="" />
</div>
<div class="content">
<h3>Hotel Manibu Recife (Refice/PE)</h3>
<p>Os quartos tranquilos com piso de azulejo oferecem Wi-Fi gratuito, tela plana e frigobar. Os quartos de categoria mais alta têm vista parcial para o mar. Serviço de quarto disponível. A estadia de crianças de até 11 anos acompanhadas dos responsáveis é gratuita.</p>
<div style="margin-bottom:10px;">
<span> <sup> R$ </sup> 745,00 </span>
</div></p>
<ul class="actions">
<li><a href="http://127.0.0.1/curso/html/projeto-final/compra.html" class="button alt">Comprar Pacote</a></li>
</ul>
</div>
</div>
</div>
<div class="spotlight"><!--informações sobre o ultimo pacote-->
<div class="image">
<img src="imagens/pacotenordeste/happy.jpeg" alt="" />
</div>
<div class="content">
<h3>Happy Hotel Ponte Negra (Natal/RN)</h3>
<p>Localizado a 60 metros da praia de Ponta Negra, este hotel possui piscina adulto e infantil com total privacidade e restaurante climatizado, que funciona para o café da manhã, das 06 ás 10hs. Os 46 apartamentos são equipados com ar-condicionado, frigobar e TV a Cabo. Possui Wi-Fi e estacionamento gratuitos.</p>
<div style="margin-bottom:10px;">
<span> <sup> R$ </sup> 896,00 </span>
</div></p>
<ul class="actions">
<li><a href="http://127.0.0.1/curso/html/projeto-final/compra.html" class="button alt">Comprar Pacote</a></li>
</ul>
</div>
</div>
<ul class="actions special">
<li style="text-align: center;"><a href="#" class="button alt">Voltar ao topo</a></li>
</ul>
</div>
</section>
<!-- 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>
</body>
</html>
.logo
{
margin-right: 400px;
font-family: 'Crimson Text', serif, font-size -2px;
color: ;
}
/*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;
}
@import url(font-awesome.min.css);
html, body, div, span{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
-webkit-text-size-adjust: none;
}
/* Box Model */
/* Basic */
/* Type */
body {
background-color: #fff;
color: #777;
}
body, input, select, textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
font-weight: normal;
line-height: 2;
}
@media screen and (max-width: 1680px) {
body, input, select, textarea {
font-size: 13.5pt;
}
}
@media screen and (max-width: 1366px) {
body, input, select, textarea {
font-size: 12.5pt;
}
}
@media screen and (max-width: 980px) {
body, input, select, textarea {
font-size: 12pt;
}
}
@media screen and (max-width: 736px) {
body, input, select, textarea {
font-size: 11.5pt;
}
}
@media screen and (max-width: 480px) {
body, input, select, textarea {
font-size: 11.5pt;
}
}
a {
-moz-transition: color 0.2s ease;
-webkit-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
}
p {
margin: 0 0 2em 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
line-height: 1.5;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: inherit;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.35em;
}
h4 {
font-size: 1.1em;
}
h5 {
font-size: 0.9em;
}
h6 {
font-size: 0.7em;
}
h1, h2, h3, h4, h5, h6 {
color: #666;
}
blockquote {
}
code {
background: rgba(144, 144, 144, 0.075);
}
hr {
}
/* estilo botões */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
border-radius: 2em;
border: 0;
cursor: pointer;
display: inline-block;
font-size: 0.8em;
font-weight: bold;
height: 3.5em;
letter-spacing: 0.1em;
line-height: 3.65em;
padding: 0 3em;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active,
.button:active {
background-color: #ededed;
}
input[type="submit"].alt,
input[type="reset"].alt,
input[type="button"].alt,
button.alt,
.button.alt {
background-color: transparent;
box-shadow: inset 0 0 0 2px rgba(144, 144, 144, 0.25);
color: #666 !important;
}
input[type="submit"].alt.icon:before,
input[type="reset"].alt.icon:before,
input[type="button"].alt.icon:before,
button.alt.icon:before,
.button.alt.icon:before {
color: #bbb;
}
input[type="submit"].special,
input[type="reset"].special,
input[type="button"].special,
button.special,
.button.special {
background-color: #00BC8A;
color: #ffffff !important;
}
/* Form */
ul.checklist li {
margin-bottom: 1.5em;
padding-left: 0;
}
ul.checklist li:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
ul.checklist li:before {
content: '\f00c';
margin-right: 0.75em;
}
ul.icons {
cursor: default;
list-style: none;
padding-left: 0;
}
ul.icons li {
display: inline-block;
padding: 0 1em 0 0;
}
ul.icons li:last-child {
padding-right: 0;
}
ul.icons li .icon:before {
font-size: 2em;
}
/* Table */
/* Split */
.split {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-bottom: 2em;
}
.split > * {
width: 50%;
}
.split > *:nth-child(odd) {
padding-right: 3em;
}
.split > *:nth-child(even) {
padding-left: 3em;
border-left:
}
.split > * > :last-child,
.split > * > :last-child > :last-child,
.split > * > :last-child > :last-child > :last-child {
margin-bottom: 0;
}
@media screen and (max-width: 980px) {
.split > :nth-child(odd) {
padding-right: 2em;
}
.split > :nth-child(even) {
padding-left: 2em;
}
}
@media screen and (max-width: 736px) {
.split {
padding-bottom: 0;
}
.split > * {
width: 100%;
margin-bottom: 2em;
}
.split > *:nth-child(odd) {
padding-right: 0;
}
.split > *:nth-child(even) {
border-left: none;
padding-left: 0;
}
}
.split > :nth-child(even) {
border-left
}
/* Spotlight */
.spotlight {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
border-bottom: solid 2px;
margin-bottom: 3em;
}
.spotlight .image {
width: 40%;
}
.spotlight .image img {
width: 100%;
}
.spotlight .content {
padding: 2em 3em 0.1em 3em;
width: 60%;
}
@media screen and (max-width: 980px) {
.spotlight .image {
width: 55%;
}
.spotlight .content {
padding: 1.5em 2em 0.1em 2em;
width: 45%;
}
}
@media screen and (max-width: 736px) {
.spotlight {
display: block;
margin-bottom: 2em;
}
.spotlight .image {
width: 100%;
}
.spotlight .content {
padding: 1em 2em 0.1em 2em;
width: 100%;
}
}
@media screen and (max-width: 980px) {
.spotlight .content {
padding: 1em 1.5em 0.1em 1.5em;
}
}
.spotlight {
background-color: white;
border-bottom-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style2 input[type="submit"],
.wrapper.style2 input[type="reset"],
.wrapper.style2 input[type="button"],
.wrapper.style2 button,
.wrapper.style2 .button {
background-color: #666;
color: #fafafa !important;
}
.wrapper.style2 input[type="submit"].alt,
.wrapper.style2 input[type="reset"].alt,
.wrapper.style2 input[type="button"].alt,
.wrapper.style2 button.alt,
.wrapper.style2 .button.alt {
background-color: transparent;
box-shadow: inset 0 0 0 2px rgba(144, 144, 144, 0.25);
color: #666 !important;
}
.wrapper.style2 input[type="submit"].alt:hover,
.wrapper.style2 input[type="reset"].alt:hover,
.wrapper.style2 input[type="button"].alt:hover,
.wrapper.style2 button.alt:hover,
.wrapper.style2 .button.alt:hover {
background-color: rgba(144, 144, 144, 0.075);
}
.wrapper.style2 input[type="submit"].alt:active,
.wrapper.style2 input[type="reset"].alt:active,
.wrapper.style2 input[type="button"].alt:active,
.wrapper.style2 button.alt:active,
.wrapper.style2 .button.alt:active {
background-color: rgba(144, 144, 144, 0.2);
}
.wrapper.style2 input[type="submit"].alt.icon:before,
.wrapper.style2 input[type="reset"].alt.icon:before,
.wrapper.style2 input[type="button"].alt.icon:before,
.wrapper.style2 button.alt.icon:before,
.wrapper.style2 .button.alt.icon:before {
color: #bbb;
}
.wrapper.style2 input[type="submit"].special,
.wrapper.style2 input[type="reset"].special,
.wrapper.style2 input[type="button"].special,
.wrapper.style2 button.special,
.wrapper.style2 .button.special {
background-color: #00BC8A;
color: #ffffff !important;
}
.wrapper.style2 input[type="submit"].special:hover,
.wrapper.style2 input[type="reset"].special:hover,
.wrapper.style2 input[type="button"].special:hover,
.wrapper.style2 button.special:hover,
.wrapper.style2 .button.special:hover {
background-color: #00d69d;
}
.wrapper.style2 input[type="submit"].special:active,
.wrapper.style2 input[type="reset"].special:active,
.wrapper.style2 input[type="button"].special:active,
.wrapper.style2 button.special:active,
.wrapper.style2 .button.special:active {
background-color: #00a377;
}
.wrapper.style2 label {
color: #666;
}
.wrapper.style2 input[type="text"],
.wrapper.style2 input[type="password"],
.wrapper.style2 input[type="email"],
.wrapper.style2 select,
.wrapper.style2 textarea {
background: rgba(144, 144, 144, 0.075);
border-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style2 input[type="text"]:focus,
.wrapper.style2 input[type="password"]:focus,
.wrapper.style2 input[type="email"]:focus,
.wrapper.style2 select:focus,
.wrapper.style2 textarea:focus {
box-shadow: 0 0 0 1px #00BC8A;
}
.wrapper.style2 .select-wrapper:before {
color: rgba(144, 144, 144, 0.25);
}
.wrapper.style2 input[type="checkbox"] + label,
.wrapper.style2 input[type="radio"] + label {
color: #777;
}
.wrapper.style2 input[type="checkbox"] + label:before,
.wrapper.style2 input[type="radio"] + label:before {
background: rgba(144, 144, 144, 0.075);
border-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style2 input[type="checkbox"]:checked + label:before,
.wrapper.style2 input[type="radio"]:checked + label:before {
background-color: #00BC8A;
border-color: #00BC8A;
color: #ffffff;
}
.wrapper.style2 input[type="checkbox"]:focus + label:before,
.wrapper.style2 input[type="radio"]:focus + label:before {
border
box-shadow: 0 0 0 1px #00BC8A;
}
.wrapper.style2 ::-webkit-input-placeholder {
color: #bbb !important;
}
.wrapper.style2 :-moz-placeholder {
color: #bbb !important;
}
.wrapper.style2 ::-moz-placeholder {
color: #bbb !important;
}
.wrapper.style2 :-ms-input-placeholder {
color: #bbb !important;
}
.wrapper.style2 .formerize-placeholder {
color: #bbb !important;
}
.wrapper.style2 form.alt input[type="text"],
.wrapper.style2 form.alt input[type="password"],
.wrapper.style2 form.alt input[type="email"],
.wrapper.style2 form.alt select,
.wrapper.style2 form.alt textarea {
background-color: transparent;
}
.wrapper.style2 ul.alt li {
border
}
.wrapper.style2 ul.checklist li:before {
color: #00BC8A;
}
.wrapper.style2 ul.contact li:before {
color: #00BC8A;
}
.wrapper.style2 header p {
color: #bbb;
}
.wrapper.style2 table tbody tr {
border-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style2 table tbody tr:nth-child(2n + 1) {
background-color: rgba(144, 144, 144, 0.075);
}
.wrapper.style2 table th {
color: #666;
}
.wrapper.style2 table thead {
border-bottom-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style2 table tfoot {
border
}
.wrapper.style2 table.alt tbody tr td {
border-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style2 .split > :nth-child(even) {
border-left-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style2 .spotlight {
background-color: white;
border-bottom-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style2.alt {
border
}
@media screen and (max-width: 1366px) {
.wrapper {
padding: 4em 2.5em 2em 2.5em;
}
}
@media screen and (max-width: 980px) {
.wrapper {
padding: 4em 2em 2em 2em;
}
}
@media screen and (max-width: 736px) {
.wrapper {
padding: 3em 2em 1em 2em;
}
}
@media screen and (max-width: 480px) {
.wrapper {
padding: 3em 2em 1em 2em;
}
}
/* Banner */
#banner {
background-size: 100px 100px, cover;
color: rgba(255, 255, 255, 0.5);
padding: 14em 0 4em;
}
#banner h2 {
-size: 2.5em;
line-height: 1.4;
margin-bottom: 0;
color: #fff;
}
#banner p {
font-size: 1.15em;
line-height: 1.5em;
margin-bottom: 1.5em;
}
#banner p {
font-size: 1.1em;
}
}
@media screen and (max-width: 480px) {
#banner {
padding: 8em 2em 2em;
}
}
