<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fitness Gym - MuPu 0762</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans&family=Quicksand:wght@300;400;700&display=swap" rel="stylesheet">
    <style>
        :root { --primary-color: #212529; --secondary-color: #adb5bd; }
        body { font-family: 'Quicksand', sans-serif; }
        h1, h2, h3, h4, h5, h6 { font-family: 'Work Sans', sans-serif; }
        .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); }
        .btn-primary:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); }
        .text-primary { color: var(--primary-color) !important; }
    </style>
</head>
<body>
    
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top shadow-sm">
    <div class="container">
        <a class="navbar-brand fw-bold" href="#">MuPu 0762</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">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
                <li class="nav-item"><a class="nav-link" href="#pricing">Pricing</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

    
    <section id="home" class="py-5 text-center bg-white border-bottom">
        <div class="container py-5">
            <h1 class="display-4 fw-bold text-dark mb-3">Fitness Gym - MuPu 0762</h1>
            <p class="lead text-secondary mb-4">Train hard, live better.</p>
            <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
                <a href="#contact" class="btn btn-primary btn-lg px-4 gap-3">Get Started</a>
                <a href="#services" class="btn btn-outline-secondary btn-lg px-4">Our Services</a>
            </div>
        </div>
    </section>
    
    
<section id="about" class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <img src="https://via.placeholder.com/600x400" class="img-fluid rounded" alt="About">
            </div>
            <div class="col-lg-6">
                <h2 class="fw-bold mb-3">About Our Fitness Gym</h2>
                <p class="text-muted">Our state-of-the-art facility and expert trainers are here to help you achieve your fitness goals.</p>
                <ul class="list-unstyled">
                    <li><i class="fas fa-check text-primary me-2"></i> Professional Service</li>
                    <li><i class="fas fa-check text-primary me-2"></i> Dedicated Team</li>
                    <li><i class="fas fa-check text-primary me-2"></i> 24/7 Support</li>
                </ul>
            </div>
        </div>
    </div>
</section>

    
<section id="services" class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Our Services</h2>
            <p class="text-muted">High quality solutions for your needs</p>
        </div>
        <div class="row g-4">
            
<div class="col-md-3">
    <div class="card h-100 border-0 shadow-sm p-4 text-center">
        <div class="mb-3">
            <i class="fas fa-shield-alt fa-3x text-primary"></i>
        </div>
        <h5 class="fw-bold">Personal Training</h5>
        <p class="text-muted small">Standard descriptions for Personal Training providing value to our clients.</p>
    </div>
</div>

<div class="col-md-3">
    <div class="card h-100 border-0 shadow-sm p-4 text-center">
        <div class="mb-3">
            <i class="fas fa-rocket fa-3x text-primary"></i>
        </div>
        <h5 class="fw-bold">Group Classes</h5>
        <p class="text-muted small">Standard descriptions for Group Classes providing value to our clients.</p>
    </div>
</div>

<div class="col-md-3">
    <div class="card h-100 border-0 shadow-sm p-4 text-center">
        <div class="mb-3">
            <i class="fas fa-heart fa-3x text-primary"></i>
        </div>
        <h5 class="fw-bold">Cardio Equipment</h5>
        <p class="text-muted small">Standard descriptions for Cardio Equipment providing value to our clients.</p>
    </div>
</div>

<div class="col-md-3">
    <div class="card h-100 border-0 shadow-sm p-4 text-center">
        <div class="mb-3">
            <i class="fas fa-cog fa-3x text-primary"></i>
        </div>
        <h5 class="fw-bold">Strength Training</h5>
        <p class="text-muted small">Standard descriptions for Strength Training providing value to our clients.</p>
    </div>
</div>

        </div>
    </div>
</section>

    
<section id="portfolio" class="py-5">
    <div class="container">
        <h2 class="text-center fw-bold mb-5">Recent Projects</h2>
        <div class="row g-3">
            <div class="col-md-4"><img src="https://via.placeholder.com/400x300" class="img-fluid rounded" alt="P1"></div>
            <div class="col-md-4"><img src="https://via.placeholder.com/400x300" class="img-fluid rounded" alt="P2"></div>
            <div class="col-md-4"><img src="https://via.placeholder.com/400x300" class="img-fluid rounded" alt="P3"></div>
            <div class="col-md-4"><img src="https://via.placeholder.com/400x300" class="img-fluid rounded" alt="P4"></div>
            <div class="col-md-4"><img src="https://via.placeholder.com/400x300" class="img-fluid rounded" alt="P5"></div>
            <div class="col-md-4"><img src="https://via.placeholder.com/400x300" class="img-fluid rounded" alt="P6"></div>
        </div>
    </div>
</section>

    
<section id="pricing" class="py-5 bg-light">
    <div class="container">
        <h2 class="text-center fw-bold mb-5">Pricing Plans</h2>
        <div class="row g-4 justify-content-center">
            <div class="col-md-4">
                <div class="card h-100 p-4 border-0 shadow">
                    <h3>Basic</h3>
                    <h1 class="display-5 fw-bold">$19<small class="text-muted fs-6">/mo</small></h1>
                    <ul class="list-unstyled my-4">
                        <li>Feature One</li>
                        <li>Feature Two</li>
                        <li class="text-muted">Feature Three</li>
                    </ul>
                    <button class="btn btn-outline-primary">Choose Plan</button>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 p-4 border-0 shadow bg-primary text-white">
                    <h3>Pro</h3>
                    <h1 class="display-5 fw-bold">$49<small class="fs-6">/mo</small></h1>
                    <ul class="list-unstyled my-4">
                        <li>Feature One</li>
                        <li>Feature Two</li>
                        <li>Feature Three</li>
                    </ul>
                    <button class="btn btn-light">Choose Plan</button>
                </div>
            </div>
        </div>
    </div>
</section>

    
<section id="contact" class="py-5">
    <div class="container">
        <h2 class="text-center fw-bold mb-5">Contact Us</h2>
        <div class="row">
            <div class="col-lg-6 mx-auto">
                <form>
                    <div class="mb-3"><input type="text" class="form-control" placeholder="Your Name"></div>
                    <div class="mb-3"><input type="email" class="form-control" placeholder="Your Email"></div>
                    <div class="mb-3"><textarea class="form-control" rows="5" placeholder="Your Message"></textarea></div>
                    <button type="submit" class="btn btn-primary w-100">Send Message</button>
                </form>
            </div>
        </div>
    </div>
</section>

    
<footer class="py-4 bg-dark text-white text-center">
    <div class="container">
        <p class="mb-0">&copy; 2023 MuPu 0762. All rights reserved. Designed for CodeCanyon.</p>
    </div>
</footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>