Foxes-Night-s-Enigma/index.html at main · mangofoxplay/Foxes-Night-s-Enigma · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foxes: Night's Enigma</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <div class="background-effects">
        <div class="particle-container">
            <!-- Add about 20-50 particle divs for a decent effect -->
            <!-- More particles = denser effect, but more CSS to manage -->
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <!-- You can add more, up to 50-100 if you manage the nth-child rules -->
        </div>
    </div>

    <header class="hero-section">
        <div class="hero-overlay"></div>
        <div class="hero-content">
            <h1>Foxes: <span class="highlight">Night's Enigma</span></h1>
            <p class="hero-subtitle">Cunning, beautiful, and incredibly adaptable creatures of the wild.</p>
            <a href="#about" class="cta-button"><span>Descend into Darkness</span> →</a>
        </div>
    </header>

    <main>
        <section id="about" class="content-section glass-card">
            <div class="container">
                <h2><span class="highlight-alt">Whispers</span> of the Wild</h2>
                <p>Foxes are captivating creatures, masters of adaptation, thriving in the shadows and edges of our world. Their intelligence and elusive nature have woven them into folklore and fascination for centuries. From the fiery red fox to the ethereal arctic fox, each species tells a unique story of survival.</p>
            </div>
        </section>

        <section id="characteristics" class="content-section">
            <div class="container">
                <h2 class="section-title">Illuminated <span class="highlight-alt">Traits</span></h2>
                <div class="feature-grid">
                    <div class="feature-item glass-card">
                        <div class="feature-icon-wrapper">
                             <i class="fas fa-moon icon-glow"></i>
                        </div>
                        <h3>Nocturnal Prowess</h3>
                        <p>Primarily active under the cloak of darkness, their senses are heightened for nighttime hunts.</p>
                    </div>
                    <div class="feature-item glass-card feature-item-full-image">
                        <img src="https://lh3.googleusercontent.com/proxy/qLyjg4Sf0u6arlFYNF6kTsadheRs-Tt7f3CqvFbayT9IAJmbPCqSCTq6ciEeOXE7w6-ccNnf5ZJccwevBTr3xNyzizg9Zu5ZbkyC_30b5evUVFTblyNoqdU" alt="Fox eating berries" class="feature-card-image">
                        <div class="feature-text-content">
                            <h3>Omnivorous Diet</h3>
                            <p>Their diet includes rodents, rabbits, birds, insects, fruits, and berries, showcasing their adaptability.</p>
                        </div>
                    </div>
                    <div class="feature-item glass-card">
                        <div class="feature-icon-wrapper">
                            <i class="fas fa-snowflake icon-glow"></i>
                        </div>
                        <h3>Arctic Phantoms</h3>
                        <p>The Arctic Fox, a marvel of adaptation, changes its coat to blend seamlessly with snow and tundra.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="gallery-section" class="content-section">
            <div class="container">
                <h2 class="section-title">Visions in <span class="highlight-alt">Orange Haze</span></h2>
                <div class="gallery-container">
                    <button class="gallery-nav prev" id="galleryPrevBtn"><i class="fas fa-chevron-left"></i></button>
                    <div class="gallery-wrapper" id="galleryWrapper">
                        <div class="gallery-grid" id="galleryGrid">
                            <div class="gallery-item">
                                <img src="https://i.pinimg.com/736x/dc/6a/7f/dc6a7fd140097982e1fb76aafafd02c2.jpg" alt="Red Fox in low light">
                                <div class="gallery-item-overlay"><p>Red Fox</p></div>
                            </div>
                            <div class="gallery-item">
                                <img src="https://external-preview.redd.it/Z_6AzRzSn8yVvISH_iEwWgrkbWbFvzZ2zFlDmGtRzaM.jpg?width=640&crop=smart&auto=webp&s=37db95ff334e412742a11d4776ca45d0efbc50c8" alt="Arctic Fox in the dark">
                                <div class="gallery-item-overlay"><p>Arctic Fox</p></div>
                            </div>
                            <div class="gallery-item">
                                <img src="https://ichef.bbci.co.uk/images/ic/480x270/p0hmj0n6.jpg" alt="Fennec Fox silhouette">
                                <div class="gallery-item-overlay"><p>Fennec Fox</p></div>
                            </div>
                            <div class="gallery-item">
                                <img src="https://images5.alphacoders.com/425/425426.jpg" alt="Fox eyes glowing in dark">
                                <div class="gallery-item-overlay"><p>Night Vision</p></div>
                            </div>
                            <div class="gallery-item">
                                <img src="https://lh3.googleusercontent.com/proxy/AJLm5nfHlgWApAE-fB5hFASTjp6T9mNbuXfNFpLWxl7PnL-cg6Ps5Se5pRNWoDtjtYEKSp-oOCqdk6m_jqkeGvcepg1tXySjZfi161RyFIC7a6sNOF6Q_tJiU-yiZAYvYbdUyKGa" alt="Kit Fox at dusk">
                                <div class="gallery-item-overlay"><p>Kit Fox</p></div>
                            </div>
                            <div class="gallery-item">
                                <img src="https://i.etsystatic.com/27810320/r/il/a39924/3030716457/il_fullxfull.3030716457_9rcl.jpg" alt="Fox prowling">
                                <div class="gallery-item-overlay"><p>Stealthy Hunter</p></div>
                            </div>
                        </div>
                    </div>
                    <button class="gallery-nav next" id="galleryNextBtn"><i class="fas fa-chevron-right"></i></button>
                </div>
            </div>
        </section>

        <section id="habitat" class="content-section glass-card">
            <div class="container">
                <h2>Shadowed <span class="highlight-alt">Realms</span></h2>
                <p>Foxes inhabit a diverse range of environments across the globe. They are found in forests, grasslands, mountains, deserts, and increasingly, in suburban and urban areas. Their adaptability allows them to make a home almost anywhere, often utilizing burrows known as "dens" for shelter and raising young.</p>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
<!--            -->
            <p>Foxes are <span class="highlight-alt">incredible</span>.</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>