Design comparison
Solution retrospective
I used some random values to be able to align the paragraph, trying to leave it exactly like in the example image of the design. Is there a simpler way to do this task? I used different compositions with widths and percentages.
About my html and css code, is there anything I could improve? I need to know if I'm coding with organization, quality...
Community feedback
- @correlucasPosted over 2 years ago
👾Fala Alephy, beleza? Parabéns pelo seu novo desafio!
Acabei de dar uma olhada no seu código e tenho umas dicas pra você:
1.Cria uma classe pra gerir todos os três cartões e outra classe pra cada card individualmente, por exemplo uma classe pros 3 cartões pra definir eles como
max-width: 300px
e deixar eles responsivos e com o tamanho certo. Note que você usouwidth
.2.Deixa pra ativar a media query um pouco depois por causa do espaço lateral muito grande quando o card fica vertical ou então deixar os cartões crescerem 100% da largura e colocar só uma margem pra separar eles das bordas da tela.
3.Pra aplicar o efeito de
Hover
no botão basta você criar um botão com borda branca e com o background da cor de cada cartão. Ai ele vai fazer aquele efeito OUTLINE.Depois me diz se essas modificações funcionaram.
Valeu!
Marked as helpful0@alephy9Posted over 2 years ago@correlucas
Eu não consegui colocar duas classes na mesma tag do html, as 3 divs que tenho, acabei colocando 3 id e implementei o max-width e também fiz todo reajuste nos códigos simplificando mais adicionando classes em titulos e paragrafos pra configurar de uma só vez vários elementos, consegui eliminar muita linha de código e deixei bem mais elegante do que tava antes. Mas o id eu to duvidoso pq só se usa um por documento? e eu acabei colocando nas 3 divs, mas vou tentar de uma forma melhor no entanto fiz com id pra mostrar como ficou.
os botoes eu criei a borda e deixei o hover transparente mostrando o fundo do background dos cartões.
o @media eu consegui colocar pequenas linhas, diferente das centenas que eu havia feito...
Me ajudou muito eu consegui acertar o posicionamento do paragrafo muito mais rápido.
Se eu tiver que melhorar (pq sinto isso) ou algo que eu não consegui compreender pode me informar que eu vou buscar conhecimento, eu gosto de aprender.
0@correlucasPosted over 2 years ago@alephy9 boa, cara em relação ao Id, seria melhor você deixar pra quando tiver um formulário ou Javascript, dá pra resolver tudo só com classe mesmo. O ideal é você criar classes pra coisas que se repetem muito tipo padding, border radius, tamanho de fonte, porque aí você escreve menos código.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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