Criar um Cartão de Visita Visualmente Atraente

Introdução

Neste projeto, você aprenderá como criar um cartão de visita do usuário com HTML e CSS. O objetivo é criar um cartão de visita visualmente atraente e bem estruturado que possa ser usado para exibir as informações de um usuário.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o projeto e abrir os arquivos necessários
• Como centralizar os elementos do cartão e do avatar do usuário usando CSS
• Como centralizar horizontalmente os elementos de texto à esquerda (nível e pontos)

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Estruturar uma página HTML para um cartão de visita
• Usar CSS para estilizar e posicionar elementos na página
• Aplicar técnicas para centralizar elementos tanto horizontalmente quanto verticalmente

Configurar o Projeto

Nesta etapa, você configurará o projeto e abrirá os arquivos no editor.

Abra a pasta do projeto, que contém os seguintes arquivos e diretórios:

├── avatar.png
├── style.css
└── index.html

Onde:

• index.html é a página principal.
• style.css é o arquivo onde você precisa adicionar os estilos necessários.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Centralizar o Cartão e o Avatar

Nesta etapa, você completará a seção TODO em style.css para centralizar o cartão e os elementos do avatar do usuário.

1. Localize a seção TODO no arquivo style.css.
2. Adicione as regras CSS necessárias para centralizar horizontalmente e verticalmente o cartão (class = card) e os elementos do avatar do usuário (class = avatar).

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. Salve as alterações no arquivo style.css.
4. Atualize o navegador para ver o resultado final. O resultado final é o seguinte:

Parabéns! Você concluiu com sucesso o projeto Cartões de Visita do Usuário.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.