Coffee Luv Bug Design System

Hero Image

A Hero Image is a large image with text, often placed at the top of a webpage.

Here is an hero image used in our application.

Coffee Luv Bug

Here is the html code of our app's hero image,

        
        <div class="hero-image">
        <div class="hero-text">
        <h1 style="font-size:50px">Example</h1>
        </div>
        </div>

Here is the css code of our app's hero image,

        
        .hero-image {
        background-image:url("img1.png");
        height: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        }
        
        .hero-text {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        }