Hero Banner

by James Connolly

HTML

<div class="banner product-overview-banner mq">
  <div class="featured-image">
    <img src="https://via.placeholder.com/300/" />
  </div>

  <div class="content">
    <div class="inner-content">
      <h4>Subtitle</h4>
      <h2>Title</h2>
      <button>Click Me</button>
     </div>
  </div>
</div>

SCSS

.banner {
  margin: 0;
  padding: 0;
  border-radius: 6px;
  position: relative;
  
    &.product-overview-banner {
      max-width: 500px; //delete after testing
      
      margin: 0 auto;
      background: #029ADB;
      color: white;
      
      //shared styles for both image and content
      .featured-image, .content {
        box-sizing: border-box;
        position: relative;
      }
      
      .featured-image {
        margin: 0;
        padding: 0;
        height: 0;
        padding-top: 60%;
        background: pink;
        border-radius: 6px 6px 0 0;
        z-index: 1; // to appear under banner content
        overflow: hidden;
        
        &:after {
          content: '';
          width: 100%;
          height: 100px;
          background-image: linear-gradient(0deg, #029ADB 25%, rgba(2,154,219,0.00) 100%);
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }

      .content {
        padding: 50px;
        text-align: center;
        z-index: 2; // to appear above featured image
        
        h2 {
          //font-size: rem-calc(50);
        }
        
        h4 {
          color: skyblue;
        }
      }
      
      // media queries
      
      &.mq {
        max-width: 100%; // delete after testing
        height: 675px;
        min-height: 675px;
        
        // shared styles for both image and content
        .featured-image, .content {
          width: 60%;
          height: 100%;
        }
        
        .featured-image {
          padding-top: 0;
          height: 100%;
          border-radius: 6px 0 0 6px;
          position: absolute;
          left: 0;
          top: 0;
          
          &:after {
            content: '';
            width: 100%;
            height: 100%;
            background-image: linear-gradient(-81deg, #029ADB 25%, rgba(2,154,219,0.00) 60%);
            position: absolute;
            left: 0;
            top: 0;
          }
        }
        
       ...