test / index.html
littlebird13's picture
Add 2 files
32681cf verified
<!DOCTYPE html>
<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>&copy; 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>