Português

Descrição

MediCenter é um site estático e responsivo desenvolvido com HTML, CSS e JavaScript (vanilla). Ele reproduz o layout de uma clínica, com cabeçalho, menu, banner, notícias, departamentos, seção de agendamento e rodapé com informações adicionais.

Estrutura de pastas

• index.html — página principal
• assets/css/template.css — estilos do site e media queries
• assets/js/script.js — comportamento do menu móvel (hambúrguer)
• assets/images/ — imagens utilizadas (ex.: logo medicenter.png, medico.jpg, mulher iludida.jpg; há também php_medicenter_pronto.zip, não utilizado pelo site)

Tecnologias

• HTML5
• CSS3 (responsividade via media queries)
• JavaScript (interações simples para o menu móvel)

Funcionalidades principais

• Menu de navegação responsivo com ícone de menu (hambúrguer) no mobile.
• Banner com chamadas (Emergency Case, Doctors Timetable, Opening Hours).
• Seção “Latest News” com artigos e miniatura de imagem.
• Seções laterais (“Departments” com blocos e “Make an Appointment” com formas de contato).
• Rodapé com menus de destaque e três colunas: informações da clínica, últimos posts e últimos tweets.

Como executar

1. Baixe ou clone o projeto.
2. Abra o arquivo index.html diretamente no navegador.
   • Opcional: sirva localmente para melhor experiência:
     • Python: python3 -m http.server 8080 e acesse http://localhost:8080/
     • Node (http-server): npx http-server . -p 8080

Personalização

• Conteúdo: edite textos, links e estruturas em index.html.
• Estilos: ajuste assets/css/template.css (cores, espaçamentos, layout).
• Comportamento: o menu móvel é controlado por assets/js/script.js (toggle do display do <ul>).
• Imagens: substitua os arquivos em assets/images/ e atualize as referências no HTML/CSS.

Responsividade

• Ponto principal em 994px: o layout muda para colunas empilhadas e o menu passa a ser acessível pelo botão hamburguer.
• O JS alterna o display do menu (flex/none) em telas pequenas.

Melhorias sugeridas

• Substituir a tag não padrão <o> por <span class="..."> e mover estilos para CSS (há uso de <o> no rodapé e CSS associado).
• Adicionar meta tags (description, og tags) e títulos mais descritivos para SEO.
• Revisar textos “placeholder” e links “HOME” repetidos no menu.
• Melhorar acessibilidade: textos alternativos (alt) significativos nas imagens, hierarquia de headings e contraste de cores.
• Otimizar imagens (compressão e formatos modernos quando aplicável).

Problemas conhecidos

• Uso da tag HTML não padrão <o> (não é válido em HTML). Recomenda-se trocar por <span> com classe.
• Estado do menu pode ficar inconsistente ao redimensionar a janela depois de abrir/fechar no mobile (por ser um toggle baseado em style.display).
• Há um arquivo zip em assets/images (php_medicenter_pronto.zip) que não é utilizado pelo site.

Licença

Nenhuma licença explícita foi fornecida no repositório. Caso pretenda distribuir, adicione um arquivo LICENSE apropriado.

English

Description

MediCenter is a responsive, static website built with HTML, CSS, and vanilla JavaScript. It replicates a clinic layout featuring a header, navigation menu, banner, news, departments, an appointment section, and a footer with additional information.

Folder structure

• index.html — main page
• assets/css/template.css — site styles and media queries
• assets/js/script.js — mobile (hamburger) menu behavior
• assets/images/ — images used (e.g., logo medicenter.png, medico.jpg, mulher iludida.jpg; also php_medicenter_pronto.zip, not used by the site)

Technologies

• HTML5
• CSS3 (responsiveness via media queries)
• JavaScript (simple interactions for the mobile menu)

Key features

• Responsive navigation menu with a hamburger button on mobile.
• Banner highlights (Emergency Case, Doctors Timetable, Opening Hours).
• “Latest News” section with articles and image thumbnails.
• Sidebar sections (“Departments” with blocks and “Make an Appointment” with contact options).
• Footer with highlighted menus and three columns: clinic info, latest posts, and latest tweets.

How to run

1. Download or clone the project.
2. Open index.html directly in your browser.
   • Optional: serve locally for a better experience:
     • Python: python3 -m http.server 8080 and visit http://localhost:8080/
     • Node (http-server): npx http-server . -p 8080

Customization

• Content: edit texts, links, and structures in index.html.
• Styles: adjust assets/css/template.css (colors, spacing, layout).
• Behavior: the mobile menu is controlled by assets/js/script.js (toggling <ul> display).
• Images: replace files in assets/images/ and update references in HTML/CSS.

Responsiveness

• Main breakpoint at 994px: layout stacks into columns and the menu becomes accessible via the hamburger button.
• JS toggles menu display (flex/none) on small screens.

Suggested improvements

• Replace the non-standard <o> tag with <span class="..."> and move styles to CSS (used in the footer with corresponding CSS).
• Add meta tags (description, og tags) and more descriptive titles for SEO.
• Review placeholder texts and repeated “HOME” links in the menu.
• Improve accessibility: meaningful alt text on images, proper heading hierarchy, and color contrast.
• Optimize images (compression and modern formats when applicable).

Known issues

• The non-standard HTML tag <o> is used (invalid in HTML). Replace it with <span> and a CSS class.
• Menu state may become inconsistent when resizing after toggling on mobile (because it relies on style.display).
• A zip file exists in assets/images (php_medicenter_pronto.zip) that is not used by the site.

License

No explicit license is provided in the repository. If you plan to distribute, add an appropriate LICENSE file.