💼Cartão de Visita

Crie um cartão de visita digital com título profissional, informações de contato e uma breve descrição. Use HTML e CSS para organizar e estilizar o layout.

Descrição: Neste desafio, devem criar um cartão de visita digital usando HTML e CSS. O objetivo é simular um cartão de visita tradicional, onde o foco está na apresentação profissional e nas informações de contato.

Elementos Obrigatórios

1. Título Profissional: Deve conter o nome da pessoa e o título ou cargo profissional (ex: "Desenvolvedor Web", "Designer Gráfico", "Gerente de Projetos", etc.).

2. Informações de Contato: Inclua informações como e-mail, telefone, e, se relevante, links para redes sociais ou portfólio online.

3. Descrição Pessoal ou Profissional: Um breve parágrafo descrevendo a especialidade ou o foco profissional da pessoa. Pode ser algo como uma "mini bio" ou um slogan profissional.

Estilo e Layout

1. Organização Visual: Os alunos devem estruturar o cartão de forma que as informações sejam fáceis de ler e bem organizadas. Por exemplo, o nome e o título profissional podem ser destacados no topo, com as informações de contato logo abaixo, e a descrição ou bio no final.

2. Uso de Cores e Fontes: Encoraje o uso de cores e fontes que reflitam a personalidade ou a marca pessoal do aluno, mas sem exageros. A combinação deve ser harmoniosa e profissional.

Objetivos do Desafio

• Praticar a criação de layouts com HTML e CSS.

• Aprender a organizar e destacar informações importantes.

• Explorar o uso de cores, fontes e espaçamento para criar um design diferente.

Resultado Esperado: Um cartão de visita digital, que transmite claramente as informações de contato e o título profissional do aluno, além de demonstrar habilidades em estilização com CSS.

Exemplo

Código de Exemplo

Estilo CSS:

.cartao-visita {
    background-color: #f4f4f4;
    padding: 20px;
    max-width: 300px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-family: Arial, sans-serif;
}

.cartao-visita h1 {
    font-size: 24px;
    color: #333;
}

.cartao-visita h2 {
    font-size: 18px;
    color: #555;
    margin-top: -10px;
}

.cartao-visita p {
    font-size: 14px;
    color: #666;
    margin: 5px 0;
}

.bio {
    margin-top: 15px;
    font-style: italic;
    color: #777;
}

Trecho HTML:

<div class="cartao-visita">
    <h1>Lorem Ipsum</h1>
    <h2>Desenvolvedor</h2>
    <p>Email: [email protected]</p>
    <p>Telefone: (81) 99999-9999</p>
    <p>LinkedIn: linkedin.com/in/lorem-ipsum</p>
    <p>Website: www.lorem-ipsum.com</p>
    <p class="bio">Apaixonado por tecnologia, estudando e aprendendo.</p>
</div>