Download index.html from Qaspa/test: direct link, hf CLI and curl.
- Browser
- Download file 39.1 kB
-
https://huggingface.co/spaces/Qaspa/test/resolve/main/index.html
- Command line
-
hf download hf://spaces/Qaspa/test/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Qaspa/test/resolve/main/index.html
39.1 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Space Art Qatar | Interior Design & Architecture Company in Doha</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> | |
| .hero-slider { | |
| height: 90vh; | |
| min-height: 500px; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .project-card:hover .project-overlay { | |
| opacity: 1; | |
| } | |
| .client-logo { | |
| filter: grayscale(100%); | |
| transition: all 0.3s ease; | |
| } | |
| .client-logo:hover { | |
| filter: grayscale(0%); | |
| transform: scale(1.05); | |
| } | |
| .mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .mobile-menu.open { | |
| max-height: 1000px; | |
| } | |
| @media (max-width: 768px) { | |
| .hero-slider { | |
| height: 70vh; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Top Bar --> | |
| <div class="bg-gray-900 text-white py-2 px-4"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex space-x-4"> | |
| <a href="tel:+97444883020" class="flex items-center hover:text-yellow-400"> | |
| <i class="fas fa-phone-alt mr-2"></i> +974 4488 3020 | |
| </a> | |
| <a href="mailto:art@spacegroup.com.qa" class="flex items-center hover:text-yellow-400"> | |
| <i class="fas fa-envelope mr-2"></i> art@spacegroup.com.qa | |
| </a> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="https://www.facebook.com/space.art.qa2" class="hover:text-yellow-400"><i class="fab fa-facebook-f"></i></a> | |
| <a href="https://www.instagram.com/space.art.qa" class="hover:text-yellow-400"><i class="fab fa-instagram"></i></a> | |
| <a href="https://wa.me/97477410473?text=hi%20spaceart%20i%20want%20to%20design%20and%20build%20my%20villa" class="hover:text-yellow-400"><i class="fab fa-whatsapp"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center py-4"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <a href="index.php" class="flex items-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/logo/logo_eb11f4c22ff6bf812742392b6349c76e.png" alt="Space Art Qatar" class="h-12"> | |
| </a> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex items-center space-x-8"> | |
| <div class="dropdown relative"> | |
| <button class="flex items-center hover:text-yellow-600 font-medium"> | |
| Departments <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-64"> | |
| <a href="index.php?w=page&id=1" class="block px-4 py-2 hover:bg-gray-100">Space Art Architecture and Interior Design</a> | |
| <a href="index.php?w=page&id=2" class="block px-4 py-2 hover:bg-gray-100">Space ALUM Design & Build (ALUMINUM-GLASS)</a> | |
| <a href="index.php?w=page&id=3" class="block px-4 py-2 hover:bg-gray-100">SPACE WOOD (CARPENTRY)</a> | |
| <a href="index.php?w=page&id=4" class="block px-4 py-2 hover:bg-gray-100">SPACE BUILD (MEP)</a> | |
| <a href="index.php?w=page&id=5" class="block px-4 py-2 hover:bg-gray-100">GREEN SPACE (LANDSCAPE)</a> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="flex items-center hover:text-yellow-600 font-medium"> | |
| Menu <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-48"> | |
| <a href="index.php?w=about" class="block px-4 py-2 hover:bg-gray-100">About us</a> | |
| <a href="index.php?w=cprofile_requests" class="block px-4 py-2 hover:bg-gray-100">Profile</a> | |
| <a href="index.php?w=index_project" class="block px-4 py-2 hover:bg-gray-100">Project</a> | |
| <a href="index.php?w=galerie" class="block px-4 py-2 hover:bg-gray-100">Galerie</a> | |
| <a href="index.php?w=contact" class="block px-4 py-2 hover:bg-gray-100">Contact us</a> | |
| <a href="index.php?w=team" class="block px-4 py-2 hover:bg-gray-100">Staff</a> | |
| </div> | |
| </div> | |
| <a href="index.php?w=cv" class="hover:text-yellow-600 font-medium">CV</a> | |
| <div class="dropdown relative"> | |
| <button class="flex items-center hover:text-yellow-600 font-medium"> | |
| Store <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-48"> | |
| <a href="store.php" class="block px-4 py-2 hover:bg-gray-100">Store</a> | |
| <a href="cart.php" class="block px-4 py-2 hover:bg-gray-100">Cart</a> | |
| <a href="checkout.php" class="block px-4 py-2 hover:bg-gray-100">Checkout</a> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="login.php" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded font-medium">Sign In</a> | |
| <a href="register.php" class="bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded font-medium">Sign Up</a> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="mobile-menu md:hidden bg-white"> | |
| <div class="px-2 pt-2 pb-4 space-y-1"> | |
| <div class="mb-4"> | |
| <button class="flex items-center justify-between w-full px-3 py-2 bg-gray-100 rounded"> | |
| <span>Departments</span> | |
| <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <div class="mt-1 pl-4"> | |
| <a href="index.php?w=page&id=1" class="block px-3 py-2 hover:bg-gray-100">Space Art Architecture</a> | |
| <a href="index.php?w=page&id=2" class="block px-3 py-2 hover:bg-gray-100">Space ALUM Design</a> | |
| <a href="index.php?w=page&id=3" class="block px-3 py-2 hover:bg-gray-100">SPACE WOOD</a> | |
| <a href="index.php?w=page&id=4" class="block px-3 py-2 hover:bg-gray-100">SPACE BUILD</a> | |
| <a href="index.php?w=page&id=5" class="block px-3 py-2 hover:bg-gray-100">GREEN SPACE</a> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <button class="flex items-center justify-between w-full px-3 py-2 bg-gray-100 rounded"> | |
| <span>Menu</span> | |
| <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <div class="mt-1 pl-4"> | |
| <a href="index.php?w=about" class="block px-3 py-2 hover:bg-gray-100">About us</a> | |
| <a href="index.php?w=cprofile_requests" class="block px-3 py-2 hover:bg-gray-100">Profile</a> | |
| <a href="index.php?w=index_project" class="block px-3 py-2 hover:bg-gray-100">Project</a> | |
| <a href="index.php?w=galerie" class="block px-3 py-2 hover:bg-gray-100">Galerie</a> | |
| <a href="index.php?w=contact" class="block px-3 py-2 hover:bg-gray-100">Contact us</a> | |
| <a href="index.php?w=team" class="block px-3 py-2 hover:bg-gray-100">Staff</a> | |
| </div> | |
| </div> | |
| <a href="index.php?w=cv" class="block px-3 py-2 hover:bg-gray-100">CV</a> | |
| <div class="mb-4"> | |
| <button class="flex items-center justify-between w-full px-3 py-2 bg-gray-100 rounded"> | |
| <span>Store</span> | |
| <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <div class="mt-1 pl-4"> | |
| <a href="store.php" class="block px-3 py-2 hover:bg-gray-100">Store</a> | |
| <a href="cart.php" class="block px-3 py-2 hover:bg-gray-100">Cart</a> | |
| <a href="checkout.php" class="block px-3 py-2 hover:bg-gray-100">Checkout</a> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2 mt-4"> | |
| <a href="login.php" class="flex-1 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded text-center">Sign In</a> | |
| <a href="register.php" class="flex-1 bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded text-center">Sign Up</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Slider --> | |
| <div class="hero-slider relative bg-gray-900 overflow-hidden"> | |
| <!-- Slider Images --> | |
| <div class="absolute inset-0 flex transition-transform duration-1000 ease-in-out" id="slider"> | |
| <div class="w-full h-full flex-shrink-0 bg-cover bg-center" style="background-image: url('https://www.spacegroup.com.qa/uploads/sliding/slide_288cb3f2956f8bdb89a47f8edee58840.jpg')"></div> | |
| <div class="w-full h-full flex-shrink-0 bg-cover bg-center" style="background-image: url('https://www.spacegroup.com.qa/uploads/sliding/slide_7ec2b9e95bcdaf775056e649987f9022.jpg')"></div> | |
| <div class="w-full h-full flex-shrink-0 bg-cover bg-center" style="background-image: url('https://www.spacegroup.com.qa/uploads/sliding/slide_a2208611fa99330add14e62a28c97dcb.jpg')"></div> | |
| <div class="w-full h-full flex-shrink-0 bg-cover bg-center" style="background-image: url('https://www.spacegroup.com.qa/uploads/sliding/slide_9aef94db7ae2c94744924f5730ef52a7.jpg')"></div> | |
| <div class="w-full h-full flex-shrink-0 bg-cover bg-center" style="background-image: url('https://www.spacegroup.com.qa/uploads/sliding/slide_af6acb898c15fb7e6a29b41d81c59387.jpg')"></div> | |
| <div class="w-full h-full flex-shrink-0 bg-cover bg-center" style="background-image: url('https://www.spacegroup.com.qa/uploads/sliding/slide_bca466bd02c25cd50b11885d9a60e6d2.jpg')"></div> | |
| </div> | |
| <!-- Overlay --> | |
| <div class="absolute inset-0 bg-black bg-opacity-40"></div> | |
| <!-- Hero Content --> | |
| <div class="relative h-full flex items-center"> | |
| <div class="container mx-auto px-4 text-white"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4">Transform Your Space</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl">Let Us Design Your Dream Home.</p> | |
| <a href="tel:+97455859831" class="bg-yellow-500 hover:bg-yellow-600 text-white px-8 py-3 rounded-lg font-medium inline-flex items-center"> | |
| <i class="fas fa-phone-alt mr-2"></i> Contact Us +974 5585 9831 | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Slider Controls --> | |
| <button id="prev" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-30 hover:bg-opacity-50 text-white p-2 rounded-full"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button id="next" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-30 hover:bg-opacity-50 text-white p-2 rounded-full"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| <!-- Slider Indicators --> | |
| <div class="absolute bottom-8 left-0 right-0 flex justify-center space-x-2"> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="0"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="1"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="2"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="3"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="4"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 slider-indicator" data-index="5"></button> | |
| </div> | |
| </div> | |
| <!-- Featured Projects --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Featured Projects</h2> | |
| <div class="w-20 h-1 bg-yellow-500 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="project-card relative overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://www.spacegroup.com.qa/uploads/sliding/slide_288cb3f2956f8bdb89a47f8edee58840.jpg" alt="Modern Luxury Private Villa -2020" class="w-full h-64 object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transition-opacity duration-300 p-6"> | |
| <h3 class="text-white text-xl font-bold mb-2">Modern Luxury Private Villa -2020</h3> | |
| <p class="text-gray-300 text-center mb-4">Contemporary design with luxurious finishes</p> | |
| <a href="index.php?w=project&album_id=26" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">View Project</a> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card relative overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://www.spacegroup.com.qa/uploads/sliding/slide_7ec2b9e95bcdaf775056e649987f9022.jpg" alt="Modern Villa Where Minimalism Meets Luxury" class="w-full h-64 object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transition-opacity duration-300 p-6"> | |
| <h3 class="text-white text-xl font-bold mb-2">Modern Villa Where Minimalism Meets Luxury</h3> | |
| <p class="text-gray-300 text-center mb-4">Clean lines with premium materials</p> | |
| <a href="index.php?w=project&album_id=25" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">View Project</a> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card relative overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://www.spacegroup.com.qa/uploads/sliding/slide_a2208611fa99330add14e62a28c97dcb.jpg" alt="Contemporary Dual Luxury Villas" class="w-full h-64 object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transition-opacity duration-300 p-6"> | |
| <h3 class="text-white text-xl font-bold mb-2">Contemporary Dual Luxury Villas</h3> | |
| <p class="text-gray-300 text-center mb-4">A Minimalist Architectural Statement</p> | |
| <a href="index.php?w=project&album_id=23" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">View Project</a> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="project-card relative overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://www.spacegroup.com.qa/uploads/sliding/slide_9aef94db7ae2c94744924f5730ef52a7.jpg" alt="CLASSIC VILLA -QATAR" class="w-full h-64 object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transition-opacity duration-300 p-6"> | |
| <h3 class="text-white text-xl font-bold mb-2">CLASSIC VILLA -QATAR</h3> | |
| <p class="text-gray-300 text-center mb-4">Timeless elegance with modern comforts</p> | |
| <a href="index.php?w=project&album_id=21" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">View Project</a> | |
| </div> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="project-card relative overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://www.spacegroup.com.qa/uploads/sliding/slide_af6acb898c15fb7e6a29b41d81c59387.jpg" alt="Modern Sleek Villa" class="w-full h-64 object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transition-opacity duration-300 p-6"> | |
| <h3 class="text-white text-xl font-bold mb-2">Modern Sleek Villa</h3> | |
| <p class="text-gray-300 text-center mb-4">Sleek design with functional spaces</p> | |
| <a href="index.php?w=project&album_id=17" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">View Project</a> | |
| </div> | |
| </div> | |
| <!-- Project 6 --> | |
| <div class="project-card relative overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://www.spacegroup.com.qa/uploads/sliding/slide_bca466bd02c25cd50b11885d9a60e6d2.jpg" alt="Design that defines you" class="w-full h-64 object-cover"> | |
| <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transition-opacity duration-300 p-6"> | |
| <h3 class="text-white text-xl font-bold mb-2">Design that defines you</h3> | |
| <p class="text-gray-300 text-center mb-4">Personalized spaces reflecting your style</p> | |
| <a href="#" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="index.php?w=index_project" class="inline-block bg-gray-800 hover:bg-gray-900 text-white px-8 py-3 rounded-lg font-medium"> | |
| View All Projects | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Video Showcase --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Project Showcase</h2> | |
| <div class="w-20 h-1 bg-yellow-500 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Video 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="relative pb-[56.25%]"> <!-- 16:9 Aspect Ratio --> | |
| <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/aeZYR_hrAFY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold mb-2">ICONIC MODERN VILLA 002 Gewan Island QATAR</h3> | |
| </div> | |
| </div> | |
| <!-- Video 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="relative pb-[56.25%]"> | |
| <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/u_Xi-AbplX0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold mb-2">Modern Villa</h3> | |
| </div> | |
| </div> | |
| <!-- Video 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="relative pb-[56.25%]"> | |
| <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/ew5qbrg2XBg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold mb-2">MODERN VILLA 001</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Our Clients --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Clients</h2> | |
| <div class="w-20 h-1 bg-yellow-500 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8"> | |
| <div class="flex justify-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/clients/client_a34c129bf8001b13fd541270cd327d11.jpg" alt="nabina group" class="client-logo h-20 object-contain"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/clients/client_ba4360eef1f41c05adeea883c197cf7a.jpg" alt="Qatar international law firm" class="client-logo h-20 object-contain"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/clients/client_ce420e26b582ef6bc8be359dcf915a75.jpg" alt="Doha Bank" class="client-logo h-20 object-contain"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/clients/client_8f8aa7aa0fceb6b9fe288d0c7da6a7c0.jpg" alt="Ladies salon Ten20 diner" class="client-logo h-20 object-contain"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/clients/client_211c8b5cca75da5000ecbd5f8591abe9.jpg" alt="office Al Attiya & Partners" class="client-logo h-20 object-contain"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/clients/client_6f75d7abcaa679f97245183e7f827be2.jpg" alt="Falafel Land" class="client-logo h-20 object-contain"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/clients/client_1f35c74eb4e88119616e16b374dfcf84.jpg" alt="tylos pharmacy" class="client-logo h-20 object-contain"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/clients/client_affa6762da547a2b1d059ff413e24a74.jpg" alt="MOCOZY Showroom" class="client-logo h-20 object-contain"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/clients/client_5f853e0256be00042e07e2768d3a7e32.jpg" alt="ACTA" class="client-logo h-20 object-contain"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Our Departments --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Departments</h2> | |
| <div class="w-20 h-1 bg-yellow-500 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 text-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/logo/logopage_1728541058.png" alt="Space Art Architecture and Interior Design" class="h-16 mx-auto mb-4"> | |
| <h3 class="text-lg font-semibold mb-2">Space Art Architecture and Interior Design</h3> | |
| <a href="index.php?w=page&id=1" class="text-yellow-600 hover:text-yellow-700 font-medium">Learn More</a> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 text-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/logo/logopage_1728541168.png" alt="Space ALUM Design & Build" class="h-16 mx-auto mb-4"> | |
| <h3 class="text-lg font-semibold mb-2">Space ALUM Design & Build (ALUMINUM-GLASS)</h3> | |
| <a href="index.php?w=page&id=2" class="text-yellow-600 hover:text-yellow-700 font-medium">Learn More</a> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 text-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/logo/logopage_1728541241.png" alt="SPACE WOOD" class="h-16 mx-auto mb-4"> | |
| <h3 class="text-lg font-semibold mb-2">SPACE WOOD (CARPENTRY)</h3> | |
| <a href="index.php?w=page&id=3" class="text-yellow-600 hover:text-yellow-700 font-medium">Learn More</a> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 text-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/logo/logopage_1728541388.png" alt="SPACE BUILD" class="h-16 mx-auto mb-4"> | |
| <h3 class="text-lg font-semibold mb-2">SPACE BUILD (MEP)</h3> | |
| <a href="index.php?w=page&id=4" class="text-yellow-600 hover:text-yellow-700 font-medium">Learn More</a> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 text-center"> | |
| <img src="https://www.spacegroup.com.qa/uploads/logo/logopage_1728541602.png" alt="GREEN SPACE" class="h-16 mx-auto mb-4"> | |
| <h3 class="text-lg font-semibold mb-2">GREEN SPACE (LANDSCAPE)</h3> | |
| <a href="index.php?w=page&id=5" class="text-yellow-600 hover:text-yellow-700 font-medium">Learn More</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Us --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">About Space Art Qatar</h2> | |
| <p class="text-gray-600 mb-6">SPACE <strong>ART</strong> is a premier design and build company specializing in architecture, interior design, and construction services in Qatar. We combine creativity with technical expertise to deliver exceptional spaces that inspire.</p> | |
| <p class="text-gray-600 mb-6">We <strong>Design</strong> and <strong>Build</strong> projects across various sectors including:</p> | |
| <ul class="grid grid-cols-2 gap-4 mb-8"> | |
| <li class="flex items-center"><i class="fas fa-check text-yellow-500 mr-2"></i> Architecture</li> | |
| <li class="flex items-center"><i class="fas fa-check text-yellow-500 mr-2"></i> Interior Design</li> | |
| <li class="flex items-center"><i class="fas fa-check text-yellow-500 mr-2"></i> Landscape</li> | |
| <li class="flex items-center"><i class="fas fa-check text-yellow-500 mr-2"></i> M.E.P Services</li> | |
| </ul> | |
| <a href="index.php?w=about" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-white px-6 py-3 rounded-lg font-medium"> | |
| Learn More About Us | |
| </a> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="relative rounded-lg overflow-hidden shadow-xl"> | |
| <img src="https://www.spacegroup.com.qa/uploads/sliding/slide_288cb3f2956f8bdb89a47f8edee58840.jpg" alt="Our Team" class="w-full h-auto"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-0 left-0 p-6 text-white"> | |
| <h3 class="text-xl font-bold mb-2">Our Professional Team</h3> | |
| <p class="mb-4">Dedicated experts delivering excellence in every project</p> | |
| <a href="index.php?w=team" class="inline-block bg-white hover:bg-gray-100 text-gray-800 px-4 py-2 rounded font-medium"> | |
| Meet Our Team | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="py-16 bg-gray-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/3 mb-8 lg:mb-0 lg:pr-12"> | |
| <img src="https://www.spacegroup.com.qa/uploads/logo/logo_eb11f4c22ff6bf812742392b6349c76e.png" alt="Space Art Qatar" class="h-16 mb-6"> | |
| <p class="mb-6">SPACE <strong class="text-yellow-400">ART</strong> is a premier design and build company specializing in architecture, interior design, and construction services in Qatar.</p> | |
| <div class="flex space-x-4"> | |
| <a href="https://www.facebook.com/space.art.qa2" class="text-white hover:text-yellow-400"><i class="fab fa-facebook-f text-xl"></i></a> | |
| <a href="https://www.instagram.com/space.art.qa" class="text-white hover:text-yellow-400"><i class="fab fa-instagram text-xl"></i></a> | |
| <a href="https://wa.me/97477410473?text=hi%20spaceart%20i%20want%20to%20design%20and%20build%20my%20villa" class="text-white hover:text-yellow-400"><i class="fab fa-whatsapp text-xl"></i></a> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/3 mb-8 lg:mb-0 lg:px-6"> | |
| <h3 class="text-xl font-bold mb-6 border-b border-yellow-400 pb-2">Contact Info</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-yellow-400 mt-1 mr-3"></i> | |
| <div> | |
| <p>P.O. Box 20102, Ahmed Bin Ali Street,</p> | |
| <p>Al-Ajlan Building (2nd floor), Bin Omran,</p> | |
| <p>Doha, Qatar</p> | |
| <a href="https://www.google.com/maps/embed/v1/place?key=AIzaSyCNveGQ9bfpKFwWzQLLftrR9hNiHwdqQG8&q=Space%20Art%20Interior%20Design%20qatar%20doha" class="text-yellow-400 hover:underline">View on Map</a> | |
| </div> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-yellow-400 mr-3"></i> | |
| <a href="mailto:art@spacegroup.com.qa" class="hover:text-yellow-400">art@spacegroup.com.qa</a> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt text-yellow-400 mr-3"></i> | |
| <div> | |
| <p>+974 5585 9831</p> | |
| <p>+974 4488 3020</p> | |
| <p>+974 4488 3070</p> | |
| </div> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-clock text-yellow-400 mr-3"></i> | |
| <div> | |
| <p>Sat–Wed: 8:00 am – 5:00 pm</p> | |
| <p>Thursday: 8:00 am – 1:00 pm</p> | |
| <p>Friday: Closed</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="lg:w-1/3 lg:pl-6"> | |
| <h3 class="text-xl font-bold mb-6 border-b border-yellow-400 pb-2">Quick Links</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <a href="index.php?w=contact" class="hover:text-yellow-400">Contact Us</a> | |
| <a href="index.php" class="hover:text-yellow-400">Home</a> | |
| <a href="index.php?w=about" class="hover:text-yellow-400">About</a> | |
| <a href="index.php?w=team" class="hover:text-yellow-400">Staff</a> | |
| <a href="index.php?w=cv" class="hover:text-yellow-400">Career</a> | |
| <a href="index.php?w=galerie" class="hover:text-yellow-400">Gallery</a> | |
| <a href="index.php?w=index_project" class="hover:text-yellow-400">Projects</a> | |
| <a href="store.php" class="hover:text-yellow-400">Store</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p>© 2025 Space Art Qatar | Interior Design & Architecture Company in Doha. All rights reserved.</p> | |
| </div> | |
| <div> | |
| <a href="#top" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded inline-flex items-center"> | |
| <i class="fas fa-arrow-up mr-2"></i> Back to Top | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile Menu Toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('open'); | |
| }); | |
| // Image Slider | |
| let currentSlide = 0; | |
| const slides = document.querySelectorAll('#slider > div'); | |
| const totalSlides = slides.length; | |
| const slider = document.getElementById('slider'); | |
| const indicators = document.querySelectorAll('.slider-indicator'); | |
| function showSlide(index) { | |
| if (index >= totalSlides) { | |
| currentSlide = 0; | |
| } else if (index < 0) { | |
| currentSlide = totalSlides - 1; | |
| } else { | |
| currentSlide = index; | |
| } | |
| const offset = -currentSlide * 100; | |
| slider.style.transform = `translateX(${offset}%)`; | |
| // Update indicators | |
| indicators.forEach((indicator, i) => { | |
| if (i === currentSlide) { | |
| indicator.classList.add('bg-opacity-100'); | |
| indicator.classList.remove('bg-opacity-50'); | |
| } else { | |
| indicator.classList.remove('bg-opacity-100'); | |
| indicator.classList.add('bg-opacity-50'); | |
| } | |
| }); | |
| } | |
| // Next/previous controls | |
| document.getElementById('next').addEventListener('click', () => { | |
| showSlide(currentSlide + 1); | |
| }); | |
| document.getElementById('prev').addEventListener('click', () => { | |
| showSlide(currentSlide - 1); | |
| }); | |
| // Indicator controls | |
| indicators.forEach((indicator, i) => { | |
| indicator.addEventListener('click', () => { | |
| showSlide(i); | |
| }); | |
| }); | |
| // Auto slide | |
| setInterval(() => { | |
| showSlide(currentSlide + 1); | |
| }, 5000); | |
| </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=Qaspa/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |