Card 1
Observe como os cards mudam de quantidade por linha conforme a largura da tela.
Seção Hero Responsiva
Esta área foi criada para demonstrar como um layout pode se adaptar em desktops, tablets e celulares utilizando Flexbox e Media Queries.
Cards Responsivos
Card 2
Este exemplo pode ser usado para testar grid, flex-wrap e breakpoints.
Card 3
Os alunos podem alterar largura, gap, padding e media queries.
Card 4
Também é possível testar tipografia fluida com rem, em e clamp().
Grid Responsivo
1
2
3
4
5
6
Tabela com Overflow Horizontal
| Produto | Categoria | Preço | Estoque | Fornecedor | Código |
|---|---|---|---|---|---|
| Notebook | Eletrônicos | R$ 3.500 | 12 | Tech Supply | NB-001 |
| Mouse Gamer | Periféricos | R$ 180 | 35 | Gear Store | MG-014 |
| Monitor | Vídeo | R$ 1.200 | 8 | Vision Tech | MN-220 |