/* estilo.css */ /* Comentário indicando que este é o arquivo CSS de estilos. */ html, body { /* Seletor que se aplica aos elementos e . */ margin: 0; /* Define a margem externa como 0, removendo qualquer espaço extra. */ padding: 0; /* Define o preenchimento interno como 0, removendo qualquer espaço extra. */ font-family: Arial, sans-serif; /* Define a família de fontes padrão como Arial, com sans-serif como alternativa. */ font-size: 16px; /* Define o tamanho da fonte padrão como 16 pixels. */ background-color: rgba(255, 255, 255, 1); /* Define a cor de fundo como branco sólido. */ } header { /* Seletor para o elemento

. */ width: 100%; /* Define a largura do cabeçalho como 100% da largura do contêiner pai. */ position: fixed; /* Define a posição do cabeçalho como fixa, mantendo-o no topo da página. */ top: 0; /* Posiciona o cabeçalho no topo da página. */ left: 0; /* Posiciona o cabeçalho à esquerda da página. */ background-color: rgb(127, 204, 102); /* Define a cor de fundo do cabeçalho. */ color: black; /* Define a cor do texto do cabeçalho como preto. */ text-align: center; /* Centraliza o texto do cabeçalho. */ padding: 10px; /* Adiciona um preenchimento interno de 10 pixels ao cabeçalho. */ z-index: 1000; /* Define a ordem de empilhamento do cabeçalho como 1000, garantindo que fique acima de outros elementos. */ border: 2px solid darkgreen; /* Adiciona uma borda de 2 pixels sólida na cor verde escuro ao cabeçalho. */ border-radius: 5px; /* Adiciona um raio de borda de 5 pixels, arredondando os cantos do cabeçalho. */ } header > h1 { /* Seletor para o elemento

dentro do
. / margin: 0; / Define a margem do
como 0, removendo qualquer espaço extra. / font-weight: bold; / Define o peso da fonte do
como negrito. / font-style: italic; / Define o estilo da fonte do
como itálico. / font-size: 1.2rem; / Define o tamanho da fonte do
como 1.2 rem (unidade relativa ao tamanho da fonte raiz). / } footer { / Seletor para o elemento
. / width: 100%; / Define a largura do rodapé como 100% da largura do contêiner pai. / background-color: rgb(127, 204, 102); / Define a cor de fundo do rodapé. / color: white; / Define a cor do texto do rodapé como branco. / padding: 2px; / Adiciona um preenchimento interno de 2 pixels ao rodapé. / position: fixed; / Define a posição do rodapé como fixa, mantendo-o no fundo da página. / bottom: 0; / Posiciona o rodapé no fundo da página. / left: 0; / Posiciona o rodapé à esquerda da página. / z-index: 1000; / Define a ordem de empilhamento do rodapé como 1000, garantindo que fique acima de outros elementos. / border: 2px solid darkgreen; / Adiciona uma borda de 2 pixels sólida na cor verde escuro ao rodapé. / border-radius: 5px; / Adiciona um raio de borda de 5 pixels, arredondando os cantos do rodapé. / } .footer-content { / Seletor para o elemento com a classe "footer-content". / display: flex; / Define o layout do conteúdo do rodapé como flexível. / justify-content: center; / Centraliza horizontalmente o conteúdo do rodapé. / align-items: center; / Centraliza verticalmente o conteúdo do rodapé. / } .whatsapp-icon { / Seletor para o elemento com a classe "whatsapp-icon". / height: 30px; / Define a altura do ícone do WhatsApp como 30 pixels. / margin-right: 10px; / Adiciona uma margem à direita de 10 pixels para separar o ícone do próximo elemento. / } .email-separator { / Seletor para o elemento com a classe "email-separator". / width: 500px; / Define a largura do separador de email como 500 pixels. / display: inline-block; / Define o elemento como um bloco inline, permitindo que outros elementos fiquem ao lado dele. / } .content { / Seletor para o elemento com a classe "content". / margin: 60px 0; / Adiciona uma margem superior de 60 pixels e inferior de 0 pixels, criando espaço entre o conteúdo e o cabeçalho/rodapé. / } h2 { / Seletor para elementos
. / text-align: center; / Centraliza o texto dos cabeçalhos
. / margin: 20px 0; / Adiciona uma margem superior e inferior de 20 pixels aos cabeçalhos
. / } .buttons-container { / Seletor para o elemento com a classe "buttons-container". / display: flex; / Define o layout do contêiner de botões como flexível. / justify-content: center; / Centraliza horizontalmente os botões dentro do contêiner. / gap: 10px; / Adiciona um espaço de 10 pixels entre os botões. / margin-top: 20px; / Adiciona uma margem superior de 20 pixels ao contêiner de botões. / } .button { / Seletor para elementos com a classe "button". / background-color: rgb(7, 87, 19); / Define a cor de fundo dos botões. / color: white; / Define a cor do texto dos botões como branco. / border: 2px solid darkgreen; / Adiciona uma borda de 2 pixels sólida na cor verde escuro aos botões. / font-family: 'Times New Roman', Arial, sans-serif; / Define a família de fontes dos botões. / font-size: 1rem; / Define o tamanho da fonte dos botões como 1 rem (unidade relativa ao tamanho da fonte raiz). / font-weight: bold; / Define o peso da fonte dos botões como negrito. / text-decoration: none; / Remove qualquer decoração de texto dos botões (como sublinhado). / padding: 10px 20px; / Adiciona um preenchimento interno de 10 pixels na vertical e 20 pixels na horizontal aos botões. / border-radius: 5px; / Adiciona um raio de borda de 5 pixels, arredondando os cantos dos botões. / text-align: center; / Centraliza o texto dos botões. / transition: background-color 0.3s, border-color 0.3s; / Define uma transição suave de 0.3 segundos para a cor de fundo e a cor da borda dos botões ao passar o mouse sobre eles. / } .button:hover { / Seletor para o estado de hover (quando o mouse passa sobre) dos botões. / background-color: darkgreen; / Define a cor de fundo dos botões quando o mouse passa sobre eles. / border-color: green; / Define a cor da borda dos botões quando o mouse passa sobre eles. / } .image-container { / Seletor para o elemento com a classe "image-container". / position: absolute; / Define a posição do contêiner da imagem como absoluta, permitindo posicioná-lo em relação ao contêiner pai. / top: 200px; / Define a posição vertical do contêiner da imagem a 200 pixels a partir do topo do contêiner pai. / left: 70%; / Posiciona o contêiner da imagem a 70% da largura do contêiner pai a partir da esquerda. / transform: translateX(-70%); / Ajusta a posição horizontalmente, movendo o contêiner da imagem 70% da sua própria largura para a esquerda, centralizando-o. / z-index: 0; / Define a ordem de empilhamento do contêiner da imagem como 0, garantindo que fique abaixo de outros elementos. / width: 50%; / Define a largura do contêiner da imagem como 50% da largura do contêiner pai. / opacity: 0.5; / Define a opacidade do contêiner da imagem como 0.5, tornando-o 50% visível. / } .image-container img { / Seletor para a imagem dentro do elemento com a classe "image-container". / max-width: 50%; / Garante que a imagem não exceda 50% da largura do contêiner pai, mantendo a responsividade. / height: auto; / Define a altura da imagem como automática, mantendo a proporção original da imagem. / } .text-container { / Seletor para o elemento com a classe "text-container". / position: relative; / Define a posição do contêiner de texto como relativa, permitindo que elementos filhos sejam posicionados em relação a ele. / z-index: 1; / Define a ordem de empilhamento do contêiner de texto como 1, garantindo que fique acima da imagem. / margin-top: 20px; / Adiciona uma margem superior de 20 pixels ao contêiner de texto. / margin-left: 20px; / Move o contêiner de texto 20 pixels para a direita. / padding: 10px; / Adiciona um preenchimento interno de 10 pixels ao contêiner de texto. / background-color: transparent; / Define o fundo do contêiner de texto como totalmente transparente. / border: none; / Remove qualquer borda do contêiner de texto. / width: 95%; / Define a largura do contêiner de texto como 95% da largura do contêiner pai. / height: auto; / Define a altura do contêiner de texto como automática, ajustando-se ao conteúdo. / overflow: auto; / Adiciona uma barra de rolagem se o conteúdo exceder a altura do contêiner de texto. / font-size: 1.2rem; / Define o tamanho da fonte do conteúdo do contêiner de texto como 1.8 rem. / line-height: 1; / Define o espaçamento entre as linhas do texto do contêiner de texto como 1.4 vezes o tamanho da fonte. / font-family: Times New Roman, Arial, sans-serif; / Define a família de fontes do conteúdo do contêiner de texto. */ }