Além do HTML: Personalizando a Identidade Visual da Clínica VetCare

Introdução

Recentemente, finalizei um desafio prático na plataforma da DIO que consistia em criar um site estruturado para uma clínica médica. Escolhi o nicho veterinário e dei vida à VetCare. Embora o foco inicial fosse a estrutura HTML, decidi ir além: mergulhei no CSS para customizar o template e garantir que o visual refletisse o cuidado e o profissionalismo que a marca exige.

O Projeto e Minhas Personalizações:

Ajustes de Design no CSS:

1. Não me limitei ao template padrão. Explorei o arquivo base.css e fiz alterações estratégicas de cores para criar uma paleta que combinasse com o tema pet. Ajustei tonalidades nas classes .menu, .header e .footer para criar contraste e harmonia. Além disso, incluí novos parâmetros de estilização para garantir que o layout ficasse exatamente como eu planejei.

Estrutura Semântica e Navegação:

1. Utilizei uma estrutura organizada com um menu lateral persistente. No HTML, usei a classe active para indicar visualmente ao usuário em qual página ele se encontra, um detalhe de usabilidade que faz toda a diferença na experiência de navegação.

Tabelas de Serviços e Preços:

1. Na página de Horário de Atendimento, organizei as especialidades (como Clínica Geral, Psicologia Animal e Pediatria) em uma tabela detalhada. Usei atributos de formatação para garantir que os preços e horários de segunda a feriados ficassem claros e fáceis de ler.

Integração e Contato Funcional:

1. Na página de Contato, integrei o Google Maps via <iframe> e criei botões de acesso rápido para WhatsApp e telefone, utilizando estilos de botão personalizados no código para facilitar a conversão. O formulário de contato foi construído com validações simples, como o atributo required, e placeholders que guiam o preenchimento do usuário.

O que aprendi com este desafio?

Este projeto foi o campo de provas perfeito. Aprendi que a estrutura (HTML) e a estética (CSS) precisam caminhar juntas. Ter a liberdade de alterar o CSS do template me deu a confiança necessária para entender como as propriedades de cor, espaçamento e layout impactam o produto final.

Sinto que dei um passo importante na transição de "quem apenas segue tutoriais" para "quem constrói e personaliza suas próprias soluções".