1
resposta

Classe css apresentacao não está nos arquivos do projeto

No componente Banner existe a utilização de uma classe css "apresentacao" mas não encontrei nos arquivos do projeto e nem no git.

import styles from './Banner.modules.css'
import circuloColorido from 'assets/circulo_colorido.png'
import minhaFoto from 'assets/minha_foto.png'

export default function Banner(){
    return (
        <div className={styles.banner}>
            <div className={styles.apresentacao}>
                <h1 className={styles.titulo}>
                    Olá, Mundo!
                </h1>
                <p className={styles.paragrafo}>
                    Boas vindas ao meu espaço pessoal! Eu sou ....
                    Aqui compartilhando vários conhecimentos, espero que aprenda algo novo :D
                </p>
            </div>

            <div className={styles.imagens}>
                <img className={styles.circuloColorido} src={circuloColorido} aria-hidden={true} alt=""/>
                <img className={styles.minhaFoto} src={minhaFoto} aria-hidden={true} alt="Foto sorrindo"/>
            </div>
        </div>
    )
}

E o css está assim:

.banner {
    padding: 3rem 7.5rem 6.25rem;
    background-color: var(--azul-escuro);
    color: var(--branco);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.titulo {
    font-family: var(--fonte-secundaria);
    font-size: 4rem;
    margin-top: 4.875rem;
    margin-bottom: 2rem;
}

.paragrafo {
    font-family: var(--fonte-secundaria);
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 2rem;
}

.imagens {
    position: relative;
    height: 406px;
}

.imagens > .minhaFoto {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18vw;
    border-radius: 50%;
}

.imagens > .circuloColorido {
    position: absolute;
    right: 7vw;
    bottom: 2.2vw;
    width: 25vw;
}

@media (max-width: 1100px) {
    .banner {
        padding: 3.5rem 1.5rem;
    }

    .titulo {
        margin-top: 0;
        margin-bottom: 1.5rem;
    }

    .paragrafo {
        margin-bottom: 1.5rem;
    }

    .imagens {
        height: 338px;
    }

    .imagens > .minhaFoto {
        width: 25vw;
    }

    .imagens > .circuloColorido {
        right: 10vw;
        width: 35vw;
    }
}

@media (max-width: 744px) {
    .banner {
        padding: 2rem 1rem;
        display: block;
    }

    .titulo {
        margin-bottom: 2rem;
    }

    .paragrafo {
        margin-bottom: 2rem;
    }

    .imagens {
        height: 307px;
    }

    .imagens > .minhaFoto, .imagens > .circuloColorido {
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .imagens > .minhaFoto {
        width: 170px;
        transform: translate(5rem, 0px);
    }

    .imagens > .circuloColorido {
        width: 240px;
        transform: translate(-1.5rem, 0px);
    }
}
1 resposta

Olá Paulo! Tudo bem contigo?

Eu verifiquei no projeto final, e no meu aqui e realmente a classe foi chamada, mas ela não possui estilos, então peço que ignore ela, nessa parte:

<div className={styles.apresentacao}>

Pode remover essa parte: className={styles.apresentacao}, deixar só <div> e salvar que ainda vai funcionar normalmente. Eu vou passar isso para o pessoal de conteúdo verificar. Mas pode dar sequência no curso, isso não irá atrapalhar o segmento dele.

Muito obrigado por nos alertar sobre isso. Seu feedback é muito importante para nós.

Se precisar conte com o fórum!

Abraços e bons estudos.