Hugging Face's logo

Spaces:
CommanderLazarus
/
llamas
Running

App Files Community
llamas
File size: 6,914 Bytes 
443dc62
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62d63f8
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Bioluminescent Llamas of Lemuria</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></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>
        .glow-text {
            text-shadow: 0 0 10px rgba(100, 255, 218, 0.8);
        }
        .gradient-bg {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        }
        .llama-card {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        .llama-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(100, 255, 218, 0.2);
        }
    </style>
</head>
<body class="gradient-bg text-white min-h-screen" id="vanta-bg">
    <header class="py-12 px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl md:text-6xl font-bold mb-4 glow-text" data-aos="fade-down">The Bioluminescent Llamas of Lemuria</h1>
        <p class="text-xl md:text-2xl text-blue-200 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
            Mystical creatures that glow with the wisdom of ancient civilizations
        </p>
    </header>

    <main class="container mx-auto px-4 pb-20">
        <section class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-20">
            <div class="flex flex-col justify-center" data-aos="fade-right">
                <h2 class="text-3xl font-bold mb-6 glow-text">Legends of the Glowing Herd</h2>
                <p class="text-lg mb-4 text-blue-100">
                    Deep in the lost continent of Lemuria, herds of bioluminescent llamas roam the crystalline valleys. Their fur emits a soft, pulsating glow that changes color with their emotions - azure when calm, violet when playful, and golden when protective.
                </p>
                <p class="text-lg mb-4 text-blue-100">
                    Ancient texts describe how these llamas were sacred to the Lemurians, serving as living lanterns that illuminated their cities at night and as spiritual guides that could communicate telepathically.
                </p>
            </div>
            <div class="rounded-xl overflow-hidden shadow-2xl" data-aos="fade-left">
                <img src="http://static.photos/abstract/1024x576/42" alt="Glowing llama illustration" class="w-full h-full object-cover">
            </div>
        </section>

        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-12 text-center glow-text" data-aos="fade-up">Unique Characteristics</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="llama-card p-6 rounded-xl" data-aos="fade-up" data-aos-delay="100">
                    <div class="text-blue-300 mb-4">
                        <i data-feather="moon" class="w-10 h-10"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Night Illumination</h3>
                    <p class="text-blue-100">Their bioluminescence intensifies at night, creating natural light shows that guided Lemurian travelers.</p>
                </div>
                <div class="llama-card p-6 rounded-xl" data-aos="fade-up" data-aos-delay="200">
                    <div class="text-purple-300 mb-4">
                        <i data-feather="cpu" class="w-10 h-10"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Telepathic Abilities</h3>
                    <p class="text-blue-100">They communicate through complex thought patterns, sharing ancient knowledge with chosen humans.</p>
                </div>
                <div class="llama-card p-6 rounded-xl" data-aos="fade-up" data-aos-delay="300">
                    <div class="text-green-300 mb-4">
                        <i data-feather="droplet" class="w-10 h-10"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Healing Properties</h3>
                    <p class="text-blue-100">Their fur contains enzymes that accelerate healing, used in Lemurian medical practices.</p>
                </div>
            </div>
        </section>

        <section class="bg-black bg-opacity-30 rounded-xl p-8 mb-20" data-aos="fade-up">
            <h2 class="text-3xl font-bold mb-6 glow-text">Modern Sightings</h2>
            <p class="text-lg mb-6 text-blue-100">
                Though Lemuria sank beneath the waves millennia ago, reports persist of glowing llamas appearing on remote mountain peaks during certain planetary alignments. Cryptozoologists believe small populations may have survived in hidden valleys or underground caverns.
            </p>
            <div class="flex flex-wrap gap-4">
                <span class="px-4 py-2 bg-blue-900 bg-opacity-50 rounded-full">Andes Mountains</span>
                <span class="px-4 py-2 bg-blue-900 bg-opacity-50 rounded-full">Himalayan Valleys</span>
                <span class="px-4 py-2 bg-blue-900 bg-opacity-50 rounded-full">Easter Island</span>
            </div>
        </section>

        <section class="text-center">
            <h2 class="text-3xl font-bold mb-6 glow-text" data-aos="fade-up">Join the Expedition</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto text-blue-100" data-aos="fade-up" data-aos-delay="100">
                We're organizing a research mission to document these magnificent creatures. Be part of this historic discovery.
            </p>
            <button class="px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full font-bold hover:from-blue-600 hover:to-purple-700 transition-all transform hover:scale-105 shadow-lg" data-aos="fade-up" data-aos-delay="200">
                Register Interest
            </button>
        </section>
    </main>

    <footer class="py-8 text-center text-blue-300 border-t border-blue-900">
        <p>© 2023 Lemurian Wildlife Society</p>
    </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: 0x3f82ff,
            backgroundColor: 0x0f172a,
            size: 0.8
        });
    </script>
    <script>AOS.init();</script>
    <script>feather.replace();</script>
</body>
</html>