workingg / index.html
Jae0009's picture
Add 3 files
1853950 verified
Raw
History Blame Contribute Delete
28.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GODSPOWER | Luxury Furniture & Upholstery</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>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
body {
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
}
.logo-text {
font-family: 'Playfair Display', serif;
}
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
}
.furniture-card:hover .furniture-overlay {
opacity: 1;
transform: translateY(0);
}
.furniture-overlay {
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
}
.custom-shape-divider-bottom-1689338506 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1689338506 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 150px;
}
.custom-shape-divider-bottom-1689338506 .shape-fill {
fill: #FFFFFF;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-md fixed w-full z-10">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="logo-text text-2xl font-bold text-gray-800">
<span class="text-amber-700">GODS</span><span class="text-gray-900">POWER</span>
</div>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#home" class="text-gray-800 hover:text-amber-600 transition">Home</a>
<a href="#products" class="text-gray-800 hover:text-amber-600 transition">Products</a>
<a href="#services" class="text-gray-800 hover:text-amber-600 transition">Services</a>
<a href="#about" class="text-gray-800 hover:text-amber-600 transition">About</a>
<a href="#contact" class="text-gray-800 hover:text-amber-600 transition">Contact</a>
</div>
<div class="md:hidden">
<button class="text-gray-800 focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero h-screen flex items-center justify-center relative text-white">
<div class="container mx-auto px-6 text-center">
<h1 class="logo-text text-5xl md:text-7xl font-bold mb-6">
<span class="text-amber-400">GODS</span><span>POWER</span>
</h1>
<p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Crafting timeless furniture with divine inspiration and impeccable craftsmanship</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#products" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-full font-medium transition">Our Collection</a>
<a href="#contact" class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 text-white px-8 py-3 rounded-full font-medium transition">Custom Order</a>
</div>
</div>
<div class="absolute bottom-0 left-0 w-full">
<div class="custom-shape-divider-bottom-1689338506">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</div>
</section>
<!-- Featured Products -->
<section id="products" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="logo-text text-4xl font-bold text-gray-800 mb-4">Our Signature Collection</h2>
<div class="w-24 h-1 bg-amber-600 mx-auto"></div>
<p class="text-gray-600 max-w-2xl mx-auto mt-4">Handcrafted pieces that blend luxury with comfort</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Product 1 -->
<div class="furniture-card bg-gray-100 rounded-lg overflow-hidden shadow-lg relative">
<img src="https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Luxury Sofa" class="w-full h-80 object-cover">
<div class="furniture-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center p-6">
<h3 class="text-white text-2xl font-bold mb-2">Celestial Sofa</h3>
<p class="text-gray-300 text-center mb-4">Hand-stitched Italian leather with walnut frame</p>
<span class="text-amber-400 text-xl font-bold">$2,499</span>
<button class="mt-4 bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition">View Details</button>
</div>
</div>
<!-- Product 2 -->
<div class="furniture-card bg-gray-100 rounded-lg overflow-hidden shadow-lg relative">
<img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Dining Set" class="w-full h-80 object-cover">
<div class="furniture-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center p-6">
<h3 class="text-white text-2xl font-bold mb-2">Divine Dining Set</h3>
<p class="text-gray-300 text-center mb-4">Solid oak table with velvet upholstered chairs</p>
<span class="text-amber-400 text-xl font-bold">$3,299</span>
<button class="mt-4 bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition">View Details</button>
</div>
</div>
<!-- Product 3 -->
<div class="furniture-card bg-gray-100 rounded-lg overflow-hidden shadow-lg relative">
<img src="https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Bedroom Set" class="w-full h-80 object-cover">
<div class="furniture-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center p-6">
<h3 class="text-white text-2xl font-bold mb-2">Heavenly Bed</h3>
<p class="text-gray-300 text-center mb-4">King-size bed with premium memory foam mattress</p>
<span class="text-amber-400 text-xl font-bold">$4,199</span>
<button class="mt-4 bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition">View Details</button>
</div>
</div>
</div>
<div class="text-center mt-16">
<a href="#" class="inline-block border-2 border-amber-600 text-amber-600 hover:bg-amber-600 hover:text-white px-8 py-3 rounded-full font-medium transition">View All Collections</a>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="logo-text text-4xl font-bold text-gray-800 mb-4">Our Divine Services</h2>
<div class="w-24 h-1 bg-amber-600 mx-auto"></div>
<p class="text-gray-600 max-w-2xl mx-auto mt-4">Beyond furniture, we offer complete solutions for your living spaces</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-xl transition">
<div class="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-ruler-combined text-amber-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Custom Design</h3>
<p class="text-gray-600">Tailored furniture designed specifically for your space and style preferences.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-xl transition">
<div class="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-couch text-amber-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Upholstery Services</h3>
<p class="text-gray-600">Revitalize your existing furniture with premium fabrics and expert craftsmanship.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-xl transition">
<div class="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-home text-amber-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Interior Consultation</h3>
<p class="text-gray-600">Expert advice to create harmonious living spaces that reflect your personality.</p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
<img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Workshop" class="rounded-lg shadow-xl w-full">
</div>
<div class="md:w-1/2">
<h2 class="logo-text text-4xl font-bold text-gray-800 mb-6">The GODSPOWER Difference</h2>
<p class="text-gray-600 mb-6">Founded with a vision to create furniture that stands the test of time, GODSPOWER combines traditional craftsmanship with contemporary design. Each piece is meticulously crafted by our team of skilled artisans who take pride in their work.</p>
<p class="text-gray-600 mb-8">We source only the finest materials from sustainable suppliers, ensuring that our furniture is not only beautiful but also environmentally responsible. Our commitment to quality is evident in every stitch, joint, and finish.</p>
<div class="flex flex-col sm:flex-row gap-4">
<div class="flex items-center mb-4 sm:mb-0">
<div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-medal text-amber-600"></i>
</div>
<div>
<h4 class="font-bold text-gray-800">15 Years Experience</h4>
<p class="text-sm text-gray-600">Master craftsmanship</p>
</div>
</div>
<div class="flex items-center">
<div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-leaf text-amber-600"></i>
</div>
<div>
<h4 class="font-bold text-gray-800">Eco-Friendly</h4>
<p class="text-sm text-gray-600">Sustainable materials</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 bg-amber-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="logo-text text-4xl font-bold text-gray-800 mb-4">Divine Experiences</h2>
<div class="w-24 h-1 bg-amber-600 mx-auto"></div>
<p class="text-gray-600 max-w-2xl mx-auto mt-4">What our clients say about our creations</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<div class="text-amber-400 mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="text-gray-600 mb-6">"The custom dining set from GODSPOWER transformed our home. The craftsmanship is impeccable and the design consultation was invaluable."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Sarah J.</h4>
<p class="text-sm text-gray-600">Homeowner</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<div class="text-amber-400 mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="text-gray-600 mb-6">"Our living room furniture exceeded all expectations. The attention to detail and quality of materials is unmatched in the industry."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Michael T.</h4>
<p class="text-sm text-gray-600">Interior Designer</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<div class="text-amber-400 mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="text-gray-600 mb-6">"The upholstery service brought new life to our antique chairs. GODSPOWER preserved their character while making them functional for modern use."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Elizabeth K." class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Elizabeth K.</h4>
<p class="text-sm text-gray-600">Antique Collector</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-gray-800 text-white">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
<h2 class="logo-text text-4xl font-bold mb-6">Let's Create Together</h2>
<p class="text-gray-300 mb-8">Ready to bring your vision to life? Contact us for a consultation or visit our showroom to experience our craftsmanship firsthand.</p>
<div class="mb-8">
<div class="flex items-start mb-6">
<div class="text-amber-400 mr-4 mt-1">
<i class="fas fa-map-marker-alt text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Showroom</h4>
<p class="text-gray-300">123 Divine Avenue, Furniture District</p>
</div>
</div>
<div class="flex items-start mb-6">
<div class="text-amber-400 mr-4 mt-1">
<i class="fas fa-phone-alt text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Call Us</h4>
<p class="text-gray-300">+1 (555) 123-4567</p>
</div>
</div>
<div class="flex items-start">
<div class="text-amber-400 mr-4 mt-1">
<i class="fas fa-envelope text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Email</h4>
<p class="text-gray-300">contact@godspowerfurniture.com</p>
</div>
</div>
</div>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 bg-gray-700 hover:bg-amber-600 rounded-full flex items-center justify-center transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-700 hover:bg-amber-600 rounded-full flex items-center justify-center transition">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-700 hover:bg-amber-600 rounded-full flex items-center justify-center transition">
<i class="fab fa-pinterest-p"></i>
</a>
</div>
</div>
<div class="md:w-1/2">
<form class="bg-gray-900 p-8 rounded-lg shadow-lg">
<div class="mb-6">
<label for="name" class="block text-gray-300 mb-2">Your Name</label>
<input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
</div>
<div class="mb-6">
<label for="email" class="block text-gray-300 mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
</div>
<div class="mb-6">
<label for="phone" class="block text-gray-300 mb-2">Phone Number</label>
<input type="tel" id="phone" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
</div>
<div class="mb-6">
<label for="message" class="block text-gray-300 mb-2">How Can We Help?</label>
<textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
</div>
<button type="submit" class="w-full bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between">
<div class="mb-8 md:mb-0">
<div class="logo-text text-2xl font-bold text-white mb-4">
<span class="text-amber-600">GODS</span><span>POWER</span>
</div>
<p class="max-w-xs">Divine furniture craftsmanship since 2008</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-8">
<div>
<h4 class="text-white font-bold mb-4">Explore</h4>
<ul class="space-y-2">
<li><a href="#home" class="hover:text-amber-400 transition">Home</a></li>
<li><a href="#products" class="hover:text-amber-400 transition">Products</a></li>
<li><a href="#services" class="hover:text-amber-400 transition">Services</a></li>
<li><a href="#about" class="hover:text-amber-400 transition">About</a></li>
<li><a href="#contact" class="hover:text-amber-400 transition">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Support</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-amber-400 transition">FAQ</a></li>
<li><a href="#" class="hover:text-amber-400 transition">Shipping</a></li>
<li><a href="#" class="hover:text-amber-400 transition">Returns</a></li>
<li><a href="#" class="hover:text-amber-400 transition">Care Guide</a></li>
<li><a href="#" class="hover:text-amber-400 transition">Warranty</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Legal</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-amber-400 transition">Terms</a></li>
<li><a href="#" class="hover:text-amber-400 transition">Privacy</a></li>
<li><a href="#" class="hover:text-amber-400 transition">Cookies</a></li>
</ul>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p>© 2023 GODSPOWER Furniture. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="hover:text-amber-400 transition"><i class="fab fa-cc-visa text-2xl"></i></a>
<a href="#" class="hover:text-amber-400 transition"><i class="fab fa-cc-mastercard text-2xl"></i></a>
<a href="#" class="hover:text-amber-400 transition"><i class="fab fa-cc-amex text-2xl"></i></a>
<a href="#" class="hover:text-amber-400 transition"><i class="fab fa-cc-paypal text-2xl"></i></a>
</div>
</div>
</div>
</footer>
<script>
// Simple JavaScript for mobile menu toggle (can be expanded)
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.querySelector('.md\\:hidden button');
const mobileMenu = document.querySelector('.md\\:hidden + .md\\:flex');
mobileMenuButton.addEventListener('click', function() {
// This would need to be expanded to actually show/hide a mobile menu
alert('Mobile menu would open here. In a full implementation, this would show/hide the navigation links.');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
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=Jae0009/workingg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>