<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Professional Business Website</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <style> body { font-family: Arial, sans-serif; } .hero-section { background: url('https://source.unsplash.com/1600x900/?business,office') center/cover no-repeat; height: 400px; display: flex; align-items: center; justify-content: center; color: white; text-align: center; font-size: 2rem; font-weight: bold; } .service-card { transition: transform 0.3s; } .service-card:hover { transform: translateY(-5px); } </style> </head> <body> <!-- Navigation Bar --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="#">My Business</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Services</a></li> <li class="nav-item"><a class="nav-link" href="#">About</a></li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> </div> </div> </nav> <!-- Hero Section --> <div class="hero-section"> <div class="container"> <h1>Welcome to Our Business</h1> <p>We provide top-quality services for your success</p> <a href="#services" class="btn btn-primary btn-lg">Learn More</a> </div> </div> <!-- Services Section --> <div class="container my-5" id="services"> <h2 class="text-center mb-4">Our Services</h2> <div class="row"> <div class="col-md-4"> <div class="card service-card shadow-sm"> <div class="card-body"> <h5 class="card-title">Marketing Strategy</h5> <p class="card-text">We help businesses grow with data-driven marketing solutions.</p> </div> </div> </div> <div class="col-md-4"> <div class="card service-card shadow-sm"> <div class="card-body"> <h5 class="card-title">Financial Consulting</h5> <p class="card-text">Optimize your financial health with expert guidance.</p> </div> </div> </div> <div class="col-md-4"> <div class="card service-card shadow-sm"> <div class="card-body"> <h5 class="card-title">Business Loans</h5> <p class="card-text">Get funding solutions tailored to your business needs.</p> </div> </div> </div> </div> </div> <!-- Contact Section --> <div class="container my-5"> <h2 class="text-center mb-4">Contact Us</h2> <div class="row"> <div class="col-md-6 mx-auto"> <form> <div class="mb-3"> <label class="form-label">Your Name</label> <input type="text" class="form-control" required> </div> <div class="mb-3"> <label class="form-label">Email Address</label> <input type="email" class="form-control" required> </div> <div class="mb-3"> <label class="form-label">Message</label> <textarea class="form-control" rows="4" required></textarea> </div> <button type="submit" class="btn btn-primary w-100">Send Message</button> </form> </div> </div> </div> <!-- Footer --> <footer class="bg-dark text-white text-center py-3"> © 2025 My Business. All Rights Reserved. </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> </body> </html>