Call to Action Banner

bg-primary #131313 dark

bg-dark #0e0e0e dark

bg-raised #1c1b1b dark

bg-card #2a2a2a dark

bg-accent #266038 dark

<div class="cta-banner cta-banner--gradient-green">

		<h2 class="cta-banner__title">Ready to cash in on your collection?</h2>

		<p class="cta-banner__text">
			Join 5,000+ collectors who trust Nerdworks with their most valuable assets. Get a free valuation today.
		</p>

		<div class="cta-banner__actions">
			<a href="#" class="button button--white">Get Free Valuation</a>
			<a href="#" class="button button--ghost">Speak to an Expert</a>
		</div>

	</div>

.cta-banner {
max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 45px;
  padding-right: 45px;
  text-align: center;
}

.cta-banner--gradient-green {
background: linear-gradient(135deg, #217E52, #266038);
  border-radius: 16px;
  max-width: 960px;
  padding: 90px 60px;
  position: relative;
  overflow: hidden;
}

.cta-banner--gradient-green .cta-banner__title {
color: #F8F9F8;
}

.cta-banner--gradient-green .cta-banner__text {
color: rgba(248, 249, 248, 0.85);
}

.cta-banner__title {
margin-bottom: 20px;
}

.cta-banner__text {
font-size: 20px;
  margin-bottom: 45px;
}

.cta-banner__actions {
display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 45px;
}

.cta-banner__meta {
font-family: monospace;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(248, 249, 248, 0.6);
}

Ready to cash in on your collection?

Ready to cash in on your collection?

Ready to cash in on your collection?

Ready to cash in on your collection?

Ready to cash in on your collection?

Origin