@R3ygoski
Posted
Olá Jade, parabéns pela conclusão do projeto, ele ficou muito bem-feito e se assemelha muito ao design proposto.
Sobre a dificuldade que você teve, eu tentei repetir ela e funcionou perfeitamente para mim, veja, eu alterei esses trechos no seu CSS:
.card-2 {
display: none;
}
.card-2.visible {
display: flex;
}
e no JS eu alterei esse trecho (Linha 31 e 32):
ratingCard.style.display = "none";
thankYouCard.classList.add("visible");
E também funcionou sem problema algum aparente. O que faz crer que talvez tenha tido problema no Layout devido ao uso de position.
Sobre você ter utilizado a position, isso não era necessário. Você poderia remover a div.card-container e deixar com que os elementos fiquem diretamente como filhos da <body>, daí basta remover a position dos cards, e assim os elementos estarão centralizados.
E uma coisa que eu notei, é que seu CSS está um pouco confuso, pois você acabou repetindo classes de forma desnecessária. Como por exemplo na linha 56 - 59 e 137 - 140, uma forma de corrigir isso seria agrupando ambos, que assim facilita na legibilidade do projeto.
Outra coisa que notei, foi o aninhamento no CSS, isso também não é necessário, por exemplo, ao invés de .card-2.visible daria para usar .visible. Isso vale também para trechos como esse: .card__buttons button.selected onde o .card__buttons poderia ser removido.
Agora uma dica quanto ao seu HTML, ele está bem estruturado, mas está muito pouco semântico, algumas tags poderiam ser alteradas para tags mais semânticas como por exemplo:
div.card__buttonspoderia ser uma<section>pois ela está fazendo o papel de agrupar elementos relacionados entre si.div.cardediv.card-2poderiam ambas serem alteradas para<article>pois ambas são elementos autoexplicativos.div.card-containerpoderia ser alterada para<main>pois sempre após o<body>utilizamos<main>e também devido a esse trecho conter a parte principal da página.
E é isso, novamente parabéns, continue praticando e se aprimorando, e caso tenha ficado qualquer dúvida quanto ao que eu disse, por favor, comente abaixo que tentarei ajudar da melhor forma possível.
