Code #2017
Prompt: a simple html page for displaying a boilerplate landing page
Html
<!DOCTYPE html>
<!--
Filename: index.html
Description: A simple boilerplate landing page demonstrating a basic HTML structure.
This file is designed to be complete and functional on its own, displaying a standard
landing page layout with a header, hero section, features, and a footer.
-->
<html lang="en">
<head>
<!--
The <head> section contains meta-information about the HTML document.
This information is not displayed on the page itself but is crucial for
browser rendering, search engine optimization (SEO), and accessibility.
-->
<!--
The charset attribute specifies the character encoding for the HTML document.
UTF-8 is the recommended encoding, supporting almost all characters and symbols.
-->
<meta charset="UTF-8">
<!--
The viewport meta tag configures the viewport, essential for responsive web design.
'width=device-width' sets the width of the viewport to the device's width.
'initial-scale=1.0' sets the initial zoom level when the page is first loaded.
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
The 'description' meta tag provides a brief summary of the page's content.
This text is often used by search engines in search results.
-->
<meta name="description" content="A boilerplate landing page for your next project. Simple, clean, and ready to customize.">
<!--
The 'author' meta tag specifies the author of the document.
-->
<meta name="author" content="Your Name">
<!--
The <title> tag defines the title of the HTML document, which is shown in the
browser's title bar or tab. It's important for SEO and user experience.
-->
<title>Boilerplate Landing Page</title>
<!--
This section would typically include links to external CSS stylesheets.
For this example, we're keeping it purely HTML without external styling.
<link rel="stylesheet" href="styles.css">
-->
<!--
Favicon link - uncomment and replace 'favicon.ico' with your icon path.
<link rel="icon" type="image/x-icon" href="favicon.ico">
-->
</head>
<body>
<!--
The <body> section contains all the visible content of the HTML document,
such as text, images, links, forms, and other elements.
-->
<!--
Header Section: Typically contains branding (logo/site title) and navigation.
The <header> element represents introductory content, usually a group of navigational aids.
-->
<header style="background-color: #f8f9fa; padding: 20px; border-bottom: 1px solid #e9ecef; text-align: center;">
<div class="container" style="max-width: 960px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;">
<!-- Site Logo or Name -->
<a href="#" style="text-decoration: none; color: #333; font-size: 24px; font-weight: bold;">Your Brand</a>
<!-- Navigation Menu -->
<nav>
<ul style="list-style: none; margin: 0; padding: 0;">
<li style="display: inline-block; margin-left: 20px;"><a href="#features" style="text-decoration: none; color: #007bff; font-weight: 500;">Features</a></li>
<li style="display: inline-block; margin-left: 20px;"><a href="#about" style="text-decoration: none; color: #007bff; font-weight: 500;">About Us</a></li>
<li style="display: inline-block; margin-left: 20px;"><a href="#contact" style="text-decoration: none; color: #007bff; font-weight: 500;">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!--
Hero Section: The main visual section of a landing page, designed to grab attention
and convey the page's primary message or value proposition.
The <section> element is a generic standalone section of a document.
-->
<section class="hero" style="background-color: #e9f7fe; padding: 80px 20px; text-align: center;">
<div class="container" style="max-width: 800px; margin: 0 auto;">
<!-- Main Heading (H1) for the page's primary message -->
<h1 style="font-size: 48px; color: #333; margin-bottom: 20px;">Welcome to Your Awesome Product!</h1>
<!-- Subheading or descriptive paragraph -->
<p style="font-size: 20px; color: #555; line-height: 1.6; margin-bottom: 40px;">
The best solution for your needs. Simple, powerful, and easy to use. Get started today!
</p>
<!-- Call to Action Button -->
<a href="#contact" style="display: inline-block; background-color: #007bff; color: white; padding: 15px 30px; text-decoration: none; border-radius: 5px; font-size: 18px; font-weight: bold;">
Learn More
</a>
</div>
</section>
<!--
Features Section: Highlights key benefits or features of the product/service.
Each feature is typically presented as a card or item with an icon, title, and description.
-->
<section id="features" class="features" style="padding: 60px 20px; text-align: center;">
<div class="container" style="max-width: 960px; margin: 0 auto;">
<h2 style="font-size: 36px; color: #333; margin-bottom: 50px;">Key Features</h2>
<div class="feature-grid" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;">
<!-- Feature Item 1 -->
<div class="feature-item" style="flex: 1 1 300px; padding: 25px; background-color: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); text-align: left;">
<h3 style="font-size: 24px; color: #333; margin-bottom: 15px;">Easy Integration</h3>
<p style="color: #666; line-height: 1.5;">
Seamlessly integrate with your existing workflows and tools. Our solution is designed for compatibility.
</p>
</div>
<!-- Feature Item 2 -->
<div class="feature-item" style="flex: 1 1 300px; padding: 25px; background-color: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); text-align: left;">
<h3 style="font-size: 24px; color: #333; margin-bottom: 15px;">Scalable Performance</h3>
<p style="color: #666; line-height: 1.5;">
Grow your business without limits. Our platform scales with your needs, ensuring top performance.
</p>
</div>
<!-- Feature Item 3 -->
<div class="feature-item" style="flex: 1 1 300px; padding: 25px; background-color: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); text-align: left;">
<h3 style="font-size: 24px; color: #333; margin-bottom: 15px;">24/7 Support</h3>
<p style="color: #666; line-height: 1.5;">
Our dedicated support team is available around the clock to assist you with any questions or issues.
</p>
</div>
</div>
</div>
</section>
<!--
About Us Section: Provides more detailed information about the company or product.
-->
<section id="about" class="about" style="background-color: #f8f9fa; padding: 60px 20px; text-align: center;">
<div class="container" style="max-width: 800px; margin: 0 auto;">
<h2 style="font-size: 36px; color: #333; margin-bottom: 30px;">About Our Company</h2>
<p style="font-size: 18px; color: #555; line-height: 1.7; margin-bottom: 20px;">
We are a passionate team dedicated to creating innovative solutions that empower businesses and individuals.
Our mission is to deliver high-quality products that are user-friendly, reliable, and contribute to your success.
</p>
<p style="font-size: 18px; color: #555; line-height: 1.7;">
Founded in [Year], we've been helping clients achieve their goals by focusing on cutting-edge technology and exceptional customer service.
</p>
</div>
</section>
<!--
Call to Action / Contact Section: Encourages visitors to take a specific action,
like signing up, requesting a demo, or contacting the company.
-->
<section id="contact" class="cta-contact" style="padding: 80px 20px; text-align: center;">
<div class="container" style="max-width: 700px; margin: 0 auto;">
<h2 style="font-size: 36px; color: #333; margin-bottom: 30px;">Ready to Get Started?</h2>
<p style="font-size: 20px; color: #555; line-height: 1.6; margin-bottom: 40px;">
Join thousands of satisfied customers and experience the difference today.
Contact us for a free consultation or demo.
</p>
<a href="mailto:info@yourbrand.com" style="display: inline-block; background-color: #28a745; color: white; padding: 15px 30px; text-decoration: none; border-radius: 5px; font-size: 18px; font-weight: bold;">
Contact Us
</a>
</div>
</section>
<!--
Footer Section: Contains copyright information, links to privacy policy, terms of service,
and sometimes social media links.
The <footer> element represents a footer for its nearest sectioning content or sectioning root element.
-->
<footer style="background-color: #343a40; color: white; padding: 30px; text-align: center;">
<div class="container" style="max-width: 960px; margin: 0 auto;">
<p style="margin-bottom: 10px;">© 2023 Your Brand. All rights reserved.</p>
<ul style="list-style: none; margin: 0; padding: 0;">
<li style="display: inline-block; margin: 0 10px;"><a href="#" style="text-decoration: none; color: #ccc;">Privacy Policy</a></li>
<li style="display: inline-block; margin: 0 10px;"><a href="#" style="text-decoration: none; color: #ccc;">Terms of Service</a></li>
</ul>
</div>
</footer>
</body>
</html>