3
respostas

Nao consigo posicionar as Divs

boa tarde galera! estou tentando aplicar um codigo para funcionar como na foto mas nao estou conseguindo de jeito nenhum. Inicialmente quero fazer duas DIVs. Uma para texto e a outra para Slides de foto. Nao dar pra ver, mas na parte das fotos existe slides... eu queria fazer justamente desss jeito.... AInsira aqui a descrição dessa imagem para ajudar na acessibilidade

Alguem poderia me ajudar por favor? !

tentei colocar o cod aqui mas nao cabe em uma mensagem só!

PS: Também usei o JS pra fazer a parte dos slides na foto

3 respostas

Olá Katry, tudo bem?

Para fazer isso você pode seguir a seguinte estrutura:

<section class="caixa">
        <div class="texto">
            <h1>Título.</h1>
            <p>Texto</p>
        </div>
        
        </div class = "carrossel">
            Conteúdo
        </div>
</section>

Observe que utilizei de duas divs numa section, que se torna o pai e que organiza os seus filhos, depois basta utilizar de flexbox o meu CSS no meu caso ficou assim:

.caixa{
    max-width: 100vw;
    height: 100vh;
    padding: auto;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.texto{
    display: flex;
    width: 30%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.carrossel{
    width: 70%;
}

Muitas das propriedades eu utilizei para o meu caso e que provavelmente não vai ser muito útil no seu caso, foi só para criar um esqueleto para a foto enviada.

Observe o resultado obtido: Exemplificação do meu projeto Ficou um resultado simples, mas acredito que possa lhe dar um norte, em resumo basta organiza o HTML entre 3 divs sendo 1 delas o pai que organiza os seus filhos um ao lado do outro.

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Usei exatamente seu code e nao deu certo amigo :/ Nem apareceu a setinha pra mudar de img :(

Olá Katry, tudo bem?

Neste caso eu só fiz um esqueleto, só para lhe exemplificar a ideia principal de organização das divs e as disposições das mesmas, através do CSS, e para carrossel é necessário mais código, nesse caso eu usei uma biblioteca chamada Swiper,e fiz as importações a fim de criar ela.

Mas caso queira o código que utilizei deixo o mesmo para download:

É um projeto simples, mas espero que o mesmo lhe ajude e sirva como base para construir o seu projeto, recomendo ler mais a respeito do swiper para customizar o carrossel a seu gosto e necessidade do projeto.

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!