
Thiago Morais
@thirrazAll comments
- @leveau10@thirraz
Opa! Primeiro, parabéns por ter completado o desafio! Acredito que posso ajudar a melhorar a resolução com algumas sugestões
- O site pode estar congelando por conta do evento keyup. Tente usar keypress para ver se resolve o problema
- Quando o usuário clicar no botão de enviar o e-mail e estiver tudo certo, adicione uma mensagem de sucesso (não esqueça da função preventDefault)
- A keyword "var" não é mais usada por ser mais antiga, além de agora termos melhores opções como "let" "const"
E é isso! Qualquer coisa me dá um toque que eu ajudo em mais alguma coisa
- @LxLorenzo@thirraz
a sua resolução tá quente, mas vou deixar duas dicas aqui que acredito serem úteis:
-
Tente se aprofundar no CSS Grid. Muitos devs têm medo da complexidade mas é muito melhor do que flex em diversos casos
-
Tente usar a pseudo-classe ::marker para customizar os bullets da lista, pois assim você usará <ul> e não <p>, o que melhorará a semântica . Vou deixar um link caso se interesse. Marker Pseudoclass
-
- @simplicibr@thirraz
meu mano você tentou fazer esse botão da forma mais criativa possivel, o que é bom, mas não deu o resultado esperado.
tenta só usar essas propriedades aqui:
- padding => para dar espaçamento nas laterais, em cima e embaixo. Ex: padding: 1rem 4rem;
- background => para definir a cor do botão;
- color => para definir a cor da fonte;
- border-radius => para defiinir o arredondamento das bordas. Ex: border-radius: 8px.
qualquer coisa me dá um retorno para eu saber se certo
- @davidicabello@thirraz
firstly, congratulations for complete this challenge!
you can use the
<q>
tag to add quotes 😎👍Marked as helpful - @ketchanji@thirraz
I used Tailwind CSS to make this challenge, and for some reason has bugged during development, and I discovered it 3 hours later, so I kept trying, and the width and height of the components didn't work on desktop because of this bug. Basically, I was tricked by my code
- @Saubhagya111@thirraz
To add quotes you may use the
<q>
tag, and to show advice you may fetch the API with js. If you have questions you can ask 😎👍 - @ananfito@thirraz
firstly, congratulations on completing this challenge!
I have 2 tips:
-
I think it's better uses
width: 100vh
on the body tag, to adjust at any screen size, but if you prefer to use the min and max width it's okay too. -
try to use semantic HTML (<article>, <main>, <section>, etc). Here a link to you: Semantic HTML
sorry if my English is bad =)
Marked as helpful -
- @kaledmolina@thirraz
firstly, congratulations for complete this challenge!
I have two tips that can improve your code:
-
Try to use Semantic HTML (<main>, <section>, <article>, etc). I'll leave this link if you want saber mais: Semantic HTML
-
You can use flex to centralize the card component:
body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }
Marked as helpful -
- @vishal-singh5128@thirraz
firstly, congratulations for complete the challenge!
besides @Renzorr tip, you could use semantic tags for turn your code more legible. Here is a link about it and may help you Semantic HTML
- @Owura-56@thirraz
firstly, congratulation for complete this challenge! It's very good!
I have 2 tips for improve your code:
-
Try use semantic tags to make your code more legible: ex: <main>, <article> , <section>, and more others. This link may help you Semantic HTML
-
You can centralize the card using flex:
body{ width:100vw; height: 100vh; display: flex; align-items: center; justify-content: center;}
my english isn't good, sorry🙂
-
- @Have-Samuel@thirraz
Firstly, your solution is very good! My only tip is to use semantic HTML. That way you won't have multiple <div> in your code. This link may help you 😎👍
- https://developer.mozilla.org/en-US/docs/Glossary/Semantics
Marked as helpful - @jassminellaa@thirraz
Firstly, congratulations for complete the challenge! I would like to give some suggestions for imrove your code:
-
You didn't use flexbox to positioning your elements, if you chose this it's okay, but if you don't know about I'll share this link to you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ For example: you could align the main section with this:
body{ width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;
-
To have better HTML code, you can use semantic HTML. Instead of using
<div class="main"
you can use<main>
tag
sorry for my bad english
Marked as helpful -
- @AsaphHenriqueMano@thirraz
Opa irmão, tranquilo? Você pode tentar deixar a imagem rosada colocando uma <div> que sobreponha a imagem (que tenha a mesma largura e altura), colocando a cor e diminuindo a opacidade. Tente isso, e se houver alguma dúvida é só dar um toque 😎👍
Marked as helpful - @g-Barsani@thirraz
just try to centralize the card trying this (after delete the margin property)=> body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }
with flexbox align items is easier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- @Coldrainxx@thirraz
-
you can try to make a better separation of the sections. Try to separate all you see you can, example: you put the button within the card-text section, try to separate it better;
-
the container isn't centralized, try this (after that, delete "margin: 0 auto") => body{ width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }
sorry for my bad english, if you have some question, you can ask
Marked as helpful -
- @thirraz@thirraz
For some reason the screenshot is not the real solution :/
- @jolly-rolypoly@thirraz
the card can be centralized using this:
body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
Marked as helpful