Sertão-PE Social

Introdução

Sertão-PE Social trata-se de um site que apresenta uma seleção de associações sociais rurais e urbanas presentes no sertão do estado de Pernambuco e tem como objetivo facilitar a busca de quem pesquisa por associações sem fins lucrativos que atuam nessa região.

Este site foi desenvolvido através de uma parceria com a FreeHelper, uma startup social, sem fins lucrativos, que busca aproximar ONGs a voluntários especializados. Conheça mais sobre a FreeHelper aqui.

Os arquivos e pastas deste projeto:

• ./index.html: Código HTML que estrutura o site
• ./css/: Diretório que contém arquivos com extensão .css
• ./css/media-query.css: Código CSS com estilizações para telas com 992 ou mais pixels de largura;
• ./css/styles.css: Código CSS com as principais estilizações do site e estilizações para telas inferiores a 992px de largura
• ./css/variables.css: Código CSS com as variáveis de cores usadas no site
• ./images/: Diretório que contém os arquivos de imagens usados no site
• ./javascript/: Diretório que contém arquivos com extensão .js
• ./javascript/main.js: Código javascript manipulando eventos atrelados ao menu em telas menores que 992px de largura.

Cores

• #1B3772
• #00A19A
• #FF9C00
• #FFFFFF

Tipografia

• Montserrat (regular 400, semibold 600 e bold 700)

  

Variáveis

:root {
  --color-blue: #1B3772;
  --color-green: #00A19A;
  --color-orange: #FF9C00;
}

Patterns

• Para telas inferiores a 992px de largura:

  • Título de primeiro nível (h1): 18px de tamanho e 700 de peso;
  • Título de primeiro nível (h2): 22px de tamanho e 700 de peso;
  • Corpo do texto: 14px de tamanho e 400 de peso;
  • Blocos (sections e footer): 60px de preenchimento superior;

• Para telas igual ou superiores a 992px de largura:

  • Título de primeiro nível (h1): 28px de tamanho e 700 de peso;
  • Título de primeiro nível (h2): 26px de tamanho e 700 de peso;
  • Corpo do texto: 14px de tamanho e 400 de peso;
  • Blocos (sections e footer): 60px de preenchimento superior;

Blocos

Cada bloco possui imediatamente um elemento filho div.container que auxilia a delimitar a área de exibição do conteúdo do site.

• header #header: Cabeçalho principal da página, possuindo o texto "Sertão-PE Social" e uma lista de links para a navegação dentro do site.

• section #hero: Seção inicial da página, possuindo o h1 da página, um texto explicado o que é o site e uma img.

• section #collected-data: Seção com dados coletados de algumas regiões do sertão pernambucano, possuindo um header, contendo um h2 como título da seção, div.graphics, contendo os gráficos que apresentão os dados, e div.description, que envolve a legenda e fonte dos dados dos graficos.

• section #about-freehelper: Seção apresentando a Freehelper, possuindo um header, contendo um h2 como título da seção, e uma div contendo a logo da freehelper, um texto de apresentação e um link encaminhado para o site da organização.

• section #participating-associations: Seção das associações mapeada, possuindo um header, contendo um h2 como título da seção e 3 div.region-associations, que agrupam, de acordo com as regiões, cards(div.association) com informações das associações.

• section #contact: Seção com informações de contado, possuindo uma ancora mailto para o email de contado da freehelper.

• footer: Rodapé da página, possuindo os créditos da realização do site.

Tecnologias utilizadas

• HTML
• CSS
• JavaScript
• Google Fonts
• Iconify (Biblioteca de ícones)