A hero banner is one of the most important sections of a website because it is the first thing visitors see. In this tutorial, we create a Modern Dental Furniture Hero Banner using HTML and CSS that is perfect for dental clinic websites, medical equipment stores, or healthcare landing pages.
This banner design includes a background image, left-side gradient overlay, animated text, and call-to-action buttons such as Shop Now and View Products. The layout is clean, responsive, and optimized for both desktop and mobile devices.
The banner highlights dental products like ergonomic chairs, cabinets, and modern dental furniture, helping clinics showcase their equipment in a professional way.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dental Furniture Banner Code By Mycodingtutorial</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="hero">
<div class="hero-overlay"></div>
<div class="hero-container">
<div class="hero-left">
<p class="subtitle">Premium Dental Equipment</p>
<h1>Modern Dental <br> Furniture Solutions</h1>
<p class="description">
Upgrade your dental clinic with ergonomic chairs, cabinets,
and advanced furniture designed for comfort, efficiency
and professional performance.
</p>
<div class="buttons">
<a href="#" class="btn primary">Shop Now</a>
<a href="#" class="btn outline">View Products</a>
</div>
</div>
</div>
</section>
</body>
</html>
styles.css
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}
.hero{
position:relative;
height:100vh;
background:url("hero.png") center/cover no-repeat;
display:flex;
align-items:center;
}
/* LEFT SIDE OVERLAY ONLY */
.hero-overlay{
position:absolute;
top:0;
left:0;
width:50%; /* overlay only left side */
height:100%;
background:linear-gradient(
to right,
rgba(5,20,35,0.95),
rgba(5,20,35,0.85),
rgba(5,20,35,0.4),
transparent
);
}
/* CONTAINER WIDTH UPDATED */
.hero-container{
position:relative;
max-width:1300px;
margin:auto;
padding:0 5%;
width:100%;
color:white;
}
.hero-left{
max-width:600px;
animation:fadeUp 1.2s ease;
}
.subtitle{
color:#2ec5ff;
font-size:14px;
letter-spacing:2px;
margin-bottom:15px;
text-decoration: underline;
text-underline-offset: 10px;
}
.hero-left h1{
font-size:60px;
line-height:1.1;
margin-bottom:20px;
font-weight:700;
}
.description{
color:#cfd8dc;
font-size:17px;
line-height:1.6;
margin-bottom:35px;
}
.buttons{
display:flex;
gap:20px;
}
.btn{
border-radius:5px;
text-decoration:none;
font-weight:600;
font-size:16px;
transition:all .4s ease;
}
.primary{
background:linear-gradient(90deg,#2ec5ff,#1a9bff);
color:white;
padding: 16px 30px 0px 30px;
}
.primary:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}
.outline{
border:2px solid rgba(255,255,255,0.6);
color:white;
padding:14px 30px;
}
.outline:hover{
background:white;
color:black;
transform:translateY(-5px);
}
/* Text animation */
@keyframes fadeUp{
0%{
opacity:0;
transform:translateY(40px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
/* Responsive */
@media(max-width:900px){
.hero-left h1{
font-size:38px;
}
.hero{
height:auto;
padding:100px 0;
}
.buttons{
flex-wrap:wrap;
}
.hero-overlay{
width:100%; /* full overlay for mobile */
}
}
