Estou com dificuldade de posicionar imagens e usar flexbox para deixar os containers (imagem) e (texto) lado a lado.
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
Estou com dificuldade de posicionar imagens e usar flexbox para deixar os containers (imagem) e (texto) lado a lado.
CSS:
@import url(/styles/reset.css);
:root { --cor-de-fundo: linear-gradient(to right, rgb(218, 192, 175), rgb(133, 67, 29)); --cor-cabecalho: #ffffff; --cor-fonte-cabecalho: #552c0b; --cor-fonte-principal: #442b2c; --fonte-cabecalho: 'Agdasima', sans-serif; --fonte-primaria: 'Dancing Script', cursive; }
body { display: flex; flex-direction: column; background-image: var(--cor-de-fundo); height: 100vw; width: 100vw; background-size: 100vw; font-family: var(--fonte-primaria);
}
.cabecalho { display: flex; flex-direction: row; justify-content: space-around; align-items: center; gap: 10em; background-color: var(--cor-cabecalho); height: 10em; margin-top: 2%; font-size: 1.1em; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); }
#logosorvete {
height: 10em;
}
.cabecalho__lista {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
color: var(--cor-fonte-cabecalho);
font-family: var(--fonte-cabecalho);
font-weight: 400;
text-transform: uppercase;
gap: 10em;
}
.conteudo-primario { display: flex; flex-direction: row-reverse; justify-content: center; }
.conteudo-imagem {
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 30em;
padding-left: 60em;
}
.container {
width: 40em;
height: 40em;
background-image: url(/img/img-sorv-vegano.jpg);
background-repeat: no-repeat;
border-radius: 15%;
box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.2);
position: relative;
margin-right: 4em;
}
.container-img { width: 40em; height: 40em; background-image: url(/img/img-sorv-vegano-2.jpg); position: absolute; background-repeat: no-repeat; background-size: cover; bottom: 20em; right: 23em; border-radius: 15%; box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.2); }
.conteudo-principal { font-size: 26px; color: var(--cor-fonte-principal); }
Olá, Bruno! Tudo bem?
O display flex é aplicado na div 'pai', nesse caso, deveria ser aplicado no ' main class="conteudo" '.
outra dúvida Gisele, se eu aplicar ele na main "conteudo" ele não ia transformar somente a div "conteudo-primario"em flex item não? os outros elementos filho da conteudo-primario também herda como flex-item?