Using grid-template, flexbox and figure tag for image change

What are you most proud of, and what would you do differently next time?

PORTUGUESE Flexbox, Flexbox, Flexbox... e por ai vai...

A vida não é toda feita de Flexbox. Entender outras formas de posicionamentos de elementos também é válida. Neste projeto usei os dois, Grid para estruturar card o card em grade de linhas e colunas (é mais fácil gerencia-los) e Flexbox para alinhar os elementos dentro de cada grade.

Dessa forma, fica mais fácil posicionar os elementos no design e quando precisar, usar Flexbox para separa-los horizontalmente.

Como é um projeto de aprendizado, escolhi utilizar esta abordagem. Aproveitei e coloquei um pouco de animação entre as transições de responsividades.

ENGLISH Flexbox, Flexbox, Flexbox... and so on...

Life isn't all about Flexbox. Understanding other ways of positioning elements is also valid. In this project I used both: Grid to structure each card in a grid of rows and columns (it's easier to manage them) and Flexbox to align the elements within each grid.

This way, it's easier to position the elements in the design and, when necessary, use Flexbox to separate them horizontally.

Since this is a learning project, I chose to use this approach. I took the opportunity to add some animation between the responsive transitions.

I hope you like it!

What challenges did you encounter, and how did you overcome them?

PORTUGUES Pensar como alinhar o projeto final no meio da tela sempre é um desafio, pois há várias maneiras de fazer. Dessa vez, escolhi grid-template.

ENGLISH Thinking about how to align the final project in the middle of the screen is always a challenge, as there are several ways to do it. This time, I chose grid-template.

What specific areas of your project would you like help with?

PORTUGUESE Animações com CSS é um dos objetivos que tenho que alcançar. Neste projeto, provei um pouco dessa funcionalidade. Mas, em breve, pretendo utilizar em mais elementos.

ENGLISH CSS animations are one of the goals I have to achieve. In this project, I tried out a little of this functionality. But I intend to use it in more elements soon.