Top Banner

top-banner.html

<div class="promo-bar">
        {{ 'stocking.png' | asset_url | img_tag }}
        <p>Spend over $50 and get FREE expedited shipping! Delivers by November 22nd.</p>
        <a href="">Shop Now!</a>
      </div>
      
      <style>
        .promo-bar {
          position: relative;
          display: inline-block;
          width: 100%;
          padding: 8px 10px 2px 10px;
          color: #FFF;
          background-color: #B51541;
          border-radius: 0 0 4px 4px;
        }
        
        .promo-bar img {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100px;
        }
        
        .promo-bar p,
        .promo-bar a {
          float: left;
        }
        
        .promo-bar p {
          padding: 4px 0 0 100px;
        }
        
        .promo-bar a {
          margin-left: 12px;
          padding: 4px 10px;
          color: #FFF;
          font-weight: bold;
          background-color: #0FB501;
          border-radius: 4px;
        }
        
      </style>