Beautiful Coffee Hero Banner UI Design with HTML CSS

Create a stunning and modern coffee hero banner UI design using HTML and CSS with this complete responsive landing page tutorial. This coffee shop website design features a beautiful full-screen background image with dark gradient overlay, elegant typography, stylish call-to-action buttons, and responsive feature boxes. The layout is fully responsive and works perfectly on desktop, tablet, and mobile devices.

In this tutorial, you will learn how to design a professional coffee website hero section using pure HTML5 and CSS3 without any framework. The design includes modern UI/UX styling, smooth spacing, responsive grid layout, stylish icons, custom Google Fonts, and attractive button hover effects. This coffee banner section is ideal for cafes, coffee shops, restaurants, beverage brands, and portfolio landing pages.

The hero section uses a cinematic coffee background image combined with warm brown color tones to create a premium coffee shop atmosphere. The responsive layout automatically adjusts content alignment, feature sections, typography sizes, and buttons for different screen sizes. You can easily customize the background image, colors, fonts, text, and buttons according to your website needs.

This modern coffee hero banner design is beginner-friendly and perfect for learning responsive web design, landing page UI creation, and modern website styling using HTML and CSS. Whether you are creating a coffee shop website, cafe landing page, or food business homepage, this tutorial will help you build an elegant and professional hero section design.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Coffee Hero Section Code By Mycodingtutorial</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700;800&family=Great+Vibes&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"/>
<link rel="stylesheet" href="style.css">

</head>

<body>

<section class="hero">

    <!-- HERO CONTENT -->

    <div class="hero-content">

        <div class="left">

            <div class="small-text">
                Start Your Day Right
            </div>

            <h1>
                GOOD COFFEE <br>
                <span>GOOD DAY</span>
            </h1>

            <div class="line">
                <i class="fa-solid fa-seedling"></i>
            </div>

            <p class="desc">
                Handpicked beans. Expertly roasted.
                Brewed to perfection for your perfect day.
            </p>

            <!-- BUTTONS -->

            <div class="btns">

                <button class="btn btn-primary">
                    SHOP NOW →
                </button>

                <button class="btn btn-outline">
                    EXPLORE MENU
                </button>

            </div>

        </div>

    </div>

    <!-- FEATURES -->

    <div class="features">

        <div class="feature-box">

            <i class="fa-solid fa-leaf"></i>

            <div>
                <h4>Premium</h4>
                <p>Quality Beans</p>
            </div>

        </div>

        <div class="feature-box">

            <i class="fa-solid fa-fire"></i>

            <div>
                <h4>Expertly</h4>
                <p>Roasted</p>
            </div>

        </div>

        <div class="feature-box">

            <i class="fa-solid fa-mug-hot"></i>

            <div>
                <h4>Rich Aroma</h4>
                <p>Bold Flavor</p>
            </div>

        </div>

        <div class="feature-box">

            <i class="fa-solid fa-earth-americas"></i>

            <div>
                <h4>Sustainably</h4>
                <p>Sourced</p>
            </div>

        </div>

    </div>

</section>

</body>
</html>

You will also like this post

style.css


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#0b0603;
    overflow-x:hidden;
}

/* HERO SECTION */

.hero{
    width:100%;
    min-height:100vh;
    background:
    linear-gradient(to right,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.88) 30%,
    rgba(0,0,0,0.35) 60%,
    rgba(0,0,0,0.15) 100%),
    url('hero-image.png');

    background-size:cover;
    background-position:center;
    padding:40px 80px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

/* HERO CONTENT */

.hero-content{
    width:100%;
    display:flex;
    align-items:center;
    margin-top:40px;
}

.left{
    width:50%;
    color:#fff;
}

.small-text{
    font-family:'Great Vibes',cursive;
    color:#c58b42;
    font-size:40px;
    margin-bottom:15px;
}

.left h1{
    font-family:'Playfair Display',serif;
    font-size:80px;
    line-height:1.2;
    text-transform:uppercase;
    font-weight:800;
}

.left h1 span{
    color:#9d612c;
}

.line{
    display:flex;
    align-items:center;
    gap:15px;
    margin:20px 0;
}

.line::before,
.line::after{
    content:'';
    width:120px;
    height:1px;
    background:#9d612c;
}

.line i{
    color:#c58b42;
    font-size:20px;
}

.desc{
    color:#ddd;
    font-size:22px;
    line-height:1.8;
    max-width:650px;
}

/* BUTTONS */

.btns{
    display:flex;
    gap:20px;
    margin-top:40px;
}

.btn{
    padding:18px 40px;
    border-radius:12px;
    border:none;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.btn-primary{
    background:#c58b42;
    color:#000;
}

.btn-primary:hover{
    background:#fff;
}

.btn-outline{
    background:transparent;
    border:1px solid #c58b42;
    color:#fff;
}

.btn-outline:hover{
    background:#c58b42;
    color:#000;
}

/* FEATURES */

.features{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:50px;
    border-top:1px solid rgba(255,255,255,0.1);
    padding-top:30px;
}

.feature-box{
    display:flex;
    align-items:center;
    gap:15px;
    color:#fff;
}

.feature-box i{
    width:55px;
    height:55px;
    background:rgba(197,139,66,0.1);
    border:1px solid rgba(197,139,66,0.3);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#c58b42;
    font-size:22px;
}

.feature-box h4{
    font-size:20px;
    margin-bottom:5px;
}

.feature-box p{
    color:#ccc;
    font-size:14px;
}

/* TABLET */

@media(max-width:991px){

    .hero{
        padding:30px;
    }

    .hero-content{
        text-align:center;
        justify-content:center;
    }

    .left{
        width:100%;
    }

    .line{
        justify-content:center;
    }
    
     .desc{
        font-size:17px;
        margin: auto;
    }

    .btns{
        justify-content:center;
    }

    .features{
        grid-template-columns:repeat(2,1fr);
    }

}

/* MOBILE */

@media(max-width:767px){

    .hero{
        padding:25px 20px;
    }

    .left h1{
        font-size:50px;
    }

    .small-text{
        font-size:28px;
    }

    .desc{
        font-size:17px;
        margin: auto;
    }

    .btns{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .features{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .feature-box{
        flex-direction:column;
        text-align:center;
        padding:15px;
        border:1px solid rgba(255,255,255,0.08);
        border-radius:12px;
        background:rgba(255,255,255,0.03);
    }

}

Conclusion

This coffee hero section design is perfect for modern cafe websites, restaurant landing pages, and coffee brand portfolios. With responsive layout, clean UI, and elegant styling, this design helps create a professional and attractive first impression for visitors.