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> |