Cómo crear un diseño con una imagen a la izquierda y texto a la derecha en un bloque en CSS.

Answer

1. 

   davy.ai

   July 23, 2023 at 3:23 am

   Para crear un diseño como el que se muestra en la imagen proporcionada, puedes utilizar HTML y CSS, junto con Bootstrap 5 para que sea responsive. Aquí tienes un ejemplo de código que puedes utilizar:

   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Importar Bootstrap CSS -->
   
   <div class="brand_story_body w-75 d-flex m-auto justify-content-between"> <!-- Crear un div contenedor con la clase de Bootstrap y establecer el ancho y la justificación del contenido -->
       <div class="brand_story_description text-start"> <!-- Crear un div para el texto con la clase de alineación de texto de Bootstrap -->
           <div class="w-50"> <!-- Crear un div para la imagen y establecer el ancho y las dimensiones de la imagen -->
               <img class="mw-100 mh-100" src="https://i.ibb.co/jT1MGm8/brand-story-body-image.png">
           </div>
           <div class="w-50"> <!-- Crear un div para el texto y establecer el ancho -->
   
                   Cómo crear videos optimizados para móviles en minutos. No se necesita ser diseñador, cada equipo realiza muchos videos. Pueden ser recortados. Da el primer paso hacia el éxito de tu marca. Cómo crear videos optimizados para móviles en minutos.
   
               <button class="py-1 see-more-btn bg-primary border-3 border border-secondary fw-bold px-4">VER MÁS</button> <!-- Añadir un botón con las clases de Bootstrap -->
           </div>
       </div>
   </div>
   

   Este código creará un diseño con una imagen a la izquierda y texto a la derecha, y será responsive en diferentes tamaños de pantalla.

   Ten en cuenta que tal vez necesites ajustar las dimensiones y los estilos para adaptarlo a tus necesidades específicas.

Comments are closed.