Spaces:
Running
Running
File size: 6,494 Bytes
c8fb95b 22e41b2 | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Whisperer Explainer</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
<style>
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.code-block {
background: rgba(30, 41, 59, 0.8);
backdrop-filter: blur(10px);
}
</style>
</head>
<body class="min-h-screen bg-slate-900 text-white">
<div id="vanta-bg" class="fixed inset-0 -z-10"></div>
<header class="py-6 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="code" class="w-8 h-8 text-indigo-400"></i>
<h1 class="text-2xl font-bold gradient-text">Code Whisperer</h1>
</div>
<nav>
<ul class="flex space-x-6">
<li><a href="#" class="hover:text-indigo-300 transition">Home</a></li>
<li><a href="#" class="hover:text-indigo-300 transition">Features</a></li>
<li><a href="#" class="hover:text-indigo-300 transition">About</a></li>
</ul>
</nav>
</div>
</header>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<section class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold mb-6 gradient-text">What Does It Do?</h2>
<p class="text-xl text-slate-300 max-w-3xl mx-auto">
I craft beautiful, responsive websites with cutting-edge UI/UX design using only HTML, CSS, and JavaScript.
</p>
</section>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-slate-800/50 rounded-xl p-6 backdrop-blur-sm border border-slate-700/50 hover:border-indigo-400/50 transition">
<div class="w-12 h-12 bg-indigo-500/20 rounded-lg flex items-center justify-center mb-4">
<i data-feather="layout" class="w-6 h-6 text-indigo-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Stunning UI Design</h3>
<p class="text-slate-300">I create visually appealing interfaces with attention to detail and modern design principles.</p>
</div>
<div class="bg-slate-800/50 rounded-xl p-6 backdrop-blur-sm border border-slate-700/50 hover:border-indigo-400/50 transition">
<div class="w-12 h-12 bg-indigo-500/20 rounded-lg flex items-center justify-center mb-4">
<i data-feather="smartphone" class="w-6 h-6 text-indigo-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Fully Responsive</h3>
<p class="text-slate-300">Every website I build works perfectly on all devices from mobile to desktop.</p>
</div>
<div class="bg-slate-800/50 rounded-xl p-6 backdrop-blur-sm border border-slate-700/50 hover:border-indigo-400/50 transition">
<div class="w-12 h-12 bg-indigo-500/20 rounded-lg flex items-center justify-center mb-4">
<i data-feather="zap" class="w-6 h-6 text-indigo-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Modern Tech Stack</h3>
<p class="text-slate-300">I use TailwindCSS, Feather Icons, and Vanta.js for interactive, animated experiences.</p>
</div>
</div>
<section class="mt-20">
<div class="code-block rounded-xl p-6 overflow-hidden">
<div class="flex items-center mb-4">
<div class="flex space-x-2 mr-4">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<span class="text-sm text-slate-400">example.html</span>
</div>
<pre class="text-slate-200 font-mono text-sm overflow-x-auto"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Website</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gradient-to-br from-indigo-900 to-purple-800">
<h1 class="text-4xl font-bold text-center text-white py-20">
Hello Beautiful World!
</h1>
</body>
</html></code></pre>
</div>
</section>
</main>
<footer class="py-8 px-4 border-t border-slate-800 mt-12">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
<p class="text-slate-400 mb-4 md:mb-0">© 2023 Code Whisperer. All magic reserved.</p>
<div class="flex space-x-4">
<a href="#" class="text-slate-400 hover:text-indigo-400 transition"><i data-feather="github"></i></a>
<a href="#" class="text-slate-400 hover:text-indigo-400 transition"><i data-feather="twitter"></i></a>
<a href="#" class="text-slate-400 hover:text-indigo-400 transition"><i data-feather="linkedin"></i></a>
</div>
</div>
</footer>
<script>
VANTA.WAVES({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3b82f6,
shininess: 35.00,
waveHeight: 15.00,
waveSpeed: 0.85,
zoom: 0.85
})
</script>
<script>
feather.replace();
</script>
</body>
</html>
|