Página de Escritório de Contabilidade

Este projeto visa desenvolver um site simples (landing page) para um escritório de contabilidade, utilizando apenas HTML e CSS. O design inclui uma página inicial com informações sobre a empresa, serviços oferecidos e clientes.

🤓 Antes de começar

Tenha um editor de código pronto para escrever HTML e CSS (VSCode, Sublime, etc).

• Crie uma estrutura básica de pasta:

src/
assets/
(imagens usadas no projeto)
index.html
style.css

🔨 Requisitos

Como o objetivo desse Mini Projeto é treinar suas habilidades em HTML e CSS, é importante que você tente implementar o design da forma como está no figma - você provavelmente irá encontrar muitos desafios no caminho - esta é justamente a finalidade 😉.

• Crie um cabeçalho no topo da página com links para Início, Perfil, Serviços, Clientes e Contato.

• Crie a seção de apresentação, adicione uma imagem de fundo que cubra toda a largura da tela.

  • Insira o nome da empresa Salles Contabilidade com uma breve frase de destaque: Experiência. Compromisso. Valor..

• Crie uma área que descreva a fundação e os serviços da empresa. Insira uma imagem ao lado do texto para criar um layout dividido.

• Apresente os serviços oferecidos em uma lista vertical com números.

  • Cada item deve conter um título e uma breve descrição.
  • Aplique o efeito de hover nos botões de saiba mais para mudar de cor ao passar o mouse.

• Adicione um card para cada cliente que a empresa já atendeu, utilizando <img> e estilizando com CSS para que as imagens fiquem lado a lado.

• Adicione o rodapé com o endereço, telefone, e-mail e links para as redes sociais. Use ícones de redes sociais e organize-os horizontalmente.

  👀 Dicas:

  • Utilize flexbox para alinhar os itens horizontalmente.

🔨 Desafio extra para quem quer ir além

• Faça com que o design seja responsivo, utilizando @media queries para ajustar o layout em dispositivos móveis.
• Realize uma animação simples no título da empresa ao carregar a página usando @keyframes no CSS.

🎨 Design Sugerido

Temos uma sugestão de design no Figma.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

O que você irá praticar:

HTML

Estruturar páginas de forma organizada.

CSS

• Aplicação de layouts flexíveis com display: flex
• Estilização de elementos de texto e botões.
• Efeitos de hover