Skip to content

solodev/covid-hero-banner

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 

covid-hero-banner

Add custom messages, links, and images to your website

Tutorial

For detailed instructions, view the COVID Hero Banner article.

Demo

Check out a working example on JSFiddle.

HTML

The HTML is wrapped with a unique "covid-hero" class so that the CSS styles can target this element specifically without interferring 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;
	}
}

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages