Choose a use case, customize parameters, get the code
<section class="hero">
<div class="hero-overlay"></div>
<div class="hero-content">
<h1>Your Headline</h1>
<p>Your description text</p>
<button class="cta-button">Call to Action</button>
</div>
</section>
<style>
.hero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem;
text-align: center;
}
.hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.hero-content {
position: relative;
z-index: 1;
}
</style>