HTML
<div class="title">
<h1>
<span id="slant">LOWER</span>
FEES,
</h1>
<h1>
<span id="slant">MAKE</span>
MONEY,
</h1>
<h1>
JOIN
<span id="slant">SOUNDSTR.</span>
</h1>
<a class="button" href="https://www.soundstr.com" target="_blank"> LEARN MORE</a>
</div>
<div class="card">
</div>
SCSS
$font-family: "proxima-nova-condensed";
$button-color: #4c4ce5;
//-----------------------------------------------------------------
body {
background-image: url("http://splash.soundstr.com/hubfs/Soundstr%20Logos%20(SVG)/banner-background-cta-01.png");
background-repeat: no-repeat;
}
a {
font-family: "proxima-nova-condensed";
font-style: normal;
font-weight: 300;
font-size: 2em;
color: #fff;
text-decoration: none;
text-align: center;
max-width: 200px;
display: block;
transition-property: background, box-shadow, padding;
transition-duration: 0.5s, 0.5s, 0.5s;
transition-delay: 0s, 0s, 0s;
padding: .6em .8em;
background: #4944bb;
border: 1px solid rgba(0,0,0,0.1);
border-radius: .2em;
&:hover {
color: #fff;
text-decoration: none;
background-color: $button-color;
border: 1px solid $button-color;
box-shadow: 0 0 0 5px rgba(76,76,229,0.5);
}
}
h1 {
font-family: "proxima-nova-condensed";
font-style: normal;
font-weight: 700;
font-size: 5.5em;
color: #00182d;
}
h2 {
font-family: "proxima-nova-condensed";
font-style: normal;
font-weight: 400;
font-size: 2em;
color: #00182d;
}
p {
font-family: "proxima-nova";
font-style: normal;
font-weight: 100;
font-size: 1.5em;
color: #00182d;
}
#centersub {
font-size: 1.5em;
text-align: center;
margin-bottom: 5em;
line-height: 1.5em;
}
.title {
padding: 1em 4em 0em 4em;
line-height: 2em;
}
span#slant {
font-family: "proxima-nova-condensed";
font-style: italic;
font-weight: 400;
color: #00182d;
}
