@jarleisassi
Posted
Cara o efeito de sombras e gradiente tu consegues atraves dessa ferramenta online : https://www.cssmatic.com/box-shadow Fica mole mole chegar no resultado que queres. Valeu :D
Marked as helpful
O que você achou difícil ao construir o projeto?
Quais áreas do seu código você não tem certeza?
Você tem alguma dúvida sobre as melhores práticas?
@jarleisassi
Posted
Cara o efeito de sombras e gradiente tu consegues atraves dessa ferramenta online : https://www.cssmatic.com/box-shadow Fica mole mole chegar no resultado que queres. Valeu :D
Marked as helpful
@rafaeldgeo
Posted
Parabéns Jarlei, ficou ótimo o projeto!!
Algumas sugestões para o projeto: Você poderia usar a propriedade border-radius: 30px que substitui: border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-top-left-radius: 30px; border-bottom-left-radius: 30px;
Quando as bordas forem diferente você pode usar border-radius: 30px 20px 10px 40px (seguindo a ordem top-left, top-right, bottom-right e bottom-left) ou border-radius: 30px 30px (border-top e border-bottom).
Mais informações consulte o W3. Espero que tenha te ajudado.
Marked as helpful
@jarleisassi
Posted
@rafaeldgeo Acho que voce marcou a pessoa errada. Nao sou eu o dono do projeto haha
@rafaeldgeo
Posted
@jarleisassi
Desculpe. Errei... estou aprendendo ainda rs
@jarleisassi
Posted
@rafaeldgeo hahhahaa tb to nessa
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
BODY MEASUREMENTS 📐:
width: 100vw
property for body
element is not necessary. because it's a block level element which will take the full width of the page by default.min-height: 100vh
for body
instead of height: 100vh
. Setting the height: 100vh
may result in the component being cut off on smaller screens, such as mobile devices in landscape orientation.height: 100vh
then the body
will have 100vh
height no matter what. Even if the content spans more than 100vh
of viewport.min-height: 100vh
then the body
will start at 100vh
, if the content pushes the body
beyond 100vh
it will continue growing. However if you have content that takes less than 100vh
it will still take 100vh
in space..
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@NehalSahu8055
Posted
Olá Coder 👋.
Parabéns por concluir o desafio com sucesso! 🎉
Poucas sugestões em relação ao design.
height
por min-height:100vh
no corpo para centralizar adequadamente o cartão e o plano de fundo..btn:hover
background: linear-gradient(#6542FE,#342CE2);
➨ Use largura máxima em vez de largura para tornar seu cartão responsivo.
➨ Remover width:100vw
.
width 100vw
o torna tão largo quanto a viewport atual. Mas fazer isso é uma prática ruim. Primeiro, quase sempre é desnecessário. Um elemento de bloco, por padrão, já ocupa toda a largura disponível. Definir a largura manualmente não é necessário nessa situação.➨ Você esqueceu de adicionar o cursor: pointer
; no botão. Será mais fácil de usar para adicioná-lo.
recursos de acessibilidade
como aria, sr-only e title
que são acessíveis para leitores de tela.Eu espero que você ache isto útil.
Feliz codificação😄
Marked as helpful
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