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);
}
}