Spaces:
Running
Running
File size: 9,853 Bytes
b200f2b ce6d57b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PixelPulse Playground</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
.gradient-text {
background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
#vanta-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.7;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen overflow-x-hidden">
<div id="vanta-bg"></div>
<nav class="bg-white/80 backdrop-blur-md shadow-sm fixed w-full z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center">
<span class="text-xl font-bold gradient-text">PixelPulse</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#" class="text-gray-700 hover:text-indigo-600 transition-colors font-medium">Home</a>
<a href="#" class="text-gray-700 hover:text-indigo-600 transition-colors font-medium">Features</a>
<a href="#" class="text-gray-700 hover:text-indigo-600 transition-colors font-medium">Gallery</a>
<a href="#" class="text-gray-700 hover:text-indigo-600 transition-colors font-medium">Contact</a>
</div>
<button class="md:hidden text-gray-700 focus:outline-none">
<i data-feather="menu"></i>
</button>
</div>
</div>
</nav>
<main class="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<section class="py-12">
<div class="text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">
<span class="gradient-text">Creative</span> Digital Experiences
</h1>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
Crafting immersive web experiences that captivate and engage your audience with cutting-edge design.
</p>
<div class="mt-8 flex justify-center space-x-4">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition-colors shadow-lg">
Get Started
</button>
<button class="border border-gray-300 hover:bg-gray-50 text-gray-700 px-6 py-3 rounded-lg font-medium transition-colors">
Learn More
</button>
</div>
</div>
</section>
<section class="py-12">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="code" class="text-indigo-600"></i>
</div>
<h3 class="text-xl font-bold mb-2">Modern Development</h3>
<p class="text-gray-600">Clean, semantic code that performs flawlessly across all devices and browsers.</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="eye" class="text-purple-600"></i>
</div>
<h3 class="text-xl font-bold mb-2">Stunning Visuals</h3>
<p class="text-gray-600">Beautiful interfaces that create emotional connections with your users.</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="zap" class="text-pink-600"></i>
</div>
<h3 class="text-xl font-bold mb-2">Lightning Fast</h3>
<p class="text-gray-600">Optimized performance that keeps your visitors engaged and happy.</p>
</div>
</div>
</section>
<section class="py-12">
<div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-8 text-white">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-4">Ready to transform your digital presence?</h2>
<p class="text-indigo-100 mb-6">Let's create something amazing together. Our team is ready to bring your vision to life.</p>
<button class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition-colors shadow-lg">
Schedule a Call
</button>
</div>
</div>
</section>
</main>
<footer class="bg-gray-900 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">PixelPulse</h3>
<p class="text-gray-400">Crafting digital experiences that inspire and engage.</p>
</div>
<div>
<h4 class="font-bold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Home</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Services</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">Services</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Web Design</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Development</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">UI/UX</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Branding</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i data-feather="instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i data-feather="linkedin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i data-feather="github"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 PixelPulse Playground. All rights reserved.</p>
</div>
</div>
</footer>
<script>
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3a86ff,
backgroundColor: 0xf8fafc,
size: 0.8
});
</script>
<script>
feather.replace();
// Simple animation for cards on scroll
document.addEventListener('DOMContentLoaded', () => {
const cards = document.querySelectorAll('.card-hover');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
cards.forEach((card, index) => {
card.style.opacity = 0;
card.style.transform = 'translateY(20px)';
card.style.transition = `all 0.5s ease ${index * 0.1}s`;
observer.observe(card);
});
});
</script>
</body>
</html>
|