Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Stone Collection | ClassicQuartzStone UK</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .product-card:hover .product-overlay { | |
| opacity: 1; | |
| } | |
| .filter-section { | |
| transition: all 0.3s ease; | |
| } | |
| .filter-section.collapsed { | |
| max-height: 60px; | |
| overflow: hidden; | |
| } | |
| .filter-toggle::after { | |
| content: '+'; | |
| position: absolute; | |
| right: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| } | |
| .filter-toggle.collapsed::after { | |
| content: '-'; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Top Bar --> | |
| <div class="bg-gray-800 text-white py-2 px-4 text-sm"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div> | |
| <i class="fas fa-phone-alt mr-2"></i> (+44) 0118 986 1113 | |
| <i class="fas fa-envelope ml-4 mr-2"></i> info@classicquartzstone.com | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-yellow-300"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="hover:text-yellow-300"><i class="fab fa-google"></i></a> | |
| <a href="#" class="hover:text-yellow-300"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <a href="https://www.classicquartzstone.com/" class="flex items-center"> | |
| <img src="https://www.classicquartzstone.com/wp-content/uploads/2019/01/CQS-Stone-UK.png" alt="ClassicQuartzStone UK" class="h-12 mr-2"> | |
| <img src="https://www.classicquartzstone.com/wp-content/uploads/2019/01/CQS-Stone-UK.png" alt="ClassicQuartzStone UK" class="h-12"> | |
| </a> | |
| </div> | |
| <nav class="w-full md:w-auto"> | |
| <ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 text-gray-800 font-medium"> | |
| <li><a href="https://www.classicquartzstone.com/" class="hover:text-yellow-600 transition">HOME</a></li> | |
| <li><a href="https://www.classicquartzstone.com/about-us/" class="hover:text-yellow-600 transition">ABOUT US</a></li> | |
| <li class="dropdown relative group"> | |
| <a href="#" class="hover:text-yellow-600 transition flex items-center"> | |
| OUR PRODUCTS <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </a> | |
| <ul class="dropdown-menu absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md py-2 z-10 hidden group-hover:block"> | |
| <li><a href="https://www.classicquartzstone.com/product-category/stone-collection/" class="block px-4 py-2 hover:bg-gray-100">STONE COLLECTION</a></li> | |
| <li><a href="https://www.classicquartzstone.com/diamond-range/" class="block px-4 py-2 hover:bg-gray-100">DIAMOND RANGE</a></li> | |
| <li><a href="https://www.classicquartzstone.com/coante-range/" class="block px-4 py-2 hover:bg-gray-100">COANTE RANGE</a></li> | |
| <li><a href="https://www.classicquartzstone.com/supreme-range/" class="block px-4 py-2 hover:bg-gray-100">SUPREME RANGE</a></li> | |
| <li><a href="https://www.classicquartzstone.com/wholesale-quartz-brillo-slabs-range/" class="block px-4 py-2 hover:bg-gray-100">BRILLO RANGE</a></li> | |
| <li><a href="https://www.classicquartzstone.com/wholesale-classic-quartz-slabs-range/" class="block px-4 py-2 hover:bg-gray-100">CLASSIC RANGE</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="https://www.classicquartzstone.com/quartz-designs/" class="hover:text-yellow-600 transition">QUARTZ SLAB DESIGNS</a></li> | |
| <li class="dropdown relative group"> | |
| <a href="#" class="hover:text-yellow-600 transition flex items-center"> | |
| OUR SERVICES <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </a> | |
| <ul class="dropdown-menu absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md py-2 z-10 hidden group-hover:block"> | |
| <li><a href="https://www.classicquartzstone.com/faq/" class="block px-4 py-2 hover:bg-gray-100">FAQ</a></li> | |
| <li><a href="https://www.classicquartzstone.com/marketing-materials-quartz-catalogue/" class="block px-4 py-2 hover:bg-gray-100">MARKETING MATERIALS</a></li> | |
| <li><a href="https://www.classicquartzstone.com/quartz-warranty/" class="block px-4 py-2 hover:bg-gray-100">QUARTZ WARRANTY</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="https://www.classicquartzstone.com/contact-us/" class="hover:text-yellow-600 transition">CONTACT</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Breadcrumb --> | |
| <div class="bg-gray-100 py-3"> | |
| <div class="container mx-auto px-4"> | |
| <nav class="flex" aria-label="Breadcrumb"> | |
| <ol class="inline-flex items-center space-x-1 md:space-x-3"> | |
| <li class="inline-flex items-center"> | |
| <a href="https://www.classicquartzstone.com/" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-yellow-600"> | |
| <i class="fas fa-home mr-2"></i> | |
| Home | |
| </a> | |
| </li> | |
| <li aria-current="page"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-chevron-right text-gray-400 mx-2"></i> | |
| <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">Stone Collection</span> | |
| </div> | |
| </li> | |
| </ol> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Page Header --> | |
| <div class="bg-gradient-to-r from-gray-800 to-gray-600 py-12"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-white mb-4">Stone Collection</h1> | |
| <p class="text-gray-300 max-w-2xl mx-auto">Discover our premium selection of quartz slabs and porcelain surfaces for your next project</p> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Filters Sidebar --> | |
| <div class="w-full lg:w-1/4"> | |
| <div class="bg-white p-4 shadow rounded-lg mb-6"> | |
| <h3 class="text-lg font-semibold mb-4">Search</h3> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search products..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500"> | |
| <button class="absolute right-2 top-2 text-gray-500"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 shadow rounded-lg mb-6"> | |
| <h3 class="text-lg font-semibold mb-4">Filter by Brand</h3> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600"> | |
| <span>Classic Quartz Stone</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">84</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600"> | |
| <span>Horizon Stone</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">69</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Collapsible Filter Sections --> | |
| <div class="bg-white p-4 shadow rounded-lg mb-6"> | |
| <div class="filter-toggle cursor-pointer font-semibold text-lg mb-2 relative" onclick="toggleFilter('color')"> | |
| Filter by Colour | |
| </div> | |
| <div class="filter-section" id="color-filter"> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600"> | |
| <span>Black</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">18</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600"> | |
| <span>Grey</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">107</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600"> | |
| <span>Multicoloured</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">114</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600"> | |
| <span>White</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">124</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 shadow rounded-lg mb-6"> | |
| <div class="filter-toggle cursor-pointer font-semibold text-lg mb-2 relative" onclick="toggleFilter('range')"> | |
| Filter by Range | |
| </div> | |
| <div class="filter-section" id="range-filter"> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600"> | |
| <span>Classic</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">4</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600"> | |
| <span>Supreme</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">2</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600"> | |
| <span>Construction</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">9</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 shadow rounded-lg mb-6"> | |
| <div class="filter-toggle cursor-pointer font-semibold text-lg mb-2 relative" onclick="toggleFilter('style')"> | |
| Filter by Style | |
| </div> | |
| <div class="filter-section" id="style-filter"> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600"> | |
| <span>Granulate</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">26</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600"> | |
| <span>Marbled</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">156</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600"> | |
| <span>Solid</span> | |
| <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">14</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Products Grid --> | |
| <div class="w-full lg:w-3/4"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <p class="text-gray-600">Showing 1–12 of 183 results</p> | |
| <div class="flex items-center"> | |
| <span class="mr-2 text-gray-600">Sort by:</span> | |
| <select class="border border-gray-300 rounded-md px-3 py-1 focus:outline-none focus:ring-2 focus:ring-yellow-500"> | |
| <option>Default</option> | |
| <option>Price: Low to High</option> | |
| <option>Price: High to Low</option> | |
| <option>Newest</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Product Card 1 --> | |
| <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative"> | |
| <div class="relative overflow-hidden"> | |
| <img src="https://www.classicquartzstone.com/wp-content/uploads/2024/06/ARABESCATO_Porcelain-rotated-270x270_c.jpg" alt="ARABESCATO" class="w-full h-64 object-cover transition duration-300 hover:scale-105"> | |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300"> | |
| <a href="https://www.classicquartzstone.com/arabescato-porcelain/" class="bg-white text-gray-800 px-4 py-2 rounded-md font-medium hover:bg-yellow-500 transition">View Details</a> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold mb-2">ARABESCATO</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Porcelain</span> | |
| <button class="text-yellow-600 hover:text-yellow-700"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 2 --> | |
| <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative"> | |
| <div class="relative overflow-hidden"> | |
| <img src="https://www.classicquartzstone.com/wp-content/uploads/2024/06/ARABESCATO-VIOLA-Porcelain-Slabs-rotated-270x270_c.jpg" alt="ARABESCATO VIOLA" class="w-full h-64 object-cover transition duration-300 hover:scale-105"> | |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300"> | |
| <a href="https://www.classicquartzstone.com/arabescato-viola/" class="bg-white text-gray-800 px-4 py-2 rounded-md font-medium hover:bg-yellow-500 transition">View Details</a> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold mb-2">ARABESCATO VIOLA</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Porcelain</span> | |
| <button class="text-yellow-600 hover:text-yellow-700"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 3 --> | |
| <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative"> | |
| <div class="relative overflow-hidden"> | |
| <img src="https://www.classicquartzstone.com/wp-content/uploads/2024/06/BORGHETTO_Porcelain-SLabs-rotated-270x270_c.jpg" alt="BORGHETTO" class="w-full h-64 object-cover transition duration-300 hover:scale-105"> | |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300"> | |
| <a href="https://www.classicquartzstone.com/borghetto-porcelain/" class="bg-white text-gray-800 px-4 py-2 rounded-md font-medium hover:bg-yellow-500 transition">View Details</a> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold mb-2">BORGHETTO</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Porcelain</span> | |
| <button class="text-yellow-600 hover:text-yellow-700"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 4 --> | |
| <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative"> | |
| <div class="relative overflow-hidden"> | |
| <img src="https://www.classicquartzstone.com/wp-content/uploads/2024/06/CALACATTA-DORATO_Porcelain-Slabs-rotated-270x270_c.jpg" alt="CALACATTA DORATO" class="w-full h-64 object-cover transition duration-300 hover:scale-105"> | |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300"> | |
| <a href="https://www.classicquartzstone.com/calacatta-dorato-porcelain/" class="bg-white text-gray-800 px-4 py-2 rounded-md font-medium hover:bg-yellow-500 transition">View Details</a> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold mb-2">CALACATTA DORATO</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Porcelain</span> | |
| <button class="text-yellow-600 hover:text-yellow-700"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 5 --> | |
| <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative"> | |
| <div class="relative overflow-hidden"> | |
| <img src="https://www.classicquartzstone.com/wp-content/uploads/2024/06/CALACATTA-ORO-Porcelain-Slabs-rotated-270x270_c.jpg" alt="CALACATTA ORO" class="w-full h-64 object-cover transition duration-300 hover:scale-105"> | |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300"> | |
| <a href="https://www.classicquartzstone.com/calacatta-oro-porcelain/" class="bg-white text-gray-800 px-4 py-2 rounded-md font-medium hover:bg-yellow-500 transition">View Details</a> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold mb-2">CALACATTA ORO</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Porcelain</span> | |
| <button class="text-yellow-600 hover:text-yellow-700"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 6 --> | |
| <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative"> | |
| <div class="relative overflow-hidden"> | |
| <img src="https://www.classicquartzstone.com/wp-content/uploads/2024/06/CARAVAGGIO-GOLD_-Porcelain-Slabs-rotated-270x270_c.jpg" alt="CARAVAGGIO GOLD" class="w-full h-64 object-cover transition duration-300 hover:scale-105"> | |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300"> | |
| <a href="https://www.classicquartzstone.com/caravaggio-gold-porcelain/" class="bg-white text-gray-800 px-4 py-2 rounded-md font-medium hover:bg-yellow-500 transition">View Details</a> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold mb-2">CARAVAGGIO GOLD</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Porcelain</span> | |
| <button class="text-yellow-600 hover:text-yellow-700"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex justify-center mt-8"> | |
| <nav class="inline-flex rounded-md shadow"> | |
| <a href="#" class="px-4 py-2 border border-gray-300 bg-white text-gray-700 font-medium rounded-l-md hover:bg-gray-50">Previous</a> | |
| <a href="#" class="px-4 py-2 border-t border-b border-gray-300 bg-yellow-500 text-white font-medium">1</a> | |
| <a href="#" class="px-4 py-2 border border-gray-300 bg-white text-gray-700 font-medium hover:bg-gray-50">2</a> | |
| <a href="#" class="px-4 py-2 border border-gray-300 bg-white text-gray-700 font-medium hover:bg-gray-50">3</a> | |
| <a href="#" class="px-4 py-2 border border-gray-300 bg-white text-gray-700 font-medium rounded-r-md hover:bg-gray-50">Next</a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">CLASSIC QUARTZ STONE</h3> | |
| <p class="mb-2">Unit 7, Nimrod Industrial Estate</p> | |
| <p class="mb-2">Reading, RG2 0EB</p> | |
| <p class="mb-4">Phone: (+44) 0118 986 1113</p> | |
| <p>info@classicquartzstone.com</p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">QUICK LINKS</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-yellow-400 transition">Home</a></li> | |
| <li><a href="#" class="hover:text-yellow-400 transition">About Us</a></li> | |
| <li><a href="#" class="hover:text-yellow-400 transition">Our Products</a></li> | |
| <li><a href="#" class="hover:text-yellow-400 transition">Quartz Slab Designs</a></li> | |
| <li><a href="#" class="hover:text-yellow-400 transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">FOLLOW US</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-yellow-500 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-yellow-500 transition"> | |
| <i class="fab fa-google"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-yellow-500 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-400">Subscribe to our newsletter</p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-md focus:outline-none text-gray-800"> | |
| <button class="bg-yellow-500 text-white px-4 py-2 rounded-r-md hover:bg-yellow-600 transition">Subscribe</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2025 CLASSIC QUARTZ STONE | ALL RIGHTS RESERVED</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-yellow-400 transition">BLOG</a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-400 transition">TERMS & CONDITIONS</a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-400 transition">PRIVACY POLICY</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-6 right-6 bg-yellow-500 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center hover:bg-yellow-600 transition opacity-0 invisible"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Toggle filter sections | |
| function toggleFilter(filterId) { | |
| const filter = document.getElementById(`${filterId}-filter`); | |
| const toggle = document.querySelector(`[onclick="toggleFilter('${filterId}')"]`); | |
| filter.classList.toggle('collapsed'); | |
| toggle.classList.toggle('collapsed'); | |
| } | |
| // Initialize all filters as collapsed | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const filters = ['color', 'range', 'style']; | |
| filters.forEach(filterId => { | |
| const filter = document.getElementById(`${filterId}-filter`); | |
| const toggle = document.querySelector(`[onclick="toggleFilter('${filterId}')"]`); | |
| filter.classList.add('collapsed'); | |
| toggle.classList.add('collapsed'); | |
| }); | |
| // Back to top button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', function() { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('opacity-0', 'invisible'); | |
| backToTopButton.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopButton.classList.remove('opacity-100', 'visible'); | |
| backToTopButton.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', function() { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=WizardImon/cstone-category" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |