Skip to content

Instantly share code, notes, and snippets.

@mattfelten
Created June 12, 2014 21:39
Show Gist options
  • Save mattfelten/7fe1e23f8b9358aedec9 to your computer and use it in GitHub Desktop.
Save mattfelten/7fe1e23f8b9358aedec9 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<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>
// ----
// 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;
}
}
.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;
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment