Este desafio tem como objetivo, criar um site "quase" completo, com tudo o que vimos neste módulo. Os temas que deverão ser abordados são:
- Formulários
- Estruturação e formatação de texto
- Mídias
- Tabelas
Além de outros recursos falados nas aulas!
- Você deve criar um site de uma clínica médica (você escolhe a especialidade)
- Este site deve conter o seguinte menu de navegação:
- Página Principal
- Sobre a clínica
- Horário de Atendimento
- Contato
- Deve, obrigatoriamente, utilizar todas os assuntos abordados nas aulas.
Abaixo como cada página deve ser criada e estruturada.
Todas as páginas terão que seguir um padrão pré-definido. Como não aprendemos sobre CSS ainda, utilize o arquivo template.html para utilizar como base. Ele segue uma estrutura semelhante a image abaixo.
* No template tem algumas cores mas é apenas para melhor visualização. Fique a vontade para alterar da melhor forma.
No Menu, ficará localizado o menu de navegação (ah vá!), 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.
- 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.
- 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.
- 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.
| Serviços | Segunda a Sexta | Sábados | Feriados |
|---|---|---|---|
| Clínica geral | 08h - 19h | 08h - 14h | 08h - 14h |
| Psicologia | 08h - 19h | 08h - 14h | 08h - 14h |
| Pediatria | 08h - 19h | 08h - 18h | - |
| Oftalmologia | 08h - 19h | 08h - 18h | - |
- Menu e Footer padrões em todas as páginas.
-
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 envias e limpar formulário
-
Menu e Footer padrões em todas as páginas.
Desafio está lançado! Com tudo que aprendemos no Módulo II é perfeitamente possível criar este site!
Bora pra cima!