BMI CALCULATOR

[acharyahealer-ux]

<title>HealthMate BMI Calculator | Calculate Your Body Mass Index</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

    body {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: #333;
        line-height: 1.6;
        min-height: 100vh;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .container {
        max-width: 1200px;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 20px;
        margin-top: 20px;
    }
    
    @media (max-width: 900px) {
        .container {
            grid-template-columns: 1fr;
        }
    }
    
    header {
        text-align: center;
        margin-bottom: 30px;
        width: 100%;
        color: white;
    }
    
    h1 {
        font-size: 2.8rem;
        margin-bottom: 10px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .tagline {
        font-size: 1.2rem;
        opacity: 0.9;
    }
    
    .calculator-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        padding: 30px;
        margin-bottom: 20px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #444;
    }
    
    input, select {
        width: 100%;
        padding: 14px;
        border: 2px solid #ddd;
        border-radius: 8px;
        font-size: 16px;
        transition: border-color 0.3s;
    }
    
    input:focus, select:focus {
        border-color: #2575fc;
        outline: none;
    }
    
    .gender-selection {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .gender-option {
        flex: 1;
        text-align: center;
        padding: 15px;
        border: 2px solid #ddd;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .gender-option.selected {
        border-color: #2575fc;
        background-color: #f0f7ff;
    }
    
    .gender-option i {
        font-size: 24px;
        margin-bottom: 8px;
        display: block;
    }
    
    .unit-toggle {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        gap: 10px;
    }
    
    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 30px;
    }
    
    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
    }
    
    .slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    
    input:checked + .slider {
        background-color: #2575fc;
    }
    
    input:checked + .slider:before {
        transform: translateX(30px);
    }
    
    .unit-label {
        font-weight: 600;
        color: #444;
    }
    
    .height-input {
        display: none;
    }
    
    .height-input.active {
        display: block;
    }
    
    button {
        width: 100%;
        padding: 16px;
        background: linear-gradient(to right, #2575fc, #6a11cb);
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        margin-top: 10px;
    }
    
    button:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    
    .result-container {
        text-align: center;
        padding: 20px;
        margin-top: 30px;
        border-radius: 10px;
        background: #f8f9fa;
        display: none;
    }
    
    .bmi-value {
        font-size: 3rem;
        font-weight: 700;
        margin: 15px 0;
    }
    
    .bmi-category {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 15px;
        padding: 8px 15px;
        border-radius: 30px;
        display: inline-block;
    }
    
    .underweight { background: #ffc107; color: #333; }
    .normal { background: #28a745; color: white; }
    .overweight { background: #fd7e14; color: white; }
    .obese { background: #dc3545; color: white; }
    
    .recommendations {
        margin-top: 20px;
        text-align: left;
        padding: 15px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    }
    
    .ads-container {
        background: white;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        height: fit-content;
    }
    
    .ad-placeholder {
        background: #f8f9fa;
        border: 2px dashed #ddd;
        border-radius: 8px;
        padding: 30px;
        text-align: center;
        margin-bottom: 20px;
        color: #777;
    }
    
    .ad-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
        color: #444;
        font-weight: 600;
    }
    
    footer {
        margin-top: 40px;
        text-align: center;
        color: white;
        opacity: 0.8;
        font-size: 0.9rem;
        width: 100%;
        padding: 20px;
    }
    
    .disclaimer {
        max-width: 800px;
        margin: 20px auto;
        background: rgba(255, 255, 255, 0.1);
        padding: 15px;
        border-radius: 8px;
        font-size: 0.9rem;
    }
</style>

HealthMate BMI Calculator

Calculate your Body Mass Index based on age and gender

<div class="container">
    <div class="main-content">
        <div class="calculator-card">
            <div class="form-group">
                <label for="age">Age (1-100 years)</label>
                <input type="number" id="age" min="1" max="100" value="25" required>
            </div>
            
            <label>Gender</label>
            <div class="gender-selection">
                <div class="gender-option selected" id="male">
                    <i class="fas fa-mars"></i>
                    <span>Male</span>
                </div>
                <div class="gender-option" id="female">
                    <i class="fas fa-venus"></i>
                    <span>Female</span>
                </div>
            </div>
            
            <div class="form-group">
                <label>Height Unit</label>
                <div class="unit-toggle">
                    <span class="unit-label">cm</span>
                    <label class="toggle-switch">
                        <input type="checkbox" id="heightUnitToggle">
                        <span class="slider"></span>
                    </label>
                    <span class="unit-label">in</span>
                </div>
                
                <div class="height-input active" id="heightCm">
                    <label for="heightCmInput">Height (cm)</label>
                    <input type="number" id="heightCmInput" placeholder="Enter height in centimeters" required>
                </div>
                
                <div class="height-input" id="heightIn">
                    <label for="heightInInput">Height (inches)</label>
                    <input type="number" id="heightInInput" placeholder="Enter height in inches" required>
                </div>
            </div>
            
            <div class="form-group">
                <label for="weight">Weight (kg)</label>
                <input type="number" id="weight" placeholder="Enter weight in kg" required>
            </div>
            
            <button id="calculate-btn">Calculate BMI</button>
            
            <div class="result-container" id="result">
                <h2>Your BMI Result</h2>
                <div class="bmi-value" id="bmi-value">23.4</div>
                <div class="bmi-category normal" id="bmi-category">Normal Weight</div>
                
                <div class="recommendations">
                    <h3>Health Recommendations</h3>
                    <p id="recommendation-text">Maintain your current weight with a balanced diet and regular exercise.</p>
                </div>
            </div>
        </div>
        
        <div class="calculator-card">
            <h2>Understanding BMI</h2>
            <p>Body Mass Index (BMI) is a measure of body fat based on height and weight that applies to adult men and women.</p>
            
            <h3>BMI Categories:</h3>
            <ul>
                <li><strong>Underweight:</strong> BMI less than 18.5</li>
                <li><strong>Normal weight:</strong> BMI 18.5 to 24.9</li>
                <li><strong>Overweight:</strong> BMI 25 to 29.9</li>
                <li><strong>Obesity:</strong> BMI 30 or greater</li>
            </ul>
            
            <p>Note: BMI is a screening tool and does not directly measure body fat. Healthcare professionals use additional tools for diagnosis.</p>
        </div>
    </div>
    
    <div class="ads-container">
        <div class="ad-title">Advertisement</div>
        <div class="ad-placeholder">
            <!-- Google AdSense Ad Unit -->
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-YOUR_ADSENSE_ID" crossorigin="anonymous"></script>
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-YOUR_ADSENSE_ID"
                 data-ad-slot="YOUR_AD_SLOT"
                 data-ad-format="auto"
                 data-full-width-responsive="true"></ins>
            <script>
                 (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
            <p>Ad will be displayed here</p>
        </div>
        
        <div class="ad-placeholder">
            <div class="ad-title">Sponsored Content</div>
            <p>Advertisement space (300x250)</p>
            <!-- Additional AdSense code can be placed here -->
        </div>
    </div>
</div>

<footer>
    <div class="disclaimer">
        <p><strong>Disclaimer:</strong> This BMI calculator provides approximate values and should not be used as a sole indicator of health. Consult a healthcare professional for advice on weight and health.</p>
    </div>
    <p>© 2023 HealthMate BMI Calculator | Privacy Policy | Terms of Use</p>
</footer>

<script>
    // Gender selection
    const maleOption = document.getElementById('male');
    const femaleOption = document.getElementById('female');
    let selectedGender = 'male';
    
    maleOption.addEventListener('click', () => {
        maleOption.classList.add('selected');
        femaleOption.classList.remove('selected');
        selectedGender = 'male';
    });
    
    femaleOption.addEventListener('click', () => {
        femaleOption.classList.add('selected');
        maleOption.classList.remove('selected');
        selectedGender = 'female';
    });
    
    // Height unit toggle
    const heightUnitToggle = document.getElementById('heightUnitToggle');
    const heightCmInput = document.getElementById('heightCm');
    const heightInInput = document.getElementById('heightIn');
    
    heightUnitToggle.addEventListener('change', function() {
        if (this.checked) {
            heightCmInput.classList.remove('active');
            heightInInput.classList.add('active');
        } else {
            heightInInput.classList.remove('active');
            heightCmInput.classList.add('active');
        }
    });
    
    // BMI Calculation
    document.getElementById('calculate-btn').addEventListener('click', () => {
        const age = parseInt(document.getElementById('age').value);
        const weight = parseFloat(document.getElementById('weight').value);
        
        let height;
        if (heightUnitToggle.checked) {
            // Convert inches to cm for calculation
            const heightIn = parseFloat(document.getElementById('heightInInput').value);
            if (!heightIn || heightIn < 20 || heightIn > 100) {
                alert('Please enter a valid height between 20 and 100 inches');
                return;
            }
            height = heightIn * 2.54; // Convert inches to cm
        } else {
            height = parseFloat(document.getElementById('heightCmInput').value);
            if (!height || height < 50 || height > 250) {
                alert('Please enter a valid height between 50cm and 250cm');
                return;
            }
        }
        
        if (!age || age < 1 || age > 100) {
            alert('Please enter a valid age between 1 and 100');
            return;
        }
        
        if (!weight || weight < 2 || weight > 300) {
            alert('Please enter a valid weight between 2kg and 300kg');
            return;
        }
        
        // Calculate BMI: weight (kg) / (height (m) * height (m))
        const heightInMeters = height / 100;
        const bmi = weight / (heightInMeters * heightInMeters);
        const roundedBMI = bmi.toFixed(1);
        
        // Display result
        document.getElementById('bmi-value').textContent = roundedBMI;
        const resultElement = document.getElementById('result');
        resultElement.style.display = 'block';
        
        // Determine category and recommendations
        const categoryElement = document.getElementById('bmi-category');
        const recommendationElement = document.getElementById('recommendation-text');
        
        let category = '';
        let recommendation = '';
        
        if (bmi < 18.5) {
            category = 'Underweight';
            categoryElement.className = 'bmi-category underweight';
            recommendation = `For your age and gender, a BMI below 18.5 is considered underweight. Consider consulting with a healthcare provider about healthy weight gain strategies.`;
        } else if (bmi >= 18.5 && bmi < 25) {
            category = 'Normal Weight';
            categoryElement.className = 'bmi-category normal';
            recommendation = `For your age and gender, your BMI is in the healthy range. Maintain your weight with a balanced diet and regular physical activity.`;
        } else if (bmi >= 25 && bmi < 30) {
            category = 'Overweight';
            categoryElement.className = 'bmi-category overweight';
            recommendation = `For your age and gender, a BMI between 25 and 29.9 is considered overweight. Consider incorporating more physical activity and healthier food choices.`;
        } else {
            category = 'Obese';
            categoryElement.className = 'bmi-category obese';
            recommendation = `For your age and gender, a BMI of 30 or higher is considered obese. It's recommended to consult with a healthcare provider about weight management strategies.`;
        }
        
        categoryElement.textContent = category;
        recommendationElement.textContent = recommendation;
        
        // Scroll to results
        resultElement.scrollIntoView({ behavior: 'smooth' });
    });
</script>

[acharyahealer-ux]

<title>ToolsHub - Useful Online Tools & Calculators</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

    :root {
        --primary: #4361ee;
        --secondary: #3a0ca3;
        --accent: #f72585;
        --light: #f8f9fa;
        --dark: #212529;
        --success: #4cc9f0;
        --gray: #6c757d;
    }
    
    body {
        background-color: #f9fafb;
        color: var(--dark);
        line-height: 1.6;
    }
    
    .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    /* Header Styles */
    header {
        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        color: white;
        padding: 15px 0;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.8rem;
        font-weight: 700;
    }
    
    .logo i {
        color: var(--accent);
    }
    
    nav ul {
        display: flex;
        list-style: none;
        gap: 25px;
    }
    
    nav a {
        color: white;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s;
        position: relative;
    }
    
    nav a:hover {
        color: var(--accent);
    }
    
    nav a::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--accent);
        transition: width 0.3s;
    }
    
    nav a:hover::after {
        width: 100%;
    }
    
    .mobile-menu-btn {
        display: none;
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
    }
    
    /* Hero Section */
    .hero {
        padding: 80px 0;
        background: linear-gradient(rgba(67, 97, 238, 0.9), rgba(58, 12, 163, 0.9)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%234361ee"/><path d="M0 0L100 100" stroke="white" stroke-width="0.5"/><path d="M100 0L0 100" stroke="white" stroke-width="0.5"/></svg>');
        background-size: cover;
        color: white;
        text-align: center;
    }
    
    .hero h1 {
        font-size: 3rem;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .hero p {
        font-size: 1.2rem;
        max-width: 700px;
        margin: 0 auto 30px;
    }
    
    .btn {
        display: inline-block;
        padding: 12px 30px;
        background-color: var(--accent);
        color: white;
        text-decoration: none;
        border-radius: 50px;
        font-weight: 600;
        transition: all 0.3s;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    
    .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        background-color: #ff0676;
    }
    
    /* Tools Section */
    .section-title {
        text-align: center;
        margin: 60px 0 40px;
        position: relative;
    }
    
    .section-title h2 {
        font-size: 2.5rem;
        color: var(--primary);
        display: inline-block;
        padding-bottom: 10px;
    }
    
    .section-title h2::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background-color: var(--accent);
        border-radius: 2px;
    }
    
    .tools-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        margin-bottom: 60px;
    }
    
    .tool-card {
        background: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .tool-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    }
    
    .tool-img {
        height: 180px;
        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 4rem;
    }
    
    .tool-content {
        padding: 25px;
    }
    
    .tool-content h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;
        color: var(--dark);
    }
    
    .tool-content p {
        color: var(--gray);
        margin-bottom: 20px;
    }
    
    .tool-card .btn {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
    
    /* Features Section */
    .features {
        background-color: var(--light);
        padding: 60px 0;
    }
    
    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
    }
    
    .feature {
        text-align: center;
        padding: 30px;
        background: white;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    
    .feature i {
        font-size: 3rem;
        color: var(--primary);
        margin-bottom: 20px;
    }
    
    .feature h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    /* Testimonials */
    .testimonials {
        padding: 60px 0;
        background: linear-gradient(to right, #4361ee, #3a0ca3);
        color: white;
    }
    
    .testimonials .section-title h2 {
        color: white;
    }
    
    .testimonial-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    }
    
    .testimonial {
        background: rgba(255, 255, 255, 0.1);
        padding: 30px;
        border-radius: 10px;
        backdrop-filter: blur(10px);
    }
    
    .testimonial p {
        margin-bottom: 20px;
        font-style: italic;
    }
    
    .testimonial .user {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    
    .testimonial .user img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: white;
    }
    
    /* Footer */
    footer {
        background-color: var(--dark);
        color: white;
        padding: 60px 0 30px;
    }
    
    .footer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 40px;
        margin-bottom: 40px;
    }
    
    .footer-column h3 {
        font-size: 1.3rem;
        margin-bottom: 20px;
        position: relative;
        padding-bottom: 10px;
    }
    
    .footer-column h3::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 3px;
        background-color: var(--accent);
    }
    
    .footer-column ul {
        list-style: none;
    }
    
    .footer-column ul li {
        margin-bottom: 10px;
    }
    
    .footer-column a {
        color: #ccc;
        text-decoration: none;
        transition: color 0.3s;
    }
    
    .footer-column a:hover {
        color: var(--accent);
    }
    
    .social-links {
        display: flex;
        gap: 15px;
        margin-top: 20px;
    }
    
    .social-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        transition: all 0.3s;
    }
    
    .social-links a:hover {
        background-color: var(--accent);
        transform: translateY(-3px);
    }
    
    .copyright {
        text-align: center;
        padding-top: 30px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        color: #ccc;
        font-size: 0.9rem;
    }
    
    /* Responsive Styles */
    @media (max-width: 768px) {
        .header-content {
            flex-direction: column;
            text-align: center;
            gap: 15px;
        }
        
        nav ul {
            flex-direction: column;
            gap: 15px;
            text-align: center;
        }
        
        .hero h1 {
            font-size: 2.5rem;
        }
        
        .hero p {
            font-size: 1.1rem;
        }
        
        .section-title h2 {
            font-size: 2rem;
        }
    }
    
    @media (max-width: 576px) {
        .hero {
            padding: 60px 0;
        }
        
        .hero h1 {
            font-size: 2rem;
        }
        
        .tool-card {
            margin: 0 10px;
        }
        
        .feature {
            padding: 20px;
        }
    }
</style>

ToolsHub

• Home
• Tools
• About
• Contact

<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <h1>Powerful Tools at Your Fingertips</h1>
        <p>Discover our collection of free online tools designed to make your life easier. From calculators to converters, we have everything you need.</p>
        <a href="#" class="btn">Explore Tools</a>
    </div>
</section>

<!-- Featured Tools -->
<section class="container">
    <div class="section-title">
        <h2>Featured Tools</h2>
    </div>
    <div class="tools-grid">
        <div class="tool-card">
            <div class="tool-img">
                <i class="fas fa-weight"></i>
            </div>
            <div class="tool-content">
                <h3>BMI Calculator</h3>
                <p>Calculate your Body Mass Index based on age, gender, height, and weight. Get personalized health recommendations.</p>
                <a href="#" class="btn">Use Tool</a>
            </div>
        </div>
        <div class="tool-card">
            <div class="tool-img">
                <i class="fas fa-calculator"></i>
            </div>
            <div class="tool-content">
                <h3>Unit Converter</h3>
                <p>Convert between different units of measurement including length, weight, temperature, and more.</p>
                <a href="#" class="btn">Use Tool</a>
            </div>
        </div>
        <div class="tool-card">
            <div class="tool-img">
                <i class="fas fa-clock"></i>
            </div>
            <div class="tool-content">
                <h3>Time Zone Converter</h3>
                <p>Convert time between different time zones around the world with our easy-to-use tool.</p>
                <a href="#" class="btn">Use Tool</a>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="features">
    <div class="container">
        <div class="section-title">
            <h2>Why Choose Our Tools</h2>
        </div>
        <div class="features-grid">
            <div class="feature">
                <i class="fas fa-bolt"></i>
                <h3>Fast & Efficient</h3>
                <p>Our tools are optimized for speed and performance, delivering results instantly.</p>
            </div>
            <div class="feature">
                <i class="fas fa-mobile-alt"></i>
                <h3>Fully Responsive</h3>
                <p>Access our tools from any device - desktop, tablet, or mobile phone.</p>
            </div>
            <div class="feature">
                <i class="fas fa-lock"></i>
                <h3>Secure & Private</h3>
                <p>We don't store your data. All calculations happen locally in your browser.</p>
            </div>
            <div class="feature">
                <i class="fas fa-tag"></i>
                <h3>Completely Free</h3>
                <p>All our tools are free to use with no hidden fees or subscriptions.</p>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials -->
<section class="testimonials">
    <div class="container">
        <div class="section-title">
            <h2>What Our Users Say</h2>
        </div>
        <div class="testimonial-grid">
            <div class="testimonial">
                <p>"The BMI calculator helped me track my fitness journey accurately. The recommendations were spot on!"</p>
                <div class="user">
                    <i class="fas fa-user-circle fa-2x"></i>
                    <div>
                        <h4>Sarah Johnson</h4>
                        <p>Fitness Enthusiast</p>
                    </div>
                </div>
            </div>
            <div class="testimonial">
                <p>"As a student, I use the unit converter daily. It's saved me so much time on my physics homework."</p>
                <div class="user">
                    <i class="fas fa-user-circle fa-2x"></i>
                    <div>
                        <h4>Michael Chen</h4>
                        <p>Engineering Student</p>
                    </div>
                </div>
            </div>
            <div class="testimonial">
                <p>"The time zone converter is a lifesaver for coordinating with my international team. Simple and effective!"</p>
                <div class="user">
                    <i class="fas fa-user-circle fa-2x"></i>
                    <div>
                        <h4>Emma Rodriguez</h4>
                        <p>Project Manager</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer>
    <div class="container">
        <div class="footer-grid">
            <div class="footer-column">
                <h3>ToolsHub</h3>
                <p>Your one-stop destination for useful online tools and calculators.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            <div class="footer-column">
                <h3>Tools</h3>
                <ul>
                    <li><a href="#">BMI Calculator</a></li>
                    <li><a href="#">Unit Converter</a></li>
                    <li><a href="#">Time Zone Converter</a></li>
                    <li><a href="#">Currency Converter</a></li>
                    <li><a href="#">Password Generator</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Company</h3>
                <ul>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms of Service</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Subscribe</h3>
                <p>Stay updated with our latest tools and features.</p>
                <form>
                    <input type="email" placeholder="Your email address" style="padding: 10px; width: 100%; margin-bottom: 10px; border-radius: 5px; border: none;">
                    <button type="submit" class="btn" style="width: 100;">Subscribe</button>
                </form>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2023 ToolsHub. All rights reserved.</p>
        </div>
    </div>
</footer>

<script>
    // Mobile menu toggle
    document.querySelector('.mobile-menu-btn').addEventListener('click', function() {
        document.querySelector('nav ul').classList.toggle('show');
    });
</script>