COVID Hero Banner

A hero banner is a large visual website element that combines full-screen-width imagery with strong, action-oriented copy. Easy to customize with your own graphics and messaging, a hero banner can be an effective tool for elevating your COVID-19 response strategy and linking visitors to critical information.

Because a hero banner appears at the top of your website homepage, it garners significant attention. All eyes are on it. This gives you the ability to drive attention and traffic to critical updates, specific instructions, or other details that are central to your COVID-19 efforts.

HTML

The HTML is wrapped with a unique "covid-hero" class so that the CSS styles can target this element specifically without interfering with other elements. Swap the image for one specific to your business or industry with recommended dimensions of 1920px by 600px. Customize the content inside the "header-content" element to meet your needs.

<header class="covid-hero">
<div class="hero">
  <div class="hero-item">
    <img alt="Covid-19 Image" class="img-responsive cover" src="https://raw.githubusercontent.com/solodev/covid-hero-banner/master/covid_banners_1.jpg">
    <div class="header-container">
      <div class="header-content">
        <h1>COVID-19 Updates</h1> 
        <p>Get the latest news on the Coronavirus efforts from the city and county.</p>
        <a class="btn btn-primary" href="#">Learn More</a>
      </div>
    </div>
  </div>
</div>
</header>

CSS

The CSS utilizes the object-fit property to make sure the image scales properly to the container and on mobile devices. Additionally, the "header-content" class has a background-color with a transparent opacity to ensure readibility but allow the image behind it to be visible.

.covid-hero {
overflow: hidden;
font-family: Inter, sans-serif;
}
.covid-hero .hero .hero-item img {
width: 100%;
height: 600px;
object-fit: cover;
object-position: top center;
}
.covid-hero .hero .hero-item .header-container {
max-width: 1200px;
margin: 0 auto;
}
.covid-hero .hero .hero-item .header-content {
top: 20%;
margin-left: 8rem;
background-color: rgba(0, 0, 0, 0.7);
max-width: 473px;
width: 100%;
padding: 2rem;
position: absolute;
color: #fff;
}
.covid-hero .hero .hero-item .header-content p {
font-size: 18px;
}
.covid-hero .hero .hero-item .header-content .btn-primary {
background-color: #579829;
color: #fff;
font-size: 18px;
text-decoration: none;
margin-top: 15px;
padding: 15px;
display: inline-block;
}
.covid-hero .hero .hero-item .header-content .btn-primary:hover {
background-color: #366b11;
}

/* Media Queries */
@media (max-width: 768px) {
.covid-hero .hero .hero-item .header-content {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  margin: 0 auto;
}
}

Result

Download from Github