Un banner con imagen y texto HTML y CSS

Los banners son elementos importantes en cualquier sitio web ya que llaman la atención de los usuarios y les proporcionan información sobre lo que se ofrece. Un banner con imagen y texto es una excelente manera de mostrar un mensaje o promocionar un producto o servicio. En este artículo, se describirá cómo crear un banner con imagen y texto utilizando HTML y CSS.

Hoy les traigo un banner con imagen y texto ajustable al tamaño de la pantalla.

Esta publicacion forma parte la categoria de Banners, en el que pueden encontrar varias publicaciones similares a esta.

Sin mas, aqui les dejo el codigo.

Crear la estructura del banner con HTML

En primer lugar, se debe crear la estructura del banner utilizando HTML. En este ejemplo, se utilizará un contenedor principal con una clase «banner», y dentro de este contenedor se colocarán la imagen y el texto y un boton.

<div class="dj-banner">
    <div class="dj-bg">
        <img src="/images/img-principal.png" alt="" height="400px">
        <div class="dj-text">
            <h1><b>Your Title</b></h1>
            <p>The information you want to present.</p>
            <p><a href="#"><label style="border-radius: 5px; background: #ce2032; border-color:#ce2032;  height:44px; color: white; width: 152px; text-align: center; font-size: 16px; padding: 10px 0;">Shop Now</label> 
            </a></p>
        </div>
    </div>            
</div>

El codigo anterior describe un banner que contiene una imagen principal, un título, un párrafo con información y un botón para ir a una tienda. A continuación te describo cada una de las etiquetas utilizadas en el código:

• <div class="dj-banner">: Crea un contenedor para el banner.
• <div class="dj-bg">: Crea un contenedor para la imagen, el título, el párrafo y el botón.
• <img src="/images/img-principal.png" alt="" height="400px">: Inserta una imagen con la ruta «/images/img-principal.png», sin texto alternativo y con una altura de 400 pixels.
• <div class="dj-text">: Crea un contenedor para el título, el párrafo y el botón.
• <h1><b>Your Title</b></h1>: Inserta un título con un texto «Your Title» en negrita.
• <p>The information you want to present.</p>: Inserta un párrafo con un texto «The information you want to present.»
• <p><a href="#"><label style="border-radius: 5px; background: #ce2032; border-color:#ce2032; height:44px; color: white; width: 152px; text-align: center; font-size: 16px; padding: 10px 0;">Shop Now</label> </a></p>: Inserta un botón de enlace «Shop Now» que lleva a un destino, se muestra como una etiqueta de texto con estilo de diseño personalizado.

Estilizar el banner con CSS

Una vez que se ha creado la estructura del banner, se puede empezar a estilizarlo con CSS. En este ejemplo, se utilizarán algunos estilos básicos para hacer que el banner se vea atractivo y profesional.

<style>
   .dj-banner{margin: 30px 0; position: relative;}
   .dj-banner .dj-bg{background-image: url(/images/bg-img-banner.png); background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%;}
   .dj-banner .dj-bg img{display: block; margin: 20px auto; padding: 20px 0;}
   .dj-banner .dj-text{text-align: center; padding-bottom: 20px;}
   @media screen and (min-width:768px){
      .dj-banner .dj-bg img{margin-right: 100px;}
      .dj-banner .dj-text{position: absolute; top: 50%; left: 10%; transform: translate(-10%, -50%); width: 50%; text-align: left;}
      .dj-banner .dj-text h1{font-size: calc(2*1.5vw);}
      .dj-banner .dj-text p{font-size: calc(1.2*1.5vw);}
   }
</style>

El Producto Final

Aqui esta el resultado final tanto en mobiles como en escritorios.

Continua Leyendo

Conclusión

Con HTML y CSS, se puede crear fácilmente un banner atractivo y profesional utilizando una combinación de estructura y estilos. Con una estructura simple y estilos cuidadosamente seleccionados, se puede crear un banner que llame la atención de los usuarios y les proporcione la información que necesitan.

Tips

Al crear un banner con imagen y texto, es importante asegurarse de que la imagen sea relevante y esté relacionada con el mensaje que se está tratando de transmitir. Además, el texto debe ser claro y conciso, y debe destacar los puntos clave de la oferta o mensaje que se desea transmitir.

También es importante asegurarse de que el banner sea atractivo y esté diseñado para llamar la atención de los usuarios. Los estilos y colores seleccionados deben ser coherentes con la marca y el diseño general del sitio web, y deben utilizarse para resaltar la oferta o mensaje que se está transmitiendo.

En general, los banners con imagen y texto son una herramienta útil para cualquier sitio web que quiera destacar un mensaje o promoción importante. Con un poco de HTML y CSS, se puede crear fácilmente un banner atractivo y efectivo que llame la atención de los usuarios y les proporcione la información que necesitan.