Un banner con imagen y texto HTML y CSS

Hola a todos.

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 mucha explicacion, aqui les dejo el codigo.

El código HTML del banner

El contenido HTML va a ser sencillo y aqui los tienen:

<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 Estilo CSS

Vamos a crear nuestro CSS de estilo para el banner:

<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.

banner ajustabdo a pequeñas pantallas mobiles

Asi luce en dispositivos mobiles

banner con contenido horizontal para escritorio

Asi luce en cualquier pantalla mayor de 768px de ancho