Projeto: Equilíbrio entre o Campo e a Cidade
Este projeto busca explorar a convivência harmônica entre o campo e a cidade, mostrando como essas duas realidades podem ser equilibradas e como a interdependência entre elas pode ser essencial para o desenvolvimento sustentável. A página web apresenta uma reflexão sobre os desafios e oportunidades desse equilíbrio, com foco em práticas sustentáveis, qualidade de vida e preservação ambiental.
Tecnologias Utilizadas
- HTML5: Estruturação semântica e conteúdo da página.
- CSS3: Estilização da página utilizando variáveis, fontes e cores para criar uma interface agradável.
- Google Fonts: Uso das fontes “Chocolate Classical Sans” e “Rakkas” para uma tipografia única.
- Responsividade: A página foi projetada para ser responsiva, garantindo uma boa experiência tanto em dispositivos móveis quanto em desktops.
Funcionalidades
- Navegação intuitiva: O menu permite acessar facilmente as seções da página: “Desafios”, “Oportunidades” e “Conclusão”.
- Seções informativas: Cada seção contém artigos e listas que explicam os problemas e soluções sobre o equilíbrio entre o campo e a cidade.
- Links interativos: A página contém um botão de CTA que leva o usuário a um vídeo explicativo sobre como integrar essas duas realidades.
- Design harmonioso: Cores e fontes foram escolhidas para refletir os elementos naturais do campo e da cidade, criando uma interface agradável e fácil de navegar.
Como Usar
Pré-requisitos
Antes de começar, você precisa ter um navegador de internet moderno (como Google Chrome, Firefox, etc.) para visualizar o site.
Passos para rodar o projeto
- Clone o repositório:
git clone https://github.com/seu-usuario/nome-do-repositorio.git
- Abra o projeto em seu navegador:
- Navegue até a pasta do projeto e abra o arquivo
index.html em seu navegador preferido.
- Estrutura do Projeto:
- O projeto consiste basicamente em dois arquivos principais:
index.html: O arquivo HTML que contém a estrutura da página.style.css: O arquivo CSS que define o estilo da página, utilizando variáveis de cores, fontes e efeitos interativos.
- Adicionando uma nova imagem:
- Caso queira adicionar ou alterar a imagem do header, substitua o arquivo
campo-e-cidade.jpg na pasta do projeto com a nova imagem que deseja utilizar.
Personalização
Você pode personalizar o design do site alterando as variáveis no arquivo style.css, como as cores, fontes e espaçamentos. Abaixo estão algumas variáveis importantes para personalização:
```css
:root {
–primary-color: #4CAF50; /* Cor principal /
–secondary-color: #80C7B1; / Cor secundária /
–text-color: #3E4A4F; / Cor do texto /
–background-color: #F0E6D2; / Cor de fundo /
–button-hover: #2E5D5B; / Cor para hover do botão */
}