0

Buen dia espero que te encuentres muy bien, Lo que necesito de tu conocimiento es poder implementar esta estructura con html y css.

introducir la descripción de la imagen aquí

La imagen ocupa media pantalla y va hasta la esquina (izquierda, derecha). Y el texto va en la otra columna centrado.

Por favor me podrian indicar con que codigo podria lograrlo. Quedo muy agradecida. Ten un feliz dia!

Adjunto el codigo que no he podido arreglar (utilice bootstrap):

#about {
  padding: 60px 0;
  overflow: hidden;
}
			
#about .about-img {
  height: 510px;
  overflow: hidden;
}
			
#about .about-img img {
  margin-left: -15px;
  max-width: 100%;
}
			
@media (max-width: 768px) {
  #about .about-img {
     height: auto;
  }
   #about .about-img img {
     margin-left: 0;
     padding-bottom: 30px;
  }
}
			
#about .content .h2 {
  color: #333;
  font-weight: 300;
  font-size: 24px;
}
			
#about .content h3 {
  color: #777;
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  font-style: italic;
}
			
#about .content p {
  line-height: 26px;
}
			
#about .content p:last-child {
  margin-bottom: 0;
}
			
#about .content i {
 font-size: 20px;
 padding-right: 4px;
 color: #1dc8cd;
}
			
#about .content ul {
  list-style: none;
  padding: 0;
}
			
#about .content ul li {
  padding-bottom: 10px;
}
    	<section id="about" >
            <div class="container">
              <div class="row">
                <div class="col-lg-6 about-img wow fadeInLeft"  data-wow-delay="0s"  data-wow-duration="1.9s">                  
                  <img src="img/img_showcase_1.jpg" alt="">
                </div>      
                <div class="col-lg-6 content wow fadeInRight"  data-wow-delay="0s"  data-wow-duration="1.9s">                
                  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing</h2>
                  <h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>                 
                </div>
              </div>      
            </div>
            <!-- Fila 2-->
            <div class="container">
                    <div class="row">
                        <div class="col-lg-6  about-img order-lg-2 wow fadeInRight"  data-wow-delay="0s"  data-wow-duration="1.9s">                         
                            <img src="img/img_showcase_1.jpg" alt="">           
                      </div>
                      <div class="col-lg-6 content order-lg-1 wow fadeInLeft"  data-wow-delay="0s"  data-wow-duration="1.9s">                     
                            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing</h2>
                            <h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>                          
                      </div>                                       
                    </div>
                  </div>
	</section>

3 respuestas 3

0
.fadeInRight, .fadeInLeft{
display: inline-block;

}

.container{ clear: both; }

Añade estas líneas en tú archivo css, y quita el height de

about .about-img

0

El código que tienes está bien pero a lo mejor tienes una resolución diferente a la que has indicado.

Las clases de columna tienen unas medidas de resolución que són las siguientes:

Grid Bootstrap

En tú caso tienes un col-lg, que aunque en ciertas pantallas se verá como tú quieres e otras no.

Puedes elegir una resolución o añadir más como hice yo:

#about {
  padding: 60px 0;
  overflow: hidden;
}
			
#about .about-img {
  height: 510px;
  overflow: hidden;
}
			
#about .about-img img {
  margin-left: -15px;
  max-width: 100%;
}
			
@media (max-width: 768px) {
  #about .about-img {
     height: auto;
  }
   #about .about-img img {
     margin-left: 0;
     padding-bottom: 30px;
  }
}
			
#about .content .h2 {
  color: #333;
  font-weight: 300;
  font-size: 24px;
}
			
#about .content h3 {
  color: #777;
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  font-style: italic;
}
			
#about .content p {
  line-height: 26px;
}
			
#about .content p:last-child {
  margin-bottom: 0;
}
			
#about .content i {
 font-size: 20px;
 padding-right: 4px;
 color: #1dc8cd;
}
			
#about .content ul {
  list-style: none;
  padding: 0;
}
			
#about .content ul li {
  padding-bottom: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    	<section id="about" >
            <div class="container">
              <div class="row">
                <div class="col-sm-6 col-md-6 col-lg-6 about-img wow fadeInLeft"  data-wow-delay="0s"  data-wow-duration="1.9s">                  
                  <img src="img/img_showcase_1.jpg" alt="">
                </div>      
                <div class="col-sm-6 col-md-6 col-lg-6 content wow fadeInRight"  data-wow-delay="0s"  data-wow-duration="1.9s">                
                  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing</h2>
                  <h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>                 
                </div>
              </div>      
            <!-- Fila 2-->
                    <div class="row">
                        <div class="col-sm-6 col-md-6 col-lg-6 about-img order-lg-2 wow fadeInRight"  data-wow-delay="0s"  data-wow-duration="1.9s">                         
                            <img src="img/img_showcase_1.jpg" alt="">           
                      </div>
                      <div class="col-sm-6 col-md-6 col-lg-6 content order-lg-1 wow fadeInLeft"  data-wow-delay="0s"  data-wow-duration="1.9s">                     
                            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing</h2>
                            <h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>                          
                      </div>                                       
                    </div>
                  </div>
	</section>

Otra cosa a comentar es la siguiente:

Cuando inicias un div.container puedes utilizar los div.row en su interior que desees, no hace falta cerrar el container para crear otra fila. Ya que así esta diseñado bootstrap y su grid, son líneas (.row) y columnas (.col).

0

En lugar de usar col-lg-6 utiliza col-md-6. Eso ya te hace la estructura que deseas de mitad para el texto, mitad para la imagen.

1
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    el 22 jul. 2023 a las 21:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.