<!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> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <style> body { background-color: #f8f9fa; } .hero-section { background-color: #4CAF50; /* Green */ color: white; padding: 100px 0; } </style> </head> <body> <!-- Hero Section --> <section class="hero-section text-center"> <div class="container"> <h1 class="display-4 mb-4">Welcome to Our Service</h1> <p class="lead mb-5">Innovative solutions for your business.</p> <a href="#" class="btn btn-light btn-lg">Get Started</a> </div> </section> <!-- Features Section --> <section class="py-5"> <div class="container text-center"> <h2 class="mb-4">Features</h2> <div class="row"> <div class="col-md-4 mb-4"><h3>Feature One</h3><p>Description here.</p></div> <div class="col-md-4 mb-4"><h3>Feature Two</h3><p>Description here.</p></div> <div class="col-md-4 mb-4"><h3>Feature Three</h3><p>Description here.</p></div> </div> </div> </section> <!-- Call to Action --> <section class="py-5 bg-light text-center"> <h2 class="mb-4">Ready to Get Started?</h2> <a href="#" class="btn btn-primary btn-lg">Sign Up Now</a> </section> <!-- Footer --> <footer class="py-4 bg-dark text-white text-center"> <p>© 2024 Your Company Name. All Rights Reserved.</p> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter