“Você nunca sai perdendo quando ganha conhecimento!”
Sobre o desafio | Entrega | Licença
A partir do arquivo do desafio 2.2, adicionar no header um link chamado Conteúdos. Essa página deve conter um grid onde devem ser mostrados os seus 3 posts favoritos do Blog da Rocketseat (Blog). Ao clicar em um dos posts, deve ser aberta uma modal onde um iframe irá carregar as informações do post selecionado.
- Título da página
- Grid com 3 colunas e 1 linha onde serão apresentados os cards dos posts
- Imagem de destaque do Post (Tutorial de como pegar os links das imagens)
- Título do Post
- Autor do Post
- Tempo de Leitura
O modal deve conter um iframe que busca a página do post (dica: basta adicionar o Slug - versão padronizada do título - ao final de https://blog.rocketseat.com.br/
, por exemplo, axios-um-cliente-http-full-stack
). Além do botão de fechar o modal, é preciso implementar a funcionalidade de maximizar o modal (dica: utilize a mesma lógica implementada para fechar o modalOverlay
, mas trabalhe com a classe modal
e utilize o método contains
do classList
para verificar se o elemento está ou não com a classe maximize
).
Você tem liberdade para escolher a estilização que preferir para esse desafio, mas alguns pontos são obrigatórios:
- Deve ser utilizado o grid para organizar os posts
- O modal nunca deve abrir maximizado
Esse desafio não precisa ser entregue e não receberá correção. Após concluí-lo, adicionar esse código ao seu Github é uma boa forma de demonstrar seus conhecimentos para oportunidades futuras.
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Feito com 💜 by Rocketseat 👋 Entre na nossa comunidade!