Set width: full 320 480 640 768 1024 1920 custom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Hero Section</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background: #f7f7f7;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 70vh;
background: linear-gradient(120deg, #0078d7 0%, #00c6fb 100%);
color: #fff;
text-align: center;
padding: 4rem 1rem 3rem 1rem;
}
.hero-content {
display: flex;
align-items: center;
gap: 2rem;
}
.hero-title {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 1rem;
letter-spacing: 1px;
}
.hero-desc {
font-size: 1.2rem;
margin-bottom: 2rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.hero-cta {
padding: 1rem 2.2rem;
background: #fff;
color: #0078d7;
border: none;
border-radius: 4px;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: background 0.2s, color 0.2s;
}
.hero-cta:hover {
background: #0078d7;
color: #fff;
}
@media (max-width: 1023px) {
.hero-content {
flex-direction: column;
text-align: center;
}
.hero-image {
margin-top: 2rem;
}
}
@media (max-width: 600px) {
.hero {
padding: 2.5rem 0.5rem 2rem 0.5rem;
min-height: auto;
}
.hero-title {
font-size: 1.6rem;
}
.hero-desc {
font-size: 1rem;
}
.hero-cta {
font-size: 1rem;
padding: 0.8rem 1.2rem;
}
}
</style>
</head>
<body>
<section class="hero">
<div class="hero-content">
<div class="hero-text">
<div class="hero-title">Welcome to Your<br />Next Project</div>
<div class="hero-desc">Build beautiful, responsive layouts with ease. This hero section is perfect for landing pages, portfolios, and more.</div>
<button class="hero-cta">Get Started</button>
</div>
<div class="hero-image">
<img src="https://picsum.photos/id/1018/700/400" alt="Hero Image" style="max-width: 100%; height: auto; border-radius: 8px;">
</div>
</div>
</section>
</body>
</html>