Uma dúvida sobre o carrossel

Oi, Sergio, tudo bem?

As imagens baixadas no início do projeto, vem com um retângulo colorido na parte inferior e para obter o mesmo estilo apresentado no Figma, podemos seguir os seguintes passos:

• Baixe as imagens do Figma sem as faixas coloridas, ou faça o download diretamente neste link. Assim que você clicar no link, será feito o download imediatamente, caso não seja feito basta clicar em download e fechar a janela. Lembre-se de assim que fizer o download descompactar os arquivos e movê-los para a pasta onde estão as imagens, também é importante verificar o nome das imagens para alterar no arquivo HTML caso necessário;

• Em seguida é necessário realizar algumas alterações no código adicionando mudanças na posição do elemento de texto por meio das classes position-relative, position-absolute e top-50. Ficaria assim:

      <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="w-100 img-fluid d-md-none" src="./assets/Mobile/banner1-mobile.png"
          alt="Modelo feminina vestindo blusa rosa fluorescente, em fundo lilás.">
        <img class="w-100 img-fluid d-none d-md-block d-xl-none" src="./assets/Tablet/banner1-tablet.png"
          alt="Modelo feminina vestindo blusa rosa fluorescente, em fundo lilás.">
        <img class="w-100 img-fluid d-none d-xl-block" src="./assets/Desktop/banner1-desktop.png"
          alt="Modelo feminina vestindo blusa rosa fluorescente, em fundo lilás.">
      </div>
      <div class="carousel-item position-relative">
        <img class="w-100 img-fluid d-md-none" src="./assets/Mobile/banner2-mobile.png"
          alt="Modelo feminina utilizando óculos escuros e vestindo conjunto esportivo de blusa e calça na cor preta, sentada em um sofá preto em um fundo rosa.">
        <img class="w-100 img-fluid d-none d-md-block d-xl-none" src="./assets/Tablet/banner2-tablet.png"
          alt="Modelo feminina utilizando óculos escuros e vestindo conjunto esportivo de blusa e calça na cor preta, sentada em um sofá preto em um fundo rosa.">
        <img class="w-100 img-fluid d-none d-xl-block" src="./assets/Desktop/banner2-desktop.png"
          alt="Modelo feminina utilizando óculos escuros e vestindo conjunto esportivo de blusa e calça na cor preta, sentada em um sofá preto em um fundo rosa.">
        <div class="carousel-caption position-absolute posicao">
          <h5 class="fs-1">COLEÇÃO ATEMPORAL</h5>
          <p class="fs-4">Estilo e qualidade para durar.</p>
        </div>
      </div>
      <div class="carousel-item position-relative">
        <img class="w-100 img-fluid d-md-none" src="./assets/Mobile/banner3-mobile.png"
          alt="Modelo feminina utilizando óculos escuros e vestindo conjunto esportivo de blusa e calça na cor preta, sentada em um sofá preto em um fundo rosa.">
        <img class="w-100 img-fluid d-none d-md-block d-xl-none" src="./assets/Tablet/banner3-tablet.png"
          alt="Modelo feminina utilizando óculos escuros e vestindo conjunto esportivo de blusa e calça na cor preta, sentada em um sofá preto em um fundo rosa.">
        <img class="w-100 img-fluid d-none d-xl-block" src="./assets/Desktop/banner3-desktop.png"
          alt="Modelo feminina utilizando óculos escuros e vestindo conjunto esportivo de blusa e calça na cor preta, sentada em um sofá preto em um fundo rosa.">
        <div class="carousel-caption position-absolute posicao">
          <h5 class="fs-1">COLEÇÃO ATEMPORAL</h5>
          <p class="fs-4">Alto impacto visual, baixo impacto ambiental!</p>
        </div>
      </div>
    </div>
  

  Caso queira ler mais sobre os posicionamentos de elementos no Bootstrap, recomendo a leitura da documentação que você pode acessar clicando neste link.

• Por fim é necessário incluir no arquivo CSS um estilo para a classe posicao dentro de uma media query para alterar a posição dos textos em telas menores que 768px e fora do media query para telas de tablets e desktops. Ficaria assim:

  .posicao{
      top: 40%;
  }
  
  @media(max-width: 767px){
      .posicao{
          top:60%;
      }
  }
  

Dessa forma, o resultado obtido seria o mostrado na imagem abaixo:

Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum!

Abraços e bons estudos!

Fala Rodrigo!... tudo bom e com vc?

Cara muito obrigado pela explicação, ajudou e muito!!! vlw!