All solutions

en: My task was to develop this product preview card component and make it look as close as possible to the design.

I could use any tools that would help me complete the challenge. So, if there was something I wanted to practice, I was free to give it a go.

Users should be able to:

View the optimal layout depending on their device's screen size See hover and focus states for interactive elements.

pt-br: Minha tarefa era desenvolver esse componente de visualização de produto e deixá-lo o mais próximo possível do design.

Os usuários deveriam ser capazes de:

Visualizar o layout ideal dependendo do tamanho da tela de seus dispositivos Ver estados de hover e foco para os elementos interativos.

en: My challenge was to develop this preview card component and make it look as close to the design as possible.

I was supposed to allow my users to: View the optimal layout depending on their device's screen size. See hover states for interactive elements.

pt-br: Meu desafio era desenvolver esse componente de cartão de pré-visualização e fazê-lo parecer o mais próximo possível do design.

Eu deveria permitir que meus usuários: Visualizassem o layout ideal, dependendo do tamanho da tela de seus dispositivos. Visualizassem estados de sobreposição para elementos interativos.

Has anyone found a solution to make the background images bigger but stay in the corners? I'm using backgorund to generate the two images.

en: Landing page created using HTML and CSS without the aid of frameworks. pt-br: Landing page criada em HTML e CSS sem auxílio de frameworks.

Help me improve this project... I used javascript to create the input range animation. What was your solution?

In this project, CSS grid was used together with Flexbox. Always add CSS variables to control color. Any suggestions on what I could improve?

Could you help me improve this code? Any suggestions on what you would or would have done differently? I used CSS variables to have more dynamic color control

I would like tips and suggestions on what I could improve to optimize the code...