Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Dúvida no transform

Quando implementei o display: inline e o transform com o skew e rotate os meus a frase "Olá, meu nome é João da Silva e eu construo sites maravilhosos" ficou tudo em apenas uma linha, ficou sem a quebra de linhas na parte "e eu construo sites maravilhosos"

<section class="secao-inicio saudacao">
                <p class="saudacao"><span class="saudacao-inicio">Olá,</span> meu nome é <strong>João da Silva</strong><span class="saudacao-ultima-linha">e eu construo <em>sites maravilhosos</em></span></p>
                <a class="botao-index" href="bio.html">Conheça mais um pouco sobre mim</a>
            </section>
.saudacao em {
    color: #851944;
    font-size: 3em;
    display: inline-block;
    transform: rotate(-5deg) skew(-10deg);
}
3 respostas

Oi, Matheus, tudo bem?

A piori, o trecho que você postou aqui está certo, mas pode ter alguma propriedade na classe saudacao que está adicionada ou faltando, mas pra isso preciso ver todos os arquivos pra testar. Você poderia por no Github?

solução!

Oi, Matheus, tudo bem?

Faltaram essas estilizações para que as palavras ficassem alinhadas como a que o instrutor fez?

.saudacao-inicio {
    font-size: 3em;
    color: #889;
}
.saudacao-ultima-linha {
    text-align: right;
    display: block;
}

Espero ter te ajudado :}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software