Scribd
Upload
0 views4 pages

HTML Code

The document outlines the structure of a landing page, including a header with navigation, a hero section with a call-to-action, an about section detailing the company's mission, and a features section highlighting key offerings. It uses CSS for styling and responsive design to ensure compatibility across devices. The footer provides branding and copyright information.

Uploaded by

noxadi3388
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views4 pages

HTML Code

The document outlines the structure of a landing page, including a header with navigation, a hero section with a call-to-action, an about section detailing the company's mission, and a features section highlighting key offerings. It uses CSS for styling and responsive design to ensure compatibility across devices. The footer provides branding and copyright information.

Uploaded by

noxadi3388
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

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>&copy; 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.

You might also like