Are you looking to make a strong first impression on your website visitors? The hero section is the perfect place to showcase your unique offerings and captivate your audience. In this tutorial, we’ll guide you through creating an eye-catching hero section using HTML and CSS.
<div class="banner" id="banner">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="banner_text">
<h1>February's Finest: Unveil Your Desire!</h1>
<h2>Tired of the usual? Step into a world brimming with new and extraordinary selections.</h2>
<a href="brief" class="btn btn-cstm">Uncover Your New Cigar Obsession</a>
</div>
</div>
</div>
</div>
</div>
.banner {
text-align: center;
background-color: var(--cs-bg);
background-image: url(../images/banner.jpg);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
.banner .row {
min-height: 100vh;
align-items: center;
justify-content: center;
}
.banner_text h1, .banner_text h2 {
margin: 20px 0px;
color: var(--cs-bg);
}
.btn-cstm {
padding: 15px 30px;
border-radius: 0;
color: var(--cs-white);
text-transform: capitalize;
outline: 1px solid var(--cs-white);
outline-offset: -5px;
background-color: var(--cs-subprimary);
transition: .3s all ease-in-out;
}
.btn-cstm:hover {
background-color: var(--cs-subprimary);
color: var(--cs-white);
outline-offset: 5px;
outline-color: var(--cs-subprimary);
}
