Trilha HTML - Dio.me

Módulo 02 - HTML I - Conceitos Básicos

Este desafio tem como objetivo criar um site "quase" completo, com tudo o que foi abordado neste módulo. Os temas incluem:

• Formulários
• Estruturação e formatação de texto
• Mídias
• Tabelas

Além de outros recursos discutidos nas aulas!

Instruções

1. Você deve criar um site de uma clínica médica (você escolhe a especialidade).
2. O site deve conter o seguinte menu de navegação:
   • Página Principal
   • Sobre a clínica
   • Horário de Atendimento
   • Contato
3. Deve-se utilizar todas os assuntos abordados nas aulas.

Estrutura das páginas

Todas as páginas seguirão um padrão pré-definido. Como ainda não abordamos CSS, o arquivo template.html pode ser utilizado como base. Ele segue uma estrutura semelhante ao exemplo abaixo:

No Menu, será localizado o menu de navegação, no Header de cada página ficará uma imagem, no Footer informações de contato, e o Content é o conteúdo de cada página.

Páginas a serem criadas

Página Principal

• Deve ter uma imagem no Header.
• Em Content, uma breve descrição sobre a clínica.
• Menu e Footer padrões em todas as páginas.

Sobre a clínica

• Deve ter uma imagem diferente no Header.
• Em Content, um texto falando sobre a clínica.
• Menu e Footer padrões em todas as páginas.

Horário de Atendimento

• Deve ter uma imagem diferente no Header.
• Em Content, um pequeno texto falando sobre os serviços, e uma tabela de preços, onde cada linha é um serviço, com o preço de cada um de acordo com os dias da semana.
• Menu e Footer padrões em todas as páginas.

Contato

• Deve ter uma imagem diferente no Header.
• Em Content deve ter:
  • Os telefones de contato (celular e whatsapp)
  • Endereço completo da clínica
  • Um Iframe com o Google Maps apontando o endereço da clínica
  • Um formulário de contato com:
    • Nome (type="text")
    • E-mail (type="email")
    • Assunto (type="text")
    • Mensagem (textarea)
    • Botões de enviar e limpar formulário
• Menu e Footer padrões em todas as páginas.

Cores Utilizadas

• Cor de Destaque: #26A69A
• Cor de Fundo: #E0F2F1
• Cor de Texto Principal: #263339
• Cor do Texto Secundário: #728f9e