<div class="product-banner">
  <div class="product-banner-image">
  <img src="https://mattneilblog.files.wordpress.com/2017/01/rogueone_cover.jpeg" alt="rogue one" />
  </div>
  <div class="product-banner-content">
    <div class="product-banner-content__title">
  <h2>Rogue one: A Star Wars Movie (Blu-ray)</h2>
    </div>
    <p class="product-banner-content__text"><span class="price">£14.99</span> <span class="price-saving">Save: £8.00</span>
      <span class="delivery-msg">FREE UK Delivery available</span></p>
    <div class="product-banner-content__cta">
  <a href="#" class="btn">Pre-order Now</a>
    </div>
  <div class="product-banner-desc">    
    <h3 class="product-banner-desc__title">Description</h3>
  <p class="product-banner-desc__text">From Lucasfilm comes the first of the Star Wars standalone films, “Rogue One: A Star Wars Story,” an all-new epic adventure. In a time of conflict, a group of unlikely heroes band together on a mission to steal the plans to the Death Star, the Empire’s ultimate weapon of destruction. This key event in the Star Wars timeline brings together ordinary people who choose to do extraordinary things, and in doing so, become part of something greater than themselves.</p>
  </div>
    </div>
</div>
$white: #fff;
$grey: #e1e3e4;
$blue: #2196f3;
$turquoise: #42ab9e;
$text: #444;
$red: #F44336;
$cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);

body {
  background: $grey;
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
}

p {
  margin: 30px 0;
  font-size: 20px;
  font-weight: 300;
  font-size: 18px;
}

.product-banner {
  max-width: 1280px;
  margin: 60px auto;
  display: flex;
  align-items: stretch;
  max-height: 711px;
}

.product-banner-image {
  
}

.product-banner-content {
  position: relative;
  box-sizing: border-box;
  background: $white;
  color: $text;
  padding: 40px;
  
  &__title {
    box-shadow: -2px 2px 10px $text;
    background: $red;
    padding: 20px 40px;
    color: $white;
    font-size: 28px;
    position: absolute;
    top: -40px;
    left: -20px;
    right: 0;
    
    > h2 {
      font-weight: 100;
      margin: 0;
    }
  }
  
  &__text {
    margin: 80px 0 0;
  }
  
  &__cta {
    display: flex;
    justify-content: flex-end;
  }
}

.product-banner-desc {
    box-sizing: border-box;
  color: $white;
  background: $turquoise;
    padding: 40px;
    margin: 40px -60px 40px 0;
  
  &__text {
    margin: 20px 0 0 ;
  } 
  
  &__title {
    font-size: 26px;
    font-weight: 400;
    margin: 0;
  }
  
  &__cta {
    display: flex;
    justify-content: flex-end;
  }
}

.price {
  color: $blue;
  font-weight: 300;
  font-size: 36px;
}

.price-saving {
  font-size: 20px;
  font-weight: 100;
}

.delivery-msg {
  display: block;
  font-size: 20px;
  font-weight: 100;
}

.btn {
  box-sizing: border-box;
  background: $turquoise;
  color: $white;
  display: inline-block;
  font-size: 26px;
  font-weight: 300;
  padding: 20px 40px;
  min-height: 52px;
  margin-top: 60px;
  text-decoration: none;
  text-align: center;
  transition: background 0.25s $cubic-in-out;
  
  &:hover {
    background: darken($turquoise, 10%);
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.