-2

.projeto2 {
  display: flex;
  width: 100%;
  margin: 0px;
  padding: 30px 0px 20px 0px;
  background-color: #2042CC;
  flex-wrap: wrap;
}

.sobre-projeto2 {
  flex: 50%;
  padding: 0px 50px;
  padding-left: 30px;
  padding-right: 30px;
}

.sobre-projeto2 h1 {
  font-size: 30px;
  text-align: center;
}

.sobre-projeto2 p {
  text-align: center;
}

.imagem2 {
  flex: 50%;
  padding: 50px 50px;
  right: 100%;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Save The World</title>

  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <section id="menu2" class="projeto2">

    <div class="sobre-projeto2">

      <h2>Causa das mudanças</h2>
      <p>As mudanças climáticas podem ter causas naturais como alterações na radiação solar e dos movimentos orbitais da Terra ou podem ser consequência das atividades humanas. O Painel Intergovernamental de Mudanças Climáticas (IPCC), órgão das Nações Unidas,
        responsável por produzir informações científicas, afirma que há 90% de certeza que o aumento de temperatura na Terra está sendo causado pela ação do homem. A partir da Revolução Industrial o homem passou a emitir quantidades significativas de
        gases de efeito estufa (GEE), em especial o dióxido de carbono. Neste período, a concentração original de 280 ppm4 deste gás cresceu até os atuais 400 ppm5, intensificando significativamente o efeito estufa. Assim, as atividades humanas passaram
        a ter influência importante nas mudanças climáticas.
      </p>

      <div class="imagem2">
        <img src="fumaça.jpg" alt="fabricas liberando c02"> (https://imgur.com/lxJGq3l)

      </div>

  </section>

</body>

</html>

3 Respostas 3

0

Se eu entendi direito, você quer colocar o texto ao lado da imagem (texto à esquerda, imagem à direita).

Para isso, basta envolver o h2 e o p com uma div, e na sua classe sobre-projeto2, incluir a propriedade display: flex.

Exemplo

OBS: No seu código faltou o fechamento de uma div antes do fechamento da section

1
  • exatamente como fez e eu passei tantas vezes por essa div e não tinha percebido esse erro tão tosco kkkkk, mas é assim mesmo e ate gostei mais da foto que você usou
    – Lwcky
    8/08/2020 às 16:06
0

Sua pergunta não ficou muito legal. Além do título, coloque um texto descrevendo o seu problema, contudo, há uma maneira super simples de você executar esta ação:

Utilize uma div para envolver o container (coloquei o nome da classe de "pai") com as propriedades display: flex, flex-wrap: wrap (irá quebrar o conteúdo). Nas div filhas deste container, divida em porcentagens de acordo com a sua necessidade utilizando o flex-basis (coloquei metade para cada - 50%).

* {
  margin: 0;
  padding: 0;
}

.projeto2 {
  width: 100%;
  margin: 0px;
  padding: 30px 0px 20px 0px;
  background-color: #2042CC;
}

.pai {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 20px;
}

.sobre-projeto2 {
  flex-basis: 50%;
}

.sobre-projeto2 h2 {
  font-size: 30px;
  text-align: center;
  margin-bottom: 10px;
}

.sobre-projeto2 p {
  text-align: center;
}

.imagem2 {
  flex-basis: 50%;
  margin: 0 auto;
}

.imagem2 img {
  width: 80%;
  margin: 10px;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Save The World</title>

  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">

</head>

<body>
  <section id="menu2" class="projeto2">
    <div class="pai">
      <div class="sobre-projeto2">
        <h2>Causa das mudanças</h2>
        <p>As mudanças climáticas podem ter causas naturais como alterações na radiação solar e dos movimentos orbitais da Terra ou podem ser consequência das atividades humanas. O Painel Intergovernamental de Mudanças Climáticas (IPCC), órgão das Nações
          Unidas, responsável por produzir informações científicas, afirma que há 90% de certeza que o aumento de temperatura na Terra está sendo causado pela ação do homem. A partir da Revolução Industrial o homem passou a emitir quantidades significativas
          de gases de efeito estufa (GEE), em especial o dióxido de carbono. Neste período, a concentração original de 280 ppm4 deste gás cresceu até os atuais 400 ppm5, intensificando significativamente o efeito estufa. Assim, as atividades humanas passaram
          a ter influência importante nas mudanças climáticas.
        </p>
      </div>

      <div class="imagem2">
        <img alt="fabricas liberando c02" src="https://i.imgur.com/lxJGq3l.jpg">
      </div>
    </div>

  </section>

</body>

2
  • Muito obrigado pela ajuda! e desculpa se minha resposta não foi muito clara... só tentei ser o mais direto possível, na próxima irei me lembrar de ser mais educado e claro, e novamente obrigado ai, agora entendi pq nada que fiz tava dando certo. minha luta agora é entender porque na hora de colocar pro celular o bloco onde ta essa div ta indo pro lado e sumindo kkkk
    – Lwcky
    8/08/2020 às 16:03
  • Estude responsividade e media qurery que vai ficar facil: w3schools.com/cssref/css3_pr_mediaquery.asp 8/08/2020 às 16:38
0

.projeto2 {
  display: flex;
  justify-content:space-between;
  width: 100%;
  margin: 0px;
  text-align:justify;
  background: #d28000;
  padding: 4px;
}

.imagem2 {
  width: 40vw;
  margin-left: 20px;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Save The World</title>

  <link href="https://fonts.googleapis.com/css2?family=Roboto display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <section class="projeto2">
    <div class="sobre-projeto2">
      <center><h2>Causa das mudanças</h2></center>
      <p>As mudanças climáticas podem ter causas naturais como alterações na radiação solar e dos movimentos orbitais da Terra ou podem ser consequência das atividades humanas. O Painel Intergovernamental de Mudanças Climáticas (IPCC), órgão das Nações Unidas,
        responsável por produzir informações científicas, afirma que há 90% de certeza que o aumento de temperatura na Terra está sendo causado pela ação do homem. A partir da Revolução Industrial o homem passou a emitir quantidades significativas de
        gases de efeito estufa (GEE), em especial o dióxido de carbono. Neste período, a concentração original de 280 ppm4 deste gás cresceu até os atuais 400 ppm5, intensificando significativamente o efeito estufa. Assim, as atividades humanas passaram
        a ter influência importante nas mudanças climáticas.
      </p>
     </div>
     <div class="imagem2">
      <img src="https://i.imgur.com/lxJGq3l.jpg" alt="fabricas liberando c02"> 
      </div>
  </section>
</body>

2
  • muito obrigado, deu certo e ta mto compacto! um dia chego nesse nivel kkkk
    – Lwcky
    8/08/2020 às 16:04
  • De nada Lwcky! Que nada kkk. Depois tenta dar uma revisada, talvez seja possível compactar mais um pouco. Vlws! 10/08/2020 às 13:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .