index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-REWQ55HSVH"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-REWQ55HSVH');
</script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>ToolsGrid — Free Online Tools | Calculator, Converter & More</title>
  <meta name="description" content="India's best free online tools website. EMI calculator, Age calculator, GST calculator, Password generator and 20+ tools — no registration required, completely free!">
  <meta name="keywords" content="toolsgrid, free online tools india, emi calculator, age calculator, gst calculator, password generator, word counter, bmi calculator">

  <meta name="robots" content="index, follow">
  <meta property="og:title" content="ToolsGrid — Free Online Tools India">
  <meta property="og:description" content="Free online tools — EMI calculator, age calculator, GST calculator, password generator and much more.">
  <meta property="og:type" content="website">

  <link rel="canonical" href="https://toolsgrid.co.in/">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="assets/css/style.css">

  <link rel="icon" type="image/png" href="assets/img/favicon.png">
  
</head>
<body>

<nav class="navbar">
  <a href="index.html" class="navbar-brand">
    🛠️ Tools<span>Grid</span>
  </a>
  <ul class="navbar-links">
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html#calculators">Calculators</a></li>
    <li><a href="index.html#text-tools">Text Tools</a></li>
    <li><a href="index.html#generators">Generators</a></li>
    <li><a href="index.html#healths">Healths</a></li>
     <li><a href="contact.html">Contact</a></li>
    <li><a href="about-us.html">About</a></li>
  </ul>
  <!-- Hamburger — mobile only -->
  <button class="hamburger" id="hamburger" aria-label="Open menu">
    <span></span>
    <span></span>
    <span></span>
  </button>
</nav>

<!-- OVERLAY -->
<div class="menu-overlay" id="menuOverlay"></div>

<!-- MOBILE MENU — slides from bottom -->
<div class="mobile-menu" id="mobileMenu">
  <div class="mobile-menu-handle"></div>
  <a href="index.html" onclick="closeMenu()">
    <div class="menu-icon">🏠</div> Home
  </a>
  <a href="index.html#calculators" onclick="closeMenu()">
    <div class="menu-icon">🧮</div> Calculators
  </a>
  <a href="index.html#text-tools" onclick="closeMenu()">
    <div class="menu-icon">📝</div> Text Tools
  </a>
  <a href="index.html#generators" onclick="closeMenu()">
    <div class="menu-icon">⚙️</div> Generators
  </a>
  <a href="index.html#healths" onclick="closeMenu()">
    <div class="menu-icon">❤️</div> Healths
  </a>
  <a href="contact.html" onclick="closeMenu()">
    <div class="menu-icon">✉️</div> Contact
  </a>
  <a href="about-us.html" onclick="closeMenu()">
    <div class="menu-icon">ℹ️</div> About
  </a>
</div>

<!-- <div class="container">
  <div class="ad-slot ad-slot-header">
    📢 Advertisement (728×90) — Replace with Google AdSense code
  </div>
</div> -->

<div class="hero">
  <h1>🛠️ <span>Free</span> Tools Website</h1>
  <p>10+ useful tools no registration, no login, completely free!</p>
  <div class="search-bar">
    <input type="text" id="toolSearch" placeholder="Search tools... e.g., EMI, GST, Age..." autocomplete="off">
    <button>🔍</button>
  </div>
</div>

<div class="container">
  <div class="layout">

    <main>

      <h2 class="section-title" id="calculators">🧮 Calculators</h2>
      <div class="tools-grid">

        <a href="tools/emi-calculator.html" class="tool-card" data-name="emi calculator loan">
          <div class="tool-icon" style="background:#e8f5ee;">🏦</div>
          <div class="tool-name">EMI Calculator</div>
          <div class="tool-desc">Calculate your monthly loan EMI</div>
          <span class="tool-badge">Finance</span>
        </a>

        <a href="tools/gst-calculator.html" class="tool-card" data-name="gst tax calculator">
          <div class="tool-icon" style="background:#fef3c7;">💹</div>
          <div class="tool-name">GST Calculator</div>
          <div class="tool-desc">Find the GST amount and total price</div>
          <span class="tool-badge">Finance</span>
        </a>

        <a href="tools/percentage-calculator.html" class="tool-card" data-name="percentage calculator percent">
          <div class="tool-icon" style="background:#ede9fe;">📊</div>
          <div class="tool-name">Percentage Calculator</div>
          <div class="tool-desc">Calculate percentages and discounts</div>
          <span class="tool-badge">Math</span>
        </a>


        <a href="tools/age-calculator.html" class="tool-card" data-name="age calculator birthday">
          <div class="tool-icon" style="background:#fce7f3;">🎂</div>
          <div class="tool-name">Age Calculator</div>
          <div class="tool-desc">Exact age in years, months, and days</div>
          <span class="tool-badge">Date</span>
        </a>

        <a href="#" class="tool-card" data-name="sip calculator investment mutual fund">
          <div class="tool-icon" style="background:#d1fae5;">📈</div>
          <div class="tool-name">SIP Calculator</div>
          <div class="tool-desc">Estimate mutual fund SIP returns</div>
          <span class="tool-badge" style="background:#d1fae5;color:#065f46;">Coming Soon</span>
        </a>

      </div>

      <h2 class="section-title" id="text-tools">📝 Text Tools</h2>
      <div class="tools-grid">

        <a href="tools/word-counter.html" class="tool-card" data-name="word counter character count text">
          <div class="tool-icon" style="background:#dbeafe;">📝</div>
          <div class="tool-name">Word Counter</div>
          <div class="tool-desc">Count words, characters, and sentences</div>
          <span class="tool-badge">Text</span>
        </a>

        <a href="#" class="tool-card" data-name="text case converter upper lower">
          <div class="tool-icon" style="background:#f3e8ff;">🔤</div>
          <div class="tool-name">Case Converter</div>
          <div class="tool-desc">Convert to UPPERCASE, lowercase, Title Case</div>
          <span class="tool-badge" style="background:#f3e8ff;color:#6b21a8;">Coming Soon</span>
        </a>

        <a href="#" class="tool-card" data-name="lorem ipsum dummy text generator">
          <div class="tool-icon" style="background:#fef9c3;">📄</div>
          <div class="tool-name">Lorem Ipsum Generator</div>
          <div class="tool-desc">Generate dummy placeholder text</div>
          <span class="tool-badge" style="background:#fef9c3;color:#854d0e;">Coming Soon</span>
        </a>

      </div>

      <h2 class="section-title" id="healths">❤️ Healths</h2>
      <div class="tools-grid">
 <a href="tools/bmi-calculator.html" class="tool-card" data-name="bmi calculator body mass index health">
          <div class="tool-icon" style="background:#fee2e2;">⚖️</div>
          <div class="tool-name">BMI Calculator</div>
          <div class="tool-desc">Check your Body Mass Index (BMI)</div>
          <span class="tool-badge">Health</span>
        </a>
        </div>

      <h2 class="section-title" id="generators">⚙️ Generators</h2>
      <div class="tools-grid">

        <a href="tools/password-generator.html" class="tool-card" data-name="password generator strong secure">
          <div class="tool-icon" style="background:#fee2e2;">🔐</div>
          <div class="tool-name">Password Generator</div>
          <div class="tool-desc">Generate strong and secure passwords</div>
          <span class="tool-badge">Security</span>
        </a>

        <a href="#" class="tool-card" data-name="qr code generator qrcode">
          <div class="tool-icon" style="background:#e0f2fe;">📷</div>
          <div class="tool-name">QR Code Generator</div>
          <div class="tool-desc">Create a QR code for any text or URL</div>
          <span class="tool-badge" style="background:#e0f2fe;color:#075985;">Coming Soon</span>
        </a>

        <a href="#" class="tool-card" data-name="random number generator dice">
          <div class="tool-icon" style="background:#f0fdf4;">🎲</div>
          <div class="tool-name">Random Number Generator</div>
          <div class="tool-desc">Generate random numbers instantly</div>
          <span class="tool-badge" style="background:#f0fdf4;color:#166534;">Coming Soon</span>
        </a>

      </div>

      <!-- <div class="ad-slot ad-slot-inline">
        📢 Advertisement — In-Article AdSense (Replace with your ad unit)
      </div> -->

    </main>

    <aside class="sidebar">

      <!-- <div class="ad-slot ad-slot-sidebar">
        📢 Ad (300×250)
      </div> -->

      <div class="sidebar-widget">
        <h3>🔥 Popular Tools</h3>
        <ul class="popular-list">
          <li>🧮 <a href="tools/emi-calculator.html">EMI Calculator</a></li>
          <li>🎂 <a href="tools/age-calculator.html">Age Calculator</a></li>
          <li>💹 <a href="tools/gst-calculator.html">GST Calculator</a></li>
          <li>🔐 <a href="tools/password-generator.html">Password Generator</a></li>
          <li>📝 <a href="tools/word-counter.html">Word Counter</a></li>
          <li>📊 <a href="tools/percentage-calculator.html">Percentage Calculator</a></li>
          <li>⚖️ <a href="tools/bmi-calculator.html">BMI Calculator</a></li>
        </ul>
      </div>

      <div class="sidebar-widget">
        <h3>📂 Categories</h3>
        <ul class="popular-list">
          <li>🧮 <a href="index.html#calculators">Calculators</a></li>
          <li>📝 <a href="index.html#text-tools">Text Tools</a></li>
          <li>⚙️ <a href="index.html#generators">Generators</a></li>
          <li>💰 <a href="index.html#generators">Finance Tools</a></li>
          <li>❤️ <a href="index.html#healths">Health Tools</a></li>
        </ul>
      </div>

      <!-- <div class="ad-slot" style="height:200px; margin-top:16px;">
        📢 Ad (300×200)
      </div> -->

    </aside>

  </div>
</div>

<!-- <div class="container">
  <div class="ad-slot" style="height:90px; margin: 16px 0;">
    📢 Advertisement (728×90) — Footer AdSense
  </div>
</div> -->

<footer>
  <div class="footer-links">
    <a href="index.html">Home</a>
    <a href="about-us.html">About</a>
    <a href="privacy.html">Privacy Policy</a>
    <a href="contact.html">Contact</a>
    <!-- <a href="sitemap.xml">Sitemap</a> -->
  </div>
  <p>© 2026 <strong style="color:white;">ToolsGrid.co.in</strong>  Free Online Tools</p>
  <p style="margin-top:6px; font-size:12px; opacity:0.5;">
    Made with ❤️ in India | Free Online Tools for Everyone
  </p>
</footer>

<script src="assets/js/main.js"></script>
</body>
</html>