Olá, no material de apoio não ficou disponível os estilos de css em nenhum vídeo, tem alguma forma de conseguir?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá, no material de apoio não ficou disponível os estilos de css em nenhum vídeo, tem alguma forma de conseguir?
Oi Felipe, tudo bem?
Vou passar para a equipe responsável. Mas vou deixar aqui o link do repositório do curso no GitHub.
E vou colar aqui também o CSS do Banner que peguei de lá.
.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);
}
}