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

[Dúvida] Posicionamento de elementos

Estou com dificuldade de posicionar imagens e usar flexbox para deixar os containers (imagem) e (texto) lado a lado. Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas

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

solução!

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?