📅Anúncio de Evento

Crie um anúncio de evento com imagem, data, hora, local e descrição. Use HTML e CSS para organizar e estilizar o layout, tornando as informações claras e o design visualmente atraente.

Descrição: Neste desafio, devem criar um anúncio digital para um evento usando HTML e CSS. O objetivo é simular um cartaz ou banner online que divulgue as principais informações do evento, como a imagem, data e hora, local, e uma descrição breve. O foco é na clareza da informação e na atratividade visual, incentivando os usuários a participarem do evento.

Elementos Obrigatórios

1. Imagem do Evento: Deve incluir uma imagem representativa do evento, como um banner, logotipo, ou uma foto relacionada.

2. Data e Hora: Especificar a data e o horário do evento de forma destacada, para que os visitantes saibam imediatamente quando o evento ocorrerá.

3. Local: Indicar o local onde o evento será realizado. Pode incluir o nome do local, endereço, e até um link para um mapa se for relevante.

4. Descrição do Evento: Um breve parágrafo explicando o que é o evento, quem é o público-alvo, e por que as pessoas deveriam participar.

Estilo e Layout

1. Organização Visual: Os elementos devem ser organizados de forma clara. A imagem do evento pode ser usada como destaque no topo, seguida pela data, hora, local, e descrição em sequência.

2. Uso de Cores e Fontes: Incentive o uso de cores que combinem com o tema do evento.

Objetivos do Desafio

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

• Aprender a organizar informações importantes de maneira visualmente atraente.

• Explorar o uso de imagens, cores, e fontes para destacar um evento.

Resultado Esperado: Um anúncio de evento digital claro e atrativo, que inclui uma imagem do evento, data, hora, local e descrição, demonstrando habilidades em estilização e organização de conteúdo com HTML e CSS.

Exemplo

Código de Exemplo

Estilo CSS:

.anuncio-evento {
    background-color: #fff;
    padding: 20px;
    max-width: 400px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px auto;
}

.anuncio-evento img {
    width: 100%;
    border-radius: 10px;
}

.anuncio-evento h2 {
    font-size: 24px;
    color: #333;
    margin: 15px 0;
}

.anuncio-evento p {
    font-size: 16px;
    color: #555;
    margin: 5px 0;
}

.anuncio-evento .descricao {
    margin-top: 10px;
    color: #666;
}

Trecho HTML:

<div class="anuncio-evento">
    <img src="https://inspa.academy/logo1.png" alt="Imagem do Evento">
    <h2>Academia de Programação</h2>
    <p><strong>Data:</strong> 01 de Agosto de 2024</p>
    <p><strong>Hora:</strong> 19:00 - 20:30</p>
    <p><strong>Local:</strong> Marques Consult</p>
    <p class="descricao">Participe da nossa academia e se desenvolva profissionalmente para o mercado de TI. Inscreva-se agora!</p>
</div>