Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found

Submitted

Usei o metodo de flex box, para aplicar a responsividade

Vinicio :) 120

@JoseVinicioo

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Consegui adaptar os site para todos os dispositivos

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

Encontrei dificuldade para alinhar os "box" de conteudo da maneira que foi pedida, mas solucionei unindo 2 boxes, e deixando 2 separados.

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

Alguma outra maneira de alinhar os itens

Community feedback

@R3ygoski

Posted

Olá Vinício, parabéns pela conclusão de mais um projeto. Ficou muito bom, meus parabéns.

Sobre a parte de alinhar os objetos, o melhor para esse desafio é utilizar o grid, isso porque você precisava posicionar os elementos tanto na vertical quanto horizontal, e sempre que precisar desse alinhamento bidirecional, o recomendado é o grid, já o flex é unidirecional .

O site ele não está responsivo para todos os dispositivos, ele fica um pouco quebrado em 320px, e em telas mobile, o seu card de calculator, acaba por ficar em cima do card de supervisor. Se você remover o position: absolute do seletor .for, ele seguirá a linha de forma correta.

E se quiser deixar seu HTML mais semântico, você poderia trocar as <div> de cada card por <article>, pois esses conteúdos são autoexplicativo e independentes.

E novamente, meus parabéns, continue praticando e se aprimorando, ficou boa sua resolução do desafio. Caso tenha ficado alguma duvida por favor, comente abaixo que tentarei ajudar da melhor forma possível.

2

P. Ricardo 2,370

@pRicard0

Posted

@R3ygoski Não acha que <section> seria melhor do que article? Eles não são completamente independentes e fazem parte de um todo. Eles estão inseridos dentro do contexto da página. É tudo um grupo de características que não podem ser dissociadas e só fazem sentido quando estão juntas. O que acha?

1

@R3ygoski

Posted

Olá @pRicard0, na verdade eu acho que o mais correto é realmente <article>, isso porque se formos reparar, eles não dependem do contexto da página.

Isso porque cada card desse descreve sobre uma funcionalidade específica e de forma autoexplicativa, isso é, fazem sentido por si só. Se removêssemos todo o resto da página e deixássemos apenas esses cards, eles ainda fariam sentido. E isso vale para os outros

Um exemplo disso seria o primeiro card que é o Supervisor, só com ele você já consegue entender que ele representa uma funcionalidade de supervisão, isso por causa da descrição, título e imagem.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord