Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Creative Studio | Welcome</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> | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .blob { | |
| filter: blur(60px); | |
| opacity: 0.7; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white overflow-x-hidden"> | |
| <!-- Blob background elements --> | |
| <div class="fixed -left-40 -top-40 w-80 h-80 rounded-full bg-purple-600 blob"></div> | |
| <div class="fixed -right-40 bottom-20 w-96 h-96 rounded-full bg-indigo-600 blob"></div> | |
| <!-- Navigation --> | |
| <nav class="relative z-10 py-6 px-6 lg:px-16 flex justify-between items-center"> | |
| <div class="text-2xl font-bold gradient-text">CreativeStudio</div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-purple-400 transition">Home</a> | |
| <a href="#" class="hover:text-purple-400 transition">Works</a> | |
| <a href="#" class="hover:text-purple-400 transition">Services</a> | |
| <a href="#" class="hover:text-purple-400 transition">About</a> | |
| <a href="#" class="hover:text-purple-400 transition">Contact</a> | |
| </div> | |
| <button class="md:hidden text-2xl" id="menu-toggle"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative z-10 px-6 lg:px-16 py-20 md:py-32"> | |
| <div class="max-w-5xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6"> | |
| We craft <span class="gradient-text">digital experiences</span> that inspire | |
| </h1> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-12"> | |
| Our studio combines creativity and technology to build beautiful, functional digital products that people love. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full font-semibold hover:shadow-lg hover:shadow-purple-500/20 transition"> | |
| Get Started | |
| </button> | |
| <button class="px-8 py-4 border border-gray-700 rounded-full font-semibold hover:bg-gray-800 transition"> | |
| View Portfolio | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="relative z-10 px-6 lg:px-16 py-16 md:py-24 bg-gray-800/30 backdrop-blur-lg rounded-3xl mx-4 md:mx-16 my-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16"> | |
| What we offer | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gray-800/50 p-8 rounded-2xl hover:bg-gray-800/70 transition transform hover:-translate-y-2"> | |
| <div class="w-16 h-16 rounded-xl bg-indigo-600 flex items-center justify-center mb-6"> | |
| <i class="fas fa-paint-brush text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">UI/UX Design</h3> | |
| <p class="text-gray-300"> | |
| Beautiful, intuitive interfaces designed for seamless user experiences across all devices. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gray-800/50 p-8 rounded-2xl hover:bg-gray-800/70 transition transform hover:-translate-y-2"> | |
| <div class="w-16 h-16 rounded-xl bg-purple-600 flex items-center justify-center mb-6"> | |
| <i class="fas fa-code text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Web Development</h3> | |
| <p class="text-gray-300"> | |
| Custom web applications built with modern technologies for performance and scalability. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gray-800/50 p-8 rounded-2xl hover:bg-gray-800/70 transition transform hover:-translate-y-2"> | |
| <div class="w-16 h-16 rounded-xl bg-pink-600 flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Digital Strategy</h3> | |
| <p class="text-gray-300"> | |
| Data-driven strategies to grow your online presence and engage your target audience. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Showcase Section --> | |
| <section class="relative z-10 px-6 lg:px-16 py-16 md:py-24"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-4"> | |
| Our Recent Work | |
| </h2> | |
| <p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto"> | |
| Here's a selection of our favorite projects we've completed recently. | |
| </p> | |
| <div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto" id="projects-container"> | |
| <!-- Projects will be added by JavaScript --> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="relative z-10 px-6 lg:px-16 py-16 md:py-24 bg-gray-800/30 backdrop-blur-lg rounded-3xl mx-4 md:mx-16 my-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16"> | |
| What our clients say | |
| </h2> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="relative p-8 md:p-12 bg-gray-800/50 rounded-3xl text-center"> | |
| <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 w-16 h-16 rounded-full overflow-hidden border-4 border-purple-600"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <p class="text-xl italic mb-6"> | |
| "Working with CreativeStudio transformed our online presence. Their team delivered beyond our expectations with creative solutions and attention to detail." | |
| </p> | |
| <h4 class="font-bold text-lg mb-1">Sarah Johnson</h4> | |
| <p class="text-gray-400 text-sm">CEO, TechSolutions</p> | |
| <div class="flex justify-center mt-4 space-x-1"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="relative z-10 px-6 lg:px-16 py-20 md:py-32 text-center"> | |
| <div class="max-w-4xl mx-auto bg-gradient-to-r from-indigo-900/50 to-purple-900/50 p-16 rounded-3xl"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to bring your ideas to life?</h2> | |
| <p class="text-xl text-gray-300 mb-8">Let's create something amazing together.</p> | |
| <button class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full font-semibold hover:shadow-lg hover:shadow-purple-500/20 transition"> | |
| Start Your Project | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="relative z-10 px-6 lg:px-16 py-12 border-t border-gray-800"> | |
| <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="text-2xl font-bold gradient-text mb-4">CreativeStudio</div> | |
| <p class="text-gray-400">Creating digital experiences that captivate and convert.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Services</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Portfolio</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Services</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">UI/UX Design</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Web Development</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">App Development</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Branding</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 transition"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-600 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-500 transition"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-6xl mx-auto border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> | |
| <p>© 2023 CreativeStudio. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <!-- Floating elements --> | |
| <div class="fixed bottom-6 right-6 w-16 h-16 rounded-full bg-indigo-600 flex items-center justify-center shadow-xl hover:shadow-2xl transition floating cursor-pointer" id="chat-button"> | |
| <i class="fas fa-comment-dots text-2xl"></i> | |
| </div> | |
| <!-- Chat window (hidden by default) --> | |
| <div id="chat-window" class="fixed bottom-24 right-6 w-80 h-96 bg-gray-800 rounded-2xl shadow-2xl hidden flex flex-col border border-gray-700 overflow-hidden"> | |
| <div class="bg-gray-900 px-4 py-3 flex justify-between items-center border-b border-gray-700"> | |
| <h3 class="font-semibold">Live Chat</h3> | |
| <button id="close-chat" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 p-4 overflow-y-auto" id="chat-messages"> | |
| <div class="mb-4"> | |
| <div class="bg-gray-700 rounded-xl p-3 inline-block max-w-xs"> | |
| <p>Hello! How can we help you today?</p> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">CreativeStudio Support</p> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-700"> | |
| <div class="flex items-center bg-gray-700 rounded-xl px-4 py-2"> | |
| <input type="text" placeholder="Type a message..." class="flex-1 bg-transparent outline-none"> | |
| <button class="ml-2 text-purple-400"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu (hidden by default) --> | |
| <div id="mobile-menu" class="fixed inset-0 bg-gray-900/90 backdrop-blur-md z-50 flex items-center justify-center hidden"> | |
| <div class="text-center"> | |
| <button id="close-menu" class="absolute top-6 right-6 text-2xl"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <ul class="space-y-8 text-2xl"> | |
| <li><a href="#" class="hover:text-purple-400 transition">Home</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition">Works</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition">Services</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition">About</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <script> | |
| // Project data | |
| const projects = [ | |
| { | |
| title: "E-commerce Platform", | |
| description: "A modern e-commerce solution with seamless checkout experience", | |
| tags: ["UI/UX", "Web Development"], | |
| color: "bg-indigo-600" | |
| }, | |
| { | |
| title: "Mobile Banking App", | |
| description: "Secure and intuitive banking application for iOS and Android", | |
| tags: ["App Design", "Development"], | |
| color: "bg-purple-600" | |
| }, | |
| { | |
| title: "Corporate Website", | |
| description: "Responsive website with CMS for easy content management", | |
| tags: ["Web Design", "CMS"], | |
| color: "bg-pink-600" | |
| }, | |
| { | |
| title: "SaaS Dashboard", | |
| description: "Analytics dashboard with real-time data visualization", | |
| tags: ["UI/UX", "Data Visualization"], | |
| color: "bg-blue-600" | |
| } | |
| ]; | |
| // Load projects | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const projectsContainer = document.getElementById('projects-container'); | |
| projects.forEach(project => { | |
| const projectEl = document.createElement('div'); | |
| projectEl.className = 'flex flex-col rounded-2xl overflow-hidden group cursor-pointer'; | |
| projectEl.innerHTML = ` | |
| <div class="aspect-video ${project.color} flex items-center justify-center text-5xl text-white/30"> | |
| <i class="fas fa-image group-hover:scale-110 transition-transform"></i> | |
| </div> | |
| <div class="p-6 bg-gray-800/50 group-hover:bg-gray-800 transition"> | |
| <h3 class="text-xl font-bold mb-2">${project.title}</h3> | |
| <p class="text-gray-300 mb-4">${project.description}</p> | |
| <div class="flex flex-wrap gap-2"> | |
| ${project.tags.map(tag => `<span class="text-xs px-3 py-1 rounded-full bg-gray-700">${tag}</span>`).join('')} | |
| </div> | |
| </div> | |
| `; | |
| projectsContainer.appendChild(projectEl); | |
| }); | |
| // Chat toggle | |
| const chatButton = document.getElementById('chat-button'); | |
| const chatWindow = document.getElementById('chat-window'); | |
| const closeChat = document.getElementById('close-chat'); | |
| chatButton.addEventListener('click', function() { | |
| chatWindow.classList.toggle('hidden'); | |
| }); | |
| closeChat.addEventListener('click', function() { | |
| chatWindow.classList.add('hidden'); | |
| }); | |
| // Mobile menu toggle | |
| const menuToggle = document.getElementById('menu-toggle'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const closeMenu = document.getElementById('close-menu'); | |
| menuToggle.addEventListener('click', function() { | |
| mobileMenu.classList.remove('hidden'); | |
| }); | |
| closeMenu.addEventListener('click', function() { | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| }); | |
| </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=littlebird13/test" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |