Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Bloco Curiosidades

Olá, Segue a minha solução para este bloco.

HTML

<section class="curiosidade">
                <div>
                    <img src="imagens/pedra-e-flor.jpeg" alt="" />
                </div>
                <div class="curiosidade__inner">
                    <h3>É sobre bem estar</h3>
                    <h4>Cuide do seu corpo e leve boas memórias consigo.</h4>
                    <p>
                        Carregue com você o bem-estar, onde estiver. Leve o conforto do SPA
                        para a sua casa. Confira nossas opções de sabonetes, sais de banho e
                        velas para presentear você mesmo ou quem você ama.
                    </p>
                </div>
</section>

SASS

.curiosidade
  width: 60%
  display: flex
  justify-content: space-around
  margin-inline: auto
  align-items: center
  padding-block: 3rem
  &__inner
    border-left: solid 2px $secondary
    padding-left: 50px
    padding-block: 50px
  h3
    font-size: $text-size / 1.5
    font-weight: 300
    margin-top: 25px
    margin-bottom: 20px
    color: $primary

  h4, p
    font-size: $text-size / 3
    font-weight: 300
    color: $primary
    line-height: 1.25rem
  h4
    color: $secondary
    font-weight: bold
    margin-bottom: 8px

RESULTADO

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

Olá João, tudo bem?

Parabéns pela solução apresentada para o bloco de curiosidades! Ficou muito bem estruturado e organizado. Muito obrigada por compartilhar com a gente o seu código :D

O uso do SASS traz uma facilidade na escrita do CSS, deixando o código mais limpo e fácil de entender. Além disso, a utilização de variáveis para cores e tamanhos de fontes ajuda a manter a consistência visual do projeto.

Um abraço e bons estudos.