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.... A
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
hoje, com a Alura e o Google Gemini
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:
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!
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!