Generated by SassMeister.com.

SassMeister-input-HTML.html

<section id="home-hero" class="section-hero">
		<div class="section-wrap">
			<div class="content-container">
				<h1>Web Hosting<br>Made Easy.</h1>
				<p>For your business. Or your band. Starting at <em class="price-hero-highlight">$8.95/month.</em></p>
				<a href="//betasignup.dreamhost.com/shared/email/" class="btn-signup">Get Started</a>&nbsp;
				<a href="/hosting/shared/" class="btn-login">Learn More</a>
			</div>
		</div>
		<div class="ad-bubble">
		  <div class="ad-wrap">
		    Save Money on Things!
		  </div>
		</div>
	</section>

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

.section-hero {
  position: relative;
  // this should be added to sections.scss
}

.ad-bubble {
  background: pink;
  border-radius: 50%;
  color: white;
  display: table;
  text-align: center;
  width: 200px;
  height: 200px;
  
  position: absolute;
  top: -50%;
  right: -5%;
  
  .ad-wrap {
    display: table-cell;
    vertical-align: middle;
  }
}

SassMeister-output.css

.section-hero {
  position: relative;
}

.ad-bubble {
  background: pink;
  border-radius: 50%;
  color: white;
  display: table;
  text-align: center;
  width: 200px;
  height: 200px;
  position: absolute;
  top: -50%;
  right: -5%;
}
.ad-bubble .ad-wrap {
  display: table-cell;
  vertical-align: middle;
}

SassMeister-rendered.html

<section id="home-hero" class="section-hero">
		<div class="section-wrap">
			<div class="content-container">
				<h1>Web Hosting<br>Made Easy.</h1>
				<p>For your business. Or your band. Starting at <em class="price-hero-highlight">$8.95/month.</em></p>
				<a href="//betasignup.dreamhost.com/shared/email/" class="btn-signup">Get Started</a>&nbsp;
				<a href="/hosting/shared/" class="btn-login">Learn More</a>
			</div>
		</div>
		<div class="ad-bubble">
		  <div class="ad-wrap">
		    Save Money on Things!
		  </div>
		</div>
	</section>