<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Landing Page</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ’Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
}
header {
background: #333;
color: #fff;
padding: 20px 0;
}
.container {
width: 90%;
max-width: 1100px;
margin: 0 auto;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
nav a:hover {
color: #f4f4f4;
text-decoration: underline;
}
.hero {
background: url(’https://via.placeholder.com/1500x600’) center/cover no-repeat;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}
.hero h1 {
font-size: 3rem;
}
.hero p {
font-size: 1.2rem;
margin: 20px 0;
}
.hero .btn {
background: #ff6600;
padding: 12px 25px;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 1rem;
}
.section {
padding: 60px 0;
}
.about, .features {
background: #f9f9f9;
}
.section h2 {
text-align: center;
margin-bottom: 30px;
font-size: 2rem;
}
.features-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.feature-item {
background: white;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
width: 300px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.feature-item h3 {
margin-bottom: 10px;
}
footer {
background: #333;
color: white;
padding: 20px 0;
text-align: center;
}
@media (max-width: 768px) {
nav {
flex-direction: column;
}
.hero h1 {
font-size: 2.2rem;
}
.features-grid {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<nav>
<div class="logo">MyBrand</div>
<div class="menu">
<a href="#about">About</a>
<a href="#features">Features</a>
<a href="#contact">Contact</a>
</div>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div>
<h1>Welcome to Our Landing Page</h1>
<p>Discover the future of online solutions with us.</p>
<a href="#contact" class="btn">Get Started</a>
</div>
</section>
<!-- About Section -->
<section id="about" class="section about">
<div class="container">
<h2>About Us</h2>
<p style="text-align: center; max-width: 800px; margin: 0 auto;">
We are a forward-thinking team focused on building innovative digital products that transform
industries and empower users. With years of experience, we deliver value through quality and creativity.
</p>
</div>
</section>
<!-- Features Section -->
<section id="features" class="section features">
<div class="container">
<h2>Features</h2>
<div class="features-grid">
<div class="feature-item">
<h3>Fast Performance</h3>
<p>Experience lightning-fast load times and smooth navigation.</p>
</div>
<div class="feature-item">
<h3>Responsive Design</h3>
<p>Perfectly optimized for mobile, tablet, and desktop devices.</p>
</div>
<div class="feature-item">
<h3>Secure Platform</h3>
<p>Built with the latest security standards to protect your data.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<p>© 2025 MyBrand. All rights reserved.</p>
</div>
</footer>
</body>
</html>
Section Description
<style> Contains all CSS in one place, easier to manage and edit.
header Top nav bar with logo and links, uses flex layout.
.hero Fullscreen background section with heading and CTA button.
.about Simple section with centered text about the company.
.features Grid layout showing 3 features in styled cards.
footer A simple bottom area with branding and copyright.
