Este projeto foi desenvolvido como uma introdução ao uso de HTML e CSS para estilizar elementos na web. Ele apresenta uma estrutura simples, mas eficiente, para exibir cartões de mensagens de diferentes usuários, com a aplicação de estilos visuais modernos.
O objetivo deste projeto foi criar uma página que exiba mensagens de usuários de forma organizada, com uma interface limpa e intuitiva, utilizando conceitos básicos de HTML e CSS. O projeto foca no uso de classes e propriedades para estilizar a estrutura, incluindo o uso de borda arredondada, cores personalizadas e imagens de ícones como parte da identidade visual.
O design do projeto foi pensado para ser simples, mas visualmente atraente:
- Cartões de mensagens: Cada mensagem de usuário é exibida dentro de um cartão estilizado com bordas arredondadas e um fundo de cor suave (AliceBlue). O cartão contém padding (espaçamento interno) e margin (espaçamento externo) para dar uma aparência limpa.
- Ícones personalizados: Cada cartão possui um ícone representando o usuário. Esses ícones são imagens externas, adicionadas via background-image, para dar um toque visual que identifica quem está enviando a mensagem.
- Texto estilizado: O nome do usuário e a mensagem têm estilos distintos, utilizando a fonte monospace para um visual mais agradável e profissional. A cor do texto foi configurada para ser um tom de navy (azul escuro), criando contraste e facilitando a leitura.
- Estrutura e Layout: A página foi criada de forma a ser responsiva, com a propriedade viewport garantindo que o design se ajuste corretamente a diferentes dispositivos.
- HTML: Estruturação da página e organização do conteúdo.
- CSS: Estilização visual dos elementos da página, incluindo cores, fontes, bordas, e posicionamento.
O código HTML cria a estrutura da página, onde são inseridos os elementos de título e mensagens de diferentes usuários. Cada mensagem está envolvida em um "cartão" que possui uma borda arredondada e contém um ícone do usuário, o nome e a mensagem.
O CSS, por sua vez, é responsável por estilizar esses elementos, aplicando cores, fontes e imagens. O design é centrado na utilização de classes para aplicar estilos e garantir que o layout seja visualmente organizado.