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

Text-Wrap - colocar foto do lado do texto

Salve, galera! Beleza?

To tentando fazer o testo ficar ao lado direito da imagem, e o título no centro, acima dos dois, mas tá dando muito errado.

aqui é o css ,


/*Container como funciona o challenge online*/

.container__challenge__online {
    display: flex;
        flex-wrap: wrap;
}

.text__challenge__online{
    width: 400px;
    float: left;
}

.container__challenge__online img {
    width: 400px;
    float: right;

}

.container__challenge__online h1 {
    padding-bottom: 2rem;
    text-align: center;
    justify-content: center;

}

aqui é o html



    <div class="container__challenge__online">
        <h1>A melhor competição on-line do Brasil!</h1>
        <div class="text__challenge__online">
            <p>O LGCHALLENGE foi inspirado em programas consagrados da televisão, daqueles que fazem os espectadores
                gargalhar e
                proporcionam momentos incríveis, tanto pra quem participa, como para quem assiste.
            </p>
            <p> Criado com o intuito de misturar as mais variadas comunidades da plataforma, sendo o
                primeiro
                gameshow inteiramente adaptado para a internet, a ser transmitido na twitch brasileira!
            </p>
            <p>
                Além disso, aqui, a gente reune diversas dinâmicas junto a grupos de streamers para que compitam entre
                sí
                por meio de conhecimentos gerais, aliados as melhores consequência possíveis: Tortas na cara, pagamento
                de
                mico, interação com o espectadores AO VIVO, e claro, muita diversão!
            </p>
        </div>
        <img class="challenge__online__image" src="./Images/challenge-online-12.jpeg" alt="picture">
    </div>

e aqui é como ta ficando a tragédia

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Alguém sabe o que eu posso fazer pra arrumar? por favor?

3 respostas

so muda a imagem

Não funcionou do jeito que vc falou

Agora o texto apenas fica embaixo do texto :/

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!

  <div class="container__challenge__online">
    <h1>A melhor competição on-line do Brasil!</h1>

    <div class="text__challenge__online">
      <img class="challenge__online__image" src="138322189-2db8df52-9dcb-40a0-88a8-c365466bd33d.gif" alt="picture">
      <p>O LGCHALLENGE foi inspirado em programas consagrados da televisão, daqueles que fazem os espectadores
        gargalhar e
        proporcionam momentos incríveis, tanto pra quem participa, como para quem assiste.
        Além disso, aqui, a gente reune diversas dinâmicas junto a grupos de streamers para que compitam entre
        sí
        por meio de conhecimentos gerais, aliados as melhores consequência possíveis: Tortas na cara, pagamento
        de
        mico, interação com o espectadores AO VIVO, e claro, muita diversão!
        Criado com o intuito de misturar as mais variadas comunidades da plataforma, sendo o
        primeiro
        gameshow inteiramente adaptado para a internet, a ser transmitido na twitch brasileira!
      </p>

    </div>

  </div>

agora o css

/*Container como funciona o challenge online*/

.container__challenge__online {

}

.text__challenge__online{
  width: 400px;
  display: flex;

}

.container__challenge__online img {
  width: 400px;


}

.container__challenge__online h1 {


}