Projeto de um website moderno e totalmente responsivo para a empresa fictícia Omnifood, focada em entrega de refeições saudáveis por assinatura.
Preview da Hero Section do site Omnifood
Este projeto foi desenvolvido com foco em:
- Estrutura semântica HTML
- Layout moderno com CSS Grid e Flexbox
- Responsividade para desktop, tablet e mobile
- Boas práticas de organização e reutilização de código
- Acessibilidade e legibilidade
O objetivo é consolidar fundamentos sólidos de HTML5 e CSS3, simulando um projeto real de mercado.
- HTML5
- Tags semânticas (header, section, figure, footer)
- Atributos de acessibilidade
- CSS3
- Flexbox
- CSS Grid
- Media Queries
- Pseudo-classes e pseudo-elementos
- Variáveis CSS
- JavaScript
- Apenas interações básicas
- Git & GitHub
- Versionamento
- Deploy com GitHub Pages
O layout se adapta corretamente aos seguintes tamanhos de tela:
-
🖥️ Desktop
-
📱 Tablets
-
📱 Smartphones
Utilizando:
-
max-width
-
width: 100%
-
Media Queries bem definidas
-
Layout fluido
📂 project-omnifood/
├── 📂 assets/
│ ├── 📂 css/
│ ├── 📂 images/
│ │ ├── 📂 app/
│ │ ├── 📂 customers/
│ │ ├── 📂 form/
│ │ ├── 📂 gallery/
│ │ ├── 📂 hero/
│ │ ├── 📂 logos/
│ │ ├── 📂 meals/
│ │ ├── 📂 preview/
│ │ └── 📂 favicon
│ └── 📂 js/
├── 📄 content.md
├── 📄 .gitattributes
├── 📄 index.html
├── 📄 LICENSE
└── 📄 README.md
-
Construção de layouts reais
-
Centralização e alinhamento com Grid e Flex
-
Uso correto de figure e figcaption
-
Ícones SVG inline
-
Controle de largura com max-width e width
-
Organização visual e semântica do código
-
Escrita de HTML limpo e acessível
Projeto desenvolvido com base no curso Build Responsive Real-World Websites with HTML and CSS ministrado por Jonas Schmedtmann.
Este repositório representa minha implementação prática e pessoal dos conceitos ensinados no curso, com foco em aprendizado e consolidação dos fundamentos de desenvolvimento web.
👤 Sandro Batista dos Santos
💻 Desenvolvedor Web em formação
Este projeto é de uso educacional e não possui fins comerciais.