vilhalva / baloes-de-conversa

💬INTERFACE DE CONVERSA EM GRUPOS!

BALÕES DE CONVERSA

💬INTERFACE DE CONVERSA EM GRUPOS!

DESCRIÇÃO:

O projeto consiste em um modelo básico de chat utilizando HTML, CSS para criar uma interface de conversa entre duas pessoas, semelhante ao layout de grupos do Telegram. Cada mensagem no chat possui uma foto de perfil (avatar), o nome da pessoa remetente e um balão de mensagem.

HTML:

1. .chat-container: Um contêiner que envolve todas as mensagens, definindo uma largura máxima e centralizando o conteúdo.

2. .message: Cada mensagem é representada por esse elemento. Ele contém a foto de perfil, o balão de mensagem e a seta indicando o remetente.

3. .avatar: Contém a foto de perfil do remetente.

4. .avatar img: A imagem de perfil propriamente dita.

5. .message-bubble: O balão de mensagem que contém o texto da mensagem.

6. .sender-name: Exibe o nome do remetente acima da mensagem.

CSS:

• Estilo Global: Define a aparência global do documento, como a fonte e o fundo.

• Estilo de Mensagem: Define a aparência das mensagens, incluindo a sombra, o espaçamento e a largura máxima.

• Estilo de Avatar: Define a aparência da foto de perfil, como a borda circular e o tamanho.

• Estilo de Balão de Mensagem: Define a aparência do balão de mensagem, incluindo a cor de fundo, o raio da borda e o sombreado.

• Estilo da Seta: Adiciona uma seta ao balão de mensagem, apontando para a foto de perfil.

• Estilo do Nome do Remetente: Define a aparência do nome do remetente, como o tamanho da fonte e a cor.

CONCLUSÃO:

Este é um modelo inicial que pode ser personalizado e expandido de acordo com as necessidades específicas do projeto. Adapte-o conforme desejado para atender aos requisitos visuais e funcionais específicos.

NÃO SABE?

• Entendemos que para manipular arquivos em HTML, CSS e outras linguagens relacionadas, é necessário possuir conhecimento nessas áreas. Para auxiliar nesse aprendizado, oferecemos cursos gratuitos disponíveis:

• CURSO DE HTML E CSS
• CURSO DE JAVASCRIPT
• CONFIRA MAIS CURSOS

CREDITOS:

• PROJETO CRIADO PELO VILHALVA