<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Products - TechDeals</title>
<meta name="description" content="Browse our collection of audio products including headphones, speakers, and earbuds. Find the best deals on high-quality audio equipment.">
<link rel="canonical" href="https://techdeals.example.com/category.html?cat=audio">
<meta name="robots" content="index, follow">
<!-- Open Graph -->
<meta property="og:title" content="Audio Products - TechDeals">
<meta property="og:description" content="Browse our collection of audio products including headphones, speakers, and earbuds. Find the best deals on high-quality audio equipment.">
<meta property="og:image" content="https://techdeals.example.com/assets/images/product-1.jpg">
<meta property="og:url" content="https://techdeals.example.com/category.html?cat=audio">
<meta property="og:type" content="website">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Audio Products - TechDeals">
<meta name="twitter:description" content="Browse our collection of audio products including headphones, speakers, and earbuds. Find the best deals on high-quality audio equipment.">
<meta name="twitter:image" content="https://techdeals.example.com/assets/images/product-1.jpg">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="assets/images/logo.png">
<!-- CSS -->
<link rel="stylesheet" href="assets/css/styles.css">
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://techdeals.example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Categories",
"item": "https://techdeals.example.com/category.html"
},
{
"@type": "ListItem",
"position": 3,
"name": "Audio",
"item": "https://techdeals.example.com/category.html?cat=audio"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ItemList",
"name": "Audio Products",
"description": "Our collection of audio products including headphones, speakers, and earbuds",
"numberOfItems": 6,
"itemListElement": [
{
"@type": "Product",
"position": 1,
"name": "Wireless Noise-Canceling Headphones",
"image": "https://techdeals.example.com/assets/images/product-1.jpg",
"description": "Premium noise-canceling headphones with 30-hour battery life",
"offers": {
"@type": "Offer",
"price": "199.99",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
},
{
"@type": "Product",
"position": 2,
"name": "Bluetooth Portable Speaker",
"image": "https://techdeals.example.com/assets/images/product-7.jpg",
"description": "Waterproof speaker with 360-degree sound and 12-hour battery",
"offers": {
"@type": "Offer",
"price": "79.99",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
},
{
"@type": "Product",
"position": 3,
"name": "True Wireless Earbuds",
"image": "https://techdeals.example.com/assets/images/product-8.jpg",
"description": "Premium earbuds with active noise cancellation and transparency mode",
"offers": {
"@type": "Offer",
"price": "149.99",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
},
{
"@type": "Product",
"position": 4,
"name": "Studio Monitor Headphones",
"image": "https://techdeals.example.com/assets/images/product-9.jpg",
"description": "Professional studio headphones with accurate sound reproduction",
"offers": {
"@type": "Offer",
"price": "129.99",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
},
{
"@type": "Product",
"position": 5,
"name": "Gaming Headset with Mic",
"image": "https://techdeals.example.com/assets/images/product-10.jpg",
"description": "7.1 surround sound gaming headset with RGB lighting",
"offers": {
"@type": "Offer",
"price": "89.99",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
},
{
"@type": "Product",
"position": 6,
"name": "Wireless Earphones with Neckband",
"image": "https://techdeals.example.com/assets/images/product-11.jpg",
"description": "Comfortable neckband earphones with magnetic earbuds",
"offers": {
"@type": "Offer",
"price": "59.99",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
}
]
}
</script>
</head>
<body>
<header class="header">
<div class="container">
<div class="header-content">
<div class="logo">
<a href="index.html">
<img src="assets/images/logo.png" alt="TechDeals Logo">
</a>
</div>
<nav class="main-nav" id="main-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="category.html" class="active">Categories</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="search">
<form action="search" method="get">
<input type="search" name="q" placeholder="Search products..." aria-label="Search">
<button type="submit" aria-label="Submit search">Search</button>
</form>
</div>
<button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Toggle menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</header>
<main>
<nav class="breadcrumbs">
<div class="container">
<ol>
<li><a href="index.html">Home</a></li>
<li><a href="category.html">Categories</a></li>
<li>Audio</li>
</ol>
</div>
</nav>
<section class="page-header">
<div class="container">
<h1>Audio Products</h1>
<p>Browse our collection of audio products including headphones, speakers, and earbuds</p>
</div>
</section>
<section class="category-content">
<div class="container">
<div class="category-layout">
<aside class="filters">
<h2>Filter Products</h2>
<div class="filter-group">
<h3>Categories</h3>
<ul>
<li><a href="category.html?cat=audio" class="active">Audio</a></li>
<li><a href="category.html?cat=smart-home">Smart Home</a></li>
<li><a href="category.html?cat=computer">Computers</a></li>
<li><a href="category.html?cat=mobile">Mobile</a></li>
<li><a href="category.html?cat=gaming">Gaming</a></li>
<li><a href="category.html?cat=wearables">Wearables</a></li>
</ul>
</div>
<div class="filter-group">
<h3>Price Range</h3>
<ul>
<li><a href="?price=0-50">Under $50</a></li>
<li><a href="?price=50-100">$50 - $100</a></li>
<li><a href="?price=100-200">$100 - $200</a></li>
<li><a href="?price=200+">$200 and above</a></li>
</ul>
</div>
<div class="filter-group">
<h3>Features</h3>
<ul>
<li><a href="?feature=wireless">Wireless</a></li>
<li><a href="?feature=noise-canceling">Noise Canceling</a></li>
<li><a href="?feature=waterproof">Waterproof</a></li>
<li><a href="?feature=bluetooth">Bluetooth</a></li>
</ul>
</div>
</aside>
<div class="products-section">
<div class="sort-bar">
<p>Showing 6 of 24 products</p>
<div class="sort-options">
<label for="sort">Sort by:</label>
<select id="sort" name="sort">
<option value="featured">Featured</option>
<option value="price-low">Price: Low to High</option>
<option value="price-high">Price: High to Low</option>
<option value="name">Name: A to Z</option>
<option value="rating">Rating</option>
</select>
</div>
</div>
<div class="product-grid">
<article class="product-card">
<div class="product-image">
<img src="assets/images/product-1.jpg" alt="Wireless Noise-Canceling Headphones" width="300" height="300" loading="lazy">
</div>
<div class="product-info">
<h3><a href="product.html?id=1">Wireless Noise-Canceling Headphones</a></h3>
<p class="product-price">$199.99</p>
<p class="product-description">Premium noise-canceling headphones with 30-hour battery life</p>
<a href="product.html?id=1" class="btn btn-secondary">View Details</a>
</div>
</article>
<article class="product-card">
<div class="product-image">
<img src="assets/images/product-7.jpg" alt="Bluetooth Portable Speaker" width="300" height="300" loading="lazy">
</div>
<div class="product-info">
<h3><a href="product.html?id=7">Bluetooth Portable Speaker</a></h3>
<p class="product-price">$79.99</p>
<p class="product-description">Waterproof speaker with 360-degree sound and 12-hour battery</p>
<a href="product.html?id=7" class="btn btn-secondary">View Details</a>
</div>
</article>
<article class="product-card">
<div class="product-image">
<img src="assets/images/product-8.jpg" alt="True Wireless Earbuds" width="300" height="300" loading="lazy">
</div>
<div class="product-info">
<h3><a href="product.html?id=8">True Wireless Earbuds</a></h3>
<p class="product-price">$149.99</p>
<p class="product-description">Premium earbuds with active noise cancellation and transparency mode</p>
<a href="product.html?id=8" class="btn btn-secondary">View Details</a>
</div>
</article>
<article class="product-card">
<div class="product-image">
<img src="assets/images/product-9.jpg" alt="Studio Monitor Headphones" width="300" height="300" loading="lazy">
</div>
<div class="product-info">
<h3><a href="product.html?id=9">Studio Monitor Headphones</a></h3>
<p class="product-price">$129.99</p>
<p class="product-description">Professional studio headphones with accurate sound reproduction</p>
<a href="product.html?id=9" class="btn btn-secondary">View Details</a>
</div>
</article>
<article class="product-card">
<div class="product-image">
<img src="assets/images/product-10.jpg" alt="Gaming Headset with Mic" width="300" height="300" loading="lazy">
</div>
<div class="product-info">
<h3><a href="product.html?id=10">Gaming Headset with Mic</a></h3>
<p class="product-price">$89.99</p>
<p class="product-description">7.1 surround sound gaming headset with RGB lighting</p>
<a href="product.html?id=10" class="btn btn-secondary">View Details</a>
</div>
</article>
<article class="product-card">
<div class="product-image">
<img src="assets/images/product-11.jpg" alt="Wireless Earphones with Neckband" width="300" height="300" loading="lazy">
</div>
<div class="product-info">
<h3><a href="product.html?id=11">Wireless Earphones with Neckband</a></h3>
<p class="product-price">$59.99</p>
<p class="product-description">Comfortable neckband earphones with magnetic earbuds</p>
<a href="product.html?id=11" class="btn btn-secondary">View Details</a>
</div>
</article>
</div>
<div class="pagination">
<a href="#" class="pagination-arrow" aria-label="Previous page">«</a>
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<span>...</span>
<a href="#">8</a>
<a href="#" class="pagination-arrow" aria-label="Next page">»</a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>TechDeals</h3>
<p>Your trusted source for the best deals on electronics and tech gadgets.</p>
<div class="social-links">
<a href="#" aria-label="Facebook">Facebook</a>
<a href="#" aria-label="Twitter">Twitter</a>
<a href="#" aria-label="Instagram">Instagram</a>
</div>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="category.html">Categories</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Categories</h3>
<ul>
<li><a href="category.html?cat=audio">Audio</a></li>
<li><a href="category.html?cat=smart-home">Smart Home</a></li>
<li><a href="category.html?cat=computer">Computers</a></li>
<li><a href="category.html?cat=mobile">Mobile</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Legal</h3>
<ul>
<li><a href="privacy-policy">Privacy Policy</a></li>
<li><a href="terms-of-service">Terms of Service</a></li>
<li><a href="affiliate-disclosure">Affiliate Disclosure</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 TechDeals. All rights reserved.</p>
</div>
</div>
</footer>
<script src="assets/js/app.js"></script>
</body>
</html>