GIIS-Hackathon-2024/old_index.html at main · HarshitGupta77/GIIS-Hackathon-2024 · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Life on the Elements</title>
    <link rel="stylesheet" href="styles.css">
    <script src="js/three.min.js"></script>
</head>
<body>
    <header>
        <div class="container">
            <h1>Life on the Elements</h1>
            <nav>
                <ul>
                    <li><a href="#earth">Earth</a></li>
                    <li><a href="#water">Water</a></li>
                    <li><a href="#air">Air</a></li>
                    <li><a href="#fire">Fire</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <section id="earth" class="parallax" style="background-image: url('earth-bg.jpg');">
            <div class="content">
                <h2>Life on Earth</h2>
                <div id="earth-3d"></div>
                <p>Earth is home to a vast array of life forms, from the tiniest microorganisms to the largest mammals. Diverse ecosystems like forests, deserts, and oceans support different types of life.</p>
                <img src="earth-life.jpg" alt="Life on Earth" class="element-image">
            </div>
        </section>
        <section id="water" class="parallax" style="background-image: url('water-bg.jpg');">
            <div class="content">
                <h2>Life in Water</h2>
                <p>Water bodies, including oceans, rivers, and lakes, are teeming with life. Aquatic ecosystems support species such as fish, algae, and aquatic mammals.</p>
                <img src="water-life.jpg" alt="Life in Water" class="element-image">
            </div>
        </section>
        <section id="air" class="parallax" style="background-image: url('air-bg.jpg');">
            <div class="content">
                <h2>Life in the Air</h2>
                <p>Air habitats are crucial for birds, insects, and microorganisms. The atmosphere supports the migration and survival of many airborne species.</p>
                <img src="air-life.jpg" alt="Life in the Air" class="element-image">
            </div>
        </section>
        <section id="fire" class="parallax" style="background-image: url('fire-bg.jpg');">
            <div class="content">
                <h2>Life with Fire</h2>
                <p>Fire is less about life forms directly, but it plays a role in ecosystems by influencing the environment. Some species, like certain types of beetles, have adapted to environments affected by fire.</p>
                <img src="fire-life.jpg" alt="Life with Fire" class="element-image">
            </div>
        </section>
    </main>
    <footer>
        <div class="container">
            <p>&copy; 2024 Life on the Elements</p>
        </div>
    </footer>
    <script src="scripts.js"></script>
</body>
</html>