Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Concluído] Desafio concluído - Veja como eu fiz

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Faça como eu fiz: reutilizando código

por Moisés Fauth Bier
| 44.7k xp | 5 posts

Para estilizar as estrelas criei a seguinte classe

.descricao__estrelas {
    margin-bottom: 0.5em;
}

E para deixar o texto igual ao protótipo do figma, criei a seguinte classe com os estilos abaixo:

.descricao__texto-juliana {
    font-size: 14px;
    max-width: 152px;
    line-height: 18px;

max-width - para limitar a largura do texto e deixar igual ao projeto do Figma.

line-height para criar espaçamento entre as linhas do texto, melhorando a visualização do mesmo e seguindo o padrão do Figma.

Resultado final

Forte abraço!

1 resposta
solução!
por Lorena Garcia
| 7833.5k xp | 11342 posts
Alura Scuba Team Suporte Educacional

Oi Moises, tudo bem?

Parabéns! Sua explicação sobre as classes de estilização é bastante clara e mostra um bom entendimento de como aplicar estilos para atingir um design específico.

  1. Classe .descricao__estrelas: A adição de uma classe para estilizar as estrelas é uma abordagem apropriada. A margem inferior (margin-bottom) de 0.5em ajuda a dar um espaçamento visual entre as estrelas e outros elementos, o que é uma boa prática de design.

  2. Classe .descricao__texto-juliana: Novamente, é uma ótima prática criar classes específicas para estilizar elementos. As propriedades font-size, max-width e line-height que você definiu são apropriadas para controlar o tamanho, largura e espaçamento do texto, de acordo com o design do Figma.

No geral, seu trabalho é sólido e demonstra uma abordagem organizada para a estilização de elementos. Continue assim!

Um abraço e bons estudos.