How To Create A Simple Banner / Hero Unit in CSS

In this article, you’re going to learn how to design a simple banner/hero unit in CSS for your website using the traditional approach as well as the flexbox approach.

HTML

<section class="banner">
    <h1>Company Name</h1>
    <p>Company Mission Statement goes here</p>
    <a class="btn-bgstroke">Call To Action</a>
</section>

The HTML code above has a section container with a class name banner and it has three children that are h1, p and a respectively.

Pretty straight forward!

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:400, 300, 100, 700, 900);
h1,
p,
a {
    margin: 0;
    padding: 0;
    font-family: "Lato";
}
h1 {
    font-size: 2.8em;
    padding: 10px 0;
    font-weight: 800;
}
p {
    font-size: 1.1em;
    font-weight: 100;
    letter-spacing: 5px;
}
.banner {
    width: 100%;
    padding: 60px 0;
    text-align: center;
    background: #33cccc;
    color: white;
}
.btn-bgstroke {
    font-size: 20px;
    display: inline-block;
    border: 1px solid white;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 300;
    margin-top: 30px;
}