File size: 5,286 Bytes
11e7a09 d653834 11e7a09 d653834 11e7a09 |
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 |
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CrimsonFuchsia NoirScape</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#ef4444', // red-500
secondary: '#d946ef' // fuchsia-500
}
}
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<section class="hero bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 mb-12">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">
Welcome to NoirScape
</h1>
<p class="text-xl text-gray-300 mb-8">
A dark-themed UI experience with crimson and fuchsia accents
</p>
<a href="/swimming.html" class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-primary to-secondary text-white font-medium hover:opacity-90 transition">
Swim Training
<i data-feather="arrow-right" class="ml-2"></i>
</a>
</div>
</section>
<section class="features grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
<div class="feature-card bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition">
<div class="icon-box w-12 h-12 rounded-lg bg-red-500/20 flex items-center justify-center mb-4">
<i data-feather="zap" class="text-primary"></i>
</div>
<h3 class="text-xl font-bold mb-2">Fast Performance</h3>
<p class="text-gray-400">Optimized for speed with modern technologies</p>
</div>
<div class="feature-card bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition">
<div class="icon-box w-12 h-12 rounded-lg bg-fuchsia-500/20 flex items-center justify-center mb-4">
<i data-feather="eye" class="text-secondary"></i>
</div>
<h3 class="text-xl font-bold mb-2">Dark UI</h3>
<p class="text-gray-400">Easy on the eyes with beautiful dark mode</p>
</div>
<div class="feature-card bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition">
<div class="icon-box w-12 h-12 rounded-lg bg-gradient-to-r from-red-500/20 to-fuchsia-500/20 flex items-center justify-center mb-4">
<i data-feather="settings" class="text-primary"></i>
</div>
<h3 class="text-xl font-bold mb-2">Customizable</h3>
<p class="text-gray-400">Tailor the experience to your needs</p>
</div>
</section>
<section class="showcase bg-gray-800 rounded-2xl p-8 mb-12">
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="md:w-1/2">
<h2 class="text-3xl font-bold mb-4">Stunning Visuals</h2>
<p class="text-gray-300 mb-6">Our dark theme with red and fuchsia accents creates a visually striking experience that's easy on the eyes.</p>
<ul class="space-y-2">
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2"></i>
<span>Dark mode by default</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2"></i>
<span>Responsive design</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2"></i>
<span>Beautiful color palette</span>
</li>
</ul>
</div>
<div class="md:w-1/2">
<div class="relative rounded-xl overflow-hidden aspect-video bg-gradient-to-br from-gray-700 to-gray-900">
<div class="absolute inset-0 flex items-center justify-center">
<i data-feather="image" class="w-16 h-16 text-gray-600"></i>
</div>
</div>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |