Muito se tem falados dos novos valores da propriedade display
, uma delas é a grid.
O display:grid
permite que você faça nativamente, sem lib, um grid sistem.
Nesse desafio você será um pouco mais desafiado. Você terá não somente que aplicar 1 vez alvo do desafio, mas sim duas vezes.
Você deve fazer um layout de uma aplicação estilo 'admins'/'dashboards' que utilize grid-template
, e também devera desenvolver cards totalizadores que sejam responsivos.
Nesse desafio você trabalhará com
- display: grid
- grid-area
- grid-template-columns
- responsividade ( @media)
Só pode ser usado HTML e CSS
É necessaŕio que:
- Seja criado um layout estilo dashboard com no minimo menu lateral e content principal
- Seja criado cards dispostos em *grid system', no minimo quatro card.
- A pagina se adeque ao ser redimensionada.
Você pode visualizar o modelo que eu fiz no CodePen