🇺🇸
This is a responsive blog about cats, based on a layout provided by Rocketseat. I was supposed to create a webpage keeping in mind a mobile first concept, practicing the use of variables, flexible units, display grid, hsl colors, animations and transitions. So, as I always do, I created variables for font-family, font color and background-color. I exercised display grid not only on the desktop version of the whole content but also to organize the content of the little related articles (aside), while the mobile setup was done mainly using display flex to keep it simple. Animations and transitions were done trying to make it as smooth as possible.
This project was developed using the following technologies:
- HTML
- CSS
- GitHub
- Figma
You can check out the original layout clicking here.
🇧🇷
Esse é um blog responsivo sobre gatos, baseado em um layout fornecido pela Rocketseat. Eu deveria criar uma página de blog sobre gatos tendo em mente o conceito "mobile first", exercitando também o uso de variáveis, unidades de medidas flexíveis, display grid, cores hsl, animações e transições. Então, eu usei variáveis para configuração de font-family, font color e background-color. Pratiquei o display grid não apenas em todo conteúdo da versão desktop, mas também para organizar o conteúdo dos artigos relacionados (aside), enquanto a verão mobile foi feita majoritariamente com display flex para manter a simplicidade. Animações e transições foram feitas da forma mais suave possível.
Este projeto foi desenvolvido utilizando as seguintes tecnologias:
- HTML
- CSS
- GitHub
- Figma
Você pode conferir o layout original clicando aqui.