Git Product home page Git Product logo

dio-html-veterinary-clinic's Introduction

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 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!

Instruções

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

Abaixo como cada página deve ser criada e estruturada.

Estrutura das páginas

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.

Estrutura

* 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.

Página Principal

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

Sobre a clínica

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

Horário de Atendimento

  1. Deve ter uma imagem diferente no Header.
  2. 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 -
  1. Menu e Footer padrões em todas as páginas.

Contato

  1. Deve ter uma imagem diferente no Header.

  2. 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
  3. 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!

dio-html-veterinary-clinic's People

Contributors

devthiart avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.